ngx-histaff-alpha 2.2.9 → 2.3.0

package/fesm2022/ngx-histaff-alpha.mjs

@@ -3519,65 +3519,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
 
 class CoreTableService {
     constructor() { }
-    // each item of input array must have "headerGroup" property
-    makeHeaderGroupsSeemless(input) {
-        const output = [];
+    // Each item of input array must have "headerGroup" property 
+    // if "hidden" property is not set to true. 
+    // Otherwise "isValid" will be return with "false"
+    transformWithHeaderGroup(input) {
         const columnHeaders = [];
         let isValid = true;
         const inputHidden = input.filter(x => !!x.hidden);
         const inputVisible = input.filter(x => !x.hidden);
+        // Collect columnHeaders
         for (let i = 0; i < inputVisible.length; i++) {
             const x = inputVisible[i];
             if (!!x.headerGroup && typeof (x.headerGroup) === 'string' && !!x.headerGroup.length) {
-                if (!columnHeaders.filter(m => m === x.headerGroup).length) {
-                    columnHeaders.push(x.headerGroup);
-                }
-            }
-            else {
-                isValid = false;
-                break;
-            }
-        }
-        if (!!isValid) {
-            inputHidden.map(h => {
-                output.push(h);
-            });
-            columnHeaders.map(h => {
-                const filter = input.filter(x => x.headerGroup === h);
-                filter.map(f => output.push(f));
-            });
-            return output;
-        }
-        else {
-            return input;
-        }
-    }
-    getHeaderGroups(input) {
-        const columnHeaders = [];
-        let isValid = true;
-        const inputVisible = input.filter(x => !x.hidden);
-        for (let i = 0; i < inputVisible.length; i++) {
-            const x = inputVisible[i];
-            if (!!x.headerGroup && typeof (x.headerGroup) === 'string' && !!x.headerGroup.length && !!x.width) {
-                if (!columnHeaders.filter(m => m.key === x.headerGroup).length) {
+                const filter = columnHeaders.filter(m => m.key === x.headerGroup);
+                if (!filter.length) {
                     columnHeaders.push({
                         key: x.headerGroup,
                         width: x.width
                     });
                 }
+                else {
+                    // updated width
+                    filter[0].width += x.width;
+                }
             }
             else {
+                // Once again, each visible item of input array must have "headerGroup" property set to non-empty string value
+                // if "hidden" property is not set to true. 
                 isValid = false;
                 break;
             }
         }
+        // Prepare the output
         if (!!isValid) {
-            const headerGroupObjects = [];
-            // columnHeaders.map(x => )
-            return headerGroupObjects;
+            const outputColumns = [];
+            inputHidden.map(h => {
+                outputColumns.push(h);
+            });
+            columnHeaders.map(h => {
+                const inputFilter = input.filter(x => x.headerGroup === h.key);
+                inputFilter.map(f => {
+                    outputColumns.push(f);
+                });
+            });
+            return {
+                isValid: true,
+                columns: outputColumns,
+                headerGroups: columnHeaders
+            };
         }
         else {
-            return [];
+            return {
+                isValid: false,
+                columns: input,
+                headerGroups: undefined
+            };
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CoreTableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -16705,6 +16701,8 @@ class CoreTreeGridComponent extends CoreFormControlBaseComponent {
         this.dialogService = dialogService;
         this.coreControlService = coreControlService;
         this.coreTableService = coreTableService;
+        this.headerCellPadding = 5;
+        this.headerBorderSize = 1;
         this.treeColumnWidth = 300;
         this.treeNodeLevelPadding = 15;
         this.onRowDoubleClick = new EventEmitter();
@@ -16731,10 +16729,10 @@ class CoreTreeGridComponent extends CoreFormControlBaseComponent {
         let newTotalWidth = this.treeColumnWidth;
         this.columns.map(x => newTotalWidth += x.width);
         this.totalWidth = newTotalWidth;
-        this.headerGroupAvailable = !!this.columns.filter(x => !!x.headerGroup && typeof (x.headerGroup) === 'string' && !!x.headerGroup.length).length;
-        if (this.headerGroupAvailable) {
-            this.columns = this.coreTableService.makeHeaderGroupsSeemless(this.columns);
-            //this.headerGroups = this.coreTableService.getHeaderGroups(this.columns);
+        this.transformed = this.coreTableService.transformWithHeaderGroup(this.columns);
+        if (this.transformed.isValid) {
+            this.columns = this.transformed.columns;
+            this.headerGroups = this.transformed.headerGroups;
         }
     }
     reload() {
@@ -16754,6 +16752,7 @@ class CoreTreeGridComponent extends CoreFormControlBaseComponent {
             let gridTotalWidth = 15; // default padding
             this.columns.filter(x => !!!x.hidden).map(m => gridTotalWidth += m.width);
             this.container.nativeElement.style.setProperty('--grid-total-width', gridTotalWidth + 'px');
+            this.container.nativeElement.style.setProperty('--tree-node-level-padding', this.treeNodeLevelPadding + 'px');
             this.subscriptions.push(this.mls.lang$.subscribe(x => this.lang = x));
             this.reload();
             this.subscriptions.push(// outer-push
@@ -16835,7 +16834,7 @@ class CoreTreeGridComponent extends CoreFormControlBaseComponent {
     }
     onRowClick(context, event) {
         event.stopImmediatePropagation();
-        if (event?.detail === 2) {
+        if (event?.detail === 2 && !this.treeCreateUpdateDisabled) {
             this.onRowDoubleClick.emit(context);
         }
     }
@@ -17016,7 +17015,7 @@ class CoreTreeGridComponent extends CoreFormControlBaseComponent {
         this.subscriptions.map(x => x?.unsubscribe());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CoreTreeGridComponent, deps: [{ token: AppService }, { token: RecursiveService }, { token: MultiLanguageService }, { token: DialogService }, { token: CoreControlService }, { token: CoreTableService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.3", type: CoreTreeGridComponent, isStandalone: true, selector: "core-tree-grid", inputs: { height: "height", columns: "columns", keyField: "keyField", titleField: "titleField", parentField: "parentField", getFullListApi: "getFullListApi", treeColumnWidth: "treeColumnWidth", treeNodeLevelPadding: "treeNodeLevelPadding", crud: "crud" }, outputs: { onRowDoubleClick: "onRowDoubleClick", onSubmitSuccess: "onSubmitSuccess" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #container class=\"core-tree-grid-container\" [ngStyle]=\"{\r\n    width: '100%',\r\n    height: height + 'px',\r\n    overflow: 'scroll'\r\n}\">\r\n\r\n    @if (loading) {\r\n    <div class=\"loading-surface\">\r\n        <div class=\"loading-wrapper\">\r\n            <app-threedots></app-threedots>\r\n        </div>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"tree-grid-header\" [ngStyle]=\"{\r\n        width: totalWidth + 'px'\r\n    }\">\r\n        <div class=\"tree-block-header\" [ngStyle]=\"{\r\n            width: treeColumnWidth + treeNodeLevelPadding + 'px'\r\n        }\">\r\n            <div class=\"header-cell-div\">\r\n                {{ 'UI.CORE_TREE_GRID.TREE_BLOCK_HEADER' | translate: lang }}\r\n                <core-button-group-vns [shownItems]=\"headerToolItems\"\r\n                    (buttonClick)=\"onHeaderToolClick($event)\"></core-button-group-vns>\r\n            </div>\r\n        </div>\r\n        @if (!!headerGroupAvailable && !!headerGroups && !!headerGroups.length) {\r\n            @for (headerGroup of headerGroups; track $index) {\r\n                \r\n            }\r\n        }\r\n        @for (column of columns; track $index) {\r\n        <div [class.hidden]=\"column.hidden\" [ngStyle]=\"\r\n            {\r\n                width: !!column.width ? column.width + 'px' : 'unset',\r\n                textAlign: !!column.align ? column.align.toLowerCase() : 'unset'\r\n            }\r\n            \">\r\n            <div class=\"header-cell-div\">\r\n                {{ column.caption | translate: lang }}\r\n            </div>\r\n        </div>\r\n        }\r\n    </div>\r\n\r\n    <div #frontTreeContainer class=\"tree-grid-content front-container\" [class.edit-mode-activated]=\"editModeActivated\">\r\n        @for (root of data; track $index) {\r\n        @defer(on viewport(treeContainer)) {\r\n        <ul class=\"root\" [class.collapsed]=\"!!!root.tree$Expanded\" [ngStyle]=\"{\r\n            paddingLeft: treeNodeLevelPadding + 'px'\r\n        }\">\r\n            <ng-container *ngTemplateOutlet=\"frontItem; context: { context: root }\"></ng-container>\r\n        </ul>\r\n        }\r\n        }\r\n    </div>\r\n\r\n    <div #treeContainer class=\"tree-grid-content\" [class.edit-mode-activated]=\"editModeActivated\">\r\n        @for (root of data; track $index) {\r\n        @defer(on viewport(treeContainer)) {\r\n        <ul class=\"root\" [class.collapsed]=\"!!!root.tree$Expanded\" [ngStyle]=\"{\r\n            paddingLeft: '0px'\r\n        }\">\r\n            <ng-container *ngTemplateOutlet=\"item; context: { context: root }\"></ng-container>\r\n        </ul>\r\n        }\r\n        }\r\n    </div>\r\n\r\n    <ng-template #item let-context=\"context\" let-id=\"context.id\" let-title=\"context.tree$Title\"\r\n        let-highlighted=\"context.tree$Highlighted\" let-hasChildren=\"context.tree$HasChildren\"\r\n        let-children=\"context.tree$Children\" let-expanded=\"context.tree$Expanded\" let-active=\"context.tree$Active\"\r\n        let-checked=\"context.tree$Checked\" let-tier=\"context.tree$Tier\">\r\n\r\n        <li [class.has-children]=\"!!hasChildren\" [class.collapsed]=\"!!hasChildren && !!!expanded\"\r\n            (click)=\"onRowClick(context, $event)\">\r\n            <span [class.span-edit-mode-activated]=\"!!editModeActivated && pendingContext.id===id\">\r\n\r\n                <div class=\"tree-item\">\r\n                    <div class=\"tree-item-div\" [attr.data-tier]=\"tier\" [ngStyle]=\"{\r\n                        width: '0px',\r\n                        }\">\r\n                    </div>\r\n                </div>\r\n                <div class=\"tree-grid-row-wrapper\">\r\n                    <div class=\"tree-grid-row\">\r\n                        @if (!(!!editModeActivated && pendingContext?.id===id)) {\r\n                        @for (column of columns; track $index) {\r\n                        <div class=\"tree-grid-cell\" [class.hidden]=\"column.hidden\">\r\n                            <div class=\"cell-div\" [ngStyle]=\"\r\n                                    {\r\n                                        width: !!column.width ? column.width + 'px' : 'unset',\r\n                                        overflow: 'hidden',\r\n                                        textAlign: !!column.align ? column.align.toLowerCase() : 'unset'\r\n                                    }\r\n                                \">\r\n                                {{ !!column.translate ? (context[column.field] | translate: lang | tableCell:\r\n                                column.pipe : lang) :\r\n                                context[column.field] | tableCell: column.pipe : lang}}\r\n                            </div>\r\n                        </div>\r\n                        }\r\n                        }\r\n\r\n                        @if (!!editModeActivated && pendingContext?.id===id) {\r\n                        <ng-container>\r\n                            @for (column of columns; track $index) {\r\n                            <div class=\"tree-grid-cell\" [class.hidden]=\"column.hidden\">\r\n                                <div class=\"cell-div\" [ngStyle]=\"\r\n                                    {\r\n                                        width: !!column.width ? column.width + 'px' : 'unset',\r\n                                        display: 'table',\r\n                                        overflowY: 'visible',\r\n                                        textAlign: !!column.align ? column.align.toLowerCase() : 'unset'\r\n                                    }\r\n                                \">\r\n                                    @if (!column.control) {\r\n                                    <ng-container>\r\n                                        {{ !!column.translate ? (context[column.field] | translate: lang | tableCell:\r\n                                        column.pipe : lang) :\r\n                                        context[column.field] | tableCell: column.pipe : lang}}\r\n                                    </ng-container>\r\n                                    } @else {\r\n                                    <ng-container>\r\n                                        <core-control [form]=\"form\" [control]=\"column.control!\"\r\n                                            [checkError$]=\"checkError$\"></core-control>\r\n                                    </ng-container>\r\n                                    }\r\n\r\n                                </div>\r\n                            </div>\r\n                            }\r\n                        </ng-container>\r\n\r\n                        }\r\n\r\n                    </div>\r\n                </div>\r\n\r\n            </span>\r\n            @if (!!expanded && !!children.length) {\r\n            <ul [class.collapsed]=\"!expanded\" [ngStyle]=\"{\r\n                paddingLeft: '0px'\r\n            }\">\r\n                @for (child of children; track $index) {\r\n                <ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"item; context: { context: child }\"></ng-container>\r\n                </ng-container>\r\n                }\r\n            </ul>\r\n            }\r\n\r\n        </li>\r\n    </ng-template>\r\n\r\n    <ng-template #frontItem let-context=\"context\" let-id=\"context.id\" let-title=\"context.tree$Title\"\r\n        let-highlighted=\"context.tree$Highlighted\" let-hasChildren=\"context.tree$HasChildren\"\r\n        let-children=\"context.tree$Children\" let-expanded=\"context.tree$Expanded\" let-active=\"context.tree$Active\"\r\n        let-checked=\"context.tree$Checked\" let-tier=\"context.tree$Tier\">\r\n\r\n        <li [class.has-children]=\"!!hasChildren\" [class.collapsed]=\"!!hasChildren && !!!expanded\"\r\n            (click)=\"onRowClick(context, $event)\">\r\n            <span [class.span-edit-mode-activated]=\"!!editModeActivated && pendingContext.id===id\">\r\n\r\n                <div class=\"tree-item\">\r\n                    <div class=\"tree-item-div\" [attr.data-tier]=\"tier\" [ngStyle]=\"{\r\n                    width: treeColumnWidth - (tier - 1) * treeNodeLevelPadding + 'px',\r\n                    }\">\r\n                        <div class=\"tree-item-tool\">\r\n                            <div class=\"tree-item-tool-wrapper\">\r\n                                <core-button-group-vns [shownItems]=\"toolItems\" [showCaption]=\"false\"\r\n                                    (buttonClick)=\"onToolClick($event, context)\"></core-button-group-vns>\r\n                            </div>\r\n                        </div>\r\n\r\n                        @if (!!children.length) {\r\n                        <i class=\"expand-toggler feather-chevron-down\" (click)=\"onExpandTogglerClick(context)\"></i>\r\n                        }\r\n                        <object (click)=\"onObjectClick(context, $event)\">\r\n                            {{ title }}\r\n                        </object>\r\n                    </div>\r\n                </div>\r\n\r\n            </span>\r\n            @if (!!expanded && !!children.length) {\r\n            <ul [class.collapsed]=\"!expanded\" [ngStyle]=\"{\r\n            paddingLeft: treeNodeLevelPadding + 'px'\r\n        }\">\r\n                @for (child of children; track $index) {\r\n                <ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"frontItem; context: { context: child }\"></ng-container>\r\n                </ng-container>\r\n                }\r\n            </ul>\r\n            }\r\n\r\n        </li>\r\n    </ng-template>\r\n\r\n</div>", styles: [".core-tree-grid-container{--tree-container-width: 300px;--grid-total-width: 500px;--square-color: darkgray;--square-size: 20px;--max-tier: 1;--row-height: 50px;--edit-mode-row-height: 120px;--edit-mode-row-bg: #dff6dd;--border-size: 5px;--header-height: 100px;--header-cell-padding: 5px;--content-cell-padding: 5px;--header-border-size: 1px;white-space:nowrap}.core-tree-grid-container [data-tier=\"1\"]{--tier: 1}.core-tree-grid-container [data-tier=\"2\"]{--tier: 2}.core-tree-grid-container [data-tier=\"3\"]{--tier: 3}.core-tree-grid-container [data-tier=\"4\"]{--tier: 4}.core-tree-grid-container [data-tier=\"5\"]{--tier: 5}.core-tree-grid-container [data-tier=\"6\"]{--tier: 6}.core-tree-grid-container [data-tier=\"7\"]{--tier: 7}.core-tree-grid-container [data-tier=\"8\"]{--tier: 8}.core-tree-grid-container [data-tier=\"9\"]{--tier: 9}.core-tree-grid-container [data-tier=\"10\"]{--tier: 10}.core-tree-grid-container [data-tier=\"11\"]{--tier: 11}.core-tree-grid-container [data-tier=\"12\"]{--tier: 12}.core-tree-grid-container [data-tier=\"13\"]{--tier: 13}.core-tree-grid-container [data-tier=\"14\"]{--tier: 14}.core-tree-grid-container [data-tier=\"15\"]{--tier: 15}.core-tree-grid-container [data-tier=\"16\"]{--tier: 16}.core-tree-grid-container [data-tier=\"17\"]{--tier: 17}.core-tree-grid-container [data-tier=\"18\"]{--tier: 18}.core-tree-grid-container [data-tier=\"19\"]{--tier: 19}.core-tree-grid-container [data-tier=\"20\"]{--tier: 20}.core-tree-grid-container [data-tier=\"21\"]{--tier: 21}.core-tree-grid-container [data-tier=\"22\"]{--tier: 22}.core-tree-grid-container [data-tier=\"23\"]{--tier: 23}.core-tree-grid-container [data-tier=\"24\"]{--tier: 24}.core-tree-grid-container *{box-sizing:border-box!important}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.core-tree-grid-container .loading-surface{width:calc(100vw - var(--size-left-bar-current-width));height:100vh;position:fixed;top:0;left:var(--size-left-bar-current-width);background-color:#ffffff80;z-index:555}.core-tree-grid-container .loading-surface .loading-wrapper{width:calc(100vw - var(--size-left-bar-current-width));height:100vh;display:flex;align-items:center;justify-content:center}.core-tree-grid-container .tree-grid-content{margin-top:var(--header-cell-padding);background-color:#fff;display:inline-block;position:relative}.core-tree-grid-container .front-container{background-color:#fff;display:inline-block;position:sticky!important;left:0;z-index:2}.core-tree-grid-container .tree-grid-content.edit-mode-activated ul>li>span:not(.span-edit-mode-activated):hover .tree-item-tool{display:none}.core-tree-grid-container .tree-grid-content.edit-mode-activated ul>li>span.span-edit-mode-activated{background-color:var(--edit-mode-row-bg)}.core-tree-grid-container .tree-grid-content.edit-mode-activated ul>li>span.span-edit-mode-activated *:not(.expand-toggler,object){background-color:var(--edit-mode-row-bg)}.core-tree-grid-container .tree-grid-header{display:block;position:sticky;top:0;left:0;z-index:3;white-space:nowrap;height:var(--header-height);background-color:var(--color-bg-main)}.core-tree-grid-container .tree-grid-header>*{box-sizing:border-box;display:inline-block;padding:var(--header-cell-padding);border:solid var(--header-border-size) white}.core-tree-grid-container .tree-grid-header .hidden{display:none}.core-tree-grid-container .tree-grid-header .tree-block-header{position:sticky;top:0;left:0;z-index:5;height:var(--header-height);background-color:var(--color-bg-main)}.core-tree-grid-container .tree-grid-header .header-cell-div{width:100%;height:calc(var(--header-height) - 2 * var(--header-cell-padding) - 2 * var(--header-border-size));display:flex;align-items:center;justify-content:space-between;overflow:hidden;text-overflow:ellipsis}.core-tree-grid-container ul{display:table;table-layout:fixed;margin-bottom:0;animation:fade-in 1s ease-out}.core-tree-grid-container ul.collapsed:not(.root){display:none}.core-tree-grid-container li{display:block;position:relative;white-space:nowrap}.core-tree-grid-container li>span{position:relative;display:table-row}.core-tree-grid-container li>span .tree-item-tool{position:absolute;top:0;right:0;z-index:3;height:var(--row-height);display:none}.core-tree-grid-container li>span .tree-item-tool .tree-item-tool-wrapper{display:flex;align-items:center;justify-content:flex-end;height:var(--row-height)}.core-tree-grid-container li>span .tree-item{vertical-align:top;display:table-cell}.core-tree-grid-container li>span .tree-item .tree-item-div{display:flex;align-items:center;justify-content:flex-start;position:relative;height:var(--row-height)}.core-tree-grid-container li>span .tree-item .tree-item-div>i{color:var(--square-color);cursor:pointer;font-size:var(--square-size);width:var(--square-size);height:var(--square-size)}.core-tree-grid-container li>span .tree-item .tree-item-div>.expand-toggler{position:absolute;z-index:1;transform:translate(-100%) rotate(0);transition:.5s ease-out}.core-tree-grid-container li>span .tree-item .tree-item-div object{display:table-cell;cursor:pointer}.core-tree-grid-container li>span:hover .tree-item-tool{display:flex;align-items:center;justify-content:flex-end}.core-tree-grid-container li>span:hover:after{content:\"\";display:block;height:var(--row-height);position:absolute;width:var(--grid-total-width);background-color:#d3d3d3;opacity:.2;z-index:1;top:0;left:0}.core-tree-grid-container li>span .tree-grid-row-wrapper{display:table-cell;position:relative}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row{display:inline-flex;background-color:#fff}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row .tree-grid-cell{display:table-cell;height:var(--row-height)}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row .tree-grid-cell .cell-div{cursor:pointer;overflow-x:hidden;overflow-y:visible;padding:var(--content-cell-padding);display:flex;align-items:center;height:var(--row-height)}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row .tree-grid-cell.hidden{display:none}.core-tree-grid-container li>span.span-edit-mode-activated{height:var(--edit-mode-row-height)}.core-tree-grid-container li>span.span-edit-mode-activated:hover:after{display:none}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item-tool{height:var(--edit-mode-row-height);display:flex}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item-tool .tree-item-tool-wrapper{height:var(--edit-mode-row-height)}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item-tool .tree-item-tool-wrapper i{width:24px;height:24px}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item .tree-item-div{height:var(--edit-mode-row-height)}.core-tree-grid-container li>span.span-edit-mode-activated .tree-grid-row-wrapper .tree-grid-cell{height:var(--edit-mode-row-height)!important}.core-tree-grid-container li>span.span-edit-mode-activated .tree-grid-row-wrapper .tree-grid-cell .cell-div{height:var(--edit-mode-row-height)!important}.core-tree-grid-container li.collapsed .tree-item-div .expand-toggler{transform:translate(-100%) rotate(-90deg)!important;transition:.5s ease-out!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: CoreControlComponent, selector: "core-control", inputs: ["control", "form", "checkError$", "rangeLimit"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: TableCellPipe, name: "tableCell" }, { kind: "component", type: CoreButtonGroupVnsComponent, selector: "core-button-group-vns", inputs: ["height", "instanceNumber", "forHeader", "shownItems", "showCaption"], outputs: ["buttonClick"] }, { kind: "component", type: ThreedotsComponent, selector: "app-threedots" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.3", type: CoreTreeGridComponent, isStandalone: true, selector: "core-tree-grid", inputs: { height: "height", columns: "columns", keyField: "keyField", titleField: "titleField", parentField: "parentField", headerHeight: "headerHeight", headerCellPadding: "headerCellPadding", headerBorderSize: "headerBorderSize", treeColumnWidth: "treeColumnWidth", treeNodeLevelPadding: "treeNodeLevelPadding", getFullListApi: "getFullListApi", crud: "crud", treeCreateUpdateDisabled: "treeCreateUpdateDisabled" }, outputs: { onRowDoubleClick: "onRowDoubleClick", onSubmitSuccess: "onSubmitSuccess" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #container class=\"core-tree-grid-container\" [ngStyle]=\"{\r\n    width: '100%',\r\n    height: height + 'px',\r\n    overflow: 'scroll'\r\n}\">\r\n\r\n    @if (loading) {\r\n    <div class=\"loading-surface\">\r\n        <div class=\"loading-wrapper\">\r\n            <app-threedots></app-threedots>\r\n        </div>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"tree-grid-header\" [ngStyle]=\"{\r\n        width: totalWidth + 'px',\r\n        whiteSpace: 'nowrap',\r\n        display: 'flex',\r\n        position: 'sticky'\r\n    }\">\r\n        <div class=\"tree-block-header\" [ngStyle]=\"{\r\n            width: treeColumnWidth + treeNodeLevelPadding + 'px',\r\n            height: headerHeight + 'px',\r\n            border: headerBorderSize + 'px solid white',\r\n        }\">\r\n            <div class=\"header-cell-div\" [ngStyle]=\"{\r\n                height: headerHeight + 'px',\r\n            }\">\r\n                {{ 'UI.CORE_TREE_GRID.TREE_BLOCK_HEADER' | translate: lang }}\r\n                @if (!treeCreateUpdateDisabled) {\r\n                <core-button-group-vns [shownItems]=\"headerToolItems\"\r\n                    (buttonClick)=\"onHeaderToolClick($event)\"></core-button-group-vns>\r\n                }\r\n            </div>\r\n        </div>\r\n\r\n        <div [ngStyle]=\"{\r\n            display: 'inline-block',\r\n            height: headerHeight + 'px',\r\n            whiteSpace: 'nowrap'\r\n        }\">\r\n\r\n            <div class=\"header-row-one\" [ngStyle]=\"{\r\n                display: 'block',\r\n                height: (!!headerGroups ? headerHeight/2 : headerHeight) + 'px',\r\n            }\">\r\n                @if (!!headerGroups) {\r\n                @for (headerGroup of headerGroups; track $index) {\r\n                <div class=\"header-group-cell-div\" [ngStyle]=\"{\r\n                        height: (!!headerGroups ? headerHeight/2 : headerHeight) + 'px',\r\n                        width: headerGroup.width + 'px',\r\n                        border: headerBorderSize + 'px solid white',\r\n                        }\">\r\n                    {{ headerGroup.key | translate: lang }}\r\n                </div>\r\n                }\r\n                }\r\n            </div>\r\n\r\n            <div class=\"header-row-two\" [ngStyle]=\"{\r\n                display: 'block',\r\n                height: (!!headerGroups ? headerHeight/2 : headerHeight) + 'px',\r\n            }\">\r\n                @for (column of columns; track $index) {\r\n                <div [class.hidden]=\"column.hidden\" [ngStyle]=\"\r\n                {\r\n                    display: 'inline-block',\r\n                    height: (!!headerGroups ? headerHeight/2 : headerHeight) + 'px',\r\n                    border: headerBorderSize + 'px solid white',\r\n                    width: !!column.width ? column.width + 'px' : 'unset',\r\n                    textAlign: !!column.align ? column.align.toLowerCase() : 'unset'\r\n                }\r\n                \">\r\n                    <div class=\"header-cell-div\" [ngStyle]=\"{\r\n                        height: (!!headerGroups ? headerHeight/2 : headerHeight) + 'px',\r\n                    }\">\r\n                        {{ column.caption | translate: lang }}\r\n                    </div>\r\n                </div>\r\n                }\r\n\r\n\r\n            </div>\r\n\r\n\r\n        </div>\r\n\r\n\r\n\r\n    </div>\r\n\r\n    <div #frontTreeContainer class=\"tree-grid-content front-container\" [class.edit-mode-activated]=\"editModeActivated\">\r\n        @for (root of data; track $index) {\r\n        @defer(on viewport(treeContainer)) {\r\n        <ul class=\"root\" [class.collapsed]=\"!!!root.tree$Expanded\" [ngStyle]=\"{\r\n            paddingLeft: treeNodeLevelPadding + 'px'\r\n        }\">\r\n            <ng-container *ngTemplateOutlet=\"frontItem; context: { context: root }\"></ng-container>\r\n        </ul>\r\n        }\r\n        }\r\n    </div>\r\n\r\n    <div #treeContainer class=\"tree-grid-content\" [class.edit-mode-activated]=\"editModeActivated\">\r\n        @for (root of data; track $index) {\r\n        @defer(on viewport(treeContainer)) {\r\n        <ul class=\"root\" [class.collapsed]=\"!!!root.tree$Expanded\" [ngStyle]=\"{\r\n            paddingLeft: '0px'\r\n        }\">\r\n            <ng-container *ngTemplateOutlet=\"item; context: { context: root }\"></ng-container>\r\n        </ul>\r\n        }\r\n        }\r\n    </div>\r\n\r\n    <ng-template #item let-context=\"context\" let-id=\"context.id\" let-title=\"context.tree$Title\"\r\n        let-highlighted=\"context.tree$Highlighted\" let-hasChildren=\"context.tree$HasChildren\"\r\n        let-children=\"context.tree$Children\" let-expanded=\"context.tree$Expanded\" let-active=\"context.tree$Active\"\r\n        let-checked=\"context.tree$Checked\" let-tier=\"context.tree$Tier\">\r\n\r\n        <li [class.has-children]=\"!!hasChildren\" [class.collapsed]=\"!!hasChildren && !!!expanded\"\r\n            (click)=\"onRowClick(context, $event)\">\r\n            <span [class.span-edit-mode-activated]=\"!!editModeActivated && pendingContext.id===id\">\r\n\r\n                <div class=\"tree-item\">\r\n                    <div class=\"tree-item-div\" [attr.data-tier]=\"tier\" [ngStyle]=\"{\r\n                        width: '0px',\r\n                        }\">\r\n                    </div>\r\n                </div>\r\n                <div class=\"tree-grid-row-wrapper\">\r\n                    <div class=\"tree-grid-row\">\r\n                        @if (!(!!editModeActivated && pendingContext?.id===id)) {\r\n                        @for (column of columns; track $index) {\r\n                        <div class=\"tree-grid-cell\" [class.hidden]=\"column.hidden\">\r\n                            <div class=\"cell-div\" [ngStyle]=\"\r\n                                    {\r\n                                        width: !!column.width ? column.width + 'px' : 'unset',\r\n                                        overflow: 'hidden',\r\n                                        textAlign: !!column.align ? column.align.toLowerCase() : 'unset'\r\n                                    }\r\n                                \">\r\n                                {{ !!column.translate ? (context[column.field] | translate: lang | tableCell:\r\n                                column.pipe : lang) :\r\n                                context[column.field] | tableCell: column.pipe : lang}}\r\n                            </div>\r\n                        </div>\r\n                        }\r\n                        }\r\n\r\n                        @if (!!editModeActivated && pendingContext?.id===id) {\r\n                        <ng-container>\r\n                            @for (column of columns; track $index) {\r\n                            <div class=\"tree-grid-cell\" [class.hidden]=\"column.hidden\">\r\n                                <div class=\"cell-div\" [ngStyle]=\"\r\n                                    {\r\n                                        width: !!column.width ? column.width + 'px' : 'unset',\r\n                                        display: 'table',\r\n                                        overflowY: 'visible',\r\n                                        textAlign: !!column.align ? column.align.toLowerCase() : 'unset'\r\n                                    }\r\n                                \">\r\n                                    @if (!column.control) {\r\n                                    <ng-container>\r\n                                        {{ !!column.translate ? (context[column.field] | translate: lang | tableCell:\r\n                                        column.pipe : lang) :\r\n                                        context[column.field] | tableCell: column.pipe : lang}}\r\n                                    </ng-container>\r\n                                    } @else {\r\n                                    <ng-container>\r\n                                        <core-control [form]=\"form\" [control]=\"column.control!\"\r\n                                            [checkError$]=\"checkError$\"></core-control>\r\n                                    </ng-container>\r\n                                    }\r\n\r\n                                </div>\r\n                            </div>\r\n                            }\r\n                        </ng-container>\r\n\r\n                        }\r\n\r\n                    </div>\r\n                </div>\r\n\r\n            </span>\r\n            @if (!!expanded && !!children.length) {\r\n            <ul [class.collapsed]=\"!expanded\" [ngStyle]=\"{\r\n                paddingLeft: '0px'\r\n            }\">\r\n                @for (child of children; track $index) {\r\n                <ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"item; context: { context: child }\"></ng-container>\r\n                </ng-container>\r\n                }\r\n            </ul>\r\n            }\r\n\r\n        </li>\r\n    </ng-template>\r\n\r\n    <ng-template #frontItem let-context=\"context\" let-id=\"context.id\" let-title=\"context.tree$Title\"\r\n        let-highlighted=\"context.tree$Highlighted\" let-hasChildren=\"context.tree$HasChildren\"\r\n        let-children=\"context.tree$Children\" let-expanded=\"context.tree$Expanded\" let-active=\"context.tree$Active\"\r\n        let-checked=\"context.tree$Checked\" let-tier=\"context.tree$Tier\">\r\n\r\n        <li [class.has-children]=\"!!hasChildren\" [class.collapsed]=\"!!hasChildren && !!!expanded\"\r\n            (click)=\"onRowClick(context, $event)\">\r\n            <span [class.span-edit-mode-activated]=\"!!editModeActivated && pendingContext.id===id\">\r\n\r\n                <div class=\"tree-item\">\r\n                    <div class=\"tree-item-div\" [attr.data-tier]=\"tier\" [ngStyle]=\"{\r\n                    width: treeColumnWidth - tier * treeNodeLevelPadding + 'px',\r\n                    }\">\r\n                        @if (!treeCreateUpdateDisabled) {\r\n                        <div class=\"tree-item-tool\">\r\n                            <div class=\"tree-item-tool-wrapper\">\r\n                                <core-button-group-vns [shownItems]=\"toolItems\" [showCaption]=\"false\"\r\n                                    (buttonClick)=\"onToolClick($event, context)\"></core-button-group-vns>\r\n                            </div>\r\n                        </div>\r\n                        }\r\n\r\n                        @if (!!children.length) {\r\n                        <i class=\"expand-toggler feather-chevron-down\" (click)=\"onExpandTogglerClick(context)\"></i>\r\n                        }\r\n                        <object (click)=\"onObjectClick(context, $event)\">\r\n                            {{ title }}\r\n                        </object>\r\n                    </div>\r\n                </div>\r\n\r\n            </span>\r\n            @if (!!expanded && !!children.length) {\r\n            <ul [class.collapsed]=\"!expanded\" [ngStyle]=\"{\r\n            paddingLeft: treeNodeLevelPadding + 'px'\r\n        }\">\r\n                @for (child of children; track $index) {\r\n                <ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"frontItem; context: { context: child }\"></ng-container>\r\n                </ng-container>\r\n                }\r\n            </ul>\r\n            }\r\n\r\n        </li>\r\n    </ng-template>\r\n\r\n</div>", styles: [".core-tree-grid-container{--tree-container-width: 300px;--grid-total-width: 500px;--square-color: darkgray;--square-size: 20px;--max-tier: 1;--row-height: 50px;--edit-mode-row-height: 120px;--edit-mode-row-bg: #dff6dd;--border-size: 5px;--header-height: 100px;--header-cell-padding: 5px;--content-cell-padding: 5px;--header-border-size: 1px;--tree-node-level-padding: 15px;white-space:nowrap;font-size:var(--typo-basic-font-size)}.core-tree-grid-container [data-tier=\"1\"]{--tier: 1;--translate-x: calc(var(--tree-node-level-padding) * -1)}.core-tree-grid-container [data-tier=\"2\"]{--tier: 2;--translate-x: calc(var(--tree-node-level-padding) * -2)}.core-tree-grid-container [data-tier=\"3\"]{--tier: 3;--translate-x: calc(var(--tree-node-level-padding) * -3)}.core-tree-grid-container [data-tier=\"4\"]{--tier: 4;--translate-x: calc(var(--tree-node-level-padding) * -4)}.core-tree-grid-container [data-tier=\"5\"]{--tier: 5;--translate-x: calc(var(--tree-node-level-padding) * -5)}.core-tree-grid-container [data-tier=\"6\"]{--tier: 6;--translate-x: calc(var(--tree-node-level-padding) * -6)}.core-tree-grid-container [data-tier=\"7\"]{--tier: 7;--translate-x: calc(var(--tree-node-level-padding) * -7)}.core-tree-grid-container [data-tier=\"8\"]{--tier: 8;--translate-x: calc(var(--tree-node-level-padding) * -8)}.core-tree-grid-container [data-tier=\"9\"]{--tier: 9;--translate-x: calc(var(--tree-node-level-padding) * -9)}.core-tree-grid-container [data-tier=\"10\"]{--tier: 10;--translate-x: calc(var(--tree-node-level-padding) * -10)}.core-tree-grid-container [data-tier=\"11\"]{--tier: 11;--translate-x: calc(var(--tree-node-level-padding) * -11)}.core-tree-grid-container [data-tier=\"12\"]{--tier: 12;--translate-x: calc(var(--tree-node-level-padding) * -12)}.core-tree-grid-container [data-tier=\"13\"]{--tier: 13;--translate-x: calc(var(--tree-node-level-padding) * -13)}.core-tree-grid-container [data-tier=\"14\"]{--tier: 14;--translate-x: calc(var(--tree-node-level-padding) * -14)}.core-tree-grid-container [data-tier=\"15\"]{--tier: 15;--translate-x: calc(var(--tree-node-level-padding) * -15)}.core-tree-grid-container [data-tier=\"16\"]{--tier: 16;--translate-x: calc(var(--tree-node-level-padding) * -16)}.core-tree-grid-container [data-tier=\"17\"]{--tier: 17;--translate-x: calc(var(--tree-node-level-padding) * -17)}.core-tree-grid-container [data-tier=\"18\"]{--tier: 18;--translate-x: calc(var(--tree-node-level-padding) * -18)}.core-tree-grid-container [data-tier=\"19\"]{--tier: 19;--translate-x: calc(var(--tree-node-level-padding) * -19)}.core-tree-grid-container [data-tier=\"20\"]{--tier: 20;--translate-x: calc(var(--tree-node-level-padding) * -20)}.core-tree-grid-container [data-tier=\"21\"]{--tier: 21;--translate-x: calc(var(--tree-node-level-padding) * -21)}.core-tree-grid-container [data-tier=\"22\"]{--tier: 22;--translate-x: calc(var(--tree-node-level-padding) * -22)}.core-tree-grid-container [data-tier=\"23\"]{--tier: 23;--translate-x: calc(var(--tree-node-level-padding) * -23)}.core-tree-grid-container [data-tier=\"24\"]{--tier: 24;--translate-x: calc(var(--tree-node-level-padding)) * -24 }.core-tree-grid-container *{box-sizing:border-box!important}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.core-tree-grid-container .loading-surface{width:calc(100vw - var(--size-left-bar-current-width));height:100vh;position:fixed;top:0;left:var(--size-left-bar-current-width);background-color:#ffffff80;z-index:555}.core-tree-grid-container .loading-surface .loading-wrapper{width:calc(100vw - var(--size-left-bar-current-width));height:100vh;display:flex;align-items:center;justify-content:center}.core-tree-grid-container .tree-grid-content{margin-top:var(--header-cell-padding);background-color:#fff;display:inline-block;position:relative}.core-tree-grid-container .front-container{background-color:#fff;display:inline-block;position:sticky!important;left:0;z-index:2}.core-tree-grid-container .tree-grid-content.edit-mode-activated ul>li>span:not(.span-edit-mode-activated):hover .tree-item-tool{display:none}.core-tree-grid-container .tree-grid-content.edit-mode-activated ul>li>span.span-edit-mode-activated{background-color:var(--edit-mode-row-bg)}.core-tree-grid-container .tree-grid-content.edit-mode-activated ul>li>span.span-edit-mode-activated *:not(.expand-toggler,object){background-color:var(--edit-mode-row-bg)}.core-tree-grid-container .tree-grid-header{top:0;left:0;z-index:3;white-space:nowrap;height:var(--header-height);background-color:var(--color-bg-main)}.core-tree-grid-container .tree-grid-header>*{box-sizing:border-box;display:inline-block}.core-tree-grid-container .tree-grid-header .hidden{display:none}.core-tree-grid-container .tree-grid-header .tree-block-header{position:sticky;top:0;left:0;z-index:5;height:var(--header-height);background-color:var(--color-bg-main)}.core-tree-grid-container .tree-grid-header .header-group-cell-div,.core-tree-grid-container .tree-grid-header .header-cell-div{width:100%;display:inline-flex;align-items:center;overflow:hidden;text-overflow:ellipsis}.core-tree-grid-container .tree-grid-header .header-group-cell-div,.core-tree-grid-container .tree-grid-header .header-cell-div{justify-content:center}.core-tree-grid-container ul{display:table;table-layout:fixed;margin-bottom:0;animation:fade-in 1s ease-out}.core-tree-grid-container ul.collapsed:not(.root){display:none}.core-tree-grid-container li{display:block;position:relative;white-space:nowrap}.core-tree-grid-container li>span{position:relative;display:table-row}.core-tree-grid-container li>span .tree-item-tool{position:absolute;top:0;right:0;z-index:7;height:var(--row-height);display:none}.core-tree-grid-container li>span .tree-item-tool .tree-item-tool-wrapper{display:flex;align-items:center;justify-content:flex-end;height:var(--row-height)}.core-tree-grid-container li>span .tree-item{vertical-align:top;display:table-cell}.core-tree-grid-container li>span .tree-item .tree-item-div{display:flex;align-items:center;justify-content:flex-start;position:relative;height:var(--row-height)}.core-tree-grid-container li>span .tree-item .tree-item-div>i{color:var(--square-color);cursor:pointer;font-size:var(--square-size);width:var(--square-size);height:var(--square-size)}.core-tree-grid-container li>span .tree-item .tree-item-div>.expand-toggler{position:absolute;z-index:6;transform:translate(-100%) rotate(0);transition:.5s ease-out}.core-tree-grid-container li>span .tree-item .tree-item-div object{display:table-cell;cursor:pointer}.core-tree-grid-container li>span:hover .tree-item-tool{display:flex;align-items:center;justify-content:flex-end}.core-tree-grid-container li>span:hover:after{content:\"\";display:block;height:var(--row-height);position:absolute;width:calc(var(--grid-total-width) + 1000px);background-color:#d3d3d3;opacity:.2;z-index:5;top:0;left:-1000px}.core-tree-grid-container li>span .tree-grid-row-wrapper{display:table-cell;position:relative}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row{display:inline-flex;background-color:#fff}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row .tree-grid-cell{display:table-cell;height:var(--row-height)}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row .tree-grid-cell .cell-div{cursor:pointer;overflow-x:hidden;overflow-y:visible;padding:var(--content-cell-padding);display:flex;align-items:center;height:var(--row-height)}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row .tree-grid-cell.hidden{display:none}.core-tree-grid-container li>span.span-edit-mode-activated{height:var(--edit-mode-row-height)}.core-tree-grid-container li>span.span-edit-mode-activated:hover:after{display:none}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item-tool{height:var(--edit-mode-row-height);display:flex}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item-tool .tree-item-tool-wrapper{height:var(--edit-mode-row-height)}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item-tool .tree-item-tool-wrapper i{width:24px;height:24px}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item .tree-item-div{height:var(--edit-mode-row-height)}.core-tree-grid-container li>span.span-edit-mode-activated .tree-grid-row-wrapper .tree-grid-cell{height:var(--edit-mode-row-height)!important}.core-tree-grid-container li>span.span-edit-mode-activated .tree-grid-row-wrapper .tree-grid-cell .cell-div{height:var(--edit-mode-row-height)!important}.core-tree-grid-container li.collapsed .tree-item-div .expand-toggler{transform:translate(-100%) rotate(-90deg)!important;transition:.5s ease-out!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: CoreControlComponent, selector: "core-control", inputs: ["control", "form", "checkError$", "rangeLimit"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: TableCellPipe, name: "tableCell" }, { kind: "component", type: CoreButtonGroupVnsComponent, selector: "core-button-group-vns", inputs: ["height", "instanceNumber", "forHeader", "shownItems", "showCaption"], outputs: ["buttonClick"] }, { kind: "component", type: ThreedotsComponent, selector: "app-threedots" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CoreTreeGridComponent, decorators: [{
             type: Component,
@@ -17028,7 +17027,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         TableCellPipe,
                         CoreButtonGroupVnsComponent,
                         ThreedotsComponent,
-                    ], template: "<div #container class=\"core-tree-grid-container\" [ngStyle]=\"{\r\n    width: '100%',\r\n    height: height + 'px',\r\n    overflow: 'scroll'\r\n}\">\r\n\r\n    @if (loading) {\r\n    <div class=\"loading-surface\">\r\n        <div class=\"loading-wrapper\">\r\n            <app-threedots></app-threedots>\r\n        </div>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"tree-grid-header\" [ngStyle]=\"{\r\n        width: totalWidth + 'px'\r\n    }\">\r\n        <div class=\"tree-block-header\" [ngStyle]=\"{\r\n            width: treeColumnWidth + treeNodeLevelPadding + 'px'\r\n        }\">\r\n            <div class=\"header-cell-div\">\r\n                {{ 'UI.CORE_TREE_GRID.TREE_BLOCK_HEADER' | translate: lang }}\r\n                <core-button-group-vns [shownItems]=\"headerToolItems\"\r\n                    (buttonClick)=\"onHeaderToolClick($event)\"></core-button-group-vns>\r\n            </div>\r\n        </div>\r\n        @if (!!headerGroupAvailable && !!headerGroups && !!headerGroups.length) {\r\n            @for (headerGroup of headerGroups; track $index) {\r\n                \r\n            }\r\n        }\r\n        @for (column of columns; track $index) {\r\n        <div [class.hidden]=\"column.hidden\" [ngStyle]=\"\r\n            {\r\n                width: !!column.width ? column.width + 'px' : 'unset',\r\n                textAlign: !!column.align ? column.align.toLowerCase() : 'unset'\r\n            }\r\n            \">\r\n            <div class=\"header-cell-div\">\r\n                {{ column.caption | translate: lang }}\r\n            </div>\r\n        </div>\r\n        }\r\n    </div>\r\n\r\n    <div #frontTreeContainer class=\"tree-grid-content front-container\" [class.edit-mode-activated]=\"editModeActivated\">\r\n        @for (root of data; track $index) {\r\n        @defer(on viewport(treeContainer)) {\r\n        <ul class=\"root\" [class.collapsed]=\"!!!root.tree$Expanded\" [ngStyle]=\"{\r\n            paddingLeft: treeNodeLevelPadding + 'px'\r\n        }\">\r\n            <ng-container *ngTemplateOutlet=\"frontItem; context: { context: root }\"></ng-container>\r\n        </ul>\r\n        }\r\n        }\r\n    </div>\r\n\r\n    <div #treeContainer class=\"tree-grid-content\" [class.edit-mode-activated]=\"editModeActivated\">\r\n        @for (root of data; track $index) {\r\n        @defer(on viewport(treeContainer)) {\r\n        <ul class=\"root\" [class.collapsed]=\"!!!root.tree$Expanded\" [ngStyle]=\"{\r\n            paddingLeft: '0px'\r\n        }\">\r\n            <ng-container *ngTemplateOutlet=\"item; context: { context: root }\"></ng-container>\r\n        </ul>\r\n        }\r\n        }\r\n    </div>\r\n\r\n    <ng-template #item let-context=\"context\" let-id=\"context.id\" let-title=\"context.tree$Title\"\r\n        let-highlighted=\"context.tree$Highlighted\" let-hasChildren=\"context.tree$HasChildren\"\r\n        let-children=\"context.tree$Children\" let-expanded=\"context.tree$Expanded\" let-active=\"context.tree$Active\"\r\n        let-checked=\"context.tree$Checked\" let-tier=\"context.tree$Tier\">\r\n\r\n        <li [class.has-children]=\"!!hasChildren\" [class.collapsed]=\"!!hasChildren && !!!expanded\"\r\n            (click)=\"onRowClick(context, $event)\">\r\n            <span [class.span-edit-mode-activated]=\"!!editModeActivated && pendingContext.id===id\">\r\n\r\n                <div class=\"tree-item\">\r\n                    <div class=\"tree-item-div\" [attr.data-tier]=\"tier\" [ngStyle]=\"{\r\n                        width: '0px',\r\n                        }\">\r\n                    </div>\r\n                </div>\r\n                <div class=\"tree-grid-row-wrapper\">\r\n                    <div class=\"tree-grid-row\">\r\n                        @if (!(!!editModeActivated && pendingContext?.id===id)) {\r\n                        @for (column of columns; track $index) {\r\n                        <div class=\"tree-grid-cell\" [class.hidden]=\"column.hidden\">\r\n                            <div class=\"cell-div\" [ngStyle]=\"\r\n                                    {\r\n                                        width: !!column.width ? column.width + 'px' : 'unset',\r\n                                        overflow: 'hidden',\r\n                                        textAlign: !!column.align ? column.align.toLowerCase() : 'unset'\r\n                                    }\r\n                                \">\r\n                                {{ !!column.translate ? (context[column.field] | translate: lang | tableCell:\r\n                                column.pipe : lang) :\r\n                                context[column.field] | tableCell: column.pipe : lang}}\r\n                            </div>\r\n                        </div>\r\n                        }\r\n                        }\r\n\r\n                        @if (!!editModeActivated && pendingContext?.id===id) {\r\n                        <ng-container>\r\n                            @for (column of columns; track $index) {\r\n                            <div class=\"tree-grid-cell\" [class.hidden]=\"column.hidden\">\r\n                                <div class=\"cell-div\" [ngStyle]=\"\r\n                                    {\r\n                                        width: !!column.width ? column.width + 'px' : 'unset',\r\n                                        display: 'table',\r\n                                        overflowY: 'visible',\r\n                                        textAlign: !!column.align ? column.align.toLowerCase() : 'unset'\r\n                                    }\r\n                                \">\r\n                                    @if (!column.control) {\r\n                                    <ng-container>\r\n                                        {{ !!column.translate ? (context[column.field] | translate: lang | tableCell:\r\n                                        column.pipe : lang) :\r\n                                        context[column.field] | tableCell: column.pipe : lang}}\r\n                                    </ng-container>\r\n                                    } @else {\r\n                                    <ng-container>\r\n                                        <core-control [form]=\"form\" [control]=\"column.control!\"\r\n                                            [checkError$]=\"checkError$\"></core-control>\r\n                                    </ng-container>\r\n                                    }\r\n\r\n                                </div>\r\n                            </div>\r\n                            }\r\n                        </ng-container>\r\n\r\n                        }\r\n\r\n                    </div>\r\n                </div>\r\n\r\n            </span>\r\n            @if (!!expanded && !!children.length) {\r\n            <ul [class.collapsed]=\"!expanded\" [ngStyle]=\"{\r\n                paddingLeft: '0px'\r\n            }\">\r\n                @for (child of children; track $index) {\r\n                <ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"item; context: { context: child }\"></ng-container>\r\n                </ng-container>\r\n                }\r\n            </ul>\r\n            }\r\n\r\n        </li>\r\n    </ng-template>\r\n\r\n    <ng-template #frontItem let-context=\"context\" let-id=\"context.id\" let-title=\"context.tree$Title\"\r\n        let-highlighted=\"context.tree$Highlighted\" let-hasChildren=\"context.tree$HasChildren\"\r\n        let-children=\"context.tree$Children\" let-expanded=\"context.tree$Expanded\" let-active=\"context.tree$Active\"\r\n        let-checked=\"context.tree$Checked\" let-tier=\"context.tree$Tier\">\r\n\r\n        <li [class.has-children]=\"!!hasChildren\" [class.collapsed]=\"!!hasChildren && !!!expanded\"\r\n            (click)=\"onRowClick(context, $event)\">\r\n            <span [class.span-edit-mode-activated]=\"!!editModeActivated && pendingContext.id===id\">\r\n\r\n                <div class=\"tree-item\">\r\n                    <div class=\"tree-item-div\" [attr.data-tier]=\"tier\" [ngStyle]=\"{\r\n                    width: treeColumnWidth - (tier - 1) * treeNodeLevelPadding + 'px',\r\n                    }\">\r\n                        <div class=\"tree-item-tool\">\r\n                            <div class=\"tree-item-tool-wrapper\">\r\n                                <core-button-group-vns [shownItems]=\"toolItems\" [showCaption]=\"false\"\r\n                                    (buttonClick)=\"onToolClick($event, context)\"></core-button-group-vns>\r\n                            </div>\r\n                        </div>\r\n\r\n                        @if (!!children.length) {\r\n                        <i class=\"expand-toggler feather-chevron-down\" (click)=\"onExpandTogglerClick(context)\"></i>\r\n                        }\r\n                        <object (click)=\"onObjectClick(context, $event)\">\r\n                            {{ title }}\r\n                        </object>\r\n                    </div>\r\n                </div>\r\n\r\n            </span>\r\n            @if (!!expanded && !!children.length) {\r\n            <ul [class.collapsed]=\"!expanded\" [ngStyle]=\"{\r\n            paddingLeft: treeNodeLevelPadding + 'px'\r\n        }\">\r\n                @for (child of children; track $index) {\r\n                <ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"frontItem; context: { context: child }\"></ng-container>\r\n                </ng-container>\r\n                }\r\n            </ul>\r\n            }\r\n\r\n        </li>\r\n    </ng-template>\r\n\r\n</div>", styles: [".core-tree-grid-container{--tree-container-width: 300px;--grid-total-width: 500px;--square-color: darkgray;--square-size: 20px;--max-tier: 1;--row-height: 50px;--edit-mode-row-height: 120px;--edit-mode-row-bg: #dff6dd;--border-size: 5px;--header-height: 100px;--header-cell-padding: 5px;--content-cell-padding: 5px;--header-border-size: 1px;white-space:nowrap}.core-tree-grid-container [data-tier=\"1\"]{--tier: 1}.core-tree-grid-container [data-tier=\"2\"]{--tier: 2}.core-tree-grid-container [data-tier=\"3\"]{--tier: 3}.core-tree-grid-container [data-tier=\"4\"]{--tier: 4}.core-tree-grid-container [data-tier=\"5\"]{--tier: 5}.core-tree-grid-container [data-tier=\"6\"]{--tier: 6}.core-tree-grid-container [data-tier=\"7\"]{--tier: 7}.core-tree-grid-container [data-tier=\"8\"]{--tier: 8}.core-tree-grid-container [data-tier=\"9\"]{--tier: 9}.core-tree-grid-container [data-tier=\"10\"]{--tier: 10}.core-tree-grid-container [data-tier=\"11\"]{--tier: 11}.core-tree-grid-container [data-tier=\"12\"]{--tier: 12}.core-tree-grid-container [data-tier=\"13\"]{--tier: 13}.core-tree-grid-container [data-tier=\"14\"]{--tier: 14}.core-tree-grid-container [data-tier=\"15\"]{--tier: 15}.core-tree-grid-container [data-tier=\"16\"]{--tier: 16}.core-tree-grid-container [data-tier=\"17\"]{--tier: 17}.core-tree-grid-container [data-tier=\"18\"]{--tier: 18}.core-tree-grid-container [data-tier=\"19\"]{--tier: 19}.core-tree-grid-container [data-tier=\"20\"]{--tier: 20}.core-tree-grid-container [data-tier=\"21\"]{--tier: 21}.core-tree-grid-container [data-tier=\"22\"]{--tier: 22}.core-tree-grid-container [data-tier=\"23\"]{--tier: 23}.core-tree-grid-container [data-tier=\"24\"]{--tier: 24}.core-tree-grid-container *{box-sizing:border-box!important}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.core-tree-grid-container .loading-surface{width:calc(100vw - var(--size-left-bar-current-width));height:100vh;position:fixed;top:0;left:var(--size-left-bar-current-width);background-color:#ffffff80;z-index:555}.core-tree-grid-container .loading-surface .loading-wrapper{width:calc(100vw - var(--size-left-bar-current-width));height:100vh;display:flex;align-items:center;justify-content:center}.core-tree-grid-container .tree-grid-content{margin-top:var(--header-cell-padding);background-color:#fff;display:inline-block;position:relative}.core-tree-grid-container .front-container{background-color:#fff;display:inline-block;position:sticky!important;left:0;z-index:2}.core-tree-grid-container .tree-grid-content.edit-mode-activated ul>li>span:not(.span-edit-mode-activated):hover .tree-item-tool{display:none}.core-tree-grid-container .tree-grid-content.edit-mode-activated ul>li>span.span-edit-mode-activated{background-color:var(--edit-mode-row-bg)}.core-tree-grid-container .tree-grid-content.edit-mode-activated ul>li>span.span-edit-mode-activated *:not(.expand-toggler,object){background-color:var(--edit-mode-row-bg)}.core-tree-grid-container .tree-grid-header{display:block;position:sticky;top:0;left:0;z-index:3;white-space:nowrap;height:var(--header-height);background-color:var(--color-bg-main)}.core-tree-grid-container .tree-grid-header>*{box-sizing:border-box;display:inline-block;padding:var(--header-cell-padding);border:solid var(--header-border-size) white}.core-tree-grid-container .tree-grid-header .hidden{display:none}.core-tree-grid-container .tree-grid-header .tree-block-header{position:sticky;top:0;left:0;z-index:5;height:var(--header-height);background-color:var(--color-bg-main)}.core-tree-grid-container .tree-grid-header .header-cell-div{width:100%;height:calc(var(--header-height) - 2 * var(--header-cell-padding) - 2 * var(--header-border-size));display:flex;align-items:center;justify-content:space-between;overflow:hidden;text-overflow:ellipsis}.core-tree-grid-container ul{display:table;table-layout:fixed;margin-bottom:0;animation:fade-in 1s ease-out}.core-tree-grid-container ul.collapsed:not(.root){display:none}.core-tree-grid-container li{display:block;position:relative;white-space:nowrap}.core-tree-grid-container li>span{position:relative;display:table-row}.core-tree-grid-container li>span .tree-item-tool{position:absolute;top:0;right:0;z-index:3;height:var(--row-height);display:none}.core-tree-grid-container li>span .tree-item-tool .tree-item-tool-wrapper{display:flex;align-items:center;justify-content:flex-end;height:var(--row-height)}.core-tree-grid-container li>span .tree-item{vertical-align:top;display:table-cell}.core-tree-grid-container li>span .tree-item .tree-item-div{display:flex;align-items:center;justify-content:flex-start;position:relative;height:var(--row-height)}.core-tree-grid-container li>span .tree-item .tree-item-div>i{color:var(--square-color);cursor:pointer;font-size:var(--square-size);width:var(--square-size);height:var(--square-size)}.core-tree-grid-container li>span .tree-item .tree-item-div>.expand-toggler{position:absolute;z-index:1;transform:translate(-100%) rotate(0);transition:.5s ease-out}.core-tree-grid-container li>span .tree-item .tree-item-div object{display:table-cell;cursor:pointer}.core-tree-grid-container li>span:hover .tree-item-tool{display:flex;align-items:center;justify-content:flex-end}.core-tree-grid-container li>span:hover:after{content:\"\";display:block;height:var(--row-height);position:absolute;width:var(--grid-total-width);background-color:#d3d3d3;opacity:.2;z-index:1;top:0;left:0}.core-tree-grid-container li>span .tree-grid-row-wrapper{display:table-cell;position:relative}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row{display:inline-flex;background-color:#fff}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row .tree-grid-cell{display:table-cell;height:var(--row-height)}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row .tree-grid-cell .cell-div{cursor:pointer;overflow-x:hidden;overflow-y:visible;padding:var(--content-cell-padding);display:flex;align-items:center;height:var(--row-height)}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row .tree-grid-cell.hidden{display:none}.core-tree-grid-container li>span.span-edit-mode-activated{height:var(--edit-mode-row-height)}.core-tree-grid-container li>span.span-edit-mode-activated:hover:after{display:none}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item-tool{height:var(--edit-mode-row-height);display:flex}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item-tool .tree-item-tool-wrapper{height:var(--edit-mode-row-height)}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item-tool .tree-item-tool-wrapper i{width:24px;height:24px}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item .tree-item-div{height:var(--edit-mode-row-height)}.core-tree-grid-container li>span.span-edit-mode-activated .tree-grid-row-wrapper .tree-grid-cell{height:var(--edit-mode-row-height)!important}.core-tree-grid-container li>span.span-edit-mode-activated .tree-grid-row-wrapper .tree-grid-cell .cell-div{height:var(--edit-mode-row-height)!important}.core-tree-grid-container li.collapsed .tree-item-div .expand-toggler{transform:translate(-100%) rotate(-90deg)!important;transition:.5s ease-out!important}\n"] }]
+                    ], template: "<div #container class=\"core-tree-grid-container\" [ngStyle]=\"{\r\n    width: '100%',\r\n    height: height + 'px',\r\n    overflow: 'scroll'\r\n}\">\r\n\r\n    @if (loading) {\r\n    <div class=\"loading-surface\">\r\n        <div class=\"loading-wrapper\">\r\n            <app-threedots></app-threedots>\r\n        </div>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"tree-grid-header\" [ngStyle]=\"{\r\n        width: totalWidth + 'px',\r\n        whiteSpace: 'nowrap',\r\n        display: 'flex',\r\n        position: 'sticky'\r\n    }\">\r\n        <div class=\"tree-block-header\" [ngStyle]=\"{\r\n            width: treeColumnWidth + treeNodeLevelPadding + 'px',\r\n            height: headerHeight + 'px',\r\n            border: headerBorderSize + 'px solid white',\r\n        }\">\r\n            <div class=\"header-cell-div\" [ngStyle]=\"{\r\n                height: headerHeight + 'px',\r\n            }\">\r\n                {{ 'UI.CORE_TREE_GRID.TREE_BLOCK_HEADER' | translate: lang }}\r\n                @if (!treeCreateUpdateDisabled) {\r\n                <core-button-group-vns [shownItems]=\"headerToolItems\"\r\n                    (buttonClick)=\"onHeaderToolClick($event)\"></core-button-group-vns>\r\n                }\r\n            </div>\r\n        </div>\r\n\r\n        <div [ngStyle]=\"{\r\n            display: 'inline-block',\r\n            height: headerHeight + 'px',\r\n            whiteSpace: 'nowrap'\r\n        }\">\r\n\r\n            <div class=\"header-row-one\" [ngStyle]=\"{\r\n                display: 'block',\r\n                height: (!!headerGroups ? headerHeight/2 : headerHeight) + 'px',\r\n            }\">\r\n                @if (!!headerGroups) {\r\n                @for (headerGroup of headerGroups; track $index) {\r\n                <div class=\"header-group-cell-div\" [ngStyle]=\"{\r\n                        height: (!!headerGroups ? headerHeight/2 : headerHeight) + 'px',\r\n                        width: headerGroup.width + 'px',\r\n                        border: headerBorderSize + 'px solid white',\r\n                        }\">\r\n                    {{ headerGroup.key | translate: lang }}\r\n                </div>\r\n                }\r\n                }\r\n            </div>\r\n\r\n            <div class=\"header-row-two\" [ngStyle]=\"{\r\n                display: 'block',\r\n                height: (!!headerGroups ? headerHeight/2 : headerHeight) + 'px',\r\n            }\">\r\n                @for (column of columns; track $index) {\r\n                <div [class.hidden]=\"column.hidden\" [ngStyle]=\"\r\n                {\r\n                    display: 'inline-block',\r\n                    height: (!!headerGroups ? headerHeight/2 : headerHeight) + 'px',\r\n                    border: headerBorderSize + 'px solid white',\r\n                    width: !!column.width ? column.width + 'px' : 'unset',\r\n                    textAlign: !!column.align ? column.align.toLowerCase() : 'unset'\r\n                }\r\n                \">\r\n                    <div class=\"header-cell-div\" [ngStyle]=\"{\r\n                        height: (!!headerGroups ? headerHeight/2 : headerHeight) + 'px',\r\n                    }\">\r\n                        {{ column.caption | translate: lang }}\r\n                    </div>\r\n                </div>\r\n                }\r\n\r\n\r\n            </div>\r\n\r\n\r\n        </div>\r\n\r\n\r\n\r\n    </div>\r\n\r\n    <div #frontTreeContainer class=\"tree-grid-content front-container\" [class.edit-mode-activated]=\"editModeActivated\">\r\n        @for (root of data; track $index) {\r\n        @defer(on viewport(treeContainer)) {\r\n        <ul class=\"root\" [class.collapsed]=\"!!!root.tree$Expanded\" [ngStyle]=\"{\r\n            paddingLeft: treeNodeLevelPadding + 'px'\r\n        }\">\r\n            <ng-container *ngTemplateOutlet=\"frontItem; context: { context: root }\"></ng-container>\r\n        </ul>\r\n        }\r\n        }\r\n    </div>\r\n\r\n    <div #treeContainer class=\"tree-grid-content\" [class.edit-mode-activated]=\"editModeActivated\">\r\n        @for (root of data; track $index) {\r\n        @defer(on viewport(treeContainer)) {\r\n        <ul class=\"root\" [class.collapsed]=\"!!!root.tree$Expanded\" [ngStyle]=\"{\r\n            paddingLeft: '0px'\r\n        }\">\r\n            <ng-container *ngTemplateOutlet=\"item; context: { context: root }\"></ng-container>\r\n        </ul>\r\n        }\r\n        }\r\n    </div>\r\n\r\n    <ng-template #item let-context=\"context\" let-id=\"context.id\" let-title=\"context.tree$Title\"\r\n        let-highlighted=\"context.tree$Highlighted\" let-hasChildren=\"context.tree$HasChildren\"\r\n        let-children=\"context.tree$Children\" let-expanded=\"context.tree$Expanded\" let-active=\"context.tree$Active\"\r\n        let-checked=\"context.tree$Checked\" let-tier=\"context.tree$Tier\">\r\n\r\n        <li [class.has-children]=\"!!hasChildren\" [class.collapsed]=\"!!hasChildren && !!!expanded\"\r\n            (click)=\"onRowClick(context, $event)\">\r\n            <span [class.span-edit-mode-activated]=\"!!editModeActivated && pendingContext.id===id\">\r\n\r\n                <div class=\"tree-item\">\r\n                    <div class=\"tree-item-div\" [attr.data-tier]=\"tier\" [ngStyle]=\"{\r\n                        width: '0px',\r\n                        }\">\r\n                    </div>\r\n                </div>\r\n                <div class=\"tree-grid-row-wrapper\">\r\n                    <div class=\"tree-grid-row\">\r\n                        @if (!(!!editModeActivated && pendingContext?.id===id)) {\r\n                        @for (column of columns; track $index) {\r\n                        <div class=\"tree-grid-cell\" [class.hidden]=\"column.hidden\">\r\n                            <div class=\"cell-div\" [ngStyle]=\"\r\n                                    {\r\n                                        width: !!column.width ? column.width + 'px' : 'unset',\r\n                                        overflow: 'hidden',\r\n                                        textAlign: !!column.align ? column.align.toLowerCase() : 'unset'\r\n                                    }\r\n                                \">\r\n                                {{ !!column.translate ? (context[column.field] | translate: lang | tableCell:\r\n                                column.pipe : lang) :\r\n                                context[column.field] | tableCell: column.pipe : lang}}\r\n                            </div>\r\n                        </div>\r\n                        }\r\n                        }\r\n\r\n                        @if (!!editModeActivated && pendingContext?.id===id) {\r\n                        <ng-container>\r\n                            @for (column of columns; track $index) {\r\n                            <div class=\"tree-grid-cell\" [class.hidden]=\"column.hidden\">\r\n                                <div class=\"cell-div\" [ngStyle]=\"\r\n                                    {\r\n                                        width: !!column.width ? column.width + 'px' : 'unset',\r\n                                        display: 'table',\r\n                                        overflowY: 'visible',\r\n                                        textAlign: !!column.align ? column.align.toLowerCase() : 'unset'\r\n                                    }\r\n                                \">\r\n                                    @if (!column.control) {\r\n                                    <ng-container>\r\n                                        {{ !!column.translate ? (context[column.field] | translate: lang | tableCell:\r\n                                        column.pipe : lang) :\r\n                                        context[column.field] | tableCell: column.pipe : lang}}\r\n                                    </ng-container>\r\n                                    } @else {\r\n                                    <ng-container>\r\n                                        <core-control [form]=\"form\" [control]=\"column.control!\"\r\n                                            [checkError$]=\"checkError$\"></core-control>\r\n                                    </ng-container>\r\n                                    }\r\n\r\n                                </div>\r\n                            </div>\r\n                            }\r\n                        </ng-container>\r\n\r\n                        }\r\n\r\n                    </div>\r\n                </div>\r\n\r\n            </span>\r\n            @if (!!expanded && !!children.length) {\r\n            <ul [class.collapsed]=\"!expanded\" [ngStyle]=\"{\r\n                paddingLeft: '0px'\r\n            }\">\r\n                @for (child of children; track $index) {\r\n                <ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"item; context: { context: child }\"></ng-container>\r\n                </ng-container>\r\n                }\r\n            </ul>\r\n            }\r\n\r\n        </li>\r\n    </ng-template>\r\n\r\n    <ng-template #frontItem let-context=\"context\" let-id=\"context.id\" let-title=\"context.tree$Title\"\r\n        let-highlighted=\"context.tree$Highlighted\" let-hasChildren=\"context.tree$HasChildren\"\r\n        let-children=\"context.tree$Children\" let-expanded=\"context.tree$Expanded\" let-active=\"context.tree$Active\"\r\n        let-checked=\"context.tree$Checked\" let-tier=\"context.tree$Tier\">\r\n\r\n        <li [class.has-children]=\"!!hasChildren\" [class.collapsed]=\"!!hasChildren && !!!expanded\"\r\n            (click)=\"onRowClick(context, $event)\">\r\n            <span [class.span-edit-mode-activated]=\"!!editModeActivated && pendingContext.id===id\">\r\n\r\n                <div class=\"tree-item\">\r\n                    <div class=\"tree-item-div\" [attr.data-tier]=\"tier\" [ngStyle]=\"{\r\n                    width: treeColumnWidth - tier * treeNodeLevelPadding + 'px',\r\n                    }\">\r\n                        @if (!treeCreateUpdateDisabled) {\r\n                        <div class=\"tree-item-tool\">\r\n                            <div class=\"tree-item-tool-wrapper\">\r\n                                <core-button-group-vns [shownItems]=\"toolItems\" [showCaption]=\"false\"\r\n                                    (buttonClick)=\"onToolClick($event, context)\"></core-button-group-vns>\r\n                            </div>\r\n                        </div>\r\n                        }\r\n\r\n                        @if (!!children.length) {\r\n                        <i class=\"expand-toggler feather-chevron-down\" (click)=\"onExpandTogglerClick(context)\"></i>\r\n                        }\r\n                        <object (click)=\"onObjectClick(context, $event)\">\r\n                            {{ title }}\r\n                        </object>\r\n                    </div>\r\n                </div>\r\n\r\n            </span>\r\n            @if (!!expanded && !!children.length) {\r\n            <ul [class.collapsed]=\"!expanded\" [ngStyle]=\"{\r\n            paddingLeft: treeNodeLevelPadding + 'px'\r\n        }\">\r\n                @for (child of children; track $index) {\r\n                <ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"frontItem; context: { context: child }\"></ng-container>\r\n                </ng-container>\r\n                }\r\n            </ul>\r\n            }\r\n\r\n        </li>\r\n    </ng-template>\r\n\r\n</div>", styles: [".core-tree-grid-container{--tree-container-width: 300px;--grid-total-width: 500px;--square-color: darkgray;--square-size: 20px;--max-tier: 1;--row-height: 50px;--edit-mode-row-height: 120px;--edit-mode-row-bg: #dff6dd;--border-size: 5px;--header-height: 100px;--header-cell-padding: 5px;--content-cell-padding: 5px;--header-border-size: 1px;--tree-node-level-padding: 15px;white-space:nowrap;font-size:var(--typo-basic-font-size)}.core-tree-grid-container [data-tier=\"1\"]{--tier: 1;--translate-x: calc(var(--tree-node-level-padding) * -1)}.core-tree-grid-container [data-tier=\"2\"]{--tier: 2;--translate-x: calc(var(--tree-node-level-padding) * -2)}.core-tree-grid-container [data-tier=\"3\"]{--tier: 3;--translate-x: calc(var(--tree-node-level-padding) * -3)}.core-tree-grid-container [data-tier=\"4\"]{--tier: 4;--translate-x: calc(var(--tree-node-level-padding) * -4)}.core-tree-grid-container [data-tier=\"5\"]{--tier: 5;--translate-x: calc(var(--tree-node-level-padding) * -5)}.core-tree-grid-container [data-tier=\"6\"]{--tier: 6;--translate-x: calc(var(--tree-node-level-padding) * -6)}.core-tree-grid-container [data-tier=\"7\"]{--tier: 7;--translate-x: calc(var(--tree-node-level-padding) * -7)}.core-tree-grid-container [data-tier=\"8\"]{--tier: 8;--translate-x: calc(var(--tree-node-level-padding) * -8)}.core-tree-grid-container [data-tier=\"9\"]{--tier: 9;--translate-x: calc(var(--tree-node-level-padding) * -9)}.core-tree-grid-container [data-tier=\"10\"]{--tier: 10;--translate-x: calc(var(--tree-node-level-padding) * -10)}.core-tree-grid-container [data-tier=\"11\"]{--tier: 11;--translate-x: calc(var(--tree-node-level-padding) * -11)}.core-tree-grid-container [data-tier=\"12\"]{--tier: 12;--translate-x: calc(var(--tree-node-level-padding) * -12)}.core-tree-grid-container [data-tier=\"13\"]{--tier: 13;--translate-x: calc(var(--tree-node-level-padding) * -13)}.core-tree-grid-container [data-tier=\"14\"]{--tier: 14;--translate-x: calc(var(--tree-node-level-padding) * -14)}.core-tree-grid-container [data-tier=\"15\"]{--tier: 15;--translate-x: calc(var(--tree-node-level-padding) * -15)}.core-tree-grid-container [data-tier=\"16\"]{--tier: 16;--translate-x: calc(var(--tree-node-level-padding) * -16)}.core-tree-grid-container [data-tier=\"17\"]{--tier: 17;--translate-x: calc(var(--tree-node-level-padding) * -17)}.core-tree-grid-container [data-tier=\"18\"]{--tier: 18;--translate-x: calc(var(--tree-node-level-padding) * -18)}.core-tree-grid-container [data-tier=\"19\"]{--tier: 19;--translate-x: calc(var(--tree-node-level-padding) * -19)}.core-tree-grid-container [data-tier=\"20\"]{--tier: 20;--translate-x: calc(var(--tree-node-level-padding) * -20)}.core-tree-grid-container [data-tier=\"21\"]{--tier: 21;--translate-x: calc(var(--tree-node-level-padding) * -21)}.core-tree-grid-container [data-tier=\"22\"]{--tier: 22;--translate-x: calc(var(--tree-node-level-padding) * -22)}.core-tree-grid-container [data-tier=\"23\"]{--tier: 23;--translate-x: calc(var(--tree-node-level-padding) * -23)}.core-tree-grid-container [data-tier=\"24\"]{--tier: 24;--translate-x: calc(var(--tree-node-level-padding)) * -24 }.core-tree-grid-container *{box-sizing:border-box!important}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.core-tree-grid-container .loading-surface{width:calc(100vw - var(--size-left-bar-current-width));height:100vh;position:fixed;top:0;left:var(--size-left-bar-current-width);background-color:#ffffff80;z-index:555}.core-tree-grid-container .loading-surface .loading-wrapper{width:calc(100vw - var(--size-left-bar-current-width));height:100vh;display:flex;align-items:center;justify-content:center}.core-tree-grid-container .tree-grid-content{margin-top:var(--header-cell-padding);background-color:#fff;display:inline-block;position:relative}.core-tree-grid-container .front-container{background-color:#fff;display:inline-block;position:sticky!important;left:0;z-index:2}.core-tree-grid-container .tree-grid-content.edit-mode-activated ul>li>span:not(.span-edit-mode-activated):hover .tree-item-tool{display:none}.core-tree-grid-container .tree-grid-content.edit-mode-activated ul>li>span.span-edit-mode-activated{background-color:var(--edit-mode-row-bg)}.core-tree-grid-container .tree-grid-content.edit-mode-activated ul>li>span.span-edit-mode-activated *:not(.expand-toggler,object){background-color:var(--edit-mode-row-bg)}.core-tree-grid-container .tree-grid-header{top:0;left:0;z-index:3;white-space:nowrap;height:var(--header-height);background-color:var(--color-bg-main)}.core-tree-grid-container .tree-grid-header>*{box-sizing:border-box;display:inline-block}.core-tree-grid-container .tree-grid-header .hidden{display:none}.core-tree-grid-container .tree-grid-header .tree-block-header{position:sticky;top:0;left:0;z-index:5;height:var(--header-height);background-color:var(--color-bg-main)}.core-tree-grid-container .tree-grid-header .header-group-cell-div,.core-tree-grid-container .tree-grid-header .header-cell-div{width:100%;display:inline-flex;align-items:center;overflow:hidden;text-overflow:ellipsis}.core-tree-grid-container .tree-grid-header .header-group-cell-div,.core-tree-grid-container .tree-grid-header .header-cell-div{justify-content:center}.core-tree-grid-container ul{display:table;table-layout:fixed;margin-bottom:0;animation:fade-in 1s ease-out}.core-tree-grid-container ul.collapsed:not(.root){display:none}.core-tree-grid-container li{display:block;position:relative;white-space:nowrap}.core-tree-grid-container li>span{position:relative;display:table-row}.core-tree-grid-container li>span .tree-item-tool{position:absolute;top:0;right:0;z-index:7;height:var(--row-height);display:none}.core-tree-grid-container li>span .tree-item-tool .tree-item-tool-wrapper{display:flex;align-items:center;justify-content:flex-end;height:var(--row-height)}.core-tree-grid-container li>span .tree-item{vertical-align:top;display:table-cell}.core-tree-grid-container li>span .tree-item .tree-item-div{display:flex;align-items:center;justify-content:flex-start;position:relative;height:var(--row-height)}.core-tree-grid-container li>span .tree-item .tree-item-div>i{color:var(--square-color);cursor:pointer;font-size:var(--square-size);width:var(--square-size);height:var(--square-size)}.core-tree-grid-container li>span .tree-item .tree-item-div>.expand-toggler{position:absolute;z-index:6;transform:translate(-100%) rotate(0);transition:.5s ease-out}.core-tree-grid-container li>span .tree-item .tree-item-div object{display:table-cell;cursor:pointer}.core-tree-grid-container li>span:hover .tree-item-tool{display:flex;align-items:center;justify-content:flex-end}.core-tree-grid-container li>span:hover:after{content:\"\";display:block;height:var(--row-height);position:absolute;width:calc(var(--grid-total-width) + 1000px);background-color:#d3d3d3;opacity:.2;z-index:5;top:0;left:-1000px}.core-tree-grid-container li>span .tree-grid-row-wrapper{display:table-cell;position:relative}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row{display:inline-flex;background-color:#fff}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row .tree-grid-cell{display:table-cell;height:var(--row-height)}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row .tree-grid-cell .cell-div{cursor:pointer;overflow-x:hidden;overflow-y:visible;padding:var(--content-cell-padding);display:flex;align-items:center;height:var(--row-height)}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row .tree-grid-cell.hidden{display:none}.core-tree-grid-container li>span.span-edit-mode-activated{height:var(--edit-mode-row-height)}.core-tree-grid-container li>span.span-edit-mode-activated:hover:after{display:none}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item-tool{height:var(--edit-mode-row-height);display:flex}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item-tool .tree-item-tool-wrapper{height:var(--edit-mode-row-height)}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item-tool .tree-item-tool-wrapper i{width:24px;height:24px}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item .tree-item-div{height:var(--edit-mode-row-height)}.core-tree-grid-container li>span.span-edit-mode-activated .tree-grid-row-wrapper .tree-grid-cell{height:var(--edit-mode-row-height)!important}.core-tree-grid-container li>span.span-edit-mode-activated .tree-grid-row-wrapper .tree-grid-cell .cell-div{height:var(--edit-mode-row-height)!important}.core-tree-grid-container li.collapsed .tree-item-div .expand-toggler{transform:translate(-100%) rotate(-90deg)!important;transition:.5s ease-out!important}\n"] }]
         }], ctorParameters: () => [{ type: AppService }, { type: RecursiveService }, { type: MultiLanguageService }, { type: DialogService }, { type: CoreControlService }, { type: CoreTableService }], propDecorators: { height: [{
                 type: Input,
                 args: [{ required: true }]
@@ -17044,14 +17043,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
             }], parentField: [{
                 type: Input,
                 args: [{ required: true }]
-            }], getFullListApi: [{
+            }], headerHeight: [{
+                type: Input,
+                args: [{ required: true }]
+            }], headerCellPadding: [{
+                type: Input
+            }], headerBorderSize: [{
                 type: Input
             }], treeColumnWidth: [{
                 type: Input
             }], treeNodeLevelPadding: [{
                 type: Input
+            }], getFullListApi: [{
+                type: Input
             }], crud: [{
                 type: Input
+            }], treeCreateUpdateDisabled: [{
+                type: Input
             }], onRowDoubleClick: [{
                 type: Output
             }], onSubmitSuccess: [{
@@ -17082,6 +17090,7 @@ class MenuComponent {
         };
         this.functionDropdownOptions$ = new BehaviorSubject([]);
         this.subscriptions = [];
+        this.createUpdateDisabled = false;
         this.columns = [
             {
                 // Hiển thị cột 'id' là bắt buộc
@@ -17108,7 +17117,7 @@ class MenuComponent {
                 field: 'tree$Path',
                 type: 'string',
                 align: 'left',
-                width: 100,
+                width: 200,
             },
             {
                 caption: EnumTranslateKey.UI_ENTITY_FIELD_CAPTION_SYS_MENU_CODE,
@@ -17319,8 +17328,10 @@ class MenuComponent {
     ngOnDestroy() {
         this.subscriptions.push();
     }
+    onCorePageHeaderButtonClick(e) {
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: MenuComponent, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: AppService }, { token: LayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: MenuComponent, isStandalone: true, selector: "app-menu", ngImport: i0, template: "<core-page-header [title]=\"title\" [hideButtonGroup]=\"true\"></core-page-header>\r\n\r\n<div class=\"menu-tree-grid-container\">\r\n    <core-tree-grid [height]=\"treeGridHeight\" [getFullListApi]=\"getFullListApi\" keyField=\"id\" titleField=\"code\" parentField=\"parent\"\r\n        [treeColumnWidth]=\"400\" [columns]=\"columns\" [crud]=\"crud\"\r\n        (onRowDoubleClick)=\"onRowDoubleClick($event)\"></core-tree-grid>\r\n</div>\r\n\r\n<router-outlet name=\"menuAux\"></router-outlet>", styles: [".menu-tree-grid-container{height:calc(var(--content-container-height) - var(--size-core-page-header-height) - var(--size-layout-block-cell-spacing) * 2);overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: CorePageHeaderComponent, selector: "core-page-header", inputs: ["instanceNumber", "shownItems", "title", "hideButtonGroup"], outputs: ["buttonClick"] }, { kind: "component", type: CoreTreeGridComponent, selector: "core-tree-grid", inputs: ["height", "columns", "keyField", "titleField", "parentField", "getFullListApi", "treeColumnWidth", "treeNodeLevelPadding", "crud"], outputs: ["onRowDoubleClick", "onSubmitSuccess"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: MenuComponent, isStandalone: true, selector: "app-menu", ngImport: i0, template: "<core-page-header [title]=\"title\" (buttonClick)=\"onCorePageHeaderButtonClick($event)\"></core-page-header>\r\n\r\n<div class=\"menu-tree-grid-container\">\r\n    <core-tree-grid [height]=\"treeGridHeight\" [headerHeight]=\"100\" [getFullListApi]=\"getFullListApi\" keyField=\"id\" titleField=\"code\" parentField=\"parent\"\r\n        [treeColumnWidth]=\"400\" [columns]=\"columns\" [crud]=\"crud\"\r\n        (onRowDoubleClick)=\"onRowDoubleClick($event)\" [treeCreateUpdateDisabled]=\"createUpdateDisabled\"></core-tree-grid>\r\n</div>\r\n\r\n<router-outlet name=\"menuAux\"></router-outlet>", styles: [".menu-tree-grid-container{height:calc(var(--content-container-height) - var(--size-core-page-header-height) - var(--size-layout-block-cell-spacing) * 2);overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: CorePageHeaderComponent, selector: "core-page-header", inputs: ["instanceNumber", "shownItems", "title", "hideButtonGroup"], outputs: ["buttonClick"] }, { kind: "component", type: CoreTreeGridComponent, selector: "core-tree-grid", inputs: ["height", "columns", "keyField", "titleField", "parentField", "headerHeight", "headerCellPadding", "headerBorderSize", "treeColumnWidth", "treeNodeLevelPadding", "getFullListApi", "crud", "treeCreateUpdateDisabled"], outputs: ["onRowDoubleClick", "onSubmitSuccess"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
@@ -17329,7 +17340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         RouterModule,
                         CorePageHeaderComponent,
                         CoreTreeGridComponent
-                    ], template: "<core-page-header [title]=\"title\" [hideButtonGroup]=\"true\"></core-page-header>\r\n\r\n<div class=\"menu-tree-grid-container\">\r\n    <core-tree-grid [height]=\"treeGridHeight\" [getFullListApi]=\"getFullListApi\" keyField=\"id\" titleField=\"code\" parentField=\"parent\"\r\n        [treeColumnWidth]=\"400\" [columns]=\"columns\" [crud]=\"crud\"\r\n        (onRowDoubleClick)=\"onRowDoubleClick($event)\"></core-tree-grid>\r\n</div>\r\n\r\n<router-outlet name=\"menuAux\"></router-outlet>", styles: [".menu-tree-grid-container{height:calc(var(--content-container-height) - var(--size-core-page-header-height) - var(--size-layout-block-cell-spacing) * 2);overflow:auto}\n"] }]
+                    ], template: "<core-page-header [title]=\"title\" (buttonClick)=\"onCorePageHeaderButtonClick($event)\"></core-page-header>\r\n\r\n<div class=\"menu-tree-grid-container\">\r\n    <core-tree-grid [height]=\"treeGridHeight\" [headerHeight]=\"100\" [getFullListApi]=\"getFullListApi\" keyField=\"id\" titleField=\"code\" parentField=\"parent\"\r\n        [treeColumnWidth]=\"400\" [columns]=\"columns\" [crud]=\"crud\"\r\n        (onRowDoubleClick)=\"onRowDoubleClick($event)\" [treeCreateUpdateDisabled]=\"createUpdateDisabled\"></core-tree-grid>\r\n</div>\r\n\r\n<router-outlet name=\"menuAux\"></router-outlet>", styles: [".menu-tree-grid-container{height:calc(var(--content-container-height) - var(--size-core-page-header-height) - var(--size-layout-block-cell-spacing) * 2);overflow:auto}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: AppService }, { type: LayoutService }] });
 
 class MenuEditComponent extends BaseEditComponent {