ngx-histaff-alpha 2.4.2 → 2.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/app/libraries/core-tree-grid/core-tree-grid/core-tree-grid.component.mjs +15 -7
- package/fesm2022/ngx-histaff-alpha.mjs +14 -6
- package/fesm2022/ngx-histaff-alpha.mjs.map +1 -1
- package/lib/app/libraries/core-tree-grid/core-tree-grid/core-tree-grid.component.d.ts +4 -2
- package/package.json +1 -1
|
@@ -16989,18 +16989,26 @@ class CoreTreeGridComponent extends CoreFormControlBaseComponent {
|
|
|
16989
16989
|
EnumCoreButtonVNSCode.HEADER_CREATE,
|
|
16990
16990
|
];
|
|
16991
16991
|
}
|
|
16992
|
-
|
|
16993
|
-
if (this.editMode === EnumCoreTreeGridEditMode.TREE_MODE) {
|
|
16994
|
-
this.form = this.coreControlService.toCoreTreeGridInRowFormGroup(this.columns);
|
|
16995
|
-
}
|
|
16992
|
+
calculateWidths() {
|
|
16996
16993
|
let newTotalWidth = this.treeColumnWidth;
|
|
16997
|
-
this.columns.map(x => newTotalWidth += x.width);
|
|
16994
|
+
this.columns.filter(x => !x.hidden).map(x => newTotalWidth += x.width);
|
|
16998
16995
|
this.totalWidth = newTotalWidth;
|
|
16999
16996
|
this.transformed = this.coreTableService.transformWithHeaderGroup(this.columns);
|
|
17000
16997
|
this.columns = this.transformed.columns;
|
|
17001
16998
|
this.headerGroups = this.transformed.headerGroups;
|
|
17002
16999
|
this.headerGroupExist = !!this.headerGroups?.length;
|
|
17003
17000
|
}
|
|
17001
|
+
ngOnChanges(changes) {
|
|
17002
|
+
if (!!changes['columns']) {
|
|
17003
|
+
this.calculateWidths();
|
|
17004
|
+
}
|
|
17005
|
+
}
|
|
17006
|
+
ngOnInit() {
|
|
17007
|
+
if (this.editMode === EnumCoreTreeGridEditMode.TREE_MODE) {
|
|
17008
|
+
this.form = this.coreControlService.toCoreTreeGridInRowFormGroup(this.columns);
|
|
17009
|
+
}
|
|
17010
|
+
this.calculateWidths();
|
|
17011
|
+
}
|
|
17004
17012
|
reload() {
|
|
17005
17013
|
if (this.editMode === EnumCoreTreeGridEditMode.TREE_MODE) {
|
|
17006
17014
|
this.subscriptions.push(this.appService.get(this.getFullListApi).subscribe(x => {
|
|
@@ -17300,7 +17308,7 @@ class CoreTreeGridComponent extends CoreFormControlBaseComponent {
|
|
|
17300
17308
|
this.subscriptions.map(x => x?.unsubscribe());
|
|
17301
17309
|
}
|
|
17302
17310
|
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 }); }
|
|
17303
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.3", type: CoreTreeGridComponent, isStandalone: true, selector: "core-tree-grid", inputs: { linearItems$: "linearItems$", editMode: "editMode", height: "height", columns: "columns", keyField: "keyField", titleField: "titleField", parentField: "parentField", headerHeight: "headerHeight", treeCaption: "treeCaption", headerCellPadding: "headerCellPadding", headerBorderSize: "headerBorderSize", treeColumnWidth: "treeColumnWidth", treeBlockPaddingLeft: "treeBlockPaddingLeft", treeNodeLevelPadding: "treeNodeLevelPadding", contentCellVerticalPadding: "contentCellVerticalPadding", contentCellHorizontalPadding: "contentCellHorizontalPadding", getFullListApi: "getFullListApi", crud: "crud", disableTreeCreateUpdate: "disableTreeCreateUpdate", disableDoubleClick: "disableDoubleClick" }, outputs: { onRowDoubleClick: "onRowDoubleClick", onSubmitSuccess: "onSubmitSuccess" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #container class=\"core-tree-grid-container\" [ngStyle]=\"{\r\n width: '100%',\r\n height: height + 'px',\r\n overflow: 'scroll'\r\n}\">\r\n\r\n @if (loading) {\r\n <div class=\"loading-surface\">\r\n <div class=\"loading-wrapper\">\r\n <app-threedots></app-threedots>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"tree-grid-header\" [ngStyle]=\"{\r\n width: totalWidth + 'px',\r\n whiteSpace: 'nowrap',\r\n display: 'flex',\r\n position: 'sticky'\r\n }\">\r\n <div class=\"tree-block-header\" [ngStyle]=\"{\r\n width: treeColumnWidth + 'px',\r\n height: headerHeight + 'px',\r\n border: headerBorderSize + 'px solid white',\r\n }\">\r\n <div class=\"header-cell-div\" [ngStyle]=\"{\r\n height: headerHeight + 'px',\r\n }\">\r\n {{ (editMode === 'TREE_MODE' ? 'UI.CORE_TREE_GRID.TREE_BLOCK_HEADER' : treeCaption) | translate: lang }}\r\n @if (editMode === 'TREE_MODE' && !disableTreeCreateUpdate) {\r\n <core-button-group-vns [shownItems]=\"headerToolItems\"\r\n (buttonClick)=\"onHeaderToolClick($event)\"></core-button-group-vns>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div [ngStyle]=\"{\r\n display: 'inline-block',\r\n height: headerHeight + 'px',\r\n whiteSpace: 'nowrap'\r\n }\">\r\n\r\n @if (!!headerGroupExist) {\r\n <div class=\"header-row-one\" [ngStyle]=\"{\r\n display: 'block',\r\n height: headerHeight/2 + 'px',\r\n }\">\r\n @for (headerGroup of headerGroups; track $index) {\r\n <div class=\"header-group-cell-div\" [ngStyle]=\"{\r\n height: headerHeight/2 + '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 </div>\r\n }\r\n\r\n <div class=\"header-row-two\" [ngStyle]=\"{\r\n display: 'block',\r\n height: (!!headerGroupExist ? 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: (!!headerGroupExist ? 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: (!!headerGroupExist ? 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 <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 </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 <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 </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 <span [class.span-edit-mode-activated]=\"!!editModeActivated && pendingContext.id===id\" (click)=\"onLiClick(context, $event)\">\r\n\r\n <div class=\"tree-item\">\r\n <div class=\"tree-item-div\" [attr.data-tier]=\"tier\" [ngStyle]=\"{\r\n width: '0px',\r\n }\">\r\n </div>\r\n </div>\r\n <div class=\"tree-grid-row-wrapper\">\r\n <div class=\"tree-grid-row\">\r\n @if (!(!!editModeActivated && pendingContext?.id===id && !disableTreeCreateUpdate)) {\r\n @for (column of columns; track $index) {\r\n <div class=\"tree-grid-cell\" [class.hidden]=\"column.hidden\">\r\n <div class=\"cell-div\" [ngStyle]=\"\r\n {\r\n paddingTop: contentCellVerticalPadding + 'px',\r\n paddingBottom: contentCellVerticalPadding + 'px',\r\n paddingLeft: contentCellHorizontalPadding + 'px',\r\n paddingRight: contentCellHorizontalPadding + 'px',\r\n width: !!column.width ? column.width + 'px' : 'unset',\r\n overflow: 'hidden',\r\n justifyContent: !!column.align ? column.align.toLowerCase() : 'unset'\r\n }\r\n \">\r\n <!-- @if (!!column.templateRef && activeId===id) { -->\r\n @if (!!column.templateRef) {\r\n <ng-container\r\n *ngTemplateOutlet=\"column.templateRef!; context: { context: context }\"></ng-container>\r\n } @else {\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 }\r\n </div>\r\n </div>\r\n }\r\n } @else {\r\n <ng-container>\r\n @for (column of columns; track $index) {\r\n <div class=\"tree-grid-cell\" [class.hidden]=\"column.hidden\">\r\n <div class=\"cell-div\" [ngStyle]=\"\r\n {\r\n width: !!column.width ? column.width + 'px' : 'unset',\r\n display: 'table',\r\n overflowY: 'visible',\r\n textAlign: !!column.align ? column.align.toLowerCase() : 'unset'\r\n }\r\n \">\r\n @if (!column.control) {\r\n <ng-container>\r\n {{ !!column.translate ? (context[column.field] | translate: lang | tableCell:\r\n column.pipe : lang) :\r\n context[column.field] | tableCell: column.pipe : lang}}\r\n </ng-container>\r\n } @else {\r\n <ng-container>\r\n <core-control [form]=\"form\" [control]=\"column.control!\"\r\n [checkError$]=\"checkError$\"></core-control>\r\n </ng-container>\r\n }\r\n\r\n </div>\r\n </div>\r\n }\r\n </ng-container>\r\n }\r\n </div>\r\n </div>\r\n\r\n </span>\r\n @if (!!expanded && !!children.length) {\r\n <ul [class.collapsed]=\"!expanded\" [ngStyle]=\"{\r\n paddingLeft: '0px'\r\n }\">\r\n @for (child of children; track $index) {\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"item; context: { context: child }\"></ng-container>\r\n </ng-container>\r\n }\r\n </ul>\r\n }\r\n\r\n </li>\r\n </ng-template>\r\n\r\n <ng-template #frontItem let-context=\"context\" let-id=\"context.id\" let-title=\"context.tree$Title\"\r\n let-highlighted=\"context.tree$Highlighted\" let-hasChildren=\"context.tree$HasChildren\"\r\n let-children=\"context.tree$Children\" let-expanded=\"context.tree$Expanded\" let-active=\"context.tree$Active\"\r\n let-checked=\"context.tree$Checked\" let-tier=\"context.tree$Tier\">\r\n\r\n <li [class.has-children]=\"!!hasChildren\" [class.collapsed]=\"!!hasChildren && !!!expanded\"\r\n [attr.data-tier]=\"tier\" (click)=\"onLiClick(context, $event)\">\r\n <span class=\"front-span\" [class.span-edit-mode-activated]=\"!!editModeActivated && pendingContext.id===id\">\r\n <div class=\"tree-item\">\r\n <div class=\"tree-item-div\" [attr.data-tier]=\"tier\" [ngStyle]=\"{\r\n width: treeColumnWidth - treeBlockPaddingLeft - tier * treeNodeLevelPadding + 'px',\r\n }\">\r\n @if (editMode === 'TREE_MODE' && !disableTreeCreateUpdate) {\r\n <div class=\"tree-item-tool\">\r\n <div class=\"tree-item-tool-wrapper\">\r\n <core-button-group-vns [shownItems]=\"toolItems\" [showCaption]=\"false\"\r\n (buttonClick)=\"onToolClick($event, context)\"></core-button-group-vns>\r\n </div>\r\n </div>\r\n }\r\n\r\n @if (!!children.length) {\r\n <i class=\"expand-toggler feather-chevron-down\"></i>\r\n } @else {\r\n <i class=\"expand-toggler\" style=\"display: none;\"></i>\r\n }\r\n <object>\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: 36px;--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;--tree-block-padding-left: 100px;white-space:nowrap;font-size:var(--typo-basic-font-size)}.core-tree-grid-container [data-tier=\"1\"]{--tier: 1}.core-tree-grid-container [data-tier=\"2\"]{--tier: 2}.core-tree-grid-container [data-tier=\"3\"]{--tier: 3}.core-tree-grid-container [data-tier=\"4\"]{--tier: 4}.core-tree-grid-container [data-tier=\"5\"]{--tier: 5}.core-tree-grid-container [data-tier=\"6\"]{--tier: 6}.core-tree-grid-container [data-tier=\"7\"]{--tier: 7}.core-tree-grid-container [data-tier=\"8\"]{--tier: 8}.core-tree-grid-container [data-tier=\"9\"]{--tier: 9}.core-tree-grid-container [data-tier=\"10\"]{--tier: 10}.core-tree-grid-container [data-tier=\"11\"]{--tier: 11}.core-tree-grid-container [data-tier=\"12\"]{--tier: 12}.core-tree-grid-container [data-tier=\"13\"]{--tier: 13}.core-tree-grid-container [data-tier=\"14\"]{--tier: 14}.core-tree-grid-container [data-tier=\"15\"]{--tier: 15}.core-tree-grid-container [data-tier=\"16\"]{--tier: 16}.core-tree-grid-container [data-tier=\"17\"]{--tier: 17}.core-tree-grid-container [data-tier=\"18\"]{--tier: 18}.core-tree-grid-container [data-tier=\"19\"]{--tier: 19}.core-tree-grid-container [data-tier=\"20\"]{--tier: 20}.core-tree-grid-container [data-tier=\"21\"]{--tier: 21}.core-tree-grid-container [data-tier=\"22\"]{--tier: 22}.core-tree-grid-container [data-tier=\"23\"]{--tier: 23}.core-tree-grid-container [data-tier=\"24\"]{--tier: 24}.core-tree-grid-container *{box-sizing:border-box!important}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.core-tree-grid-container .loading-surface{width:calc(100vw - var(--size-left-bar-current-width));height:100vh;position:fixed;top:0;left:var(--size-left-bar-current-width);background-color:#ffffff80;z-index:555}.core-tree-grid-container .loading-surface .loading-wrapper{width:calc(100vw - var(--size-left-bar-current-width));height:100vh;display:flex;align-items:center;justify-content:center}.core-tree-grid-container .tree-grid-content{margin-top:var(--header-cell-padding);background-color:#fff;display:inline-block;position:relative}.core-tree-grid-container .front-container{background-color:#fff;display:inline-block;position:sticky!important;left:0;z-index:2;padding-left:var(--tree-block-padding-left)}.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;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;vertical-align:top;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;cursor:pointer}.core-tree-grid-container li>span{position:relative;display:table-row}.core-tree-grid-container li>span .tree-item-tool{position:absolute;top:0;right:0;z-index:7;height:var(--row-height);display:none}.core-tree-grid-container li>span .tree-item-tool .tree-item-tool-wrapper{display:flex;align-items:center;justify-content:flex-end;height:var(--row-height)}.core-tree-grid-container li>span .tree-item{vertical-align:top;display:table-cell}.core-tree-grid-container li>span .tree-item .tree-item-div{display:flex;align-items:center;justify-content:flex-start;position:relative;height:var(--row-height)}.core-tree-grid-container li>span .tree-item .tree-item-div>i{color:var(--square-color);cursor:pointer;font-size:var(--square-size);width:var(--square-size);height:var(--square-size)}.core-tree-grid-container li>span .tree-item .tree-item-div>.expand-toggler{position:absolute;z-index:6;transform:translate(-100%) rotate(0);transition:.5s ease-out}.core-tree-grid-container li>span .tree-item .tree-item-div object{display:table-cell;cursor:pointer}.core-tree-grid-container li>span:hover .tree-item-tool{display:flex;align-items:center;justify-content:flex-end}.core-tree-grid-container li>span:hover:after{content:\"\";display:block;height:var(--row-height);position:absolute;width:calc(var(--tree-container-width) + var(--grid-total-width));background-color:#d3d3d3;opacity:.2;z-index:5;top:0;left:calc(var(--tree-container-width) * -1)}.core-tree-grid-container li>span .tree-grid-row-wrapper{display:table-cell;position:relative}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row{display:inline-flex;background-color:#fff}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row .tree-grid-cell{display:table-cell;height:var(--row-height)}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row .tree-grid-cell .cell-div{cursor:pointer;overflow-x:hidden;overflow-y:visible;padding:var(--content-cell-padding);display:flex;align-items:center;height:var(--row-height)}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row .tree-grid-cell.hidden{display:none}.core-tree-grid-container li>span.front-span:hover:after{width:calc(var(--tree-container-width) + var(--grid-total-width));left:calc(var(--tree-block-padding-left) * -1 + var(--tree-node-level-padding) * var(--tier) * -1)}.core-tree-grid-container li>span.span-edit-mode-activated{height:var(--edit-mode-row-height)}.core-tree-grid-container li>span.span-edit-mode-activated:hover:after{display:none}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item-tool{height:var(--edit-mode-row-height);display:flex}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item-tool .tree-item-tool-wrapper{height:var(--edit-mode-row-height)}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item-tool .tree-item-tool-wrapper i{width:24px;height:24px}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item .tree-item-div{height:var(--edit-mode-row-height)}.core-tree-grid-container li>span.span-edit-mode-activated .tree-grid-row-wrapper .tree-grid-cell{height:var(--edit-mode-row-height)!important}.core-tree-grid-container li>span.span-edit-mode-activated .tree-grid-row-wrapper .tree-grid-cell .cell-div{height:var(--edit-mode-row-height)!important}.core-tree-grid-container li.collapsed .tree-item-div .expand-toggler{transform:translate(-100%) rotate(-90deg)!important;transition:.5s ease-out!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: CoreControlComponent, selector: "core-control", inputs: ["control", "form", "checkError$", "rangeLimit"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: TableCellPipe, name: "tableCell" }, { kind: "component", type: CoreButtonGroupVnsComponent, selector: "core-button-group-vns", inputs: ["height", "instanceNumber", "forHeader", "shownItems", "showCaption"], outputs: ["buttonClick"] }, { kind: "component", type: ThreedotsComponent, selector: "app-threedots" }] }); }
|
|
17311
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.3", type: CoreTreeGridComponent, isStandalone: true, selector: "core-tree-grid", inputs: { linearItems$: "linearItems$", editMode: "editMode", height: "height", columns: "columns", keyField: "keyField", titleField: "titleField", parentField: "parentField", headerHeight: "headerHeight", treeCaption: "treeCaption", headerCellPadding: "headerCellPadding", headerBorderSize: "headerBorderSize", treeColumnWidth: "treeColumnWidth", treeBlockPaddingLeft: "treeBlockPaddingLeft", treeNodeLevelPadding: "treeNodeLevelPadding", contentCellVerticalPadding: "contentCellVerticalPadding", contentCellHorizontalPadding: "contentCellHorizontalPadding", getFullListApi: "getFullListApi", crud: "crud", disableTreeCreateUpdate: "disableTreeCreateUpdate", disableDoubleClick: "disableDoubleClick" }, outputs: { onRowDoubleClick: "onRowDoubleClick", onSubmitSuccess: "onSubmitSuccess" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #container class=\"core-tree-grid-container\" [ngStyle]=\"{\r\n width: '100%',\r\n height: height + 'px',\r\n overflow: 'scroll'\r\n}\">\r\n\r\n @if (loading) {\r\n <div class=\"loading-surface\">\r\n <div class=\"loading-wrapper\">\r\n <app-threedots></app-threedots>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"tree-grid-header\" [ngStyle]=\"{\r\n width: totalWidth + 'px',\r\n whiteSpace: 'nowrap',\r\n display: 'flex',\r\n position: 'sticky'\r\n }\">\r\n <div class=\"tree-block-header\" [ngStyle]=\"{\r\n width: treeColumnWidth + 'px',\r\n height: headerHeight + 'px',\r\n border: headerBorderSize + 'px solid white',\r\n }\">\r\n <div class=\"header-cell-div\" [ngStyle]=\"{\r\n height: headerHeight + 'px',\r\n }\">\r\n {{ (editMode === 'TREE_MODE' ? 'UI.CORE_TREE_GRID.TREE_BLOCK_HEADER' : treeCaption) | translate: lang }}\r\n @if (editMode === 'TREE_MODE' && !disableTreeCreateUpdate) {\r\n <core-button-group-vns [shownItems]=\"headerToolItems\"\r\n (buttonClick)=\"onHeaderToolClick($event)\"></core-button-group-vns>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div [ngStyle]=\"{\r\n display: 'inline-block',\r\n height: headerHeight + 'px',\r\n whiteSpace: 'nowrap'\r\n }\">\r\n\r\n @if (!!headerGroupExist) {\r\n <div class=\"header-row-one\" [ngStyle]=\"{\r\n display: 'block',\r\n height: headerHeight/2 + 'px',\r\n }\">\r\n @for (headerGroup of headerGroups; track $index) {\r\n <div class=\"header-group-cell-div\" [ngStyle]=\"{\r\n height: headerHeight/2 + '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 </div>\r\n }\r\n\r\n <div class=\"header-row-two\" [ngStyle]=\"{\r\n display: 'block',\r\n height: (!!headerGroupExist ? 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: (!!headerGroupExist ? 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: (!!headerGroupExist ? 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 <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 </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 <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 </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 <span [class.span-edit-mode-activated]=\"!!editModeActivated && pendingContext.id===id\" (click)=\"onLiClick(context, $event)\">\r\n\r\n <div class=\"tree-item\">\r\n <div class=\"tree-item-div\" [attr.data-tier]=\"tier\" [ngStyle]=\"{\r\n width: '0px',\r\n }\">\r\n </div>\r\n </div>\r\n <div class=\"tree-grid-row-wrapper\">\r\n <div class=\"tree-grid-row\">\r\n @if (!(!!editModeActivated && pendingContext?.id===id && !disableTreeCreateUpdate)) {\r\n @for (column of columns; track $index) {\r\n <div class=\"tree-grid-cell\" [class.hidden]=\"column.hidden\">\r\n <div class=\"cell-div\" [ngStyle]=\"\r\n {\r\n paddingTop: contentCellVerticalPadding + 'px',\r\n paddingBottom: contentCellVerticalPadding + 'px',\r\n paddingLeft: contentCellHorizontalPadding + 'px',\r\n paddingRight: contentCellHorizontalPadding + 'px',\r\n width: !!column.width ? column.width + 'px' : 'unset',\r\n overflow: 'hidden',\r\n justifyContent: !!column.align ? column.align.toLowerCase() : 'unset'\r\n }\r\n \">\r\n <!-- @if (!!column.templateRef && activeId===id) { -->\r\n @if (!!column.templateRef) {\r\n <ng-container\r\n *ngTemplateOutlet=\"column.templateRef!; context: { context: context }\"></ng-container>\r\n } @else {\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 }\r\n </div>\r\n </div>\r\n }\r\n } @else {\r\n <ng-container>\r\n @for (column of columns; track $index) {\r\n <div class=\"tree-grid-cell\" [class.hidden]=\"column.hidden\">\r\n <div class=\"cell-div\" [ngStyle]=\"\r\n {\r\n width: !!column.width ? column.width + 'px' : 'unset',\r\n display: 'table',\r\n overflowY: 'visible',\r\n textAlign: !!column.align ? column.align.toLowerCase() : 'unset'\r\n }\r\n \">\r\n @if (!column.control) {\r\n <ng-container>\r\n {{ !!column.translate ? (context[column.field] | translate: lang | tableCell:\r\n column.pipe : lang) :\r\n context[column.field] | tableCell: column.pipe : lang}}\r\n </ng-container>\r\n } @else {\r\n <ng-container>\r\n <core-control [form]=\"form\" [control]=\"column.control!\"\r\n [checkError$]=\"checkError$\"></core-control>\r\n </ng-container>\r\n }\r\n\r\n </div>\r\n </div>\r\n }\r\n </ng-container>\r\n }\r\n </div>\r\n </div>\r\n\r\n </span>\r\n @if (!!expanded && !!children.length) {\r\n <ul [class.collapsed]=\"!expanded\" [ngStyle]=\"{\r\n paddingLeft: '0px'\r\n }\">\r\n @for (child of children; track $index) {\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"item; context: { context: child }\"></ng-container>\r\n </ng-container>\r\n }\r\n </ul>\r\n }\r\n\r\n </li>\r\n </ng-template>\r\n\r\n <ng-template #frontItem let-context=\"context\" let-id=\"context.id\" let-title=\"context.tree$Title\"\r\n let-highlighted=\"context.tree$Highlighted\" let-hasChildren=\"context.tree$HasChildren\"\r\n let-children=\"context.tree$Children\" let-expanded=\"context.tree$Expanded\" let-active=\"context.tree$Active\"\r\n let-checked=\"context.tree$Checked\" let-tier=\"context.tree$Tier\">\r\n\r\n <li [class.has-children]=\"!!hasChildren\" [class.collapsed]=\"!!hasChildren && !!!expanded\"\r\n [attr.data-tier]=\"tier\" (click)=\"onLiClick(context, $event)\">\r\n <span class=\"front-span\" [class.span-edit-mode-activated]=\"!!editModeActivated && pendingContext.id===id\">\r\n <div class=\"tree-item\">\r\n <div class=\"tree-item-div\" [attr.data-tier]=\"tier\" [ngStyle]=\"{\r\n width: treeColumnWidth - treeBlockPaddingLeft - tier * treeNodeLevelPadding + 'px',\r\n }\">\r\n @if (editMode === 'TREE_MODE' && !disableTreeCreateUpdate) {\r\n <div class=\"tree-item-tool\">\r\n <div class=\"tree-item-tool-wrapper\">\r\n <core-button-group-vns [shownItems]=\"toolItems\" [showCaption]=\"false\"\r\n (buttonClick)=\"onToolClick($event, context)\"></core-button-group-vns>\r\n </div>\r\n </div>\r\n }\r\n\r\n @if (!!children.length) {\r\n <i class=\"expand-toggler feather-chevron-down\"></i>\r\n } @else {\r\n <i class=\"expand-toggler\" style=\"display: none;\"></i>\r\n }\r\n <object>\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: 36px;--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;--tree-block-padding-left: 100px;white-space:nowrap;font-size:var(--typo-basic-font-size)}.core-tree-grid-container [data-tier=\"1\"]{--tier: 1}.core-tree-grid-container [data-tier=\"2\"]{--tier: 2}.core-tree-grid-container [data-tier=\"3\"]{--tier: 3}.core-tree-grid-container [data-tier=\"4\"]{--tier: 4}.core-tree-grid-container [data-tier=\"5\"]{--tier: 5}.core-tree-grid-container [data-tier=\"6\"]{--tier: 6}.core-tree-grid-container [data-tier=\"7\"]{--tier: 7}.core-tree-grid-container [data-tier=\"8\"]{--tier: 8}.core-tree-grid-container [data-tier=\"9\"]{--tier: 9}.core-tree-grid-container [data-tier=\"10\"]{--tier: 10}.core-tree-grid-container [data-tier=\"11\"]{--tier: 11}.core-tree-grid-container [data-tier=\"12\"]{--tier: 12}.core-tree-grid-container [data-tier=\"13\"]{--tier: 13}.core-tree-grid-container [data-tier=\"14\"]{--tier: 14}.core-tree-grid-container [data-tier=\"15\"]{--tier: 15}.core-tree-grid-container [data-tier=\"16\"]{--tier: 16}.core-tree-grid-container [data-tier=\"17\"]{--tier: 17}.core-tree-grid-container [data-tier=\"18\"]{--tier: 18}.core-tree-grid-container [data-tier=\"19\"]{--tier: 19}.core-tree-grid-container [data-tier=\"20\"]{--tier: 20}.core-tree-grid-container [data-tier=\"21\"]{--tier: 21}.core-tree-grid-container [data-tier=\"22\"]{--tier: 22}.core-tree-grid-container [data-tier=\"23\"]{--tier: 23}.core-tree-grid-container [data-tier=\"24\"]{--tier: 24}.core-tree-grid-container *{box-sizing:border-box!important}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.core-tree-grid-container .loading-surface{width:calc(100vw - var(--size-left-bar-current-width));height:100vh;position:fixed;top:0;left:var(--size-left-bar-current-width);background-color:#ffffff80;z-index:555}.core-tree-grid-container .loading-surface .loading-wrapper{width:calc(100vw - var(--size-left-bar-current-width));height:100vh;display:flex;align-items:center;justify-content:center}.core-tree-grid-container .tree-grid-content{margin-top:var(--header-cell-padding);background-color:#fff;display:inline-block;position:relative}.core-tree-grid-container .front-container{background-color:#fff;display:inline-block;position:sticky!important;left:0;z-index:2;padding-left:var(--tree-block-padding-left)}.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;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;vertical-align:top;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;cursor:pointer}.core-tree-grid-container li>span{position:relative;display:table-row}.core-tree-grid-container li>span .tree-item-tool{position:absolute;top:0;right:0;z-index:7;height:var(--row-height);display:none}.core-tree-grid-container li>span .tree-item-tool .tree-item-tool-wrapper{display:flex;align-items:center;justify-content:flex-end;height:var(--row-height)}.core-tree-grid-container li>span .tree-item{vertical-align:top;display:table-cell}.core-tree-grid-container li>span .tree-item .tree-item-div{display:flex;align-items:center;justify-content:flex-start;position:relative;height:var(--row-height)}.core-tree-grid-container li>span .tree-item .tree-item-div>i{color:var(--square-color);cursor:pointer;font-size:var(--square-size);width:var(--square-size);height:var(--square-size)}.core-tree-grid-container li>span .tree-item .tree-item-div>.expand-toggler{position:absolute;z-index:6;transform:translate(-100%) rotate(0);transition:.5s ease-out}.core-tree-grid-container li>span .tree-item .tree-item-div object{display:table-cell;cursor:pointer}.core-tree-grid-container li>span:hover .tree-item-tool{display:flex;align-items:center;justify-content:flex-end}.core-tree-grid-container li>span:hover:after{content:\"\";display:block;height:var(--row-height);position:absolute;width:calc(var(--tree-container-width) + var(--grid-total-width));background-color:#d3d3d3;opacity:.2;z-index:5;top:0;left:calc(var(--tree-container-width) * -1)}.core-tree-grid-container li>span .tree-grid-row-wrapper{display:table-cell;position:relative}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row{display:inline-flex;background-color:#fff}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row .tree-grid-cell{display:table-cell;height:var(--row-height)}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row .tree-grid-cell .cell-div{cursor:pointer;overflow-x:hidden;overflow-y:visible;padding:var(--content-cell-padding);display:flex;align-items:center;height:var(--row-height)}.core-tree-grid-container li>span .tree-grid-row-wrapper .tree-grid-row .tree-grid-cell.hidden{display:none}.core-tree-grid-container li>span.front-span:hover:after{width:calc(var(--tree-container-width) + var(--grid-total-width));left:calc(var(--tree-block-padding-left) * -1 + var(--tree-node-level-padding) * var(--tier) * -1)}.core-tree-grid-container li>span.span-edit-mode-activated{height:var(--edit-mode-row-height)}.core-tree-grid-container li>span.span-edit-mode-activated:hover:after{display:none}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item-tool{height:var(--edit-mode-row-height);display:flex}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item-tool .tree-item-tool-wrapper{height:var(--edit-mode-row-height)}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item-tool .tree-item-tool-wrapper i{width:24px;height:24px}.core-tree-grid-container li>span.span-edit-mode-activated .tree-item .tree-item-div{height:var(--edit-mode-row-height)}.core-tree-grid-container li>span.span-edit-mode-activated .tree-grid-row-wrapper .tree-grid-cell{height:var(--edit-mode-row-height)!important}.core-tree-grid-container li>span.span-edit-mode-activated .tree-grid-row-wrapper .tree-grid-cell .cell-div{height:var(--edit-mode-row-height)!important}.core-tree-grid-container li.collapsed .tree-item-div .expand-toggler{transform:translate(-100%) rotate(-90deg)!important;transition:.5s ease-out!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: CoreControlComponent, selector: "core-control", inputs: ["control", "form", "checkError$", "rangeLimit"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: TableCellPipe, name: "tableCell" }, { kind: "component", type: CoreButtonGroupVnsComponent, selector: "core-button-group-vns", inputs: ["height", "instanceNumber", "forHeader", "shownItems", "showCaption"], outputs: ["buttonClick"] }, { kind: "component", type: ThreedotsComponent, selector: "app-threedots" }] }); }
|
|
17304
17312
|
}
|
|
17305
17313
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CoreTreeGridComponent, decorators: [{
|
|
17306
17314
|
type: Component,
|