npm package: @libs-ui/components-buttons-status
Description: > Version: `0.2.355-14` > > Component hiển thị status dạng pill, hỗ trợ icon trái/phải, translate label và tuỳ biến màu theo type hoặc `otherConfig`.
Latest version: 0.2.356-23

# Buttons Status Component

> Version: `0.2.355-14`
>
> Component hiển thị status dạng pill, hỗ trợ icon trái/phải, translate label và tuỳ biến màu theo type hoặc `otherConfig`.

## Giới thiệu

`LibsUiComponentsButtonsStatusComponent` là standalone Angular component để hiển thị trạng thái ngắn gọn (pill/badge) trong UI. Component nhận một object cấu hình `config` để quyết định label, type màu, icon và popover cho icon.

## Tính năng

- ✅ Hiển thị status dạng pill gọn nhẹ
- ✅ Hỗ trợ nhiều type màu: blue/green/red/orange/yellow/cyan/purple/brown
- ✅ Tuỳ biến màu với type `other` + `otherConfig`
- ✅ Hỗ trợ icon trái/phải qua `classIconLeft` / `classIconRight`
- ✅ Hỗ trợ popover cho icon (thông qua `IPopover`)
- ✅ Translate label qua `@ngx-translate/core`
- ✅ OnPush Change Detection
- ✅ Angular Signals

## Cài đặt

```bash
npm install @libs-ui/components-buttons-status
```

## Import

```typescript
import { Component } from '@angular/core';
import { LibsUiComponentsButtonsStatusComponent, IButtonStatus, TYPE_BUTTON_STATUS } from '@libs-ui/components-buttons-status';

@Component({
  standalone: true,
  imports: [LibsUiComponentsButtonsStatusComponent],
  template: '',
})
export class ExampleComponent {}
```

## Cách sử dụng

### 1. Ví dụ inline template

```html
<libs_ui-components-buttons-status
  [config]="statusConfig"
/>
```

```typescript
import { Component } from '@angular/core';
import { LibsUiComponentsButtonsStatusComponent, IButtonStatus } from '@libs-ui/components-buttons-status';

@Component({
  standalone: true,
  imports: [LibsUiComponentsButtonsStatusComponent],
  template: `<libs_ui-components-buttons-status [config]="statusConfig" />`,
})
export class InlineExampleComponent {
  readonly statusConfig: IButtonStatus = {
    label: 'Đang hoạt động',
    type: 'blue',
  };
}
```

### 2. Ví dụ với file HTML riêng

`example.component.html`

```html
<libs_ui-components-buttons-status [config]="config" />
```

`example.component.ts`

```typescript
import { Component } from '@angular/core';
import { LibsUiComponentsButtonsStatusComponent, IButtonStatus } from '@libs-ui/components-buttons-status';

@Component({
  standalone: true,
  imports: [LibsUiComponentsButtonsStatusComponent],
  templateUrl: './example.component.html',
})
export class HtmlFileExampleComponent {
  readonly config: IButtonStatus = {
    label: 'Custom',
    type: 'other',
    otherConfig: {
      color: '#0ea5e9',
      background: '#e0f2fe',
    },
    classIconLeft: 'libs-ui-icon-info-circle',
    classIconRight: 'libs-ui-icon-chevron-right',
  };
}
```

## Công nghệ

| Technology | Version | Purpose |
|------------|---------|---------|
| Angular | 18+ | Framework |
| Angular Signals | - | State management |
| TailwindCSS | 3.x | Styling (demo) |
| OnPush | - | Change Detection |
| ngx-translate | 15+ | Translate label |

## API

### libs_ui-components-buttons-status

#### Inputs

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `[config]` | `IButtonStatus` | `required` | Cấu hình hiển thị status: label/type/icon/popover/classes... |

#### Outputs

Component này hiện **không có outputs public**.

## Types & Interfaces

```typescript
export interface IButtonStatus {
  label?: string;
  type: TYPE_BUTTON_STATUS;
  otherConfig?: {
    color: string;
    background?: string;
  };
  classInclude?: string;
  classLabelInclude?: string;
  classIconLeft?: string;
  popoverIconLeft?: IPopover;
  classIconRight?: string;
  popoverIconRight?: IPopover;
}

export type TYPE_BUTTON_STATUS = 'blue' | 'green' | 'red' | 'orange' | 'yellow' | 'cyan' | 'purple' | 'brown' | 'other';
```

### Mô tả Types

- **IButtonStatus**: Interface cấu hình status: label, type, tuỳ biến màu (otherConfig) và icon/popover.
- **TYPE_BUTTON_STATUS**: Danh sách type status có sẵn. Dùng other + otherConfig khi cần màu tuỳ biến.

## Demo

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

Truy cập: `http://localhost:4500/buttons/status`