npm package: @libs-ui/components-inputs-color
Description: > Component input chọn màu sắc (Color Picker) hỗ trợ độ mờ (opacity) và palette tùy chỉnh.
Latest version: 0.2.356-23

# @libs-ui/components-inputs-color

> Component input chọn màu sắc (Color Picker) hỗ trợ độ mờ (opacity) và palette tùy chỉnh.

## Giới thiệu

`LibsUiComponentsInputsColorComponent` là một standalone Angular component để chọn màu sắc. Nó tích hợp một bảng màu mặc định, khả năng lưu bảng màu tùy chỉnh và thanh trượt độ mờ trực quan.

### Tính năng

- ✅ Chọn màu từ palette mặc định
- ✅ Lưu và quản lý palette tùy chỉnh (tối đa 8 màu)
- ✅ Điều chỉnh độ mờ (opacity) trực tiếp
- ✅ Tích hợp Popover thông minh
- ✅ Sử dụng Angular Signals cho hiệu năng cao
- ✅ Standalone Component, dễ dàng tích hợp

## Khi nào sử dụng

- Khi cần cho phép người dùng chọn màu sắc trong các form cấu hình.
- Khi cần tích hợp tính năng quản lý màu cá nhân.
- Khi cần điều chỉnh cả màu sắc và độ trong suốt của phần tử.

## Cài đặt

```bash
# npm
npm install @libs-ui/components-inputs-color

# yarn
yarn add @libs-ui/components-inputs-color
```

## Import

```typescript
import { LibsUiComponentsInputsColorComponent } from '@libs-ui/components-inputs-color';

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

## Ví dụ

### Cơ bản

```html
<libs_ui-components-inputs-color [(data)]="colorData" />
```

### Với Custom Provider

```html
<libs_ui-components-inputs-color
  [(data)]="colorData"
  [functionGetListColorDefault]="getColors"
  [functionSetListColorCustom]="saveColors" />
```

## API

### libs_ui-components-inputs-color

#### Inputs

| Property                        | Type                                              | Default                       | Description                         |
| ------------------------------- | ------------------------------------------------- | ----------------------------- | ----------------------------------- |
| `[(data)]`                      | `model<IColorPickerData>`                         | `{ color: '', opacity: 100 }` | Dữ liệu màu sắc và độ mờ hiện tại   |
| `[zIndex]`                      | `model<number>`                                   | `1200`                        | Z-index cho popover bảng màu        |
| `[customOptions]`               | `input<IPickerCustomOptions>`                     | `undefined`                   | Cấu hình cho color picker bên trong |
| `[functionGetListColorDefault]` | `input<() => Promise<Array<string>>>`             | `undefined`                   | Hàm lấy danh sách màu mặc định      |
| `[functionGetListColorCustom]`  | `input<() => Promise<Array<string>>>`             | `undefined`                   | Hàm lấy danh sách màu tùy chỉnh     |
| `[functionSetListColorCustom]`  | `input<(colors: Array<string>) => Promise<void>>` | `undefined`                   | Hàm lưu danh sách màu tùy chỉnh     |

#### Outputs

| Property           | Type               | Description                          |
| ------------------ | ------------------ | ------------------------------------ |
| `(outColorChange)` | `IColorPickerData` | Emit khi màu sắc hoặc độ mờ thay đổi |

## Types & Interfaces

```typescript
export interface IColorPickerData {
  color: string;
  opacity: number;
}

export interface IPickerCustomOptions {
  slBarSize?: Array<number>;
  hueBarSize?: Array<number>;
  alphaBarSize?: Array<number>;
  showHsl?: boolean;
  showRgb?: boolean;
  showHex?: boolean;
  showAlpha?: boolean;
  color?: string | Array<number>;
  format?: 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hex' | 'color';
}
```

## Công nghệ

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

## Demo

```bash
npx nx serve core-ui
```

Truy cập: `http://localhost:4500/inputs/color`

## Unit Tests

```bash
# Chạy tests
npx nx test components-inputs-color

# Coverage
npx nx test components-inputs-color --coverage
```

## License

MIT