@libs-ui/services-grid-layout 0.2.357-24 → 0.2.357-25

package/grid-layout.service.d.ts

@@ -1,4 +1,4 @@
-import { ViewContainerRef } from '@angular/core';
+import { TemplateRef, ViewContainerRef } from '@angular/core';
 import { GridsterConfig } from 'gridster18';
 import { T_gridLayout_changeEvent, T_gridLayout_newNode, T_gridLayout_config, T_gridLayout_node } from './interfaces/grid-layout.interface';
 import * as i0 from "@angular/core";
@@ -97,6 +97,10 @@ export declare class LibsUiGridLayoutService {
      *
      * @param host chỗ gắn RIÊNG của ô đó — mỗi khối một `ViewContainerRef`, dùng chung một cái thì
      *   mọi component bị dồn hết vào một ô.
+     * @param childCanvas khuôn mặt phẳng LỒNG của khối, chỉ có với khối container tự khai
+     *   `getComponentOutlet`. Component vỏ nhận nó qua input `childCanvas` và tự đặt vào giữa tiêu đề
+     *   với phần thân của mình. Không truyền xuống thì vỏ chiếm trọn chiều cao khối và đẩy toàn bộ thẻ
+     *   con ra ngoài vùng nhìn thấy.
      */
     private attachNode;
     /**
@@ -260,7 +264,7 @@ export declare class LibsUiGridLayoutService {
         resetZoom: (key?: string) => void;
         fitToScreen: (cW: number, sW?: number, pad?: number, key?: string) => number;
         gridsterOptions: (depth: number, cb?: () => void) => GridsterConfig;
-        attachNode: (node: T_gridLayout_node, depth: number, host: ViewContainerRef) => void;
+        attachNode: (node: T_gridLayout_node, depth: number, host: ViewContainerRef, childCanvas?: TemplateRef<unknown>) => void;
         detachNode: (nodeId: string) => void;
         getNodeElement: (nodeId: string, scope?: ParentNode) => HTMLElement | undefined;
         getNodeCanvasElement: (nodeId: string, scope?: ParentNode) => HTMLElement | undefined;

package/interfaces/grid-layout.interface.d.ts

@@ -32,6 +32,21 @@ export type T_gridLayout_node = {
      * ```ts
      * getComponentOutlet: (node) => from(import('./chart-card.component').then((c) => c.ChartCardComponent))
      * ```
+     *
+     * 🔴 Khai cho khối CÓ CON (container) là khai VỎ của khối ghép — hàng tiêu đề, nút thu gọn, nền.
+     * Vỏ KHÔNG thay thế mặt phẳng lồng bên trong: thư viện truyền mặt phẳng đó xuống component vỏ qua
+     * input `childCanvas: TemplateRef<unknown>`, và vỏ BẮT BUỘC vẽ nó ra bằng `ngTemplateOutlet`, nếu
+     * không toàn bộ khối con biến mất khỏi màn.
+     *
+     * ```html
+     * <!-- trong component vỏ -->
+     * <div class="flex h-full flex-col">
+     *   <div class="shrink-0">{{ title() }}</div>
+     *   <div class="min-h-0 flex-1">
+     *     <ng-container [ngTemplateOutlet]="childCanvas()" />
+     *   </div>
+     * </div>
+     * ```
      */
     getComponentOutlet?: (node: T_gridLayout_node) => Observable<Type<unknown>>;
     /** dữ liệu riêng của nơi dùng — thư viện KHÔNG đọc, chuyển nguyên vào input `data` của component */

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@libs-ui/services-grid-layout",
-  "version": "0.2.357-24",
+  "version": "0.2.357-25",
   "peerDependencies": {
     "@angular/core": "^18.2.0",
     "@angular/common": "^18.2.0",
     "gridster18": "npm:angular-gridster2@18.0.1",
     "rxjs": "~7.8.0",
-    "@libs-ui/components-buttons-button": "0.2.357-24",
-    "@libs-ui/utils": "0.2.357-24"
+    "@libs-ui/components-buttons-button": "0.2.357-25",
+    "@libs-ui/utils": "0.2.357-25"
   },
   "sideEffects": false,
   "module": "fesm2022/libs-ui-services-grid-layout.mjs",