npm package: @libs-ui/services-dialog
Description: > Version: `0.2.355-10` > > Service giúp tạo và quản lý Modal Dialog động trong ứng dụng Angular một cách chuyên nghiệp.
Latest version: 0.2.356-23

# DialogService

> Version: `0.2.355-10`
>
> Service giúp tạo và quản lý Modal Dialog động trong ứng dụng Angular một cách chuyên nghiệp.

## Giới thiệu

`LibsUiDialogService` cung cấp phương thức `addDialog` để hiển thị Modal một cách linh hoạt mà không cần khai báo thẻ Modal trong template. Service này quản lý việc tạo component động, chèn vào body (hoặc parent document) và xử lý vòng đời của Dialog.

## Lưu ý quan trọng (Important Notes)

> ⚠️ **Caveats & Logic Conflicts**:
>
> - **`buttonsFooter` Override**: Khi có `buttonsFooter`, các `configAgreeEvent`/`configCancelEvent` **KHÔNG hoạt động** (button chỉ gọi `action()`, không emit event). Chỉ `configCloseEvent` hoạt động khi click nút Close (X) ở header.
> - **Khuyến nghị**: Dùng `buttonsFooter` → xử lý logic trong `button.action()`. KHÔNG dùng `configAgreeEvent`/`configCancelEvent`.
> - **Width mặc định**: `500px` nếu không cấu hình.
> - **Auto-close**: Dialog tự đóng sau action. Để ngăn: set `ignoreRemoveDialog: true` hoặc gọi `removeDialog(id)` thủ công.

## Cài đặt

```bash
npm install @libs-ui/services-dialog
```

## Import

```typescript
import { LibsUiDialogService } from '@libs-ui/services-dialog';

@Component({
  standalone: true,
  imports: [], // Không cần import vào đây vì là Service
  // ...
})
export class YourComponent {
  private dialogService = inject(LibsUiDialogService);
}
```

## Cách sử dụng

### 1. Dialog cơ bản

```typescript
this.dialogService.addDialog({
  title: 'Thông báo',
  bodyConfig: {
    lines: [{ text: 'Nội dung thông báo đơn giản.' }],
  },
});
```

### 2. Dialog xác nhận với xử lý Async

```typescript
const dialogId = this.dialogService.addDialog({
  title: 'Xác nhận xóa',
  bodyConfig: {
    lines: [{ text: 'Bạn có chắc chắn muốn xóa mục này?' }],
  },
  configAgreeEvent: {
    ignoreRemoveDialog: true, // Không đóng ngay để đợi xử lý
    callback: async (control) => {
      control?.setStateDisable(true); // Disable nút tránh click nhiều lần
      await this.apiService.deleteItem();
      this.dialogService.removeDialog(dialogId); // Đóng thủ công sau khi xong
    },
  },
});
```

## API Reference

### Methods

| Method                                    | Description                                            | Parameters                                         | Returns              |
| ----------------------------------------- | ------------------------------------------------------ | -------------------------------------------------- | -------------------- |
| `addDialog(config, isAddParentDocument?)` | Tạo và hiển thị một Dialog mới.                        | `config: IDialog`, `isAddParentDocument?: boolean` | `string` (Dialog ID) |
| `removeDialog(id)`                        | Đóng và xóa Dialog theo ID.                            | `id: string`                                       | `void`               |
| `clearDialogsRef()`                       | Xóa tất cả các Dialog đang mở.                         | `-`                                                | `void`               |
| `switchDisableActionsOnDialog(id)`        | Bật/tắt trạng thái disable của các action trên Dialog. | `id: string`                                       | `void`               |

### IDialog Configuration

| Property            | Type                         | Default    | Description                                |
| ------------------- | ---------------------------- | ---------- | ------------------------------------------ |
| `title`             | `string`                     | `-`        | Tiêu đề của Dialog.                        |
| `bodyConfig`        | `IModalBodyConfig`           | `-`        | Cấu hình nội dung (lines, icon, class...). |
| `buttonsFooter`     | `IButton[]`                  | `-`        | Danh sách button tùy chỉnh ở footer.       |
| `width`             | `string`                     | `'500px'`  | Độ rộng của Dialog.                        |
| `height`            | `string`                     | `'auto'`   | Chiều cao của Dialog.                      |
| `mode`              | `'center' \| 'offset-right'` | `'center'` | Vị trí hiển thị Dialog.                    |
| `disable`           | `boolean`                    | `false`    | Khóa toàn bộ tương tác trên Dialog.        |
| `configAgreeEvent`  | `IDialogConfigEvent`         | `-`        | Xử lý khi nhấn nút Đồng ý.                 |
| `configCancelEvent` | `IDialogConfigEvent`         | `-`        | Xử lý khi nhấn nút Hủy.                    |
| `configCloseEvent`  | `IDialogConfigEvent`         | `-`        | Xử lý khi đóng Dialog (X).                 |
| `zIndex`            | `number`                     | `-`        | Thứ tự hiển thị lớp.                       |
| `titleUseInnerText` | `boolean`                    | `false`    | Dùng innerText cho title (Security).       |

## Demo Links

- **Local Development**: [http://localhost:4500/services/dialog](http://localhost:4500/services/dialog)
- **Production**: _Tạm thời không khả dụng_