@libs-ui/components-breadcrumb 0.2.277 → 0.2.279

package/README.md

@@ -1,3 +1,211 @@
-# breadcrumb
+# Breadcrumb
 
-This library was generated with [Nx](https://nx.dev).
+## Giới thiệu
+
+`@libs-ui/components-breadcrumb` là một component Angular giúp hiển thị đường dẫn phân cấp (breadcrumb) hoặc tiến trình theo các bước, với khả năng đánh dấu bước đã hoàn thành, bước đang chọn, và bước vô hiệu hóa.
+
+## Tính năng
+
+- Hiển thị danh sách các bước với số và tiêu đề
+- Hỗ trợ trạng thái hoàn thành (completed), chọn (selected), và vô hiệu hóa (disabled)
+- Căn chỉnh linh hoạt: `center` | `left` | `right`
+- Tùy chỉnh CSS class cho mỗi bước
+- Phát ra sự kiện khi người dùng chọn bước
+- Hỗ trợ nền trắng (backgroundWhite)
+
+## Cài đặt
+
+### Yêu cầu
+
+- Angular 18.0.0 trở lên
+- Tailwind CSS 3.3.0 trở lên (nếu sử dụng Tailwind)
+
+### Hướng dẫn cài đặt
+
+```bash
+npm install @libs-ui/components-breadcrumb
+```
+
+hoặc
+
+```bash
+yarn add @libs-ui/components-breadcrumb
+```
+
+## Sử dụng
+
+### Import và sử dụng ngay trong template
+
+```typescript
+import { Component } from '@angular/core';
+import { LibsUiComponentsBreadcrumbComponent } from '@libs-ui/components-breadcrumb';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [LibsUiComponentsBreadcrumbComponent],
+  template: `
+    <libs_ui-components-breadcrumb
+      [steps]="steps"
+      [completedIndex]="[1]"
+      [mode]="'center'"
+    ></libs_ui-components-breadcrumb>
+  `
+})
+export class ExampleComponent {
+  steps = [
+    { number: 1, title: 'Bước 1' },
+    { number: 2, title: 'Bước 2' },
+    { number: 3, title: 'Bước 3' }
+  ];
+}
+```
+
+#### Sử dụng với file HTML riêng biệt
+
+```typescript
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [LibsUiComponentsBreadcrumbComponent],
+  templateUrl: './example.component.html'
+})
+export class ExampleComponent {}
+```
+
+```html
+<libs_ui-components-breadcrumb
+  [steps]="steps"
+  [completedIndex]="[1]"
+  mode="left"
+></libs_ui-components-breadcrumb>
+```
+
+## Công nghệ sử dụng
+
+- **Angular 18**: Sử dụng standalone components và Signals
+- **Tailwind CSS**: Tùy chọn cho styling
+
+## API Reference
+
+### Inputs
+
+| Tên             | Kiểu dữ liệu             | Mặc định    | Mô tả                                                       |
+|-----------------|--------------------------|-------------|-------------------------------------------------------------|
+| width           | `number`                 | `24`        | Chiều rộng mỗi bước (pixel)                                |
+| mode            | `TYPE_MODE_BREADCRUMB`   | `'center'`  | Căn chỉnh breadcrumb: `center`  `left`  `right`    |
+| steps           | `Array<ITabBreadCrumb>`  | `[]`        | Danh sách các bước với số và tiêu đề                        |
+| classInclude    | `string`                 | `undefined` | CSS class bổ sung cho mỗi bước                              |
+| completedIndex  | `Array<number>`          | `[]`        | Các index bước đã hoàn thành                                |
+| backgroundWhite | `boolean`                | `false`     | Bật nền trắng khi `true`                                    |
+
+### Outputs
+
+| Tên             | Kiểu dữ liệu                          | Mô tả                                               |
+|-----------------|---------------------------------------|-----------------------------------------------------|
+| outStepSelected | `(ITabBreadCrumbSelected) => void`    | Phát ra sự kiện khi chọn bước, trả về `{ index }`   |
+
+### Interfaces
+
+#### `ITabBreadCrumb`
+
+```typescript
+export interface ITabBreadCrumb {
+  number: number;
+  title: string;
+  valid?: boolean;
+  config?: IPopover;
+  disable?: boolean;
+  classInclude?: string;
+}
+```
+
+#### `TYPE_MODE_BREADCRUMB`
+
+```typescript
+export type TYPE_MODE_BREADCRUMB = 'center' | 'left' | 'right';
+```
+
+## Ví dụ
+
+### Breadcrumb cơ bản
+
+**TypeScript (breadcrumb-basic.component.ts):**
+
+```typescript
+import { Component } from '@angular/core';
+import { LibsUiComponentsBreadcrumbComponent } from '@libs-ui/components-breadcrumb';
+
+@Component({
+  selector: 'app-breadcrumb-basic',
+  standalone: true,
+  imports: [LibsUiComponentsBreadcrumbComponent],
+  template: `
+    <libs_ui-components-breadcrumb
+      [steps]="steps"
+    ></libs_ui-components-breadcrumb>
+  `
+})
+export class BreadcrumbBasicComponent {
+  steps = [
+    { number: 1, title: 'Bước 1' },
+    { number: 2, title: 'Bước 2' },
+    { number: 3, title: 'Bước 3' }
+  ];
+}
+```
+
+### Breadcrumb với các chế độ căn chỉnh
+
+**HTML (breadcrumb-mode.component.html):**
+
+```html
+<div class="flex gap-4">
+  <libs_ui-components-breadcrumb
+    [steps]="steps"
+    mode="left"
+  ></libs_ui-components-breadcrumb>
+  <libs_ui-components-breadcrumb
+    [steps]="steps"
+    mode="center"
+  ></libs_ui-components-breadcrumb>
+  <libs_ui-components-breadcrumb
+    [steps]="steps"
+    mode="right"
+  ></libs_ui-components-breadcrumb>
+</div>
+```
+
+### Breadcrumb với bước hoàn thành và vô hiệu hóa
+
+**TypeScript (breadcrumb-status.component.ts):**
+
+```typescript
+import { Component } from '@angular/core';
+import { LibsUiComponentsBreadcrumbComponent } from '@libs-ui/components-breadcrumb';
+
+@Component({
+  selector: 'app-breadcrumb-status',
+  standalone: true,
+  imports: [LibsUiComponentsBreadcrumbComponent],
+  templateUrl: './breadcrumb-status.component.html'
+})
+export class BreadcrumbStatusComponent {
+  steps = [
+    { number: 1, title: 'Bước 1', valid: true },
+    { number: 2, title: 'Bước 2', valid: false },
+    { number: 3, title: 'Bước 3', disable: true },
+    { number: 4, title: 'Bước 4' }
+  ];
+  completedIndex = [0];
+}
+```
+
+**HTML (breadcrumb-status.component.html):**
+
+```html
+<libs_ui-components-breadcrumb
+  [steps]="steps"
+  [completedIndex]="completedIndex"
+></libs_ui-components-breadcrumb>
+```

package/demo/breadcrumb-demo.component.d.ts

@@ -0,0 +1,40 @@
+import { ITabBreadCrumb, TYPE_MODE_BREADCRUMB, ITabBreadCrumbMultiStep, ITabBreadCrumbMultiStepSelected } from '../interfaces/breadcrumb.interface';
+import * as i0 from "@angular/core";
+export declare class LibsUiComponentsBreadcrumbDemoComponent {
+    inputsDoc: {
+        name: string;
+        type: string;
+        default: string;
+        description: string;
+    }[];
+    interfacesDoc: {
+        name: string;
+        code: string;
+        description: string;
+    }[];
+    outputsDoc: {
+        name: string;
+        type: string;
+        description: string;
+    }[];
+    features: {
+        id: number;
+        title: string;
+        description: string;
+    }[];
+    stepsBasic: ITabBreadCrumb[];
+    alignOptions: TYPE_MODE_BREADCRUMB[];
+    stepsStatus: ITabBreadCrumb[];
+    completedIndicesStatus: number[];
+    arrowSteps: ITabBreadCrumbMultiStep[];
+    copyToClipboard(text: string): void;
+    demoSteps: ITabBreadCrumb[];
+    selectedStepIndex: number;
+    onArrowStepSelected(event: ITabBreadCrumbMultiStepSelected<any>): void;
+    changeStep(index: number): void;
+    onStepSelected(event: {
+        index: number;
+    }): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiComponentsBreadcrumbDemoComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsBreadcrumbDemoComponent, "lib-breadcrumb-demo", never, {}, {}, never, never, true, never>;
+}

package/esm2022/demo/breadcrumb-demo.component.mjs

@@ -0,0 +1,97 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LibsUiComponentsBreadcrumbComponent } from '../breadcrumb.component';
+import { LibsUiComponentsBreadcrumbMultiStepComponent } from '../multi-step/multi-step.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export class LibsUiComponentsBreadcrumbDemoComponent {
+    // Input documentation
+    inputsDoc = [
+        { name: 'width', type: 'number', default: '24', description: 'Chiều rộng mỗi bước trong breadcrumb' },
+        { name: 'mode', type: 'TYPE_MODE_BREADCRUMB', default: 'center', description: 'Căn chỉnh: center | left | right' },
+        { name: 'steps', type: 'Array<ITabBreadCrumb>', default: '[]', description: 'Danh sách các bước hiển thị' },
+        { name: 'classInclude', type: 'string', default: 'undefined', description: 'Lớp CSS bổ sung cho mỗi bước' },
+        { name: 'completedIndex', type: 'Array<number>', default: '[]', description: 'Các chỉ số của bước đã hoàn thành' },
+        { name: 'backgroundWhite', type: 'boolean', default: 'false', description: 'Nền trắng cho breadcrumb khi true' }
+    ];
+    // Interface documentation
+    interfacesDoc = [
+        {
+            name: 'ITabBreadCrumb',
+            code: 'interface ITabBreadCrumb { number: number; title: string; valid?: boolean; config?: IPopover; disable?: boolean; classInclude?: string; }',
+            description: 'Định nghĩa từng bước trong breadcrumb'
+        },
+        {
+            name: 'TYPE_MODE_BREADCRUMB',
+            code: "type TYPE_MODE_BREADCRUMB = 'center' | 'left' | 'right';",
+            description: 'Chế độ căn chỉnh của breadcrumb'
+        }
+    ];
+    // Output documentation
+    outputsDoc = [
+        { name: 'outStepSelected', type: '(ITabBreadCrumbSelected) => void', description: 'Phát ra sự kiện khi chọn bước, trả về { index }' },
+        { name: 'outFunctionControl', type: 'IBreadCrumbFunctionControlEvent', description: 'Cung cấp API để điều khiển component (setSelectedStep, setCompletedStep, ...)' }
+    ];
+    // Features overview
+    features = [
+        { id: 1, title: 'Đánh dấu bước hoàn thành', description: 'Cho phép hiển thị trạng thái đã hoàn thành cho các bước' },
+        { id: 2, title: 'Sự kiện chọn bước', description: 'Phát ra sự kiện khi người dùng chọn bước' },
+        { id: 3, title: 'Tùy chỉnh linh hoạt', description: 'Cho phép cấu hình nhiều tuỳ chọn khác nhau cho breadcrumb' }
+    ];
+    // Demo data sets
+    stepsBasic = [
+        { number: 1, title: 'Bước 1' },
+        { number: 2, title: 'Bước 2' },
+        { number: 3, title: 'Bước 3' }
+    ];
+    alignOptions = ['left', 'center', 'right'];
+    stepsStatus = [
+        { number: 1, title: 'Bước 1', valid: true },
+        { number: 2, title: 'Bước 2', valid: false },
+        { number: 3, title: 'Bước 3', disable: true },
+        { number: 4, title: 'Bước 4' }
+    ];
+    completedIndicesStatus = [0, 1];
+    // Arrow style breadcrumb (multi-step) demo data
+    arrowSteps = [
+        { number: 1, title: 'Bước 1', status: 'completed', type: 'text' },
+        { number: 2, title: 'Bước 2', status: 'selected', type: 'text' },
+        { number: 3, title: 'Bước 3', status: 'normal', type: 'text' }
+    ];
+    // Method for installation copy button
+    copyToClipboard(text) {
+        navigator.clipboard.writeText(text)
+            .then(() => console.log('Text copied to clipboard'))
+            .catch(err => console.error('Could not copy text: ', err));
+    }
+    // Demo data
+    demoSteps = [
+        { number: 1, title: 'Bước 1', valid: true },
+        { number: 2, title: 'Bước 2', valid: false },
+        { number: 3, title: 'Bước 3', valid: false }
+    ];
+    selectedStepIndex = 0;
+    // Handle arrow demo selection event
+    onArrowStepSelected(event) {
+        console.log('Arrow step selected:', event);
+    }
+    // Change selected step programmatically
+    changeStep(index) {
+        this.selectedStepIndex = index;
+    }
+    // Handle component's output event
+    onStepSelected(event) {
+        this.selectedStepIndex = event.index;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsBreadcrumbDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LibsUiComponentsBreadcrumbDemoComponent, isStandalone: true, selector: "lib-breadcrumb-demo", ngImport: i0, template: "<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n  <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n    <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Demo Breadcrumb Component</h1>\n    <p class=\"text-xl text-gray-500\">Th\u01B0 vi\u1EC7n Breadcrumb cho Angular</p>\n  </header>\n\n  <main>\n    <!-- Gi\u1EDBi thi\u1EC7u -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Gi\u1EDBi thi\u1EC7u</h2>\n      <p>\n        <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">&#64;libs-ui/components-breadcrumb</code> l\u00E0 m\u1ED9t component Angular gi\u00FAp hi\u1EC3n th\u1ECB \u0111\u01B0\u1EDDng d\u1EABn ph\u00E2n c\u1EA5p ho\u1EB7c ti\u1EBFn tr\u00ECnh theo c\u00E1c b\u01B0\u1EDBc, v\u1EDBi kh\u1EA3 n\u0103ng \u0111\u00E1nh d\u1EA5u b\u01B0\u1EDBc \u0111\u00E3 ho\u00E0n th\u00E0nh, b\u01B0\u1EDBc \u0111ang ch\u1ECDn, v\u00E0 b\u01B0\u1EDBc v\u00F4 hi\u1EC7u h\u00F3a.\n      </p>\n    </section>\n\n    <!-- C\u00E0i \u0111\u1EB7t -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E0i \u0111\u1EB7t</h2>\n      <div class=\"mb-6\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Y\u00EAu c\u1EA7u</h3>\n        <ul class=\"list-disc pl-5 space-y-2 text-gray-600\">\n          <li><span class=\"font-semibold\">Angular</span>: 18.0.0 tr\u1EDF l\u00EAn</li>\n        </ul>\n      </div>\n      <p class=\"mb-4\">\u0110\u1EC3 c\u00E0i \u0111\u1EB7t th\u01B0 vi\u1EC7n:</p>\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>npm install &#64;libs-ui/components-breadcrumb</code></pre>\n        <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\" (click)=\"copyToClipboard('npm install @libs-ui/components-breadcrumb')\">Sao ch\u00E9p</button>\n      </div>\n      <p class=\"mb-4\">Ho\u1EB7c v\u1EDBi yarn:</p>\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>yarn add &#64;libs-ui/components-breadcrumb</code></pre>\n        <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\" (click)=\"copyToClipboard('yarn add @libs-ui/components-breadcrumb')\">Sao ch\u00E9p</button>\n      </div>\n    </section>\n\n    <!-- Demo tr\u1EF1c ti\u1EBFp -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Demo Tr\u1EF1c ti\u1EBFp</h2>\n\n      <!-- Basic demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Breadcrumb c\u01A1 b\u1EA3n</h3>\n        <div class=\"p-4 bg-gray-50 rounded-lg\">\n          <libs_ui-components-breadcrumb [steps]=\"stepsBasic\"></libs_ui-components-breadcrumb>\n        </div>\n      </div>\n\n      <!-- Mode variants -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Ch\u1EBF \u0111\u1ED9 c\u0103n ch\u1EC9nh</h3>\n        <div class=\"flex items-center gap-6\">\n          <ng-container *ngFor=\"let mode of alignOptions\">\n            <div class=\"text-center\">\n              <div class=\"mb-2\"><code>{{ mode }}</code></div>\n              <libs_ui-components-breadcrumb [steps]=\"stepsBasic\" [mode]=\"mode\"></libs_ui-components-breadcrumb>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n\n      <!-- Status demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Breadcrumb v\u1EDBi tr\u1EA1ng th\u00E1i</h3>\n        <div class=\"p-4 bg-gray-50 rounded-lg\">\n          <libs_ui-components-breadcrumb [steps]=\"stepsStatus\" [completedIndex]=\"completedIndicesStatus\"></libs_ui-components-breadcrumb>\n        </div>\n      </div>\n\n      <!-- Arrow style (Multi-Step) demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Breadcrumb Arrow Style</h3>\n        <div class=\"p-4 bg-gray-50 rounded-lg overflow-auto\">\n          <libs_ui-components-breadcrumb-multi_step\n            [stepsMulti]=\"arrowSteps\"\n            (outMultiStepSelect)=\"onArrowStepSelected($event)\"\n          ></libs_ui-components-breadcrumb-multi_step>\n        </div>\n        <p class=\"mt-2 text-sm text-gray-500\">M\u00F4 t\u1EA3 d\u1EA1ng arrow (Multi-step) s\u1EED d\u1EE5ng separator m\u0169i t\u00EAn.</p>\n      </div>\n    </section>\n\n    <!-- C\u00E1ch s\u1EED d\u1EE5ng -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E1ch s\u1EED d\u1EE5ng</h2>\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">V\u00ED d\u1EE5 s\u1EED d\u1EE5ng</h3>\n        <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-breadcrumb [steps]=\"stepsBasic\" [mode]=\"'center'\"&gt;&lt;/libs_ui-components-breadcrumb&gt;</code></pre>\n      </div>\n    </section>\n\n    <!-- API Reference -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00E0i li\u1EC7u API</h2>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Inputs</h3>\n      <div class=\"overflow-x-auto mb-6\">\n        <table class=\"min-w-full bg-white border border-gray-200\">\n          <thead>\n            <tr>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u</th>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u1EB7c \u0111\u1ECBnh</th>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let input of inputsDoc\">\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.name }}</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.type }}</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.default }}</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.description }}</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Outputs</h3>\n      <div class=\"overflow-x-auto mb-6\">\n        <table class=\"min-w-full bg-white border border-gray-200\">\n          <thead>\n            <tr>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u</th>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let output of outputsDoc\">\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ output.name }}</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ output.type }}</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">{{ output.description }}</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Interfaces</h3>\n      <div class=\"space-y-6\">\n        <div *ngFor=\"let intf of interfacesDoc\" class=\"bg-gray-50 p-6 rounded-lg\">\n          <h4 class=\"text-lg font-semibold text-gray-700 mb-3\">{{ intf.name }}</h4>\n          <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-3\"><code>{{ intf.code }}</code></pre>\n          <p class=\"text-gray-600\">{{ intf.description }}</p>\n        </div>\n      </div>\n    </section>\n  </main>\n</div> ", styles: [".demo-container{max-width:800px;margin:0 auto;padding:16px}.demo-header{text-align:center;margin-bottom:24px}.demo-header h1{font-size:24px;margin:0}.demo-header p{font-size:14px;color:#666}.demo-install pre{background:#f5f5f5;padding:8px;border-radius:4px}.demo-live{margin-top:24px}.step-buttons button{margin-right:8px;margin-top:8px}.demo-api table{width:100%;border-collapse:collapse;margin-top:16px}.demo-api table,.demo-api th,.demo-api td{border:1px solid #ccc}.demo-api th,.demo-api td{padding:8px;text-align:left}.demo-api h3{margin-top:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: LibsUiComponentsBreadcrumbComponent, selector: "libs_ui-components-breadcrumb", inputs: ["width", "mode", "steps", "classInclude", "completedIndex", "backgroundWhite"], outputs: ["stepsChange", "completedIndexChange", "outStepSelected", "outFunctionControl"] }, { kind: "component", type: LibsUiComponentsBreadcrumbMultiStepComponent, selector: "libs_ui-components-breadcrumb-multi_step", inputs: ["popoverCustomConfig", "stepsMulti", "configClassMultiStep", "elementRef"], outputs: ["outMultiStepSelect"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsBreadcrumbDemoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-breadcrumb-demo', standalone: true, imports: [
+                        CommonModule,
+                        LibsUiComponentsBreadcrumbComponent,
+                        LibsUiComponentsBreadcrumbMultiStepComponent
+                    ], template: "<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n  <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n    <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Demo Breadcrumb Component</h1>\n    <p class=\"text-xl text-gray-500\">Th\u01B0 vi\u1EC7n Breadcrumb cho Angular</p>\n  </header>\n\n  <main>\n    <!-- Gi\u1EDBi thi\u1EC7u -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Gi\u1EDBi thi\u1EC7u</h2>\n      <p>\n        <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">&#64;libs-ui/components-breadcrumb</code> l\u00E0 m\u1ED9t component Angular gi\u00FAp hi\u1EC3n th\u1ECB \u0111\u01B0\u1EDDng d\u1EABn ph\u00E2n c\u1EA5p ho\u1EB7c ti\u1EBFn tr\u00ECnh theo c\u00E1c b\u01B0\u1EDBc, v\u1EDBi kh\u1EA3 n\u0103ng \u0111\u00E1nh d\u1EA5u b\u01B0\u1EDBc \u0111\u00E3 ho\u00E0n th\u00E0nh, b\u01B0\u1EDBc \u0111ang ch\u1ECDn, v\u00E0 b\u01B0\u1EDBc v\u00F4 hi\u1EC7u h\u00F3a.\n      </p>\n    </section>\n\n    <!-- C\u00E0i \u0111\u1EB7t -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E0i \u0111\u1EB7t</h2>\n      <div class=\"mb-6\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Y\u00EAu c\u1EA7u</h3>\n        <ul class=\"list-disc pl-5 space-y-2 text-gray-600\">\n          <li><span class=\"font-semibold\">Angular</span>: 18.0.0 tr\u1EDF l\u00EAn</li>\n        </ul>\n      </div>\n      <p class=\"mb-4\">\u0110\u1EC3 c\u00E0i \u0111\u1EB7t th\u01B0 vi\u1EC7n:</p>\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>npm install &#64;libs-ui/components-breadcrumb</code></pre>\n        <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\" (click)=\"copyToClipboard('npm install @libs-ui/components-breadcrumb')\">Sao ch\u00E9p</button>\n      </div>\n      <p class=\"mb-4\">Ho\u1EB7c v\u1EDBi yarn:</p>\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>yarn add &#64;libs-ui/components-breadcrumb</code></pre>\n        <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\" (click)=\"copyToClipboard('yarn add @libs-ui/components-breadcrumb')\">Sao ch\u00E9p</button>\n      </div>\n    </section>\n\n    <!-- Demo tr\u1EF1c ti\u1EBFp -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Demo Tr\u1EF1c ti\u1EBFp</h2>\n\n      <!-- Basic demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Breadcrumb c\u01A1 b\u1EA3n</h3>\n        <div class=\"p-4 bg-gray-50 rounded-lg\">\n          <libs_ui-components-breadcrumb [steps]=\"stepsBasic\"></libs_ui-components-breadcrumb>\n        </div>\n      </div>\n\n      <!-- Mode variants -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Ch\u1EBF \u0111\u1ED9 c\u0103n ch\u1EC9nh</h3>\n        <div class=\"flex items-center gap-6\">\n          <ng-container *ngFor=\"let mode of alignOptions\">\n            <div class=\"text-center\">\n              <div class=\"mb-2\"><code>{{ mode }}</code></div>\n              <libs_ui-components-breadcrumb [steps]=\"stepsBasic\" [mode]=\"mode\"></libs_ui-components-breadcrumb>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n\n      <!-- Status demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Breadcrumb v\u1EDBi tr\u1EA1ng th\u00E1i</h3>\n        <div class=\"p-4 bg-gray-50 rounded-lg\">\n          <libs_ui-components-breadcrumb [steps]=\"stepsStatus\" [completedIndex]=\"completedIndicesStatus\"></libs_ui-components-breadcrumb>\n        </div>\n      </div>\n\n      <!-- Arrow style (Multi-Step) demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Breadcrumb Arrow Style</h3>\n        <div class=\"p-4 bg-gray-50 rounded-lg overflow-auto\">\n          <libs_ui-components-breadcrumb-multi_step\n            [stepsMulti]=\"arrowSteps\"\n            (outMultiStepSelect)=\"onArrowStepSelected($event)\"\n          ></libs_ui-components-breadcrumb-multi_step>\n        </div>\n        <p class=\"mt-2 text-sm text-gray-500\">M\u00F4 t\u1EA3 d\u1EA1ng arrow (Multi-step) s\u1EED d\u1EE5ng separator m\u0169i t\u00EAn.</p>\n      </div>\n    </section>\n\n    <!-- C\u00E1ch s\u1EED d\u1EE5ng -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E1ch s\u1EED d\u1EE5ng</h2>\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">V\u00ED d\u1EE5 s\u1EED d\u1EE5ng</h3>\n        <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-breadcrumb [steps]=\"stepsBasic\" [mode]=\"'center'\"&gt;&lt;/libs_ui-components-breadcrumb&gt;</code></pre>\n      </div>\n    </section>\n\n    <!-- API Reference -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00E0i li\u1EC7u API</h2>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Inputs</h3>\n      <div class=\"overflow-x-auto mb-6\">\n        <table class=\"min-w-full bg-white border border-gray-200\">\n          <thead>\n            <tr>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u</th>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u1EB7c \u0111\u1ECBnh</th>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let input of inputsDoc\">\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.name }}</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.type }}</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.default }}</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.description }}</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Outputs</h3>\n      <div class=\"overflow-x-auto mb-6\">\n        <table class=\"min-w-full bg-white border border-gray-200\">\n          <thead>\n            <tr>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u</th>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let output of outputsDoc\">\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ output.name }}</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ output.type }}</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">{{ output.description }}</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Interfaces</h3>\n      <div class=\"space-y-6\">\n        <div *ngFor=\"let intf of interfacesDoc\" class=\"bg-gray-50 p-6 rounded-lg\">\n          <h4 class=\"text-lg font-semibold text-gray-700 mb-3\">{{ intf.name }}</h4>\n          <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-3\"><code>{{ intf.code }}</code></pre>\n          <p class=\"text-gray-600\">{{ intf.description }}</p>\n        </div>\n      </div>\n    </section>\n  </main>\n</div> ", styles: [".demo-container{max-width:800px;margin:0 auto;padding:16px}.demo-header{text-align:center;margin-bottom:24px}.demo-header h1{font-size:24px;margin:0}.demo-header p{font-size:14px;color:#666}.demo-install pre{background:#f5f5f5;padding:8px;border-radius:4px}.demo-live{margin-top:24px}.step-buttons button{margin-right:8px;margin-top:8px}.demo-api table{width:100%;border-collapse:collapse;margin-top:16px}.demo-api table,.demo-api th,.demo-api td{border:1px solid #ccc}.demo-api th,.demo-api td{padding:8px;text-align:left}.demo-api h3{margin-top:24px}\n"] }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJlYWRjcnVtYi1kZW1vLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9icmVhZGNydW1iL3NyYy9kZW1vL2JyZWFkY3J1bWItZGVtby5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYnJlYWRjcnVtYi9zcmMvZGVtby9icmVhZGNydW1iLWRlbW8uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMxQyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLG1DQUFtQyxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFFOUUsT0FBTyxFQUFFLDRDQUE0QyxFQUFFLE1BQU0sb0NBQW9DLENBQUM7OztBQWFsRyxNQUFNLE9BQU8sdUNBQXVDO0lBQ2xELHNCQUFzQjtJQUN0QixTQUFTLEdBQUc7UUFDVixFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLFdBQVcsRUFBRSxzQ0FBc0MsRUFBRTtRQUNyRyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFLHNCQUFzQixFQUFFLE9BQU8sRUFBRSxRQUFRLEVBQUUsV0FBVyxFQUFFLGtDQUFrQyxFQUFFO1FBQ2xILEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUUsdUJBQXVCLEVBQUUsT0FBTyxFQUFFLElBQUksRUFBRSxXQUFXLEVBQUUsNkJBQTZCLEVBQUU7UUFDM0csRUFBRSxJQUFJLEVBQUUsY0FBYyxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsT0FBTyxFQUFFLFdBQVcsRUFBRSxXQUFXLEVBQUUsOEJBQThCLEVBQUU7UUFDM0csRUFBRSxJQUFJLEVB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Qzt3QkFDbkMsNENBQTRDO3FCQUM3QyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IExpYnNVaUNvbXBvbmVudHNCcmVhZGNydW1iQ29tcG9uZW50IH0gZnJvbSAnLi4vYnJlYWRjcnVtYi5jb21wb25lbnQnO1xuaW1wb3J0IHsgSVRhYkJyZWFkQ3J1bWIsIFRZUEVfTU9ERV9CUkVBRENSVU1CLCBJVGFiQnJlYWRDcnVtYlNlbGVjdGVkLCBJQnJlYWRDcnVtYkZ1bmN0aW9uQ29udHJvbEV2ZW50LCBJVGFiQnJlYWRDcnVtYk11bHRpU3RlcCwgVFlQRV9NVUxUSV9TVEVQLCBJVGFiQnJlYWRDcnVtYk11bHRpU3RlcFNlbGVjdGVkIH0gZnJvbSAnLi4vaW50ZXJmYWNlcy9icmVhZGNydW1iLmludGVyZmFjZSc7XG5pbXBvcnQgeyBMaWJzVWlDb21wb25lbnRzQnJlYWRjcnVtYk11bHRpU3RlcENvbXBvbmVudCB9IGZyb20gJy4uL211bHRpLXN0ZXAvbXVsdGktc3RlcC5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdsaWItYnJlYWRjcnVtYi1kZW1vJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW1xuICAgIENvbW1vbk1vZHVsZSxcbiAgICBMaWJzVWlDb21wb25lbnRzQnJlYWRjcnVtYkNvbXBvbmVudCxcbiAgICBMaWJzVWlDb21wb25lbnRzQnJlYWRjcnVtYk11bHRpU3RlcENvbXBvbmVudFxuICBdLFxuICB0ZW1wbGF0ZVVybDogJy4vYnJlYWRjcnVtYi1kZW1vLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vYnJlYWRjcnVtYi1kZW1vLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgTGlic1VpQ29tcG9uZW50c0JyZWFkY3J1bWJEZW1vQ29tcG9uZW50IHtcbiAgLy8gSW5wdXQgZG9jdW1lbnRhdGlvblxuICBpbnB1dHNEb2MgPSBbXG4gICAgeyBuYW1lOiAnd2lkdGgnLCB0eXBlOiAnbnVtYmVyJywgZGVmYXVsdDogJzI0JywgZGVzY3JpcHRpb246ICdDaGnhu4F1IHLhu5luZyBt4buXaSBixrDhu5tjIHRyb25nIGJyZWFkY3J1bWInIH0sXG4gICAgeyBuYW1lOiAnbW9kZScsIHR5cGU6ICdUWVBFX01PREVfQlJFQURDUlVNQicsIGRlZmF1bHQ6ICdjZW50ZXInLCBkZXNjcmlwdGlvbjogJ0PEg24gY2jhu4luaDogY2VudGVyIHwgbGVmdCB8IHJpZ2h0JyB9LFxuICAgIHsgbmFtZTogJ3N0ZXBzJywgdHlwZTogJ0FycmF5PElUYWJCcmVhZENydW1iPicsIGRlZmF1bHQ6ICdbXScsIGRlc2NyaXB0aW9uOiAnRGFuaCBzw6FjaCBjw6FjIGLGsOG7m2MgaGnhu4NuIHRo4buLJyB9LFxuICAgIHsgbmFtZTogJ2NsYXNzSW5jbHVkZScsIHR5cGU6ICdzdHJpbmcnLCBkZWZhdWx0OiAndW5kZWZpbmVkJywgZGVzY3JpcHRpb246ICdM4bubcCBDU1MgYuG7lSBzdW5nIGNobyBt4buXaSBixrDhu5tjJyB9LFxuICAgIHsgbmFtZTogJ2NvbXBsZXRlZEluZGV4JywgdHlwZTogJ0FycmF5PG51bWJlcj4nLCBkZWZhdWx0OiAnW10nLCBkZXNjcmlwdGlvbjogJ0PDoWMgY2jhu4kgc+G7kSBj4bunYSBixrDhu5tjIMSRw6MgaG/DoG4gdGjDoG5oJyB9LFxuICAgIHsgbmFtZTogJ2JhY2tncm91bmRXaGl0ZScsIHR5cGU6ICdib29sZWFuJywgZGVmYXVsdDogJ2ZhbHNlJywgZGVzY3JpcHRpb246ICdO4buBbiB0cuG6r25nIGNobyBicmVhZGNydW1iIGtoaSB0cnVlJyB9XG4gIF07XG5cbiAgLy8gSW50ZXJmYWNlIGRvY3VtZW50YXRpb25cbiAgaW50ZXJmYWNlc0RvYyA9IFtcbiAgICB7XG4gICAgICBuYW1lOiAnSVRhYkJyZWFkQ3J1bWInLFxuICAgICAgY29kZTogJ2ludGVyZmFjZSBJVGFiQnJlYWRDcnVtYiB7IG51bWJlcjogbnVtYmVyOyB0aXRsZTogc3RyaW5nOyB2YWxpZD86IGJvb2xlYW47IGNvbmZpZz86IElQb3BvdmVyOyBkaXNhYmxlPzogYm9vbGVhbjsgY2xhc3NJbmNsdWRlPzogc3RyaW5nOyB9JyxcbiAgICAgIGRlc2NyaXB0aW9uOiAnxJDhu4tuaCBuZ2jEqWEgdOG7q25nIGLGsOG7m2MgdHJvbmcgYnJlYWRjcnVtYidcbiAgICB9LFxuICAgIHtcbiAgICAgIG5hbWU6ICdUWVBFX01PREVfQlJFQURDUlVNQicsXG4gICAgICBjb2RlOiBcInR5cGUgVFlQRV9NT0RFX0JSRUFEQ1JVTUIgPSAnY2VudGVyJyB8ICdsZWZ0JyB8ICdyaWdodCc7XCIsXG4gICAgICBkZXNjcmlwdGlvbjogJ0No4bq/IMSR4buZIGPEg24gY2jhu4luaCBj4bunYSBicmVhZGNydW1iJ1xuICAgIH1cbiAgXTtcblxuICAvLyBPdXRwdXQgZG9jdW1lbnRhdGlvblxuICBvdXRwdXRzRG9jID0gW1xuICAgIHsgbmFtZTogJ291dFN0ZXBTZWxlY3RlZCcsIHR5cGU6ICcoSVRhYkJyZWFkQ3J1bWJTZWxlY3RlZCkgPT4gdm9pZCcsIGRlc2NyaXB0aW9uOiAnUGjDoXQgcmEgc+G7sSBraeG7h24ga2hpIGNo4buNbiBixrDhu5tjLCB0cuG6oyB24buBIHsgaW5kZXggfScgfSxcbiAgICB7IG5hbWU6ICdvdXRGdW5jdGlvbkNvbnRyb2wnLCB0eXBlOiAnSUJyZWFkQ3J1bWJGdW5jdGlvbkNvbnRyb2xFdmVudCcsIGRlc2NyaXB0aW9uOiAnQ3VuZyBj4bqlcCBBUEkgxJHhu4MgxJFp4buBdSBraGnhu4NuIGNvbXBvbmVudCAoc2V0U2VsZWN0ZWRTdGVwLCBzZXRDb21wbGV0ZWRTdGVwLCAuLi4pJyB9XG4gIF07XG5cbiAgLy8gRmVhdHVyZXMgb3ZlcnZpZXdcbiAgZmVhdHVyZXMgPSBbXG4gICAgeyBpZDogMSwgdGl0bGU6ICfEkMOhbmggZOG6pXUgYsaw4bubYyBob8OgbiB0aMOgbmgnLCBkZXNjcmlwdGlvbjogJ0NobyBwaMOpcCBoaeG7g24gdGjhu4sgdHLhuqFuZyB0aMOhaSDEkcOjIGhvw6BuIHRow6BuaCBjaG8gY8OhYyBixrDhu5tjJyB9LFxuICAgIHsgaWQ6IDIsIHRpdGxlOiAnU+G7sSBraeG7h24gY2jhu41uIGLGsOG7m2MnLCBkZXNjcmlwdGlvbjogJ1Bow6F0IHJhIHPhu7Ega2nhu4duIGtoaSBuZ8aw4budaSBkw7luZyBjaOG7jW4gYsaw4bubYycgfSxcbiAgICB7IGlkOiAzLCB0aXRsZTogJ1TDuXkgY2jhu4luaCBsaW5oIGhv4bqhdCcsIGRlc2NyaXB0aW9uOiAnQ2hvIHBow6lwIGPhuqV1IGjDrG5oIG5oaeG7gXUgdHXhu7MgY2jhu41uIGtow6FjIG5oYXUgY2hvIGJyZWFkY3J1bWInIH1cbiAgXTtcblxuICAvLyBEZW1vIGRhdGEgc2V0c1xuICBzdGVwc0Jhc2ljOiBJVGFiQnJlYWRDcnVtYltdID0gW1xuICAgIHsgbnVtYmVyOiAxLCB0aXRsZTogJ0LGsOG7m2MgMScgfSxcbiAgICB7IG51bWJlcjogMiwgdGl0bGU6ICdCxrDhu5tjIDInIH0sXG4gICAgeyBudW1iZXI6IDMsIHRpdGxlOiAnQsaw4bubYyAzJyB9XG4gIF07XG4gIGFsaWduT3B0aW9uczogVFlQRV9NT0RFX0JSRUFEQ1JVTUJbXSA9IFsnbGVmdCcsICdjZW50ZXInLCAncmlnaHQnXTtcbiAgc3RlcHNTdGF0dXM6IElUYWJCcmVhZENydW1iW10gPSBbXG4gICAgeyBudW1iZXI6IDEsIHRpdGxlOiAnQsaw4bubYyAxJywgdmFsaWQ6IHRydWUgfSxcbiAgICB7IG51bWJlcjogMiwgdGl0bGU6ICdCxrDhu5tjIDInLCB2YWxpZDogZmFsc2UgfSxcbiAgICB7IG51bWJlcjogMywgdGl0bGU6ICdCxrDhu5tjIDMnLCBkaXNhYmxlOiB0cnVlIH0sXG4gICAgeyBudW1iZXI6IDQsIHRpdGxlOiAnQsaw4bubYyA0JyB9XG4gIF07XG4gIGNvbXBsZXRlZEluZGljZXNTdGF0dXM6IG51bWJlcltdID0gWzAsIDFdO1xuXG4gIC8vIEFycm93IHN0eWxlIGJyZWFkY3J1bWIgKG11bHRpLXN0ZXApIGRlbW8gZGF0YVxuICBhcnJvd1N0ZXBzOiBJVGFiQnJlYWRDcnVtYk11bHRpU3RlcFtdID0gW1xuICAgIHsgbnVtYmVyOiAxLCB0aXRsZTogJ0LGsOG7m2MgMScsIHN0YXR1czogJ2NvbXBsZXRlZCcgYXMgVFlQRV9NVUxUSV9TVEVQLCB0eXBlOiAndGV4dCcgfSxcbiAgICB7IG51bWJlcjogMiwgdGl0bGU6ICdCxrDhu5tjIDInLCBzdGF0dXM6ICdzZWxlY3RlZCcgYXMgVFlQRV9NVUxUSV9TVEVQLCB0eXBlOiAndGV4dCcgfSxcbiAgICB7IG51bWJlcjogMywgdGl0bGU6ICdCxrDhu5tjIDMnLCBzdGF0dXM6ICdub3JtYWwnIGFzIFRZUEVfTVVMVElfU1RFUCwgdHlwZTogJ3RleHQnIH1cbiAgXTtcblxuICAvLyBNZXRob2QgZm9yIGluc3RhbGxhdGlvbiBjb3B5IGJ1dHRvblxuICBjb3B5VG9DbGlwYm9hcmQodGV4dDogc3RyaW5nKSB7XG4gICAgbmF2aWdhdG9yLmNsaXBib2FyZC53cml0ZVRleHQodGV4dClcbiAgICAgIC50aGVuKCgpID0+IGNvbnNvbGUubG9nKCdUZXh0IGNvcGllZCB0byBjbGlwYm9hcmQnKSlcbiAgICAgIC5jYXRjaChlcnIgPT4gY29uc29sZS5lcnJvcignQ291bGQgbm90IGNvcHkgdGV4dDogJywgZXJyKSk7XG4gIH1cblxuICAvLyBEZW1vIGRhdGFcbiAgZGVtb1N0ZXBzOiBJVGFiQnJlYWRDcnVtYltdID0gW1xuICAgIHsgbnVtYmVyOiAxLCB0aXRsZTogJ0LGsOG7m2MgMScsIHZhbGlkOiB0cnVlIH0sXG4gICAgeyBudW1iZXI6IDIsIHRpdGxlOiAnQsaw4bubYyAyJywgdmFsaWQ6IGZhbHNlIH0sXG4gICAgeyBudW1iZXI6IDMsIHRpdGxlOiAnQsaw4bubYyAzJywgdmFsaWQ6IGZhbHNlIH1cbiAgXTtcbiAgc2VsZWN0ZWRTdGVwSW5kZXggPSAwO1xuXG4gIC8vIEhhbmRsZSBhcnJvdyBkZW1vIHNlbGVjdGlvbiBldmVudFxuICBvbkFycm93U3RlcFNlbGVjdGVkKGV2ZW50OiBJVGFiQnJlYWRDcnVtYk11bHRpU3RlcFNlbGVjdGVkPGFueT4pIHtcbiAgICBjb25zb2xlLmxvZygnQXJyb3cgc3RlcCBzZWxlY3RlZDonLCBldmVudCk7XG4gIH1cblxuICAvLyBDaGFuZ2Ugc2VsZWN0ZWQgc3RlcCBwcm9ncmFtbWF0aWNhbGx5XG4gIGNoYW5nZVN0ZXAoaW5kZXg6IG51bWJlcikge1xuICAgIHRoaXMuc2VsZWN0ZWRTdGVwSW5kZXggPSBpbmRleDtcbiAgfVxuXG4gIC8vIEhhbmRsZSBjb21wb25lbnQncyBvdXRwdXQgZXZlbnRcbiAgb25TdGVwU2VsZWN0ZWQoZXZlbnQ6IHsgaW5kZXg6IG51bWJlciB9KSB7XG4gICAgdGhpcy5zZWxlY3RlZFN0ZXBJbmRleCA9IGV2ZW50LmluZGV4O1xuICB9XG59ICIsIjxkaXYgY2xhc3M9XCJtYXgtdy02eGwgbXgtYXV0byBwLTUgZm9udC1zYW5zIHRleHQtZ3JheS04MDBcIj5cbiAgPGhlYWRlciBjbGFzcz1cInRleHQtY2VudGVyIHB5LTEwIGJnLXdoaXRlIHJvdW5kZWQtbGcgbWItOCBzaGFkb3ctc21cIj5cbiAgICA8aDEgY2xhc3M9XCJ0ZXh0LTR4bCBmb250LWJvbGQgdGV4dC1ncmF5LTgwMCBtYi0yXCI+RGVtbyBCcmVhZGNydW1iIENvbXBvbmVudDwvaDE+XG4gICAgPHAgY2xhc3M9XCJ0ZXh0LXhsIHRleHQtZ3JheS01MDBcIj5UaMawIHZp4buHbiBCcmVhZGNydW1iIGNobyBBbmd1bGFyPC9wPlxuICA8L2hlYWRlcj5cblxuICA8bWFpbj5cbiAgICA8IS0tIEdp4bubaSB0aGnhu4d1IC0tPlxuICAgIDxzZWN0aW9uIGNsYXNzPVwiYmctd2hpdGUgcm91bmRlZC1sZyBwLTggbWItOCBzaGFkb3ctc21cIj5cbiAgICAgIDxoMiBjbGFzcz1cInRleHQtMnhsIGZvbnQtYm9sZCB0ZXh0LWdyYXktODAwIG1iLTUgcGItMyBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj5HaeG7m2kgdGhp4buHdTwvaDI+XG4gICAgICA8cD5cbiAgICAgICAgPGNvZGUgY2xhc3M9XCJ0ZXh0LXNtIGJnLWdyYXktMTAwIHB4LTEuNSBweS0wLjUgcm91bmRlZFwiPiYjNjQ7bGlicy11aS9jb21wb25lbnRzLWJyZWFkY3J1bWI8L2NvZGU+IGzDoCBt4buZdCBjb21wb25lbnQgQW5ndWxhciBnacO6cCBoaeG7g24gdGjhu4sgxJHGsOG7nW5nIGThuqtuIHBow6JuIGPhuqVwIGhv4bq3YyB0aeG6v24gdHLDrG5oIHRoZW8gY8OhYyBixrDhu5tjLCB24bubaSBraOG6oyBuxINuZyDEkcOhbmggZOG6pXUgYsaw4bubYyDEkcOjIGhvw6BuIHRow6BuaCwgYsaw4bubYyDEkWFuZyBjaOG7jW4sIHbDoCBixrDhu5tjIHbDtCBoaeG7h3UgaMOzYS5cbiAgICAgIDwvcD5cbiAgICA8L3NlY3Rpb24+XG5cbiAgICA8IS0tIEPDoGkgxJHhurd0IC0tPlxuICAgIDxzZWN0aW9uIGNsYXNzPVwiYmctd2hpdGUgcm91bmRlZC1sZyBwLTggbWItOCBzaGFkb3ctc21cIj5cbiAgICAgIDxoMiBjbGFzcz1cInRleHQtMnhsIGZvbnQtYm9sZCB0ZXh0LWdyYXktODAwIG1iLTUgcGItMyBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj5Dw6BpIMSR4bq3dDwvaDI+XG4gICAgICA8ZGl2IGNsYXNzPVwibWItNlwiPlxuICAgICAgICA8aDMgY2xhc3M9XCJ0ZXh0LXhsIGZvbnQtc2VtaWJvbGQgdGV4dC1ncmF5LTcwMCBtYi0zXCI+WcOqdSBj4bqndTwvaDM+XG4gICAgICAgIDx1bCBjbGFzcz1cImxpc3QtZGlzYyBwbC01IHNwYWNlLXktMiB0ZXh0LWdyYXktNjAwXCI+XG4gICAgICAgICAgPGxpPjxzcGFuIGNsYXNzPVwiZm9udC1zZW1pYm9sZFwiPkFuZ3VsYXI8L3NwYW4+OiAxOC4wLjAgdHLhu58gbMOqbjwvbGk+XG4gICAgICAgIDwvdWw+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxwIGNsYXNzPVwibWItNFwiPsSQ4buDIGPDoGkgxJHhurd0IHRoxrAgdmnhu4duOjwvcD5cbiAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlciBiZy1ncmF5LTEwMCBwLTQgcm91bmRlZC1sZyBtYi02XCI+XG4gICAgICAgIDxwcmUgY2xhc3M9XCJmbGV4LTEgdGV4dC1zbSBvdmVyZmxvdy14LWF1dG9cIj48Y29kZT5ucG0gaW5zdGFsbCAmIzY0O2xpYnMtdWkvY29tcG9uZW50cy1icmVhZGNydW1iPC9jb2RlPjwvcHJlPlxuICAgICAgICA8YnV0dG9uIGNsYXNzPVwibWwtNCBweC0zIHB5LTEgYmctYmx1ZS01MDAgdGV4dC13aGl0ZSByb3VuZGVkIGhvdmVyOmJnLWJsdWUtNjAwIHRyYW5zaXRpb24tY29sb3JzXCIgKGNsaWNrKT1cImNvcHlUb0NsaXBib2FyZCgnbnBtIGluc3RhbGwgQGxpYnMtdWkvY29tcG9uZW50cy1icmVhZGNydW1iJylcIj5TYW8gY2jDqXA8L2J1dHRvbj5cbiAgICAgIDwvZGl2PlxuICAgICAgPHAgY2xhc3M9XCJtYi00XCI+SG/hurdjIHbhu5tpIHlhcm46PC9wPlxuICAgICAgPGRpdiBjbGFzcz1cImZsZXggaXRlbXMtY2VudGVyIGJnLWdyYXktMTAwIHAtNCByb3VuZGVkLWxnIG1iLTZcIj5cbiAgICAgICAgPHByZSBjbGFzcz1cImZsZXgtMSB0ZXh0LXNtIG92ZXJmbG93LXgtYXV0b1wiPjxjb2RlPnlhcm4gYWRkICYjNjQ7bGlicy11aS9jb21wb25lbnRzLWJyZWFkY3J1bWI8L2NvZGU+PC9wcmU+XG4gICAgICAgIDxidXR0b24gY2xhc3M9XCJtbC00IHB4LTMgcHktMSBiZy1ibHVlLTUwMCB0ZXh0LXdoaXRlIHJvdW5kZWQgaG92ZXI6YmctYmx1ZS02MDAgdHJhbnNpdGlvbi1jb2xvcnNcIiAoY2xpY2spPVwiY29weVRvQ2xpcGJvYXJkKCd5YXJuIGFkZCBAbGlicy11aS9jb21wb25lbnRzLWJyZWFkY3J1bWInKVwiPlNhbyBjaMOpcDwvYnV0dG9uPlxuICAgICAgPC9kaXY+XG4gICAgPC9zZWN0aW9uPlxuXG4gICAgPCEtLSBEZW1vIHRy4buxYyB0aeG6v3AgLS0+XG4gICAgPHNlY3Rpb24gY2xhc3M9XCJiZy13aGl0ZSByb3VuZGVkLWxnIHAtOCBtYi04IHNoYWRvdy1zbVwiPlxuICAgICAgPGgyIGNsYXNzPVwidGV4dC0yeGwgZm9udC1ib2xkIHRleHQtZ3JheS04MDAgbWItNSBwYi0zIGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPkRlbW8gVHLhu7FjIHRp4bq/cDwvaDI+XG5cbiAgICAgIDwhLS0gQmFzaWMgZGVtbyAtLT5cbiAgICAgIDxkaXYgY2xhc3M9XCJtYi04XCI+XG4gICAgICAgIDxoMyBjbGFzcz1cInRleHQteGwgZm9udC1zZW1pYm9sZCB0ZXh0LWdyYXktNzAwIG1iLTRcIj5CcmVhZGNydW1iIGPGoSBi4bqjbjwvaDM+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJwLTQgYmctZ3JheS01MCByb3VuZGVkLWxnXCI+XG4gICAgICAgICAgPGxpYnNfdWktY29tcG9uZW50cy1icmVhZGNydW1iIFtzdGVwc109XCJzdGVwc0Jhc2ljXCI+PC9saWJzX3VpLWNvbXBvbmVudHMtYnJlYWRjcnVtYj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPCEtLSBNb2RlIHZhcmlhbnRzIC0tPlxuICAgICAgPGRpdiBjbGFzcz1cIm1iLThcIj5cbiAgICAgICAgPGgzIGNsYXNzPVwidGV4dC14bCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDAgbWItNFwiPkNo4bq/IMSR4buZIGPEg24gY2jhu4luaDwvaDM+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlciBnYXAtNlwiPlxuICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IG1vZGUgb2YgYWxpZ25PcHRpb25zXCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwidGV4dC1jZW50ZXJcIj5cbiAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cIm1iLTJcIj48Y29kZT57eyBtb2RlIH19PC9jb2RlPjwvZGl2PlxuICAgICAgICAgICAgICA8bGlic191aS1jb21wb25lbnRzLWJyZWFkY3J1bWIgW3N0ZXBzXT1cInN0ZXBzQmFzaWNcIiBbbW9kZV09XCJtb2RlXCI+PC9saWJzX3VpLWNvbXBvbmVudHMtYnJlYWRjcnVtYj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuXG4gICAgICA8IS0tIFN0YXR1cyBkZW1vIC0tPlxuICAgICAgPGRpdiBjbGFzcz1cIm1iLThcIj5cbiAgICAgICAgPGgzIGNsYXNzPVwidGV4dC14bCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDAgbWItNFwiPkJyZWFkY3J1bWIgduG7m2kgdHLhuqFuZyB0aMOhaTwvaDM+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJwLTQgYmctZ3JheS01MCByb3VuZGVkLWxnXCI+XG4gICAgICAgICAgPGxpYnNfdWktY29tcG9uZW50cy1icmVhZGNydW1iIFtzdGVwc109XCJzdGVwc1N0YXR1c1wiIFtjb21wbGV0ZWRJbmRleF09XCJjb21wbGV0ZWRJbmRpY2VzU3RhdHVzXCI+PC9saWJzX3VpLWNvbXBvbmVudHMtYnJlYWRjcnVtYj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPCEtLSBBcnJvdyBzdHlsZSAoTXVsdGktU3RlcCkgZGVtbyAtLT5cbiAgICAgIDxkaXYgY2xhc3M9XCJtYi04XCI+XG4gICAgICAgIDxoMyBjbGFzcz1cInRleHQteGwgZm9udC1zZW1pYm9sZCB0ZXh0LWdyYXktNzAwIG1iLTRcIj5CcmVhZGNydW1iIEFycm93IFN0eWxlPC9oMz5cbiAgICAgICAgPGRpdiBjbGFzcz1cInAtNCBiZy1ncmF5LTUwIHJvdW5kZWQtbGcgb3ZlcmZsb3ctYXV0b1wiPlxuICAgICAgICAgIDxsaWJzX3VpLWNvbXBvbmVudHMtYnJlYWRjcnVtYi1tdWx0aV9zdGVwXG4gICAgICAgICAgICBbc3RlcHNNdWx0aV09XCJhcnJvd1N0ZXBzXCJcbiAgICAgICAgICAgIChvdXRNdWx0aVN0ZXBTZWxlY3QpPVwib25BcnJvd1N0ZXBTZWxlY3RlZCgkZXZlbnQpXCJcbiAgICAgICAgICA+PC9saWJzX3VpLWNvbXBvbmVudHMtYnJlYWRjcnVtYi1tdWx0aV9zdGVwPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPHAgY2xhc3M9XCJtdC0yIHRleHQtc20gdGV4dC1ncmF5LTUwMFwiPk3DtCB04bqjIGThuqFuZyBhcnJvdyAoTXVsdGktc3RlcCkgc+G7rSBk4bulbmcgc2VwYXJhdG9yIG3FqWkgdMOqbi48L3A+XG4gICAgICA8L2Rpdj5cbiAgICA8L3NlY3Rpb24+XG5cbiAgICA8IS0tIEPDoWNoIHPhu60gZOG7pW5nIC0tPlxuICAgIDxzZWN0aW9uIGNsYXNzPVwiYmctd2hpdGUgcm91bmRlZC1sZyBwLTggbWItOCBzaGFkb3ctc21cIj5cbiAgICAgIDxoMiBjbGFzcz1cInRleHQtMnhsIGZvbnQtYm9sZCB0ZXh0LWdyYXktODAwIG1iLTUgcGItMyBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj5Dw6FjaCBz4butIGThu6VuZzwvaDI+XG4gICAgICA8ZGl2IGNsYXNzPVwibWItOFwiPlxuICAgICAgICA8aDMgY2xhc3M9XCJ0ZXh0LXhsIGZvbnQtc2VtaWJvbGQgdGV4dC1ncmF5LTcwMCBtYi00XCI+VsOtIGThu6Ugc+G7rSBk4bulbmc8L2gzPlxuICAgICAgICA8cHJlIGNsYXNzPVwiYmctZ3JheS0xMDAgcC00IHJvdW5kZWQtbGcgb3ZlcmZsb3cteC1hdXRvIHRleHQtc21cIj48Y29kZT4mbHQ7bGlic191aS1jb21wb25lbnRzLWJyZWFkY3J1bWIgW3N0ZXBzXT1cInN0ZXBzQmFzaWNcIiBbbW9kZV09XCInY2VudGVyJ1wiJmd0OyZsdDsvbGlic191aS1jb21wb25lbnRzLWJyZWFkY3J1bWImZ3Q7PC9jb2RlPjwvcHJlPlxuICAgICAgPC9kaXY+XG4gICAgPC9zZWN0aW9uPlxuXG4gICAgPCEtLSBBUEkgUmVmZXJlbmNlIC0tPlxuICAgIDxzZWN0aW9uIGNsYXNzPVwiYmctd2hpdGUgcm91bmRlZC1sZyBwLTggbWItOCBzaGFkb3ctc21cIj5cbiAgICAgIDxoMiBjbGFzcz1cInRleHQtMnhsIGZvbnQtYm9sZCB0ZXh0LWdyYXktODAwIG1iLTUgcGItMyBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj5Uw6BpIGxp4buHdSBBUEk8L2gyPlxuXG4gICAgICA8aDMgY2xhc3M9XCJ0ZXh0LXhsIGZvbnQtc2VtaWJvbGQgdGV4dC1ncmF5LTcwMCBtYi0zXCI+SW5wdXRzPC9oMz5cbiAgICAgIDxkaXYgY2xhc3M9XCJvdmVyZmxvdy14LWF1dG8gbWItNlwiPlxuICAgICAgICA8dGFibGUgY2xhc3M9XCJtaW4tdy1mdWxsIGJnLXdoaXRlIGJvcmRlciBib3JkZXItZ3JheS0yMDBcIj5cbiAgICAgICAgICA8dGhlYWQ+XG4gICAgICAgICAgICA8dHI+XG4gICAgICAgICAgICAgIDx0aCBjbGFzcz1cInB5LTIgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDAgYmctZ3JheS0xMDAgdGV4dC1sZWZ0IGZvbnQtc2VtaWJvbGQgdGV4dC1ncmF5LTcwMFwiPlTDqm48L3RoPlxuICAgICAgICAgICAgICA8dGggY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwIGJnLWdyYXktMTAwIHRleHQtbGVmdCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDBcIj5LaeG7g3U8L3RoPlxuICAgICAgICAgICAgICA8dGggY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwIGJnLWdyYXktMTAwIHRleHQtbGVmdCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDBcIj5N4bq3YyDEkeG7i25oPC90aD5cbiAgICAgICAgICAgICAgPHRoIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMCBiZy1ncmF5LTEwMCB0ZXh0LWxlZnQgZm9udC1zZW1pYm9sZCB0ZXh0LWdyYXktNzAwXCI+TcO0IHThuqM8L3RoPlxuICAgICAgICAgICAgPC90cj5cbiAgICAgICAgICA8L3RoZWFkPlxuICAgICAgICAgIDx0Ym9keT5cbiAgICAgICAgICAgIDx0ciAqbmdGb3I9XCJsZXQgaW5wdXQgb2YgaW5wdXRzRG9jXCI+XG4gICAgICAgICAgICAgIDx0ZCBjbGFzcz1cInB5LTIgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj48Y29kZSBjbGFzcz1cInRleHQtc20gYmctZ3JheS0xMDAgcHgtMS41IHB5LTAuNSByb3VuZGVkXCI+e3sgaW5wdXQubmFtZSB9fTwvY29kZT48L3RkPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+PGNvZGUgY2xhc3M9XCJ0ZXh0LXNtIGJnLWdyYXktMTAwIHB4LTEuNSBweS0wLjUgcm91bmRlZFwiPnt7IGlucHV0LnR5cGUgfX08L2NvZGU+PC90ZD5cbiAgICAgICAgICAgICAgPHRkIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPnt7IGlucHV0LmRlZmF1bHQgfX08L3RkPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+e3sgaW5wdXQuZGVzY3JpcHRpb24gfX08L3RkPlxuICAgICAgICAgICAgPC90cj5cbiAgICAgICAgICA8L3Rib2R5PlxuICAgICAgICA8L3RhYmxlPlxuICAgICAgPC9kaXY+XG5cbiAgICAgIDxoMyBjbGFzcz1cInRleHQteGwgZm9udC1zZW1pYm9sZCB0ZXh0LWdyYXktNzAwIG1iLTNcIj5PdXRwdXRzPC9oMz5cbiAgICAgIDxkaXYgY2xhc3M9XCJvdmVyZmxvdy14LWF1dG8gbWItNlwiPlxuICAgICAgICA8dGFibGUgY2xhc3M9XCJtaW4tdy1mdWxsIGJnLXdoaXRlIGJvcmRlciBib3JkZXItZ3JheS0yMDBcIj5cbiAgICAgICAgICA8dGhlYWQ+XG4gICAgICAgICAgICA8dHI+XG4gICAgICAgICAgICAgIDx0aCBjbGFzcz1cInB5LTIgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDAgYmctZ3JheS0xMDAgdGV4dC1sZWZ0IGZvbnQtc2VtaWJvbGQgdGV4dC1ncmF5LTcwMFwiPlTDqm48L3RoPlxuICAgICAgICAgICAgICA8dGggY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwIGJnLWdyYXktMTAwIHRleHQtbGVmdCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDBcIj5LaeG7g3U8L3RoPlxuICAgICAgICAgICAgICA8dGggY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwIGJnLWdyYXktMTAwIHRleHQtbGVmdCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDBcIj5Nw7QgdOG6ozwvdGg+XG4gICAgICAgICAgICA8L3RyPlxuICAgICAgICAgIDwvdGhlYWQ+XG4gICAgICAgICAgPHRib2R5PlxuICAgICAgICAgICAgPHRyICpuZ0Zvcj1cImxldCBvdXRwdXQgb2Ygb3V0cHV0c0RvY1wiPlxuICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+PGNvZGUgY2xhc3M9XCJ0ZXh0LXNtIGJnLWdyYXktMTAwIHB4LTEuNSBweS0wLjUgcm91bmRlZFwiPnt7IG91dHB1dC5uYW1lIH19PC9jb2RlPjwvdGQ+XG4gICAgICAgICAgICAgIDx0ZCBjbGFzcz1cInB5LTIgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj48Y29kZSBjbGFzcz1cInRleHQtc20gYmctZ3JheS0xMDAgcHgtMS41IHB5LTAuNSByb3VuZGVkXCI+e3sgb3V0cHV0LnR5cGUgfX08L2NvZGU+PC90ZD5cbiAgICAgICAgICAgICAgPHRkIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPnt7IG91dHB1dC5kZXNjcmlwdGlvbiB9fTwvdGQ+XG4gICAgICAgICAgICA8L3RyPlxuICAgICAgICAgIDwvdGJvZHk+XG4gICAgICAgIDwvdGFibGU+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPGgzIGNsYXNzPVwidGV4dC14bCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDAgbWItM1wiPkludGVyZmFjZXM8L2gzPlxuICAgICAgPGRpdiBjbGFzcz1cInNwYWNlLXktNlwiPlxuICAgICAgICA8ZGl2ICpuZ0Zvcj1cImxldCBpbnRmIG9mIGludGVyZmFjZXNEb2NcIiBjbGFzcz1cImJnLWdyYXktNTAgcC02IHJvdW5kZWQtbGdcIj5cbiAgICAgICAgICA8aDQgY2xhc3M9XCJ0ZXh0LWxnIGZvbnQtc2VtaWJvbGQgdGV4dC1ncmF5LTcwMCBtYi0zXCI+e3sgaW50Zi5uYW1lIH19PC9oND5cbiAgICAgICAgICA8cHJlIGNsYXNzPVwiYmctZ3JheS0xMDAgcC00IHJvdW5kZWQtbGcgb3ZlcmZsb3cteC1hdXRvIHRleHQtc20gbWItM1wiPjxjb2RlPnt7IGludGYuY29kZSB9fTwvY29kZT48L3ByZT5cbiAgICAgICAgICA8cCBjbGFzcz1cInRleHQtZ3JheS02MDBcIj57eyBpbnRmLmRlc2NyaXB0aW9uIH19PC9wPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvc2VjdGlvbj5cbiAgPC9tYWluPlxuPC9kaXY+ICJdfQ==

package/esm2022/index.mjs

@@ -1,4 +1,5 @@
 export * from './breadcrumb.component';
 export * from './multi-step/multi-step.component';
 export * from './interfaces/breadcrumb.interface';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYnJlYWRjcnVtYi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyx3QkFBd0IsQ0FBQztBQUN2QyxjQUFjLG1DQUFtQyxDQUFDO0FBQ2xELGNBQWMsbUNBQW1DLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL2JyZWFkY3J1bWIuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbXVsdGktc3RlcC9tdWx0aS1zdGVwLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2ludGVyZmFjZXMvYnJlYWRjcnVtYi5pbnRlcmZhY2UnOyJdfQ==
+export * from './demo/breadcrumb-demo.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYnJlYWRjcnVtYi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyx3QkFBd0IsQ0FBQztBQUN2QyxjQUFjLG1DQUFtQyxDQUFDO0FBQ2xELGNBQWMsbUNBQW1DLENBQUM7QUFDbEQsY0FBYyxrQ0FBa0MsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vYnJlYWRjcnVtYi5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9tdWx0aS1zdGVwL211bHRpLXN0ZXAuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vaW50ZXJmYWNlcy9icmVhZGNydW1iLmludGVyZmFjZSc7XG5leHBvcnQgKiBmcm9tICcuL2RlbW8vYnJlYWRjcnVtYi1kZW1vLmNvbXBvbmVudCc7Il19

package/fesm2022/libs-ui-components-breadcrumb.mjs

@@ -2,7 +2,8 @@ import * as i0 from '@angular/core';
 import { Pipe, signal, input, model, output, ChangeDetectionStrategy, Component, viewChildren } from '@angular/core';
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import { NgTemplateOutlet } from '@angular/common';
+import * as i1$1 from '@angular/common';
+import { NgTemplateOutlet, CommonModule } from '@angular/common';
 import { LibsUiComponentsDropdownComponent } from '@libs-ui/components-dropdown';
 import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
 
@@ -208,9 +209,100 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     ], template: "<div class=\"flex items-center {{ classInclude() || '' }}\"\n  [class.justify-center]=\"mode() === 'center'\"\n  [class.justify-start]=\"mode() === 'left'\"\n  [class.justify-end]=\"mode() === 'right'\"\n  [class.bg-[#ffffff]]=\"backgroundWhite()\"\n  #containerEl>\n  @for (step of stepsMulti(); track step) {\n    <div #stepEl\n      class=\"flex libs-ui-breadcrumb-multi-step\"\n      [class.cursor-default]=\"step.status === 'disabled'\"\n      [class.pointer-events-none]=\"step.status === 'disabled'\"\n      [class.cursor-pointer]=\"step.status !== 'disabled'\">\n      @if (step.type === 'text') {\n        <div (click)=\"handlerLabelEvent($event, $index)\">\n          <ng-container [ngTemplateOutlet]=\"contentEl\"\n            [ngTemplateOutletContext]=\"{$index, $first, $last, step}\" />\n        </div>\n      } @else {\n        <libs_ui-components-dropdown [isNgContent]=\"true\"\n          [listHiddenInputSearch]=\"true\"\n          [listHasButtonUnSelectOption]=\"step.listHasButtonUnSelectOption\"\n          [listConfig]=\"step.listConfigItem\"\n          [popoverCustomConfig]=\"popoverCustomConfig()\"\n          [listKeysHidden]=\"listKeyHidden() ?? step.listKeysHidden\"\n          [disable]=\"$index | LibsUiComponentsBreadcrumbCheckDisableStepPipe:stepDisable()\"\n          (outShowList)=\"handlerShowList($event, $index)\"\n          (outSelectKey)=\"handlerSelectKey($event, $index)\"\n          (outFunctionsControl)=\"handlerDropDownFunctionControl($event)\">\n          <ng-container [ngTemplateOutlet]=\"contentEl\"\n            [ngTemplateOutletContext]=\"{$index, $first, $last, step}\" />\n        </libs_ui-components-dropdown>\n      }\n    </div>\n  }\n</div>\n\n<ng-template #contentEl\n  let-index=\"$index\"\n  let-first=\"$first\"\n  let-step=\"step\"\n  let-last=\"$last\">\n  <div class=\"flex items-center\">\n    @if (!first) {\n      <libs_ui-components-breadcrumb-multi_step-arrow_end class=\"libs-ui-breadcrumb-multi-step-normal relative left-[1px] top-0\"\n        [attr.focus]=\"openList() && indexFocus() === index\"\n        [class.active]=\"step.status === 'selected'\"\n        [class.complete]=\"step.status === 'completed'\"\n        [class.disabled]=\"step.status === 'disabled'\"\n        [class.failed]=\"step.status === 'failed'\" />\n    }\n    <div class=\"libs-ui-breadcrumb-multi-step-center flex items-center justify-center libs-ui-font-h6m\">\n      <libs_ui-components-popover [classInclude]=\"'libs-ui-breadcrumb-multi-step-center-popover py-[12px] ' + (configClassMultiStep()?.classInclude || '')\"\n        [type]=\"'text'\"\n        [ignoreShowPopover]=\"true\"\n        [ignoreStopPropagationEvent]=\"true\">\n        <div class=\"libs-ui-font-h6m flex items-center justify-center gap-2 h-[40px]\"\n          [style.max-width.px]=\"configClassMultiStep()?.maxWidth || 200\"\n          [style.width.px]=\"configClassMultiStep()?.width\"\n          [attr.focus]=\"openList() && indexFocus() === index\"\n          [class.active]=\"step.status === 'selected'\"\n          [class.complete]=\"step.status === 'completed'\"\n          [class.disabled]=\"step.status === 'disabled'\"\n          [class.failed]=\"step.status === 'failed'\"\n          [class.rounded-tl-[4px]]=\"first\"\n          [class.rounded-bl-[4px]]=\"first\"\n          [class.pl-[6px]]=\"first\"\n          [class.rounded-tr-[4px]]=\"last\"\n          [class.rounded-br-[4px]]=\"last\"\n          [class.pr-[16px]]=\"last\">\n          <libs_ui-components-popover [classInclude]=\"'text-nowrap pl-[10px] ' + (configClassMultiStep()?.classTitleInclude || 'max-w-[160px]')\"\n            [type]=\"'text'\"\n            [config]=\"step.popover || { maxWidth: 250, direction: 'top', content: step.title | translate }\"\n            [ignoreStopPropagationEvent]=\"true\"\n            [innerHTML]=\"step.title | translate\" />\n          @if (step.type === 'dropdown') {\n            <i [attr.isFocus]=\"openList() && indexFocus() === index\"\n              class=\"libs-ui-icon-move-right rotate-90\"></i>\n          }\n        </div>\n      </libs_ui-components-popover>\n    </div>\n    @if (!last) {\n      <libs_ui-components-breadcrumb-multi_step-arrow_begin class=\"libs-ui-breadcrumb-multi-step-normal relative left-[-1px] top-0\"\n        [attr.focus]=\"openList() && indexFocus() === index\"\n        [class.active]=\"step.status === 'selected'\"\n        [class.complete]=\"step.status === 'completed'\"\n        [class.disabled]=\"step.status === 'disabled'\"\n        [class.failed]=\"step.status === 'failed'\" />\n    }\n  </div>\n</ng-template>\n", styles: [".libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover{color:#6a7383;background-color:#e6e7ea}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i[focus=true]:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i[focus=true]:after{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i:after{color:#6a7383;background-color:#e6e7ea}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.active>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.active>i:after{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i:after{background-color:#e6faf0;color:#00bc62}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i[focus=true]:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i[focus=true]:after{background-color:#e6faf0;color:#00bc62}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i:after{background-color:#fdeaec;color:#ee2d41}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i[focus=true]:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i[focus=true]:after{background-color:#fdeaec;color:#ee2d41}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:after{background-color:#f8f9fa;color:#cdd0d6}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.active{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete{background-color:#e6faf0;color:#00bc62}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete[focus=true]{background-color:#e6faf0!important;color:#00bc62!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed{background-color:#fdeaec;color:#ee2d41}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed[focus=true]{background-color:#fdeaec!important;color:#ee2d41!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.disabled{background-color:#f8f9fa;color:#cdd0d6}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover[focus=true]{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal{fill:#e6e7ea}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.active{fill:var(--libs-ui-button-other-color-background, #226ff5)}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.complete{fill:#e6faf0}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.complete[focus=true]{fill:#e6faf0!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.failed{fill:#fdeaec}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.failed[focus=true]{fill:#fdeaec!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.disabled{fill:#f8f9fa}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal[focus=true],.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.complete,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.failed{fill:#e9f1fe}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.disabled{fill:#f8f9fa}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.active{fill:var(--libs-ui-button-other-color-background, #226ff5)}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover>i:before,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover>i:after{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.complete,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.failed{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.active{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.active>i:before,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.active>i:after{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.disabled{background-color:#f8f9fa;color:#cdd0d6}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:before,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:after{background-color:#f8f9fa;color:#cdd0d6}\n"] }]
         }] });
 
+class LibsUiComponentsBreadcrumbDemoComponent {
+    // Input documentation
+    inputsDoc = [
+        { name: 'width', type: 'number', default: '24', description: 'Chiều rộng mỗi bước trong breadcrumb' },
+        { name: 'mode', type: 'TYPE_MODE_BREADCRUMB', default: 'center', description: 'Căn chỉnh: center | left | right' },
+        { name: 'steps', type: 'Array<ITabBreadCrumb>', default: '[]', description: 'Danh sách các bước hiển thị' },
+        { name: 'classInclude', type: 'string', default: 'undefined', description: 'Lớp CSS bổ sung cho mỗi bước' },
+        { name: 'completedIndex', type: 'Array<number>', default: '[]', description: 'Các chỉ số của bước đã hoàn thành' },
+        { name: 'backgroundWhite', type: 'boolean', default: 'false', description: 'Nền trắng cho breadcrumb khi true' }
+    ];
+    // Interface documentation
+    interfacesDoc = [
+        {
+            name: 'ITabBreadCrumb',
+            code: 'interface ITabBreadCrumb { number: number; title: string; valid?: boolean; config?: IPopover; disable?: boolean; classInclude?: string; }',
+            description: 'Định nghĩa từng bước trong breadcrumb'
+        },
+        {
+            name: 'TYPE_MODE_BREADCRUMB',
+            code: "type TYPE_MODE_BREADCRUMB = 'center' | 'left' | 'right';",
+            description: 'Chế độ căn chỉnh của breadcrumb'
+        }
+    ];
+    // Output documentation
+    outputsDoc = [
+        { name: 'outStepSelected', type: '(ITabBreadCrumbSelected) => void', description: 'Phát ra sự kiện khi chọn bước, trả về { index }' },
+        { name: 'outFunctionControl', type: 'IBreadCrumbFunctionControlEvent', description: 'Cung cấp API để điều khiển component (setSelectedStep, setCompletedStep, ...)' }
+    ];
+    // Features overview
+    features = [
+        { id: 1, title: 'Đánh dấu bước hoàn thành', description: 'Cho phép hiển thị trạng thái đã hoàn thành cho các bước' },
+        { id: 2, title: 'Sự kiện chọn bước', description: 'Phát ra sự kiện khi người dùng chọn bước' },
+        { id: 3, title: 'Tùy chỉnh linh hoạt', description: 'Cho phép cấu hình nhiều tuỳ chọn khác nhau cho breadcrumb' }
+    ];
+    // Demo data sets
+    stepsBasic = [
+        { number: 1, title: 'Bước 1' },
+        { number: 2, title: 'Bước 2' },
+        { number: 3, title: 'Bước 3' }
+    ];
+    alignOptions = ['left', 'center', 'right'];
+    stepsStatus = [
+        { number: 1, title: 'Bước 1', valid: true },
+        { number: 2, title: 'Bước 2', valid: false },
+        { number: 3, title: 'Bước 3', disable: true },
+        { number: 4, title: 'Bước 4' }
+    ];
+    completedIndicesStatus = [0, 1];
+    // Arrow style breadcrumb (multi-step) demo data
+    arrowSteps = [
+        { number: 1, title: 'Bước 1', status: 'completed', type: 'text' },
+        { number: 2, title: 'Bước 2', status: 'selected', type: 'text' },
+        { number: 3, title: 'Bước 3', status: 'normal', type: 'text' }
+    ];
+    // Method for installation copy button
+    copyToClipboard(text) {
+        navigator.clipboard.writeText(text)
+            .then(() => console.log('Text copied to clipboard'))
+            .catch(err => console.error('Could not copy text: ', err));
+    }
+    // Demo data
+    demoSteps = [
+        { number: 1, title: 'Bước 1', valid: true },
+        { number: 2, title: 'Bước 2', valid: false },
+        { number: 3, title: 'Bước 3', valid: false }
+    ];
+    selectedStepIndex = 0;
+    // Handle arrow demo selection event
+    onArrowStepSelected(event) {
+        console.log('Arrow step selected:', event);
+    }
+    // Change selected step programmatically
+    changeStep(index) {
+        this.selectedStepIndex = index;
+    }
+    // Handle component's output event
+    onStepSelected(event) {
+        this.selectedStepIndex = event.index;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsBreadcrumbDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LibsUiComponentsBreadcrumbDemoComponent, isStandalone: true, selector: "lib-breadcrumb-demo", ngImport: i0, template: "<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n  <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n    <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Demo Breadcrumb Component</h1>\n    <p class=\"text-xl text-gray-500\">Th\u01B0 vi\u1EC7n Breadcrumb cho Angular</p>\n  </header>\n\n  <main>\n    <!-- Gi\u1EDBi thi\u1EC7u -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Gi\u1EDBi thi\u1EC7u</h2>\n      <p>\n        <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">&#64;libs-ui/components-breadcrumb</code> l\u00E0 m\u1ED9t component Angular gi\u00FAp hi\u1EC3n th\u1ECB \u0111\u01B0\u1EDDng d\u1EABn ph\u00E2n c\u1EA5p ho\u1EB7c ti\u1EBFn tr\u00ECnh theo c\u00E1c b\u01B0\u1EDBc, v\u1EDBi kh\u1EA3 n\u0103ng \u0111\u00E1nh d\u1EA5u b\u01B0\u1EDBc \u0111\u00E3 ho\u00E0n th\u00E0nh, b\u01B0\u1EDBc \u0111ang ch\u1ECDn, v\u00E0 b\u01B0\u1EDBc v\u00F4 hi\u1EC7u h\u00F3a.\n      </p>\n    </section>\n\n    <!-- C\u00E0i \u0111\u1EB7t -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E0i \u0111\u1EB7t</h2>\n      <div class=\"mb-6\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Y\u00EAu c\u1EA7u</h3>\n        <ul class=\"list-disc pl-5 space-y-2 text-gray-600\">\n          <li><span class=\"font-semibold\">Angular</span>: 18.0.0 tr\u1EDF l\u00EAn</li>\n        </ul>\n      </div>\n      <p class=\"mb-4\">\u0110\u1EC3 c\u00E0i \u0111\u1EB7t th\u01B0 vi\u1EC7n:</p>\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>npm install &#64;libs-ui/components-breadcrumb</code></pre>\n        <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\" (click)=\"copyToClipboard('npm install @libs-ui/components-breadcrumb')\">Sao ch\u00E9p</button>\n      </div>\n      <p class=\"mb-4\">Ho\u1EB7c v\u1EDBi yarn:</p>\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>yarn add &#64;libs-ui/components-breadcrumb</code></pre>\n        <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\" (click)=\"copyToClipboard('yarn add @libs-ui/components-breadcrumb')\">Sao ch\u00E9p</button>\n      </div>\n    </section>\n\n    <!-- Demo tr\u1EF1c ti\u1EBFp -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Demo Tr\u1EF1c ti\u1EBFp</h2>\n\n      <!-- Basic demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Breadcrumb c\u01A1 b\u1EA3n</h3>\n        <div class=\"p-4 bg-gray-50 rounded-lg\">\n          <libs_ui-components-breadcrumb [steps]=\"stepsBasic\"></libs_ui-components-breadcrumb>\n        </div>\n      </div>\n\n      <!-- Mode variants -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Ch\u1EBF \u0111\u1ED9 c\u0103n ch\u1EC9nh</h3>\n        <div class=\"flex items-center gap-6\">\n          <ng-container *ngFor=\"let mode of alignOptions\">\n            <div class=\"text-center\">\n              <div class=\"mb-2\"><code>{{ mode }}</code></div>\n              <libs_ui-components-breadcrumb [steps]=\"stepsBasic\" [mode]=\"mode\"></libs_ui-components-breadcrumb>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n\n      <!-- Status demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Breadcrumb v\u1EDBi tr\u1EA1ng th\u00E1i</h3>\n        <div class=\"p-4 bg-gray-50 rounded-lg\">\n          <libs_ui-components-breadcrumb [steps]=\"stepsStatus\" [completedIndex]=\"completedIndicesStatus\"></libs_ui-components-breadcrumb>\n        </div>\n      </div>\n\n      <!-- Arrow style (Multi-Step) demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Breadcrumb Arrow Style</h3>\n        <div class=\"p-4 bg-gray-50 rounded-lg overflow-auto\">\n          <libs_ui-components-breadcrumb-multi_step\n            [stepsMulti]=\"arrowSteps\"\n            (outMultiStepSelect)=\"onArrowStepSelected($event)\"\n          ></libs_ui-components-breadcrumb-multi_step>\n        </div>\n        <p class=\"mt-2 text-sm text-gray-500\">M\u00F4 t\u1EA3 d\u1EA1ng arrow (Multi-step) s\u1EED d\u1EE5ng separator m\u0169i t\u00EAn.</p>\n      </div>\n    </section>\n\n    <!-- C\u00E1ch s\u1EED d\u1EE5ng -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E1ch s\u1EED d\u1EE5ng</h2>\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">V\u00ED d\u1EE5 s\u1EED d\u1EE5ng</h3>\n        <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-breadcrumb [steps]=\"stepsBasic\" [mode]=\"'center'\"&gt;&lt;/libs_ui-components-breadcrumb&gt;</code></pre>\n      </div>\n    </section>\n\n    <!-- API Reference -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00E0i li\u1EC7u API</h2>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Inputs</h3>\n      <div class=\"overflow-x-auto mb-6\">\n        <table class=\"min-w-full bg-white border border-gray-200\">\n          <thead>\n            <tr>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u</th>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u1EB7c \u0111\u1ECBnh</th>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let input of inputsDoc\">\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.name }}</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.type }}</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.default }}</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.description }}</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Outputs</h3>\n      <div class=\"overflow-x-auto mb-6\">\n        <table class=\"min-w-full bg-white border border-gray-200\">\n          <thead>\n            <tr>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u</th>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let output of outputsDoc\">\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ output.name }}</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ output.type }}</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">{{ output.description }}</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Interfaces</h3>\n      <div class=\"space-y-6\">\n        <div *ngFor=\"let intf of interfacesDoc\" class=\"bg-gray-50 p-6 rounded-lg\">\n          <h4 class=\"text-lg font-semibold text-gray-700 mb-3\">{{ intf.name }}</h4>\n          <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-3\"><code>{{ intf.code }}</code></pre>\n          <p class=\"text-gray-600\">{{ intf.description }}</p>\n        </div>\n      </div>\n    </section>\n  </main>\n</div> ", styles: [".demo-container{max-width:800px;margin:0 auto;padding:16px}.demo-header{text-align:center;margin-bottom:24px}.demo-header h1{font-size:24px;margin:0}.demo-header p{font-size:14px;color:#666}.demo-install pre{background:#f5f5f5;padding:8px;border-radius:4px}.demo-live{margin-top:24px}.step-buttons button{margin-right:8px;margin-top:8px}.demo-api table{width:100%;border-collapse:collapse;margin-top:16px}.demo-api table,.demo-api th,.demo-api td{border:1px solid #ccc}.demo-api th,.demo-api td{padding:8px;text-align:left}.demo-api h3{margin-top:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: LibsUiComponentsBreadcrumbComponent, selector: "libs_ui-components-breadcrumb", inputs: ["width", "mode", "steps", "classInclude", "completedIndex", "backgroundWhite"], outputs: ["stepsChange", "completedIndexChange", "outStepSelected", "outFunctionControl"] }, { kind: "component", type: LibsUiComponentsBreadcrumbMultiStepComponent, selector: "libs_ui-components-breadcrumb-multi_step", inputs: ["popoverCustomConfig", "stepsMulti", "configClassMultiStep", "elementRef"], outputs: ["outMultiStepSelect"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsBreadcrumbDemoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-breadcrumb-demo', standalone: true, imports: [
+                        CommonModule,
+                        LibsUiComponentsBreadcrumbComponent,
+                        LibsUiComponentsBreadcrumbMultiStepComponent
+                    ], template: "<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n  <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n    <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Demo Breadcrumb Component</h1>\n    <p class=\"text-xl text-gray-500\">Th\u01B0 vi\u1EC7n Breadcrumb cho Angular</p>\n  </header>\n\n  <main>\n    <!-- Gi\u1EDBi thi\u1EC7u -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Gi\u1EDBi thi\u1EC7u</h2>\n      <p>\n        <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">&#64;libs-ui/components-breadcrumb</code> l\u00E0 m\u1ED9t component Angular gi\u00FAp hi\u1EC3n th\u1ECB \u0111\u01B0\u1EDDng d\u1EABn ph\u00E2n c\u1EA5p ho\u1EB7c ti\u1EBFn tr\u00ECnh theo c\u00E1c b\u01B0\u1EDBc, v\u1EDBi kh\u1EA3 n\u0103ng \u0111\u00E1nh d\u1EA5u b\u01B0\u1EDBc \u0111\u00E3 ho\u00E0n th\u00E0nh, b\u01B0\u1EDBc \u0111ang ch\u1ECDn, v\u00E0 b\u01B0\u1EDBc v\u00F4 hi\u1EC7u h\u00F3a.\n      </p>\n    </section>\n\n    <!-- C\u00E0i \u0111\u1EB7t -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E0i \u0111\u1EB7t</h2>\n      <div class=\"mb-6\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Y\u00EAu c\u1EA7u</h3>\n        <ul class=\"list-disc pl-5 space-y-2 text-gray-600\">\n          <li><span class=\"font-semibold\">Angular</span>: 18.0.0 tr\u1EDF l\u00EAn</li>\n        </ul>\n      </div>\n      <p class=\"mb-4\">\u0110\u1EC3 c\u00E0i \u0111\u1EB7t th\u01B0 vi\u1EC7n:</p>\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>npm install &#64;libs-ui/components-breadcrumb</code></pre>\n        <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\" (click)=\"copyToClipboard('npm install @libs-ui/components-breadcrumb')\">Sao ch\u00E9p</button>\n      </div>\n      <p class=\"mb-4\">Ho\u1EB7c v\u1EDBi yarn:</p>\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>yarn add &#64;libs-ui/components-breadcrumb</code></pre>\n        <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\" (click)=\"copyToClipboard('yarn add @libs-ui/components-breadcrumb')\">Sao ch\u00E9p</button>\n      </div>\n    </section>\n\n    <!-- Demo tr\u1EF1c ti\u1EBFp -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Demo Tr\u1EF1c ti\u1EBFp</h2>\n\n      <!-- Basic demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Breadcrumb c\u01A1 b\u1EA3n</h3>\n        <div class=\"p-4 bg-gray-50 rounded-lg\">\n          <libs_ui-components-breadcrumb [steps]=\"stepsBasic\"></libs_ui-components-breadcrumb>\n        </div>\n      </div>\n\n      <!-- Mode variants -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Ch\u1EBF \u0111\u1ED9 c\u0103n ch\u1EC9nh</h3>\n        <div class=\"flex items-center gap-6\">\n          <ng-container *ngFor=\"let mode of alignOptions\">\n            <div class=\"text-center\">\n              <div class=\"mb-2\"><code>{{ mode }}</code></div>\n              <libs_ui-components-breadcrumb [steps]=\"stepsBasic\" [mode]=\"mode\"></libs_ui-components-breadcrumb>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n\n      <!-- Status demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Breadcrumb v\u1EDBi tr\u1EA1ng th\u00E1i</h3>\n        <div class=\"p-4 bg-gray-50 rounded-lg\">\n          <libs_ui-components-breadcrumb [steps]=\"stepsStatus\" [completedIndex]=\"completedIndicesStatus\"></libs_ui-components-breadcrumb>\n        </div>\n      </div>\n\n      <!-- Arrow style (Multi-Step) demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Breadcrumb Arrow Style</h3>\n        <div class=\"p-4 bg-gray-50 rounded-lg overflow-auto\">\n          <libs_ui-components-breadcrumb-multi_step\n            [stepsMulti]=\"arrowSteps\"\n            (outMultiStepSelect)=\"onArrowStepSelected($event)\"\n          ></libs_ui-components-breadcrumb-multi_step>\n        </div>\n        <p class=\"mt-2 text-sm text-gray-500\">M\u00F4 t\u1EA3 d\u1EA1ng arrow (Multi-step) s\u1EED d\u1EE5ng separator m\u0169i t\u00EAn.</p>\n      </div>\n    </section>\n\n    <!-- C\u00E1ch s\u1EED d\u1EE5ng -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E1ch s\u1EED d\u1EE5ng</h2>\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">V\u00ED d\u1EE5 s\u1EED d\u1EE5ng</h3>\n        <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-breadcrumb [steps]=\"stepsBasic\" [mode]=\"'center'\"&gt;&lt;/libs_ui-components-breadcrumb&gt;</code></pre>\n      </div>\n    </section>\n\n    <!-- API Reference -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00E0i li\u1EC7u API</h2>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Inputs</h3>\n      <div class=\"overflow-x-auto mb-6\">\n        <table class=\"min-w-full bg-white border border-gray-200\">\n          <thead>\n            <tr>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u</th>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u1EB7c \u0111\u1ECBnh</th>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let input of inputsDoc\">\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.name }}</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.type }}</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.default }}</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.description }}</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Outputs</h3>\n      <div class=\"overflow-x-auto mb-6\">\n        <table class=\"min-w-full bg-white border border-gray-200\">\n          <thead>\n            <tr>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u</th>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let output of outputsDoc\">\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ output.name }}</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ output.type }}</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">{{ output.description }}</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Interfaces</h3>\n      <div class=\"space-y-6\">\n        <div *ngFor=\"let intf of interfacesDoc\" class=\"bg-gray-50 p-6 rounded-lg\">\n          <h4 class=\"text-lg font-semibold text-gray-700 mb-3\">{{ intf.name }}</h4>\n          <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-3\"><code>{{ intf.code }}</code></pre>\n          <p class=\"text-gray-600\">{{ intf.description }}</p>\n        </div>\n      </div>\n    </section>\n  </main>\n</div> ", styles: [".demo-container{max-width:800px;margin:0 auto;padding:16px}.demo-header{text-align:center;margin-bottom:24px}.demo-header h1{font-size:24px;margin:0}.demo-header p{font-size:14px;color:#666}.demo-install pre{background:#f5f5f5;padding:8px;border-radius:4px}.demo-live{margin-top:24px}.step-buttons button{margin-right:8px;margin-top:8px}.demo-api table{width:100%;border-collapse:collapse;margin-top:16px}.demo-api table,.demo-api th,.demo-api td{border:1px solid #ccc}.demo-api th,.demo-api td{padding:8px;text-align:left}.demo-api h3{margin-top:24px}\n"] }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { LibsUiComponentsBreadcrumbComponent, LibsUiComponentsBreadcrumbMultiStepComponent };
+export { LibsUiComponentsBreadcrumbComponent, LibsUiComponentsBreadcrumbDemoComponent, LibsUiComponentsBreadcrumbMultiStepComponent };
 //# sourceMappingURL=libs-ui-components-breadcrumb.mjs.map

package/fesm2022/libs-ui-components-breadcrumb.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"libs-ui-components-breadcrumb.mjs","sources":["../../../../../libs-ui/components/breadcrumb/src/pipes/check-complete-step.pipe.ts","../../../../../libs-ui/components/breadcrumb/src/breadcrumb.component.ts","../../../../../libs-ui/components/breadcrumb/src/breadcrumb.component.html","../../../../../libs-ui/components/breadcrumb/src/utils/breadcrumb.ts","../../../../../libs-ui/components/breadcrumb/src/multi-step/arrow-begin/arrow-begin.component.ts","../../../../../libs-ui/components/breadcrumb/src/multi-step/arrow-begin/arrow-begin.component.html","../../../../../libs-ui/components/breadcrumb/src/multi-step/arrow-end/arrow-end.component.ts","../../../../../libs-ui/components/breadcrumb/src/multi-step/arrow-end/arrow-end.component.html","../../../../../libs-ui/components/breadcrumb/src/pipes/check-disable-step.pipe.ts","../../../../../libs-ui/components/breadcrumb/src/multi-step/multi-step.component.ts","../../../../../libs-ui/components/breadcrumb/src/multi-step/multi-step.component.html","../../../../../libs-ui/components/breadcrumb/src/libs-ui-components-breadcrumb.ts"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({\n  name: 'LibsUiComponentsBreadcrumbCheckCompleteStepPipe',\n  standalone: true\n})\nexport class LibsUiComponentsBreadcrumbCheckCompleteStepPipe implements PipeTransform {\n\n  transform(step: number, completedIndex: Array<number>): boolean {\n    return completedIndex.includes(step);\n  }\n\n}\n","import { ChangeDetectionStrategy, Component, input, model, OnInit, output, signal } from '@angular/core';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { IBreadCrumbFunctionControlEvent, ITabBreadCrumb, ITabBreadCrumbSelected, TYPE_MODE_BREADCRUMB } from './interfaces/breadcrumb.interface';\nimport { LibsUiComponentsBreadcrumbCheckCompleteStepPipe } from './pipes/check-complete-step.pipe';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'libs_ui-components-breadcrumb',\n  templateUrl: './breadcrumb.component.html',\n  styleUrl: './breadcrumb.component.scss',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    TranslateModule,\n    LibsUiComponentsBreadcrumbCheckCompleteStepPipe\n  ]\n})\nexport class LibsUiComponentsBreadcrumbComponent implements OnInit {\n\n  // #region PROPERTY\n  protected selectedIndex = signal<number>(0);\n  protected stepDisable = signal<Array<number>>([]);\n\n  // #region INPUT\n  readonly width = input<number>(24);\n  readonly mode = input<TYPE_MODE_BREADCRUMB>('center');\n  readonly steps = model<Array<ITabBreadCrumb>>();\n  readonly classInclude = input<string>();\n  readonly completedIndex = model<Array<number>>([]);\n  readonly backgroundWhite = input<boolean>();\n\n  // #region OUTPUT\n  readonly outStepSelected = output<ITabBreadCrumbSelected>();\n  readonly outFunctionControl = output<IBreadCrumbFunctionControlEvent>();\n\n  ngOnInit() {\n    this.outFunctionControl.emit({\n      setSelectedStep: async (event) => this.selectedIndex.set(event),\n      setCompletedStep: this.setCompletedStep.bind(this),\n      setStepDisable: async (event) => this.stepDisable.set(event),\n      getCompleteIndex: async () => this.completedIndex(),\n      getSelectedIndex: async () => this.selectedIndex(),\n      resetCompleteIndex: this.resetCompleteIndex.bind(this)\n    });\n  }\n\n  /* FUNCTIONS */\n  protected handlerSelectStep(event: Event, index: number) {\n    event.stopPropagation();\n    this.outStepSelected.emit({ index });\n  }\n\n  protected async setCompletedStep(complete: boolean, index: number) {\n    const indexFound = this.completedIndex().indexOf(index);\n    if (indexFound >= 0) {\n      this.completedIndex.update(items => {\n        items.splice(indexFound, 1);\n        return [...items];\n      });\n    }\n    if (complete) {\n      this.completedIndex.update(items => {\n        items.push(index);\n        return [...items];\n      });\n    }\n  }\n\n  protected async resetCompleteIndex(resetAll = true, index?: number) {\n    if (resetAll) {\n      this.completedIndex.set([]);\n      return;\n    }\n    this.completedIndex.update(items => items.filter(item => item !== index));\n  }\n\n  protected handlerLabelEvent(event: Event, index: number) {\n    this.handlerSelectStep(event, index);\n  }\n\n}\n","<div class=\"flex items-center {{ classInclude() || '' }}\"\n  [class.justify-center]=\"mode() === 'center'\"\n  [class.justify-start]=\"mode() === 'left'\"\n  [class.justify-end]=\"mode() === 'right'\"\n  [class.bg-[#ffffff]]=\"backgroundWhite()\">\n  @for (step of steps(); track step) {\n    <div class=\"libs-ui-breadcrumb-crumb flex {{ step.classInclude || 'w-full' }}\"\n      [class.pointer-events-none]=\"step.disable\"\n      (click)=\"handlerSelectStep($event, $index)\">\n      @if ($index | LibsUiComponentsBreadcrumbCheckCompleteStepPipe:completedIndex()) {\n        <span class=\"libs-ui-breadcrumb-crumb-check-complete\">\n          <span class=\"libs-ui-breadcrumb-crumb-check-complete-icon libs-ui-icon-check inline-block m-auto\"></span>\n        </span>\n      } @else {\n        <span class=\"libs-ui-breadcrumb-crumb-number libs-ui-font-h5m\"\n          [class.disable]=\"step.disable\"\n          [class.pointer-events-none]=\"step.disable\"\n          [class.text-[#cdd0d6]]=\"step.disable\"\n          [class.bg-[#f8f9fa]]=\"step.disable\"\n          [class.text-[#ffffff]]=\"$index === selectedIndex()\"\n          [class.bg-[var(--libs-ui-color-default)]]=\"$index === selectedIndex()\"\n          [class.text-[var(--libs-ui-color-default)]]=\"$index !== selectedIndex()\"\n          [class.bg-[var(--libs-ui-color-light-2)]]=\"$index !== selectedIndex()\">\n          {{ step.number }}\n        </span>\n      }\n      <span class=\"libs-ui-breadcrumb-crumb-title libs-ui-font-h5m\"\n        [class.disable]=\"step.disable\"\n        [class.pointer-events-none]=\"step.disable\"\n        [class.text-[#cdd0d6]]=\"step.disable\"\n        [class.active]=\"$index === selectedIndex()\"\n        (click)=\"handlerLabelEvent($event, $index)\">\n        {{ step.title | translate }}\n      </span>\n      @if (!$last) {\n        <div class=\"mx-[12px] h-[1px] bg-[#e6e7ea]\"\n          [style.width.px]=\"width()\">\n        </div>\n      }\n    </div>\n  }\n</div>\n","import { IPopoverCustomConfig } from \"@libs-ui/components-dropdown\";\n\nexport const ConfigPopupDropdown = (): IPopoverCustomConfig => {\n  return {\n    maxWidth: 210,\n    direction: 'bottom',\n    classInclude: 'w-[200px]',\n    position: {\n      mode: 'center',\n      distance: 0\n    }\n  };\n};\n","import { Component } from \"@angular/core\";\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'libs_ui-components-breadcrumb-multi_step-arrow_begin',\n  templateUrl: './arrow-begin.component.html',\n  styleUrls: ['../multi-step.component.scss'],\n  standalone: true\n})\nexport class LibsUiComponentsBreadcrumbMultiStepArrowBeginComponent { }","<svg version=\"1.2\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  viewBox=\"0 0 20 40\"\n  width=\"20\"\n  height=\"40\">\n  <path d=\"m-177.9 1.6c-0.5-0.7 0-1.6 0.8-1.6h183.1c1.4 0 2.6 0.7 3.4 1.8l10.2 16c0.9 1.4 0.9 3 0 4.4l-10.2 16c-0.8 1.1-2 1.8-3.4 1.8h-183.1c-0.8 0-1.3-0.9-0.8-1.6l11.9-17.3c0.4-0.7 0.4-1.5 0-2.2z\" />\n</svg>","import { Component } from \"@angular/core\";\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'libs_ui-components-breadcrumb-multi_step-arrow_end',\n  templateUrl: './arrow-end.component.html',\n  styleUrls: ['../multi-step.component.scss'],\n  standalone: true\n})\nexport class LibsUiComponentsBreadcrumbMultiStepArrowEndComponent { }","<svg version=\"1.2\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  viewBox=\"0 0 20 40\"\n  width=\"20\"\n  height=\"40\">\n  <path d=\"m1.1 1.6c-0.5-0.7 0-1.6 0.8-1.6h183.1c1.4 0 2.6 0.7 3.4 1.8l10.2 16c0.9 1.4 0.9 3 0 4.4l-10.2 16c-0.8 1.1-2 1.8-3.4 1.8h-183.1c-0.8 0-1.3-0.9-0.8-1.6l11.9-17.3c0.4-0.7 0.4-1.5 0-2.2z\" />\n</svg>","import { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({\n  name: 'LibsUiComponentsBreadcrumbCheckDisableStepPipe',\n  standalone: true\n})\nexport class LibsUiComponentsBreadcrumbCheckDisableStepPipe implements PipeTransform {\n\n  transform(index: number, stepDisable: Array<number>): boolean {\n    return stepDisable.includes(index);\n  }\n\n}\n","import { NgTemplateOutlet } from \"@angular/common\";\nimport { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, input, OnInit, output, signal, viewChildren } from \"@angular/core\";\nimport { IDropdownFunctionControlEvent, IEmitSelectKey, IPopoverCustomConfig, LibsUiComponentsDropdownComponent } from \"@libs-ui/components-dropdown\";\nimport { LibsUiComponentsPopoverComponent } from \"@libs-ui/components-popover\";\nimport { LibsUiComponentsBreadcrumbComponent } from \"../breadcrumb.component\";\nimport { IConfigClassMultiStep, ITabBreadCrumbMultiStep, ITabBreadCrumbMultiStepSelected } from \"../interfaces/breadcrumb.interface\";\nimport { ConfigPopupDropdown } from \"../utils/breadcrumb\";\nimport { LibsUiComponentsBreadcrumbMultiStepArrowBeginComponent } from \"./arrow-begin/arrow-begin.component\";\nimport { LibsUiComponentsBreadcrumbMultiStepArrowEndComponent } from \"./arrow-end/arrow-end.component\";\nimport { LibsUiComponentsBreadcrumbCheckDisableStepPipe } from \"../pipes/check-disable-step.pipe\";\nimport { TranslateModule } from \"@ngx-translate/core\";\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'libs_ui-components-breadcrumb-multi_step',\n  templateUrl: './multi-step.component.html',\n  styleUrls: ['./multi-step.component.scss'],\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    TranslateModule, NgTemplateOutlet,\n    LibsUiComponentsBreadcrumbMultiStepArrowBeginComponent,\n    LibsUiComponentsBreadcrumbMultiStepArrowEndComponent,\n    LibsUiComponentsPopoverComponent,\n    LibsUiComponentsDropdownComponent,\n    LibsUiComponentsBreadcrumbCheckDisableStepPipe\n  ]\n})\nexport class LibsUiComponentsBreadcrumbMultiStepComponent extends LibsUiComponentsBreadcrumbComponent implements OnInit, AfterViewInit {\n\n  // #region PROPERTY\n  protected failedIndex = signal<Array<number>>([]);\n  protected listKeyHidden = signal<Array<string> | undefined>(undefined);\n  protected openList = signal<boolean>(false);\n  protected indexFocus = signal<number | undefined>(undefined);\n\n  private dropDownFunctionControl = signal<IDropdownFunctionControlEvent | undefined>(undefined);\n\n  // #region INPUT\n  readonly popoverCustomConfig = input<IPopoverCustomConfig>(ConfigPopupDropdown());\n  readonly stepsMulti = input.required<Array<ITabBreadCrumbMultiStep>>();\n  readonly configClassMultiStep = input<IConfigClassMultiStep>();\n  readonly elementRef = input<HTMLElement>();\n\n  // #region OUTPUT\n  // Note: Kiểu dữ liệu của step sẽ được định nghĩa từ bên ngoài với type general <T>\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  readonly outMultiStepSelect = output<ITabBreadCrumbMultiStepSelected<any>>();\n\n  /* VIEW CHILD */\n  private readonly stepEl = viewChildren<ElementRef>('stepEl');\n\n  ngAfterViewInit(): void {\n    this.handlerScrollIntoView();\n  }\n\n  protected override handlerLabelEvent(event: Event, index: number) {\n    event.stopPropagation();\n    if (this.stepsMulti()[index].status === 'disabled' || this.stepDisable().includes(index)) {\n      return;\n    }\n    this.handlerSelectMultiStep(undefined, { type: 'text', index });\n  }\n\n  protected handlerSelectKey(event: IEmitSelectKey | undefined, index: number): void {\n    if (this.stepDisable().includes(index) || !event) {\n      return;\n    }\n    this.dropDownFunctionControl()?.reset();\n    this.handlerSelectMultiStep(undefined, { type: 'dropdown', index, step: event.item });\n  }\n\n  protected handlerShowList(event: boolean, index: number): void {\n    this.openList.set(event);\n    this.indexFocus.set(event ? index : undefined);\n  }\n\n  // Note: Kiểu dữ liệu của step sẽ được định nghĩa từ bên ngoài với type general <T>\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  private handlerSelectMultiStep(event: Event | undefined, step: ITabBreadCrumbMultiStepSelected<any>): void {\n    event?.stopPropagation();\n    this.outMultiStepSelect.emit({ ...step, callBack: (event: Array<string> | undefined) => this.listKeyHidden.set(event) });\n  }\n\n  protected handlerDropDownFunctionControl(event: IDropdownFunctionControlEvent): void {\n    this.dropDownFunctionControl.set(event);\n  }\n\n  protected handlerScrollIntoView(): void {\n    setTimeout(() => {\n      const selectedStep = this.stepsMulti().findIndex(item => item.status === 'selected');\n      const indexScroll = selectedStep !== -1 ? selectedStep : this.stepsMulti().length - 1;\n      const { offsetWidth } = this.elementRef() || {};\n\n      this.stepEl().forEach((element, index) => {\n        if (index === indexScroll) {\n          if (offsetWidth && (offsetWidth - element.nativeElement.offsetLeft) < 200) {\n            this.elementRef()?.scrollTo({ left: element.nativeElement.offsetLeft, behavior: 'smooth' });\n          }\n        }\n      });\n    }, 1000);\n  }\n\n}\n","<div class=\"flex items-center {{ classInclude() || '' }}\"\n  [class.justify-center]=\"mode() === 'center'\"\n  [class.justify-start]=\"mode() === 'left'\"\n  [class.justify-end]=\"mode() === 'right'\"\n  [class.bg-[#ffffff]]=\"backgroundWhite()\"\n  #containerEl>\n  @for (step of stepsMulti(); track step) {\n    <div #stepEl\n      class=\"flex libs-ui-breadcrumb-multi-step\"\n      [class.cursor-default]=\"step.status === 'disabled'\"\n      [class.pointer-events-none]=\"step.status === 'disabled'\"\n      [class.cursor-pointer]=\"step.status !== 'disabled'\">\n      @if (step.type === 'text') {\n        <div (click)=\"handlerLabelEvent($event, $index)\">\n          <ng-container [ngTemplateOutlet]=\"contentEl\"\n            [ngTemplateOutletContext]=\"{$index, $first, $last, step}\" />\n        </div>\n      } @else {\n        <libs_ui-components-dropdown [isNgContent]=\"true\"\n          [listHiddenInputSearch]=\"true\"\n          [listHasButtonUnSelectOption]=\"step.listHasButtonUnSelectOption\"\n          [listConfig]=\"step.listConfigItem\"\n          [popoverCustomConfig]=\"popoverCustomConfig()\"\n          [listKeysHidden]=\"listKeyHidden() ?? step.listKeysHidden\"\n          [disable]=\"$index | LibsUiComponentsBreadcrumbCheckDisableStepPipe:stepDisable()\"\n          (outShowList)=\"handlerShowList($event, $index)\"\n          (outSelectKey)=\"handlerSelectKey($event, $index)\"\n          (outFunctionsControl)=\"handlerDropDownFunctionControl($event)\">\n          <ng-container [ngTemplateOutlet]=\"contentEl\"\n            [ngTemplateOutletContext]=\"{$index, $first, $last, step}\" />\n        </libs_ui-components-dropdown>\n      }\n    </div>\n  }\n</div>\n\n<ng-template #contentEl\n  let-index=\"$index\"\n  let-first=\"$first\"\n  let-step=\"step\"\n  let-last=\"$last\">\n  <div class=\"flex items-center\">\n    @if (!first) {\n      <libs_ui-components-breadcrumb-multi_step-arrow_end class=\"libs-ui-breadcrumb-multi-step-normal relative left-[1px] top-0\"\n        [attr.focus]=\"openList() && indexFocus() === index\"\n        [class.active]=\"step.status === 'selected'\"\n        [class.complete]=\"step.status === 'completed'\"\n        [class.disabled]=\"step.status === 'disabled'\"\n        [class.failed]=\"step.status === 'failed'\" />\n    }\n    <div class=\"libs-ui-breadcrumb-multi-step-center flex items-center justify-center libs-ui-font-h6m\">\n      <libs_ui-components-popover [classInclude]=\"'libs-ui-breadcrumb-multi-step-center-popover py-[12px] ' + (configClassMultiStep()?.classInclude || '')\"\n        [type]=\"'text'\"\n        [ignoreShowPopover]=\"true\"\n        [ignoreStopPropagationEvent]=\"true\">\n        <div class=\"libs-ui-font-h6m flex items-center justify-center gap-2 h-[40px]\"\n          [style.max-width.px]=\"configClassMultiStep()?.maxWidth || 200\"\n          [style.width.px]=\"configClassMultiStep()?.width\"\n          [attr.focus]=\"openList() && indexFocus() === index\"\n          [class.active]=\"step.status === 'selected'\"\n          [class.complete]=\"step.status === 'completed'\"\n          [class.disabled]=\"step.status === 'disabled'\"\n          [class.failed]=\"step.status === 'failed'\"\n          [class.rounded-tl-[4px]]=\"first\"\n          [class.rounded-bl-[4px]]=\"first\"\n          [class.pl-[6px]]=\"first\"\n          [class.rounded-tr-[4px]]=\"last\"\n          [class.rounded-br-[4px]]=\"last\"\n          [class.pr-[16px]]=\"last\">\n          <libs_ui-components-popover [classInclude]=\"'text-nowrap pl-[10px] ' + (configClassMultiStep()?.classTitleInclude || 'max-w-[160px]')\"\n            [type]=\"'text'\"\n            [config]=\"step.popover || { maxWidth: 250, direction: 'top', content: step.title | translate }\"\n            [ignoreStopPropagationEvent]=\"true\"\n            [innerHTML]=\"step.title | translate\" />\n          @if (step.type === 'dropdown') {\n            <i [attr.isFocus]=\"openList() && indexFocus() === index\"\n              class=\"libs-ui-icon-move-right rotate-90\"></i>\n          }\n        </div>\n      </libs_ui-components-popover>\n    </div>\n    @if (!last) {\n      <libs_ui-components-breadcrumb-multi_step-arrow_begin class=\"libs-ui-breadcrumb-multi-step-normal relative left-[-1px] top-0\"\n        [attr.focus]=\"openList() && indexFocus() === index\"\n        [class.active]=\"step.status === 'selected'\"\n        [class.complete]=\"step.status === 'completed'\"\n        [class.disabled]=\"step.status === 'disabled'\"\n        [class.failed]=\"step.status === 'failed'\" />\n    }\n  </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"libs-ui-components-breadcrumb.mjs","sources":["../../../../../libs-ui/components/breadcrumb/src/pipes/check-complete-step.pipe.ts","../../../../../libs-ui/components/breadcrumb/src/breadcrumb.component.ts","../../../../../libs-ui/components/breadcrumb/src/breadcrumb.component.html","../../../../../libs-ui/components/breadcrumb/src/utils/breadcrumb.ts","../../../../../libs-ui/components/breadcrumb/src/multi-step/arrow-begin/arrow-begin.component.ts","../../../../../libs-ui/components/breadcrumb/src/multi-step/arrow-begin/arrow-begin.component.html","../../../../../libs-ui/components/breadcrumb/src/multi-step/arrow-end/arrow-end.component.ts","../../../../../libs-ui/components/breadcrumb/src/multi-step/arrow-end/arrow-end.component.html","../../../../../libs-ui/components/breadcrumb/src/pipes/check-disable-step.pipe.ts","../../../../../libs-ui/components/breadcrumb/src/multi-step/multi-step.component.ts","../../../../../libs-ui/components/breadcrumb/src/multi-step/multi-step.component.html","../../../../../libs-ui/components/breadcrumb/src/demo/breadcrumb-demo.component.ts","../../../../../libs-ui/components/breadcrumb/src/demo/breadcrumb-demo.component.html","../../../../../libs-ui/components/breadcrumb/src/libs-ui-components-breadcrumb.ts"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({\n  name: 'LibsUiComponentsBreadcrumbCheckCompleteStepPipe',\n  standalone: true\n})\nexport class LibsUiComponentsBreadcrumbCheckCompleteStepPipe implements PipeTransform {\n\n  transform(step: number, completedIndex: Array<number>): boolean {\n    return completedIndex.includes(step);\n  }\n\n}\n","import { ChangeDetectionStrategy, Component, input, model, OnInit, output, signal } from '@angular/core';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { IBreadCrumbFunctionControlEvent, ITabBreadCrumb, ITabBreadCrumbSelected, TYPE_MODE_BREADCRUMB } from './interfaces/breadcrumb.interface';\nimport { LibsUiComponentsBreadcrumbCheckCompleteStepPipe } from './pipes/check-complete-step.pipe';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'libs_ui-components-breadcrumb',\n  templateUrl: './breadcrumb.component.html',\n  styleUrl: './breadcrumb.component.scss',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    TranslateModule,\n    LibsUiComponentsBreadcrumbCheckCompleteStepPipe\n  ]\n})\nexport class LibsUiComponentsBreadcrumbComponent implements OnInit {\n\n  // #region PROPERTY\n  protected selectedIndex = signal<number>(0);\n  protected stepDisable = signal<Array<number>>([]);\n\n  // #region INPUT\n  readonly width = input<number>(24);\n  readonly mode = input<TYPE_MODE_BREADCRUMB>('center');\n  readonly steps = model<Array<ITabBreadCrumb>>();\n  readonly classInclude = input<string>();\n  readonly completedIndex = model<Array<number>>([]);\n  readonly backgroundWhite = input<boolean>();\n\n  // #region OUTPUT\n  readonly outStepSelected = output<ITabBreadCrumbSelected>();\n  readonly outFunctionControl = output<IBreadCrumbFunctionControlEvent>();\n\n  ngOnInit() {\n    this.outFunctionControl.emit({\n      setSelectedStep: async (event) => this.selectedIndex.set(event),\n      setCompletedStep: this.setCompletedStep.bind(this),\n      setStepDisable: async (event) => this.stepDisable.set(event),\n      getCompleteIndex: async () => this.completedIndex(),\n      getSelectedIndex: async () => this.selectedIndex(),\n      resetCompleteIndex: this.resetCompleteIndex.bind(this)\n    });\n  }\n\n  /* FUNCTIONS */\n  protected handlerSelectStep(event: Event, index: number) {\n    event.stopPropagation();\n    this.outStepSelected.emit({ index });\n  }\n\n  protected async setCompletedStep(complete: boolean, index: number) {\n    const indexFound = this.completedIndex().indexOf(index);\n    if (indexFound >= 0) {\n      this.completedIndex.update(items => {\n        items.splice(indexFound, 1);\n        return [...items];\n      });\n    }\n    if (complete) {\n      this.completedIndex.update(items => {\n        items.push(index);\n        return [...items];\n      });\n    }\n  }\n\n  protected async resetCompleteIndex(resetAll = true, index?: number) {\n    if (resetAll) {\n      this.completedIndex.set([]);\n      return;\n    }\n    this.completedIndex.update(items => items.filter(item => item !== index));\n  }\n\n  protected handlerLabelEvent(event: Event, index: number) {\n    this.handlerSelectStep(event, index);\n  }\n\n}\n","<div class=\"flex items-center {{ classInclude() || '' }}\"\n  [class.justify-center]=\"mode() === 'center'\"\n  [class.justify-start]=\"mode() === 'left'\"\n  [class.justify-end]=\"mode() === 'right'\"\n  [class.bg-[#ffffff]]=\"backgroundWhite()\">\n  @for (step of steps(); track step) {\n    <div class=\"libs-ui-breadcrumb-crumb flex {{ step.classInclude || 'w-full' }}\"\n      [class.pointer-events-none]=\"step.disable\"\n      (click)=\"handlerSelectStep($event, $index)\">\n      @if ($index | LibsUiComponentsBreadcrumbCheckCompleteStepPipe:completedIndex()) {\n        <span class=\"libs-ui-breadcrumb-crumb-check-complete\">\n          <span class=\"libs-ui-breadcrumb-crumb-check-complete-icon libs-ui-icon-check inline-block m-auto\"></span>\n        </span>\n      } @else {\n        <span class=\"libs-ui-breadcrumb-crumb-number libs-ui-font-h5m\"\n          [class.disable]=\"step.disable\"\n          [class.pointer-events-none]=\"step.disable\"\n          [class.text-[#cdd0d6]]=\"step.disable\"\n          [class.bg-[#f8f9fa]]=\"step.disable\"\n          [class.text-[#ffffff]]=\"$index === selectedIndex()\"\n          [class.bg-[var(--libs-ui-color-default)]]=\"$index === selectedIndex()\"\n          [class.text-[var(--libs-ui-color-default)]]=\"$index !== selectedIndex()\"\n          [class.bg-[var(--libs-ui-color-light-2)]]=\"$index !== selectedIndex()\">\n          {{ step.number }}\n        </span>\n      }\n      <span class=\"libs-ui-breadcrumb-crumb-title libs-ui-font-h5m\"\n        [class.disable]=\"step.disable\"\n        [class.pointer-events-none]=\"step.disable\"\n        [class.text-[#cdd0d6]]=\"step.disable\"\n        [class.active]=\"$index === selectedIndex()\"\n        (click)=\"handlerLabelEvent($event, $index)\">\n        {{ step.title | translate }}\n      </span>\n      @if (!$last) {\n        <div class=\"mx-[12px] h-[1px] bg-[#e6e7ea]\"\n          [style.width.px]=\"width()\">\n        </div>\n      }\n    </div>\n  }\n</div>\n","import { IPopoverCustomConfig } from \"@libs-ui/components-dropdown\";\n\nexport const ConfigPopupDropdown = (): IPopoverCustomConfig => {\n  return {\n    maxWidth: 210,\n    direction: 'bottom',\n    classInclude: 'w-[200px]',\n    position: {\n      mode: 'center',\n      distance: 0\n    }\n  };\n};\n","import { Component } from \"@angular/core\";\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'libs_ui-components-breadcrumb-multi_step-arrow_begin',\n  templateUrl: './arrow-begin.component.html',\n  styleUrls: ['../multi-step.component.scss'],\n  standalone: true\n})\nexport class LibsUiComponentsBreadcrumbMultiStepArrowBeginComponent { }","<svg version=\"1.2\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  viewBox=\"0 0 20 40\"\n  width=\"20\"\n  height=\"40\">\n  <path d=\"m-177.9 1.6c-0.5-0.7 0-1.6 0.8-1.6h183.1c1.4 0 2.6 0.7 3.4 1.8l10.2 16c0.9 1.4 0.9 3 0 4.4l-10.2 16c-0.8 1.1-2 1.8-3.4 1.8h-183.1c-0.8 0-1.3-0.9-0.8-1.6l11.9-17.3c0.4-0.7 0.4-1.5 0-2.2z\" />\n</svg>","import { Component } from \"@angular/core\";\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'libs_ui-components-breadcrumb-multi_step-arrow_end',\n  templateUrl: './arrow-end.component.html',\n  styleUrls: ['../multi-step.component.scss'],\n  standalone: true\n})\nexport class LibsUiComponentsBreadcrumbMultiStepArrowEndComponent { }","<svg version=\"1.2\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  viewBox=\"0 0 20 40\"\n  width=\"20\"\n  height=\"40\">\n  <path d=\"m1.1 1.6c-0.5-0.7 0-1.6 0.8-1.6h183.1c1.4 0 2.6 0.7 3.4 1.8l10.2 16c0.9 1.4 0.9 3 0 4.4l-10.2 16c-0.8 1.1-2 1.8-3.4 1.8h-183.1c-0.8 0-1.3-0.9-0.8-1.6l11.9-17.3c0.4-0.7 0.4-1.5 0-2.2z\" />\n</svg>","import { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({\n  name: 'LibsUiComponentsBreadcrumbCheckDisableStepPipe',\n  standalone: true\n})\nexport class LibsUiComponentsBreadcrumbCheckDisableStepPipe implements PipeTransform {\n\n  transform(index: number, stepDisable: Array<number>): boolean {\n    return stepDisable.includes(index);\n  }\n\n}\n","import { NgTemplateOutlet } from \"@angular/common\";\nimport { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, input, OnInit, output, signal, viewChildren } from \"@angular/core\";\nimport { IDropdownFunctionControlEvent, IEmitSelectKey, IPopoverCustomConfig, LibsUiComponentsDropdownComponent } from \"@libs-ui/components-dropdown\";\nimport { LibsUiComponentsPopoverComponent } from \"@libs-ui/components-popover\";\nimport { LibsUiComponentsBreadcrumbComponent } from \"../breadcrumb.component\";\nimport { IConfigClassMultiStep, ITabBreadCrumbMultiStep, ITabBreadCrumbMultiStepSelected } from \"../interfaces/breadcrumb.interface\";\nimport { ConfigPopupDropdown } from \"../utils/breadcrumb\";\nimport { LibsUiComponentsBreadcrumbMultiStepArrowBeginComponent } from \"./arrow-begin/arrow-begin.component\";\nimport { LibsUiComponentsBreadcrumbMultiStepArrowEndComponent } from \"./arrow-end/arrow-end.component\";\nimport { LibsUiComponentsBreadcrumbCheckDisableStepPipe } from \"../pipes/check-disable-step.pipe\";\nimport { TranslateModule } from \"@ngx-translate/core\";\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'libs_ui-components-breadcrumb-multi_step',\n  templateUrl: './multi-step.component.html',\n  styleUrls: ['./multi-step.component.scss'],\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    TranslateModule, NgTemplateOutlet,\n    LibsUiComponentsBreadcrumbMultiStepArrowBeginComponent,\n    LibsUiComponentsBreadcrumbMultiStepArrowEndComponent,\n    LibsUiComponentsPopoverComponent,\n    LibsUiComponentsDropdownComponent,\n    LibsUiComponentsBreadcrumbCheckDisableStepPipe\n  ]\n})\nexport class LibsUiComponentsBreadcrumbMultiStepComponent extends LibsUiComponentsBreadcrumbComponent implements OnInit, AfterViewInit {\n\n  // #region PROPERTY\n  protected failedIndex = signal<Array<number>>([]);\n  protected listKeyHidden = signal<Array<string> | undefined>(undefined);\n  protected openList = signal<boolean>(false);\n  protected indexFocus = signal<number | undefined>(undefined);\n\n  private dropDownFunctionControl = signal<IDropdownFunctionControlEvent | undefined>(undefined);\n\n  // #region INPUT\n  readonly popoverCustomConfig = input<IPopoverCustomConfig>(ConfigPopupDropdown());\n  readonly stepsMulti = input.required<Array<ITabBreadCrumbMultiStep>>();\n  readonly configClassMultiStep = input<IConfigClassMultiStep>();\n  readonly elementRef = input<HTMLElement>();\n\n  // #region OUTPUT\n  // Note: Kiểu dữ liệu của step sẽ được định nghĩa từ bên ngoài với type general <T>\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  readonly outMultiStepSelect = output<ITabBreadCrumbMultiStepSelected<any>>();\n\n  /* VIEW CHILD */\n  private readonly stepEl = viewChildren<ElementRef>('stepEl');\n\n  ngAfterViewInit(): void {\n    this.handlerScrollIntoView();\n  }\n\n  protected override handlerLabelEvent(event: Event, index: number) {\n    event.stopPropagation();\n    if (this.stepsMulti()[index].status === 'disabled' || this.stepDisable().includes(index)) {\n      return;\n    }\n    this.handlerSelectMultiStep(undefined, { type: 'text', index });\n  }\n\n  protected handlerSelectKey(event: IEmitSelectKey | undefined, index: number): void {\n    if (this.stepDisable().includes(index) || !event) {\n      return;\n    }\n    this.dropDownFunctionControl()?.reset();\n    this.handlerSelectMultiStep(undefined, { type: 'dropdown', index, step: event.item });\n  }\n\n  protected handlerShowList(event: boolean, index: number): void {\n    this.openList.set(event);\n    this.indexFocus.set(event ? index : undefined);\n  }\n\n  // Note: Kiểu dữ liệu của step sẽ được định nghĩa từ bên ngoài với type general <T>\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  private handlerSelectMultiStep(event: Event | undefined, step: ITabBreadCrumbMultiStepSelected<any>): void {\n    event?.stopPropagation();\n    this.outMultiStepSelect.emit({ ...step, callBack: (event: Array<string> | undefined) => this.listKeyHidden.set(event) });\n  }\n\n  protected handlerDropDownFunctionControl(event: IDropdownFunctionControlEvent): void {\n    this.dropDownFunctionControl.set(event);\n  }\n\n  protected handlerScrollIntoView(): void {\n    setTimeout(() => {\n      const selectedStep = this.stepsMulti().findIndex(item => item.status === 'selected');\n      const indexScroll = selectedStep !== -1 ? selectedStep : this.stepsMulti().length - 1;\n      const { offsetWidth } = this.elementRef() || {};\n\n      this.stepEl().forEach((element, index) => {\n        if (index === indexScroll) {\n          if (offsetWidth && (offsetWidth - element.nativeElement.offsetLeft) < 200) {\n            this.elementRef()?.scrollTo({ left: element.nativeElement.offsetLeft, behavior: 'smooth' });\n          }\n        }\n      });\n    }, 1000);\n  }\n\n}\n","<div class=\"flex items-center {{ classInclude() || '' }}\"\n  [class.justify-center]=\"mode() === 'center'\"\n  [class.justify-start]=\"mode() === 'left'\"\n  [class.justify-end]=\"mode() === 'right'\"\n  [class.bg-[#ffffff]]=\"backgroundWhite()\"\n  #containerEl>\n  @for (step of stepsMulti(); track step) {\n    <div #stepEl\n      class=\"flex libs-ui-breadcrumb-multi-step\"\n      [class.cursor-default]=\"step.status === 'disabled'\"\n      [class.pointer-events-none]=\"step.status === 'disabled'\"\n      [class.cursor-pointer]=\"step.status !== 'disabled'\">\n      @if (step.type === 'text') {\n        <div (click)=\"handlerLabelEvent($event, $index)\">\n          <ng-container [ngTemplateOutlet]=\"contentEl\"\n            [ngTemplateOutletContext]=\"{$index, $first, $last, step}\" />\n        </div>\n      } @else {\n        <libs_ui-components-dropdown [isNgContent]=\"true\"\n          [listHiddenInputSearch]=\"true\"\n          [listHasButtonUnSelectOption]=\"step.listHasButtonUnSelectOption\"\n          [listConfig]=\"step.listConfigItem\"\n          [popoverCustomConfig]=\"popoverCustomConfig()\"\n          [listKeysHidden]=\"listKeyHidden() ?? step.listKeysHidden\"\n          [disable]=\"$index | LibsUiComponentsBreadcrumbCheckDisableStepPipe:stepDisable()\"\n          (outShowList)=\"handlerShowList($event, $index)\"\n          (outSelectKey)=\"handlerSelectKey($event, $index)\"\n          (outFunctionsControl)=\"handlerDropDownFunctionControl($event)\">\n          <ng-container [ngTemplateOutlet]=\"contentEl\"\n            [ngTemplateOutletContext]=\"{$index, $first, $last, step}\" />\n        </libs_ui-components-dropdown>\n      }\n    </div>\n  }\n</div>\n\n<ng-template #contentEl\n  let-index=\"$index\"\n  let-first=\"$first\"\n  let-step=\"step\"\n  let-last=\"$last\">\n  <div class=\"flex items-center\">\n    @if (!first) {\n      <libs_ui-components-breadcrumb-multi_step-arrow_end class=\"libs-ui-breadcrumb-multi-step-normal relative left-[1px] top-0\"\n        [attr.focus]=\"openList() && indexFocus() === index\"\n        [class.active]=\"step.status === 'selected'\"\n        [class.complete]=\"step.status === 'completed'\"\n        [class.disabled]=\"step.status === 'disabled'\"\n        [class.failed]=\"step.status === 'failed'\" />\n    }\n    <div class=\"libs-ui-breadcrumb-multi-step-center flex items-center justify-center libs-ui-font-h6m\">\n      <libs_ui-components-popover [classInclude]=\"'libs-ui-breadcrumb-multi-step-center-popover py-[12px] ' + (configClassMultiStep()?.classInclude || '')\"\n        [type]=\"'text'\"\n        [ignoreShowPopover]=\"true\"\n        [ignoreStopPropagationEvent]=\"true\">\n        <div class=\"libs-ui-font-h6m flex items-center justify-center gap-2 h-[40px]\"\n          [style.max-width.px]=\"configClassMultiStep()?.maxWidth || 200\"\n          [style.width.px]=\"configClassMultiStep()?.width\"\n          [attr.focus]=\"openList() && indexFocus() === index\"\n          [class.active]=\"step.status === 'selected'\"\n          [class.complete]=\"step.status === 'completed'\"\n          [class.disabled]=\"step.status === 'disabled'\"\n          [class.failed]=\"step.status === 'failed'\"\n          [class.rounded-tl-[4px]]=\"first\"\n          [class.rounded-bl-[4px]]=\"first\"\n          [class.pl-[6px]]=\"first\"\n          [class.rounded-tr-[4px]]=\"last\"\n          [class.rounded-br-[4px]]=\"last\"\n          [class.pr-[16px]]=\"last\">\n          <libs_ui-components-popover [classInclude]=\"'text-nowrap pl-[10px] ' + (configClassMultiStep()?.classTitleInclude || 'max-w-[160px]')\"\n            [type]=\"'text'\"\n            [config]=\"step.popover || { maxWidth: 250, direction: 'top', content: step.title | translate }\"\n            [ignoreStopPropagationEvent]=\"true\"\n            [innerHTML]=\"step.title | translate\" />\n          @if (step.type === 'dropdown') {\n            <i [attr.isFocus]=\"openList() && indexFocus() === index\"\n              class=\"libs-ui-icon-move-right rotate-90\"></i>\n          }\n        </div>\n      </libs_ui-components-popover>\n    </div>\n    @if (!last) {\n      <libs_ui-components-breadcrumb-multi_step-arrow_begin class=\"libs-ui-breadcrumb-multi-step-normal relative left-[-1px] top-0\"\n        [attr.focus]=\"openList() && indexFocus() === index\"\n        [class.active]=\"step.status === 'selected'\"\n        [class.complete]=\"step.status === 'completed'\"\n        [class.disabled]=\"step.status === 'disabled'\"\n        [class.failed]=\"step.status === 'failed'\" />\n    }\n  </div>\n</ng-template>\n","import { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { LibsUiComponentsBreadcrumbComponent } from '../breadcrumb.component';\nimport { ITabBreadCrumb, TYPE_MODE_BREADCRUMB, ITabBreadCrumbSelected, IBreadCrumbFunctionControlEvent, ITabBreadCrumbMultiStep, TYPE_MULTI_STEP, ITabBreadCrumbMultiStepSelected } from '../interfaces/breadcrumb.interface';\nimport { LibsUiComponentsBreadcrumbMultiStepComponent } from '../multi-step/multi-step.component';\n\n@Component({\n  selector: 'lib-breadcrumb-demo',\n  standalone: true,\n  imports: [\n    CommonModule,\n    LibsUiComponentsBreadcrumbComponent,\n    LibsUiComponentsBreadcrumbMultiStepComponent\n  ],\n  templateUrl: './breadcrumb-demo.component.html',\n  styleUrls: ['./breadcrumb-demo.component.scss']\n})\nexport class LibsUiComponentsBreadcrumbDemoComponent {\n  // Input documentation\n  inputsDoc = [\n    { name: 'width', type: 'number', default: '24', description: 'Chiều rộng mỗi bước trong breadcrumb' },\n    { name: 'mode', type: 'TYPE_MODE_BREADCRUMB', default: 'center', description: 'Căn chỉnh: center | left | right' },\n    { name: 'steps', type: 'Array<ITabBreadCrumb>', default: '[]', description: 'Danh sách các bước hiển thị' },\n    { name: 'classInclude', type: 'string', default: 'undefined', description: 'Lớp CSS bổ sung cho mỗi bước' },\n    { name: 'completedIndex', type: 'Array<number>', default: '[]', description: 'Các chỉ số của bước đã hoàn thành' },\n    { name: 'backgroundWhite', type: 'boolean', default: 'false', description: 'Nền trắng cho breadcrumb khi true' }\n  ];\n\n  // Interface documentation\n  interfacesDoc = [\n    {\n      name: 'ITabBreadCrumb',\n      code: 'interface ITabBreadCrumb { number: number; title: string; valid?: boolean; config?: IPopover; disable?: boolean; classInclude?: string; }',\n      description: 'Định nghĩa từng bước trong breadcrumb'\n    },\n    {\n      name: 'TYPE_MODE_BREADCRUMB',\n      code: \"type TYPE_MODE_BREADCRUMB = 'center' | 'left' | 'right';\",\n      description: 'Chế độ căn chỉnh của breadcrumb'\n    }\n  ];\n\n  // Output documentation\n  outputsDoc = [\n    { name: 'outStepSelected', type: '(ITabBreadCrumbSelected) => void', description: 'Phát ra sự kiện khi chọn bước, trả về { index }' },\n    { name: 'outFunctionControl', type: 'IBreadCrumbFunctionControlEvent', description: 'Cung cấp API để điều khiển component (setSelectedStep, setCompletedStep, ...)' }\n  ];\n\n  // Features overview\n  features = [\n    { id: 1, title: 'Đánh dấu bước hoàn thành', description: 'Cho phép hiển thị trạng thái đã hoàn thành cho các bước' },\n    { id: 2, title: 'Sự kiện chọn bước', description: 'Phát ra sự kiện khi người dùng chọn bước' },\n    { id: 3, title: 'Tùy chỉnh linh hoạt', description: 'Cho phép cấu hình nhiều tuỳ chọn khác nhau cho breadcrumb' }\n  ];\n\n  // Demo data sets\n  stepsBasic: ITabBreadCrumb[] = [\n    { number: 1, title: 'Bước 1' },\n    { number: 2, title: 'Bước 2' },\n    { number: 3, title: 'Bước 3' }\n  ];\n  alignOptions: TYPE_MODE_BREADCRUMB[] = ['left', 'center', 'right'];\n  stepsStatus: ITabBreadCrumb[] = [\n    { number: 1, title: 'Bước 1', valid: true },\n    { number: 2, title: 'Bước 2', valid: false },\n    { number: 3, title: 'Bước 3', disable: true },\n    { number: 4, title: 'Bước 4' }\n  ];\n  completedIndicesStatus: number[] = [0, 1];\n\n  // Arrow style breadcrumb (multi-step) demo data\n  arrowSteps: ITabBreadCrumbMultiStep[] = [\n    { number: 1, title: 'Bước 1', status: 'completed' as TYPE_MULTI_STEP, type: 'text' },\n    { number: 2, title: 'Bước 2', status: 'selected' as TYPE_MULTI_STEP, type: 'text' },\n    { number: 3, title: 'Bước 3', status: 'normal' as TYPE_MULTI_STEP, type: 'text' }\n  ];\n\n  // Method for installation copy button\n  copyToClipboard(text: string) {\n    navigator.clipboard.writeText(text)\n      .then(() => console.log('Text copied to clipboard'))\n      .catch(err => console.error('Could not copy text: ', err));\n  }\n\n  // Demo data\n  demoSteps: ITabBreadCrumb[] = [\n    { number: 1, title: 'Bước 1', valid: true },\n    { number: 2, title: 'Bước 2', valid: false },\n    { number: 3, title: 'Bước 3', valid: false }\n  ];\n  selectedStepIndex = 0;\n\n  // Handle arrow demo selection event\n  onArrowStepSelected(event: ITabBreadCrumbMultiStepSelected<any>) {\n    console.log('Arrow step selected:', event);\n  }\n\n  // Change selected step programmatically\n  changeStep(index: number) {\n    this.selectedStepIndex = index;\n  }\n\n  // Handle component's output event\n  onStepSelected(event: { index: number }) {\n    this.selectedStepIndex = event.index;\n  }\n} ","<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n  <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n    <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Demo Breadcrumb Component</h1>\n    <p class=\"text-xl text-gray-500\">Thư viện Breadcrumb cho Angular</p>\n  </header>\n\n  <main>\n    <!-- Giới thiệu -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Giới thiệu</h2>\n      <p>\n        <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">&#64;libs-ui/components-breadcrumb</code> là một component Angular giúp hiển thị đường dẫn phân cấp hoặc tiến trình theo các bước, với khả năng đánh dấu bước đã hoàn thành, bước đang chọn, và bước vô hiệu hóa.\n      </p>\n    </section>\n\n    <!-- Cài đặt -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Cài đặt</h2>\n      <div class=\"mb-6\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Yêu cầu</h3>\n        <ul class=\"list-disc pl-5 space-y-2 text-gray-600\">\n          <li><span class=\"font-semibold\">Angular</span>: 18.0.0 trở lên</li>\n        </ul>\n      </div>\n      <p class=\"mb-4\">Để cài đặt thư viện:</p>\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>npm install &#64;libs-ui/components-breadcrumb</code></pre>\n        <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\" (click)=\"copyToClipboard('npm install @libs-ui/components-breadcrumb')\">Sao chép</button>\n      </div>\n      <p class=\"mb-4\">Hoặc với yarn:</p>\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>yarn add &#64;libs-ui/components-breadcrumb</code></pre>\n        <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\" (click)=\"copyToClipboard('yarn add @libs-ui/components-breadcrumb')\">Sao chép</button>\n      </div>\n    </section>\n\n    <!-- Demo trực tiếp -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Demo Trực tiếp</h2>\n\n      <!-- Basic demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Breadcrumb cơ bản</h3>\n        <div class=\"p-4 bg-gray-50 rounded-lg\">\n          <libs_ui-components-breadcrumb [steps]=\"stepsBasic\"></libs_ui-components-breadcrumb>\n        </div>\n      </div>\n\n      <!-- Mode variants -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Chế độ căn chỉnh</h3>\n        <div class=\"flex items-center gap-6\">\n          <ng-container *ngFor=\"let mode of alignOptions\">\n            <div class=\"text-center\">\n              <div class=\"mb-2\"><code>{{ mode }}</code></div>\n              <libs_ui-components-breadcrumb [steps]=\"stepsBasic\" [mode]=\"mode\"></libs_ui-components-breadcrumb>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n\n      <!-- Status demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Breadcrumb với trạng thái</h3>\n        <div class=\"p-4 bg-gray-50 rounded-lg\">\n          <libs_ui-components-breadcrumb [steps]=\"stepsStatus\" [completedIndex]=\"completedIndicesStatus\"></libs_ui-components-breadcrumb>\n        </div>\n      </div>\n\n      <!-- Arrow style (Multi-Step) demo -->\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Breadcrumb Arrow Style</h3>\n        <div class=\"p-4 bg-gray-50 rounded-lg overflow-auto\">\n          <libs_ui-components-breadcrumb-multi_step\n            [stepsMulti]=\"arrowSteps\"\n            (outMultiStepSelect)=\"onArrowStepSelected($event)\"\n          ></libs_ui-components-breadcrumb-multi_step>\n        </div>\n        <p class=\"mt-2 text-sm text-gray-500\">Mô tả dạng arrow (Multi-step) sử dụng separator mũi tên.</p>\n      </div>\n    </section>\n\n    <!-- Cách sử dụng -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Cách sử dụng</h2>\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Ví dụ sử dụng</h3>\n        <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-breadcrumb [steps]=\"stepsBasic\" [mode]=\"'center'\"&gt;&lt;/libs_ui-components-breadcrumb&gt;</code></pre>\n      </div>\n    </section>\n\n    <!-- API Reference -->\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Tài liệu API</h2>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Inputs</h3>\n      <div class=\"overflow-x-auto mb-6\">\n        <table class=\"min-w-full bg-white border border-gray-200\">\n          <thead>\n            <tr>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Tên</th>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Kiểu</th>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Mặc định</th>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Mô tả</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let input of inputsDoc\">\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.name }}</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.type }}</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.default }}</td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.description }}</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Outputs</h3>\n      <div class=\"overflow-x-auto mb-6\">\n        <table class=\"min-w-full bg-white border border-gray-200\">\n          <thead>\n            <tr>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Tên</th>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Kiểu</th>\n              <th class=\"py-2 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Mô tả</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let output of outputsDoc\">\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ output.name }}</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\"><code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ output.type }}</code></td>\n              <td class=\"py-2 px-4 border-b border-gray-200\">{{ output.description }}</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Interfaces</h3>\n      <div class=\"space-y-6\">\n        <div *ngFor=\"let intf of interfacesDoc\" class=\"bg-gray-50 p-6 rounded-lg\">\n          <h4 class=\"text-lg font-semibold text-gray-700 mb-3\">{{ intf.name }}</h4>\n          <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-3\"><code>{{ intf.code }}</code></pre>\n          <p class=\"text-gray-600\">{{ intf.description }}</p>\n        </div>\n      </div>\n    </section>\n  </main>\n</div> ","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}

package/index.d.ts

@@ -1,3 +1,4 @@
 export * from './breadcrumb.component';
 export * from './multi-step/multi-step.component';
 export * from './interfaces/breadcrumb.interface';
+export * from './demo/breadcrumb-demo.component';

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@libs-ui/components-breadcrumb",
-  "version": "0.2.277",
+  "version": "0.2.279",
   "peerDependencies": {
     "@angular/common": "^18.2.0",
     "@angular/core": "^18.2.0",
     "@ngx-translate/core": "^15.0.0",
-    "@libs-ui/components-list": "^0.2.277",
-    "@libs-ui/components-popover": "^0.2.277",
-    "@libs-ui/components-dropdown": "^0.2.277"
+    "@libs-ui/components-list": "^0.2.279",
+    "@libs-ui/components-popover": "^0.2.279",
+    "@libs-ui/components-dropdown": "^0.2.279"
   },
   "sideEffects": false,
   "module": "fesm2022/libs-ui-components-breadcrumb.mjs",