@libs-ui/components-buttons-tab 0.2.357-8 → 0.2.357-9

package/README.md

@@ -59,7 +59,7 @@ import {
 `example.component.ts`
 
 ```typescript
-import { Component, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, model } from '@angular/core';
 import { LibsUiComponentsButtonsTabComponent, IButtonTab } from '@libs-ui/components-buttons-tab';
 
 @Component({
@@ -78,9 +78,9 @@ export class ExampleComponent {
     { key: 'settings', label: 'Settings', type: 'orange' },
   ];
 
-  protected handlerKeySelected(event: Event): void {
-    event.stopPropagation();
-    // key đã được cập nhật tự động qua two-way binding [(keySelected)]
+  protected handlerKeySelected(key: string): void {
+    // key: string — key của tab vừa chọn (đã được cập nhật vào selectedKey qua two-way binding)
+    this.selectedKey.set(key);
   }
 }
 ```
@@ -119,8 +119,8 @@ export class ExampleBadgeComponent {
     { key: 'requests', label: 'Requests', type: 'cyan',   count: 105, modeCount: 'x+', maxCount: 99 },
   ];
 
-  protected handlerKeySelected(event: Event): void {
-    event.stopPropagation();
+  protected handlerKeySelected(key: string): void {
+    this.selectedKey.set(key);
   }
 }
 ```
@@ -173,8 +173,8 @@ export class ExampleDisabledComponent {
     { key: 'c', label: 'Tab C',           type: 'green' },
   ];
 
-  protected handlerKeySelected(event: Event): void {
-    event.stopPropagation();
+  protected handlerKeySelected(key: string): void {
+    this.selectedKey.set(key);
   }
 }
 ```
@@ -224,8 +224,8 @@ export class ExampleOtherComponent {
     { key: 'custom-3', label: 'Custom 3', type: 'other', count: 120, modeCount: 'x+' },
   ];
 
-  protected handlerKeySelected(event: Event): void {
-    event.stopPropagation();
+  protected handlerKeySelected(key: string): void {
+    this.selectedKey.set(key);
   }
 }
 ```
@@ -243,19 +243,9 @@ export class ExampleOtherComponent {
 
 | Output | Type | Mô tả | Handler TS | Binding HTML |
 |---|---|---|---|---|
-| `(outKeySelected)` | `string` | Emit key của tab vừa được chọn. Không emit khi tab bị disable. | `handlerKeySelected(event: Event): void { event.stopPropagation(); }` | `(outKeySelected)="handlerKeySelected($event)"` |
-
-> **Lưu ý:** `outKeySelected` emit giá trị `string` (key của tab), không phải `Event`. Tham số trong handler là `key: string`, không phải `event: Event`. Xem ví dụ thực tế trong mục Ví dụ sử dụng ở trên — handler nhận `(event: Event)` từ DOM click nhưng `outKeySelected` truyền `key: string`.
+| `(outKeySelected)` | `string` | Emit key của tab vừa được chọn. Không emit khi tab bị disable. | `handlerKeySelected(key: string): void { this.selectedKey.set(key); }` | `(outKeySelected)="handlerKeySelected($event)"` |
 
-Ví dụ handler nhận đúng kiểu:
-
-```typescript
-// HTML: (outKeySelected)="handlerTabChange($event)"
-protected handlerTabChange(key: string): void {
-  // key là string (key của tab vừa chọn)
-  this.activeKey.set(key);
-}
-```
+> **Lưu ý:** `outKeySelected` emit giá trị `string` (key của tab đã chọn), không phải DOM `Event`. Tham số trong handler PHẢI khai báo là `key: string` — không gọi được `stopPropagation()` trên giá trị này.
 
 ## Types & Interfaces
 
@@ -342,6 +332,14 @@ export type TYPE_BUTTON_TAB =
 
 Có 8 màu định sẵn. Dùng `'other'` kết hợp với `[otherConfig]` để tuỳ biến màu hoàn toàn. Truyền string tuỳ ý được phép nhưng sẽ không có style mặc định nếu CSS tương ứng chưa tồn tại.
 
+### TYPE_BADGE_MODE
+
+`IButtonTab.modeCount` dùng type này, import từ `@libs-ui/components-badge`:
+
+```typescript
+import { TYPE_BADGE_MODE } from '@libs-ui/components-badge';
+```
+
 ## Lưu ý quan trọng
 
 ⚠️ **`otherConfig` chỉ áp dụng cho tab có `type = 'other'`**: Nếu bạn dùng `[otherConfig]` nhưng không có tab nào có `type = 'other'`, cấu hình này sẽ không có tác dụng. Các tab với type khác (`blue`, `green`...) không bị ảnh hưởng bởi `otherConfig`.
@@ -353,11 +351,3 @@ Có 8 màu định sẵn. Dùng `'other'` kết hợp với `[otherConfig]` đ
 ⚠️ **Tab bị disable không emit event**: Khi `disable = true` (toàn bộ) hoặc `item.disable = true` (từng tab), click sẽ không có tác dụng và `outKeySelected` sẽ không được emit.
 
 ⚠️ **Label được escape HTML tự động**: Giá trị `label` trong `IButtonTab` sẽ bị escape HTML trước khi hiển thị để tránh XSS. Không truyền HTML raw vào `label`.
-
-## Demo
-
-```bash
-npx nx serve core-ui
-```
-
-Truy cập: `http://localhost:4500/buttons/tab`

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@libs-ui/components-buttons-tab",
-  "version": "0.2.357-8",
+  "version": "0.2.357-9",
   "peerDependencies": {
     "@angular/core": ">=18.0.0",
-    "@libs-ui/components-badge": "0.2.357-8",
-    "@libs-ui/components-popover": "0.2.357-8",
-    "@libs-ui/utils": "0.2.357-8",
+    "@libs-ui/components-badge": "0.2.357-9",
+    "@libs-ui/components-popover": "0.2.357-9",
+    "@libs-ui/utils": "0.2.357-9",
     "@ngx-translate/core": "^15.0.0"
   },
   "sideEffects": false,