@libs-ui/components-pages-template-detail 0.2.356-42 → 0.2.356-43

package/README.md

@@ -1,132 +1,544 @@
 # @libs-ui/components-pages-template-detail
 
-> Template trang chi tiết chuẩn UI Kit, tích hợp đầy đủ header, navigation và các action phổ biến.
+> Template layout chuẩn cho trang chi tiết — tích hợp header có nút quay lại, tiêu đề, và thanh action phía phải với nhiều loại control.
 
 ## Giới thiệu
 
-`LibsUiComponentsPagesTemplateDetailComponent` là một standalone Angular component cung cấp khung layout cho các trang chi tiết. Nó giúp chuẩn hóa giao diện và trải nghiệm người dùng (UX) cho các tác vụ như xem/sửa thông tin thực thể.
+`@libs-ui/components-pages-template-detail` cung cấp hai component khung layout dành cho trang chi tiết (detail page): **V1** (`LibsUiComponentsPagesTemplateDetailComponent`) và **V2** (`LibsUiComponentsPagesTemplateDetailV2Component`). Cả hai đều bao gồm header chuẩn hóa với nút quay lại, tiêu đề có popover, và vùng action bên phải hỗ trợ nhiều loại control (button, switch, dropdown, radio group, tooltip-button). V2 bổ sung khả năng lazy-load component vào vùng body qua `bodyConfig`, skeleton loading, và `ChangeDetectionStrategy.OnPush`.
 
-### Tính năng
+> ⚠️ **Deprecated**: `LibsUiComponentsPagesTemplateDetailComponent` (V1) đã bị deprecated. Ưu tiên sử dụng `LibsUiComponentsPagesTemplateDetailV2Component` (V2) cho mọi trang mới.
 
-- ✅ **Header chuẩn hóa**: Tích hợp nút quay lại, tiêu đề và mô tả.
-- ✅ **Actions linh hoạt**: Hỗ trợ nhiều loại nút (button, switch, dropdown, radio group) ở bên phải header.
-- ✅ **Layout tùy biến**: Hỗ trợ chia tỉ lệ header (24/52/24) cho các trang cần hiển thị thông tin ở giữa.
-- ✅ **Scroll Overlay**: Tích hợp sẵn directive xử lý cuộn nội dung mượt mà.
-- ✅ **Angular Signals**: Sử dụng các tính năng mới nhất của Angular 18 (Input, Model).
+## Tính năng
+
+- ✅ **Header chuẩn hóa**: Nút quay lại (chevron icon), nhãn "Quay lại danh sách", tiêu đề với popover tooltip khi hover.
+- ✅ **Thanh action phải linh hoạt**: Hỗ trợ `button`, `swicth`, `menu-dropdown`, `button-dropdown`, `radio-group`, `tooltip-button`, `tooltip`, `circle-and-number` trên cùng một thanh header.
+- ✅ **Header tùy chỉnh tiêu đề phụ (header.content)**: V2 hỗ trợ dòng tiêu đề lớn phía trên dải header chính.
+- ✅ **Chia tỉ lệ header 24/52/24**: Bật `isSplitHeaderRatio` để header chia đều ba vùng trái — giữa — phải.
+- ✅ **Vùng body lazy-load (V2)**: Lazy load component vào body qua `bodyConfig.getComponentOutlet`, hiển thị skeleton khi chưa resolve.
+- ✅ **Skeleton loading (V2)**: Skeleton tùy chỉnh hoàn toàn qua `bodyConfig.skeletonConfig`.
+- ✅ **Scroll overlay**: Tích hợp sẵn `LibsUiComponentsScrollOverlayDirective`, emit event `outScroll` khi cuộn body.
+- ✅ **FunctionControl API**: Expose `setStateDisable()` qua `outFunctionControl` để component cha điều khiển trạng thái disable từ bên ngoài.
+- ✅ **XSS-safe**: Tiêu đề và mô tả tự động escape HTML qua `LibsUiPipesEscapeHtmlPipe`.
+- ✅ **Angular Signals + OnPush (V2)**: Toàn bộ input dùng Signal API, V2 có `ChangeDetectionStrategy.OnPush`.
 
 ## Khi nào sử dụng
 
-- Khi xây dựng trang chi tiết cho một thực thể (ví dụ: Chi tiết khách hàng, Chi tiết đơn hàng).
-- Cần một header thống nhất có đầy đủ các nút chức năng (Lưu, Hủy, Thao tác khác).
-- Phù hợp cho các layout yêu cầu sự tập trung vào nội dung chính nhưng vẫn cần truy cập nhanh các hành động quản lý.
+- Khi xây dựng trang chi tiết thực thể (Chi tiết khách hàng, Chi tiết đơn hàng, Chi tiết hợp đồng...).
+- Cần header thống nhất có đầy đủ action: nút Lưu, nút Hủy, dropdown thao tác, switch trạng thái.
+- Trang chi tiết có body là một component riêng cần lazy-load (dùng V2 + `bodyConfig`).
+- Khi muốn hiển thị tiêu đề trang ở giữa header (ví dụ: tên record đang xem), dùng `isSplitHeaderRatio` + `configCenter`.
 
 ## Cài đặt
 
 ```bash
-# npm
 npm install @libs-ui/components-pages-template-detail
-
-# yarn
-yarn add @libs-ui/components-pages-template-detail
 ```
 
 ## Import
 
 ```typescript
+// V2 (khuyến nghị cho code mới)
+import { LibsUiComponentsPagesTemplateDetailV2Component } from '@libs-ui/components-pages-template-detail';
+
+// V1 (deprecated — chỉ dùng khi maintain code cũ)
 import { LibsUiComponentsPagesTemplateDetailComponent } from '@libs-ui/components-pages-template-detail';
 
+// Interfaces & Types
+import {
+  IPagesTemplateDetailConfigTitle,
+  IPagesTemplateDetailConfigRight,
+  IPagesTemplateDetailConfigCenter,
+  IPageDetailFunctionControl,
+  IPageDetailV2BodyConfig,
+  IPageDetailV2SectionData,
+} from '@libs-ui/components-pages-template-detail';
+```
+
+## Ví dụ sử dụng
+
+### Ví dụ 1 — Trang chi tiết cơ bản (V2)
+
+```typescript
+// customer-detail.component.ts
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LibsUiComponentsPagesTemplateDetailV2Component } from '@libs-ui/components-pages-template-detail';
+import { IPageDetailFunctionControl, IPagesTemplateDetailConfigRight } from '@libs-ui/components-pages-template-detail';
+
 @Component({
+  selector: 'app-customer-detail',
   standalone: true,
-  imports: [LibsUiComponentsPagesTemplateDetailComponent],
-  // ...
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [LibsUiComponentsPagesTemplateDetailV2Component],
+  template: `
+    <libs_ui-components-pages_template-detail_v2
+      [configTitle]="{
+        config: { content: 'Nguyễn Văn An' },
+        isShowBackToListLabel: true
+      }"
+      [configRight]="configRight"
+      (outClose)="handlerClose($event)"
+      (outFunctionControl)="handlerFunctionControl($event)">
+    </libs_ui-components-pages_template-detail_v2>
+  `,
 })
-export class YourDetailComponent {}
+export class CustomerDetailComponent {
+  protected configRight: IPagesTemplateDetailConfigRight[] = [
+    {
+      key: 'button',
+      configButton: {
+        label: 'Lưu thay đổi',
+        type: 'button-primary',
+        action: () => this.handlerSave(),
+      },
+    },
+    {
+      key: 'button',
+      configButton: {
+        label: 'Hủy',
+        type: 'button-secondary',
+        action: () => this.handlerCancel(),
+      },
+    },
+  ];
+
+  private functionControl?: IPageDetailFunctionControl;
+
+  protected handlerClose(event: Event): void {
+    event.stopPropagation();
+    // Navigate back to list
+  }
+
+  protected handlerFunctionControl(control: IPageDetailFunctionControl): void {
+    this.functionControl = control;
+  }
+
+  private handlerSave(): void {
+    // Save logic
+  }
+
+  private handlerCancel(): void {
+    // Cancel logic
+  }
+}
 ```
 
-## Ví dụ
+### Ví dụ 2 — Header chia 3 phần (24/52/24) với tiêu đề ở giữa
 
-### Cấu hình cơ bản
+```typescript
+// order-detail.component.ts
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { LibsUiComponentsPagesTemplateDetailV2Component } from '@libs-ui/components-pages-template-detail';
+import {
+  IPageDetailFunctionControl,
+  IPagesTemplateDetailConfigCenter,
+  IPagesTemplateDetailConfigRight,
+} from '@libs-ui/components-pages-template-detail';
 
-```html
-<libs_ui-components-pages_template-detail
-  [configTitle]="{
-    config: { content: 'Chi tiết khách hàng' },
-    isShowBackToListLabel: true
-  }"
-  [configRight]="[
+@Component({
+  selector: 'app-order-detail',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [LibsUiComponentsPagesTemplateDetailV2Component],
+  template: `
+    <libs_ui-components-pages_template-detail_v2
+      [isSplitHeaderRatio]="true"
+      [configTitle]="{
+        config: { content: 'Mã đơn: #DH-2024-001' },
+        isShowBackToListLabel: true
+      }"
+      [configCenter]="configCenter"
+      [configRight]="configRight"
+      (outClose)="handlerClose($event)"
+      (outFunctionControl)="handlerFunctionControl($event)">
+    </libs_ui-components-pages_template-detail_v2>
+  `,
+})
+export class OrderDetailComponent {
+  protected configCenter: IPagesTemplateDetailConfigCenter = {
+    title: 'Chi tiết đơn hàng',
+    classIncludeTitle: 'uppercase libs-ui-font-h4s',
+  };
+
+  protected configRight: IPagesTemplateDetailConfigRight[] = [
+    {
+      key: 'swicth',
+      configSwicth: {
+        active: true,
+        action: async (event) => {
+          // Handle switch change
+        },
+      },
+    },
+    {
+      key: 'menu-dropdown',
+      configDropdown: {
+        listConfig: [
+          { key: 'export', label: 'Xuất PDF' },
+          { key: 'print', label: 'In đơn hàng' },
+          { key: 'delete', label: 'Xóa đơn hàng' },
+        ],
+      },
+    },
+  ];
+
+  protected handlerClose(event: Event): void {
+    event.stopPropagation();
+    // Navigate back
+  }
+
+  protected handlerFunctionControl(control: IPageDetailFunctionControl): void {
+    // Store function control for external use
+  }
+}
+```
+
+### Ví dụ 3 — Lazy-load body component (V2 + bodyConfig)
+
+```typescript
+// contract-detail.component.ts
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { from, of } from 'rxjs';
+import { LibsUiComponentsPagesTemplateDetailV2Component } from '@libs-ui/components-pages-template-detail';
+import {
+  IPageDetailFunctionControl,
+  IPageDetailV2BodyConfig,
+  IPagesTemplateDetailConfigRight,
+} from '@libs-ui/components-pages-template-detail';
+
+@Component({
+  selector: 'app-contract-detail',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [LibsUiComponentsPagesTemplateDetailV2Component],
+  template: `
+    <libs_ui-components-pages_template-detail_v2
+      [configTitle]="{
+        config: { content: 'Hợp đồng số: HD-2024-001' },
+        isShowBackToListLabel: true
+      }"
+      [configRight]="configRight"
+      [bodyConfig]="bodyConfig"
+      (outClose)="handlerClose($event)"
+      (outFunctionControl)="handlerFunctionControl($event)">
+    </libs_ui-components-pages_template-detail_v2>
+  `,
+})
+export class ContractDetailComponent {
+  protected bodyConfig: IPageDetailV2BodyConfig = {
+    getComponentOutlet: () =>
+      from(
+        import('./contract-info/contract-info.component').then(
+          (m) => m.ContractInfoComponent
+        )
+      ),
+    getDataComponentOutlet: (sectionData) =>
+      of({
+        contractId: 'HD-2024-001',
+        disable: sectionData?.disable ?? false,
+      }),
+    classInclude: 'p-[24px]',
+  };
+
+  protected configRight: IPagesTemplateDetailConfigRight[] = [
     {
       key: 'button',
-      configButton: { label: 'Lưu thay đổi', type: 'button-primary' }
+      configButton: {
+        label: 'Duyệt hợp đồng',
+        type: 'button-primary',
+        action: () => this.handlerApprove(),
+      },
+    },
+  ];
+
+  protected handlerClose(event: Event): void {
+    event.stopPropagation();
+    // Navigate back
+  }
+
+  protected handlerFunctionControl(control: IPageDetailFunctionControl): void {
+    // Dùng control.setStateDisable(true) để disable toàn bộ action trong header
+  }
+
+  private handlerApprove(): void {
+    // Approve logic
+  }
+}
+```
+
+### Ví dụ 4 — Điều khiển trạng thái disable từ bên ngoài qua FunctionControl
+
+```typescript
+// invoice-detail.component.ts
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { LibsUiComponentsPagesTemplateDetailV2Component } from '@libs-ui/components-pages-template-detail';
+import { IPageDetailFunctionControl, IPagesTemplateDetailConfigRight } from '@libs-ui/components-pages-template-detail';
+
+@Component({
+  selector: 'app-invoice-detail',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [LibsUiComponentsPagesTemplateDetailV2Component],
+  template: `
+    <libs_ui-components-pages_template-detail_v2
+      [configTitle]="{ config: { content: 'Hóa đơn #INV-001' } }"
+      [configRight]="configRight"
+      (outClose)="handlerClose($event)"
+      (outFunctionControl)="handlerFunctionControl($event)"
+      (outStateDisable)="handlerStateDisable($event)">
+    </libs_ui-components-pages_template-detail_v2>
+  `,
+})
+export class InvoiceDetailComponent {
+  protected configRight: IPagesTemplateDetailConfigRight[] = [
+    {
+      key: 'button',
+      configButton: {
+        label: 'Lưu',
+        type: 'button-primary',
+        action: () => this.handlerSave(),
+      },
+    },
+  ];
+
+  private functionControl?: IPageDetailFunctionControl;
+
+  protected handlerClose(event: Event): void {
+    event.stopPropagation();
+  }
+
+  protected handlerFunctionControl(control: IPageDetailFunctionControl): void {
+    this.functionControl = control;
+  }
+
+  protected handlerStateDisable(isDisabled: boolean): void {
+    // React when disable state changes
+  }
+
+  private async handlerSave(): Promise<void> {
+    // Disable all header actions while saving
+    await this.functionControl?.setStateDisable(true);
+    try {
+      // ... save API call
+    } finally {
+      await this.functionControl?.setStateDisable(false);
     }
-  ]"
-  (outClose)="onBack()">
-  <div class="p-6">
-    <!-- Nội dung chi tiết ở đây -->
-    <app-user-form></app-user-form>
-  </div>
-</libs_ui-components-pages_template-detail>
+  }
+}
 ```
 
-## API
+## @Input() — LibsUiComponentsPagesTemplateDetailV2Component
+
+| Input | Type | Default | Mô tả | Ví dụ |
+|---|---|---|---|---|
+| `[bodyConfig]` | `IPageDetailV2BodyConfig` | `{}` | Cấu hình lazy-load component vào vùng body. Khi không truyền `getComponentOutlet`, vùng body sẽ không render (dùng `ng-content` thay thế với V1). | `[bodyConfig]="{ getComponentOutlet: () => from(import('./body.component').then(m => m.BodyComponent)) }"` |
+| `[classIncludeHeader]` | `string` | `undefined` | CSS class bổ sung cho dải header. | `[classIncludeHeader]="'border-b-2 border-blue-500'"` |
+| `[configCenter]` | `IPagesTemplateDetailConfigCenter` | `undefined` | Cấu hình vùng giữa header — chỉ hiển thị khi `isSplitHeaderRatio` là `true`. | `[configCenter]="{ title: 'Tên bản ghi', classIncludeTitle: 'uppercase libs-ui-font-h4s' }"` |
+| `[configRight]` | `Array<IPagesTemplateDetailConfigRight>` | `undefined` | Danh sách control hiển thị ở bên phải header, theo thứ tự từ trái sang phải. | `[configRight]="[{ key: 'button', configButton: { label: 'Lưu', type: 'button-primary' } }]"` |
+| `[configTitle]` | `IPagesTemplateDetailConfigTitle` | `undefined` | Cấu hình vùng bên trái header: nút quay lại, tiêu đề popover, mô tả phụ, tiêu đề phụ trên cùng. | `[configTitle]="{ config: { content: 'Nguyễn Văn An' }, isShowBackToListLabel: true }"` |
+| `[disable]` | `boolean` (model — two-way) | `false` | Trạng thái disable toàn bộ action trong header. Có thể bind two-way `[(disable)]`. | `[(disable)]="isDisabled"` |
+| `[isSplitHeaderRatio]` | `boolean` | `undefined` | Khi `true`, header chia thành 3 vùng với tỉ lệ 24% — 52% — 24%; vùng giữa hiển thị `configCenter`. | `[isSplitHeaderRatio]="true"` |
+| `[zIndex]` | `number` | `1000` | Giá trị `z-index` CSS của toàn bộ component. Tự động fallback về `1000` khi truyền `undefined`. | `[zIndex]="1200"` |
 
-### libs_ui-components-pages_template-detail
+## @Input() — LibsUiComponentsPagesTemplateDetailComponent (V1, deprecated)
 
-#### Inputs
+Tương tự V2, ngoại trừ không có `bodyConfig`. V1 có thêm `[classIncludeBody]` để thêm class cho vùng body khi dùng `ng-content`.
 
-| Property               | Type                                     | Default     | Description                                        |
-| ---------------------- | ---------------------------------------- | ----------- | -------------------------------------------------- |
-| `[classIncludeBody]`   | `string`                                 | `undefined` | Custom class cho phần thân trang.                  |
-| `[classIncludeHeader]` | `string`                                 | `undefined` | Custom class cho phần header.                      |
-| `[configCenter]`       | `IPagesTemplateDetailConfigCenter`       | `undefined` | Cấu hình phần nội dung giữa header.                |
-| `[configRight]`        | `Array<IPagesTemplateDetailConfigRight>` | `undefined` | Danh sách các action group ở bên phải header.      |
-| `[configTitle]`        | `IPagesTemplateDetailConfigTitle`        | `undefined` | Cấu hình tiêu đề, mô tả và nút quay lại.           |
-| `[disable]`            | `boolean` (model)                        | `false`     | Trạng thái vô hiệu hóa toàn bộ action trên header. |
-| `[isSplitHeaderRatio]` | `boolean`                                | `false`     | Bật tỉ lệ chia header 24/52/24.                    |
-| `[zIndex]`             | `number`                                 | `1000`      | Thứ tự hiển thị lớp phủ.                           |
+| Input | Type | Default | Mô tả | Ví dụ |
+|---|---|---|---|---|
+| `[classIncludeBody]` | `string` | `undefined` | CSS class bổ sung cho vùng body (chỉ V1, dùng với ng-content). | `[classIncludeBody]="'p-[24px]'"` |
+| `[classIncludeHeader]` | `string` | `undefined` | CSS class bổ sung cho dải header. | `[classIncludeHeader]="'shadow-sm'"` |
+| `[configCenter]` | `IPagesTemplateDetailConfigCenter` | `undefined` | Cấu hình vùng giữa header. | `[configCenter]="{ title: 'Tên trang' }"` |
+| `[configRight]` | `Array<IPagesTemplateDetailConfigRight>` | `undefined` | Danh sách control phía phải header. | `[configRight]="actionList"` |
+| `[configTitle]` | `IPagesTemplateDetailConfigTitle` | `undefined` | Cấu hình vùng trái header. | `[configTitle]="{ config: { content: 'Tiêu đề' } }"` |
+| `[disable]` | `boolean` (model) | `false` | Trạng thái disable toàn bộ action. | `[(disable)]="isDisabled"` |
+| `[isSplitHeaderRatio]` | `boolean` | `undefined` | Chia header theo tỉ lệ 24/52/24. | `[isSplitHeaderRatio]="true"` |
+| `[zIndex]` | `number` | `1000` | Giá trị z-index của component. | `[zIndex]="1100"` |
 
-#### Outputs
+## @Output()
 
-| Property                            | Type                                         | Description                                          |
-| ----------------------------------- | -------------------------------------------- | ---------------------------------------------------- |
-| `(outClose)`                        | `EventEmitter<boolean>`                      | Phát ra khi người dùng click nút quay lại hoặc đóng. |
-| `(outFunctionControl)`              | `EventEmitter<IPageDetailFunctionControl>`   | Cung cấp hàm điều khiển trạng thái component.        |
-| `(outScroll)`                       | `EventEmitter<Event>`                        | Phát ra khi thực hiện cuộn trong trang.              |
-| `(outSelectedButtonDropdown)`       | `EventEmitter<IEmitSelectKey>`               | Phát ra khi chọn item từ Button Dropdown.            |
-| `(outSelectedMenuDropdown)`         | `EventEmitter<IEmitSelectKey \| undefined>`  | Phát ra khi chọn item từ Menu Dropdown.              |
-| `(outSelectedRadio)`                | `EventEmitter<IRadioEvent>`                  | Phát ra khi thay đổi giá trị Radio Group.            |
-| `(outStateDisable)`                 | `EventEmitter<boolean>`                      | Phát ra khi trạng thái disable thay đổi.             |
-| `(outTooltipButtonFunctionControl)` | `EventEmitter<IPopoverFunctionControlEvent>` | Cung cấp hàm điều khiển cho nút tooltip/popover.     |
+| Output | Type | Mô tả | Handler TS | Binding HTML |
+|---|---|---|---|---|
+| `(outClose)` | `boolean` | Phát ra `true` khi người dùng click nút quay lại (chevron icon hoặc nhãn "Quay lại danh sách"). | `handlerClose(event: Event): void { event.stopPropagation(); /* navigate back */ }` | `(outClose)="handlerClose($event)"` |
+| `(outFunctionControl)` | `IPageDetailFunctionControl` | Phát ra object chứa các hàm điều khiển component từ bên ngoài (emit một lần trong `ngOnInit`). | `handlerFunctionControl(ctrl: IPageDetailFunctionControl): void { this.control = ctrl; }` | `(outFunctionControl)="handlerFunctionControl($event)"` |
+| `(outScroll)` | `Event` | Phát ra native scroll event khi người dùng cuộn vùng body. | `handlerScroll(event: Event): void { event.stopPropagation(); /* handle scroll */ }` | `(outScroll)="handlerScroll($event)"` |
+| `(outSelectedButtonDropdown)` | `IEmitSelectKey` | Phát ra khi người dùng chọn một item từ `button-dropdown` trong `configRight`. | `handlerSelectedButtonDropdown(event: IEmitSelectKey): void { event.stopPropagation(); /* handle select */ }` | `(outSelectedButtonDropdown)="handlerSelectedButtonDropdown($event)"` |
+| `(outSelectedMenuDropdown)` | `IEmitSelectKey \| undefined` | Phát ra khi người dùng chọn một item từ `menu-dropdown` trong `configRight`. | `handlerSelectedMenuDropdown(event: IEmitSelectKey \| undefined): void { event.stopPropagation(); /* handle select */ }` | `(outSelectedMenuDropdown)="handlerSelectedMenuDropdown($event)"` |
+| `(outSelectedRadio)` | `IRadioEvent` | Phát ra khi người dùng thay đổi lựa chọn trong `radio-group` trên header. | `handlerSelectedRadio(event: IRadioEvent): void { event.stopPropagation(); /* handle change */ }` | `(outSelectedRadio)="handlerSelectedRadio($event)"` |
+| `(outStateDisable)` | `boolean` | Phát ra giá trị disable mới mỗi khi `setStateDisable()` được gọi qua FunctionControl. | `handlerStateDisable(isDisabled: boolean): void { /* react to disable change */ }` | `(outStateDisable)="handlerStateDisable($event)"` |
+| `(outTooltipButtonFunctionControl)` | `IPopoverFunctionControlEvent` | Phát ra function control của popover/tooltip gắn với `tooltip-button` trong `configRight`. | `handlerTooltipControl(event: IPopoverFunctionControlEvent): void { this.tooltipControl = event; }` | `(outTooltipButtonFunctionControl)="handlerTooltipControl($event)"` |
 
 ## Types & Interfaces
 
 ```typescript
-export interface IPagesTemplateDetailConfigTitle extends IPopover {
+import {
+  IPagesTemplateDetailConfigTitle,
+  IPagesTemplateDetailConfigRight,
+  IPagesTemplateDetailConfigCenter,
+  IPageDetailFunctionControl,
+  IPageDetailV2BodyConfig,
+  IPageDetailV2SectionData,
+} from '@libs-ui/components-pages-template-detail';
+```
+
+### IPagesTemplateDetailConfigTitle
+
+```typescript
+import { IPopover, IPopoverOverlay } from '@libs-ui/components-popover';
+
+interface IPagesTemplateDetailConfigTitle extends IPopover {
+  /** Tiêu đề phụ hiển thị dạng dải riêng phía trên header chính (chỉ V2) */
+  header?: {
+    content?: string;
+    classInclude?: string;
+  };
+  /** Ẩn nút mũi tên quay lại (chevron icon). Mặc định: false */
   ignoreButtonBack?: boolean;
+  /**
+   * Tắt escape HTML tự động cho nội dung tiêu đề.
+   * Chỉ dùng khi nội dung đã được sanitize từ nguồn tin cậy.
+   * Mặc định: false (luôn escape)
+   */
+  ignoreEscapeHtml?: boolean;
+  /** Hiển thị mũi tên (arrow begin) trước nút quay lại */
+  isShowArrowBegin?: boolean;
+  /** Hiển thị nhãn "Quay lại danh sách" dạng link button thay vì icon */
   isShowBackToListLabel?: boolean;
+  /** Cấu hình mô tả phụ hiển thị bên cạnh tiêu đề chính */
   configDescription?: {
     innerView?: string;
     config: IPopoverOverlay;
   };
 }
+```
+
+### IPagesTemplateDetailConfigRight
+
+```typescript
+import { IButton } from '@libs-ui/components-buttons-button';
+import { IButtonDropdown } from '@libs-ui/components-buttons-dropdown';
+import { IDropdown } from '@libs-ui/components-dropdown';
+import { IPopover } from '@libs-ui/components-popover';
+import { IRadioGroupItem } from '@libs-ui/components-radio-group';
+import { ISwitch } from '@libs-ui/components-switch';
+
+type ButtonKey =
+  | 'button'
+  | 'swicth'
+  | 'radio-group'
+  | 'circle-and-number'
+  | 'button-dropdown'
+  | 'menu-dropdown'
+  | 'tooltip-button'
+  | 'tooltip';
 
-export interface IPagesTemplateDetailConfigRight {
-  key: 'button' | 'swicth' | 'radio-group' | 'button-dropdown' | 'menu-dropdown' | 'tooltip-button';
+interface IPagesTemplateDetailConfigRight {
+  /** Loại control cần hiển thị */
+  key: ButtonKey;
+  /** CSS class bổ sung cho wrapper của control này */
+  classInclude?: string;
+  /** Trạng thái disable riêng cho control này (ưu tiên hơn disable toàn component) */
+  disable?: boolean;
+  /** Hiển thị loading spinner trên control */
+  isPending?: boolean;
+  /** Ẩn control này (dùng để điều kiện hiện/ẩn mà không cần unmount) */
+  ignoreShowButton?: boolean;
+  /** Cấu hình cho key: 'button' */
   configButton?: IButton;
+  /** Cấu hình cho key: 'button-dropdown' */
+  configButtonDropdown?: IButtonDropdown;
+  /** Cấu hình cho key: 'radio-group' */
+  configRadioGroup?: Array<IRadioGroupItem>;
+  /** Cấu hình cho key: 'swicth' */
   configSwicth?: ISwitch;
+  /** Cấu hình cho key: 'menu-dropdown' */
   configDropdown?: IDropdown;
-  // ...
+  /** Cấu hình cho key: 'tooltip-button' */
+  configTooltipButton?: {
+    configTooltip?: IPopover;
+    configButton?: IButton;
+  };
+}
+```
+
+### IPagesTemplateDetailConfigCenter
+
+```typescript
+import { TemplateRef } from '@angular/core';
+import { TYPE_TEMPLATE_REF } from '@libs-ui/interfaces-types';
+
+interface IPagesTemplateDetailConfigCenter {
+  /** Text tiêu đề (tự động translate và escape HTML) */
+  title?: string;
+  /** CSS class bổ sung cho phần tử tiêu đề */
+  classIncludeTitle?: string;
+  /** TemplateRef tùy chỉnh thay thế hoàn toàn vùng giữa khi cần UI phức tạp hơn */
+  template?: TemplateRef<TYPE_TEMPLATE_REF>;
 }
 ```
 
-## Công nghệ
+### IPageDetailFunctionControl
+
+```typescript
+interface IPageDetailFunctionControl {
+  /**
+   * Thay đổi trạng thái disable của toàn bộ action trong header.
+   * Gọi setStateDisable(true) trước khi submit, setStateDisable(false) sau khi hoàn thành.
+   */
+  setStateDisable: (stateDisable: boolean) => Promise<void>;
+}
+```
 
-| Technology      | Purpose                |
-| --------------- | ---------------------- |
-| Angular 18      | Framework chính        |
-| Angular Signals | Quản lý state phản ứng |
-| UI Kit          | Hệ thống design gốc    |
-| SCSS            | Styling chuyên biệt    |
+### IPageDetailV2BodyConfig (chỉ V2)
 
-## License
+```typescript
+import { WritableSignal } from '@angular/core';
+import { ISkeletonConfig } from '@libs-ui/components-skeleton';
+import { TYPE_FUNCTION } from '@libs-ui/interfaces-types';
+
+interface IPageDetailV2BodyConfig {
+  /**
+   * Hàm trả về Observable<Type> để lazy-load component vào vùng body.
+   * Nhận tham số `sectionData: IPageDetailV2SectionData` (có `disable`).
+   * Khi chưa resolve, hiển thị skeleton.
+   */
+  getComponentOutlet?: TYPE_FUNCTION<any>;
+  /**
+   * Hàm trả về Observable<Record> chứa data truyền vào component được load.
+   * Nhận tham số `sectionData: IPageDetailV2SectionData`.
+   */
+  getDataComponentOutlet?: TYPE_FUNCTION<Record<string, unknown>>;
+  /** Cấu hình skeleton hiển thị trong lúc đang lazy-load component */
+  skeletonConfig?: WritableSignal<ISkeletonConfig>;
+  /** CSS class bổ sung cho wrapper của vùng body */
+  classInclude?: string;
+}
+
+interface IPageDetailV2SectionData {
+  /** Trạng thái disable hiện tại của component — dùng để truyền xuống body component */
+  disable: boolean;
+}
+```
+
+## Lưu ý quan trọng
+
+⚠️ **V1 đã deprecated**: `LibsUiComponentsPagesTemplateDetailComponent` (selector `libs_ui-components-pages_template-detail`) không còn được duy trì. Mọi trang mới BẮT BUỘC dùng `LibsUiComponentsPagesTemplateDetailV2Component`.
+
+⚠️ **Lỗi chính tả `swicth`**: Interface dùng `configSwicth` (không phải `configSwitch`) và key `'swicth'` — đây là tên gốc trong source, cần giữ đúng chính xác khi sử dụng.
+
+⚠️ **bodyConfig chỉ hoạt động với getComponentOutlet**: Khi `bodyConfig.getComponentOutlet` không được truyền, V2 sẽ không render vùng body tự động. Cần dùng `ng-content` (chỉ V1 hỗ trợ) hoặc truyền đủ cấu hình `getComponentOutlet`.
+
+⚠️ **outFunctionControl emit một lần duy nhất**: `outFunctionControl` chỉ emit trong `ngOnInit`. Phải lưu giá trị vào biến class để dùng sau: `private functionControl?: IPageDetailFunctionControl`.
+
+⚠️ **XSS tự động**: Tiêu đề trong `configTitle.config.content` mặc định được escape HTML. Nếu cần render HTML thực (ví dụ: i18n có HTML), truyền `ignoreEscapeHtml: true` — chỉ dùng khi nguồn dữ liệu là i18n key do team kiểm soát.
+
+⚠️ **isSplitHeaderRatio + configCenter**: `configCenter` chỉ hiển thị khi `isSplitHeaderRatio` là `true`. Truyền `configCenter` mà không bật `isSplitHeaderRatio` sẽ không có effect.
+
+⚠️ **Dynamic component với V2**: Khi dùng V2 làm dynamic component trong Modal hoặc page template khác, BẮT BUỘC khai báo Generic Type rõ ràng cho `ComponentRef` và gọi `.destroy()` trong `ngOnDestroy` của component cha để tránh memory leak.
+
+## Demo
+
+```bash
+npx nx serve core-ui
+```
 
-MIT
+Truy cập: http://localhost:4500/ và tìm mục "pages-template-detail" trong menu demo.

package/fesm2022/libs-ui-components-pages-template-detail.mjs

@@ -1,6 +1,6 @@
 import { AsyncPipe, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, model, output, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, model, output, computed, Component, ChangeDetectionStrategy } from '@angular/core';
 import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
 import { LibsUiComponentsButtonsDropdownComponent } from '@libs-ui/components-buttons-dropdown';
 import { LibsUiComponentsDropdownComponent } from '@libs-ui/components-dropdown';

package/fesm2022/libs-ui-components-pages-template-detail.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"libs-ui-components-pages-template-detail.mjs","sources":["../../../../../../libs-ui/components/pages-template/detail/src/detail-v2/detail-v2.component.ts","../../../../../../libs-ui/components/pages-template/detail/src/detail-v2/detail-v2.component.html","../../../../../../libs-ui/components/pages-template/detail/src/detail.component.ts","../../../../../../libs-ui/components/pages-template/detail/src/detail.component.html","../../../../../../libs-ui/components/pages-template/detail/src/libs-ui-components-pages-template-detail.ts"],"sourcesContent":["import { AsyncPipe, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, OnInit, Signal, computed, input, model, output } from '@angular/core';\nimport { IButton, LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';\nimport { LibsUiComponentsButtonsDropdownComponent } from '@libs-ui/components-buttons-dropdown';\nimport { IDropdownFunctionControlEvent, IEmitSelectKey, LibsUiComponentsDropdownComponent } from '@libs-ui/components-dropdown';\nimport { IPopoverFunctionControlEvent, LibsUiComponentsPopoverComponent, TYPE_POPOVER_EVENT } from '@libs-ui/components-popover';\nimport { LibsUiComponentsRadioGroupComponent } from '@libs-ui/components-radio-group';\nimport { IRadioEvent } from '@libs-ui/components-radio-single';\nimport { LibsUiComponentsScrollOverlayDirective } from '@libs-ui/components-scroll-overlay';\nimport { ISkeletonConfig, LibsUiComponentsSkeletonComponent } from '@libs-ui/components-skeleton';\nimport { ISwitch, ISwitchEvent, LibsUiComponentsSwitchComponent } from '@libs-ui/components-switch';\nimport { LibsUiPipesCallFunctionInTemplatePipe } from '@libs-ui/pipes-call-function-in-template';\nimport { LibsUiPipesEscapeHtmlPipe } from '@libs-ui/pipes-escape-html';\nimport { escapeHtml, get } from '@libs-ui/utils';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { IPagesTemplateDetailConfigCenter, IPagesTemplateDetailConfigRight, IPagesTemplateDetailConfigTitle } from '../interfaces/config.interface';\nimport { IPageDetailFunctionControl } from '../interfaces/function-control.interface';\nimport { IPageDetailV2BodyConfig, IPageDetailV2SectionData } from './interfaces/detail-v2.interface';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'libs_ui-components-pages_template-detail_v2',\n  templateUrl: './detail-v2.component.html',\n  styleUrls: ['./detail-v2.component.scss'],\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    AsyncPipe,\n    NgComponentOutlet,\n    NgTemplateOutlet,\n    TranslateModule,\n    LibsUiComponentsButtonsButtonComponent,\n    LibsUiComponentsPopoverComponent,\n    LibsUiComponentsRadioGroupComponent,\n    LibsUiComponentsSwitchComponent,\n    LibsUiComponentsDropdownComponent,\n    LibsUiComponentsScrollOverlayDirective,\n    LibsUiComponentsButtonsDropdownComponent,\n    LibsUiComponentsSkeletonComponent,\n    LibsUiPipesCallFunctionInTemplatePipe,\n    LibsUiPipesEscapeHtmlPipe,\n  ],\n})\nexport class LibsUiComponentsPagesTemplateDetailV2Component implements OnInit {\n  // #region --- INPUTS (kế thừa từ V1) ---\n  readonly zIndex = input<number, number | undefined>(1000, { transform: (val) => val ?? 1000 });\n  readonly configRight = input<Array<IPagesTemplateDetailConfigRight>>();\n  readonly configTitle = input<IPagesTemplateDetailConfigTitle>();\n  readonly configCenter = input<IPagesTemplateDetailConfigCenter>();\n  readonly classIncludeHeader = input<string>();\n  readonly isSplitHeaderRatio = input<boolean>();\n  // #endregion\n\n  // #region --- INPUTS (mới trong V2) ---\n  /** Config để lazy load component vào vùng body */\n  readonly bodyConfig = input<IPageDetailV2BodyConfig, IPageDetailV2BodyConfig | undefined>({}, { transform: (v) => v || {} });\n  // #endregion\n\n  // #region --- MODELS ---\n  readonly disable = model<boolean>(false);\n  // #endregion\n\n  // #region --- OUTPUTS ---\n  readonly outScroll = output<Event>();\n  readonly outClose = output<boolean>();\n  readonly outSelectedMenuDropdown = output<IEmitSelectKey | undefined>();\n  readonly outSelectedButtonDropdown = output<IEmitSelectKey>();\n  readonly outFunctionControl = output<IPageDetailFunctionControl>();\n  readonly outSelectedRadio = output<IRadioEvent>();\n  readonly outStateDisable = output<boolean>();\n  readonly outTooltipButtonFunctionControl = output<IPopoverFunctionControlEvent>();\n  // #endregion\n\n  // #region --- INTERNAL STATE ---\n  private dropdownFunctionControl!: IDropdownFunctionControlEvent;\n  protected readonly pipeEmptyConfig = { valueIsEmpty: null } as const;\n  // #endregion\n\n  // #region --- COMPUTED ---\n  protected readonly configTitleComputed = computed(() => {\n    const config = this.configTitle()?.config;\n    if (!config) {\n      return { content: 'i18n_back_to_list' };\n    }\n    if (!config.content) {\n      config.content = 'i18n_back_to_list';\n      return config;\n    }\n    return { ...config, content: escapeHtml(config.content) };\n  });\n\n  /** Dữ liệu state truyền vào Component Outlet body */\n  protected readonly sectionData = computed<IPageDetailV2SectionData>(() => ({\n    disable: this.disable(),\n  }));\n\n  /** Skeleton config cho Body (Dùng computed để resolve default logic) */\n  protected readonly resolvedSkeletonBody: Signal<ISkeletonConfig> = computed(() => {\n    return (\n      get(this.bodyConfig, 'skeletonConfig') ?? {\n        repeat: 3,\n        styleMarginBottom: 16,\n        rows: [{ item: { classInclude: 'w-full h-[100px] rounded-[8px]' } }],\n      }\n    );\n  });\n  // #endregion\n\n  ngOnInit() {\n    this.outFunctionControl.emit(this.FunctionsControl);\n  }\n\n  // #region --- PUBLIC METHODS ---\n  public get FunctionsControl(): IPageDetailFunctionControl {\n    return {\n      setStateDisable: this.setStateDisable.bind(this),\n    };\n  }\n  // #endregion\n\n  // #region --- EVENT HANDLERS ---\n  protected handlerClickAction(event: IButton) {\n    if (event?.action) {\n      event.action();\n    }\n  }\n\n  protected async handlerSwitch(event: ISwitch, swicthEvent: ISwitchEvent) {\n    if (event?.action) {\n      await event.action(swicthEvent);\n    }\n  }\n\n  protected handlerClose(e: Event) {\n    e.stopPropagation();\n    this.outClose.emit(true);\n  }\n\n  protected handlerPopoverEvent(event: TYPE_POPOVER_EVENT) {\n    if (event !== 'click') {\n      return;\n    }\n    this.outClose.emit(true);\n  }\n\n  protected handlerSelectedKey(event?: IEmitSelectKey) {\n    this.outSelectedMenuDropdown.emit(event);\n    this.dropdownFunctionControl?.reset();\n    this.dropdownFunctionControl?.removeList();\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  protected handlerSelectedButtonDropdownItem(event: any) {\n    this.outSelectedButtonDropdown.emit(event);\n  }\n\n  protected handlerDropdownFunctionControl(event: IDropdownFunctionControlEvent) {\n    this.dropdownFunctionControl = event;\n  }\n\n  protected handlerChangeRadio(event: IRadioEvent) {\n    this.outSelectedRadio.emit(event);\n  }\n\n  protected handlerFunctionControlTooltipButton(event: IPopoverFunctionControlEvent) {\n    this.outTooltipButtonFunctionControl.emit(event);\n  }\n\n  protected handlerScroll(event: Event) {\n    this.outScroll.emit(event);\n  }\n  // #endregion\n\n  // #region --- PRIVATE LOGIC ---\n  private async setStateDisable(stateDisable: boolean) {\n    this.disable.set(stateDisable);\n    this.outStateDisable.emit(this.disable());\n  }\n  // #endregion\n}\n","<div\n  class=\"libs-ui-components-page_detail\"\n  [style.zIndex]=\"zIndex()\">\n  <!-- ===================== HEADER ===================== -->\n  <!-- Giữ nguyên hoàn toàn từ V1 -->\n  @if (configTitle()?.header?.content; as headerContent) {\n    <div class=\"libs-ui-font-h3s py-[10px] pl-[24px] libs-ui-border-bottom-general bg-white {{ configTitle()?.header?.classInclude || '' }}\">{{ headerContent | translate }}</div>\n  }\n  <div\n    [class.row]=\"!isSplitHeaderRatio()\"\n    class=\"flex items-center px-[16px] py-[8px] justify-between bg-white libs-ui-border-top-general {{ classIncludeHeader() || '' }}\">\n    <div\n      [class.columns-8]=\"!isSplitHeaderRatio()\"\n      [class.w-[24%]]=\"isSplitHeaderRatio()\">\n      <div class=\"flex items-center\">\n        @if (!configTitle()?.ignoreButtonBack) {\n          <i\n            class=\"libs-ui-icon-chevron-right rotate-[180deg] before:text-[16px] mr-[8px] cursor-pointer text-[var(--libs-ui-color-default)]\"\n            (click)=\"handlerClose($event)\"\n            (keydown.enter)=\"handlerClose($event)\"></i>\n        }\n        <div class=\"flex w-full items-center\">\n          @if (configTitle()?.isShowBackToListLabel) {\n            <libs_ui-components-buttons-button\n              [label]=\"'i18n_back_to_list'\"\n              [classLabel]=\"'lib-ui-font-h6m'\"\n              [type]=\"'button-link-primary'\"\n              [classInclude]=\"'!p-0'\"\n              (outClick)=\"handlerClose($event)\" />\n          }\n          @if (configTitle()?.config; as config) {\n            <libs_ui-components-popover\n              [config]=\"configTitleComputed()\"\n              [type]=\"'text'\"\n              [mode]=\"'hover'\"\n              [classInclude]=\"'cursor-pointer ' + (config.classInclude || 'text-[var(--libs-ui-color-default)] libs-ui-font-h6m')\"\n              [innerHtml]=\"config.content ? (!configTitle()?.ignoreEscapeHtml ? (config.content | LibsUiPipesEscapeHtmlPipe | translate) : (config.content | translate)) : '&mdash;'\"\n              (outEvent)=\"handlerPopoverEvent($event)\" />\n          }\n          @if (configTitle()?.configDescription; as configDescription) {\n            <libs_ui-components-popover\n              [config]=\"configDescription.config\"\n              [type]=\"'text'\"\n              [mode]=\"'hover'\"\n              [classInclude]=\"configDescription.config.classInclude || 'libs-ui-font-h6r text-[#6a7383]'\"\n              [innerHtml]=\"configDescription.innerView | LibsUiPipesEscapeHtmlPipe | translate\" />\n          }\n        </div>\n      </div>\n    </div>\n    @if (isSplitHeaderRatio() && configCenter(); as configCenter) {\n      <div class=\"w-[52%] flex items-center justify-center px-[48px]\">\n        @if (!configCenter.template) {\n          <libs_ui-components-popover\n            type=\"text\"\n            [config]=\"{\n              maxWidth: 250,\n              zIndex: zIndex() + 1,\n            }\"\n            [classInclude]=\"configCenter.classIncludeTitle ?? 'uppercase libs-ui-font-h4s'\"\n            [innerHtml]=\"configCenter.title ? (configCenter.title | translate | LibsUiPipesEscapeHtmlPipe) : '&mdash'\" />\n        } @else {\n          <ng-container *ngTemplateOutlet=\"configCenter.template\" />\n        }\n      </div>\n    }\n    <div\n      class=\"flex justify-end items-center\"\n      [class.columns-4]=\"!isSplitHeaderRatio()\"\n      [class.w-[24%]]=\"isSplitHeaderRatio()\">\n      @for (item of configRight(); track $index; let last = $last) {\n        <div [class.mr-[12px]]=\"!last\">\n          @if (item.key === 'button' && item.configButton; as configButton) {\n            <libs_ui-components-buttons-button\n              [label]=\"configButton.label || ''\"\n              [classLabel]=\"configButton.classLabel || ''\"\n              [type]=\"configButton.type || 'button-primary'\"\n              [classInclude]=\"configButton.classInclude || ''\"\n              [classIconLeft]=\"configButton.classIconLeft || ''\"\n              [iconOnlyType]=\"configButton.iconOnlyType || false\"\n              [classIconRight]=\"configButton.classIconRight || ''\"\n              [popover]=\"configButton.popover || {}\"\n              [disable]=\"configButton.disable || disable()\"\n              [isPending]=\"configButton.isPending || false\"\n              (outClick)=\"handlerClickAction(configButton)\" />\n          }\n          @if (item.key === 'swicth' && !item.ignoreShowButton && item.configSwicth; as configSwicth) {\n            <libs_ui-components-switch\n              [active]=\"configSwicth.active || false\"\n              [disable]=\"configSwicth.disable || disable()\"\n              (outSwitch)=\"handlerSwitch(configSwicth, $event)\" />\n          }\n          @if (item.key === 'menu-dropdown' && item.configDropdown; as configDropdown) {\n            <libs_ui-components-dropdown\n              [isNgContent]=\"true\"\n              [zIndex]=\"2004\"\n              [listConfig]=\"configDropdown.listConfig\"\n              [listHiddenInputSearch]=\"true\"\n              [popoverCustomConfig]=\"configDropdown.popoverCustomConfig\"\n              (outSelectKey)=\"handlerSelectedKey($event)\"\n              (outFunctionsControl)=\"handlerDropdownFunctionControl($event)\">\n              <libs_ui-components-buttons-button\n                [iconOnlyType]=\"true\"\n                [classIconLeft]=\"'libs-ui-icon-more-vertical text-[#333333] text-[12px] {{ configDropdown.classInclude }}'\"\n                [classInclude]=\"'p-[7px] libs-ui-border-general'\"\n                [type]=\"'button-third'\"\n                [ignoreStopPropagationEvent]=\"true\" />\n            </libs_ui-components-dropdown>\n          }\n          @if (item.key === 'button-dropdown' && item.configButtonDropdown; as configDropdown) {\n            <libs_ui-components-buttons-dropdown\n              [applyNow]=\"true\"\n              [label]=\"item.configButtonDropdown.label || ' '\"\n              [classIconRight]=\"item.configButtonDropdown.classIconRight || ' '\"\n              [classIconLeft]=\"item.configButtonDropdown.classIconLeft || ' '\"\n              [typeButton]=\"item.configButtonDropdown.type || 'button-secondary'\"\n              [items]=\"item.configButtonDropdown.items || []\"\n              [fieldDisplay]=\"item.configButtonDropdown.fieldDisplay\"\n              [popupConfig]=\"item.configButtonDropdown.popupConfig || { width: 205, maxWidth: 408, maxHeight: 48, zIndex: 100, direction: 'bottom' }\"\n              (outSelectItem)=\"handlerSelectedButtonDropdownItem($event)\" />\n          }\n          @if (item.key === 'radio-group' && item.configRadioGroup; as configRadioGroup) {\n            <libs_ui-components-radio-group\n              [groups]=\"configRadioGroup\"\n              [horizontal]=\"true\"\n              [typeRadio]=\"'medium'\"\n              [ignoreClassMarginLastItem]=\"true\"\n              (outChange)=\"handlerChangeRadio($event)\" />\n          }\n          @if (item.key === 'tooltip-button' && item.configTooltipButton; as configTooltipButton) {\n            <libs_ui-components-popover\n              [type]=\"configTooltipButton.configTooltip?.type || 'other'\"\n              [config]=\"configTooltipButton.configTooltip?.config\">\n              <libs_ui-components-buttons-button\n                [type]=\"configTooltipButton.configButton?.type || 'button-third'\"\n                [classIconLeft]=\"configTooltipButton.configButton?.classIconLeft || 'libs-ui-icon-more-vertical rotate-[90deg] mr-0'\"\n                [label]=\"configTooltipButton.configButton?.label || ''\"\n                [iconOnlyType]=\"configTooltipButton.configButton?.iconOnlyType ?? false\"\n                [popover]=\"configTooltipButton.configButton?.popover || {}\"\n                (outFunctionsControl)=\"handlerFunctionControlTooltipButton($event)\"\n                [ignoreStopPropagationEvent]=\"true\"\n                [disable]=\"configTooltipButton.configButton?.disable ?? false\" />\n            </libs_ui-components-popover>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- ===================== BODY ===================== -->\n  @if (bodyConfig().getComponentOutlet; as getBodyComponentOutlet) {\n    <!-- Lazy load mode: Hiển thị skeleton khi đang load, sau đó render component -->\n    <div\n      class=\"libs-ui-components-page_detail-body {{ bodyConfig().classInclude || '' }}\"\n      LibsUiComponentsScrollOverlayDirective\n      (outScroll)=\"handlerScroll($event)\">\n      @let constHtmlCompBody = undefined | LibsUiPipesCallFunctionInTemplatePipe: getBodyComponentOutlet : sectionData() : null : pipeEmptyConfig | async;\n      @let constHtmlInputsBody = undefined | LibsUiPipesCallFunctionInTemplatePipe: bodyConfig().getDataComponentOutlet : sectionData() : null : pipeEmptyConfig | async;\n      @if (constHtmlCompBody) {\n        <ng-container *ngComponentOutlet=\"constHtmlCompBody; inputs: constHtmlInputsBody\" />\n      } @else {\n        <libs_ui-components-skeleton [config]=\"resolvedSkeletonBody()\" />\n      }\n    </div>\n  }\n</div>\n","import { NgTemplateOutlet } from '@angular/common';\nimport { Component, computed, input, model, OnInit, output } from '@angular/core';\nimport { IButton, LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';\nimport { LibsUiComponentsButtonsDropdownComponent } from '@libs-ui/components-buttons-dropdown';\nimport { IDropdownFunctionControlEvent, IEmitSelectKey, LibsUiComponentsDropdownComponent } from '@libs-ui/components-dropdown';\nimport { IPopoverFunctionControlEvent, LibsUiComponentsPopoverComponent, TYPE_POPOVER_EVENT } from '@libs-ui/components-popover';\nimport { LibsUiComponentsRadioGroupComponent } from '@libs-ui/components-radio-group';\nimport { IRadioEvent } from '@libs-ui/components-radio-single';\nimport { LibsUiComponentsScrollOverlayDirective } from '@libs-ui/components-scroll-overlay';\nimport { ISwitch, ISwitchEvent, LibsUiComponentsSwitchComponent } from '@libs-ui/components-switch';\nimport { LibsUiPipesEscapeHtmlPipe } from '@libs-ui/pipes-escape-html';\nimport { escapeHtml } from '@libs-ui/utils';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { IPagesTemplateDetailConfigCenter, IPagesTemplateDetailConfigRight, IPagesTemplateDetailConfigTitle } from './interfaces/config.interface';\nimport { IPageDetailFunctionControl } from './interfaces/function-control.interface';\n/**\n * @deprecated Use {@link LibsUiComponentsPagesTemplateDetailV2Component} instead.\n */\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'libs_ui-components-pages_template-detail',\n  templateUrl: './detail.component.html',\n  styleUrls: ['./detail.component.scss'],\n  standalone: true,\n  imports: [\n    TranslateModule,\n    NgTemplateOutlet,\n    LibsUiComponentsButtonsButtonComponent,\n    LibsUiComponentsPopoverComponent,\n    LibsUiComponentsRadioGroupComponent,\n    LibsUiComponentsSwitchComponent,\n    LibsUiComponentsDropdownComponent,\n    LibsUiComponentsScrollOverlayDirective,\n    LibsUiComponentsButtonsDropdownComponent,\n    LibsUiPipesEscapeHtmlPipe,\n  ],\n})\nexport class LibsUiComponentsPagesTemplateDetailComponent implements OnInit {\n  private dropdownFunctionControl!: IDropdownFunctionControlEvent;\n  protected configTitleComputed = computed(() => {\n    const config = this.configTitle()?.config;\n    if (!config) {\n      return { content: 'i18n_back_to_list' };\n    }\n\n    if (!config.content) {\n      config.content = 'i18n_back_to_list';\n      return config;\n    }\n\n    return { ...config, content: escapeHtml(config.content) };\n  });\n\n  readonly zIndex = input<number, number | undefined>(1000, { transform: (val) => val ?? 1000 });\n  readonly configRight = input<Array<IPagesTemplateDetailConfigRight>>();\n  readonly configTitle = input<IPagesTemplateDetailConfigTitle>();\n  readonly configCenter = input<IPagesTemplateDetailConfigCenter>();\n  readonly classIncludeHeader = input<string>();\n  readonly classIncludeBody = input<string>();\n  readonly disable = model<boolean>(false);\n  readonly isSplitHeaderRatio = input<boolean>(); // dùng khi muốn chia header làm 3 phần theo tỉ lệ 24 52 24\n\n  readonly outScroll = output<Event>();\n  readonly outClose = output<boolean>();\n  readonly outSelectedMenuDropdown = output<IEmitSelectKey | undefined>();\n  readonly outSelectedButtonDropdown = output<IEmitSelectKey>();\n  readonly outFunctionControl = output<IPageDetailFunctionControl>();\n  readonly outSelectedRadio = output<IRadioEvent>();\n  readonly outStateDisable = output<boolean>();\n  readonly outTooltipButtonFunctionControl = output<IPopoverFunctionControlEvent>();\n\n  ngOnInit() {\n    this.outFunctionControl.emit(this.FunctionsControl);\n  }\n\n  public get FunctionsControl(): IPageDetailFunctionControl {\n    return {\n      setStateDisable: this.setStateDisable.bind(this),\n    };\n  }\n\n  protected handlerClickAction(event: IButton) {\n    if (event?.action) {\n      event.action();\n    }\n  }\n\n  protected async handlerSwitch(event: ISwitch, swicthEvent: ISwitchEvent) {\n    if (event?.action) {\n      await event.action(swicthEvent);\n    }\n  }\n\n  protected handlerClose(e: Event) {\n    e.stopPropagation();\n    this.outClose.emit(true);\n  }\n\n  protected handlerPopoverEvent(event: TYPE_POPOVER_EVENT) {\n    if (event !== 'click') {\n      return;\n    }\n    this.outClose.emit(true);\n  }\n\n  protected handlerSelectedKey(event?: IEmitSelectKey) {\n    this.outSelectedMenuDropdown.emit(event);\n    this.dropdownFunctionControl?.reset(); //lỗi chọn lần 2 (chưa reset thì keySelected chưa reset nên không chọn tiếp vào lựa chọn cũ)\n    this.dropdownFunctionControl?.removeList();\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  protected handlerSelectedButtonDropdownItem(event: any) {\n    this.outSelectedButtonDropdown.emit(event);\n  }\n\n  protected handlerDropdownFunctionControl(event: IDropdownFunctionControlEvent) {\n    this.dropdownFunctionControl = event;\n  }\n\n  private async setStateDisable(stateDisable: boolean) {\n    this.disable.set(stateDisable);\n    this.outStateDisable.emit(this.disable());\n  }\n\n  protected handlerChangeRadio(event: IRadioEvent) {\n    this.outSelectedRadio.emit(event);\n  }\n\n  protected handlerFunctionControlTooltipButton(event: IPopoverFunctionControlEvent) {\n    this.outTooltipButtonFunctionControl.emit(event);\n  }\n\n  protected handlerScroll(event: Event) {\n    this.outScroll.emit(event);\n  }\n}\n","<div\n  class=\"libs-ui-components-page_detail\"\n  [style.zIndex]=\"zIndex()\">\n  <div\n    [class.row]=\"!isSplitHeaderRatio()\"\n    class=\"flex items-center px-[16px] py-[8px] justify-between bg-white libs-ui-border-top-general {{ classIncludeHeader() || '' }}\">\n    <div\n      [class.columns-8]=\"!isSplitHeaderRatio()\"\n      [class.w-[24%]]=\"isSplitHeaderRatio()\">\n      <div class=\"flex items-center\">\n        @if (!configTitle()?.ignoreButtonBack) {\n          <i\n            class=\"libs-ui-icon-chevron-right rotate-[180deg] before:text-[16px] mr-[8px] cursor-pointer text-[var(--libs-ui-color-default)]\"\n            (click)=\"handlerClose($event)\"\n            (keydown.enter)=\"handlerClose($event)\"></i>\n        }\n        <div class=\"flex w-full items-center\">\n          @if (configTitle()?.isShowBackToListLabel) {\n            <libs_ui-components-buttons-button\n              [label]=\"'i18n_back_to_list'\"\n              [classLabel]=\"'lib-ui-font-h6m'\"\n              [type]=\"'button-link-primary'\"\n              [classInclude]=\"'!p-0'\"\n              (outClick)=\"handlerClose($event)\" />\n          }\n          @if (configTitle()?.config; as config) {\n            <libs_ui-components-popover\n              [config]=\"configTitleComputed()\"\n              [type]=\"'text'\"\n              [mode]=\"'hover'\"\n              [classInclude]=\"'cursor-pointer ' + (config.classInclude || 'text-[var(--libs-ui-color-default)] libs-ui-font-h6m')\"\n              [innerHtml]=\"config.content ? (!configTitle()?.ignoreEscapeHtml ? (config.content | LibsUiPipesEscapeHtmlPipe | translate) : (config.content | translate)) : '&mdash;'\"\n              (outEvent)=\"handlerPopoverEvent($event)\" />\n          }\n          @if (configTitle()?.configDescription; as configDescription) {\n            <libs_ui-components-popover\n              [config]=\"configDescription.config\"\n              [type]=\"'text'\"\n              [mode]=\"'hover'\"\n              [classInclude]=\"configDescription.config.classInclude || 'libs-ui-font-h6r text-[#6a7383]'\"\n              [innerHtml]=\"configDescription.innerView | LibsUiPipesEscapeHtmlPipe | translate\" />\n          }\n        </div>\n      </div>\n    </div>\n    @if (isSplitHeaderRatio() && configCenter(); as configCenter) {\n      <div class=\"w-[52%] flex items-center justify-center px-[48px]\">\n        @if (!configCenter.template) {\n          <libs_ui-components-popover\n            type=\"text\"\n            [config]=\"{\n              maxWidth: 250,\n              zIndex: zIndex() + 1,\n            }\"\n            [classInclude]=\"configCenter.classIncludeTitle ?? 'uppercase libs-ui-font-h4s'\"\n            [innerHtml]=\"configCenter.title ? (configCenter.title | translate | LibsUiPipesEscapeHtmlPipe) : '&mdash'\" />\n        } @else {\n          <ng-container *ngTemplateOutlet=\"configCenter.template\" />\n        }\n      </div>\n    }\n    <div\n      class=\"flex justify-end items-center\"\n      [class.columns-4]=\"!isSplitHeaderRatio()\"\n      [class.w-[24%]]=\"isSplitHeaderRatio()\">\n      @for (item of configRight(); track $index; let last = $last) {\n        <div [class.mr-[12px]]=\"!last\">\n          @if (item.key === 'button' && item.configButton; as configButton) {\n            <libs_ui-components-buttons-button\n              [label]=\"configButton.label || ''\"\n              [classLabel]=\"configButton.classLabel || ''\"\n              [type]=\"configButton.type || 'button-primary'\"\n              [classInclude]=\"configButton.classInclude || ''\"\n              [classIconLeft]=\"configButton.classIconLeft || ''\"\n              [iconOnlyType]=\"configButton.iconOnlyType || false\"\n              [classIconRight]=\"configButton.classIconRight || ''\"\n              [popover]=\"configButton.popover || {}\"\n              [disable]=\"configButton.disable || disable()\"\n              [isPending]=\"configButton.isPending || false\"\n              (outClick)=\"handlerClickAction(configButton)\" />\n          }\n          @if (item.key === 'swicth' && !item.ignoreShowButton && item.configSwicth; as configSwicth) {\n            <libs_ui-components-switch\n              [active]=\"configSwicth.active || false\"\n              [disable]=\"configSwicth.disable || disable()\"\n              (outSwitch)=\"handlerSwitch(configSwicth, $event)\" />\n          }\n          @if (item.key === 'menu-dropdown' && item.configDropdown; as configDropdown) {\n            <libs_ui-components-dropdown\n              [isNgContent]=\"true\"\n              [zIndex]=\"2004\"\n              [listConfig]=\"configDropdown.listConfig\"\n              [listHiddenInputSearch]=\"true\"\n              [popoverCustomConfig]=\"configDropdown.popoverCustomConfig\"\n              (outSelectKey)=\"handlerSelectedKey($event)\"\n              (outFunctionsControl)=\"handlerDropdownFunctionControl($event)\">\n              <libs_ui-components-buttons-button\n                [iconOnlyType]=\"true\"\n                [classIconLeft]=\"'libs-ui-icon-more-vertical text-[#333333] text-[12px] {{ configDropdown.classInclude }}'\"\n                [classInclude]=\"'p-[7px] libs-ui-border-general'\"\n                [type]=\"'button-third'\"\n                [ignoreStopPropagationEvent]=\"true\" />\n            </libs_ui-components-dropdown>\n          }\n          @if (item.key === 'button-dropdown' && item.configButtonDropdown; as configDropdown) {\n            <libs_ui-components-buttons-dropdown\n              [applyNow]=\"true\"\n              [label]=\"item.configButtonDropdown.label || ' '\"\n              [classIconRight]=\"item.configButtonDropdown.classIconRight || ' '\"\n              [classIconLeft]=\"item.configButtonDropdown.classIconLeft || ' '\"\n              [typeButton]=\"item.configButtonDropdown.type || 'button-secondary'\"\n              [items]=\"item.configButtonDropdown.items || []\"\n              [fieldDisplay]=\"item.configButtonDropdown.fieldDisplay\"\n              [popupConfig]=\"item.configButtonDropdown.popupConfig || { width: 205, maxWidth: 408, maxHeight: 48, zIndex: 100, direction: 'bottom' }\"\n              (outSelectItem)=\"handlerSelectedButtonDropdownItem($event)\" />\n          }\n\n          @if (item.key === 'radio-group' && item.configRadioGroup; as configRadioGroup) {\n            <libs_ui-components-radio-group\n              [groups]=\"configRadioGroup\"\n              [horizontal]=\"true\"\n              [typeRadio]=\"'medium'\"\n              [ignoreClassMarginLastItem]=\"true\"\n              (outChange)=\"handlerChangeRadio($event)\" />\n          }\n\n          @if (item.key === 'tooltip-button' && item.configTooltipButton; as configTooltipButton) {\n            <libs_ui-components-popover\n              [type]=\"configTooltipButton.configTooltip?.type || 'other'\"\n              [config]=\"configTooltipButton.configTooltip?.config\">\n              <libs_ui-components-buttons-button\n                [type]=\"configTooltipButton.configButton?.type || 'button-third'\"\n                [classIconLeft]=\"configTooltipButton.configButton?.classIconLeft || 'libs-ui-icon-more-vertical rotate-[90deg] mr-0'\"\n                [label]=\"configTooltipButton.configButton?.label || ''\"\n                [iconOnlyType]=\"configTooltipButton.configButton?.iconOnlyType ?? false\"\n                [popover]=\"configTooltipButton.configButton?.popover || {}\"\n                (outFunctionsControl)=\"handlerFunctionControlTooltipButton($event)\"\n                [ignoreStopPropagationEvent]=\"true\"\n                [disable]=\"configTooltipButton.configButton?.disable ?? false\" />\n            </libs_ui-components-popover>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <div\n    class=\"libs-ui-components-page_detail-body {{ classIncludeBody() }}\"\n    LibsUiComponentsScrollOverlayDirective\n    (outScroll)=\"handlerScroll($event)\">\n    <ng-content></ng-content>\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"libs-ui-components-pages-template-detail.mjs","sources":["../../../../../../libs-ui/components/pages-template/detail/src/detail-v2/detail-v2.component.ts","../../../../../../libs-ui/components/pages-template/detail/src/detail-v2/detail-v2.component.html","../../../../../../libs-ui/components/pages-template/detail/src/detail.component.ts","../../../../../../libs-ui/components/pages-template/detail/src/detail.component.html","../../../../../../libs-ui/components/pages-template/detail/src/libs-ui-components-pages-template-detail.ts"],"sourcesContent":["import { AsyncPipe, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, OnInit, Signal, computed, input, model, output } from '@angular/core';\nimport { IButton, LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';\nimport { LibsUiComponentsButtonsDropdownComponent } from '@libs-ui/components-buttons-dropdown';\nimport { IDropdownFunctionControlEvent, IEmitSelectKey, LibsUiComponentsDropdownComponent } from '@libs-ui/components-dropdown';\nimport { IPopoverFunctionControlEvent, LibsUiComponentsPopoverComponent, TYPE_POPOVER_EVENT } from '@libs-ui/components-popover';\nimport { LibsUiComponentsRadioGroupComponent } from '@libs-ui/components-radio-group';\nimport { IRadioEvent } from '@libs-ui/components-radio-single';\nimport { LibsUiComponentsScrollOverlayDirective } from '@libs-ui/components-scroll-overlay';\nimport { ISkeletonConfig, LibsUiComponentsSkeletonComponent } from '@libs-ui/components-skeleton';\nimport { ISwitch, ISwitchEvent, LibsUiComponentsSwitchComponent } from '@libs-ui/components-switch';\nimport { LibsUiPipesCallFunctionInTemplatePipe } from '@libs-ui/pipes-call-function-in-template';\nimport { LibsUiPipesEscapeHtmlPipe } from '@libs-ui/pipes-escape-html';\nimport { escapeHtml, get } from '@libs-ui/utils';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { IPagesTemplateDetailConfigCenter, IPagesTemplateDetailConfigRight, IPagesTemplateDetailConfigTitle } from '../interfaces/config.interface';\nimport { IPageDetailFunctionControl } from '../interfaces/function-control.interface';\nimport { IPageDetailV2BodyConfig, IPageDetailV2SectionData } from './interfaces/detail-v2.interface';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'libs_ui-components-pages_template-detail_v2',\n  templateUrl: './detail-v2.component.html',\n  styleUrls: ['./detail-v2.component.scss'],\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    AsyncPipe,\n    NgComponentOutlet,\n    NgTemplateOutlet,\n    TranslateModule,\n    LibsUiComponentsButtonsButtonComponent,\n    LibsUiComponentsPopoverComponent,\n    LibsUiComponentsRadioGroupComponent,\n    LibsUiComponentsSwitchComponent,\n    LibsUiComponentsDropdownComponent,\n    LibsUiComponentsScrollOverlayDirective,\n    LibsUiComponentsButtonsDropdownComponent,\n    LibsUiComponentsSkeletonComponent,\n    LibsUiPipesCallFunctionInTemplatePipe,\n    LibsUiPipesEscapeHtmlPipe,\n  ],\n})\nexport class LibsUiComponentsPagesTemplateDetailV2Component implements OnInit {\n  // #region --- INPUTS (kế thừa từ V1) ---\n  readonly zIndex = input<number, number | undefined>(1000, { transform: (val) => val ?? 1000 });\n  readonly configRight = input<Array<IPagesTemplateDetailConfigRight>>();\n  readonly configTitle = input<IPagesTemplateDetailConfigTitle>();\n  readonly configCenter = input<IPagesTemplateDetailConfigCenter>();\n  readonly classIncludeHeader = input<string>();\n  readonly isSplitHeaderRatio = input<boolean>();\n  // #endregion\n\n  // #region --- INPUTS (mới trong V2) ---\n  /** Config để lazy load component vào vùng body */\n  readonly bodyConfig = input<IPageDetailV2BodyConfig, IPageDetailV2BodyConfig | undefined>({}, { transform: (v) => v || {} });\n  // #endregion\n\n  // #region --- MODELS ---\n  readonly disable = model<boolean>(false);\n  // #endregion\n\n  // #region --- OUTPUTS ---\n  readonly outScroll = output<Event>();\n  readonly outClose = output<boolean>();\n  readonly outSelectedMenuDropdown = output<IEmitSelectKey | undefined>();\n  readonly outSelectedButtonDropdown = output<IEmitSelectKey>();\n  readonly outFunctionControl = output<IPageDetailFunctionControl>();\n  readonly outSelectedRadio = output<IRadioEvent>();\n  readonly outStateDisable = output<boolean>();\n  readonly outTooltipButtonFunctionControl = output<IPopoverFunctionControlEvent>();\n  // #endregion\n\n  // #region --- INTERNAL STATE ---\n  private dropdownFunctionControl!: IDropdownFunctionControlEvent;\n  protected readonly pipeEmptyConfig = { valueIsEmpty: null } as const;\n  // #endregion\n\n  // #region --- COMPUTED ---\n  protected readonly configTitleComputed = computed(() => {\n    const config = this.configTitle()?.config;\n    if (!config) {\n      return { content: 'i18n_back_to_list' };\n    }\n    if (!config.content) {\n      config.content = 'i18n_back_to_list';\n      return config;\n    }\n    return { ...config, content: escapeHtml(config.content) };\n  });\n\n  /** Dữ liệu state truyền vào Component Outlet body */\n  protected readonly sectionData = computed<IPageDetailV2SectionData>(() => ({\n    disable: this.disable(),\n  }));\n\n  /** Skeleton config cho Body (Dùng computed để resolve default logic) */\n  protected readonly resolvedSkeletonBody: Signal<ISkeletonConfig> = computed(() => {\n    return (\n      get(this.bodyConfig, 'skeletonConfig') ?? {\n        repeat: 3,\n        styleMarginBottom: 16,\n        rows: [{ item: { classInclude: 'w-full h-[100px] rounded-[8px]' } }],\n      }\n    );\n  });\n  // #endregion\n\n  ngOnInit() {\n    this.outFunctionControl.emit(this.FunctionsControl);\n  }\n\n  // #region --- PUBLIC METHODS ---\n  public get FunctionsControl(): IPageDetailFunctionControl {\n    return {\n      setStateDisable: this.setStateDisable.bind(this),\n    };\n  }\n  // #endregion\n\n  // #region --- EVENT HANDLERS ---\n  protected handlerClickAction(event: IButton) {\n    if (event?.action) {\n      event.action();\n    }\n  }\n\n  protected async handlerSwitch(event: ISwitch, swicthEvent: ISwitchEvent) {\n    if (event?.action) {\n      await event.action(swicthEvent);\n    }\n  }\n\n  protected handlerClose(e: Event) {\n    e.stopPropagation();\n    this.outClose.emit(true);\n  }\n\n  protected handlerPopoverEvent(event: TYPE_POPOVER_EVENT) {\n    if (event !== 'click') {\n      return;\n    }\n    this.outClose.emit(true);\n  }\n\n  protected handlerSelectedKey(event?: IEmitSelectKey) {\n    this.outSelectedMenuDropdown.emit(event);\n    this.dropdownFunctionControl?.reset();\n    this.dropdownFunctionControl?.removeList();\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  protected handlerSelectedButtonDropdownItem(event: any) {\n    this.outSelectedButtonDropdown.emit(event);\n  }\n\n  protected handlerDropdownFunctionControl(event: IDropdownFunctionControlEvent) {\n    this.dropdownFunctionControl = event;\n  }\n\n  protected handlerChangeRadio(event: IRadioEvent) {\n    this.outSelectedRadio.emit(event);\n  }\n\n  protected handlerFunctionControlTooltipButton(event: IPopoverFunctionControlEvent) {\n    this.outTooltipButtonFunctionControl.emit(event);\n  }\n\n  protected handlerScroll(event: Event) {\n    this.outScroll.emit(event);\n  }\n  // #endregion\n\n  // #region --- PRIVATE LOGIC ---\n  private async setStateDisable(stateDisable: boolean) {\n    this.disable.set(stateDisable);\n    this.outStateDisable.emit(this.disable());\n  }\n  // #endregion\n}\n","<div\n  class=\"libs-ui-components-page_detail\"\n  [style.zIndex]=\"zIndex()\">\n  <!-- ===================== HEADER ===================== -->\n  <!-- Giữ nguyên hoàn toàn từ V1 -->\n  @if (configTitle()?.header?.content; as headerContent) {\n    <div class=\"libs-ui-font-h3s py-[10px] pl-[24px] libs-ui-border-bottom-general bg-white {{ configTitle()?.header?.classInclude || '' }}\">{{ headerContent | translate }}</div>\n  }\n  <div\n    [class.row]=\"!isSplitHeaderRatio()\"\n    class=\"flex items-center px-[16px] py-[8px] justify-between bg-white libs-ui-border-top-general {{ classIncludeHeader() || '' }}\">\n    <div\n      [class.columns-8]=\"!isSplitHeaderRatio()\"\n      [class.w-[24%]]=\"isSplitHeaderRatio()\">\n      <div class=\"flex items-center\">\n        @if (!configTitle()?.ignoreButtonBack) {\n          <i\n            class=\"libs-ui-icon-chevron-right rotate-[180deg] before:text-[16px] mr-[8px] cursor-pointer text-[var(--libs-ui-color-default)]\"\n            (click)=\"handlerClose($event)\"\n            (keydown.enter)=\"handlerClose($event)\"></i>\n        }\n        <div class=\"flex w-full items-center\">\n          @if (configTitle()?.isShowBackToListLabel) {\n            <libs_ui-components-buttons-button\n              [label]=\"'i18n_back_to_list'\"\n              [classLabel]=\"'lib-ui-font-h6m'\"\n              [type]=\"'button-link-primary'\"\n              [classInclude]=\"'!p-0'\"\n              (outClick)=\"handlerClose($event)\" />\n          }\n          @if (configTitle()?.config; as config) {\n            <libs_ui-components-popover\n              [config]=\"configTitleComputed()\"\n              [type]=\"'text'\"\n              [mode]=\"'hover'\"\n              [classInclude]=\"'cursor-pointer ' + (config.classInclude || 'text-[var(--libs-ui-color-default)] libs-ui-font-h6m')\"\n              [innerHtml]=\"config.content ? (!configTitle()?.ignoreEscapeHtml ? (config.content | LibsUiPipesEscapeHtmlPipe | translate) : (config.content | translate)) : '&mdash;'\"\n              (outEvent)=\"handlerPopoverEvent($event)\" />\n          }\n          @if (configTitle()?.configDescription; as configDescription) {\n            <libs_ui-components-popover\n              [config]=\"configDescription.config\"\n              [type]=\"'text'\"\n              [mode]=\"'hover'\"\n              [classInclude]=\"configDescription.config.classInclude || 'libs-ui-font-h6r text-[#6a7383]'\"\n              [innerHtml]=\"configDescription.innerView | LibsUiPipesEscapeHtmlPipe | translate\" />\n          }\n        </div>\n      </div>\n    </div>\n    @if (isSplitHeaderRatio() && configCenter(); as configCenter) {\n      <div class=\"w-[52%] flex items-center justify-center px-[48px]\">\n        @if (!configCenter.template) {\n          <libs_ui-components-popover\n            type=\"text\"\n            [config]=\"{\n              maxWidth: 250,\n              zIndex: zIndex() + 1,\n            }\"\n            [classInclude]=\"configCenter.classIncludeTitle ?? 'uppercase libs-ui-font-h4s'\"\n            [innerHtml]=\"configCenter.title ? (configCenter.title | translate | LibsUiPipesEscapeHtmlPipe) : '&mdash'\" />\n        } @else {\n          <ng-container *ngTemplateOutlet=\"configCenter.template\" />\n        }\n      </div>\n    }\n    <div\n      class=\"flex justify-end items-center\"\n      [class.columns-4]=\"!isSplitHeaderRatio()\"\n      [class.w-[24%]]=\"isSplitHeaderRatio()\">\n      @for (item of configRight(); track $index; let last = $last) {\n        <div [class.mr-[12px]]=\"!last\">\n          @if (item.key === 'button' && item.configButton; as configButton) {\n            <libs_ui-components-buttons-button\n              [label]=\"configButton.label || ''\"\n              [classLabel]=\"configButton.classLabel || ''\"\n              [type]=\"configButton.type || 'button-primary'\"\n              [classInclude]=\"configButton.classInclude || ''\"\n              [classIconLeft]=\"configButton.classIconLeft || ''\"\n              [iconOnlyType]=\"configButton.iconOnlyType || false\"\n              [classIconRight]=\"configButton.classIconRight || ''\"\n              [popover]=\"configButton.popover || {}\"\n              [disable]=\"configButton.disable || disable()\"\n              [isPending]=\"configButton.isPending || false\"\n              (outClick)=\"handlerClickAction(configButton)\" />\n          }\n          @if (item.key === 'swicth' && !item.ignoreShowButton && item.configSwicth; as configSwicth) {\n            <libs_ui-components-switch\n              [active]=\"configSwicth.active || false\"\n              [disable]=\"configSwicth.disable || disable()\"\n              (outSwitch)=\"handlerSwitch(configSwicth, $event)\" />\n          }\n          @if (item.key === 'menu-dropdown' && item.configDropdown; as configDropdown) {\n            <libs_ui-components-dropdown\n              [isNgContent]=\"true\"\n              [zIndex]=\"2004\"\n              [listConfig]=\"configDropdown.listConfig\"\n              [listHiddenInputSearch]=\"true\"\n              [popoverCustomConfig]=\"configDropdown.popoverCustomConfig\"\n              (outSelectKey)=\"handlerSelectedKey($event)\"\n              (outFunctionsControl)=\"handlerDropdownFunctionControl($event)\">\n              <libs_ui-components-buttons-button\n                [iconOnlyType]=\"true\"\n                [classIconLeft]=\"'libs-ui-icon-more-vertical text-[#333333] text-[12px] {{ configDropdown.classInclude }}'\"\n                [classInclude]=\"'p-[7px] libs-ui-border-general'\"\n                [type]=\"'button-third'\"\n                [ignoreStopPropagationEvent]=\"true\" />\n            </libs_ui-components-dropdown>\n          }\n          @if (item.key === 'button-dropdown' && item.configButtonDropdown; as configDropdown) {\n            <libs_ui-components-buttons-dropdown\n              [applyNow]=\"true\"\n              [label]=\"item.configButtonDropdown.label || ' '\"\n              [classIconRight]=\"item.configButtonDropdown.classIconRight || ' '\"\n              [classIconLeft]=\"item.configButtonDropdown.classIconLeft || ' '\"\n              [typeButton]=\"item.configButtonDropdown.type || 'button-secondary'\"\n              [items]=\"item.configButtonDropdown.items || []\"\n              [fieldDisplay]=\"item.configButtonDropdown.fieldDisplay\"\n              [popupConfig]=\"item.configButtonDropdown.popupConfig || { width: 205, maxWidth: 408, maxHeight: 48, zIndex: 100, direction: 'bottom' }\"\n              (outSelectItem)=\"handlerSelectedButtonDropdownItem($event)\" />\n          }\n          @if (item.key === 'radio-group' && item.configRadioGroup; as configRadioGroup) {\n            <libs_ui-components-radio-group\n              [groups]=\"configRadioGroup\"\n              [horizontal]=\"true\"\n              [typeRadio]=\"'medium'\"\n              [ignoreClassMarginLastItem]=\"true\"\n              (outChange)=\"handlerChangeRadio($event)\" />\n          }\n          @if (item.key === 'tooltip-button' && item.configTooltipButton; as configTooltipButton) {\n            <libs_ui-components-popover\n              [type]=\"configTooltipButton.configTooltip?.type || 'other'\"\n              [config]=\"configTooltipButton.configTooltip?.config\">\n              <libs_ui-components-buttons-button\n                [type]=\"configTooltipButton.configButton?.type || 'button-third'\"\n                [classIconLeft]=\"configTooltipButton.configButton?.classIconLeft || 'libs-ui-icon-more-vertical rotate-[90deg] mr-0'\"\n                [label]=\"configTooltipButton.configButton?.label || ''\"\n                [iconOnlyType]=\"configTooltipButton.configButton?.iconOnlyType ?? false\"\n                [popover]=\"configTooltipButton.configButton?.popover || {}\"\n                (outFunctionsControl)=\"handlerFunctionControlTooltipButton($event)\"\n                [ignoreStopPropagationEvent]=\"true\"\n                [disable]=\"configTooltipButton.configButton?.disable ?? false\" />\n            </libs_ui-components-popover>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- ===================== BODY ===================== -->\n  @if (bodyConfig().getComponentOutlet; as getBodyComponentOutlet) {\n    <!-- Lazy load mode: Hiển thị skeleton khi đang load, sau đó render component -->\n    <div\n      class=\"libs-ui-components-page_detail-body {{ bodyConfig().classInclude || '' }}\"\n      LibsUiComponentsScrollOverlayDirective\n      (outScroll)=\"handlerScroll($event)\">\n      @let constHtmlCompBody = undefined | LibsUiPipesCallFunctionInTemplatePipe: getBodyComponentOutlet : sectionData() : null : pipeEmptyConfig | async;\n      @let constHtmlInputsBody = undefined | LibsUiPipesCallFunctionInTemplatePipe: bodyConfig().getDataComponentOutlet : sectionData() : null : pipeEmptyConfig | async;\n      @if (constHtmlCompBody) {\n        <ng-container *ngComponentOutlet=\"constHtmlCompBody; inputs: constHtmlInputsBody\" />\n      } @else {\n        <libs_ui-components-skeleton [config]=\"resolvedSkeletonBody()\" />\n      }\n    </div>\n  }\n</div>\n","import { NgTemplateOutlet } from '@angular/common';\nimport { Component, computed, input, model, OnInit, output } from '@angular/core';\nimport { IButton, LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';\nimport { LibsUiComponentsButtonsDropdownComponent } from '@libs-ui/components-buttons-dropdown';\nimport { IDropdownFunctionControlEvent, IEmitSelectKey, LibsUiComponentsDropdownComponent } from '@libs-ui/components-dropdown';\nimport { IPopoverFunctionControlEvent, LibsUiComponentsPopoverComponent, TYPE_POPOVER_EVENT } from '@libs-ui/components-popover';\nimport { LibsUiComponentsRadioGroupComponent } from '@libs-ui/components-radio-group';\nimport { IRadioEvent } from '@libs-ui/components-radio-single';\nimport { LibsUiComponentsScrollOverlayDirective } from '@libs-ui/components-scroll-overlay';\nimport { ISwitch, ISwitchEvent, LibsUiComponentsSwitchComponent } from '@libs-ui/components-switch';\nimport { LibsUiPipesEscapeHtmlPipe } from '@libs-ui/pipes-escape-html';\nimport { escapeHtml } from '@libs-ui/utils';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { IPagesTemplateDetailConfigCenter, IPagesTemplateDetailConfigRight, IPagesTemplateDetailConfigTitle } from './interfaces/config.interface';\nimport { IPageDetailFunctionControl } from './interfaces/function-control.interface';\n/**\n * @deprecated Use {@link LibsUiComponentsPagesTemplateDetailV2Component} instead.\n */\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'libs_ui-components-pages_template-detail',\n  templateUrl: './detail.component.html',\n  styleUrls: ['./detail.component.scss'],\n  standalone: true,\n  imports: [\n    TranslateModule,\n    NgTemplateOutlet,\n    LibsUiComponentsButtonsButtonComponent,\n    LibsUiComponentsPopoverComponent,\n    LibsUiComponentsRadioGroupComponent,\n    LibsUiComponentsSwitchComponent,\n    LibsUiComponentsDropdownComponent,\n    LibsUiComponentsScrollOverlayDirective,\n    LibsUiComponentsButtonsDropdownComponent,\n    LibsUiPipesEscapeHtmlPipe,\n  ],\n})\nexport class LibsUiComponentsPagesTemplateDetailComponent implements OnInit {\n  private dropdownFunctionControl!: IDropdownFunctionControlEvent;\n  protected configTitleComputed = computed(() => {\n    const config = this.configTitle()?.config;\n    if (!config) {\n      return { content: 'i18n_back_to_list' };\n    }\n\n    if (!config.content) {\n      config.content = 'i18n_back_to_list';\n      return config;\n    }\n\n    return { ...config, content: escapeHtml(config.content) };\n  });\n\n  readonly zIndex = input<number, number | undefined>(1000, { transform: (val) => val ?? 1000 });\n  readonly configRight = input<Array<IPagesTemplateDetailConfigRight>>();\n  readonly configTitle = input<IPagesTemplateDetailConfigTitle>();\n  readonly configCenter = input<IPagesTemplateDetailConfigCenter>();\n  readonly classIncludeHeader = input<string>();\n  readonly classIncludeBody = input<string>();\n  readonly disable = model<boolean>(false);\n  readonly isSplitHeaderRatio = input<boolean>(); // dùng khi muốn chia header làm 3 phần theo tỉ lệ 24 52 24\n\n  readonly outScroll = output<Event>();\n  readonly outClose = output<boolean>();\n  readonly outSelectedMenuDropdown = output<IEmitSelectKey | undefined>();\n  readonly outSelectedButtonDropdown = output<IEmitSelectKey>();\n  readonly outFunctionControl = output<IPageDetailFunctionControl>();\n  readonly outSelectedRadio = output<IRadioEvent>();\n  readonly outStateDisable = output<boolean>();\n  readonly outTooltipButtonFunctionControl = output<IPopoverFunctionControlEvent>();\n\n  ngOnInit() {\n    this.outFunctionControl.emit(this.FunctionsControl);\n  }\n\n  public get FunctionsControl(): IPageDetailFunctionControl {\n    return {\n      setStateDisable: this.setStateDisable.bind(this),\n    };\n  }\n\n  protected handlerClickAction(event: IButton) {\n    if (event?.action) {\n      event.action();\n    }\n  }\n\n  protected async handlerSwitch(event: ISwitch, swicthEvent: ISwitchEvent) {\n    if (event?.action) {\n      await event.action(swicthEvent);\n    }\n  }\n\n  protected handlerClose(e: Event) {\n    e.stopPropagation();\n    this.outClose.emit(true);\n  }\n\n  protected handlerPopoverEvent(event: TYPE_POPOVER_EVENT) {\n    if (event !== 'click') {\n      return;\n    }\n    this.outClose.emit(true);\n  }\n\n  protected handlerSelectedKey(event?: IEmitSelectKey) {\n    this.outSelectedMenuDropdown.emit(event);\n    this.dropdownFunctionControl?.reset(); //lỗi chọn lần 2 (chưa reset thì keySelected chưa reset nên không chọn tiếp vào lựa chọn cũ)\n    this.dropdownFunctionControl?.removeList();\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  protected handlerSelectedButtonDropdownItem(event: any) {\n    this.outSelectedButtonDropdown.emit(event);\n  }\n\n  protected handlerDropdownFunctionControl(event: IDropdownFunctionControlEvent) {\n    this.dropdownFunctionControl = event;\n  }\n\n  private async setStateDisable(stateDisable: boolean) {\n    this.disable.set(stateDisable);\n    this.outStateDisable.emit(this.disable());\n  }\n\n  protected handlerChangeRadio(event: IRadioEvent) {\n    this.outSelectedRadio.emit(event);\n  }\n\n  protected handlerFunctionControlTooltipButton(event: IPopoverFunctionControlEvent) {\n    this.outTooltipButtonFunctionControl.emit(event);\n  }\n\n  protected handlerScroll(event: Event) {\n    this.outScroll.emit(event);\n  }\n}\n","<div\n  class=\"libs-ui-components-page_detail\"\n  [style.zIndex]=\"zIndex()\">\n  <div\n    [class.row]=\"!isSplitHeaderRatio()\"\n    class=\"flex items-center px-[16px] py-[8px] justify-between bg-white libs-ui-border-top-general {{ classIncludeHeader() || '' }}\">\n    <div\n      [class.columns-8]=\"!isSplitHeaderRatio()\"\n      [class.w-[24%]]=\"isSplitHeaderRatio()\">\n      <div class=\"flex items-center\">\n        @if (!configTitle()?.ignoreButtonBack) {\n          <i\n            class=\"libs-ui-icon-chevron-right rotate-[180deg] before:text-[16px] mr-[8px] cursor-pointer text-[var(--libs-ui-color-default)]\"\n            (click)=\"handlerClose($event)\"\n            (keydown.enter)=\"handlerClose($event)\"></i>\n        }\n        <div class=\"flex w-full items-center\">\n          @if (configTitle()?.isShowBackToListLabel) {\n            <libs_ui-components-buttons-button\n              [label]=\"'i18n_back_to_list'\"\n              [classLabel]=\"'lib-ui-font-h6m'\"\n              [type]=\"'button-link-primary'\"\n              [classInclude]=\"'!p-0'\"\n              (outClick)=\"handlerClose($event)\" />\n          }\n          @if (configTitle()?.config; as config) {\n            <libs_ui-components-popover\n              [config]=\"configTitleComputed()\"\n              [type]=\"'text'\"\n              [mode]=\"'hover'\"\n              [classInclude]=\"'cursor-pointer ' + (config.classInclude || 'text-[var(--libs-ui-color-default)] libs-ui-font-h6m')\"\n              [innerHtml]=\"config.content ? (!configTitle()?.ignoreEscapeHtml ? (config.content | LibsUiPipesEscapeHtmlPipe | translate) : (config.content | translate)) : '&mdash;'\"\n              (outEvent)=\"handlerPopoverEvent($event)\" />\n          }\n          @if (configTitle()?.configDescription; as configDescription) {\n            <libs_ui-components-popover\n              [config]=\"configDescription.config\"\n              [type]=\"'text'\"\n              [mode]=\"'hover'\"\n              [classInclude]=\"configDescription.config.classInclude || 'libs-ui-font-h6r text-[#6a7383]'\"\n              [innerHtml]=\"configDescription.innerView | LibsUiPipesEscapeHtmlPipe | translate\" />\n          }\n        </div>\n      </div>\n    </div>\n    @if (isSplitHeaderRatio() && configCenter(); as configCenter) {\n      <div class=\"w-[52%] flex items-center justify-center px-[48px]\">\n        @if (!configCenter.template) {\n          <libs_ui-components-popover\n            type=\"text\"\n            [config]=\"{\n              maxWidth: 250,\n              zIndex: zIndex() + 1,\n            }\"\n            [classInclude]=\"configCenter.classIncludeTitle ?? 'uppercase libs-ui-font-h4s'\"\n            [innerHtml]=\"configCenter.title ? (configCenter.title | translate | LibsUiPipesEscapeHtmlPipe) : '&mdash'\" />\n        } @else {\n          <ng-container *ngTemplateOutlet=\"configCenter.template\" />\n        }\n      </div>\n    }\n    <div\n      class=\"flex justify-end items-center\"\n      [class.columns-4]=\"!isSplitHeaderRatio()\"\n      [class.w-[24%]]=\"isSplitHeaderRatio()\">\n      @for (item of configRight(); track $index; let last = $last) {\n        <div [class.mr-[12px]]=\"!last\">\n          @if (item.key === 'button' && item.configButton; as configButton) {\n            <libs_ui-components-buttons-button\n              [label]=\"configButton.label || ''\"\n              [classLabel]=\"configButton.classLabel || ''\"\n              [type]=\"configButton.type || 'button-primary'\"\n              [classInclude]=\"configButton.classInclude || ''\"\n              [classIconLeft]=\"configButton.classIconLeft || ''\"\n              [iconOnlyType]=\"configButton.iconOnlyType || false\"\n              [classIconRight]=\"configButton.classIconRight || ''\"\n              [popover]=\"configButton.popover || {}\"\n              [disable]=\"configButton.disable || disable()\"\n              [isPending]=\"configButton.isPending || false\"\n              (outClick)=\"handlerClickAction(configButton)\" />\n          }\n          @if (item.key === 'swicth' && !item.ignoreShowButton && item.configSwicth; as configSwicth) {\n            <libs_ui-components-switch\n              [active]=\"configSwicth.active || false\"\n              [disable]=\"configSwicth.disable || disable()\"\n              (outSwitch)=\"handlerSwitch(configSwicth, $event)\" />\n          }\n          @if (item.key === 'menu-dropdown' && item.configDropdown; as configDropdown) {\n            <libs_ui-components-dropdown\n              [isNgContent]=\"true\"\n              [zIndex]=\"2004\"\n              [listConfig]=\"configDropdown.listConfig\"\n              [listHiddenInputSearch]=\"true\"\n              [popoverCustomConfig]=\"configDropdown.popoverCustomConfig\"\n              (outSelectKey)=\"handlerSelectedKey($event)\"\n              (outFunctionsControl)=\"handlerDropdownFunctionControl($event)\">\n              <libs_ui-components-buttons-button\n                [iconOnlyType]=\"true\"\n                [classIconLeft]=\"'libs-ui-icon-more-vertical text-[#333333] text-[12px] {{ configDropdown.classInclude }}'\"\n                [classInclude]=\"'p-[7px] libs-ui-border-general'\"\n                [type]=\"'button-third'\"\n                [ignoreStopPropagationEvent]=\"true\" />\n            </libs_ui-components-dropdown>\n          }\n          @if (item.key === 'button-dropdown' && item.configButtonDropdown; as configDropdown) {\n            <libs_ui-components-buttons-dropdown\n              [applyNow]=\"true\"\n              [label]=\"item.configButtonDropdown.label || ' '\"\n              [classIconRight]=\"item.configButtonDropdown.classIconRight || ' '\"\n              [classIconLeft]=\"item.configButtonDropdown.classIconLeft || ' '\"\n              [typeButton]=\"item.configButtonDropdown.type || 'button-secondary'\"\n              [items]=\"item.configButtonDropdown.items || []\"\n              [fieldDisplay]=\"item.configButtonDropdown.fieldDisplay\"\n              [popupConfig]=\"item.configButtonDropdown.popupConfig || { width: 205, maxWidth: 408, maxHeight: 48, zIndex: 100, direction: 'bottom' }\"\n              (outSelectItem)=\"handlerSelectedButtonDropdownItem($event)\" />\n          }\n\n          @if (item.key === 'radio-group' && item.configRadioGroup; as configRadioGroup) {\n            <libs_ui-components-radio-group\n              [groups]=\"configRadioGroup\"\n              [horizontal]=\"true\"\n              [typeRadio]=\"'medium'\"\n              [ignoreClassMarginLastItem]=\"true\"\n              (outChange)=\"handlerChangeRadio($event)\" />\n          }\n\n          @if (item.key === 'tooltip-button' && item.configTooltipButton; as configTooltipButton) {\n            <libs_ui-components-popover\n              [type]=\"configTooltipButton.configTooltip?.type || 'other'\"\n              [config]=\"configTooltipButton.configTooltip?.config\">\n              <libs_ui-components-buttons-button\n                [type]=\"configTooltipButton.configButton?.type || 'button-third'\"\n                [classIconLeft]=\"configTooltipButton.configButton?.classIconLeft || 'libs-ui-icon-more-vertical rotate-[90deg] mr-0'\"\n                [label]=\"configTooltipButton.configButton?.label || ''\"\n                [iconOnlyType]=\"configTooltipButton.configButton?.iconOnlyType ?? false\"\n                [popover]=\"configTooltipButton.configButton?.popover || {}\"\n                (outFunctionsControl)=\"handlerFunctionControlTooltipButton($event)\"\n                [ignoreStopPropagationEvent]=\"true\"\n                [disable]=\"configTooltipButton.configButton?.disable ?? false\" />\n            </libs_ui-components-popover>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <div\n    class=\"libs-ui-components-page_detail-body {{ classIncludeBody() }}\"\n    LibsUiComponentsScrollOverlayDirective\n    (outScroll)=\"handlerScroll($event)\">\n    <ng-content></ng-content>\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,23 +1,23 @@
 {
   "name": "@libs-ui/components-pages-template-detail",
-  "version": "0.2.356-42",
+  "version": "0.2.356-43",
   "peerDependencies": {
     "@angular/common": ">=18.0.0",
     "@angular/core": ">=18.0.0",
-    "@libs-ui/components-buttons-button": "0.2.356-42",
-    "@libs-ui/components-buttons-dropdown": "0.2.356-42",
-    "@libs-ui/components-dropdown": "0.2.356-42",
-    "@libs-ui/components-popover": "0.2.356-42",
-    "@libs-ui/components-radio-group": "0.2.356-42",
-    "@libs-ui/components-radio-single": "0.2.356-42",
-    "@libs-ui/components-scroll-overlay": "0.2.356-42",
-    "@libs-ui/components-switch": "0.2.356-42",
-    "@libs-ui/pipes-escape-html": "0.2.356-42",
-    "@libs-ui/utils": "0.2.356-42",
+    "@libs-ui/components-buttons-button": "0.2.356-43",
+    "@libs-ui/components-buttons-dropdown": "0.2.356-43",
+    "@libs-ui/components-dropdown": "0.2.356-43",
+    "@libs-ui/components-popover": "0.2.356-43",
+    "@libs-ui/components-radio-group": "0.2.356-43",
+    "@libs-ui/components-radio-single": "0.2.356-43",
+    "@libs-ui/components-scroll-overlay": "0.2.356-43",
+    "@libs-ui/components-switch": "0.2.356-43",
+    "@libs-ui/pipes-escape-html": "0.2.356-43",
+    "@libs-ui/utils": "0.2.356-43",
     "@ngx-translate/core": "^15.0.0",
-    "@libs-ui/interfaces-types": "0.2.356-42",
-    "@libs-ui/components-skeleton": "0.2.356-42",
-    "@libs-ui/pipes-call-function-in-template": "0.2.356-42"
+    "@libs-ui/interfaces-types": "0.2.356-43",
+    "@libs-ui/components-skeleton": "0.2.356-43",
+    "@libs-ui/pipes-call-function-in-template": "0.2.356-43"
   },
   "sideEffects": false,
   "module": "fesm2022/libs-ui-components-pages-template-detail.mjs",