@libs-ui/services-grid-layout 0.2.357-19

package/fesm2022/libs-ui-services-grid-layout.mjs

@@ -0,0 +1,933 @@
+import * as i0 from '@angular/core';
+import { Injectable, inject, DestroyRef, signal, input, output, viewChild, viewChildren, ViewContainerRef, computed, effect, Component, ChangeDetectionStrategy } from '@angular/core';
+import { uuid, cloneDeep } from '@libs-ui/utils';
+import { take } from 'rxjs';
+import * as i1 from 'gridster18';
+import { GridType, CompactType, DisplayGrid, GridsterComponent, GridsterModule } from 'gridster18';
+import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
+
+/**
+ * Cấu hình gridster cho lưới CẤP TRANG.
+ *
+ * Mọi giá trị dưới đây đều đến từ một lỗi đã đo được trên sản phẩm thật, không phải chọn theo cảm
+ * tính. Đổi bất kỳ dòng nào có dấu 🔴 sẽ làm sống lại đúng lỗi ghi trong comment.
+ */
+const gridLayoutRootConfig = () => ({
+    // 🔴 VerticalFixed — CẤM đổi sang Fit hay ScrollVertical.
+    // `Fit` chia đều chiều cao khung cho số hàng đang dùng, nên card khai `rows: 2` phình từ 124px lên
+    // 247px. `ScrollVertical` KHÔNG đọc `fixedRowHeight` (mã lib: chỉ `Fixed` và `VerticalFixed` đọc).
+    gridType: GridType.VerticalFixed,
+    // 🔴 None — CẤM quay lại CompactUp.
+    // `CompactUp` hút mọi khối lên sát nhau NGAY sau mỗi thao tác, nên:
+    //  · kéo mép dưới cho khối cao thêm → chỗ khối dưới vừa nhường bị hút lấp lại tức thì, cú kéo bị
+    //    `checkGridCollision` báo va chạm rồi HOÀN NGUYÊN (khối đứng im dù kéo);
+    //  · kéo thả đổi vị trí → khối vừa nhường chỗ bị hút về ngay, khối đang kéo không có chỗ đặt và
+    //    treo lơ lửng giữa hai khối.
+    // Muốn dồn khít thì gọi `sapGon()` của service.
+    compactType: CompactType.None,
+    displayGrid: DisplayGrid.OnDragAndResize,
+    // 🔴 pushItems: true — CẤM để false.
+    // `swap` của lib CHỈ hoán vị được HAI KHỐI CÙNG KÍCH THƯỚC (mã lib `checkSwap`: tính diffX/diffY
+    // rồi hoán vị, lệch kích thước thì `checkCollision` báo va chạm và hoàn nguyên). Khối 3x2 gặp
+    // container 7x5 nên không swap được, mà `pushItems: false` cũng không cho container nhường đường
+    // → BẾ TẮC: khối đang kéo không đặt được ở đâu.
+    pushItems: true,
+    // chỉ đẩy XUỐNG: đẩy ngang làm xô lệch bố cục cột người dùng vừa đặt
+    pushDirections: { north: false, east: false, south: true, west: false },
+    pushResizeItems: true,
+    swap: true,
+    swapWhileDragging: true,
+    draggable: {
+        enabled: true,
+        // 🔴 KHÔNG được bỏ. Không có nó thì gridster vào chế độ kéo ngay từ `mousedown`, nên chỉ bấm
+        // CHỌN một khối là nó đã nhích theo dù chuột đứng yên. Lib tự huỷ kéo khi nhả chuột trước mốc
+        // này nên cú bấm chọn vẫn ăn nguyên vẹn.
+        delayStart: 160,
+        // 🔴 `checkDragHandleClass` duyệt DOM từ chỗ bấm NGƯỢC LÊN CHA, và trên MỖI node nó kiểm
+        // `dragHandleClass` TRƯỚC `ignoreContentClass`. Vì vậy một phần tử KHÔNG được mang cả hai class
+        // cùng lúc — mang cả hai thì lib gặp tay cầm trước, trả `true`, class chặn không tới lượt.
+        ignoreContentClass: 'libs-ui-grid-layout-block-parent-drag',
+        ignoreContent: true,
+        dragHandleClass: 'libs-ui-grid-layout-drag-handle',
+    },
+    resizable: {
+        enabled: true,
+        // đủ 8 hướng như cửa sổ thường; chỉ có góc dưới-phải thì quá khó trúng
+        handles: { s: true, e: true, n: true, w: true, se: true, ne: true, sw: true, nw: true },
+    },
+    margin: 12,
+    outerMargin: true,
+    outerMarginBottom: 40,
+    minCols: 12,
+    maxCols: 12,
+    minRows: 2,
+    // 🔴 KHÔNG giới hạn chiều cao khối. Lib có BA trần mặc định phải vô hiệu hoá CÙNG LÚC, thiếu một
+    // cái là vẫn bị chặn: `maxItemRows: 50` · `maxItemCols: 50` · `maxItemArea: 2500` (trần DIỆN TÍCH
+    // cols × rows — khó thấy nhất: khối 12 cột chỉ cần 209 hàng là đụng trần dù hai trần kia còn dư).
+    // `maxRows` là trần của CẢ LƯỚI, cũng phải nới theo.
+    maxRows: 5000,
+    maxItemRows: 5000,
+    maxItemCols: 12,
+    maxItemArea: 60000,
+    // 🔴 Trần LỚP CHỒNG. Mặc định của lib là 2 — quá thấp: khi bật chồng khối, thư viện gán mỗi khối
+    // một lớp riêng để chúng khác nhau, nên chỉ 3 khối là đã đụng trần và các khối sau lại rơi về
+    // cùng lớp, tức chồng nhau bị chặn trở lại.
+    maxLayerIndex: 5000,
+    setGridSize: true,
+    fixedRowHeight: 56,
+    defaultItemCols: 3,
+    defaultItemRows: 2,
+    minItemRows: 1,
+    mobileBreakpoint: -1,
+});
+/**
+ * Cấu hình cho lưới LỒNG (ruột một container).
+ *
+ * Kế thừa lưới trang rồi ghi đè phần khác biệt. Ba điểm quan trọng nhất: `setGridSize` phải TẮT,
+ * tay cầm phải mang TÊN RIÊNG, và tự-cuộn-khi-kéo phải TẮT.
+ */
+const gridLayoutNestedConfig = () => ({
+    ...gridLayoutRootConfig(),
+    // 🔴 PHẢI tắt cho lưới lồng. `setGridSize` làm gridster tự ghi style width/height lên CHÍNH nó,
+    // sinh vòng lặp đo-rồi-ghi với ResizeObserver của khung ngoài (khung đổi → onResize xoá style →
+    // setGridSize ghi lại) → lưới con co dần về 64x64px trong khung 868px.
+    setGridSize: false,
+    // khe 2px: khối con là các dòng thông tin của CÙNG một card, khe rộng làm chúng trông như card rời
+    margin: 2,
+    // Lưới lồng KHÔNG tự chừa lề — lề là của VỎ container (`containerPadding`), không phải của lưới.
+    // Đặt ở vỏ thì ruột co lại đúng bằng phần còn lại, tay cầm resize của khối con luôn nằm trong tầm
+    // chuột (người dùng chốt 28/08/2026: "lưới cha có padding chứ ko phải con").
+    outerMargin: false,
+    outerMarginBottom: 0,
+    // hàng 16px cho bước kéo mịn, và sàn 1 hàng = 16px nên khối co được nhỏ hơn nhiều
+    fixedRowHeight: 16,
+    minRows: 1,
+    minItemRows: 1,
+    defaultItemCols: 2,
+    defaultItemRows: 2,
+    // 🔴 Tay cầm RIÊNG — CẤM dùng chung tên với lưới trang.
+    // `checkDragHandleClass` trả `true` ở node ĐẦU TIÊN có `dragHandleClass`. Dùng chung một tên thì
+    // lưới CHA cũng nhận ra tay cầm của khối con và nhấc luôn container.
+    draggable: {
+        ...gridLayoutRootConfig().draggable,
+        dragHandleClass: 'libs-ui-grid-layout-drag-handle-child',
+    },
+    // 🔴 KÉO MÉP thì khối dưới ĐỨNG YÊN, chỉ khoảng trống giữa hai khối co giãn. Bật (kế thừa từ lưới
+    // trang) thì mỗi cú kéo đẩy dồn cả cột xuống — người dùng chỉ muốn một khối to hơn một chút mà cả
+    // card dài ra. `pushItems` vẫn giữ: nó lo việc KÉO THẢ đổi chỗ, khác việc đổi kích thước.
+    pushResizeItems: false,
+    // 🔴 Tắt tự cuộn khi kéo tới sát mép. Lib thấy chuột gần biên là cuộn lưới theo
+    // (`scrollSensitivity`), nhưng lưới con nằm trong card có `overflow: hidden` — cuộn ở đây đẩy khối
+    // con ra NGOÀI khung container rồi kẹt luôn ở đó.
+    disableScrollHorizontal: true,
+    disableScrollVertical: true,
+});
+/**
+ * Cây rỗng dùng khi chưa có dữ liệu — mặt phẳng vẽ ra một lưới trống thay vì vỡ.
+ * Xảy ra trong nhịp giữa lúc component dựng và lúc `init()` chạy.
+ */
+const emptyRootNode = () => ({ id: 'root', x: 0, y: 0, cols: 12, rows: 0, children: [] });
+
+/**
+ * Thao tác trên cây khối: tìm, thêm, xoá, dồn khít, chặn lồng cấp quá sâu.
+ *
+ * 🔴 NỘI BỘ thư viện — không xuất ra ngoài. Nơi dùng đi qua `LibsUiGridLayoutService`, ở đó mỗi
+ * thao tác sửa bố cục vừa vẽ lại vừa bắn `outChange` đúng MỘT lần. Các hàm ở đây cố tình KHÔNG tự
+ * vẽ lại: để chúng tự gọi thì mỗi thao tác vẽ hai lượt và bắn hai sự kiện (người dùng chốt
+ * 28/08/2026: "đặt đúng các điểm mà làm cho layout có thể thay đổi thôi").
+ */
+class LibsUiGridLayoutTreeService {
+    findById(node, id) {
+        if (node.id === id) {
+            return node;
+        }
+        for (const child of node.children ?? []) {
+            const found = this.findById(child, id);
+            if (found) {
+                return found;
+            }
+        }
+        return undefined;
+    }
+    findParent(node, id) {
+        for (const child of node.children ?? []) {
+            if (child.id === id) {
+                return node;
+            }
+            const found = this.findParent(child, id);
+            if (found) {
+                return found;
+            }
+        }
+        return undefined;
+    }
+    /**
+     * Thêm khối vào cuối một container. Thư viện tự sinh `id` và tự đặt `x` · `y` xuống hàng trống.
+     *
+     * @returns khối vừa tạo (kèm `id` vừa sinh), hoặc `undefined` khi không tìm thấy container.
+     */
+    addChild(root, parentId, item) {
+        const parent = this.findById(root, parentId);
+        if (!parent) {
+            return undefined;
+        }
+        parent.children = parent.children ?? [];
+        // 🔴 Thư viện tự sinh `id`. Đây là mã máy dùng để tra cứu, không phải thứ người dùng nghĩ ra —
+        // bắt họ tự đặt là mời họ tạo trùng, mà trùng id thì `findById` trả nhầm khối và cả cây hỏng
+        // im lặng (người dùng chốt 28/08/2026).
+        const node = { ...item, id: item.id ?? uuid(), x: 0, y: this.nextFreeRow(parent.children) };
+        parent.children.push(node);
+        // Trả về khối vừa tạo để nơi dùng biết `id` thư viện vừa sinh.
+        return node;
+    }
+    /** Xoá một khối khỏi cây. Không cho xoá gốc. */
+    removeById(root, id) {
+        if (root.id === id) {
+            return false;
+        }
+        const parent = this.findParent(root, id);
+        if (!parent?.children) {
+            return false;
+        }
+        parent.children = parent.children.filter((item) => item.id !== id);
+        return true;
+    }
+    /**
+     * Chuyển một khối đơn thành CONTAINER: nội dung cũ trở thành khối con đầu tiên.
+     *
+     * Không mất dữ liệu — `data` của khối được mang theo xuống khối con.
+     *
+     * @returns `false` khi không tìm thấy khối, hoặc khối đã là container rồi.
+     */
+    toContainer(root, id, colCount) {
+        const node = this.findById(root, id);
+        if (!node || (node.children?.length ?? 0) > 0) {
+            return false;
+        }
+        node.children = [{ ...node, id: uuid(), x: 0, y: 0, cols: colCount, rows: 4, children: [] }];
+        return true;
+    }
+    /**
+     * Chuyển một CONTAINER về khối đơn: các khối con được NÂNG lên cấp trên, không bị xoá.
+     *
+     * @returns `false` khi không tìm thấy khối, hoặc khối vốn không phải container.
+     */
+    toSingle(root, id) {
+        const node = this.findById(root, id);
+        if (!node || (node.children?.length ?? 0) === 0) {
+            return false;
+        }
+        const parent = this.findParent(root, id);
+        for (const child of node.children ?? []) {
+            parent?.children?.push({ ...child, cols: node.cols, rows: 2 });
+        }
+        node.children = [];
+        return true;
+    }
+    /**
+     * Làm phẳng mọi container lồng vượt trần.
+     *
+     * 🔴 Cần thiết vì bố cục ĐÃ LƯU không đi qua luật chặn nào của giao diện. Một bản lưu cũ — sinh
+     * trước khi có trần, hoặc do thao tác lỗi — vẫn nạp thẳng vào và hiện container lồng container.
+     * Container vượt trần bị hạ thành khối thường, con của nó nâng lên cấp trên: KHÔNG mất dữ liệu.
+     *
+     * @returns số container đã làm phẳng
+     */
+    flattenOverDepthContainers(node, maxDepth) {
+        return this.walkFlatten(node, 0, maxDepth);
+    }
+    /**
+     * Dồn khối khít lên trên theo thứ tự đọc, lấp hết chỗ trống.
+     *
+     * 🔴 KHÔNG sửa `node.rows` của container. Chiều cao container tính theo đơn vị hàng của lưới CHA,
+     * còn `currentRow` đếm theo đơn vị hàng của lưới CON — trộn hai thang đo là container phình lên
+     * gấp mấy lần.
+     */
+    compact(node, colCount) {
+        this.walkCompact(node, colCount);
+    }
+    walkCompact(node, colCount) {
+        const children = node.children;
+        if (!children?.length) {
+            return;
+        }
+        const inReadingOrder = [...children].sort((a, b) => a.y - b.y || a.x - b.x);
+        let currentRow = 0;
+        let usedCols = 0;
+        let tallestInRow = 0;
+        for (const item of inReadingOrder) {
+            const width = Math.min(item.cols, colCount);
+            if (usedCols > 0 && usedCols + width > colCount) {
+                currentRow += tallestInRow;
+                usedCols = 0;
+                tallestInRow = 0;
+            }
+            item.x = usedCols;
+            item.y = currentRow;
+            item.cols = width;
+            usedCols += width;
+            tallestInRow = Math.max(tallestInRow, item.rows);
+            if ((item.children?.length ?? 0) > 0) {
+                this.walkCompact(item, colCount);
+            }
+        }
+    }
+    walkFlatten(node, containerDepth, maxDepth) {
+        const children = node.children;
+        if (!children?.length) {
+            return 0;
+        }
+        let fixedCount = 0;
+        const result = [];
+        for (const child of children) {
+            const isContainer = (child.children?.length ?? 0) > 0;
+            if (isContainer && containerDepth >= maxDepth) {
+                fixedCount += 1;
+                for (const item of child.children ?? []) {
+                    fixedCount += this.walkFlatten(item, containerDepth, maxDepth);
+                    result.push(item);
+                }
+                continue;
+            }
+            fixedCount += this.walkFlatten(child, isContainer ? containerDepth + 1 : containerDepth, maxDepth);
+            result.push(child);
+        }
+        node.children = result;
+        return fixedCount;
+    }
+    nextFreeRow(children) {
+        return children.reduce((max, child) => Math.max(max, child.y + child.rows), 0);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiGridLayoutTreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiGridLayoutTreeService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiGridLayoutTreeService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Dựng một mặt phẳng kéo thả và tự gắn component của nơi dùng lên từng khối.
+ *
+ * Nơi dùng chỉ cần đưa vào: loại component muốn dựng
+ * (`nodeComponentType`) và cây dữ liệu (`data`). Toàn bộ việc vẽ lưới, kéo thả, đổi kích thước,
+ * lồng container và dọn dẹp do thư viện lo.
+ *
+ * 🔴 Đây là service theo TỪNG mặt phẳng, KHÔNG `providedIn: 'root'`. Khai trong `providers` của
+ * component dùng nó; hai mặt phẳng trên cùng một màn phải là hai thực thể riêng, dùng chung thì
+ * `componentRefs` của mặt phẳng này bị mặt phẳng kia dọn mất.
+ */
+class LibsUiGridLayoutService {
+    // 🔴 TỰ TẠO, không `inject`. Nơi dùng chỉ phải viết `providers: [LibsUiGridLayoutService]` —
+    // không phải biết bên trong thư viện còn service nào khác (người dùng chốt 28/08/2026).
+    // `TreeService` không giữ trạng thái dùng chung nên mỗi mặt phẳng một bản là đúng.
+    treeService = new LibsUiGridLayoutTreeService();
+    /** Lượt tải component đang chờ, theo id khối — để huỷ khi khối bị gỡ giữa chừng. */
+    pendingLoads = new Map();
+    constructor() {
+        // 🔴 Service khai trong `providers` của component nên Angular huỷ nó cùng component — thư viện
+        // tự dọn ở đây, nơi dùng KHÔNG phải gọi `destroy()` trong `ngOnDestroy` (người dùng chốt
+        // 28/08/2026). Bắt nhớ một bước dọn dẹp là kiểu API dễ quên, và quên thì rò rỉ bộ nhớ im lặng.
+        inject(DestroyRef).onDestroy(() => this.destroy());
+    }
+    config;
+    componentRefs = new Map();
+    rootNode = signal(undefined);
+    editMode = signal(false);
+    /** tăng mỗi lần cây đổi — component con đọc để biết phải tính lại */
+    version = signal(0);
+    /**
+     * Signal chỉ đọc để nơi dùng theo dõi.
+     *
+     * 🔴 Là THUỘC TÍNH, không phải getter. Getter trả signal thì chỗ đọc phải viết `Version()()` —
+     * quên cặp ngoặc thứ hai là computed KHÔNG phụ thuộc vào nó, cây đổi mà lưới đứng im, và
+     * TypeScript không hề báo lỗi (đo 28/08/2026: thêm khối không hiện, sắp gọn không nhúc nhích).
+     */
+    Root = this.rootNode.asReadonly();
+    IsEditMode = this.editMode.asReadonly();
+    /** tăng mỗi lần cây hoặc cấu hình đổi */
+    Version = this.version.asReadonly();
+    /**
+     * trần số cấp container lồng nhau — canvas đọc để biết có cho chuyển thành container không */
+    maxContainerDepth() {
+        return this.config?.maxContainerDepth ?? 1;
+    }
+    /**
+     * lề trong của container, px — canvas đọc để đặt padding lên vỏ container */
+    containerPadding() {
+        return this.config?.containerPadding ?? 12;
+    }
+    /** Khởi tạo mặt phẳng. Gọi lại sẽ dọn sạch component cũ rồi dựng lại từ đầu. */
+    init(config) {
+        this.destroy();
+        this.config = config;
+        this.assignOverlapLayers(config.data);
+        // 🔴 Nhân bản như `refresh()`: `init()` lại (đổi chế độ, bật/tắt chồng khối) trên CÙNG object cây
+        // thì `@for` không dựng lại `gridster-item`, nên `layerIndex` vừa gán không tới `$item` và khối
+        // vẫn không đè nhau được (đo 28/08/2026: `item.layerIndex` = 1|2|3|4|7 mà `$item.layerIndex`
+        // toàn `undefined`).
+        this.rootNode.set(this.shallowCloneTree(config.data));
+        this.editMode.set(config.isEditMode ?? false);
+        this.version.update((v) => v + 1);
+    }
+    setEditMode(value) {
+        this.editMode.set(value);
+        // 🔴 PHẢI bơm `version`: `gridsterOptions()` đọc `editMode` để bật/tắt kéo–thả, mà computed
+        // `gridOptions` bên canvas chỉ chạy lại khi `Version` đổi. Thiếu dòng này thì đổi chế độ xong
+        // gridster vẫn giữ options cũ — chuyển sang XEM mà khối vẫn kéo được.
+        this.version.update((v) => v + 1);
+    }
+    /**
+     * Bật/tắt cho khối chồng lên nhau — KHÔNG dựng lại mặt phẳng.
+     *
+     * Trước đây nơi dùng phải gọi `init()` lại để đổi cờ này, mà `init()` huỷ sạch rồi dựng lại mọi
+     * component nội dung — lãng phí, và người dùng thấy màn chớp (người dùng chốt 28/08/2026).
+     */
+    setAllowOverlap(value) {
+        if (!this.config) {
+            return;
+        }
+        this.config = { ...this.config, allowOverlap: value };
+        const root = this.rootNode();
+        if (!root) {
+            return;
+        }
+        // 🔴 Gán lớp vào CÂY ĐANG VẼ (`rootNode`), KHÔNG phải `config.data`.
+        // `init()` đã clone `config.data` sang `rootNode` nên hai object KHÁC nhau; gán vào `config.data`
+        // thì `refresh()` clone lại từ `rootNode` — lớp vừa gán không tới `gridster-item` nào, `z-index`
+        // của mọi khối đứng ở `1` và khối nào vẽ sau thì nằm trên: chồng khối "lúc được lúc không"
+        // (đo 04/09/2026: `item.layerIndex` undefined, `getLayerIndex()` = 0 cho cả 8 khối).
+        this.assignOverlapLayers(root);
+        // Thay tham chiếu cây để `layerIndex` vừa gán tới được `$item` của gridster; component nội dung
+        // KHÔNG bị dựng lại vì `attachNode` nhận ra id cũ và chỉ `setInput`.
+        this.refresh();
+    }
+    /**
+     *
+     * Cấu hình gridster cho một cấp lưới.
+     *
+     * @param depth 0 = lưới cấp trang, ≥ 1 = lưới lồng trong container
+     */
+    buildGridsterOptions(depth, itemChangeCallback) {
+        const base = depth === 0 ? gridLayoutRootConfig() : gridLayoutNestedConfig();
+        const config = this.config;
+        if (!config) {
+            return base;
+        }
+        const isFreeMode = config.mode === "free" /* E_gridLayout_mode_string.free */;
+        const canEdit = this.editMode();
+        const canOverlap = isFreeMode || (config.allowOverlap ?? false);
+        return {
+            ...base,
+            ...(config.cols ? { minCols: config.cols, maxCols: config.cols, maxItemCols: config.cols } : {}),
+            ...(config.rowHeight && depth === 0 ? { fixedRowHeight: config.rowHeight } : {}),
+            // Khe và chiều cao hàng khác nhau theo cấp: lưới trang thoáng, lưới lồng khít.
+            ...(depth === 0 && config.margin !== undefined ? { margin: config.margin } : {}),
+            ...(depth > 0 && config.nestedMargin !== undefined ? { margin: config.nestedMargin } : {}),
+            ...(depth > 0 && config.nestedRowHeight !== undefined ? { fixedRowHeight: config.nestedRowHeight } : {}),
+            ...(depth === 0 && config.outerMargin !== undefined ? { outerMargin: config.outerMargin } : {}),
+            ...(depth === 0 && config.outerMarginBottom !== undefined ? { outerMarginBottom: config.outerMarginBottom } : {}),
+            ...(config.minItemRows !== undefined ? { minItemRows: config.minItemRows } : {}),
+            ...(config.defaultItemCols !== undefined ? { defaultItemCols: config.defaultItemCols } : {}),
+            ...(config.defaultItemRows !== undefined ? { defaultItemRows: config.defaultItemRows } : {}),
+            // 🔴 Chế độ XEM phải TẮT hẳn kéo và đổi kích thước.
+            // `base` luôn để `enabled: true`; không ghi đè theo `editMode` thì người xem vẫn kéo được khối
+            // và đổi bố cục của người khác (người dùng báo 28/08/2026: "đang xem mà vẫn kéo thả thay đổi
+            // vị trí và thêm khối được").
+            draggable: { ...base.draggable, enabled: canEdit },
+            resizable: { ...base.resizable, enabled: canEdit },
+            // Chế độ tự do LUÔN cho chồng; chế độ lưới thì theo cờ của nơi dùng.
+            allowMultiLayer: canOverlap,
+            // 🔴 Bật `allowMultiLayer` MỘT MÌNH không đủ. Mã lib so `layerIndex` của hai khối: KHÁC nhau
+            // thì cho đè, GIỐNG nhau vẫn báo va chạm. Khối không khai `layerIndex` đều rơi về
+            // `defaultLayerIndex` — tức cùng lớp, và vẫn bị đẩy nhau như lưới thường (người dùng báo
+            // 28/08/2026: "bật chồng khối nhưng khi kéo thì các khối vẫn di chuyển theo").
+            // Cho chồng thì phải TẮT đẩy khối, nếu không khối bị dạt đi trước khi kịp đè lên nhau.
+            ...(canOverlap ? { pushItems: false, pushResizeItems: false, swap: false, swapWhileDragging: false } : {}),
+            itemChangeCallback: (item) => {
+                // 🔴 Khối vừa thao tác phải lên LỚP TRÊN CÙNG.
+                // `layerIndex` gán một lần theo thứ tự cây lúc khởi tạo, nên khối kéo lên chỉ nổi TRONG LÚC
+                // kéo (nhờ `z-index: 30` của lớp `gridster-item-moving`); thả tay ra là về lớp cũ và bị khối
+                // đứng sau trong cây đè ngược lên (người dùng báo 28/08/2026, đo được: kéo z=30, thả về
+                // z=10 trong khi hai khối kế bên đang z=11 và z=12).
+                if (canOverlap) {
+                    this.raiseToTopLayer(item);
+                }
+                this.version.update((v) => v + 1);
+                itemChangeCallback?.();
+            },
+        };
+    }
+    /**
+     *
+     * Gắn component của nơi dùng lên một khối.
+     *
+     * @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 ô.
+     */
+    attachNode(node, depth, host) {
+        const config = this.config;
+        if (!config) {
+            return;
+        }
+        const existing = this.componentRefs.get(node.id);
+        if (existing) {
+            this.applyInputs(existing, node, depth);
+            return;
+        }
+        // Khối tự khai thì hỏi nó; không thì hỏi hàm phân giải chung. Cả hai đều nhận `node` để đọc
+        // được `data.type` mà quyết định trả component nào.
+        const stream = (node.getComponentOutlet ?? config.getComponentOutlet)?.(node);
+        if (!stream) {
+            return;
+        }
+        // 🔴 Huỷ lượt tải CŨ của đúng khối này trước khi mở lượt mới.
+        // Khối bị gỡ rồi gắn lại (đổi bố cục, sắp gọn) trong lúc `import()` chưa xong thì lượt cũ vẫn
+        // chạy tiếp và dựng component vào một `ViewContainerRef` đã chết.
+        this.pendingLoads.get(node.id)?.unsubscribe();
+        const sub = stream.pipe(take(1)).subscribe((componentType) => {
+            this.pendingLoads.delete(node.id);
+            // Khối có thể đã bị xoá trong lúc chờ tải — dựng vào đây là rò rỉ.
+            if (!this.treeService.findById(this.rootNode() ?? node, node.id)) {
+                return;
+            }
+            const ref = host.createComponent(componentType);
+            this.applyInputs(ref, node, depth);
+            this.componentRefs.set(node.id, ref);
+        });
+        this.pendingLoads.set(node.id, sub);
+    }
+    /**
+     * Gỡ component của một khối và huỷ nó. */
+    detachNode(nodeId) {
+        // Khối bị gỡ khi component của nó còn đang tải — phải huỷ lượt tải, không thì nó dựng vào một
+        // `ViewContainerRef` đã chết.
+        this.pendingLoads.get(nodeId)?.unsubscribe();
+        this.pendingLoads.delete(nodeId);
+        const ref = this.componentRefs.get(nodeId);
+        if (!ref) {
+            return;
+        }
+        ref.destroy();
+        this.componentRefs.delete(nodeId);
+    }
+    destroy() {
+        for (const sub of this.pendingLoads.values()) {
+            sub.unsubscribe();
+        }
+        for (const ref of this.componentRefs.values()) {
+            ref.destroy();
+        }
+        this.pendingLoads.clear();
+        this.componentRefs.clear();
+        this.config = undefined;
+    }
+    // ─────────────────────────────────────────────────────────────────────────────────────────
+    // Nhóm hàm cho nơi dùng CHỦ ĐỘNG gọi — không phải chờ người dùng bấm nút trên khối.
+    // Sửa cây thì dùng thẳng `TreeService` rồi gọi `refresh()` — xem demo trong core-ui.
+    // ─────────────────────────────────────────────────────────────────────────────────────────
+    /**
+     * Báo cho service biết cây vừa đổi từ bên ngoài (thêm/xoá khối, sắp gọn, nạp bố cục khác).
+     *
+     * 🔴 PHẢI thay THAM CHIẾU của node gốc, không chỉ bơm `version`.
+     * `@for … track item.id` giữ nguyên object khi id không đổi, nên `<gridster-item [item]="…">` vẫn
+     * nhận đúng object cũ và gridster không hề biết `x/y/cols/rows/layerIndex` vừa bị sửa. Bơm mỗi
+     * `version` thì computed chạy lại nhưng trả về CÙNG mảng cũ — lưới đứng im (đo 28/08/2026: bấm
+     * "Sắp gọn" cây đã dồn khít mà màn hình không nhúc nhích; bật chồng khối mà `$item.layerIndex`
+     * vẫn trống).
+     *
+     * Nhân bản NÔNG cả node gốc và danh sách con là đủ: mảng mới → `@for` dựng lại item, object con
+     * mới → gridster đọc lại toàn bộ toạ độ.
+     */
+    refresh(event) {
+        const root = event?.root ?? this.rootNode();
+        if (!root) {
+            this.version.update((v) => v + 1);
+            return;
+        }
+        if (this.config) {
+            this.config = { ...this.config, data: root };
+        }
+        this.rootNode.set(this.shallowCloneTree(root));
+        this.version.update((v) => v + 1);
+    }
+    /** Nhân bản nông theo cả chiều sâu: mỗi node và mảng `children` thành tham chiếu mới. */
+    /**
+     * Nhân bản SÂU cả cây — dùng cho `exportLayout()`.
+     *
+     * 🔴 BỎ `getComponentOutlet` khỏi bản sao: nó là một HÀM, không tuần tự hoá được nên gửi xuống
+     * backend là hỏng (`JSON.stringify` nuốt mất, `structuredClone` ném lỗi). Nạp lại thì hàm phân
+     * giải chung của cấu hình lo — component suy ra từ `data.type`, không cần lưu.
+     */
+    deepCloneTree(node) {
+        const copy = { ...node };
+        // Cắt hàm phân giải — xem chú thích trên.
+        delete copy.getComponentOutlet;
+        const { children, data, ...rest } = copy;
+        return {
+            ...rest,
+            ...(data === undefined ? {} : { data: cloneDeep(data) }),
+            ...(children ? { children: children.map((child) => this.deepCloneTree(child)) } : {}),
+        };
+    }
+    shallowCloneTree(node) {
+        if (!node.children?.length) {
+            return { ...node };
+        }
+        return { ...node, children: node.children.map((child) => this.shallowCloneTree(child)) };
+    }
+    /**
+     * Gán `layerIndex` khác nhau cho từng khối khi bật chồng khối.
+     *
+     * 🔴 `allowMultiLayer: true` MỘT MÌNH không cho khối đè nhau. Mã lib so `layerIndex` của hai khối:
+     * KHÁC nhau thì cho đè, GIỐNG nhau vẫn báo va chạm. Khối không khai `layerIndex` đều rơi về
+     * `defaultLayerIndex` — tức CÙNG lớp, nên kéo vào nhau là bị chặn y như lưới thường (người dùng
+     * báo 28/08/2026: "bật chồng khối nhưng khi kéo thì các khối vẫn di chuyển theo").
+     *
+     * Nơi dùng tự khai `layerIndex` thì giữ nguyên; ai không khai thì thư viện xếp mỗi khối một lớp
+     * theo thứ tự, đủ để mọi cặp đều khác lớp.
+     */
+    assignOverlapLayers(root) {
+        const config = this.config;
+        const canOverlap = config?.mode === "free" /* E_gridLayout_mode_string.free */ || (config?.allowOverlap ?? false);
+        if (!canOverlap) {
+            return;
+        }
+        let layer = 0;
+        const walk = (node) => {
+            for (const child of node.children ?? []) {
+                if (child.layerIndex === undefined) {
+                    layer += 1;
+                    child.layerIndex = layer;
+                }
+                walk(child);
+            }
+        };
+        walk(root);
+    }
+    /** Đưa một khối lên trên tất cả: lớp của nó = lớp lớn nhất đang có + 1. */
+    raiseToTopLayer(item) {
+        const root = this.rootNode();
+        if (!root) {
+            return;
+        }
+        let topLayer = 0;
+        const walk = (node) => {
+            for (const child of node.children ?? []) {
+                topLayer = Math.max(topLayer, child.layerIndex ?? 0);
+                walk(child);
+            }
+        };
+        walk(root);
+        // `item` gridster trả về CHÍNH là object node của cây (truyền thẳng qua `[item]`), nên gán vào
+        // đây là cây cũng đổi theo.
+        const node = item;
+        if (node.layerIndex === topLayer) {
+            return;
+        }
+        node.layerIndex = topLayer + 1;
+    }
+    // ─────────────────────────────────────────────────────────────────────────────────────────
+    // SỬA CÂY — thư viện đã giữ cây nên bạn KHÔNG phải truyền nó vào.
+    // Mọi hàm dưới đây tự vẽ lại; không cần gọi `refresh()`.
+    // ─────────────────────────────────────────────────────────────────────────────────────────
+    /**
+     * Thêm một khối.
+     *
+     * @param item khối mới — KHÔNG cần `id` (thư viện sinh) và `x`/`y` (tự đặt xuống hàng trống).
+     * @param parentId container muốn thêm vào; bỏ trống thì thêm vào mặt phẳng gốc.
+     * @returns khối vừa tạo (kèm `id` vừa sinh), hoặc `undefined` khi không tìm thấy container.
+     */
+    addBlock(item, parentId) {
+        const root = this.rootNode();
+        const added = root ? this.treeService.addChild(root, parentId ?? root.id, item) : undefined;
+        if (added) {
+            this.refresh();
+        }
+        return added;
+    }
+    /** Xoá một khối. Xoá container là xoá cả ruột. Trả `false` khi không xoá được (vd khối gốc). */
+    removeBlock(id) {
+        const root = this.rootNode();
+        const done = root ? this.treeService.removeById(root, id) : false;
+        if (done) {
+            this.refresh();
+        }
+        return done;
+    }
+    /** Biến khối đơn thành CONTAINER — nội dung cũ thành khối con đầu tiên, không mất dữ liệu. */
+    toContainer(id) {
+        const root = this.rootNode();
+        const done = root ? this.treeService.toContainer(root, id, this.config?.cols ?? 12) : false;
+        if (done) {
+            this.refresh();
+        }
+        return done;
+    }
+    /** Đưa CONTAINER về khối đơn — khối con được nâng lên cấp trên, không bị xoá. */
+    toSingle(id) {
+        const root = this.rootNode();
+        const done = root ? this.treeService.toSingle(root, id) : false;
+        if (done) {
+            this.refresh();
+        }
+        return done;
+    }
+    /** Dồn khối khít lên trên, lấp hết chỗ trống. Đệ quy vào container. */
+    compact() {
+        const root = this.rootNode();
+        if (!root) {
+            return;
+        }
+        this.treeService.compact(root, this.config?.cols ?? 12);
+        this.refresh();
+    }
+    /**
+     * Bố cục HIỆN TẠI, đã cắt mọi tham chiếu — gửi thẳng xuống backend được.
+     *
+     * Dùng khi bấm nút Lưu. Khác `Root()` ở chỗ đây là bản SAO: nơi dùng có sửa gì trên kết quả cũng
+     * không đụng tới cây mà thư viện đang vẽ.
+     *
+     * @returns `undefined` khi mặt phẳng chưa `init()`.
+     */
+    exportLayout() {
+        const root = this.rootNode();
+        return root ? this.deepCloneTree(root) : undefined;
+    }
+    /** Tìm một khối theo id. */
+    findBlock(id) {
+        const root = this.rootNode();
+        return root ? this.treeService.findById(root, id) : undefined;
+    }
+    /** Tìm khối cha trực tiếp của một khối. */
+    findParentBlock(id) {
+        const root = this.rootNode();
+        return root ? this.treeService.findParent(root, id) : undefined;
+    }
+    /**
+     * Cổng DUY NHẤT cho canvas của thư viện. Nơi dùng KHÔNG gọi tới đây.
+     *
+     * Mọi thứ canvas cần đều là `private` để không lọt ra API công khai; gom vào một getter theo đúng
+     * khuôn `FunctionsControl` của bộ quy ước, thay vì để rải rác hàm public mà người ngoài tưởng
+     * mình phải gọi (người dùng chốt 28/08/2026).
+     */
+    get FunctionsControl() {
+        return {
+            maxContainerDepth: () => this.maxContainerDepth(),
+            containerPadding: () => this.containerPadding(),
+            gridsterOptions: (depth, cb) => this.buildGridsterOptions(depth, cb),
+            attachNode: (node, depth, host) => this.attachNode(node, depth, host),
+            detachNode: (nodeId) => this.detachNode(nodeId),
+        };
+    }
+    applyInputs(ref, node, depth) {
+        ref.setInput('data', node.data);
+        ref.setInput('node', node);
+        ref.setInput('isEditMode', this.editMode());
+        ref.setInput('depth', depth);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiGridLayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiGridLayoutService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiGridLayoutService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+/**
+ * Mặt phẳng kéo thả. Đệ quy: khối có `children` thì ruột nó lại là một mặt phẳng nữa.
+ *
+ * Nơi dùng KHÔNG dựng component này trực tiếp cho từng khối — chỉ đặt MỘT thẻ ở gốc và truyền
+ * `nodeComponentType` qua `LibsUiGridLayoutService.init()`. Thư viện tự gắn component cho mọi khối.
+ */
+class LibsUiGridLayoutCanvasComponent {
+    /**
+     * @internal Chỉ mặt phẳng LỒNG dùng — thư viện tự truyền khi vẽ ruột container.
+     *
+     * Nơi dùng KHÔNG truyền: mặt phẳng gốc đọc cây từ service (đã đưa vào qua `init()`), truyền thêm
+     * ở đây là khai hai lần cùng một thứ (người dùng chốt 28/08/2026).
+     */
+    node = input();
+    /** @internal Chỉ mặt phẳng LỒNG dùng — thư viện tự truyền. */
+    depth = input(0);
+    /**
+     * Bố cục vừa đổi do NGƯỜI DÙNG kéo hoặc đổi kích thước khối.
+     *
+     * Nơi dùng tự gọi `addBlock` · `removeBlock` · `compact` thì KHÔNG bắn — họ vừa gọi thì đã biết,
+     * bắn ngược lại là thừa (người dùng chốt 28/08/2026).
+     */
+    outChange = output();
+    /**
+     * Người dùng bấm nút XOÁ trên một khối. Thư viện CHƯA xoá — gọi `event.confirm()` để xoá thật.
+     * Cần hỏi trước thì hỏi xong mới gọi; không cho phép thì đừng gọi.
+     */
+    outRemoveNode = output();
+    /**
+     * Người dùng bấm nút THÊM trên một container. Thư viện KHÔNG tự thêm — nó không biết bạn có
+     * những loại khối nào. Mở menu chọn loại rồi gọi `event.confirm(item)` với khối bạn muốn thêm.
+     */
+    outAddBlockInside = output();
+    /** Người dùng bấm nút GỘP/TÁCH. Thư viện chưa làm gì — gọi `event.confirm()` để thực hiện. */
+    outToggleType = output();
+    gridsterRef = viewChild(GridsterComponent);
+    /** mỗi ô một chỗ gắn riêng — cùng thứ tự với `children()` */
+    itemHosts = viewChildren('itemHost', { read: ViewContainerRef });
+    /** Sáu chấm của tay cầm kéo — chỉ để `@for` dựng đủ 6 thẻ, giá trị không dùng tới. */
+    dragBarDots = [0, 1, 2, 3, 4, 5];
+    service = inject(LibsUiGridLayoutService);
+    /**
+     * Node THẬT của mặt phẳng này.
+     *
+     * 🔴 Mặt phẳng GỐC (depth 0) đọc cây từ SERVICE, không dùng input.
+     * Nơi dùng thường sửa cây TẠI CHỖ (`treeService.compact(tree)`) rồi gọi `refresh()`, nên signal
+     * `root()` của họ giữ nguyên tham chiếu và input `node` không hề đổi — `@for` không dựng lại
+     * `gridster-item`, lưới đứng im dù dữ liệu đã khác (đo 28/08/2026: bấm "Sắp gọn" không tác dụng).
+     * `refresh()` của service thay tham chiếu cây, nên đọc từ đó mới thấy thay đổi.
+     *
+     * Mặt phẳng LỒNG vẫn dùng input: nó nhận node con từ mặt phẳng cha, vốn đã là object mới.
+     */
+    currentNode = computed(() => {
+        this.service.Version();
+        if (this.depth() > 0) {
+            return this.node() ?? emptyRootNode();
+        }
+        return this.service.Root() ?? emptyRootNode();
+    });
+    children = computed(() => this.currentNode().children ?? []);
+    isNestedCanvas = computed(() => this.depth() > 0);
+    /** trần lồng container — khối đã chạm trần thì không cho chuyển thành container */
+    maxContainerDepth = computed(() => this.service.FunctionsControl.maxContainerDepth());
+    /**
+     * Lề trong của container, px.
+     *
+     * 🔴 Đặt trên VỎ container, không đặt vào lưới con. Lưới con giữ nguyên `margin: 2` như cũ; lề
+     * này chỉ co ruột lại khỏi biên vỏ, nhờ đó tay cầm đổi kích thước của khối con luôn nằm trong tầm
+     * chuột (người dùng chốt 28/08/2026).
+     */
+    containerPadding = computed(() => `${this.service.FunctionsControl.containerPadding()}px`);
+    /** Dải kéo chỉ hiện ở chế độ sửa — chế độ xem không kéo được nên hiện dải là gây nhầm. */
+    isEditMode = computed(() => this.service.IsEditMode());
+    gridOptions = computed(() => {
+        // Đọc `Version` để `init()` lại (đổi chế độ, bật/tắt chồng khối) sinh ra options MỚI —
+        // gridster chỉ áp dụng cấu hình khi tham chiếu `options` đổi.
+        this.service.Version();
+        return this.service.FunctionsControl.gridsterOptions(this.depth(), () => this.outChange.emit({ root: this.currentNode() }));
+    });
+    constructor() {
+        // Gắn component của nơi dùng vào từng ô, và gắn LẠI mỗi khi cây đổi.
+        // Dùng effect vì `itemHosts()` chỉ có giá trị sau khi Angular dựng xong @for.
+        effect(() => {
+            const hosts = this.itemHosts();
+            const items = this.children();
+            items.forEach((item, i) => {
+                const host = hosts[i];
+                if (!host) {
+                    return;
+                }
+                // Khối có con là CONTAINER: ruột nó do mặt phẳng lồng vẽ, không gắn component nội dung.
+                if ((item.children?.length ?? 0) > 0) {
+                    return;
+                }
+                this.service.FunctionsControl.attachNode(item, this.depth() + 1, host);
+            });
+        });
+    }
+    ngOnDestroy() {
+        for (const item of this.children()) {
+            this.service.FunctionsControl.detachNode(item.id);
+        }
+    }
+    /** Vẽ lại lưới — gọi khi khung ngoài đổi kích thước hoặc cây vừa đổi diện rộng. */
+    get FunctionControl() {
+        return {
+            veLaiLuoi: () => this.gridsterRef()?.optionsChanged(),
+        };
+    }
+    handlerTrackNode(_index, item) {
+        return item.id;
+    }
+    /**
+     * 🔴 Chặn `mousedown` nổi lên lưới CHA khi thao tác trong lưới con.
+     * Không chặn thì cả hai lưới cùng nhận một cú bấm: kéo khối con là nhấc luôn container.
+     */
+    /**
+     * Chặn `mousedown` của khối trong lưới LỒNG nổi lên lưới cha.
+     *
+     * Chỉ chặn ở lưới lồng: lưới cấp trang không có cha nào để chặn, và chặn ở đó sẽ nuốt luôn thao
+     * tác của chính nó.
+     */
+    /**
+     * 🔴 Ba handler dưới đây PHẢI `stopPropagation`.
+     * Nút nằm trong vùng mang `dragHandleClass`, không chặn thì cú bấm bị gridster hiểu là bắt đầu kéo
+     * và `delayStart: 160` nuốt luôn `click` — người dùng thấy như nút chết.
+     */
+    handlerRemove(event, node) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.outRemoveNode.emit({ nodeId: node.id, node, confirm: () => this.service.removeBlock(node.id) });
+    }
+    handlerAddInside(event, node) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.outAddBlockInside.emit({
+            nodeId: node.id,
+            node,
+            confirm: (item) => this.service.addBlock(item, node.id),
+        });
+    }
+    handlerToggleType(event, node) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.outToggleType.emit({
+            nodeId: node.id,
+            node,
+            // Gộp hay tách suy ra từ chính khối: đang là container thì tách, không thì gộp.
+            confirm: () => (this.isContainer(node) ? this.service.toSingle(node.id) : this.service.toContainer(node.id)),
+        });
+    }
+    /** khối này có phải container không (có khối con) */
+    isContainer(item) {
+        return (item.children?.length ?? 0) > 0;
+    }
+    /** container đã chạm trần lồng thì không cho thêm khối vào trong nữa */
+    canAddInside(item) {
+        return this.isContainer(item) && this.depth() < this.maxContainerDepth();
+    }
+    /** khối đơn ở cấp chưa chạm trần mới được chuyển thành container */
+    canToggleType(item) {
+        if (this.isContainer(item)) {
+            return true;
+        }
+        return this.depth() < this.maxContainerDepth();
+    }
+    handlerBlockParentDrag(event) {
+        if (!this.isNestedCanvas()) {
+            return;
+        }
+        event.stopPropagation();
+    }
+    handlerMouseDownTrongLuoi(event) {
+        if (this.depth() === 0) {
+            return;
+        }
+        event.stopPropagation();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiGridLayoutCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiGridLayoutCanvasComponent, isStandalone: true, selector: "libs_ui-services-grid_layout-canvas", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outChange: "outChange", outRemoveNode: "outRemoveNode", outAddBlockInside: "outAddBlockInside", outToggleType: "outToggleType" }, viewQueries: [{ propertyName: "gridsterRef", first: true, predicate: GridsterComponent, descendants: true, isSignal: true }, { propertyName: "itemHosts", predicate: ["itemHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<!-- \uD83D\uDD34 `relative` l\u00E0 B\u1EAET BU\u1ED8C, C\u1EA4M b\u1ECF.\n     gridster \u0111\u1ED5i v\u1ECB tr\u00ED chu\u1ED9t th\u00E0nh \u00F4 l\u01B0\u1EDBi b\u1EB1ng `e.clientY + (el.scrollTop - el.offsetTop)` \u2014 c\u00F4ng\n     th\u1EE9c \u0111\u00F3 ch\u1EC9 \u0111\u00FAng khi `offsetParent` c\u1EE7a <gridster> CH\u00CDNH L\u00C0 kh\u1ED1i cu\u1ED9n n\u00E0y. Thi\u1EBFu `relative` th\u00EC\n     `offsetParent` nh\u1EA3y l\u00EAn kh\u1ED1i bao ngo\u00E0i: `offsetTop` tr\u1EA3 16 trong khi l\u1EC7ch th\u1EADt l\u00E0 65 \u2192 gridster\n     t\u00EDnh \u00F4 sai 49px, \u00F4 ch\u1EDD \u0111\u1EB7t hi\u1EC7n l\u1EC7ch kh\u1ECFi con tr\u1ECF n\u00EAn k\u00E9o th\u1EA3 kh\u00F4ng \u0111\u1ED5i \u0111\u01B0\u1EE3c v\u1ECB tr\u00ED, v\u00E0 k\u00E9o m\u00E9p\n     c\u0169ng t\u00EDnh sai \u0111i\u1EC3m d\u1EEBng. -->\n<div\n  class=\"libs-ui-grid-layout-scroll-area relative h-full min-h-0 w-full min-w-0\"\n  [class.overflow-y-auto]=\"!isNestedCanvas()\"\n  (mousedown)=\"handlerMouseDownTrongLuoi($event)\">\n  <gridster class=\"h-full w-full\" [options]=\"gridOptions()\">\n    @for (item of children(); track item.id) {\n      <!-- \uD83D\uDD34 Ch\u1EB7n `mousedown` t\u1EA1i \u0110\u00C2Y cho l\u01B0\u1EDBi l\u1ED3ng \u2014 C\u1EA4M b\u1ECF v\u00E0 C\u1EA4M chuy\u1EC3n sang ch\u1ED7 kh\u00E1c.\n           `ignoreContentClass` m\u1ED9t m\u00ECnh KH\u00D4NG \u0111\u1EE7: `delayStart: 160` l\u00E0m M\u1ED6I l\u01B0\u1EDBi l\u00EAn l\u1ECBch\n           `dragStart` b\u1EB1ng `setTimeout` ngay t\u1EA1i `mousedown`, c\u00F2n `stopPropagation` m\u00E0 lib g\u1ECDi b\u00EAn\n           trong `dragStart` ch\u1EA1y sau 160ms n\u00EAn qu\u00E1 mu\u1ED9n \u2014 l\u01B0\u1EDBi CHA \u0111\u00E3 k\u1ECBp nh\u1EADn (\u0111o 28/08/2026: k\u00E9o\n           d\u1EA3i kh\u1ED1i con, chu\u1ED7i class duy\u1EC7t l\u00EAn \u0110\u00DANG m\u00E0 container v\u1EABn nh\u1EA3y 0,0 \u2192 0,1).\n           G\u1EAFn \u1EDF `gridster-item` l\u00E0 \u0111\u00FAng bi\u00EAn: l\u01B0\u1EDBi con nghe tr\u00EAn ch\u00EDnh ph\u1EA7n t\u1EED n\u00E0y n\u00EAn \u0111\u00E3 nh\u1EADn xong,\n           l\u01B0\u1EDBi cha \u1EDF ngo\u00E0i b\u1ECB ch\u1EB7n. -->\n      <gridster-item\n        [item]=\"item\"\n        (mousedown)=\"handlerBlockParentDrag($event)\">\n        <!-- \uD83D\uDD34 V\u1ECF n\u00E0y mang `dragHandleClass` \u2014 C\u1EA4M b\u1ECF.\n             `ignoreContent: true` b\u1EAFt gridster CH\u1EC8 cho k\u00E9o khi ch\u1ED7 b\u1EA5m n\u1EB1m d\u01B0\u1EDBi m\u1ED9t ph\u1EA7n t\u1EED c\u00F3\n             `dragHandleClass`. Kh\u00F4ng c\u00F3 v\u1ECF n\u00E0y th\u00EC component c\u1EE7a n\u01A1i d\u00F9ng (th\u01B0 vi\u1EC7n kh\u00F4ng ki\u1EC3m so\u00E1t\n             \u0111\u01B0\u1EE3c class c\u1EE7a n\u00F3) s\u1EBD kh\u00F4ng c\u00F3 tay c\u1EA7m n\u00E0o, v\u00E0 KH\u00D4NG kh\u1ED1i n\u00E0o k\u00E9o \u0111\u01B0\u1EE3c \u2014 \u0111o 28/08/2026:\n             k\u00E9o 320px, to\u1EA1 \u0111\u1ED9 kh\u1ED1i gi\u1EEF nguy\u00EAn x=3,y=0.\n             T\u00EAn class theo c\u1EA5p: l\u01B0\u1EDBi trang v\u00E0 l\u01B0\u1EDBi l\u1ED3ng d\u00F9ng hai t\u00EAn KH\u00C1C nhau, n\u1EBFu kh\u00F4ng l\u01B0\u1EDBi cha\n             c\u0169ng nh\u1EADn ra tay c\u1EA7m c\u1EE7a kh\u1ED1i con v\u00E0 nh\u1EA5c lu\u00F4n container. -->\n        <!-- \uD83D\uDD34 V\u1ECF KH\u00D4NG mang `dragHandleClass` \u2014 C\u1EA4M th\u00EAm l\u1EA1i.\n             K\u00E9o ch\u1EC9 \u0111\u01B0\u1EE3c ph\u00E9p b\u1EAFt \u0111\u1EA7u t\u1EEB D\u1EA2I XANH (ng\u01B0\u1EDDi d\u00F9ng ch\u1ED1t 28/08/2026: \"ph\u1EA3i hover v\u00E0o v\u00F9ng\n             m\u00E0u xanh th\u00EC m\u1EDBi k\u00E9o th\u1EA3 \u0111\u01B0\u1EE3c cho \u0111\u1ED3ng nh\u1EA5t\"). Cho c\u1EA3 v\u1ECF l\u00E0m tay c\u1EA7m th\u00EC b\u1EA5m \u0111\u00E2u c\u0169ng\n             k\u00E9o, v\u00E0 kh\u1ED1i con n\u1EB1m trong container s\u1EBD nh\u1EA5c lu\u00F4n container v\u00EC l\u01B0\u1EDBi cha duy\u1EC7t l\u00EAn g\u1EB7p\n             tay c\u1EA7m c\u1EE7a v\u1ECF container tr\u01B0\u1EDBc.\n             V\u1ECF kh\u1ED1i con v\u1EABn gi\u1EEF class CH\u1EB6N \u0111\u1EC3 l\u01B0\u1EDBi cha d\u1EEBng \u0111\u00FAng \u1EDF bi\u00EAn. -->\n        <div\n          class=\"libs-ui-grid-layout-block-shell group relative h-full w-full min-w-0\"\n          [class.libs-ui-grid-layout-block-parent-drag]=\"isNestedCanvas()\">\n          <!-- D\u1EA3i k\u00E9o: hi\u1EC7n khi r\u00EA chu\u1ED9t v\u00E0o kh\u1ED1i, ba ch\u1EA5m l\u00E0 d\u1EA5u hi\u1EC7u k\u00E9o quen thu\u1ED9c.\n               Ng\u01B0\u1EDDi d\u00F9ng c\u1EA7n m\u1ED9t ch\u1ED7 b\u00E1m R\u00D5 R\u00C0NG thay v\u00EC \u0111o\u00E1n xem b\u1EA5m \u0111\u00E2u th\u00EC k\u00E9o \u0111\u01B0\u1EE3c\n               (ch\u1ED1t 28/08/2026, theo \u0111\u00FAng d\u1EA3i \u0111ang d\u00F9ng \u1EDF m\u00E0n Customer 360 c\u1EE7a mobio-web). -->\n          @if (isEditMode()) {\n            <!-- \uD83D\uDD34 D\u1EA3i PH\u1EA2I mang tay c\u1EA7m \u0110\u00DANG C\u1EA4P c\u1EE7a n\u00F3. D\u1EA3i nh\u1EADn chu\u1ED9t (`pointer-events: auto`),\n                 n\u00EAn n\u1EBFu kh\u00F4ng mang tay c\u1EA7m th\u00EC `checkDragHandleClass` duy\u1EC7t l\u00EAn g\u1EB7p tay c\u1EA7m c\u1EE7a\n                 container v\u00E0 nh\u1EA5c container thay v\u00EC kh\u1ED1i con (\u0111o 28/08/2026: k\u00E9o d\u1EA3i kh\u1ED1i con,\n                 container nh\u1EA3y 0,0 \u2192 0,1 c\u00F2n kh\u1ED1i con \u0111\u1EE9ng im).\n                 \uD83D\uDD34 D\u1EA3i CH\u1EC8 mang tay c\u1EA7m, C\u1EA4M mang th\u00EAm class ch\u1EB7n: `checkDragHandleClass` x\u00E9t hai\n                 class \u0111\u00F3 tr\u00EAn C\u00D9NG m\u1ED9t node n\u00EAn \u0111\u1EC3 chung l\u00E0 k\u00E9o h\u1ECFng (\u0111o 28/08/2026: b\u1EA5m d\u1EA3i kh\u1ED1i\n                 con k\u00E9o 140px, kh\u1ED1i \u0111\u1EE9ng im). Vi\u1EC7c ch\u1EB7n l\u01B0\u1EDBi cha do V\u1ECE KH\u1ED0I lo. -->\n            <div\n              class=\"libs-ui-grid-layout-drag-bar\"\n              [class.libs-ui-grid-layout-drag-bar-child]=\"isNestedCanvas()\"\n              [class.libs-ui-grid-layout-drag-handle]=\"!isNestedCanvas()\"\n              [class.libs-ui-grid-layout-drag-handle-child]=\"isNestedCanvas()\">\n              <span class=\"libs-ui-grid-layout-drag-bar-dots\">\n                @for (dot of dragBarDots; track dot) {\n                  <span class=\"libs-ui-grid-layout-drag-bar-dot\"></span>\n                }\n              </span>\n            </div>\n          }\n\n          <!-- Khung ch\u1EE9a component c\u1EE7a n\u01A1i d\u00F9ng.\n               \uD83D\uDD34 PH\u1EA2I c\u00F3 khung th\u1EADt (kh\u00F4ng ph\u1EA3i `ng-container` tr\u1ED1ng): n\u00F3 lo h\u1ED9 n\u01A1i d\u00F9ng ph\u1EA7n l\u1EA5p \u0111\u1EA7y\n               \u00F4 v\u00E0 vi\u1EC1n b\u00E1o ch\u1EBF \u0111\u1ED9 s\u1EEDa. Kh\u00F4ng c\u00F3 khung th\u00EC m\u1ED7i component n\u1ED9i dung l\u1EA1i ph\u1EA3i t\u1EF1 vi\u1EBFt\n               `:host { width/height: 100% }` + vi\u1EC1n \u0111\u1EE9t \u2014 \u0111\u00F3 l\u00E0 vi\u1EC7c c\u1EE7a th\u01B0 vi\u1EC7n, kh\u00F4ng ph\u1EA3i c\u1EE7a\n               ng\u01B0\u1EDDi d\u00F9ng (ng\u01B0\u1EDDi d\u00F9ng ch\u1ED1t 28/08/2026).\n               M\u1ED7i kh\u1ED1i m\u1ED9t ViewContainerRef ri\u00EAng n\u00EAn component n\u1EB1m \u0111\u00FAng \u00F4 c\u1EE7a n\u00F3. -->\n          <div\n            class=\"libs-ui-grid-layout-content-frame\"\n            [class.libs-ui-grid-layout-content-frame-edit]=\"isEditMode() && !isContainer(item)\"\n            [class.libs-ui-grid-layout-content-frame-empty]=\"isContainer(item)\">\n            <ng-container #itemHost />\n          </div>\n\n          <!-- D\u1EA5u hi\u1EC7u CONTAINER: nh\u00E3n g\u00F3c tr\u00EAn-ph\u1EA3i + vi\u1EC1n \u0111\u1EE9t bao ru\u1ED9t. Kh\u00F4ng c\u00F3 d\u1EA5u hi\u1EC7u th\u00EC\n               ng\u01B0\u1EDDi d\u00F9ng kh\u00F4ng bi\u1EBFt kh\u1ED1i n\u00E0o ch\u1EE9a \u0111\u01B0\u1EE3c kh\u1ED1i kh\u00E1c (ch\u1ED1t 28/08/2026, theo \u0111\u00FAng c\u00E1ch\n               m\u00E0n Customer 360 c\u1EE7a mobio-web \u0111ang l\u00E0m). -->\n          @if (isEditMode() && isContainer(item)) {\n            <div class=\"libs-ui-grid-layout-container-label\">Kh\u1ED1i gh\u00E9p</div>\n            <div class=\"libs-ui-grid-layout-container-border\"></div>\n          }\n\n          <!-- Thanh c\u00F4ng c\u1EE5: hi\u1EC7n khi r\u00EA chu\u1ED9t v\u00E0o kh\u1ED1i.\n               \uD83D\uDD34 D\u00F9ng `libs_ui-components-buttons-button` \u2014 C\u1EA4M t\u1EF1 d\u1EF1ng th\u1EBB `<button>`.\n               Component n\u00E0y \u0111\u00E3 c\u00F3 s\u1EB5n ki\u1EC3u n\u00FAt, c\u1EE1 n\u00FAt v\u00E0 bong b\u00F3ng ch\u00FA th\u00EDch theo \u0111\u00FAng b\u1ED9 giao di\u1EC7n\n               c\u1EE7a s\u1EA3n ph\u1EA9m; t\u1EF1 d\u1EF1ng l\u00E0 m\u1ED7i n\u01A1i m\u1ED9t ki\u1EC3u v\u00E0 m\u1EA5t lu\u00F4n tooltip. -->\n          @if (isEditMode()) {\n            <div\n              class=\"libs-ui-grid-layout-toolbar\"\n              [class.libs-ui-grid-layout-toolbar-child]=\"isNestedCanvas()\">\n              @if (canAddInside(item)) {\n                <libs_ui-components-buttons-button\n                  [type]=\"'button-third'\"\n                  [iconOnlyType]=\"true\"\n                  [sizeButton]=\"'smaller'\"\n                  [classIconLeft]=\"'libs-ui-icon-add'\"\n                  [popover]=\"{ config: { content: 'Th\u00EAm kh\u1ED1i v\u00E0o trong', zIndex: 1300 } }\"\n                  (outClick)=\"handlerAddInside($event, item)\" />\n              }\n              @if (canToggleType(item)) {\n                <libs_ui-components-buttons-button\n                  [type]=\"'button-third'\"\n                  [iconOnlyType]=\"true\"\n                  [sizeButton]=\"'smaller'\"\n                  [classIconLeft]=\"isContainer(item) ? 'libs-ui-icon-split-cell' : 'libs-ui-icon-merge-cell'\"\n                  [popover]=\"{ config: { content: isContainer(item) ? '\u0110\u01B0a v\u1EC1 kh\u1ED1i \u0111\u01A1n' : 'Chuy\u1EC3n th\u00E0nh kh\u1ED1i gh\u00E9p', zIndex: 1300 } }\"\n                  (outClick)=\"handlerToggleType($event, item)\" />\n              }\n              <libs_ui-components-buttons-button\n                [type]=\"'button-third-hover-danger'\"\n                [iconOnlyType]=\"true\"\n                [sizeButton]=\"'smaller'\"\n                [classIconLeft]=\"'libs-ui-icon-remove'\"\n                [popover]=\"{ config: { content: isContainer(item) ? 'Xo\u00E1 c\u1EA3 kh\u1ED1i gh\u00E9p' : 'Xo\u00E1 kh\u1ED1i', zIndex: 1300 } }\"\n                (outClick)=\"handlerRemove($event, item)\" />\n            </div>\n          }\n\n          @if (item.children && item.children.length > 0) {\n            <!-- Kh\u1ED1i c\u00F3 con \u2192 ru\u1ED9t n\u00F3 l\u1EA1i l\u00E0 m\u1ED9t m\u1EB7t ph\u1EB3ng n\u1EEFa. \u0110\u1EC7 quy \u1EDF \u0111\u00E2y, n\u01A1i d\u00F9ng kh\u00F4ng ph\u1EA3i lo.\n                 L\u1EC1 \u0111\u1EB7t \u1EDF \u0110\u00C2Y (v\u1ECF container), kh\u00F4ng \u0111\u1EB7t v\u00E0o l\u01B0\u1EDBi con \u2014 l\u01B0\u1EDBi con gi\u1EEF nguy\u00EAn khe 2px. -->\n            <libs_ui-services-grid_layout-canvas\n              class=\"block h-full w-full\"\n              [style.padding]=\"containerPadding()\"\n              [node]=\"item\"\n              [depth]=\"depth() + 1\"\n              (outChange)=\"outChange.emit($event)\"\n              (outRemoveNode)=\"outRemoveNode.emit($event)\"\n              (outAddBlockInside)=\"outAddBlockInside.emit($event)\"\n              (outToggleType)=\"outToggleType.emit($event)\" />\n          }\n        </div>\n      </gridster-item>\n    }\n  </gridster>\n</div>\n", styles: [":host{display:block;box-sizing:border-box;width:100%;height:100%;min-width:0;min-height:0}.libs-ui-grid-layout-block-shell{container-type:inline-size;display:block;box-sizing:border-box;height:100%}.libs-ui-grid-layout-drag-bar{position:absolute;top:2px;left:50%;z-index:15;display:flex;align-items:center;justify-content:center;width:64px;height:16px;background:transparent;transform:translate(-50%);opacity:1;transition:opacity .12s ease;pointer-events:auto;cursor:move}.libs-ui-grid-layout-drag-bar-dots{display:grid;grid-template-columns:repeat(3,3px);gap:3px;color:#9ca2ad}.libs-ui-grid-layout-drag-bar-dot{width:3px;height:3px;background:currentColor;border-radius:50%}.libs-ui-grid-layout-drag-bar:hover .libs-ui-grid-layout-drag-bar-dots{color:#3d6ef5}.libs-ui-grid-layout-drag-bar:not(.libs-ui-grid-layout-drag-bar-child){opacity:1}.libs-ui-grid-layout-drag-bar-child{top:auto;bottom:0;background:#d9f2e4;border-radius:4px 4px 0 0}.libs-ui-grid-layout-drag-bar-child .libs-ui-grid-layout-drag-bar-dots{color:#9ca2ad}.libs-ui-grid-layout-drag-bar-child:hover .libs-ui-grid-layout-drag-bar-dots{color:#00a757}.libs-ui-grid-layout-drag-bar-child{opacity:0}.libs-ui-grid-layout-block-shell:hover>.libs-ui-grid-layout-drag-bar-child{opacity:1}.libs-ui-grid-layout-block-shell:has(>.libs-ui-grid-layout-drag-bar:not(.libs-ui-grid-layout-drag-bar-child):hover){outline:2px solid #3d6ef5;outline-offset:-2px;border-radius:8px}.libs-ui-grid-layout-block-shell:has(>.libs-ui-grid-layout-drag-bar-child:hover){outline:2px solid #00a757;outline-offset:-2px;border-radius:8px}.libs-ui-grid-layout-container-label{position:absolute;left:6px;top:2px;display:flex;height:20px;align-items:center;z-index:3;padding:0 6px;color:#3d6ef5;font-weight:500;font-size:10px;line-height:14px;background:#dbe4ff;border-radius:4px;pointer-events:none}.libs-ui-grid-layout-content-frame{box-sizing:border-box;width:100%;height:100%;overflow:hidden;border-radius:6px}.libs-ui-grid-layout-content-frame ::ng-deep>*{display:block;box-sizing:border-box;width:100%;height:100%}.libs-ui-grid-layout-content-frame-empty{height:0}.libs-ui-grid-layout-content-frame-edit{border:1px dashed #c3cede}.libs-ui-grid-layout-container-border{position:absolute;inset:0;border:1px dashed #9db4f0;border-radius:8px;pointer-events:none}.libs-ui-grid-layout-toolbar{position:absolute;top:2px;right:8px;z-index:24;display:flex;gap:2px;align-items:center;height:20px;background:#fff;border-radius:4px;box-shadow:0 2px 8px #0716311f;opacity:0;transition:opacity .12s ease}.libs-ui-grid-layout-toolbar-child{top:50%;right:8px;left:auto;transform:translateY(-50%)}.libs-ui-grid-layout-block-shell:hover>.libs-ui-grid-layout-toolbar{opacity:1}:host ::ng-deep gridster{background:transparent}:host ::ng-deep .gridster-item-resizable-handler.handle-n,:host ::ng-deep .gridster-item-resizable-handler.handle-s{height:16px}:host ::ng-deep .gridster-item-resizable-handler.handle-e,:host ::ng-deep .gridster-item-resizable-handler.handle-w{width:16px}:host ::ng-deep .gridster-item-resizable-handler.handle-n{top:0}:host ::ng-deep .gridster-item-resizable-handler.handle-s{bottom:0}:host ::ng-deep .gridster-item-resizable-handler.handle-e{right:0}:host ::ng-deep .gridster-item-resizable-handler.handle-w{left:0}:host ::ng-deep gridster-item.gridster-item-moving,:host ::ng-deep gridster-item.gridster-item-resizing{z-index:30!important}:host ::ng-deep gridster-item.gridster-item-moving>.libs-ui-grid-layout-block-shell,:host ::ng-deep gridster-item.gridster-item-resizing>.libs-ui-grid-layout-block-shell{outline:2px solid #3d6ef5;outline-offset:-2px;border-radius:8px}:host ::ng-deep gridster gridster gridster-item.gridster-item-moving>.libs-ui-grid-layout-block-shell,:host ::ng-deep gridster gridster gridster-item.gridster-item-resizing>.libs-ui-grid-layout-block-shell{outline-color:#00a757}@container (max-width: 80px){.libs-ui-grid-layout-drag-bar{top:26px}}\n"], dependencies: [{ kind: "component", type: LibsUiGridLayoutCanvasComponent, selector: "libs_ui-services-grid_layout-canvas", inputs: ["node", "depth"], outputs: ["outChange", "outRemoveNode", "outAddBlockInside", "outToggleType"] }, { kind: "ngmodule", type: GridsterModule }, { kind: "component", type: i1.GridsterComponent, selector: "gridster", inputs: ["options"] }, { kind: "component", type: i1.GridsterItemComponent, selector: "gridster-item", inputs: ["item"], outputs: ["itemInit", "itemChange", "itemResize"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiGridLayoutCanvasComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-services-grid_layout-canvas', standalone: true, imports: [GridsterModule, LibsUiComponentsButtonsButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- \uD83D\uDD34 `relative` l\u00E0 B\u1EAET BU\u1ED8C, C\u1EA4M b\u1ECF.\n     gridster \u0111\u1ED5i v\u1ECB tr\u00ED chu\u1ED9t th\u00E0nh \u00F4 l\u01B0\u1EDBi b\u1EB1ng `e.clientY + (el.scrollTop - el.offsetTop)` \u2014 c\u00F4ng\n     th\u1EE9c \u0111\u00F3 ch\u1EC9 \u0111\u00FAng khi `offsetParent` c\u1EE7a <gridster> CH\u00CDNH L\u00C0 kh\u1ED1i cu\u1ED9n n\u00E0y. Thi\u1EBFu `relative` th\u00EC\n     `offsetParent` nh\u1EA3y l\u00EAn kh\u1ED1i bao ngo\u00E0i: `offsetTop` tr\u1EA3 16 trong khi l\u1EC7ch th\u1EADt l\u00E0 65 \u2192 gridster\n     t\u00EDnh \u00F4 sai 49px, \u00F4 ch\u1EDD \u0111\u1EB7t hi\u1EC7n l\u1EC7ch kh\u1ECFi con tr\u1ECF n\u00EAn k\u00E9o th\u1EA3 kh\u00F4ng \u0111\u1ED5i \u0111\u01B0\u1EE3c v\u1ECB tr\u00ED, v\u00E0 k\u00E9o m\u00E9p\n     c\u0169ng t\u00EDnh sai \u0111i\u1EC3m d\u1EEBng. -->\n<div\n  class=\"libs-ui-grid-layout-scroll-area relative h-full min-h-0 w-full min-w-0\"\n  [class.overflow-y-auto]=\"!isNestedCanvas()\"\n  (mousedown)=\"handlerMouseDownTrongLuoi($event)\">\n  <gridster class=\"h-full w-full\" [options]=\"gridOptions()\">\n    @for (item of children(); track item.id) {\n      <!-- \uD83D\uDD34 Ch\u1EB7n `mousedown` t\u1EA1i \u0110\u00C2Y cho l\u01B0\u1EDBi l\u1ED3ng \u2014 C\u1EA4M b\u1ECF v\u00E0 C\u1EA4M chuy\u1EC3n sang ch\u1ED7 kh\u00E1c.\n           `ignoreContentClass` m\u1ED9t m\u00ECnh KH\u00D4NG \u0111\u1EE7: `delayStart: 160` l\u00E0m M\u1ED6I l\u01B0\u1EDBi l\u00EAn l\u1ECBch\n           `dragStart` b\u1EB1ng `setTimeout` ngay t\u1EA1i `mousedown`, c\u00F2n `stopPropagation` m\u00E0 lib g\u1ECDi b\u00EAn\n           trong `dragStart` ch\u1EA1y sau 160ms n\u00EAn qu\u00E1 mu\u1ED9n \u2014 l\u01B0\u1EDBi CHA \u0111\u00E3 k\u1ECBp nh\u1EADn (\u0111o 28/08/2026: k\u00E9o\n           d\u1EA3i kh\u1ED1i con, chu\u1ED7i class duy\u1EC7t l\u00EAn \u0110\u00DANG m\u00E0 container v\u1EABn nh\u1EA3y 0,0 \u2192 0,1).\n           G\u1EAFn \u1EDF `gridster-item` l\u00E0 \u0111\u00FAng bi\u00EAn: l\u01B0\u1EDBi con nghe tr\u00EAn ch\u00EDnh ph\u1EA7n t\u1EED n\u00E0y n\u00EAn \u0111\u00E3 nh\u1EADn xong,\n           l\u01B0\u1EDBi cha \u1EDF ngo\u00E0i b\u1ECB ch\u1EB7n. -->\n      <gridster-item\n        [item]=\"item\"\n        (mousedown)=\"handlerBlockParentDrag($event)\">\n        <!-- \uD83D\uDD34 V\u1ECF n\u00E0y mang `dragHandleClass` \u2014 C\u1EA4M b\u1ECF.\n             `ignoreContent: true` b\u1EAFt gridster CH\u1EC8 cho k\u00E9o khi ch\u1ED7 b\u1EA5m n\u1EB1m d\u01B0\u1EDBi m\u1ED9t ph\u1EA7n t\u1EED c\u00F3\n             `dragHandleClass`. Kh\u00F4ng c\u00F3 v\u1ECF n\u00E0y th\u00EC component c\u1EE7a n\u01A1i d\u00F9ng (th\u01B0 vi\u1EC7n kh\u00F4ng ki\u1EC3m so\u00E1t\n             \u0111\u01B0\u1EE3c class c\u1EE7a n\u00F3) s\u1EBD kh\u00F4ng c\u00F3 tay c\u1EA7m n\u00E0o, v\u00E0 KH\u00D4NG kh\u1ED1i n\u00E0o k\u00E9o \u0111\u01B0\u1EE3c \u2014 \u0111o 28/08/2026:\n             k\u00E9o 320px, to\u1EA1 \u0111\u1ED9 kh\u1ED1i gi\u1EEF nguy\u00EAn x=3,y=0.\n             T\u00EAn class theo c\u1EA5p: l\u01B0\u1EDBi trang v\u00E0 l\u01B0\u1EDBi l\u1ED3ng d\u00F9ng hai t\u00EAn KH\u00C1C nhau, n\u1EBFu kh\u00F4ng l\u01B0\u1EDBi cha\n             c\u0169ng nh\u1EADn ra tay c\u1EA7m c\u1EE7a kh\u1ED1i con v\u00E0 nh\u1EA5c lu\u00F4n container. -->\n        <!-- \uD83D\uDD34 V\u1ECF KH\u00D4NG mang `dragHandleClass` \u2014 C\u1EA4M th\u00EAm l\u1EA1i.\n             K\u00E9o ch\u1EC9 \u0111\u01B0\u1EE3c ph\u00E9p b\u1EAFt \u0111\u1EA7u t\u1EEB D\u1EA2I XANH (ng\u01B0\u1EDDi d\u00F9ng ch\u1ED1t 28/08/2026: \"ph\u1EA3i hover v\u00E0o v\u00F9ng\n             m\u00E0u xanh th\u00EC m\u1EDBi k\u00E9o th\u1EA3 \u0111\u01B0\u1EE3c cho \u0111\u1ED3ng nh\u1EA5t\"). Cho c\u1EA3 v\u1ECF l\u00E0m tay c\u1EA7m th\u00EC b\u1EA5m \u0111\u00E2u c\u0169ng\n             k\u00E9o, v\u00E0 kh\u1ED1i con n\u1EB1m trong container s\u1EBD nh\u1EA5c lu\u00F4n container v\u00EC l\u01B0\u1EDBi cha duy\u1EC7t l\u00EAn g\u1EB7p\n             tay c\u1EA7m c\u1EE7a v\u1ECF container tr\u01B0\u1EDBc.\n             V\u1ECF kh\u1ED1i con v\u1EABn gi\u1EEF class CH\u1EB6N \u0111\u1EC3 l\u01B0\u1EDBi cha d\u1EEBng \u0111\u00FAng \u1EDF bi\u00EAn. -->\n        <div\n          class=\"libs-ui-grid-layout-block-shell group relative h-full w-full min-w-0\"\n          [class.libs-ui-grid-layout-block-parent-drag]=\"isNestedCanvas()\">\n          <!-- D\u1EA3i k\u00E9o: hi\u1EC7n khi r\u00EA chu\u1ED9t v\u00E0o kh\u1ED1i, ba ch\u1EA5m l\u00E0 d\u1EA5u hi\u1EC7u k\u00E9o quen thu\u1ED9c.\n               Ng\u01B0\u1EDDi d\u00F9ng c\u1EA7n m\u1ED9t ch\u1ED7 b\u00E1m R\u00D5 R\u00C0NG thay v\u00EC \u0111o\u00E1n xem b\u1EA5m \u0111\u00E2u th\u00EC k\u00E9o \u0111\u01B0\u1EE3c\n               (ch\u1ED1t 28/08/2026, theo \u0111\u00FAng d\u1EA3i \u0111ang d\u00F9ng \u1EDF m\u00E0n Customer 360 c\u1EE7a mobio-web). -->\n          @if (isEditMode()) {\n            <!-- \uD83D\uDD34 D\u1EA3i PH\u1EA2I mang tay c\u1EA7m \u0110\u00DANG C\u1EA4P c\u1EE7a n\u00F3. D\u1EA3i nh\u1EADn chu\u1ED9t (`pointer-events: auto`),\n                 n\u00EAn n\u1EBFu kh\u00F4ng mang tay c\u1EA7m th\u00EC `checkDragHandleClass` duy\u1EC7t l\u00EAn g\u1EB7p tay c\u1EA7m c\u1EE7a\n                 container v\u00E0 nh\u1EA5c container thay v\u00EC kh\u1ED1i con (\u0111o 28/08/2026: k\u00E9o d\u1EA3i kh\u1ED1i con,\n                 container nh\u1EA3y 0,0 \u2192 0,1 c\u00F2n kh\u1ED1i con \u0111\u1EE9ng im).\n                 \uD83D\uDD34 D\u1EA3i CH\u1EC8 mang tay c\u1EA7m, C\u1EA4M mang th\u00EAm class ch\u1EB7n: `checkDragHandleClass` x\u00E9t hai\n                 class \u0111\u00F3 tr\u00EAn C\u00D9NG m\u1ED9t node n\u00EAn \u0111\u1EC3 chung l\u00E0 k\u00E9o h\u1ECFng (\u0111o 28/08/2026: b\u1EA5m d\u1EA3i kh\u1ED1i\n                 con k\u00E9o 140px, kh\u1ED1i \u0111\u1EE9ng im). Vi\u1EC7c ch\u1EB7n l\u01B0\u1EDBi cha do V\u1ECE KH\u1ED0I lo. -->\n            <div\n              class=\"libs-ui-grid-layout-drag-bar\"\n              [class.libs-ui-grid-layout-drag-bar-child]=\"isNestedCanvas()\"\n              [class.libs-ui-grid-layout-drag-handle]=\"!isNestedCanvas()\"\n              [class.libs-ui-grid-layout-drag-handle-child]=\"isNestedCanvas()\">\n              <span class=\"libs-ui-grid-layout-drag-bar-dots\">\n                @for (dot of dragBarDots; track dot) {\n                  <span class=\"libs-ui-grid-layout-drag-bar-dot\"></span>\n                }\n              </span>\n            </div>\n          }\n\n          <!-- Khung ch\u1EE9a component c\u1EE7a n\u01A1i d\u00F9ng.\n               \uD83D\uDD34 PH\u1EA2I c\u00F3 khung th\u1EADt (kh\u00F4ng ph\u1EA3i `ng-container` tr\u1ED1ng): n\u00F3 lo h\u1ED9 n\u01A1i d\u00F9ng ph\u1EA7n l\u1EA5p \u0111\u1EA7y\n               \u00F4 v\u00E0 vi\u1EC1n b\u00E1o ch\u1EBF \u0111\u1ED9 s\u1EEDa. Kh\u00F4ng c\u00F3 khung th\u00EC m\u1ED7i component n\u1ED9i dung l\u1EA1i ph\u1EA3i t\u1EF1 vi\u1EBFt\n               `:host { width/height: 100% }` + vi\u1EC1n \u0111\u1EE9t \u2014 \u0111\u00F3 l\u00E0 vi\u1EC7c c\u1EE7a th\u01B0 vi\u1EC7n, kh\u00F4ng ph\u1EA3i c\u1EE7a\n               ng\u01B0\u1EDDi d\u00F9ng (ng\u01B0\u1EDDi d\u00F9ng ch\u1ED1t 28/08/2026).\n               M\u1ED7i kh\u1ED1i m\u1ED9t ViewContainerRef ri\u00EAng n\u00EAn component n\u1EB1m \u0111\u00FAng \u00F4 c\u1EE7a n\u00F3. -->\n          <div\n            class=\"libs-ui-grid-layout-content-frame\"\n            [class.libs-ui-grid-layout-content-frame-edit]=\"isEditMode() && !isContainer(item)\"\n            [class.libs-ui-grid-layout-content-frame-empty]=\"isContainer(item)\">\n            <ng-container #itemHost />\n          </div>\n\n          <!-- D\u1EA5u hi\u1EC7u CONTAINER: nh\u00E3n g\u00F3c tr\u00EAn-ph\u1EA3i + vi\u1EC1n \u0111\u1EE9t bao ru\u1ED9t. Kh\u00F4ng c\u00F3 d\u1EA5u hi\u1EC7u th\u00EC\n               ng\u01B0\u1EDDi d\u00F9ng kh\u00F4ng bi\u1EBFt kh\u1ED1i n\u00E0o ch\u1EE9a \u0111\u01B0\u1EE3c kh\u1ED1i kh\u00E1c (ch\u1ED1t 28/08/2026, theo \u0111\u00FAng c\u00E1ch\n               m\u00E0n Customer 360 c\u1EE7a mobio-web \u0111ang l\u00E0m). -->\n          @if (isEditMode() && isContainer(item)) {\n            <div class=\"libs-ui-grid-layout-container-label\">Kh\u1ED1i gh\u00E9p</div>\n            <div class=\"libs-ui-grid-layout-container-border\"></div>\n          }\n\n          <!-- Thanh c\u00F4ng c\u1EE5: hi\u1EC7n khi r\u00EA chu\u1ED9t v\u00E0o kh\u1ED1i.\n               \uD83D\uDD34 D\u00F9ng `libs_ui-components-buttons-button` \u2014 C\u1EA4M t\u1EF1 d\u1EF1ng th\u1EBB `<button>`.\n               Component n\u00E0y \u0111\u00E3 c\u00F3 s\u1EB5n ki\u1EC3u n\u00FAt, c\u1EE1 n\u00FAt v\u00E0 bong b\u00F3ng ch\u00FA th\u00EDch theo \u0111\u00FAng b\u1ED9 giao di\u1EC7n\n               c\u1EE7a s\u1EA3n ph\u1EA9m; t\u1EF1 d\u1EF1ng l\u00E0 m\u1ED7i n\u01A1i m\u1ED9t ki\u1EC3u v\u00E0 m\u1EA5t lu\u00F4n tooltip. -->\n          @if (isEditMode()) {\n            <div\n              class=\"libs-ui-grid-layout-toolbar\"\n              [class.libs-ui-grid-layout-toolbar-child]=\"isNestedCanvas()\">\n              @if (canAddInside(item)) {\n                <libs_ui-components-buttons-button\n                  [type]=\"'button-third'\"\n                  [iconOnlyType]=\"true\"\n                  [sizeButton]=\"'smaller'\"\n                  [classIconLeft]=\"'libs-ui-icon-add'\"\n                  [popover]=\"{ config: { content: 'Th\u00EAm kh\u1ED1i v\u00E0o trong', zIndex: 1300 } }\"\n                  (outClick)=\"handlerAddInside($event, item)\" />\n              }\n              @if (canToggleType(item)) {\n                <libs_ui-components-buttons-button\n                  [type]=\"'button-third'\"\n                  [iconOnlyType]=\"true\"\n                  [sizeButton]=\"'smaller'\"\n                  [classIconLeft]=\"isContainer(item) ? 'libs-ui-icon-split-cell' : 'libs-ui-icon-merge-cell'\"\n                  [popover]=\"{ config: { content: isContainer(item) ? '\u0110\u01B0a v\u1EC1 kh\u1ED1i \u0111\u01A1n' : 'Chuy\u1EC3n th\u00E0nh kh\u1ED1i gh\u00E9p', zIndex: 1300 } }\"\n                  (outClick)=\"handlerToggleType($event, item)\" />\n              }\n              <libs_ui-components-buttons-button\n                [type]=\"'button-third-hover-danger'\"\n                [iconOnlyType]=\"true\"\n                [sizeButton]=\"'smaller'\"\n                [classIconLeft]=\"'libs-ui-icon-remove'\"\n                [popover]=\"{ config: { content: isContainer(item) ? 'Xo\u00E1 c\u1EA3 kh\u1ED1i gh\u00E9p' : 'Xo\u00E1 kh\u1ED1i', zIndex: 1300 } }\"\n                (outClick)=\"handlerRemove($event, item)\" />\n            </div>\n          }\n\n          @if (item.children && item.children.length > 0) {\n            <!-- Kh\u1ED1i c\u00F3 con \u2192 ru\u1ED9t n\u00F3 l\u1EA1i l\u00E0 m\u1ED9t m\u1EB7t ph\u1EB3ng n\u1EEFa. \u0110\u1EC7 quy \u1EDF \u0111\u00E2y, n\u01A1i d\u00F9ng kh\u00F4ng ph\u1EA3i lo.\n                 L\u1EC1 \u0111\u1EB7t \u1EDF \u0110\u00C2Y (v\u1ECF container), kh\u00F4ng \u0111\u1EB7t v\u00E0o l\u01B0\u1EDBi con \u2014 l\u01B0\u1EDBi con gi\u1EEF nguy\u00EAn khe 2px. -->\n            <libs_ui-services-grid_layout-canvas\n              class=\"block h-full w-full\"\n              [style.padding]=\"containerPadding()\"\n              [node]=\"item\"\n              [depth]=\"depth() + 1\"\n              (outChange)=\"outChange.emit($event)\"\n              (outRemoveNode)=\"outRemoveNode.emit($event)\"\n              (outAddBlockInside)=\"outAddBlockInside.emit($event)\"\n              (outToggleType)=\"outToggleType.emit($event)\" />\n          }\n        </div>\n      </gridster-item>\n    }\n  </gridster>\n</div>\n", styles: [":host{display:block;box-sizing:border-box;width:100%;height:100%;min-width:0;min-height:0}.libs-ui-grid-layout-block-shell{container-type:inline-size;display:block;box-sizing:border-box;height:100%}.libs-ui-grid-layout-drag-bar{position:absolute;top:2px;left:50%;z-index:15;display:flex;align-items:center;justify-content:center;width:64px;height:16px;background:transparent;transform:translate(-50%);opacity:1;transition:opacity .12s ease;pointer-events:auto;cursor:move}.libs-ui-grid-layout-drag-bar-dots{display:grid;grid-template-columns:repeat(3,3px);gap:3px;color:#9ca2ad}.libs-ui-grid-layout-drag-bar-dot{width:3px;height:3px;background:currentColor;border-radius:50%}.libs-ui-grid-layout-drag-bar:hover .libs-ui-grid-layout-drag-bar-dots{color:#3d6ef5}.libs-ui-grid-layout-drag-bar:not(.libs-ui-grid-layout-drag-bar-child){opacity:1}.libs-ui-grid-layout-drag-bar-child{top:auto;bottom:0;background:#d9f2e4;border-radius:4px 4px 0 0}.libs-ui-grid-layout-drag-bar-child .libs-ui-grid-layout-drag-bar-dots{color:#9ca2ad}.libs-ui-grid-layout-drag-bar-child:hover .libs-ui-grid-layout-drag-bar-dots{color:#00a757}.libs-ui-grid-layout-drag-bar-child{opacity:0}.libs-ui-grid-layout-block-shell:hover>.libs-ui-grid-layout-drag-bar-child{opacity:1}.libs-ui-grid-layout-block-shell:has(>.libs-ui-grid-layout-drag-bar:not(.libs-ui-grid-layout-drag-bar-child):hover){outline:2px solid #3d6ef5;outline-offset:-2px;border-radius:8px}.libs-ui-grid-layout-block-shell:has(>.libs-ui-grid-layout-drag-bar-child:hover){outline:2px solid #00a757;outline-offset:-2px;border-radius:8px}.libs-ui-grid-layout-container-label{position:absolute;left:6px;top:2px;display:flex;height:20px;align-items:center;z-index:3;padding:0 6px;color:#3d6ef5;font-weight:500;font-size:10px;line-height:14px;background:#dbe4ff;border-radius:4px;pointer-events:none}.libs-ui-grid-layout-content-frame{box-sizing:border-box;width:100%;height:100%;overflow:hidden;border-radius:6px}.libs-ui-grid-layout-content-frame ::ng-deep>*{display:block;box-sizing:border-box;width:100%;height:100%}.libs-ui-grid-layout-content-frame-empty{height:0}.libs-ui-grid-layout-content-frame-edit{border:1px dashed #c3cede}.libs-ui-grid-layout-container-border{position:absolute;inset:0;border:1px dashed #9db4f0;border-radius:8px;pointer-events:none}.libs-ui-grid-layout-toolbar{position:absolute;top:2px;right:8px;z-index:24;display:flex;gap:2px;align-items:center;height:20px;background:#fff;border-radius:4px;box-shadow:0 2px 8px #0716311f;opacity:0;transition:opacity .12s ease}.libs-ui-grid-layout-toolbar-child{top:50%;right:8px;left:auto;transform:translateY(-50%)}.libs-ui-grid-layout-block-shell:hover>.libs-ui-grid-layout-toolbar{opacity:1}:host ::ng-deep gridster{background:transparent}:host ::ng-deep .gridster-item-resizable-handler.handle-n,:host ::ng-deep .gridster-item-resizable-handler.handle-s{height:16px}:host ::ng-deep .gridster-item-resizable-handler.handle-e,:host ::ng-deep .gridster-item-resizable-handler.handle-w{width:16px}:host ::ng-deep .gridster-item-resizable-handler.handle-n{top:0}:host ::ng-deep .gridster-item-resizable-handler.handle-s{bottom:0}:host ::ng-deep .gridster-item-resizable-handler.handle-e{right:0}:host ::ng-deep .gridster-item-resizable-handler.handle-w{left:0}:host ::ng-deep gridster-item.gridster-item-moving,:host ::ng-deep gridster-item.gridster-item-resizing{z-index:30!important}:host ::ng-deep gridster-item.gridster-item-moving>.libs-ui-grid-layout-block-shell,:host ::ng-deep gridster-item.gridster-item-resizing>.libs-ui-grid-layout-block-shell{outline:2px solid #3d6ef5;outline-offset:-2px;border-radius:8px}:host ::ng-deep gridster gridster gridster-item.gridster-item-moving>.libs-ui-grid-layout-block-shell,:host ::ng-deep gridster gridster gridster-item.gridster-item-resizing>.libs-ui-grid-layout-block-shell{outline-color:#00a757}@container (max-width: 80px){.libs-ui-grid-layout-drag-bar{top:26px}}\n"] }]
+        }], ctorParameters: () => [] });
+
+// Bề mặt CÔNG KHAI — chỉ những gì nơi dùng thật sự cần.
+//
+// `LibsUiGridLayoutTreeService` CỐ Ý không xuất: mọi thao tác trên cây đã có mặt trên
+// `LibsUiGridLayoutService` với chữ ký gọn hơn (không phải truyền `root` — thư viện đang giữ nó).
+// Cấu hình gridster cũng không xuất: nó đã được vá theo hàng chục lỗi đo trên sản phẩm thật, để nơi
+// dùng sửa lại là mở đường cho chính những lỗi đó quay về.
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LibsUiGridLayoutCanvasComponent, LibsUiGridLayoutService };
+//# sourceMappingURL=libs-ui-services-grid-layout.mjs.map