npm package: @libs-ui/components-badge
Description: > Component hiển thị số lượng/đếm (badge) với nhiều chế độ định dạng cho Angular.
Latest version: 0.2.356-23

# @libs-ui/components-badge

> Component hiển thị số lượng/đếm (badge) với nhiều chế độ định dạng cho Angular.

## Giới thiệu

`LibsUiComponentsBadgeComponent` là một standalone Angular component để hiển thị số lượng với các tính năng:

- ✅ Nhiều chế độ hiển thị (x, 0x, x+, +x, k)
- ✅ Rút gọn số lớn tự động (1K, 1.5K, 1M)
- ✅ Hiển thị dạng "99+" khi vượt giới hạn
- ✅ Hỗ trợ trạng thái active với màu sắc khác
- ✅ Tích hợp Popover tooltip
- ✅ OnPush Change Detection cho hiệu năng cao
- ✅ Sử dụng Angular Signals

## Cài đặt

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

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

## Sử dụng

### Import Component

```typescript
import { Component } from '@angular/core';
import { LibsUiComponentsBadgeComponent, TYPE_BADGE_MODE } from '@libs-ui/components-badge';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [LibsUiComponentsBadgeComponent],
  template: `
    <div class="flex items-center gap-2">
      <span>Tin nhắn</span>
      <libs_ui-components-badge
        [count]="messageCount"
        [mode]="'0x'"
        [active]="hasUnread"
      />
    </div>
  `
})
export class ExampleComponent {
  messageCount = 5;
  hasUnread = true;
}
```

### Các Mode hiển thị

| Mode | Count = 0 | Count = 5 | Count = 15 | Count = 100 | Count > maxCount |
|------|-----------|-----------|------------|-------------|------------------|
| `x` | 0 | 5 | 15 | 100 | - |
| `0x` | 00 | 05 | 15 | 100 | - |
| `x+` | 00 | 05 | 15 | 100 | 99+ |
| `+x` | +00 | +05 | +15 | +100 | - |
| `k` | - | - | - | - | 1K, 1.5M |

### Ví dụ với mode 'x+'

```html
<!-- Hiển thị "99+" khi count > maxCount -->
<libs_ui-components-badge
  [count]="150"
  [mode]="'x+'"
  [maxCount]="99"
/>
<!-- Output: 99+ -->
```

### Ví dụ với mode 'k' (rút gọn)

```html
<!-- Hiển thị số rút gọn -->
<libs_ui-components-badge [count]="1500" [mode]="'k'" />
<!-- Output: 1,5K -->

<libs_ui-components-badge [count]="1500000" [mode]="'k'" />
<!-- Output: 1,5M -->
```

### Trạng thái Active

```html
<!-- Badge bình thường -->
<libs_ui-components-badge [count]="5" />

<!-- Badge active (màu xanh) -->
<libs_ui-components-badge [count]="5" [active]="true" />
```

## API Reference

### Inputs

| Tên | Kiểu | Mặc định | Mô tả |
|-----|------|----------|-------|
| `count` | `number` | `0` | Số lượng hiển thị trên badge |
| `mode` | `TYPE_BADGE_MODE` | `undefined` | Chế độ định dạng: 'x', '0x', 'x+', '+x', 'k' |
| `maxCount` | `number` | `MAX_SAFE_INTEGER` | Giới hạn tối đa, vượt qua sẽ hiển thị "maxCount+" (với mode 'x+') |
| `active` | `boolean` | `false` | Trạng thái active, thay đổi màu sắc badge |
| `classCircle` | `string` | `'libs-ui-font-h6r'` | Class CSS tùy chỉnh cho badge |
| `ignoreMarginDefault` | `boolean` | `false` | Bỏ margin-left mặc định (8px) |
| `popoverConfig` | `IPopoverOverlay` | `undefined` | Cấu hình cho popover tooltip |
| `ignoreStopPropagationEvent` | `boolean` | `true` | Bỏ qua stopPropagation khi click |

### Types

```typescript
// Các mode hiển thị số
type TYPE_BADGE_MODE = 'x' | 'x+' | '+x' | 'k' | '0x';

// Interface cho badge (dùng khi cần type cho object)
interface IBadge {
  mode?: TYPE_BADGE_MODE;
  count?: number;
  maxCount?: number;
  classCircle?: string;
}
```

### Giải thích các Mode

| Mode | Mô tả | Ví dụ |
|------|-------|-------|
| `x` | Số thường, không có số 0 đằng trước | 0, 5, 15, 100 |
| `0x` | Có số 0 đằng trước nếu < 10 | 00, 05, 15, 100 |
| `x+` | Hiển thị "maxCount+" khi vượt giới hạn | 99+, 999+ |
| `+x` | Thêm dấu + phía trước số | +00, +05, +15 |
| `k` | Rút gọn hàng nghìn/triệu | 1,5K, 1,0M |

## Styling

Badge có 2 trạng thái CSS:

```scss
// Normal state
.libs-ui-badge {
  background: #e6e7ea;
  color: #6a7383;
}

// Active state
.libs-ui-badge-active {
  background: var(--libs-ui-color-light-3, #f4f8ff);
  color: var(--libs-ui-color-default, #226ff5);
}
```

Bạn có thể override bằng CSS variables:

```css
:root {
  --libs-ui-color-default: #your-primary-color;
  --libs-ui-color-light-3: #your-light-color;
}
```

## Công nghệ sử dụng

- **Angular 18+** - Standalone Components
- **Angular Signals** - Reactive state với `computed()`
- **TailwindCSS** - Utility classes
- **OnPush** - Change Detection Strategy

## Demo

Demo có sẵn trong ứng dụng `core-ui`:

```bash
# Chạy demo app
npx nx serve core-ui
```

**File demo:** `apps/core-ui/src/app/components/badge/badge.component.ts`

### Tính năng Demo

- 🎮 **Interactive Demo**: Điều chỉnh count, maxCount bằng slider
- 📊 **Mode Comparison Table**: So sánh tất cả modes với nhiều giá trị count
- 🔄 **Active State Toggle**: Bật/tắt trạng thái active
- 📋 **API Reference**: Bảng tham chiếu đầy đủ các inputs và types

## Unit Tests

```bash
# Chạy tests
npx nx test badge

# Chạy tests với coverage
npx nx test badge --coverage

# Watch mode
npx nx test badge --watch
```

## License

MIT