npm package: @libs-ui/components-inputs-emoji
Description: > Component chọn Emoji (Emoji Picker) tích hợp trong Popover với tính năng tìm kiếm và phân loại.
Latest version: 0.2.356-23

# @libs-ui/components-inputs-emoji

> Component chọn Emoji (Emoji Picker) tích hợp trong Popover với tính năng tìm kiếm và phân loại.

## Giới thiệu

`LibsUiComponentsEmojiComponent` cung cấp một giao diện chọn emoji trực quan, hỗ trợ đầy đủ các nhóm emoji tiêu chuẩn, tìm kiếm theo tên và tối ưu hóa hiệu năng bằng lazy loading khi cuộn danh sách.

### Tính năng

- ✅ Danh sách Emoji đầy đủ, phân loại theo nhóm
- ✅ Tìm kiếm Emoji nhanh chóng
- ✅ Tích hợp sẵn Popover thông minh
- ✅ Lazy loading (scroll to load more) tối ưu hiệu năng
- ✅ Hỗ trợ Custom Trigger qua `ng-content`
- ✅ Tùy chỉnh linh hoạt kích thước và vị trí popup

## Khi nào sử dụng

- Khi cần cho phép người dùng chèn cảm xúc (emoji) vào nội dung văn bản.
- Phù hợp cho ứng dụng Chat, Comment, Social Media.
- Khi cần một bộ chọn emoji chuyên nghiệp nhưng vẫn tiết kiệm diện tích giao diện.

## Cài đặt

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

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

## Import

```typescript
import { LibsUiComponentsEmojiComponent } from '@libs-ui/components-inputs-emoji';

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

## Ví dụ

### Cơ bản

```html
<libs_ui-components-emoji (outEventEmoji)="onSelect($event)" />
```

### Custom Trigger

```html
<libs_ui-components-emoji
  [isNgContent]="true"
  (outEventEmoji)="onSelect($event)">
  <button>Chọn Emoji</button>
</libs_ui-components-emoji>
```

## API

### libs_ui-components-emoji

#### Inputs

| Property                | Type                           | Default                  | Description                                  |
| ----------------------- | ------------------------------ | ------------------------ | -------------------------------------------- |
| `[classIconInclude]`    | `string`                       | `'libs-ui-icon-add'`     | CSS class cho icon trigger mặc định          |
| `[classInclude]`        | `string`                       | `''`                     | CSS class bổ sung cho trigger container      |
| `[classPopup]`          | `string`                       | `'w-[290px] h-[245px]'`  | CSS class cho container của popup chọn emoji |
| `[configPopover]`       | `IPopoverOverlay`              | `defaultConfigPopover()` | Cấu hình overlay cho Popover                 |
| `[isNgContent]`         | `boolean`                      | `false`                  | Sử dụng ng-content làm trigger thay vì icon  |
| `[modePopoverPosition]` | `'start' \| 'center' \| 'end'` | `undefined`              | Chế độ căn lề cho Popover                    |
| `[zIndex]`              | `number`                       | `0`                      | Giá trị Z-index nền của popup                |

#### Outputs

| Property                | Type                           | Description                                         |
| ----------------------- | ------------------------------ | --------------------------------------------------- |
| `(outEventEmoji)`       | `string`                       | Emit khi người dùng chọn một emoji                  |
| `(outFunctionsControl)` | `IPopoverFunctionControlEvent` | Emit các functions điều khiển Popover (show/remove) |

## Types & Interfaces

```typescript
// Interface configure Popover
export interface IPopoverOverlay {
  isAddContentToParentDocument?: boolean;
  classInclude?: string;
  widthByParent?: boolean;
  width?: number;
  minWidth?: number;
  maxWidth?: number;
  maxHeight?: number | null;
  zIndex?: number;
  direction?: 'top' | 'right' | 'bottom' | 'left';
  position?: {
    mode: 'start' | 'center' | 'end';
    distance: number;
  };
  // ... (see @libs-ui/components-popover for full list)
}

export interface IPopoverFunctionControlEvent {
  showPopoverOverlay: () => void;
  removePopoverOverlay: () => void;
}
```

## 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/emoji`

## Unit Tests

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

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

## License

MIT