npm package: @libs-ui/components-popover
Description: > Component hiển thị nội dung nổi (popover/tooltip) gắn liền với một phần tử gốc, hỗ trợ nhiều hướng và chế độ kích hoạt.
Latest version: 0.2.356-23

# @libs-ui/components-popover

> Component hiển thị nội dung nổi (popover/tooltip) gắn liền với một phần tử gốc, hỗ trợ nhiều hướng và chế độ kích hoạt.

## Giới thiệu

Bộ công cụ Popover cung cấp giải pháp hiển thị thông tin ngữ cảnh linh hoạt. Bạn có thể sử dụng nó dưới dạng `Directive` để tiết kiệm DOM hoặc `Component Selector` khi cần bọc nhiều phần tử phức tạp.

### Tính năng

- ✅ **Linh hoạt cách dùng**: Hỗ trợ cả Directive và Component Selector.
- ✅ **Định vị thông minh**: Tự động tính toán hướng để không bị tràn khung nhìn (viewport).
- ✅ **Template Support**: Hỗ trợ hiển thị nội dung từ `string` đơn giản đến `ng-template` phức tạp.
- ✅ **Event Handling**: Quản lý tốt các sự kiện hover, click và click-outside.
- ✅ **Customizable**: Dễ dàng tùy chỉnh chiều rộng, class CSS và hướng hiển thị.
- ✅ **OnPush Change Detection**
- ✅ **Angular Signals**

## Khi nào sử dụng

- Hiển thị thông tin bổ sung (Tooltips) khi di chuột qua phần tử.
- Hiển thị menu hoặc nội dung chi tiết khi nhấn vào nút.
- Thông báo trạng thái hoặc hướng dẫn người dùng tại chỗ.

## Cài đặt

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

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

## Import

```typescript
import { LibsUiComponentsPopoverModule } from '@libs-ui/components-popover';

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

## Ví dụ

### Directive (Sử dụng phổ biến)

```html
<div
  LibsUiComponentsPopoverDirective
  [config]="{ content: 'Nội dung thông báo' }">
  Hover me
</div>
```

### Component Selector

```html
<libs_ui-components-popover [config]="{ content: 'Nội dung thông báo', direction: 'top' }">
  <button>Action</button>
</libs_ui-components-popover>
```

## API

### LibsUiComponentsPopoverDirective / LibsUiComponentsPopoverComponent

#### Inputs

| Property                             | Type                           | Default      | Description                                              |
| ------------------------------------ | ------------------------------ | ------------ | -------------------------------------------------------- |
| `[config]`                           | `IPopoverConfig`               | **Bắt buộc** | Cấu hình nội dung, hướng và kích thước của popover.      |
| `[mode]`                             | `'hover' \| 'click' \| 'none'` | `'hover'`    | Chế độ kích hoạt hiển thị.                               |
| `[ignoreCursorPointerModeLikeClick]` | `boolean`                      | `false`      | Bỏ qua việc đổi cursor thành pointer trong chế độ click. |
| `[ignoreStopPropagationEvent]`       | `boolean`                      | `false`      | Cho phép sự kiện click lan truyền ra lớp cha.            |
| `[initEventInElementRefCustom]`      | `ElementRef`                   | `undefined`  | Gắn sự kiện vào một element khác thay vì host element.   |

#### Outputs

| Property        | Type      | Description                             |
| --------------- | --------- | --------------------------------------- |
| `(outExpanded)` | `boolean` | Phát ra trạng thái đóng/mở của popover. |

## Types & Interfaces

```typescript
export interface IPopoverConfig {
  content?: string;
  template?: TemplateRef<any>;
  direction?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
  width?: number;
  classCustom?: string;
  context?: any;
}
```

## Styling

### CSS Classes

| Class                        | Description                         |
| ---------------------------- | ----------------------------------- |
| `.libs-ui-popover-container` | Lớp bao ngoài của nội dung popover. |
| `.libs-ui-popover-arrow`     | Mũi tên chỉ hướng của popover.      |

## Công nghệ

| Technology      | Version | Purpose            |
| --------------- | ------- | ------------------ |
| Angular         | 18+     | Framework          |
| CDK Overlay     | 18+     | Positioning engine |
| Angular Signals | -       | State management   |
| TailwindCSS     | 3.x     | Styling            |

## Demo

```bash
npx nx serve core-ui
```

Truy cập: `http://localhost:4200/popover`

## Unit Tests

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

# Coverage
npx nx test components-popover --coverage
```

## License

MIT