ngx-histaff-alpha 2.3.0 → 2.3.2

package/fesm2022/ngx-histaff-alpha.mjs

@@ -16705,6 +16705,9 @@ class CoreTreeGridComponent extends CoreFormControlBaseComponent {
         this.headerBorderSize = 1;
         this.treeColumnWidth = 300;
         this.treeNodeLevelPadding = 15;
+        // 1: disableTreeCreateUpdate = true && getFullListApi === undefined && crud === undefined
+        // This case is for view only, and using externant data, and this.data must become @Input()
+        this.data = [];
         this.onRowDoubleClick = new EventEmitter();
         this.onSubmitSuccess = new EventEmitter();
         this.totalWidth = 500;
@@ -16749,7 +16752,7 @@ class CoreTreeGridComponent extends CoreFormControlBaseComponent {
     ngAfterViewInit() {
         setTimeout(() => {
             this.container.nativeElement.style.setProperty('--tree-container-width', this.treeColumnWidth + 'px');
-            let gridTotalWidth = 15; // default padding
+            let gridTotalWidth = 0;
             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');
@@ -16834,7 +16837,7 @@ class CoreTreeGridComponent extends CoreFormControlBaseComponent {
     }
     onRowClick(context, event) {
         event.stopImmediatePropagation();
-        if (event?.detail === 2 && !this.treeCreateUpdateDisabled) {
+        if (event?.detail === 2 && !this.disableDoubleClick) {
             this.onRowDoubleClick.emit(context);
         }
     }
@@ -17015,7 +17018,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", 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" }] }); }
+    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", disableTreeCreateUpdate: "disableTreeCreateUpdate", data: "data", disableDoubleClick: "disableDoubleClick" }, 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 + '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 (!disableTreeCreateUpdate) {\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\" (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 && !disableTreeCreateUpdate)) {\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                        } @else {\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                    </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\" [attr.data-tier]=\"tier\"\r\n            (click)=\"onRowClick(context, $event)\">\r\n            <span class=\"front-span\" [class.span-edit-mode-activated]=\"!!editModeActivated && pendingContext.id===id\">\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 (!disableTreeCreateUpdate) {\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                        } @else {\r\n                        <i class=\"expand-toggler\" style=\"display: none;\"></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}.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{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(--tree-container-width) + var(--grid-total-width));background-color:#d3d3d3;opacity:.2;z-index:5;top:0;left:calc(var(--tree-container-width) * -1)}.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.front-span:hover:after{width:calc(var(--tree-container-width) + var(--grid-total-width));left:calc(var(--tree-node-level-padding) * var(--tier) * -1)}.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,
@@ -17027,7 +17030,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        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"] }]
+                    ], 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 + '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 (!disableTreeCreateUpdate) {\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\" (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 && !disableTreeCreateUpdate)) {\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                        } @else {\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                    </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\" [attr.data-tier]=\"tier\"\r\n            (click)=\"onRowClick(context, $event)\">\r\n            <span class=\"front-span\" [class.span-edit-mode-activated]=\"!!editModeActivated && pendingContext.id===id\">\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 (!disableTreeCreateUpdate) {\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                        } @else {\r\n                        <i class=\"expand-toggler\" style=\"display: none;\"></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}.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{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(--tree-container-width) + var(--grid-total-width));background-color:#d3d3d3;opacity:.2;z-index:5;top:0;left:calc(var(--tree-container-width) * -1)}.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.front-span:hover:after{width:calc(var(--tree-container-width) + var(--grid-total-width));left:calc(var(--tree-node-level-padding) * var(--tier) * -1)}.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 }]
@@ -17058,7 +17061,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                 type: Input
             }], crud: [{
                 type: Input
-            }], treeCreateUpdateDisabled: [{
+            }], disableTreeCreateUpdate: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], disableDoubleClick: [{
                 type: Input
             }], onRowDoubleClick: [{
                 type: Output
@@ -17090,7 +17097,7 @@ class MenuComponent {
         };
         this.functionDropdownOptions$ = new BehaviorSubject([]);
         this.subscriptions = [];
-        this.createUpdateDisabled = false;
+        this.disableTreeCreateUpdate = false;
         this.columns = [
             {
                 // Hiển thị cột 'id' là bắt buộc
@@ -17331,7 +17338,7 @@ class MenuComponent {
     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\" (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"] }] }); }
+    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)\" [disableTreeCreateUpdate]=\"disableTreeCreateUpdate\" [disableDoubleClick]=\"true\"></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", "disableTreeCreateUpdate", "data", "disableDoubleClick"], outputs: ["onRowDoubleClick", "onSubmitSuccess"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
@@ -17340,7 +17347,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         RouterModule,
                         CorePageHeaderComponent,
                         CoreTreeGridComponent
-                    ], 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"] }]
+                    ], 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)\" [disableTreeCreateUpdate]=\"disableTreeCreateUpdate\" [disableDoubleClick]=\"true\"></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 {
@@ -22609,8 +22616,8 @@ class CoreStatisticWidgetComponent {
         this.comparisonTextRectHeight = (this.height / 4 - this.divisorLineMargin.bottom) / 2;
         this.x = d3.scaleLinear().range([0, this.graphWidth]);
         this.y = d3.scaleLinear().range([this.graphHeight, 0]);
-        this.previousValue = 0;
-        this.previousComparisonValue = 0;
+        this.previousValue = undefined;
+        this.previousComparisonValue = undefined;
         //To remove only the numbers while keeping the ticks on the axes, 
         //you can select the text elements of the ticks and hide them using CSS. 
         //Here's how you can modify the code to achieve that:
@@ -22644,8 +22651,8 @@ class CoreStatisticWidgetComponent {
     }
     updateMetricValue() {
         var valueElement = d3.select("#metric_" + this.metric.id + "_value");
-        const start = this.previousValue || 0;
-        const end = this.value || 0;
+        const start = this.previousValue || undefined;
+        const end = this.value || undefined;
         switch (this.metric.dataType) {
             case EnumICoreStatisticWidgetDataType.INTEGER:
                 valueElement
@@ -22720,15 +22727,12 @@ class CoreStatisticWidgetComponent {
                 comparisonValueElement
                     .transition()
                     .tween("text", () => {
-                    if (!!start && !!end) {
+                    if (!!this.value && !!start && !!end) {
                         const interpolator = d3.interpolateNumber(start, end);
                         return t => {
                             comparisonValueElement.text(Math.round(interpolator(t)));
                         };
                     }
-                    else if (!!end) {
-                        return _ => comparisonValueElement.text(Math.round(end));
-                    }
                     else {
                         return _ => comparisonValueElement.text("N/A");
                     }
@@ -22739,15 +22743,12 @@ class CoreStatisticWidgetComponent {
                 comparisonValueElement
                     .transition()
                     .tween("text", () => {
-                    if (!!start && !!end) {
+                    if (!!this.value && !!start && !!end) {
                         const interpolator = d3.interpolateNumber(start, end);
                         return t => {
                             comparisonValueElement.text(Math.round(interpolator(t) * 100) / 100);
                         };
                     }
-                    else if (!!end) {
-                        return _ => comparisonValueElement.text(Math.round(end * 100) / 100);
-                    }
                     else {
                         return _ => comparisonValueElement.text("N/A");
                     }
@@ -22758,15 +22759,12 @@ class CoreStatisticWidgetComponent {
                 comparisonValueElement
                     .transition()
                     .tween("text", () => {
-                    if (!!start && !!end) {
+                    if (!!this.value && !!start && !!end) {
                         const interpolator = d3.interpolateNumber(start, end);
                         return t => {
                             comparisonValueElement.text(Math.round(interpolator(t) * 10000) / 100 + "%");
                         };
                     }
-                    else if (!!end) {
-                        return _ => comparisonValueElement.text(Math.round(end * 10000) / 100 + "%");
-                    }
                     else {
                         return _ => comparisonValueElement.text("N/A");
                     }