@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

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

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

Import

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

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

Ví dụ

Cơ bản

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

Custom Trigger

<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

// 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

npx nx serve core-ui

Truy cập: http://localhost:4500/inputs/emoji

Unit Tests

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

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

License

MIT