npm package: @libs-ui/components-inputs-mention
Description: > Thêm tính năng mention (gợi ý khi gõ ký tự trigger) vào các input, textarea hoặc contenteditable elements.
Latest version: 0.2.356-23

# @libs-ui/components-inputs-mention

> Thêm tính năng mention (gợi ý khi gõ ký tự trigger) vào các input, textarea hoặc contenteditable elements.

## Giới thiệu

`LibsUiComponentsInputsMentionDirective` là một standalone Angular directive cho phép người dùng tìm kiếm và chọn các mục từ danh sách khi họ gõ một ký tự kích hoạt (ví dụ: `@`, `#`).

### Tính năng

- ✅ Hỗ trợ nhiều ký tự trigger với cấu hình riêng biệt.
- ✅ Hoạt động trên `input`, `textarea` và các thành phần `contenteditable`.
- ✅ Tích hợp sẵn với các trình soạn thảo như Quill.
- ✅ Tùy chỉnh template danh sách gợi ý.
- ✅ Hỗ trợ Iframe.
- ✅ Angular Signals cho việc quản lý trạng thái.
- ✅ Standalone Directive.

## Khi nào sử dụng

- Khi bạn cần tính năng mention trong khung chat hoặc bình luận.
- Khi bạn muốn hỗ trợ phím tắt hoặc tag nhanh trong các form nhập liệu.
- Khi bạn cần tích hợp mention vào các trình soạn thảo văn bản giàu tính năng (Rich Text Editors).

## Cài đặt

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

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

## Import

```typescript
import { LibsUiComponentsInputsMentionDirective } from '@libs-ui/components-inputs-mention';

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

## Ví dụ

### Cơ bản

```html
<input
  type="text"
  LibsUiComponentsInputsMentionDirective
  [mentionConfig]="{ items: items, triggerChar: '@' }" />
```

### Đa Trigger

```html
<div
  contenteditable="true"
  LibsUiComponentsInputsMentionDirective
  [mentionConfig]="{ 
    items: people, 
    triggerChar: '@',
    mention: [
      { items: tags, triggerChar: '#' }
    ]
  }"></div>
```

## API

### [LibsUiComponentsInputsMentionDirective]

#### Inputs

| Property                | Type                             | Default     | Description                                       |
| ----------------------- | -------------------------------- | ----------- | ------------------------------------------------- |
| `[timeDelayInit]`       | `number`                         | `0`         | Thời gian trễ trước khi khởi tạo directive logic. |
| `[mentionConfig]`       | `IMentionConfig`                 | `undefined` | Cấu hình chính cho mention.                       |
| `[mentionListTemplate]` | `TemplateRef<TYPE_TEMPLATE_REF>` | `undefined` | Template tùy chỉnh cho danh sách gợi ý.           |

#### Outputs

| Property               | Type                                         | Description                                                     |
| ---------------------- | -------------------------------------------- | --------------------------------------------------------------- |
| `(outSearchTerm)`      | `EventEmitter<string \| undefined>`          | Emits từ khóa tìm kiếm hiện tại.                                |
| `(outItemSelected)`    | `EventEmitter<unknown>`                      | Emits đối tượng mục được chọn.                                  |
| `(outToggle)`          | `EventEmitter<boolean>`                      | Emits `true` khi danh sách hiện, `false` khi ẩn.                |
| `(outInsertMention)`   | `EventEmitter<IMentionInsert>`               | Emits khi một mention được chèn (dành cho các editor phức tạp). |
| `(outFunctionControl)` | `EventEmitter<IMentionFunctionControlEvent>` | Cung cấp phương thức điều khiển thủ công.                       |

## Types & Interfaces

```typescript
export interface IMentionConfig extends IMentionItem {
  disableStyle?: boolean;
  iframe?: string;
  mention?: Array<IMentionItem>;
}

export interface IMentionItem {
  triggerChar?: string;
  labelKey?: string;
  disableSort?: boolean;
  disableSearch?: boolean;
  dropUp?: boolean;
  allowSpace?: boolean;
  limitSpaceSearchQuery?: number;
  returnTrigger?: boolean;
  mentionSelect?: (item: unknown, triggerChar?: string) => string;
  mentionFilter?: (searchString: string, items?: Array<unknown>) => Array<unknown> | undefined;
  mentionEventName?: 'click' | 'mouseenter';
  mentionActionByEvent?: (item: unknown, triggerChars?: string) => void;
  items: Array<Record<string, string | undefined>>;

  zIndex?: number;
}

export interface IMentionInsert {
  data: {
    id: string;
    feId: string;
    value: string;
  };
  lengthKey: number;
}

export interface IMentionFunctionControlEvent {
  addMention: (inputEvent: boolean) => 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:4200/inputs/mention`

## License

MIT