npm package: @libs-ui/components-pages-template-full-screen
Description: > Khung layout chuẩn cho các trang hiển thị toàn màn hình (Full Screen), tích hợp header với các action linh hoạt.
Latest version: 0.2.356-23

# @libs-ui/components-pages-template-full-screen

> Khung layout chuẩn cho các trang hiển thị toàn màn hình (Full Screen), tích hợp header với các action linh hoạt.

## Giới thiệu

`LibsUiComponentsPagesTemplateFullScreenComponent` là một standalone Angular component cung cấp cấu trúc layout cho các module cần không gian hiển thị toàn màn hình như: Tạo mới đối tượng phức tạp, Workflow editor, hoặc các trang báo cáo chuyên sâu.

### Tính năng

- ✅ **Header linh hoạt**: Hỗ trợ 3 phân vùng (Trái, Giữa, Phải).
- ✅ **Đa dạng Action**: Tích hợp sẵn Button, Switch, Trạng thái (Status), Label và Dropdown menu trên header.
- ✅ **Tùy biến cao**: Hỗ trợ Content Projection cho nội dung chính và TemplateRef cho các vùng trên header.
- ✅ **Giao tiếp Micro**: Tự động gửi message "open/close" và cập nhật trạng thái hoạt động tới ứng dụng cha.
- ✅ **Angular Signals**: Tương thích hoàn toàn với Angular 18 Signals.

## Khi nào sử dụng

- Khi cần không gian hiển thị tối đa cho người dùng (ví dụ: màn hình cấu hình workflow, chỉnh sửa ảnh/video).
- Khi trang có cấu trúc header phức tạp với nhiều nút chức năng điều hướng và thao tác nhanh.
- Khi cần một màn hình "Modal-like" nhưng chiếm trọn viewport.

## Cài đặt

```bash
# npm
npm install @libs-ui/components-pages-template-full-screen

# yarn
yarn add @libs-ui/components-pages-template-full-screen
```

## Import

```typescript
import { LibsUiComponentsPagesTemplateFullScreenComponent } from '@libs-ui/components-pages-template-full-screen';

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

## Ví dụ

### Basic

```html
<libs_ui-components-pages_template_full_screen
  [title]="'Cấu hình chiến dịch mới'"
  [labelLeft]="'Quay lại'"
  (outClose)="onClose()">
  <div class="content">
    <!-- Nội dung trang của bạn -->
  </div>
</libs_ui-components-pages_template_full_screen>
```

### With Header Actions

```html
<libs_ui-components-pages_template_full_screen
  [title]="'Chỉnh sửa nội dung'"
  [buttonRight]="[
    { key: 'switch', active: true, classInclude: 'mr-2' },
    { key: 'button', label: 'Lưu nháp', type: 'button-secondary' },
    { key: 'button', label: 'Xuất bản', type: 'button-primary' }
  ]"
  (outClickButton)="onAction($event)">
  <p>Nội dung soạn thảo...</p>
</libs_ui-components-pages_template_full_screen>
```

## API

### libs_ui-components-pages_template_full_screen

#### Inputs

| Property                     | Type                               | Default               | Description                                             |
| ---------------------------- | ---------------------------------- | --------------------- | ------------------------------------------------------- |
| `[title]`                    | `string`                           | `undefined`           | Tiêu đề hiển thị ở giữa header.                         |
| `[labelLeft]`                | `string`                           | `'i18n_back_to_list'` | Nhãn cho nút quay lại bên trái.                         |
| `[buttonCenter]`             | `IPagesTemplateFullScreenButton[]` | `undefined`           | Danh sách các nút hiển thị ở giữa header (cạnh title).  |
| `[buttonRight]`              | `IPagesTemplateFullScreenButton[]` | `undefined`           | Danh sách các nút hiển thị bên phải header.             |
| `[hasEdit]`                  | `boolean`                          | `false`               | Hiển thị icon edit cạnh tiêu đề.                        |
| `[menuDropDownConfigs]`      | `IDropdown`                        | `undefined`           | Cấu hình cho menu "Thanh thao tác khác" (ba chấm dọc).  |
| `[zIndex]`                   | `number`                           | `1000`                | Thứ tự hiển thị của lớp overlay.                        |
| `[ignoreClosePageFullEvent]` | `boolean`                          | `false`               | Nếu true, sẽ không gửi message communicate tới app cha. |
| `[ignoreBackgroundColor]`    | `boolean`                          | `false`               | Nếu true, nền sẽ trong suốt (mặc định #f2f5f7).         |
| `[disable]`                  | `boolean`                          | `false`               | Vô hiệu hóa toàn bộ action trên header.                 |
| `[leftTemplate]`             | `TemplateRef<any>`                 | `undefined`           | Custom template cho vùng bên trái header.               |
| `[centerTemplate]`           | `TemplateRef<any>`                 | `undefined`           | Custom template cho vùng giữa header.                   |
| `[templateRight]`            | `TemplateRef<any>`                 | `undefined`           | Custom template cho vùng bên phải header.               |
| `[classHeaderInclude]`       | `string`                           | `undefined`           | Custom class cho header.                                |
| `[classBodyInclude]`         | `string`                           | `undefined`           | Custom class cho thân trang.                            |
| `[divideClassHeader]`        | `object`                           | `undefined`           | Cấu hình class cho các vùng phân chia trên header.      |

#### Outputs

| Property                    | Type                             | Description                                                                   |
| --------------------------- | -------------------------------- | ----------------------------------------------------------------------------- |
| `(outClose)`                | `void`                           | Phát ra khi click nút quay lại/đóng.                                          |
| `(outEdit)`                 | `void`                           | Phát ra khi click icon edit cạnh tiêu đề.                                     |
| `(outSelectedMenuDropdown)` | `IEmitSelectKey`                 | Phát ra khi chọn item từ menu dropdown phụ.                                   |
| `(outClickButton)`          | `IPagesTemplateFullScreenButton` | Phát ra khi click vào bất kỳ nút nào trong `buttonCenter` hoặc `buttonRight`. |

## Types & Interfaces

```typescript
export type IPagesTemplateFullScreenButtonKey = 'button' | 'button-status' | 'switch' | 'label' | 'line-space' | 'button-dropdown';

export interface IPagesTemplateFullScreenButton extends IButton {
  key: IPagesTemplateFullScreenButtonKey;
  classInclude?: string;
  disable?: boolean;
  action?: (event?: ISwitchEvent) => Promise<void>;
  configButtonStatus?: IButtonStatus;
  active?: boolean;
  labelConfig?: ILabel;
}
```

## 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/page-template/full-screen`