ngx-histaff-alpha 2.2.8 → 2.3.0

package/fesm2022/ngx-histaff-alpha.mjs

@@ -3517,6 +3517,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                 }]
         }] });
 
+class CoreTableService {
+    constructor() { }
+    // Each item of input array must have "headerGroup" property 
+    // if "hidden" property is not set to true. 
+    // Otherwise "isValid" will be return with "false"
+    transformWithHeaderGroup(input) {
+        const columnHeaders = [];
+        let isValid = true;
+        const inputHidden = input.filter(x => !!x.hidden);
+        const inputVisible = input.filter(x => !x.hidden);
+        // Collect columnHeaders
+        for (let i = 0; i < inputVisible.length; i++) {
+            const x = inputVisible[i];
+            if (!!x.headerGroup && typeof (x.headerGroup) === 'string' && !!x.headerGroup.length) {
+                const filter = columnHeaders.filter(m => m.key === x.headerGroup);
+                if (!filter.length) {
+                    columnHeaders.push({
+                        key: x.headerGroup,
+                        width: x.width
+                    });
+                }
+                else {
+                    // updated width
+                    filter[0].width += x.width;
+                }
+            }
+            else {
+                // Once again, each visible item of input array must have "headerGroup" property set to non-empty string value
+                // if "hidden" property is not set to true. 
+                isValid = false;
+                break;
+            }
+        }
+        // Prepare the output
+        if (!!isValid) {
+            const outputColumns = [];
+            inputHidden.map(h => {
+                outputColumns.push(h);
+            });
+            columnHeaders.map(h => {
+                const inputFilter = input.filter(x => x.headerGroup === h.key);
+                inputFilter.map(f => {
+                    outputColumns.push(f);
+                });
+            });
+            return {
+                isValid: true,
+                columns: outputColumns,
+                headerGroups: columnHeaders
+            };
+        }
+        else {
+            return {
+                isValid: false,
+                columns: input,
+                headerGroups: undefined
+            };
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CoreTableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CoreTableService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CoreTableService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
 class HeaderService {
     toggleActive(keyword, searchActive) {
         this.keyword = keyword;
@@ -4550,9 +4619,9 @@ class CoreButtonVnsComponent {
             this.subscriptions.push(filter[0].mustBeHidden$.subscribe(mbh => this.hidden = mbh.includes(this.data.code)));
         }
         else {
-            if (isDevMode()) {
-                this.alertService.warn("Không tìm thấy instance number của nhóm nút", noneAutoClosedAlertOptions);
-            }
+            // if (isDevMode()) {
+            //   this.alertService.warn("Không tìm thấy instance number của nhóm nút", noneAutoClosedAlertOptions);
+            // }
         }
     }
     ngAfterViewInit() {
@@ -16624,15 +16693,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
         }], ctorParameters: () => [{ type: DialogService }, { type: CoreFormService }] });
 
 class CoreTreeGridComponent extends CoreFormControlBaseComponent {
-    constructor(appService, recursiveService, mls, dialogService, coreControlService) {
+    constructor(appService, recursiveService, mls, dialogService, coreControlService, coreTableService) {
         super();
         this.appService = appService;
         this.recursiveService = recursiveService;
         this.mls = mls;
         this.dialogService = dialogService;
         this.coreControlService = coreControlService;
+        this.coreTableService = coreTableService;
+        this.headerCellPadding = 5;
+        this.headerBorderSize = 1;
+        this.treeColumnWidth = 300;
+        this.treeNodeLevelPadding = 15;
         this.onRowDoubleClick = new EventEmitter();
         this.onSubmitSuccess = new EventEmitter();
+        this.totalWidth = 500;
         this.subscriptions = [];
         this.checkError$ = new BehaviorSubject(false);
         this.status = {
@@ -16651,6 +16726,14 @@ class CoreTreeGridComponent extends CoreFormControlBaseComponent {
     }
     ngOnInit() {
         this.form = this.coreControlService.toCoreTreeGridInRowFormGroup(this.columns);
+        let newTotalWidth = this.treeColumnWidth;
+        this.columns.map(x => newTotalWidth += x.width);
+        this.totalWidth = newTotalWidth;
+        this.transformed = this.coreTableService.transformWithHeaderGroup(this.columns);
+        if (this.transformed.isValid) {
+            this.columns = this.transformed.columns;
+            this.headerGroups = this.transformed.headerGroups;
+        }
     }
     reload() {
         this.subscriptions.push(this.appService.get(this.getFullListApi).subscribe(x => {
@@ -16666,9 +16749,10 @@ class CoreTreeGridComponent extends CoreFormControlBaseComponent {
     ngAfterViewInit() {
         setTimeout(() => {
             this.container.nativeElement.style.setProperty('--tree-container-width', this.treeColumnWidth + 'px');
-            let gridTotalWidth = 0;
+            let gridTotalWidth = 15; // default padding
             this.columns.filter(x => !!!x.hidden).map(m => gridTotalWidth += m.width);
             this.container.nativeElement.style.setProperty('--grid-total-width', gridTotalWidth + 'px');
+            this.container.nativeElement.style.setProperty('--tree-node-level-padding', this.treeNodeLevelPadding + 'px');
             this.subscriptions.push(this.mls.lang$.subscribe(x => this.lang = x));
             this.reload();
             this.subscriptions.push(// outer-push
@@ -16750,7 +16834,7 @@ class CoreTreeGridComponent extends CoreFormControlBaseComponent {
     }
     onRowClick(context, event) {
         event.stopImmediatePropagation();
-        if (event?.detail === 2) {
+        if (event?.detail === 2 && !this.treeCreateUpdateDisabled) {
             this.onRowDoubleClick.emit(context);
         }
     }
@@ -16930,8 +17014,8 @@ class CoreTreeGridComponent extends CoreFormControlBaseComponent {
     ngOnDestroy() {
         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 }], 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: { keyField: "keyField", titleField: "titleField", parentField: "parentField", getFullListApi: "getFullListApi", treeColumnWidth: "treeColumnWidth", columns: "columns", crud: "crud" }, outputs: { onRowDoubleClick: "onRowDoubleClick", onSubmitSuccess: "onSubmitSuccess" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #container class=\"core-tree-grid-container\">\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\">\r\n        <div class=\"tree-block-header\">\r\n            <div class=\"header-cell-div\">\r\n                {{ 'UI.CORE_TREE_GRID.TREE_BLOCK_HEADER' | translate: lang }}\r\n                <core-button-group-vns [shownItems]=\"headerToolItems\"\r\n                    (buttonClick)=\"onHeaderToolClick($event)\"></core-button-group-vns>\r\n            </div>\r\n        </div>\r\n        @for (column of columns; track $index) {\r\n        <div [class.hidden]=\"column.hidden\" [ngStyle]=\"\r\n            {\r\n                width: !!column.width ? column.width + 'px' : 'unset',\r\n                textAlign: !!column.align ? column.align.toLowerCase() : 'unset'\r\n            }\r\n            \">\r\n            <div class=\"header-cell-div\">\r\n                {{ column.caption | translate: lang }}\r\n            </div>\r\n        </div>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"tree-grid-content\" [class.edit-mode-activated]=\"editModeActivated\">\r\n        @for (root of data; track $index) {\r\n        <ul class=\"root\" [class.collapsed]=\"!!!root.tree$Expanded\">\r\n            <ng-container *ngTemplateOutlet=\"item; context: { context: root }\"></ng-container>\r\n        </ul>\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                <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                <div class=\"tree-item\">\r\n                    <div class=\"tree-item-div\" [attr.data-tier]=\"tier\">\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                <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            </span>\r\n            @if (!!children.length) {\r\n            <ul [class.collapsed]=\" !!!expanded\">\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</div>", styles: [".core-tree-grid-container{--tree-container-width: 300px;--grid-total-width: 500px;--square-color: darkgray;--square-size: 20px;--step-padding: 2rem;--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}.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}@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;position:relative}.core-tree-grid-container .tree-grid-content.edit-mode-activated ul>li>span:not(.span-edit-mode-activated):hover .tree-item-tool{display:none}.core-tree-grid-container .tree-grid-content.edit-mode-activated ul>li>span.span-edit-mode-activated{background-color:var(--edit-mode-row-bg)}.core-tree-grid-container .tree-grid-content.edit-mode-activated ul>li>span.span-edit-mode-activated *:not(.expand-toggler,object){background-color:var(--edit-mode-row-bg)}.core-tree-grid-container .tree-grid-header{display:block;white-space:nowrap;height:var(--header-height);background-color:var(--color-bg-main)}.core-tree-grid-container .tree-grid-header>*{display:inline-block;padding:var(--header-cell-padding);border:solid var(--header-border-size) white}.core-tree-grid-container .tree-grid-header .hidden{display:none}.core-tree-grid-container .tree-grid-header .tree-block-header{width:calc(var(--tree-container-width) + var(--step-padding));height:var(--header-height)}.core-tree-grid-container .tree-grid-header .header-cell-div{width:100%;height:calc(var(--header-height) - 2 * var(--header-cell-padding) - 2 * var(--header-border-size));display:flex;align-items:center;justify-content:space-between;overflow:hidden;text-overflow:ellipsis}.core-tree-grid-container ul{display:table;table-layout:fixed;padding-left:var(--step-padding);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;white-space:nowrap}.core-tree-grid-container li>span{display:table-row;position:relative}.core-tree-grid-container li>span .tree-item-tool{position:absolute;top:0;right:0;z-index:2;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{width:calc(var(--tree-container-width) - (var(--tier) - 1) * var(--step-padding));display:flex;align-items:center;justify-content:flex-start;position:relative;height:var(--row-height)}.core-tree-grid-container li>span .tree-item .tree-item-div>i{color:var(--square-color);cursor:pointer;font-size:var(--square-size);width:var(--square-size);height:var(--square-size)}.core-tree-grid-container li>span .tree-item .tree-item-div>.expand-toggler{position:absolute;z-index:1;transform:translate(-100%) rotate(0);transition:.5s ease-out}.core-tree-grid-container li>span .tree-item .tree-item-div object{display:table-cell;cursor:pointer}.core-tree-grid-container li>span:hover .tree-item-tool{display:flex;align-items:center;justify-content:flex-end}.core-tree-grid-container li>span:hover:after{content:\"\";display:block;height:var(--row-height);position:absolute;width:calc(var(--tree-container-width) + var(--grid-total-width));background-color:#d3d3d3;opacity:.2;z-index:1;top:0;left:0}.core-tree-grid-container li>span .tree-grid-row-wrapper{display:inline-block;position:absolute}.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.ɵ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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CoreTreeGridComponent, decorators: [{
             type: Component,
@@ -16943,21 +17027,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         TableCellPipe,
                         CoreButtonGroupVnsComponent,
                         ThreedotsComponent,
-                    ], template: "<div #container class=\"core-tree-grid-container\">\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\">\r\n        <div class=\"tree-block-header\">\r\n            <div class=\"header-cell-div\">\r\n                {{ 'UI.CORE_TREE_GRID.TREE_BLOCK_HEADER' | translate: lang }}\r\n                <core-button-group-vns [shownItems]=\"headerToolItems\"\r\n                    (buttonClick)=\"onHeaderToolClick($event)\"></core-button-group-vns>\r\n            </div>\r\n        </div>\r\n        @for (column of columns; track $index) {\r\n        <div [class.hidden]=\"column.hidden\" [ngStyle]=\"\r\n            {\r\n                width: !!column.width ? column.width + 'px' : 'unset',\r\n                textAlign: !!column.align ? column.align.toLowerCase() : 'unset'\r\n            }\r\n            \">\r\n            <div class=\"header-cell-div\">\r\n                {{ column.caption | translate: lang }}\r\n            </div>\r\n        </div>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"tree-grid-content\" [class.edit-mode-activated]=\"editModeActivated\">\r\n        @for (root of data; track $index) {\r\n        <ul class=\"root\" [class.collapsed]=\"!!!root.tree$Expanded\">\r\n            <ng-container *ngTemplateOutlet=\"item; context: { context: root }\"></ng-container>\r\n        </ul>\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                <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                <div class=\"tree-item\">\r\n                    <div class=\"tree-item-div\" [attr.data-tier]=\"tier\">\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                <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            </span>\r\n            @if (!!children.length) {\r\n            <ul [class.collapsed]=\" !!!expanded\">\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</div>", styles: [".core-tree-grid-container{--tree-container-width: 300px;--grid-total-width: 500px;--square-color: darkgray;--square-size: 20px;--step-padding: 2rem;--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}.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}@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;position:relative}.core-tree-grid-container .tree-grid-content.edit-mode-activated ul>li>span:not(.span-edit-mode-activated):hover .tree-item-tool{display:none}.core-tree-grid-container .tree-grid-content.edit-mode-activated ul>li>span.span-edit-mode-activated{background-color:var(--edit-mode-row-bg)}.core-tree-grid-container .tree-grid-content.edit-mode-activated ul>li>span.span-edit-mode-activated *:not(.expand-toggler,object){background-color:var(--edit-mode-row-bg)}.core-tree-grid-container .tree-grid-header{display:block;white-space:nowrap;height:var(--header-height);background-color:var(--color-bg-main)}.core-tree-grid-container .tree-grid-header>*{display:inline-block;padding:var(--header-cell-padding);border:solid var(--header-border-size) white}.core-tree-grid-container .tree-grid-header .hidden{display:none}.core-tree-grid-container .tree-grid-header .tree-block-header{width:calc(var(--tree-container-width) + var(--step-padding));height:var(--header-height)}.core-tree-grid-container .tree-grid-header .header-cell-div{width:100%;height:calc(var(--header-height) - 2 * var(--header-cell-padding) - 2 * var(--header-border-size));display:flex;align-items:center;justify-content:space-between;overflow:hidden;text-overflow:ellipsis}.core-tree-grid-container ul{display:table;table-layout:fixed;padding-left:var(--step-padding);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;white-space:nowrap}.core-tree-grid-container li>span{display:table-row;position:relative}.core-tree-grid-container li>span .tree-item-tool{position:absolute;top:0;right:0;z-index:2;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{width:calc(var(--tree-container-width) - (var(--tier) - 1) * var(--step-padding));display:flex;align-items:center;justify-content:flex-start;position:relative;height:var(--row-height)}.core-tree-grid-container li>span .tree-item .tree-item-div>i{color:var(--square-color);cursor:pointer;font-size:var(--square-size);width:var(--square-size);height:var(--square-size)}.core-tree-grid-container li>span .tree-item .tree-item-div>.expand-toggler{position:absolute;z-index:1;transform:translate(-100%) rotate(0);transition:.5s ease-out}.core-tree-grid-container li>span .tree-item .tree-item-div object{display:table-cell;cursor:pointer}.core-tree-grid-container li>span:hover .tree-item-tool{display:flex;align-items:center;justify-content:flex-end}.core-tree-grid-container li>span:hover:after{content:\"\";display:block;height:var(--row-height);position:absolute;width:calc(var(--tree-container-width) + var(--grid-total-width));background-color:#d3d3d3;opacity:.2;z-index:1;top:0;left:0}.core-tree-grid-container li>span .tree-grid-row-wrapper{display:inline-block;position:absolute}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row{display:inline-flex;background-color:#fff}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row .tree-grid-cell{display:table-cell;height:var(--row-height)}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row .tree-grid-cell .cell-div{cursor:pointer;overflow-x:hidden;overflow-y:visible;padding:var(--content-cell-padding);display:flex;align-items:center;height:var(--row-height)}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row .tree-grid-cell.hidden{display:none}.core-tree-grid-container li>span.span-edit-mode-activated{height:var(--edit-mode-row-height)}.core-tree-grid-container li>span.span-edit-mode-activated:hover:after{display:none}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item-tool{height:var(--edit-mode-row-height);display:flex}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item-tool .tree-item-tool-wrapper{height:var(--edit-mode-row-height)}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item-tool .tree-item-tool-wrapper i{width:24px;height:24px}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item .tree-item-div{height:var(--edit-mode-row-height)}.core-tree-grid-container li>span.span-edit-mode-activated .tree-grid-row-wrapper .tree-grid-cell{height:var(--edit-mode-row-height)!important}.core-tree-grid-container li>span.span-edit-mode-activated .tree-grid-row-wrapper .tree-grid-cell .cell-div{height:var(--edit-mode-row-height)!important}.core-tree-grid-container li.collapsed .tree-item-div .expand-toggler{transform:translate(-100%) rotate(-90deg)!important;transition:.5s ease-out!important}\n"] }]
-        }], ctorParameters: () => [{ type: AppService }, { type: RecursiveService }, { type: MultiLanguageService }, { type: DialogService }, { type: CoreControlService }], propDecorators: { keyField: [{
-                type: Input
+                    ], template: "<div #container class=\"core-tree-grid-container\" [ngStyle]=\"{\r\n    width: '100%',\r\n    height: height + 'px',\r\n    overflow: 'scroll'\r\n}\">\r\n\r\n    @if (loading) {\r\n    <div class=\"loading-surface\">\r\n        <div class=\"loading-wrapper\">\r\n            <app-threedots></app-threedots>\r\n        </div>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"tree-grid-header\" [ngStyle]=\"{\r\n        width: totalWidth + 'px',\r\n        whiteSpace: 'nowrap',\r\n        display: 'flex',\r\n        position: 'sticky'\r\n    }\">\r\n        <div class=\"tree-block-header\" [ngStyle]=\"{\r\n            width: treeColumnWidth + treeNodeLevelPadding + 'px',\r\n            height: headerHeight + 'px',\r\n            border: headerBorderSize + 'px solid white',\r\n        }\">\r\n            <div class=\"header-cell-div\" [ngStyle]=\"{\r\n                height: headerHeight + 'px',\r\n            }\">\r\n                {{ 'UI.CORE_TREE_GRID.TREE_BLOCK_HEADER' | translate: lang }}\r\n                @if (!treeCreateUpdateDisabled) {\r\n                <core-button-group-vns [shownItems]=\"headerToolItems\"\r\n                    (buttonClick)=\"onHeaderToolClick($event)\"></core-button-group-vns>\r\n                }\r\n            </div>\r\n        </div>\r\n\r\n        <div [ngStyle]=\"{\r\n            display: 'inline-block',\r\n            height: headerHeight + 'px',\r\n            whiteSpace: 'nowrap'\r\n        }\">\r\n\r\n            <div class=\"header-row-one\" [ngStyle]=\"{\r\n                display: 'block',\r\n                height: (!!headerGroups ? headerHeight/2 : headerHeight) + 'px',\r\n            }\">\r\n                @if (!!headerGroups) {\r\n                @for (headerGroup of headerGroups; track $index) {\r\n                <div class=\"header-group-cell-div\" [ngStyle]=\"{\r\n                        height: (!!headerGroups ? headerHeight/2 : headerHeight) + 'px',\r\n                        width: headerGroup.width + 'px',\r\n                        border: headerBorderSize + 'px solid white',\r\n                        }\">\r\n                    {{ headerGroup.key | translate: lang }}\r\n                </div>\r\n                }\r\n                }\r\n            </div>\r\n\r\n            <div class=\"header-row-two\" [ngStyle]=\"{\r\n                display: 'block',\r\n                height: (!!headerGroups ? headerHeight/2 : headerHeight) + 'px',\r\n            }\">\r\n                @for (column of columns; track $index) {\r\n                <div [class.hidden]=\"column.hidden\" [ngStyle]=\"\r\n                {\r\n                    display: 'inline-block',\r\n                    height: (!!headerGroups ? headerHeight/2 : headerHeight) + 'px',\r\n                    border: headerBorderSize + 'px solid white',\r\n                    width: !!column.width ? column.width + 'px' : 'unset',\r\n                    textAlign: !!column.align ? column.align.toLowerCase() : 'unset'\r\n                }\r\n                \">\r\n                    <div class=\"header-cell-div\" [ngStyle]=\"{\r\n                        height: (!!headerGroups ? headerHeight/2 : headerHeight) + 'px',\r\n                    }\">\r\n                        {{ column.caption | translate: lang }}\r\n                    </div>\r\n                </div>\r\n                }\r\n\r\n\r\n            </div>\r\n\r\n\r\n        </div>\r\n\r\n\r\n\r\n    </div>\r\n\r\n    <div #frontTreeContainer class=\"tree-grid-content front-container\" [class.edit-mode-activated]=\"editModeActivated\">\r\n        @for (root of data; track $index) {\r\n        @defer(on viewport(treeContainer)) {\r\n        <ul class=\"root\" [class.collapsed]=\"!!!root.tree$Expanded\" [ngStyle]=\"{\r\n            paddingLeft: treeNodeLevelPadding + 'px'\r\n        }\">\r\n            <ng-container *ngTemplateOutlet=\"frontItem; context: { context: root }\"></ng-container>\r\n        </ul>\r\n        }\r\n        }\r\n    </div>\r\n\r\n    <div #treeContainer class=\"tree-grid-content\" [class.edit-mode-activated]=\"editModeActivated\">\r\n        @for (root of data; track $index) {\r\n        @defer(on viewport(treeContainer)) {\r\n        <ul class=\"root\" [class.collapsed]=\"!!!root.tree$Expanded\" [ngStyle]=\"{\r\n            paddingLeft: '0px'\r\n        }\">\r\n            <ng-container *ngTemplateOutlet=\"item; context: { context: root }\"></ng-container>\r\n        </ul>\r\n        }\r\n        }\r\n    </div>\r\n\r\n    <ng-template #item let-context=\"context\" let-id=\"context.id\" let-title=\"context.tree$Title\"\r\n        let-highlighted=\"context.tree$Highlighted\" let-hasChildren=\"context.tree$HasChildren\"\r\n        let-children=\"context.tree$Children\" let-expanded=\"context.tree$Expanded\" let-active=\"context.tree$Active\"\r\n        let-checked=\"context.tree$Checked\" let-tier=\"context.tree$Tier\">\r\n\r\n        <li [class.has-children]=\"!!hasChildren\" [class.collapsed]=\"!!hasChildren && !!!expanded\"\r\n            (click)=\"onRowClick(context, $event)\">\r\n            <span [class.span-edit-mode-activated]=\"!!editModeActivated && pendingContext.id===id\">\r\n\r\n                <div class=\"tree-item\">\r\n                    <div class=\"tree-item-div\" [attr.data-tier]=\"tier\" [ngStyle]=\"{\r\n                        width: '0px',\r\n                        }\">\r\n                    </div>\r\n                </div>\r\n                <div class=\"tree-grid-row-wrapper\">\r\n                    <div class=\"tree-grid-row\">\r\n                        @if (!(!!editModeActivated && pendingContext?.id===id)) {\r\n                        @for (column of columns; track $index) {\r\n                        <div class=\"tree-grid-cell\" [class.hidden]=\"column.hidden\">\r\n                            <div class=\"cell-div\" [ngStyle]=\"\r\n                                    {\r\n                                        width: !!column.width ? column.width + 'px' : 'unset',\r\n                                        overflow: 'hidden',\r\n                                        textAlign: !!column.align ? column.align.toLowerCase() : 'unset'\r\n                                    }\r\n                                \">\r\n                                {{ !!column.translate ? (context[column.field] | translate: lang | tableCell:\r\n                                column.pipe : lang) :\r\n                                context[column.field] | tableCell: column.pipe : lang}}\r\n                            </div>\r\n                        </div>\r\n                        }\r\n                        }\r\n\r\n                        @if (!!editModeActivated && pendingContext?.id===id) {\r\n                        <ng-container>\r\n                            @for (column of columns; track $index) {\r\n                            <div class=\"tree-grid-cell\" [class.hidden]=\"column.hidden\">\r\n                                <div class=\"cell-div\" [ngStyle]=\"\r\n                                    {\r\n                                        width: !!column.width ? column.width + 'px' : 'unset',\r\n                                        display: 'table',\r\n                                        overflowY: 'visible',\r\n                                        textAlign: !!column.align ? column.align.toLowerCase() : 'unset'\r\n                                    }\r\n                                \">\r\n                                    @if (!column.control) {\r\n                                    <ng-container>\r\n                                        {{ !!column.translate ? (context[column.field] | translate: lang | tableCell:\r\n                                        column.pipe : lang) :\r\n                                        context[column.field] | tableCell: column.pipe : lang}}\r\n                                    </ng-container>\r\n                                    } @else {\r\n                                    <ng-container>\r\n                                        <core-control [form]=\"form\" [control]=\"column.control!\"\r\n                                            [checkError$]=\"checkError$\"></core-control>\r\n                                    </ng-container>\r\n                                    }\r\n\r\n                                </div>\r\n                            </div>\r\n                            }\r\n                        </ng-container>\r\n\r\n                        }\r\n\r\n                    </div>\r\n                </div>\r\n\r\n            </span>\r\n            @if (!!expanded && !!children.length) {\r\n            <ul [class.collapsed]=\"!expanded\" [ngStyle]=\"{\r\n                paddingLeft: '0px'\r\n            }\">\r\n                @for (child of children; track $index) {\r\n                <ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"item; context: { context: child }\"></ng-container>\r\n                </ng-container>\r\n                }\r\n            </ul>\r\n            }\r\n\r\n        </li>\r\n    </ng-template>\r\n\r\n    <ng-template #frontItem let-context=\"context\" let-id=\"context.id\" let-title=\"context.tree$Title\"\r\n        let-highlighted=\"context.tree$Highlighted\" let-hasChildren=\"context.tree$HasChildren\"\r\n        let-children=\"context.tree$Children\" let-expanded=\"context.tree$Expanded\" let-active=\"context.tree$Active\"\r\n        let-checked=\"context.tree$Checked\" let-tier=\"context.tree$Tier\">\r\n\r\n        <li [class.has-children]=\"!!hasChildren\" [class.collapsed]=\"!!hasChildren && !!!expanded\"\r\n            (click)=\"onRowClick(context, $event)\">\r\n            <span [class.span-edit-mode-activated]=\"!!editModeActivated && pendingContext.id===id\">\r\n\r\n                <div class=\"tree-item\">\r\n                    <div class=\"tree-item-div\" [attr.data-tier]=\"tier\" [ngStyle]=\"{\r\n                    width: treeColumnWidth - tier * treeNodeLevelPadding + 'px',\r\n                    }\">\r\n                        @if (!treeCreateUpdateDisabled) {\r\n                        <div class=\"tree-item-tool\">\r\n                            <div class=\"tree-item-tool-wrapper\">\r\n                                <core-button-group-vns [shownItems]=\"toolItems\" [showCaption]=\"false\"\r\n                                    (buttonClick)=\"onToolClick($event, context)\"></core-button-group-vns>\r\n                            </div>\r\n                        </div>\r\n                        }\r\n\r\n                        @if (!!children.length) {\r\n                        <i class=\"expand-toggler feather-chevron-down\" (click)=\"onExpandTogglerClick(context)\"></i>\r\n                        }\r\n                        <object (click)=\"onObjectClick(context, $event)\">\r\n                            {{ title }}\r\n                        </object>\r\n                    </div>\r\n                </div>\r\n\r\n            </span>\r\n            @if (!!expanded && !!children.length) {\r\n            <ul [class.collapsed]=\"!expanded\" [ngStyle]=\"{\r\n            paddingLeft: treeNodeLevelPadding + 'px'\r\n        }\">\r\n                @for (child of children; track $index) {\r\n                <ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"frontItem; context: { context: child }\"></ng-container>\r\n                </ng-container>\r\n                }\r\n            </ul>\r\n            }\r\n\r\n        </li>\r\n    </ng-template>\r\n\r\n</div>", styles: [".core-tree-grid-container{--tree-container-width: 300px;--grid-total-width: 500px;--square-color: darkgray;--square-size: 20px;--max-tier: 1;--row-height: 50px;--edit-mode-row-height: 120px;--edit-mode-row-bg: #dff6dd;--border-size: 5px;--header-height: 100px;--header-cell-padding: 5px;--content-cell-padding: 5px;--header-border-size: 1px;--tree-node-level-padding: 15px;white-space:nowrap;font-size:var(--typo-basic-font-size)}.core-tree-grid-container [data-tier=\"1\"]{--tier: 1;--translate-x: calc(var(--tree-node-level-padding) * -1)}.core-tree-grid-container [data-tier=\"2\"]{--tier: 2;--translate-x: calc(var(--tree-node-level-padding) * -2)}.core-tree-grid-container [data-tier=\"3\"]{--tier: 3;--translate-x: calc(var(--tree-node-level-padding) * -3)}.core-tree-grid-container [data-tier=\"4\"]{--tier: 4;--translate-x: calc(var(--tree-node-level-padding) * -4)}.core-tree-grid-container [data-tier=\"5\"]{--tier: 5;--translate-x: calc(var(--tree-node-level-padding) * -5)}.core-tree-grid-container [data-tier=\"6\"]{--tier: 6;--translate-x: calc(var(--tree-node-level-padding) * -6)}.core-tree-grid-container [data-tier=\"7\"]{--tier: 7;--translate-x: calc(var(--tree-node-level-padding) * -7)}.core-tree-grid-container [data-tier=\"8\"]{--tier: 8;--translate-x: calc(var(--tree-node-level-padding) * -8)}.core-tree-grid-container [data-tier=\"9\"]{--tier: 9;--translate-x: calc(var(--tree-node-level-padding) * -9)}.core-tree-grid-container [data-tier=\"10\"]{--tier: 10;--translate-x: calc(var(--tree-node-level-padding) * -10)}.core-tree-grid-container [data-tier=\"11\"]{--tier: 11;--translate-x: calc(var(--tree-node-level-padding) * -11)}.core-tree-grid-container [data-tier=\"12\"]{--tier: 12;--translate-x: calc(var(--tree-node-level-padding) * -12)}.core-tree-grid-container [data-tier=\"13\"]{--tier: 13;--translate-x: calc(var(--tree-node-level-padding) * -13)}.core-tree-grid-container [data-tier=\"14\"]{--tier: 14;--translate-x: calc(var(--tree-node-level-padding) * -14)}.core-tree-grid-container [data-tier=\"15\"]{--tier: 15;--translate-x: calc(var(--tree-node-level-padding) * -15)}.core-tree-grid-container [data-tier=\"16\"]{--tier: 16;--translate-x: calc(var(--tree-node-level-padding) * -16)}.core-tree-grid-container [data-tier=\"17\"]{--tier: 17;--translate-x: calc(var(--tree-node-level-padding) * -17)}.core-tree-grid-container [data-tier=\"18\"]{--tier: 18;--translate-x: calc(var(--tree-node-level-padding) * -18)}.core-tree-grid-container [data-tier=\"19\"]{--tier: 19;--translate-x: calc(var(--tree-node-level-padding) * -19)}.core-tree-grid-container [data-tier=\"20\"]{--tier: 20;--translate-x: calc(var(--tree-node-level-padding) * -20)}.core-tree-grid-container [data-tier=\"21\"]{--tier: 21;--translate-x: calc(var(--tree-node-level-padding) * -21)}.core-tree-grid-container [data-tier=\"22\"]{--tier: 22;--translate-x: calc(var(--tree-node-level-padding) * -22)}.core-tree-grid-container [data-tier=\"23\"]{--tier: 23;--translate-x: calc(var(--tree-node-level-padding) * -23)}.core-tree-grid-container [data-tier=\"24\"]{--tier: 24;--translate-x: calc(var(--tree-node-level-padding)) * -24 }.core-tree-grid-container *{box-sizing:border-box!important}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.core-tree-grid-container .loading-surface{width:calc(100vw - var(--size-left-bar-current-width));height:100vh;position:fixed;top:0;left:var(--size-left-bar-current-width);background-color:#ffffff80;z-index:555}.core-tree-grid-container .loading-surface .loading-wrapper{width:calc(100vw - var(--size-left-bar-current-width));height:100vh;display:flex;align-items:center;justify-content:center}.core-tree-grid-container .tree-grid-content{margin-top:var(--header-cell-padding);background-color:#fff;display:inline-block;position:relative}.core-tree-grid-container .front-container{background-color:#fff;display:inline-block;position:sticky!important;left:0;z-index:2}.core-tree-grid-container .tree-grid-content.edit-mode-activated ul>li>span:not(.span-edit-mode-activated):hover .tree-item-tool{display:none}.core-tree-grid-container .tree-grid-content.edit-mode-activated ul>li>span.span-edit-mode-activated{background-color:var(--edit-mode-row-bg)}.core-tree-grid-container .tree-grid-content.edit-mode-activated ul>li>span.span-edit-mode-activated *:not(.expand-toggler,object){background-color:var(--edit-mode-row-bg)}.core-tree-grid-container .tree-grid-header{top:0;left:0;z-index:3;white-space:nowrap;height:var(--header-height);background-color:var(--color-bg-main)}.core-tree-grid-container .tree-grid-header>*{box-sizing:border-box;display:inline-block}.core-tree-grid-container .tree-grid-header .hidden{display:none}.core-tree-grid-container .tree-grid-header .tree-block-header{position:sticky;top:0;left:0;z-index:5;height:var(--header-height);background-color:var(--color-bg-main)}.core-tree-grid-container .tree-grid-header .header-group-cell-div,.core-tree-grid-container .tree-grid-header .header-cell-div{width:100%;display:inline-flex;align-items:center;overflow:hidden;text-overflow:ellipsis}.core-tree-grid-container .tree-grid-header .header-group-cell-div,.core-tree-grid-container .tree-grid-header .header-cell-div{justify-content:center}.core-tree-grid-container ul{display:table;table-layout:fixed;margin-bottom:0;animation:fade-in 1s ease-out}.core-tree-grid-container ul.collapsed:not(.root){display:none}.core-tree-grid-container li{display:block;position:relative;white-space:nowrap}.core-tree-grid-container li>span{position:relative;display:table-row}.core-tree-grid-container li>span .tree-item-tool{position:absolute;top:0;right:0;z-index:7;height:var(--row-height);display:none}.core-tree-grid-container li>span .tree-item-tool .tree-item-tool-wrapper{display:flex;align-items:center;justify-content:flex-end;height:var(--row-height)}.core-tree-grid-container li>span .tree-item{vertical-align:top;display:table-cell}.core-tree-grid-container li>span .tree-item .tree-item-div{display:flex;align-items:center;justify-content:flex-start;position:relative;height:var(--row-height)}.core-tree-grid-container li>span .tree-item .tree-item-div>i{color:var(--square-color);cursor:pointer;font-size:var(--square-size);width:var(--square-size);height:var(--square-size)}.core-tree-grid-container li>span .tree-item .tree-item-div>.expand-toggler{position:absolute;z-index:6;transform:translate(-100%) rotate(0);transition:.5s ease-out}.core-tree-grid-container li>span .tree-item .tree-item-div object{display:table-cell;cursor:pointer}.core-tree-grid-container li>span:hover .tree-item-tool{display:flex;align-items:center;justify-content:flex-end}.core-tree-grid-container li>span:hover:after{content:\"\";display:block;height:var(--row-height);position:absolute;width:calc(var(--grid-total-width) + 1000px);background-color:#d3d3d3;opacity:.2;z-index:5;top:0;left:-1000px}.core-tree-grid-container li>span .tree-grid-row-wrapper{display:table-cell;position:relative}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row{display:inline-flex;background-color:#fff}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row .tree-grid-cell{display:table-cell;height:var(--row-height)}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row .tree-grid-cell .cell-div{cursor:pointer;overflow-x:hidden;overflow-y:visible;padding:var(--content-cell-padding);display:flex;align-items:center;height:var(--row-height)}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row .tree-grid-cell.hidden{display:none}.core-tree-grid-container li>span.span-edit-mode-activated{height:var(--edit-mode-row-height)}.core-tree-grid-container li>span.span-edit-mode-activated:hover:after{display:none}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item-tool{height:var(--edit-mode-row-height);display:flex}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item-tool .tree-item-tool-wrapper{height:var(--edit-mode-row-height)}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item-tool .tree-item-tool-wrapper i{width:24px;height:24px}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item .tree-item-div{height:var(--edit-mode-row-height)}.core-tree-grid-container li>span.span-edit-mode-activated .tree-grid-row-wrapper .tree-grid-cell{height:var(--edit-mode-row-height)!important}.core-tree-grid-container li>span.span-edit-mode-activated .tree-grid-row-wrapper .tree-grid-cell .cell-div{height:var(--edit-mode-row-height)!important}.core-tree-grid-container li.collapsed .tree-item-div .expand-toggler{transform:translate(-100%) rotate(-90deg)!important;transition:.5s ease-out!important}\n"] }]
+        }], ctorParameters: () => [{ type: AppService }, { type: RecursiveService }, { type: MultiLanguageService }, { type: DialogService }, { type: CoreControlService }, { type: CoreTableService }], propDecorators: { height: [{
+                type: Input,
+                args: [{ required: true }]
+            }], columns: [{
+                type: Input,
+                args: [{ required: true }]
+            }], keyField: [{
+                type: Input,
+                args: [{ required: true }]
             }], titleField: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], parentField: [{
+                type: Input,
+                args: [{ required: true }]
+            }], headerHeight: [{
+                type: Input,
+                args: [{ required: true }]
+            }], headerCellPadding: [{
                 type: Input
-            }], getFullListApi: [{
+            }], headerBorderSize: [{
                 type: Input
             }], treeColumnWidth: [{
                 type: Input
-            }], columns: [{
+            }], treeNodeLevelPadding: [{
+                type: Input
+            }], getFullListApi: [{
                 type: Input
             }], crud: [{
                 type: Input
+            }], treeCreateUpdateDisabled: [{
+                type: Input
             }], onRowDoubleClick: [{
                 type: Output
             }], onSubmitSuccess: [{
@@ -16969,10 +17071,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
 
 class MenuComponent {
     /* End Properties being passed to CoreTreeGrid */
-    constructor(router, route, appService) {
+    constructor(router, route, appService, layoutService) {
         this.router = router;
         this.route = route;
         this.appService = appService;
+        this.layoutService = layoutService;
         // For CorePageHeader
         this.title = EnumTranslateKey.UI_COMPONENT_TITLE_SYS_MENU;
         /**
@@ -16987,10 +17090,12 @@ class MenuComponent {
         };
         this.functionDropdownOptions$ = new BehaviorSubject([]);
         this.subscriptions = [];
+        this.createUpdateDisabled = false;
         this.columns = [
             {
                 // Hiển thị cột 'id' là bắt buộc
                 caption: EnumTranslateKey.UI_ENTITY_FIELD_CAPTION_COMMON_ID,
+                headerGroup: EnumTranslateKey.TABLE_HEADER_GROUP_GENERAL_INFORMATION,
                 field: 'id',
                 type: 'number',
                 align: 'right',
@@ -17008,13 +17113,15 @@ class MenuComponent {
             {
                 // Nếu hiển thị cột 'tree$Path', ví dụ 1.59.163 => sinh tự động, không cần viết API
                 caption: EnumTranslateKey.UI_CORE_TREE_GRID_TREE_PATH,
+                headerGroup: EnumTranslateKey.TABLE_HEADER_GROUP_GENERAL_INFORMATION,
                 field: 'tree$Path',
                 type: 'string',
                 align: 'left',
-                width: 100,
+                width: 200,
             },
             {
                 caption: EnumTranslateKey.UI_ENTITY_FIELD_CAPTION_SYS_MENU_CODE,
+                headerGroup: EnumTranslateKey.TABLE_HEADER_GROUP_GENERAL_INFORMATION,
                 field: 'code',
                 type: 'string',
                 align: 'left',
@@ -17043,6 +17150,7 @@ class MenuComponent {
             },
             {
                 caption: EnumTranslateKey.UI_ENTITY_FIELD_CAPTION_SYS_FUNCTION_NAME,
+                headerGroup: EnumTranslateKey.TABLE_HEADER_GROUP_GENERAL_INFORMATION,
                 field: 'functionName',
                 type: 'string',
                 align: 'left',
@@ -17071,6 +17179,7 @@ class MenuComponent {
             },
             {
                 caption: EnumTranslateKey.UI_ENTITY_FIELD_CAPTION_COMMON_ORDER_NUMBER,
+                headerGroup: EnumTranslateKey.TABLE_HEADER_GROUP_GENERAL_INFORMATION,
                 field: 'orderNumber',
                 type: 'number',
                 align: 'right',
@@ -17093,6 +17202,7 @@ class MenuComponent {
             },
             {
                 caption: EnumTranslateKey.UI_ENTITY_FIELD_CAPTION_SYS_MENU_ICON_CLASS,
+                headerGroup: EnumTranslateKey.TABLE_HEADER_GROUP_GENERAL_INFORMATION,
                 field: 'iconClass',
                 type: 'string',
                 align: 'left',
@@ -17115,6 +17225,7 @@ class MenuComponent {
             },
             {
                 caption: EnumTranslateKey.UI_ENTITY_FIELD_CAPTION_SYS_MENU_URL,
+                headerGroup: EnumTranslateKey.TABLE_HEADER_GROUP_GENERAL_INFORMATION,
                 field: 'url',
                 type: 'string',
                 align: 'left',
@@ -17130,6 +17241,7 @@ class MenuComponent {
             },
             {
                 caption: EnumTranslateKey.UI_ENTITY_FIELD_CAPTION_SYS_MENU_PARENT,
+                headerGroup: EnumTranslateKey.TABLE_HEADER_GROUP_GENERAL_INFORMATION,
                 field: 'parent',
                 type: 'number',
                 align: 'right',
@@ -17145,6 +17257,7 @@ class MenuComponent {
             },
             {
                 caption: EnumTranslateKey.UI_ENTITY_FIELD_CAPTION_COMMON_CREATED_DATE,
+                headerGroup: EnumTranslateKey.TABLE_HEADER_GROUP_LOG_CHANGE_INFORMATION,
                 field: 'createdDate',
                 type: 'string',
                 align: 'left',
@@ -17153,6 +17266,7 @@ class MenuComponent {
             },
             {
                 caption: EnumTranslateKey.UI_ENTITY_FIELD_CAPTION_COMMON_CREATED_BY,
+                headerGroup: EnumTranslateKey.TABLE_HEADER_GROUP_LOG_CHANGE_INFORMATION,
                 field: 'createdByUsername',
                 type: 'string',
                 align: 'left',
@@ -17160,6 +17274,7 @@ class MenuComponent {
             },
             {
                 caption: EnumTranslateKey.UI_ENTITY_FIELD_CAPTION_COMMON_UPDATED_DATE,
+                headerGroup: EnumTranslateKey.TABLE_HEADER_GROUP_LOG_CHANGE_INFORMATION,
                 field: 'updatedDate',
                 type: 'string',
                 align: 'left',
@@ -17168,6 +17283,7 @@ class MenuComponent {
             },
             {
                 caption: EnumTranslateKey.UI_ENTITY_FIELD_CAPTION_COMMON_UPDATED_BY,
+                headerGroup: EnumTranslateKey.TABLE_HEADER_GROUP_LOG_CHANGE_INFORMATION,
                 field: 'updatedByUsername',
                 type: 'string',
                 align: 'left',
@@ -17175,6 +17291,13 @@ class MenuComponent {
             },
         ];
     }
+    ngOnInit() {
+        this.treeGridHeight =
+            window.innerHeight
+                - this.layoutService.headerHeight
+                - this.layoutService.corePageHeaderHeight
+                - this.layoutService.basicSpacing * 2; // basically *1 is enough but *2 is a garanty 
+    }
     ngAfterViewInit() {
         this.subscriptions.push(this.appService.get(api.SYS_FUNCTION_READ_ALL).subscribe(x => {
             if (x.ok && x.status === 200) {
@@ -17205,8 +17328,10 @@ class MenuComponent {
     ngOnDestroy() {
         this.subscriptions.push();
     }
-    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 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: MenuComponent, isStandalone: true, selector: "app-menu", ngImport: i0, template: "<core-page-header [title]=\"title\" [hideButtonGroup]=\"true\"></core-page-header>\r\n\r\n<div class=\"menu-tree-grid-container\">\r\n    <core-tree-grid [getFullListApi]=\"getFullListApi\" keyField=\"id\" titleField=\"code\" parentField=\"parent\"\r\n        [treeColumnWidth]=\"400\" [columns]=\"columns\" [crud]=\"crud\"\r\n        (onRowDoubleClick)=\"onRowDoubleClick($event)\"></core-tree-grid>\r\n</div>\r\n\r\n<router-outlet name=\"menuAux\"></router-outlet>", styles: [".menu-tree-grid-container{height:calc(var(--content-container-height) - var(--size-core-page-header-height) - var(--size-layout-block-cell-spacing) * 2);overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: CorePageHeaderComponent, selector: "core-page-header", inputs: ["instanceNumber", "shownItems", "title", "hideButtonGroup"], outputs: ["buttonClick"] }, { kind: "component", type: CoreTreeGridComponent, selector: "core-tree-grid", inputs: ["keyField", "titleField", "parentField", "getFullListApi", "treeColumnWidth", "columns", "crud"], outputs: ["onRowDoubleClick", "onSubmitSuccess"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
@@ -17215,8 +17340,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         RouterModule,
                         CorePageHeaderComponent,
                         CoreTreeGridComponent
-                    ], template: "<core-page-header [title]=\"title\" [hideButtonGroup]=\"true\"></core-page-header>\r\n\r\n<div class=\"menu-tree-grid-container\">\r\n    <core-tree-grid [getFullListApi]=\"getFullListApi\" keyField=\"id\" titleField=\"code\" parentField=\"parent\"\r\n        [treeColumnWidth]=\"400\" [columns]=\"columns\" [crud]=\"crud\"\r\n        (onRowDoubleClick)=\"onRowDoubleClick($event)\"></core-tree-grid>\r\n</div>\r\n\r\n<router-outlet name=\"menuAux\"></router-outlet>", styles: [".menu-tree-grid-container{height:calc(var(--content-container-height) - var(--size-core-page-header-height) - var(--size-layout-block-cell-spacing) * 2);overflow:auto}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: AppService }] });
+                    ], template: "<core-page-header [title]=\"title\" (buttonClick)=\"onCorePageHeaderButtonClick($event)\"></core-page-header>\r\n\r\n<div class=\"menu-tree-grid-container\">\r\n    <core-tree-grid [height]=\"treeGridHeight\" [headerHeight]=\"100\" [getFullListApi]=\"getFullListApi\" keyField=\"id\" titleField=\"code\" parentField=\"parent\"\r\n        [treeColumnWidth]=\"400\" [columns]=\"columns\" [crud]=\"crud\"\r\n        (onRowDoubleClick)=\"onRowDoubleClick($event)\" [treeCreateUpdateDisabled]=\"createUpdateDisabled\"></core-tree-grid>\r\n</div>\r\n\r\n<router-outlet name=\"menuAux\"></router-outlet>", styles: [".menu-tree-grid-container{height:calc(var(--content-container-height) - var(--size-core-page-header-height) - var(--size-layout-block-cell-spacing) * 2);overflow:auto}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: AppService }, { type: LayoutService }] });
 
 class MenuEditComponent extends BaseEditComponent {
     constructor(dialogService) {
@@ -23894,5 +24019,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AlertComponent, AlertService, AnimatedTextComponent, AnimatedTextService, AppConfigService, AppInitializationService, AppService, AuthService, BaseComponent, BaseDropdownComponent, BaseEditComponent, ButtonGroupComponent, ButtonGroupModule, ButtonGroupService, CORE_VNS_BUTTONS, CacheService, CanActivateFunctionUrlMapperGuard, CanDeactivateGuard, CheckForUpdateService, CommonHttpRequestService, ConfigService, ConfirmDialogStateComponent, ControlBase, CoreAccordionComponent, CoreAccordionService, CoreApiProgressComponent, CoreAttachmentComponent, CoreButtonComponent, CoreButtonGroupComponent, CoreButtonGroupService, CoreButtonGroupVnsComponent, CoreButtonVnsComponent, CoreCheckboxComponent, CoreChecklistComponent, CoreCommonParamKitComponent, CoreCompositionComponent, CoreCompositionService, CoreCompositionState, CoreConfirmDialogComponent, CoreContractSeekerComponent, CoreControlComponent, CoreControlNoGridBufferComponent, CoreControlNoSeekerComponent, CoreControlService, CoreCurrencyInputComponent, CoreDatePickerComponent, CoreDatetimeService, CoreDropdownComponent, CoreEmployeeSeekerComponent, CoreFileUploaderComponent, CoreFormComponent, CoreFormControlBaseComponent, CoreFormControlSeekerComponent, CoreFormLiteComponent, CoreFormService, CoreGridBufferComponent, CoreHeaderParamsComponent, CoreIosSwitcherComponent, CoreLineComponent, CoreListComponent, CoreListLazyComponent, CoreLoadingSurfaceComponent, CoreMccComponent, CoreMonthPickerComponent, CoreMonthSelectorComponent, CoreNavigationTrackerComponent, CoreOrgTreeComponent, CoreOrgTreeService, CoreOrgTreeState, CoreOrgUnitSeekerComponent, CoreOrgchartflexComponent, CorePageEditComponent, CorePageEditLiteComponent, CorePageEditService, CorePageHeaderComponent, CorePageListComponent, CorePageListContentComponent, CorePageListService, CorePageListState, CorePageViewComponent, CorePaginationComponent, CorePaginationFullComponent, CorePaginationFullService, CoreParamControlComponent, CorePermissionActionsComponent, CorePermissionComponent, CorePermissionService, CorePositionConcurrentSeekerComponent, CorePositionSeekerComponent, CoreQueryBuilderComponent, CoreRadioGroupComponent, CoreReducerIconComponent, CoreRoutingHistoryComponent, CoreScrollComponent, CoreScrollLazyComponent, CoreStatisticWidgetComponent, CoreStatusStickerComponent, CoreSubFormGroupComponent, CoreTableComponent, CoreTabsComponent, CoreTagsComponent, CoreTopicPickerComponent, CoreTopicTreeComponent, CoreTreeComponent, CoreTreeGridComponent, CoreWageSeekerComponent, CoreWorkingSeekerComponent, CoreYearPickerComponent, CustomValidators, DATE_VALUE_ACCESSOR, DESKTOP_SCREEN_HEDER_HEIGHT, DateValueAccessor, DecisionComponent, DialogService, DialogStateComponent, DomService, ECoreTableToolClass, ECoreTableToolCode, EnumAlertType, EnumButtonCaptionCode, EnumCoreArticleCategoryTreeaAccessorMode, EnumCoreButtonCode, EnumCoreButtonVNSCode, EnumCoreFileUploaderType, EnumCoreFormControlSeekerSourceType, EnumCoreOrgTreeaAccessorMode, EnumCorePageEditBootstrapClass, EnumCorePageEditFieldType, EnumCorePageEditMode, EnumCoreTablePipeType, EnumCoreViewItemType, EnumErrorType, EnumExType, EnumFilterOperator, EnumFormBaseContolType, EnumHrComparisonCode, EnumICoreStatisticWidgetDataType, EnumIconClass, EnumOparator, EnumPermissionObjectType, EnumProfileInfoSector, EnumRecursiveFields, EnumSignalRType, EnumSortDirection, EnumStyleButtonClass, EnumSwUpdateVersionUpdatesEventType, EvaluateDialogComponent, EvaluateDialogService, FileService, FilterPipe, FooterComponent, FullscreenModalLoaderComponent, FunctionComponent, FunctionEditComponent, FunctionEditService, FunctionIgnoreComponent, FunctionIgnoreEditComponent, GroupFunctionComponent, GroupFunctionEditComponent, GrpcService, HeaderService, HistoryService, HttpErrorHandler, HubConnectionService, HuconcurrentlyComponent, IAlertOptions, ImageErrorResolverDirective, InMemoryComponent, InitializationCanActivateFn, InitializationCanMatchFn, InterceptorSkipHeader, IpServiceService, ItemComponent, JobComponent, JsonService, LanguageChangerComponent, LanguageComponent, LanguageEditComponent, LayoutService, LongTaskService, MOBILE_SCREEN_HEDER_HEIGHT, MapAvatarToServerPipe, MapService, MenuComponent, MenuEditComponent, MenuService, MessageService, ModalService, MultiLanguageService, MutationLogComponent, MutationViewComponent, NavigatorComponent, NavigatorService, NgxHistaffAlphaComponent, NgxHistaffAlphaService, NormalizeHumanNamePipe, OnlineUsersComponent, OrganizationService, PageTitleComponent, PaginationComponent, PortalRouteComponent, PortalRouteEditComponent, PositionComponent, PositionEditService, PositionTransferService, PushNotificationService, RandomAvatarService, RecursiveService, RequestCache, RequestCacheWithMap, ResponseService, RightchatComponent, RoutingService, STICKER_COLOR_SCHEMA, SeekerService, SocketService, StaffProfileComponent, StatisticAuthService, StatisticService, StringService, SysActionComponent, SysActionEditComponent, SysFunctionActionComponent, SysFunctionActionEditComponent, SysFunctionActionMapperComponent, SysFunctionUrlMapperComponent, SysMenuService, SysModuleComponent, SysModuleEditComponent, TLA_CONFIG, TableCellPipe, Textbox, ThreedotsComponent, TimeSheetService, TooltipComponent, TooltipDirective, TopicPermissionService, TopicTreeService, TranslatePipe, UnicodeService, UrlService, UserActivityComponent, UserActivityService, WageComponent, WaittingScreenComponent, alertOptions, attachmentOptions, blob_to_base64_script, defaultPaging, httpInterceptorProviders, liner_to_nested_array_script, longAlertOptions, noneAutoClosedAlertOptions, normalizeHumanName, themeBlue };
+export { AlertComponent, AlertService, AnimatedTextComponent, AnimatedTextService, AppConfigService, AppInitializationService, AppService, AuthService, BaseComponent, BaseDropdownComponent, BaseEditComponent, ButtonGroupComponent, ButtonGroupModule, ButtonGroupService, CORE_VNS_BUTTONS, CacheService, CanActivateFunctionUrlMapperGuard, CanDeactivateGuard, CheckForUpdateService, CommonHttpRequestService, ConfigService, ConfirmDialogStateComponent, ControlBase, CoreAccordionComponent, CoreAccordionService, CoreApiProgressComponent, CoreAttachmentComponent, CoreButtonComponent, CoreButtonGroupComponent, CoreButtonGroupService, CoreButtonGroupVnsComponent, CoreButtonVnsComponent, CoreCheckboxComponent, CoreChecklistComponent, CoreCommonParamKitComponent, CoreCompositionComponent, CoreCompositionService, CoreCompositionState, CoreConfirmDialogComponent, CoreContractSeekerComponent, CoreControlComponent, CoreControlNoGridBufferComponent, CoreControlNoSeekerComponent, CoreControlService, CoreCurrencyInputComponent, CoreDatePickerComponent, CoreDatetimeService, CoreDropdownComponent, CoreEmployeeSeekerComponent, CoreFileUploaderComponent, CoreFormComponent, CoreFormControlBaseComponent, CoreFormControlSeekerComponent, CoreFormLiteComponent, CoreFormService, CoreGridBufferComponent, CoreHeaderParamsComponent, CoreIosSwitcherComponent, CoreLineComponent, CoreListComponent, CoreListLazyComponent, CoreLoadingSurfaceComponent, CoreMccComponent, CoreMonthPickerComponent, CoreMonthSelectorComponent, CoreNavigationTrackerComponent, CoreOrgTreeComponent, CoreOrgTreeService, CoreOrgTreeState, CoreOrgUnitSeekerComponent, CoreOrgchartflexComponent, CorePageEditComponent, CorePageEditLiteComponent, CorePageEditService, CorePageHeaderComponent, CorePageListComponent, CorePageListContentComponent, CorePageListService, CorePageListState, CorePageViewComponent, CorePaginationComponent, CorePaginationFullComponent, CorePaginationFullService, CoreParamControlComponent, CorePermissionActionsComponent, CorePermissionComponent, CorePermissionService, CorePositionConcurrentSeekerComponent, CorePositionSeekerComponent, CoreQueryBuilderComponent, CoreRadioGroupComponent, CoreReducerIconComponent, CoreRoutingHistoryComponent, CoreScrollComponent, CoreScrollLazyComponent, CoreStatisticWidgetComponent, CoreStatusStickerComponent, CoreSubFormGroupComponent, CoreTableComponent, CoreTableService, CoreTabsComponent, CoreTagsComponent, CoreTopicPickerComponent, CoreTopicTreeComponent, CoreTreeComponent, CoreTreeGridComponent, CoreWageSeekerComponent, CoreWorkingSeekerComponent, CoreYearPickerComponent, CustomValidators, DATE_VALUE_ACCESSOR, DESKTOP_SCREEN_HEDER_HEIGHT, DateValueAccessor, DecisionComponent, DialogService, DialogStateComponent, DomService, ECoreTableToolClass, ECoreTableToolCode, EnumAlertType, EnumButtonCaptionCode, EnumCoreArticleCategoryTreeaAccessorMode, EnumCoreButtonCode, EnumCoreButtonVNSCode, EnumCoreFileUploaderType, EnumCoreFormControlSeekerSourceType, EnumCoreOrgTreeaAccessorMode, EnumCorePageEditBootstrapClass, EnumCorePageEditFieldType, EnumCorePageEditMode, EnumCoreTablePipeType, EnumCoreViewItemType, EnumErrorType, EnumExType, EnumFilterOperator, EnumFormBaseContolType, EnumHrComparisonCode, EnumICoreStatisticWidgetDataType, EnumIconClass, EnumOparator, EnumPermissionObjectType, EnumProfileInfoSector, EnumRecursiveFields, EnumSignalRType, EnumSortDirection, EnumStyleButtonClass, EnumSwUpdateVersionUpdatesEventType, EvaluateDialogComponent, EvaluateDialogService, FileService, FilterPipe, FooterComponent, FullscreenModalLoaderComponent, FunctionComponent, FunctionEditComponent, FunctionEditService, FunctionIgnoreComponent, FunctionIgnoreEditComponent, GroupFunctionComponent, GroupFunctionEditComponent, GrpcService, HeaderService, HistoryService, HttpErrorHandler, HubConnectionService, HuconcurrentlyComponent, IAlertOptions, ImageErrorResolverDirective, InMemoryComponent, InitializationCanActivateFn, InitializationCanMatchFn, InterceptorSkipHeader, IpServiceService, ItemComponent, JobComponent, JsonService, LanguageChangerComponent, LanguageComponent, LanguageEditComponent, LayoutService, LongTaskService, MOBILE_SCREEN_HEDER_HEIGHT, MapAvatarToServerPipe, MapService, MenuComponent, MenuEditComponent, MenuService, MessageService, ModalService, MultiLanguageService, MutationLogComponent, MutationViewComponent, NavigatorComponent, NavigatorService, NgxHistaffAlphaComponent, NgxHistaffAlphaService, NormalizeHumanNamePipe, OnlineUsersComponent, OrganizationService, PageTitleComponent, PaginationComponent, PortalRouteComponent, PortalRouteEditComponent, PositionComponent, PositionEditService, PositionTransferService, PushNotificationService, RandomAvatarService, RecursiveService, RequestCache, RequestCacheWithMap, ResponseService, RightchatComponent, RoutingService, STICKER_COLOR_SCHEMA, SeekerService, SocketService, StaffProfileComponent, StatisticAuthService, StatisticService, StringService, SysActionComponent, SysActionEditComponent, SysFunctionActionComponent, SysFunctionActionEditComponent, SysFunctionActionMapperComponent, SysFunctionUrlMapperComponent, SysMenuService, SysModuleComponent, SysModuleEditComponent, TLA_CONFIG, TableCellPipe, Textbox, ThreedotsComponent, TimeSheetService, TooltipComponent, TooltipDirective, TopicPermissionService, TopicTreeService, TranslatePipe, UnicodeService, UrlService, UserActivityComponent, UserActivityService, WageComponent, WaittingScreenComponent, alertOptions, attachmentOptions, blob_to_base64_script, defaultPaging, httpInterceptorProviders, liner_to_nested_array_script, longAlertOptions, noneAutoClosedAlertOptions, normalizeHumanName, themeBlue };
 //# sourceMappingURL=ngx-histaff-alpha.mjs.map