@libs-ui/components-buttons-button 0.2.357-0 → 0.2.357-10

package/README.md

@@ -163,13 +163,13 @@ export class FormComponent {
 <!-- Cả hai icon -->
 <libs_ui-components-buttons-button
   label="Tải xuống"
-  [classIconLeft]="'libs-ui-icon-download'"
+  [classIconLeft]="'libs-ui-icon-download-outline'"
   [classIconRight]="'libs-ui-icon-arrow-down'"
   (outClick)="handlerDownload($event)" />
 
 <!-- Chỉ icon, không label -->
 <libs_ui-components-buttons-button
-  [classIconLeft]="'libs-ui-icon-settings'"
+  [classIconLeft]="'libs-ui-icon-arrange'"
   [iconOnlyType]="true"
   (outClick)="handlerOpenSettings($event)" />
 ```
@@ -192,11 +192,21 @@ export class FormComponent {
 
 ### Custom Color — Màu tùy chỉnh
 
+`buttonCustom` (kiểu `IColorButton`) **bắt buộc** khi `type="button-custom"` (nền đặc) hoặc `type="button-link-custom"` (dạng link — nền/viền trong suốt). `configStepColor` khai báo màu cho từng trạng thái: `text` / `text_hover` / `text_active` / `text_disable` (bắt buộc) và `background*` / `border*` (tùy chọn). Mỗi giá trị nhận `string` (mã màu, `'transparent'`) hoặc `number` (step màu suy ra từ `rootColor`).
+
 ```html
+<!-- Nền đặc: type="button-custom" -->
 <libs_ui-components-buttons-button
   type="button-custom"
-  label="Custom Brand Color"
-  [buttonCustom]="customButtonConfig"
+  label="Custom màu tím"
+  [buttonCustom]="customPurple"
+  (outClick)="handlerClick($event)" />
+
+<!-- Dạng link: type="button-link-custom" -->
+<libs_ui-components-buttons-button
+  type="button-link-custom"
+  label="Custom link teal"
+  [buttonCustom]="customTeal"
   (outClick)="handlerClick($event)" />
 ```
 
@@ -212,12 +222,23 @@ import { IColorButton } from '@libs-ui/services-config-project';
   templateUrl: './example.component.html',
 })
 export class ExampleComponent {
-  protected readonly customButtonConfig: IColorButton = {
-    rootColor: '#6366f1',
+  // Nền đặc
+  protected readonly customPurple: IColorButton = {
+    rootColor: '#7C3AED',
     configStepColor: {
-      background: 500,
-      color: -500,
-      background_hover: 600,
+      text: '#ffffff', text_hover: '#ffffff', text_active: '#ffffff', text_disable: '#C4B5FD',
+      background: '#7C3AED', background_hover: '#6D28D9', background_active: '#5B21B6', background_disable: '#DDD6FE',
+      border: '#7C3AED', border_hover: '#6D28D9', border_active: '#5B21B6', border_disable: '#DDD6FE',
+    },
+  };
+
+  // Dạng link — nền/viền trong suốt, chỉ đổi màu chữ
+  protected readonly customTeal: IColorButton = {
+    rootColor: '#0D9488',
+    configStepColor: {
+      text: '#0D9488', text_hover: '#0F766E', text_active: '#115E59', text_disable: '#99F6E4',
+      background: 'transparent', background_hover: '#F0FDFA', background_active: '#CCFBF1', background_disable: 'transparent',
+      border: 'transparent', border_hover: 'transparent', border_active: 'transparent', border_disable: 'transparent',
     },
   };
 
@@ -346,7 +367,7 @@ export class ExampleComponent {
 
 | Input | Type | Default | Mô tả | Ví dụ |
 |---|---|---|---|---|
-| `[buttonCustom]` | `IColorButton` | `undefined` | Cấu hình màu custom — bắt buộc khi `type` là `'button-custom'` hoặc `'button-link-custom'` | `[buttonCustom]="{ rootColor: '#6366f1', configStepColor: { background: 500 } }"` |
+| `[buttonCustom]` | `IColorButton` | `undefined` | Cấu hình màu custom — bắt buộc khi `type` là `'button-custom'` hoặc `'button-link-custom'`. Xem ví dụ "Custom Color" phía trên. | `[buttonCustom]="customPurple"` |
 | `[classIconLeft]` | `string` | `''` | Class CSS của icon hiển thị bên trái label | `[classIconLeft]="'libs-ui-icon-add'"` |
 | `[classIconRight]` | `string` | `''` | Class CSS của icon hiển thị bên phải label | `[classIconRight]="'libs-ui-icon-arrow-right'"` |
 | `[classInclude]` | `string` | `''` | Class CSS bổ sung gắn vào phần tử button | `classInclude="w-full"` |
@@ -500,9 +521,9 @@ import {
 })
 export class ToolbarComponent {
   protected readonly toolbarButtons: IButton[] = [
-    { key: 'save',   type: 'button-primary',  label: 'Lưu',  classIconLeft: 'libs-ui-icon-save' },
+    { key: 'save',   type: 'button-primary',  label: 'Lưu',  classIconLeft: 'libs-ui-icon-download-outline' },
     { key: 'cancel', type: 'button-secondary', label: 'Hủy' },
-    { key: 'delete', type: 'button-danger-high', label: 'Xóa', classIconLeft: 'libs-ui-icon-delete' },
+    { key: 'delete', type: 'button-danger-high', label: 'Xóa', classIconLeft: 'libs-ui-icon-remove' },
   ];
 
   handlerToolbarAction(event: Event, btn: IButton): void {
@@ -526,14 +547,6 @@ export class ToolbarComponent {
 
 ⚠️ **Selector dùng dấu gạch dưới**: Selector chính xác là `libs_ui-components-buttons-button` (dấu `_` sau `libs`), không phải `libs-ui-components-buttons-button`.
 
-## Demo
-
-```bash
-npx nx serve core-ui
-```
-
-Truy cập: `http://localhost:4500/buttons/button`
-
 ## Unit Tests
 
 ```bash

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@libs-ui/components-buttons-button",
-  "version": "0.2.357-0",
+  "version": "0.2.357-10",
   "peerDependencies": {
     "@angular/common": ">=18.0.0",
     "@angular/core": ">=18.0.0",
-    "@libs-ui/components-popover": "0.2.357-0",
-    "@libs-ui/components-spinner": "0.2.357-0",
-    "@libs-ui/services-config-project": "0.2.357-0",
-    "@libs-ui/utils": "0.2.357-0",
+    "@libs-ui/components-popover": "0.2.357-10",
+    "@libs-ui/components-spinner": "0.2.357-10",
+    "@libs-ui/services-config-project": "0.2.357-10",
+    "@libs-ui/utils": "0.2.357-10",
     "@ngx-translate/core": "^15.0.0",
     "rxjs": "~7.8.0",
-    "@libs-ui/interfaces-types": "0.2.357-0"
+    "@libs-ui/interfaces-types": "0.2.357-10"
   },
   "sideEffects": false,
   "module": "fesm2022/libs-ui-components-buttons-button.mjs",