npm package: @libs-ui/components-breadcrumb
Description: > Component Breadcrumb để hiển thị tiến trình của một quy trình gồm nhiều bước.
Latest version: 0.2.356-23

# @libs-ui/components-breadcrumb

> Component Breadcrumb để hiển thị tiến trình của một quy trình gồm nhiều bước.

## Giới thiệu

`LibsUiComponentsBreadcrumbComponent` là một standalone Angular component được thiết kế để hiển thị các bước trong một flowchart hoặc tiến trình làm việc. Mỗi bước có thể có trạng thái hoàn thành, đang chọn hoặc vô hiệu hóa.

### Tính năng

- ✅ Hỗ trợ nhiều chế độ hiển thị (center, left, right).
- ✅ Tùy chỉnh chiều rộng khoảng cách giữa các bước.
- ✅ Tích hợp đa ngôn ngữ cho tiêu đề các bước.
- ✅ Điều khiển linh hoạt qua `FunctionsControl` (set selected, set completed, disable steps...).
- ✅ Sử dụng Angular Signals cho tính phản hồi cao.
- ✅ OnPush Change Detection tối ưu hiệu năng.

## Khi nào sử dụng

- Khi người dùng cần biết họ đang ở đâu trong một quy trình gồm nhiều bước.
- Khi cần hướng dẫn người dùng hoàn thành các bước theo một trình tự nhất định.
- Phù hợp cho các form đăng ký nhiều bước, quy trình checkout, hoặc thiết lập thông số.

## Cài đặt

```bash
npm install @libs-ui/components-breadcrumb
```

## Import

```typescript
import { LibsUiComponentsBreadcrumbComponent } from '@libs-ui/components-breadcrumb';

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

## Ví dụ

### Basic

```html
<libs_ui-components-breadcrumb [steps]="breadcrumbSteps" />
```

### Với External Controls

```html
<libs_ui-components-breadcrumb
  [steps]="breadcrumbSteps"
  (outFunctionControl)="onFunctionsControl($event)" />
```

## API

### libs_ui-components-breadcrumb

#### Inputs

| Property             | Type                            | Default     | Description                                         |
| -------------------- | ------------------------------- | ----------- | --------------------------------------------------- |
| `[width]`            | `number`                        | `24`        | Chiều rộng của dải ngăn cách giữa các bước (pixel). |
| `[mode]`             | `'center' \| 'left' \| 'right'` | `'center'`  | Chế độ hiển thị của breadcrumb.                     |
| `[(steps)]`          | `Array<ITabBreadCrumb>`         | `undefined` | Danh sách các bước breadcrumb.                      |
| `[classInclude]`     | `string`                        | `undefined` | Class CSS bổ sung cho container.                    |
| `[(completedIndex)]` | `Array<number>`                 | `[]`        | Danh sách index các bước đã hoàn thành.             |
| `[backgroundWhite]`  | `boolean`                       | `undefined` | Có sử dụng nền trắng cho container không.           |

#### Outputs

| Property               | Type                              | Description                                    |
| ---------------------- | --------------------------------- | ---------------------------------------------- |
| `(outStepSelected)`    | `ITabBreadCrumbSelected`          | Emit khi người dùng click vào một bước.        |
| `(outFunctionControl)` | `IBreadCrumbFunctionControlEvent` | Emit object chứa các hàm điều khiển component. |

#### FunctionsControl Methods

| Method               | Parameters                          | Description                                    |
| -------------------- | ----------------------------------- | ---------------------------------------------- |
| `setSelectedStep`    | `index: number`                     | Thiết lập bước đang được chọn.                 |
| `setCompletedStep`   | `complete: boolean, index: number`  | Đánh dấu một bước là đã hoàn thành hoặc chưa.  |
| `setStepDisable`     | `steps: Array<number>`              | Thiết lập danh sách các bước bị vô hiệu hóa.   |
| `getCompleteIndex`   | -                                   | Trả về danh sách index các bước đã hoàn thành. |
| `getSelectedIndex`   | -                                   | Trả về index bước hiện tại đang được chọn.     |
| `resetCompleteIndex` | `resetAll: boolean, index?: number` | Reset trạng thái hoàn thành của các bước.      |

## Types & Interfaces

```typescript
export interface ITabBreadCrumb {
  number: number;
  title: string;
  valid?: boolean;
  disable?: boolean;
  classInclude?: string;
}

export interface ITabBreadCrumbSelected {
  index: number;
}

export interface IBreadCrumbFunctionControlEvent {
  setSelectedStep: (index: number) => Promise<void>;
  setCompletedStep: (complete: boolean, index: number) => Promise<void>;
  setStepDisable: (steps: Array<number>) => Promise<void>;
  getCompleteIndex: () => Promise<Array<number>>;
  getSelectedIndex: () => Promise<number>;
  resetCompleteIndex: (resetAll: boolean, index?: number) => Promise<void>;
}
```

## Công nghệ

| Technology      | Version | Purpose          |
| --------------- | ------- | ---------------- |
| Angular         | 18+     | Framework        |
| Angular Signals | -       | State management |
| TailwindCSS     | 3.x     | Styling          |
| OnPush          | -       | Change Detection |

## License

MIT