@libs-ui/components-process-bar-steps 0.2.357-8 → 0.2.357-9

package/README.md

@@ -46,161 +46,129 @@ export class YourComponent {}
 
 ## Ví dụ sử dụng
 
-### Ví dụ 1 — Simple Mode (cấu hình nhanh)
+### 1. Simple Config
+
+Cấu hình đơn giản theo số lượng bước.
 
 ```html
-<!-- your-component.component.html -->
 <libs_ui-components-process_bar-steps [config]="configSimple()" />
 ```
 
 ```typescript
-// your-component.component.ts
-import { Component, signal } from '@angular/core';
-import { LibsUiComponentsProcessBarStepsComponent, IProcessBarStepConfigInterface, IProcessBarStepSimpleConfigInterface } from '@libs-ui/components-process-bar-steps';
+import { signal } from '@angular/core';
+import { IProcessBarStepConfigInterface, IProcessBarStepSimpleConfigInterface } from '@libs-ui/components-process-bar-steps';
+
+// Define Simple Config Signal
+readonly simpleConfigSignal = signal<IProcessBarStepSimpleConfigInterface>({
+  totalStep: 4,
+  currentStep: 2,
+  completedStep: 1, // Steps <= 1 are completed
+  currentStepColor: '#3B82F6',
+  stepCompletedColor: '#10B981'
+});
+
+// Main Config
+readonly configSimple = signal<IProcessBarStepConfigInterface>({
+  simpleConfig: this.simpleConfigSignal,
+  widthStep: '60px',
+  heightStep: '8px',
+  radiusStep: 4,
+  backgroundColorStep: '#E5E7EB'
+});
+```
 
-@Component({
-  standalone: true,
-  imports: [LibsUiComponentsProcessBarStepsComponent],
-  templateUrl: './your-component.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class YourComponent {
-  private readonly simpleConfigSignal = signal<IProcessBarStepSimpleConfigInterface>({
-    totalStep: 4,
-    currentStep: 2,
-    completedStep: 1,
-    currentStepColor: '#3B82F6',
-    stepCompletedColor: '#10B981',
-  });
+---
 
-  protected readonly configSimple = signal<IProcessBarStepConfigInterface>({
-    simpleConfig: this.simpleConfigSignal,
-    widthStep: '60px',
-    heightStep: '8px',
-    radiusStep: 4,
-    backgroundColorStep: '#E5E7EB',
-  });
-}
-```
+### 2. Advanced Config
 
-### Ví dụ 2 — Advanced Mode (tùy chỉnh từng bước, có label)
+Cấu hình chi tiết từng bước với Label & Custom Color.
 
 ```html
-<!-- your-component.component.html -->
 <libs_ui-components-process_bar-steps [config]="configAdvanced()" />
 ```
 
 ```typescript
-// your-component.component.ts
-import { Component, signal } from '@angular/core';
-import { LibsUiComponentsProcessBarStepsComponent, IProcessBarStepConfigInterface, IProcessBarStepAdvancedConfigInterface } from '@libs-ui/components-process-bar-steps';
-
-@Component({
-  standalone: true,
-  imports: [LibsUiComponentsProcessBarStepsComponent],
-  templateUrl: './your-component.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class YourComponent {
-  private readonly step1 = signal<IProcessBarStepAdvancedConfigInterface>({
-    label: 'Đặt hàng',
-    processCompleted: true,
-    processCompletedColor: '#10B981',
-  });
-
-  private readonly step2 = signal<IProcessBarStepAdvancedConfigInterface>({
-    label: 'Đang xử lý',
-    isCurrentProcess: true,
-    currentProcessColor: '#3B82F6',
-  });
-
-  private readonly step3 = signal<IProcessBarStepAdvancedConfigInterface>({
-    label: 'Đã giao',
-    processCompleted: false,
-  });
+import { signal } from '@angular/core';
+import { IProcessBarStepConfigInterface } from '@libs-ui/components-process-bar-steps';
 
-  private readonly step4 = signal<IProcessBarStepAdvancedConfigInterface>({
-    label: 'Hoàn thành',
-    processCompleted: false,
-  });
+// Define Advanced Steps as Signals
+const step1 = signal({ label: 'Order Placed', processCompleted: true, processCompletedColor: '#10B981' });
+const step2 = signal({ label: 'Processing', isCurrentProcess: true, currentProcessColor: '#3B82F6' });
+const step3 = signal({ label: 'Shipped', processCompleted: false });
+const step4 = signal({ label: 'Delivered', processCompleted: false });
+
+readonly configAdvanced = signal<IProcessBarStepConfigInterface>({
+  advancedConfig: signal([step1, step2, step3, step4]),
+  positionLabel: 'bottom',
+  justifyLabel: 'center',
+  widthStep: '120px',
+  heightStep: '12px'
+});
+```
 
-  protected readonly configAdvanced = signal<IProcessBarStepConfigInterface>({
-    advancedConfig: signal([this.step1, this.step2, this.step3, this.step4]),
-    positionLabel: 'bottom',
-    justifyLabel: 'center',
-    widthStep: '120px',
-    heightStep: '12px',
-    radiusStep: 6,
-  });
+---
 
-  // Cập nhật trạng thái khi sự kiện xảy ra
-  protected handlerMarkShipped(): void {
-    this.step3.update((s) => ({ ...s, processCompleted: true, processCompletedColor: '#10B981' }));
-    this.step4.update((s) => ({ ...s, isCurrentProcess: true, currentProcessColor: '#3B82F6' }));
-  }
-}
-```
+### 3. Interactive
 
-### Ví dụ 3 — Reactive với computed (tự động cập nhật)
+Thay đổi cấu hình realtime.
 
 ```html
-<!-- your-component.component.html -->
+<div class="controls">
+  <input type="range" [(ngModel)]="interactiveTotalSteps" min="2" max="10">
+  <input type="range" [(ngModel)]="interactiveCurrentStep" min="1" [max]="interactiveTotalSteps()">
+  <select [(ngModel)]="interactivePositionLabel">
+    <option value="top">Top</option>
+    <option value="bottom">Bottom</option>
+    <option value="inner">Inner</option>
+  </select>
+</div>
 <libs_ui-components-process_bar-steps [config]="configInteractive()" />
 ```
 
 ```typescript
-// your-component.component.ts
-import { Component, computed, signal, WritableSignal, effect } from '@angular/core';
-import { LibsUiComponentsProcessBarStepsComponent, IProcessBarStepConfigInterface, IProcessBarStepSimpleConfigInterface } from '@libs-ui/components-process-bar-steps';
-
-@Component({
-  standalone: true,
-  imports: [LibsUiComponentsProcessBarStepsComponent],
-  templateUrl: './your-component.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class YourComponent {
-  protected currentStep = signal(1);
-  protected totalSteps = signal(5);
-
-  private readonly simpleConfigValues = computed<IProcessBarStepSimpleConfigInterface>(() => ({
-    totalStep: this.totalSteps(),
-    currentStep: this.currentStep(),
-    completedStep: this.currentStep() - 1,
-    currentStepColor: '#8B5CF6',
-    stepCompletedColor: '#F59E0B',
-  }));
-
-  // WritableSignal wrapper bắt buộc vì IProcessBarStepConfigInterface yêu cầu WritableSignal
-  private readonly simpleConfigSignal: WritableSignal<IProcessBarStepSimpleConfigInterface> = signal(this.simpleConfigValues());
-
-  protected readonly configInteractive = computed<IProcessBarStepConfigInterface>(() => ({
-    simpleConfig: this.simpleConfigSignal,
-    positionLabel: 'top',
-    justifyLabel: 'center',
-    widthStep: '80px',
-    heightStep: '10px',
-    radiusStep: 5,
-  }));
-
-  constructor() {
-    // Đồng bộ computed → writableSignal để truyền vào config
-    effect(() => {
-      untracked(() => this.simpleConfigSignal.set(this.simpleConfigValues()));
-    });
-  }
-
-  protected handlerNextStep(): void {
-    this.currentStep.update((v) => Math.min(v + 1, this.totalSteps()));
-  }
-
-  protected handlerPrevStep(): void {
-    this.currentStep.update((v) => Math.max(v - 1, 1));
-  }
+import { signal, computed, effect, untracked } from '@angular/core';
+import { IProcessBarStepConfigInterface, IProcessBarStepSimpleConfigInterface } from '@libs-ui/components-process-bar-steps';
+
+// [(ngModel)] điều khiển bằng slider/select
+readonly interactiveTotalSteps = signal(5);
+readonly interactiveCurrentStep = signal(3);
+readonly interactivePositionLabel = signal<'top' | 'bottom' | 'inner'>('top');
+readonly interactiveJustifyLabel = signal<'start' | 'center' | 'end'>('center');
+
+// simpleConfig tính toán từ các signal tương tác
+readonly interactiveSimpleConfig = computed<IProcessBarStepSimpleConfigInterface>(() => ({
+  totalStep: this.interactiveTotalSteps(),
+  currentStep: this.interactiveCurrentStep(),
+  completedStep: this.interactiveCurrentStep() - 1,
+  currentStepColor: '#8B5CF6',
+  stepCompletedColor: '#F59E0B',
+}));
+
+// Signal ghi (WritableSignal) đồng bộ từ computed qua effect() — API yêu cầu simpleConfig là WritableSignal
+readonly interactiveSimpleConfigSignal = signal<IProcessBarStepSimpleConfigInterface>(this.interactiveSimpleConfig());
+
+constructor() {
+  effect(() => {
+    const config = this.interactiveSimpleConfig();
+    untracked(() => this.interactiveSimpleConfigSignal.set(config));
+  });
 }
+
+// [config]="configInteractive()"
+readonly configInteractive = computed<IProcessBarStepConfigInterface>(() => ({
+  simpleConfig: this.interactiveSimpleConfigSignal, // Updated via effect
+  positionLabel: this.interactivePositionLabel(),
+  justifyLabel: this.interactiveJustifyLabel(),
+  widthStep: '80px',
+  heightStep: '10px'
+}));
 ```
 
-### Ví dụ 4 — Cấu hình Global Default Token (toàn app)
+> ⚠️ **FormsModule bắt buộc**: Ví dụ Interactive dùng `[(ngModel)]`, cần import `FormsModule` vào `imports[]` của component sử dụng.
+
+---
+
+### 4. Cấu hình Global Default Token (toàn app)
 
 ```typescript
 // app.config.ts hoặc providers của module root
@@ -297,11 +265,3 @@ Với mỗi bước, màu nền được xác định theo thứ tự ưu tiên
 ⚠️ **Advanced Mode — Color Priority**: Màu `processCompletedColor` ghi đè `currentProcessColor`. Nếu một bước vừa có `processCompleted: true` vừa có `isCurrentProcess: true`, màu hoàn thành sẽ được hiển thị.
 
 ⚠️ **Global Default Token**: Dùng `PROCESS_BAR_STEPS_CONFIG_DEFAULT_TOKEN_INJECT` (từ `@libs-ui/utils`) để thiết lập giá trị mặc định cho `widthStep`, `heightStep`, `backgroundColorStep`, `radiusStep` ở cấp app — tránh lặp lại config trong từng component.
-
-## Demo
-
-```bash
-npx nx serve core-ui
-```
-
-Truy cập: http://localhost:4500/components/process-bar/steps

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@libs-ui/components-process-bar-steps",
-  "version": "0.2.357-8",
+  "version": "0.2.357-9",
   "peerDependencies": {
     "@angular/core": ">=18.0.0",
-    "@libs-ui/utils": "0.2.357-8"
+    "@libs-ui/utils": "0.2.357-9"
   },
   "sideEffects": false,
   "module": "fesm2022/libs-ui-components-process-bar-steps.mjs",