@libs-ui/components-buttons-status

Component hiển thị trạng thái dạng pill gọn nhẹ, hỗ trợ nhiều type màu chuẩn, màu tuỳ biến, icon trái/phải kèm popover, và tự động translate label.

Giới thiệu

LibsUiComponentsButtonsStatusComponent là Angular Standalone component dùng để hiển thị nhãn trạng thái (status pill/badge) trong các danh sách, bảng, hoặc form. Component nhận một object config duy nhất chứa toàn bộ cấu hình: label, type màu, tuỳ biến màu ngoài hệ thống, icon trái/phải và popover tương ứng. Màu sắc được tự động tính toán từ LibsUiConfigProjectService hoặc từ otherConfig khi cần màu nằm ngoài bảng màu chuẩn.

Tính năng

• ✅ Hiển thị status dạng pill gọn nhẹ với label dịch tự động qua @ngx-translate/core
• ✅ 8 type màu chuẩn: blue, green, red, orange, yellow, cyan, purple, brown
• ✅ Tuỳ biến màu hoàn toàn với type other + otherConfig (color + background)
• ✅ Tự động tính toán màu nền tương phản khi chỉ cung cấp color
• ✅ Hỗ trợ icon trái/phải qua class name (classIconLeft / classIconRight)
• ✅ Hỗ trợ popover cho từng icon (thông qua IPopover)
• ✅ Tuỳ biến class bên ngoài qua classInclude và classLabelInclude
• ✅ OnPush Change Detection + Angular Signals

Khi nào sử dụng

• Khi cần hiển thị trạng thái ngắn gọn trong cột bảng (Active, Pending, Error, Draft...)
• Khi cần pill/badge màu sắc đồng nhất theo hệ thống màu của project
• Khi cần trạng thái với màu tuỳ biến nằm ngoài bảng màu chuẩn (dùng type: 'other')
• Khi cần thêm icon kèm tooltip/popover mô tả thêm thông tin cho trạng thái

Cài đặt

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

Import

import {
  LibsUiComponentsButtonsStatusComponent,
  IButtonStatus,
  TYPE_BUTTON_STATUS,
} from '@libs-ui/components-buttons-status';

Ví dụ sử dụng

1. Basic — Status đơn giản với type màu chuẩn

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

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

2. Variants — Nhiều type màu trong một danh sách

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

@Component({
  selector: 'app-variants',
  standalone: true,
  imports: [LibsUiComponentsButtonsStatusComponent],
  template: `
    <div class="flex flex-wrap gap-2">
      @for (item of variants; track item.type) {
        <libs_ui-components-buttons-status [config]="item" />
      }
    </div>
  `,
})
export class VariantsExampleComponent {
  readonly variants: IButtonStatus[] = [
    { label: 'Active', type: 'blue' },
    { label: 'Success', type: 'green' },
    { label: 'Error', type: 'red' },
    { label: 'Warning', type: 'orange' },
    { label: 'Pending', type: 'yellow' },
    { label: 'Info', type: 'cyan' },
    { label: 'Review', type: 'purple' },
    { label: 'Draft', type: 'brown' },
  ];
}

3. With Icons — Thêm icon trái/phải kèm popover

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

@Component({
  selector: 'app-with-icons',
  standalone: true,
  imports: [LibsUiComponentsButtonsStatusComponent],
  template: `
    <libs_ui-components-buttons-status [config]="withIconsConfig" />
  `,
})
export class WithIconsExampleComponent {
  readonly withIconsConfig: IButtonStatus = {
    label: 'Đang xử lý',
    type: 'cyan',
    classIconLeft: 'libs-ui-icon-tooltip-outline',
    popoverIconLeft: {
      type: 'text',
      dataView: 'Trạng thái đang chờ phê duyệt',
    },
    classIconRight: 'libs-ui-icon-chevron-right',
  };
}

4. Other — Màu tuỳ biến hoàn toàn

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

@Component({
  selector: 'app-custom-color',
  standalone: true,
  imports: [LibsUiComponentsButtonsStatusComponent],
  template: `
    <div class="flex gap-2">
      <libs_ui-components-buttons-status [config]="customFull" />
      <libs_ui-components-buttons-status [config]="customColorOnly" />
    </div>
  `,
})
export class CustomColorExampleComponent {
  // Tuỳ biến cả color lẫn background
  readonly customFull: IButtonStatus = {
    label: 'VIP',
    type: 'other',
    otherConfig: {
      color: '#7c3aed',
      background: '#ede9fe',
    },
  };

  // Chỉ cần color — background tự động tính tương phản
  readonly customColorOnly: IButtonStatus = {
    label: 'Custom',
    type: 'other',
    otherConfig: {
      color: '#0ea5e9',
    },
  };
}

5. Trong bảng dữ liệu (table column)

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

@Component({
  selector: 'app-table-status',
  standalone: true,
  imports: [LibsUiComponentsButtonsStatusComponent],
  template: `
    <table>
      <tbody>
        @for (row of tableData; track row.id) {
          <tr>
            <td>{{ row.name }}</td>
            <td>
              <libs_ui-components-buttons-status [config]="row.statusConfig" />
            </td>
          </tr>
        }
      </tbody>
    </table>
  `,
})
export class TableStatusExampleComponent {
  readonly tableData = [
    { id: 1, name: 'Hợp đồng A', statusConfig: { label: 'Đã ký', type: 'green' } as IButtonStatus },
    { id: 2, name: 'Hợp đồng B', statusConfig: { label: 'Chờ duyệt', type: 'yellow' } as IButtonStatus },
    { id: 3, name: 'Hợp đồng C', statusConfig: { label: 'Từ chối', type: 'red' } as IButtonStatus },
  ];
}

@Input()

| Input | Type | Default | Mô tả | Ví dụ | |---|---|---|---|---| | [config] | IButtonStatus | required | Object cấu hình toàn bộ status pill: label, type màu, tuỳ biến màu, icon trái/phải, popover và class bổ sung | [config]="{ label: 'Active', type: 'green' }" |

@Output()

Component này không có output. Đây là component hiển thị thuần — tương tác (click, hover) được xử lý ở component cha thông qua wrapper hoặc event delegation.

Types & Interfaces

import { IButtonStatus, TYPE_BUTTON_STATUS } from '@libs-ui/components-buttons-status';

IButtonStatus

export interface IButtonStatus {
  /** Label hiển thị trong pill — được translate tự động qua @ngx-translate/core */
  label?: string;

  /**
   * Type màu của status pill.
   * - `'blue'` | `'green'` | `'red'` | `'orange'` | `'yellow'` | `'cyan'` | `'purple'` | `'brown'`: lấy màu từ LibsUiConfigProjectService
   * - `'other'`: bắt buộc cung cấp `otherConfig.color`, tuỳ chọn `otherConfig.background`
   */
  type: TYPE_BUTTON_STATUS;

  /**
   * Chỉ áp dụng khi `type === 'other'`.
   * - `color`: màu chữ/icon (hex, rgb... đều được)
   * - `background`: màu nền. Nếu bỏ qua, tự động tính màu tương phản từ `color` với độ sáng 90%
   */
  otherConfig?: {
    color: string;
    background?: string;
  };

  /** Class CSS bổ sung cho thẻ `<button>` gốc */
  classInclude?: string;

  /** Class CSS bổ sung cho thẻ `<span>` chứa label. Mặc định: `'libs-ui-font-h6r'` */
  classLabelInclude?: string;

  /** Class icon bên trái (VD: `'libs-ui-icon-tooltip-outline'`) */
  classIconLeft?: string;

  /** Cấu hình popover cho icon bên trái */
  popoverIconLeft?: IPopover;

  /** Class icon bên phải (VD: `'libs-ui-icon-chevron-right'`) */
  classIconRight?: string;

  /** Cấu hình popover cho icon bên phải */
  popoverIconRight?: IPopover;
}

TYPE_BUTTON_STATUS

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

IPopover (từ @libs-ui/components-popover)

import { IPopover } from '@libs-ui/components-popover';

// Các trường thường dùng cho icon popover:
const iconPopover: IPopover = {
  type: 'text',           // 'text' | 'other' | ...
  dataView: 'Mô tả ngắn hiển thị khi hover icon',
  ignoreShowPopover: false,
  classInclude: '',
};

Lưu ý quan trọng

⚠️ otherConfig bắt buộc khi type === 'other': Nếu type là 'other' mà thiếu otherConfig.color, component sẽ không hiển thị màu (fallback về giá trị rỗng). Luôn cung cấp ít nhất otherConfig: { color: '#hex' }.

⚠️ background tự động tính khi bỏ qua: Khi chỉ cung cấp otherConfig.color mà không có background, component tự gọi colorStepContrastFromOrigin(color, 90)?.light để tạo màu nền tương phản. Kết quả phụ thuộc vào màu gốc, hãy kiểm tra thực tế nếu cần màu chính xác.

⚠️ Label được translate tự động: Giá trị label được đẩy qua pipe translate của @ngx-translate/core. Nếu muốn hiển thị chuỗi thô (không translate), đảm bảo chuỗi đó không trùng với key trong file i18n, hoặc cấu hình TranslateService để bỏ qua.

⚠️ Màu chuẩn lấy từ ConfigProjectService: Các type blue, green, red... lấy cấu hình màu từ LibsUiConfigProjectService.ConfigButtonStatus. Nếu project chưa cấu hình service này, màu có thể hiển thị không đúng.

⚠️ Không tự handle sự kiện click: Component chỉ render UI. Nếu cần xử lý click, hãy bọc bên ngoài bằng <div (click)="handlerClick($event)"> ở component cha:

<!-- Component cha -->
<div (click)="handlerStatusClick($event)">
  <libs_ui-components-buttons-status [config]="statusConfig" />
</div>

protected handlerStatusClick(event: MouseEvent): void {
  event.stopPropagation();
  // xử lý logic
}