# @libs-ui/components-switch

> Component chuyển đổi trạng thái (On/Off) dạng Switch (Toggle).

## Giới thiệu

`LibsUiComponentsSwitchComponent` là một standalone Angular component cung cấp giao diện Switch Button. Component hỗ trợ 2 kích thước, trạng thái disable và hỗ trợ binding hai chiều (model) cho trạng thái active.

### Tính năng

- ✅ 2 kích thước: Default và Large
- ✅ Hỗ trợ trạng thái Disabled
- ✅ Two-way binding với Signals (`active`)
- ✅ Event output chi tiết (kèm hàm revert để hoàn tác)
- ✅ Custom Styling với CSS Variable

## Khi nào sử dụng

- Khi người dùng cần chuyển đổi nhanh giữa hai trạng thái (Bật/Tắt).
- Thay thế cho Checkbox khi muốn thể hiện hành động có hiệu lực tức thì.
- Trong các trang cài đặt hệ thống, kích hoạt tính năng.

## Cài đặt

```bash
# npm
npm install @libs-ui/components-switch

# yarn
yarn add @libs-ui/components-switch
```

## Import

```typescript
import { LibsUiComponentsSwitchComponent } from '@libs-ui/components-switch';

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

## Ví dụ

### Basic (Default Size)

```html
<libs_ui-components-switch [(active)]="isActive" />
```

### Large Size

```html
<libs_ui-components-switch
  size="large"
  [(active)]="isActive" />
```

### Disabled State

```html
<libs_ui-components-switch
  [disable]="true"
  [active]="true" />
```

### Handling Change Event

Sử dụng `(outSwitch)` để xử lý sự kiện active thay đổi. Event cung cấp hàm `revert()` để quay lại trạng thái cũ nếu cần (ví dụ: API call thất bại).

```html
<libs_ui-components-switch (outSwitch)="onSwitchChange($event)" />
```

```typescript
onSwitchChange(event: ISwitchEvent) {
  console.log('New state:', event.active);
  // Nếu muốn hoàn tác:
  // event.revert();
}
```

## API

### LibsUiComponentsSwitchComponent

Selector: `libs_ui-components-switch`

#### Inputs

| Property     | Type                   | Default     | Description                                   |
| ------------ | ---------------------- | ----------- | --------------------------------------------- |
| `[size]`     | `'default' \| 'large'` | `'default'` | Kích thước của switch.                        |
| `[disable]`  | `boolean`              | `false`     | Vô hiệu hóa switch (không thể click).         |
| `[(active)]` | `boolean`              | `false`     | Trạng thái bật/tắt của switch (Model Signal). |

#### Outputs

| Property      | Type           | Description                                       |
| ------------- | -------------- | ------------------------------------------------- |
| `(outSwitch)` | `ISwitchEvent` | Emit khi người dùng click để thay đổi trạng thái. |

### Interfaces

#### ISwitchEvent

```typescript
export interface ISwitchEvent {
  active: boolean; // Trạng thái mới sau khi click
  revert: () => Promise<void>; // Hàm utility để quay về trạng thái cũ
}
```

## Styling

Component sử dụng CSS Variables để tùy biến màu sắc:

| Variable                  | Default          | Description         |
| ------------------------- | ---------------- | ------------------- |
| `--libs-ui-color-default` | `#226ff5` (Blue) | Màu nền khi active. |

## Demo

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

Truy cập: `http://localhost:4500/switch`