npm package: @libs-ui/components-process-bar-standard
Description: > Component hiển thị tiến trình dạng thanh (stack hoặc separate) với hỗ trợ Steps linh hoạt.
Latest version: 0.2.356-23

# @libs-ui/components-process-bar-standard

> Component hiển thị tiến trình dạng thanh (stack hoặc separate) với hỗ trợ Steps linh hoạt.

## Giới thiệu

`LibsUiComponentsProcessBarStandardComponent` là một standalone Angular component được thiết kế để hiển thị các thanh tiến trình (progress bar). Component hỗ trợ 2 chế độ chính: **Stack** (các bước nối liền nhau) và **Separate** (các bước tách rời). Đặc biệt component tích hợp sâu với **Angular Signals** để tối ưu hóa hiệu năng render.

### Tính năng

- ✅ 2 Chế độ hiển thị: Stack & Separate
- ✅ Hỗ trợ Nested Signals cho các bước (Steps)
- ✅ Auto Calculate Percentage
- ✅ Custom Label & Styling cho từng bước
- ✅ OnPush Change Detection
- ✅ Standalone Component
- ✅ Angular Signals Native

## Khi nào sử dụng

- Hiển thị tiến trình download/upload.
- Hiển thị trạng thái của quy trình đa bước (Stack).
- Hiển thị so sánh các chỉ số (Separate).
- Hiển thị dashboard widget với dữ liệu realtime.

## Cài đặt

```bash
# npm
npm install @libs-ui/components-process-bar-standard

# yarn
yarn add @libs-ui/components-process-bar-standard
```

## Import

```typescript
import { LibsUiComponentsProcessBarStandardComponent } from '@libs-ui/components-process-bar-standard';

@Component({
  standalone: true,
  imports: [LibsUiComponentsProcessBarStandardComponent],
  // ...
})
export class YourComponent {}
```

## Ví dụ

### Basic Stack

```html
<libs_ui-components-process_bar-standard [config]="config" />
```

```typescript
// Define Steps
const step1 = signal<IProcessBarStandardStepInterface>({ value: 30, color: '#EF4444' });
const step2 = signal<IProcessBarStandardStepInterface>({ value: 50, color: '#3B82F6' });

// Config
readonly config = signal<IProcessBarStandardInterface>({
  width: '100%',
  totalValue: 100,
  mode: 'stack',
  steps: signal([step1, step2])
});
```

## API

### libs_ui-components-process_bar-standard

#### Inputs

| Property   | Type                                        | Default    | Description                                 |
| ---------- | ------------------------------------------- | ---------- | ------------------------------------------- |
| `[config]` | `InputSignal<IProcessBarStandardInterface>` | `Required` | Object configuration chứa toàn bộ settings. |

#### IProcessBarStandardInterface

| Property          | Type                                     | Description                                      |
| ----------------- | ---------------------------------------- | ------------------------------------------------ |
| `width`           | `string`                                 | Chiều rộng component (vd: '100%').               |
| `height`          | `string`                                 | Chiều cao component.                             |
| `backgroundColor` | `string`                                 | Màu nền của container (unused in separate mode). |
| `radius`          | `number`                                 | Độ bo góc (px).                                  |
| `totalValue`      | `number`                                 | Giá trị tổng để tính phần trăm.                  |
| `mode`            | `'stack' \| 'separate'`                  | Chế độ hiển thị.                                 |
| `steps`           | `WritableSignal<WritableSignal<Step>[]>` | Array các steps (Signals).                       |
| `classInclude`    | `string`                                 | Custom class cho container.                      |
| `showPercent`     | `boolean`                                | Hiển thị phần trăm (Separate mode).              |

#### IProcessBarStandardStepInterface

| Property       | Type      | Description                               |
| -------------- | --------- | ----------------------------------------- |
| `value`        | `number`  | Giá trị của bước.                         |
| `color`        | `string`  | Màu sắc của bước.                         |
| `label`        | `string`  | Label hiển thị.                           |
| `classInclude` | `string`  | Custom class cho step bar.                |
| `classLabel`   | `string`  | Custom class cho label.                   |
| `showPercent`  | `boolean` | Override hiển thị phần trăm cho step này. |

## Types & Interfaces

```typescript
import { IProcessBarStandardInterface, IProcessBarStandardStepInterface } from '@libs-ui/components-process-bar-standard';
```

## Styling

Component sử dụng inline styles cho các thuộc tính dynamic (width, height, color) và TailwindCSS cho layout cơ bản.

## Công nghệ

| Technology      | Version | Purpose          |
| --------------- | ------- | ---------------- |
| Angular         | 18+     | Framework        |
| Angular Signals | -       | State management |
| OnPush          | -       | Change Detection |

## Demo

```bash
npx nx serve core-ui
```

Truy cập path: `/components/process-bar/standard` (tùy thuộc vào config routing của bạn).