ngx-histaff-alpha 2.7.2 → 2.7.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 +3 -3
- package/esm2022/lib/app/libraries/navigator/navigator/item.component.mjs +3 -3
- package/esm2022/lib/app/libraries/navigator/navigator/navigator.component.mjs +15 -4
- package/esm2022/lib/app/libraries/tooltip/tooltip.directive.mjs +6 -2
- package/esm2022/lib/app/root/menu/menu/menu.component.mjs +65 -19
- package/fesm2022/ngx-histaff-alpha.mjs +80 -24
- package/fesm2022/ngx-histaff-alpha.mjs.map +1 -1
- package/lib/app/libraries/navigator/navigator/navigator.component.d.ts +4 -1
- package/lib/app/root/menu/menu/menu.component.d.ts +3 -1
- package/package.json +1 -1
|
@@ -4775,9 +4775,13 @@ class TooltipDirective {
|
|
|
4775
4775
|
this.componentRef.instance.left = left;
|
|
4776
4776
|
this.componentRef.instance.top = top - 50;
|
|
4777
4777
|
}
|
|
4778
|
+
else if (this.position === 'right') {
|
|
4779
|
+
this.componentRef.instance.top = top;
|
|
4780
|
+
this.componentRef.instance.left = right + 5;
|
|
4781
|
+
this.componentRef.instance.width = 150;
|
|
4782
|
+
}
|
|
4778
4783
|
else if (this.position === 'left') {
|
|
4779
4784
|
this.componentRef.instance.top = top;
|
|
4780
|
-
console.log(this.componentRef);
|
|
4781
4785
|
this.componentRef.instance.left = left - 250;
|
|
4782
4786
|
this.componentRef.instance.width = 150;
|
|
4783
4787
|
}
|
|
@@ -17577,7 +17581,7 @@ class CoreTreeGridComponent extends CoreFormControlBaseComponent {
|
|
|
17577
17581
|
this.subscriptions.map(x => x?.unsubscribe());
|
|
17578
17582
|
}
|
|
17579
17583
|
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 }, { token: AppConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
17580
|
-
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", leafOnlyTemplateRef: "leafOnlyTemplateRef", status: "status", 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\"\r\n (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 && (!leafOnlyTemplateRef || (!!leafOnlyTemplateRef && !hasChildren))) {\r\n <ng-container\r\n *ngTemplateOutlet=\"column.templateRef!; context: { context: context }\"></ng-container>\r\n } @else {\r\n <span [class.opacity0]=\"context[column.field] === undefined\">\r\n {{ !!column.translate ? ((context[column.field] || '-') | translate: lang |\r\n tableCell:\r\n column.pipe : lang) :\r\n (context[column.field] || '-') | tableCell: column.pipe : lang}}\r\n </span>\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 .opacity0{opacity:0}.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", "fixedShow", "shownItems", "showCaption"], outputs: ["buttonClick"] }, { kind: "component", type: ThreedotsComponent, selector: "app-threedots" }] }); }
|
|
17584
|
+
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", leafOnlyTemplateRef: "leafOnlyTemplateRef", status: "status", 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\"\r\n (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 && (!leafOnlyTemplateRef || (!!leafOnlyTemplateRef &&\r\n !hasChildren))) {\r\n <ng-container\r\n *ngTemplateOutlet=\"column.templateRef!; context: { context: context }\"></ng-container>\r\n } @else {\r\n <span [class.opacity0]=\"context[column.field] === undefined\">\r\n {{ !!column.translate ? ((context[column.field] || '-') | translate: lang |\r\n tableCell:\r\n column.pipe : lang) :\r\n (context[column.field] || '-') | tableCell: column.pipe : lang}}\r\n </span>\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 {{ !!column.translate ? (context[column.field] | translate: lang | tableCell:\r\n column.pipe : lang) :\r\n context[column.field] | tableCell: column.pipe : lang}}\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 .opacity0{opacity:0}.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", "fixedShow", "shownItems", "showCaption"], outputs: ["buttonClick"] }, { kind: "component", type: ThreedotsComponent, selector: "app-threedots" }] }); }
|
|
17581
17585
|
}
|
|
17582
17586
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CoreTreeGridComponent, decorators: [{
|
|
17583
17587
|
type: Component,
|
|
@@ -17589,7 +17593,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
|
|
|
17589
17593
|
TableCellPipe,
|
|
17590
17594
|
CoreButtonGroupVnsComponent,
|
|
17591
17595
|
ThreedotsComponent,
|
|
17592
|
-
], 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\"\r\n (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 && (!leafOnlyTemplateRef || (!!leafOnlyTemplateRef && !hasChildren))) {\r\n <ng-container\r\n *ngTemplateOutlet=\"column.templateRef!; context: { context: context }\"></ng-container>\r\n } @else {\r\n <span [class.opacity0]=\"context[column.field] === undefined\">\r\n {{ !!column.translate ? ((context[column.field] || '-') | translate: lang |\r\n tableCell:\r\n column.pipe : lang) :\r\n (context[column.field] || '-') | tableCell: column.pipe : lang}}\r\n </span>\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 .opacity0{opacity:0}.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"] }]
|
|
17596
|
+
], 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\"\r\n (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 && (!leafOnlyTemplateRef || (!!leafOnlyTemplateRef &&\r\n !hasChildren))) {\r\n <ng-container\r\n *ngTemplateOutlet=\"column.templateRef!; context: { context: context }\"></ng-container>\r\n } @else {\r\n <span [class.opacity0]=\"context[column.field] === undefined\">\r\n {{ !!column.translate ? ((context[column.field] || '-') | translate: lang |\r\n tableCell:\r\n column.pipe : lang) :\r\n (context[column.field] || '-') | tableCell: column.pipe : lang}}\r\n </span>\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 {{ !!column.translate ? (context[column.field] | translate: lang | tableCell:\r\n column.pipe : lang) :\r\n context[column.field] | tableCell: column.pipe : lang}}\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 .opacity0{opacity:0}.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"] }]
|
|
17593
17597
|
}], ctorParameters: () => [{ type: AppService }, { type: RecursiveService }, { type: MultiLanguageService }, { type: DialogService }, { type: CoreControlService }, { type: CoreTableService }, { type: AppConfigService }], propDecorators: { linearItems$: [{
|
|
17594
17598
|
type: Input
|
|
17595
17599
|
}], editMode: [{
|
|
@@ -17837,6 +17841,38 @@ class MenuComponent {
|
|
|
17837
17841
|
type: 'number',
|
|
17838
17842
|
}
|
|
17839
17843
|
},
|
|
17844
|
+
{
|
|
17845
|
+
caption: EnumTranslateKey.UI_ENTITY_FIELD_CAPTION_SYS_USER_IS_WEBAPP,
|
|
17846
|
+
headerGroup: EnumTranslateKey.TABLE_HEADER_GROUP_GENERAL_INFORMATION,
|
|
17847
|
+
field: 'isWebapp',
|
|
17848
|
+
type: 'boolean',
|
|
17849
|
+
align: 'center',
|
|
17850
|
+
width: 50,
|
|
17851
|
+
control: {
|
|
17852
|
+
flexSize: 12,
|
|
17853
|
+
controlType: EnumFormBaseContolType.CHECKBOX,
|
|
17854
|
+
field: 'isWebapp',
|
|
17855
|
+
label: EnumTranslateKey.UI_COMMON_EMPTY_STRING,
|
|
17856
|
+
value: false,
|
|
17857
|
+
type: 'boolean',
|
|
17858
|
+
}
|
|
17859
|
+
},
|
|
17860
|
+
{
|
|
17861
|
+
caption: EnumTranslateKey.UI_ENTITY_FIELD_CAPTION_SYS_USER_IS_PORTAL,
|
|
17862
|
+
headerGroup: EnumTranslateKey.TABLE_HEADER_GROUP_GENERAL_INFORMATION,
|
|
17863
|
+
field: 'isPortal',
|
|
17864
|
+
type: 'boolean',
|
|
17865
|
+
align: 'center',
|
|
17866
|
+
width: 50,
|
|
17867
|
+
control: {
|
|
17868
|
+
flexSize: 12,
|
|
17869
|
+
controlType: EnumFormBaseContolType.CHECKBOX,
|
|
17870
|
+
field: 'isPortal',
|
|
17871
|
+
label: EnumTranslateKey.UI_COMMON_EMPTY_STRING,
|
|
17872
|
+
value: false,
|
|
17873
|
+
type: 'boolean',
|
|
17874
|
+
}
|
|
17875
|
+
},
|
|
17840
17876
|
{
|
|
17841
17877
|
caption: EnumTranslateKey.UI_ENTITY_FIELD_CAPTION_COMMON_CREATED_DATE,
|
|
17842
17878
|
headerGroup: EnumTranslateKey.TABLE_HEADER_GROUP_LOG_CHANGE_INFORMATION,
|
|
@@ -17881,20 +17917,24 @@ class MenuComponent {
|
|
|
17881
17917
|
- this.layoutService.basicSpacing * 2; // basically *1 is enough but *2 is a garanty
|
|
17882
17918
|
}
|
|
17883
17919
|
ngAfterViewInit() {
|
|
17884
|
-
|
|
17885
|
-
|
|
17886
|
-
if (
|
|
17887
|
-
|
|
17888
|
-
|
|
17889
|
-
|
|
17890
|
-
|
|
17891
|
-
|
|
17920
|
+
setTimeout(() => {
|
|
17921
|
+
this.subscriptions.push(this.appService.get(api.SYS_FUNCTION_READ_ALL).subscribe(x => {
|
|
17922
|
+
if (x.ok && x.status === 200) {
|
|
17923
|
+
if (!!x.body.innerBody) {
|
|
17924
|
+
const newOptions = [];
|
|
17925
|
+
x.body.innerBody.map((m) => {
|
|
17926
|
+
newOptions.push({
|
|
17927
|
+
value: m.id,
|
|
17928
|
+
text: `${m.name} (${m.code})`
|
|
17929
|
+
});
|
|
17892
17930
|
});
|
|
17893
|
-
|
|
17894
|
-
|
|
17931
|
+
this.functionDropdownOptions$.next(newOptions);
|
|
17932
|
+
}
|
|
17895
17933
|
}
|
|
17896
|
-
}
|
|
17897
|
-
|
|
17934
|
+
}));
|
|
17935
|
+
this.columns.filter(x => x.field === 'isWebapp')[0].templateRef = this.isWebapp;
|
|
17936
|
+
this.columns.filter(x => x.field === 'isPortal')[0].templateRef = this.isPortal;
|
|
17937
|
+
});
|
|
17898
17938
|
}
|
|
17899
17939
|
onRowDoubleClick(event) {
|
|
17900
17940
|
this.router.navigate([
|
|
@@ -17913,17 +17953,25 @@ class MenuComponent {
|
|
|
17913
17953
|
onCorePageHeaderButtonClick(e) {
|
|
17914
17954
|
}
|
|
17915
17955
|
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 }); }
|
|
17916
|
-
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 [editMode]=\"editMode\" [height]=\"treeGridHeight\" [headerHeight]=\"100\" [getFullListApi]=\"getFullListApi\" keyField=\"id\" titleField=\"code\" parentField=\"parent\"\r\n [treeColumnWidth]=\"400\" [columns]=\"columns\" [crud]=\"crud\"\r\n [editMode]=\"editMode\"\r\n (onRowDoubleClick)=\"onRowDoubleClick($event)\" [disableTreeCreateUpdate]=\"disableTreeCreateUpdate\" [disableDoubleClick]=\"true\"></core-tree-grid>\r\n</div>\r\n\r\n<router-outlet name=\"menuAux\"></router-outlet>", styles: [".menu-tree-grid-container{height:calc(var(--content-container-height) - var(--size-core-page-header-height) - var(--size-layout-block-cell-spacing) * 2);overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: CorePageHeaderComponent, selector: "core-page-header", inputs: ["instanceNumber", "shownItems", "title", "hideButtonGroup"], outputs: ["buttonClick"] }, { kind: "component", type: CoreTreeGridComponent, selector: "core-tree-grid", inputs: ["linearItems$", "editMode", "height", "columns", "keyField", "titleField", "parentField", "headerHeight", "leafOnlyTemplateRef", "status", "treeCaption", "headerCellPadding", "headerBorderSize", "treeColumnWidth", "treeBlockPaddingLeft", "treeNodeLevelPadding", "contentCellVerticalPadding", "contentCellHorizontalPadding", "getFullListApi", "crud", "disableTreeCreateUpdate", "disableDoubleClick"], outputs: ["onRowDoubleClick", "onSubmitSuccess"] }] }); }
|
|
17956
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: MenuComponent, isStandalone: true, selector: "app-menu", viewQueries: [{ propertyName: "isWebapp", first: true, predicate: ["isWebapp"], descendants: true }, { propertyName: "isPortal", first: true, predicate: ["isPortal"], descendants: true }], 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 [editMode]=\"editMode\" [height]=\"treeGridHeight\" [headerHeight]=\"100\" [getFullListApi]=\"getFullListApi\" keyField=\"id\" titleField=\"code\" parentField=\"parent\"\r\n [treeColumnWidth]=\"400\" [columns]=\"columns\" [crud]=\"crud\"\r\n [editMode]=\"editMode\"\r\n [leafOnlyTemplateRef]=\"false\"\r\n (onRowDoubleClick)=\"onRowDoubleClick($event)\" [disableTreeCreateUpdate]=\"disableTreeCreateUpdate\" [disableDoubleClick]=\"true\"></core-tree-grid>\r\n</div>\r\n\r\n<router-outlet name=\"menuAux\"></router-outlet>\r\n\r\n<ng-template #isWebapp let-context=\"context\" let-isWebapp=\"context.isWebapp\">\r\n <core-checkbox [ngModel]=\"isWebapp\"></core-checkbox>\r\n</ng-template>\r\n<ng-template #isPortal let-context=\"context\" let-isPortal=\"context.isPortal\">\r\n <core-checkbox [ngModel]=\"isPortal\"></core-checkbox>\r\n</ng-template>", 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: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: ["linearItems$", "editMode", "height", "columns", "keyField", "titleField", "parentField", "headerHeight", "leafOnlyTemplateRef", "status", "treeCaption", "headerCellPadding", "headerBorderSize", "treeColumnWidth", "treeBlockPaddingLeft", "treeNodeLevelPadding", "contentCellVerticalPadding", "contentCellHorizontalPadding", "getFullListApi", "crud", "disableTreeCreateUpdate", "disableDoubleClick"], outputs: ["onRowDoubleClick", "onSubmitSuccess"] }, { kind: "component", type: CoreCheckboxComponent, selector: "core-checkbox", inputs: ["text", "tooltipPosition", "tooltip", "inputValue", "disabled"], outputs: ["onClick"] }] }); }
|
|
17917
17957
|
}
|
|
17918
17958
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: MenuComponent, decorators: [{
|
|
17919
17959
|
type: Component,
|
|
17920
17960
|
args: [{ selector: 'app-menu', standalone: true, imports: [
|
|
17921
17961
|
CommonModule,
|
|
17962
|
+
FormsModule,
|
|
17922
17963
|
RouterModule,
|
|
17923
17964
|
CorePageHeaderComponent,
|
|
17924
|
-
CoreTreeGridComponent
|
|
17925
|
-
|
|
17926
|
-
|
|
17965
|
+
CoreTreeGridComponent,
|
|
17966
|
+
CoreCheckboxComponent
|
|
17967
|
+
], 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 [editMode]=\"editMode\" [height]=\"treeGridHeight\" [headerHeight]=\"100\" [getFullListApi]=\"getFullListApi\" keyField=\"id\" titleField=\"code\" parentField=\"parent\"\r\n [treeColumnWidth]=\"400\" [columns]=\"columns\" [crud]=\"crud\"\r\n [editMode]=\"editMode\"\r\n [leafOnlyTemplateRef]=\"false\"\r\n (onRowDoubleClick)=\"onRowDoubleClick($event)\" [disableTreeCreateUpdate]=\"disableTreeCreateUpdate\" [disableDoubleClick]=\"true\"></core-tree-grid>\r\n</div>\r\n\r\n<router-outlet name=\"menuAux\"></router-outlet>\r\n\r\n<ng-template #isWebapp let-context=\"context\" let-isWebapp=\"context.isWebapp\">\r\n <core-checkbox [ngModel]=\"isWebapp\"></core-checkbox>\r\n</ng-template>\r\n<ng-template #isPortal let-context=\"context\" let-isPortal=\"context.isPortal\">\r\n <core-checkbox [ngModel]=\"isPortal\"></core-checkbox>\r\n</ng-template>", 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"] }]
|
|
17968
|
+
}], ctorParameters: () => [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: AppService }, { type: LayoutService }], propDecorators: { isWebapp: [{
|
|
17969
|
+
type: ViewChild,
|
|
17970
|
+
args: ['isWebapp']
|
|
17971
|
+
}], isPortal: [{
|
|
17972
|
+
type: ViewChild,
|
|
17973
|
+
args: ['isPortal']
|
|
17974
|
+
}] } });
|
|
17927
17975
|
|
|
17928
17976
|
class MenuEditComponent extends BaseEditComponent {
|
|
17929
17977
|
constructor(dialogService) {
|
|
@@ -24025,7 +24073,7 @@ class ItemComponent {
|
|
|
24025
24073
|
this.subscriptions.map(x => x.unsubscribe());
|
|
24026
24074
|
}
|
|
24027
24075
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ItemComponent, deps: [{ token: i1$1.Router }, { token: NavigatorService }, { token: MultiLanguageService }, { token: LayoutService }, { token: MenuService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24028
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ItemComponent, isStandalone: true, selector: "app-item", inputs: { item: "item", level: "level" }, viewQueries: [{ propertyName: "me", first: true, predicate: ["me"], descendants: true }, { propertyName: "children", first: true, predicate: ["children"], descendants: true }, { propertyName: "link", first: true, predicate: ["link"], descendants: true }, { propertyName: "subArrow", first: true, predicate: ["subArrow"], descendants: true }], ngImport: i0, template: "<li #me [id]=\"'main-menu-' + item.id\" class=\"parent\" [attr.data-level]=\"level\" [class.reduced]=\"leftbarReduced\"\r\n [class.expanded]=\"item.tree$Expanded\" [class.highlighted]=\"item.tree$Highlighted\">\r\n\r\n <div class=\"menu-item-wrapper\" (click)=\"onClick($event, item)\">\r\n <i [attr.data-level]=\"level\" class=\"custom-icon-parent-right\"\r\n *ngIf=\"(!!!leftbarReduced && !!hasChildren && !!!item.tree$Selected)\"></i>\r\n <i [attr.data-level]=\"level\" class=\"custom-icon-parent-down\"\r\n *ngIf=\"(!!!leftbarReduced && !!hasChildren && !!item.tree$Selected)\"></i>\r\n <i [attr.data-level]=\"level\" class=\"custom-icon-child-right\"\r\n *ngIf=\"!!!leftbarReduced && !!!hasChildren && !!item.tree$Selected && item.code !== 'MENU.DASHBOARD' && item.code !== 'MENU.HOME'\"></i>\r\n \r\n <i [attr.data-level]=\"level\" [class]=\"item.iconClass + ' module-icon'\" [appTooltip]=\"caption\"\r\n (click)=\"onModuleIconClick($event, item);false\" *ngIf=\"!!item.iconClass\"></i>\r\n\r\n <a #link [attr.data-level]=\"level\" *ngIf=\"!leftbarReduced && hasChildren\" class=\"has-submenu\">\r\n <ng-container (click)=\"subArrowClicked($event);false\"> <!--false is important here-->\r\n <span #subArrow *ngIf=\"(!!item.pictureBase64 || !!item.pictureUri)\"\r\n [class]=\"'img-span plus level' + level\">\r\n <img [src]=\"item.pictureBase64 || item.pictureUri\" *ngIf=\"!!item.pictureBase64\">\r\n </span>\r\n <span #subArrow *ngIf=\"!!!item.pictureBase64 && !!!item.pictureUri\"\r\n [class]=\"'plus level' + level\"></span>\r\n </ng-container>\r\n\r\n <img *ngIf=\"(!!item.pictureBase64 || !!item.pictureUri)\" [src]=\"item.pictureBase64 || item.pictureUri\">\r\n\r\n {{ caption }}\r\n\r\n </a>\r\n <a [attr.data-level]=\"level\" *ngIf=\"!leftbarReduced && !hasChildren\" [routerLink]=\"item.url\"\r\n (click)=\"onClick($event, item)\" [appTooltip]=\"caption\">\r\n {{ caption }}\r\n </a>\r\n\r\n </div>\r\n\r\n <ul #children *ngIf=\"!!hasChildren && !!item.tree$Children!.length && !!!leftbarReduced\" [ngStyle]=\"{ padding: 0}\"\r\n [class.expanded]=\"item.tree$Expanded\">\r\n <div>\r\n <app-item *ngFor=\"let child of item.tree$Children\" [item]=\"child\" [level]=\"level+1\"\r\n (clicked)=\"onClick($event, child)\"></app-item>\r\n </div>\r\n </ul>\r\n\r\n</li>", styles: [".navigator-container{--active-item-border-color: white;--line-height: 16px;--level-gap: 10px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.navigator-container .parent{--children-height: 0px;box-sizing:border-box;width:100%;transition:width 1s ease-out}.navigator-container .parent ul{animation:fadeIn .25s linear}.navigator-container .parent i[class^=custom-icon-parent-],.navigator-container .parent i[class^=custom-icon-child-]{position:absolute}.navigator-container .parent i[class^=custom-icon-parent-][data-level=\"1\"],.navigator-container .parent i[class^=custom-icon-child-][data-level=\"1\"]{left:var(--size-left-bar-the-first-icon-left)!important}.navigator-container .parent i[class^=custom-icon-parent-][data-level=\"2\"],.navigator-container .parent i[class^=custom-icon-child-][data-level=\"2\"]{left:46px!important}.navigator-container .parent i[class^=custom-icon-child-][data-level=\"3\"]{left:calc(var(--size-header-logo-left) - 2 * var(--level-gap))!important}.navigator-container .parent i.module-icon{position:absolute;display:inline-block;left:var(--size-left-bar-the-second-icon-left)!important;font-size:var(--size-left-bar-icon-font-size)!important;width:var(--size-left-bar-icon-font-size)!important;height:var(--size-left-bar-icon-font-size)!important}.navigator-container .parent .menu-item-wrapper{position:relative!important;margin-left:0!important;padding-left:0!important;border:none!important;cursor:pointer}.navigator-container .parent .menu-item-wrapper:hover{background-color:#eaf1fb}.navigator-container .parent a{position:absolute!important;margin-left:0!important;padding-left:0!important;border:none!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.navigator-container .parent a[data-level=\"1\"]{left:var(--size-header-logo-left);max-width:calc(var(--size-left-bar-current-width) - var(--size-header-logo-left) - var(--size-scrollbar-width) - var(--size-layout-block-cell-spacing) * 2)}.navigator-container .parent a[data-level=\"2\"]{left:calc(var(--size-header-logo-left) + var(--level-gap));max-width:calc(var(--size-left-bar-current-width) - var(--size-header-logo-left) - var(--size-scrollbar-width) - var(--size-layout-block-cell-spacing) * 2 - var(--level-gap))}.navigator-container .parent a[data-level=\"3\"]{left:calc(var(--size-header-logo-left) - var(--level-gap) + 3px);max-width:calc(var(--size-left-bar-current-width) - var(--size-header-logo-left) - var(--size-scrollbar-width) - var(--size-layout-block-cell-spacing) * 2 - var(--level-gap) * 2)}.navigator-container .parent[data-level=\"1\"]{margin:10px 0}.navigator-container .parent[data-level=\"1\"] a{margin-left:0;font-size:13px}.navigator-container .parent[data-level=\"2\"] a{margin-left:10px;font-size:13px}.navigator-container .parent[data-level=\"3\"] a{margin-left:20px;font-size:13px}.navigator-container .parent[data-level=\"2\"]>.menu-item-wrapper{margin-left:20px}.navigator-container .parent .menu-item-wrapper{height:35px;padding-left:0!important;display:flex;align-items:center;width:calc(var(--size-left-bar-current-width) - var(--size-layout-block-cell-spacing) - var(--size-scrollbar-width) + 5px);margin:0}.navigator-container .parent .menu-item-wrapper>i{display:inline-block;font-size:13px;color:#a9a9a9;cursor:pointer}.navigator-container .parent .menu-item-wrapper>i{color:#000}.navigator-container .parent li:hover>.menu-item-wrapper:before{content:\"\";display:inline-block;position:absolute;left:0;height:33px;width:calc(var(--size-left-bar-full-width) - 20px);background-color:#eaf1fb;border-top-right-radius:50px;border-bottom-right-radius:50px}.navigator-container .parent>ul{display:block;position:relative;overflow:hidden;display:none;opacity:0;transition:opacity .5s ease-out}.navigator-container .parent.active[data-level=\"2\"]>.menu-item-wrapper>a{transition:.5s ease-out}.navigator-container .parent.highlighted>.menu-item-wrapper>a{color:var(--color-core-org-tree-highlighted)!important;font-weight:700!important}.navigator-container .parent.expanded>ul{display:block;opacity:1;transition:opacity .5s ease-out}.navigator-container .parent.expanded[data-level=\"2\"]>ul{margin-left:25px}.navigator-container .parent.reduced .menu-item-wrapper{padding:0}.navigator-container .expanded[data-level=\"1\"]>.menu-item-wrapper{background-color:#fff;border-top-right-radius:50px;border-bottom-right-radius:50px;margin-right:2px;display:flex;justify-content:flex-start}.navigator-container .expanded[data-level=\"1\"]>.menu-item-wrapper:hover{background-color:#fff}.navigator-container .expanded>ul{overflow:visible!important}.navigator-container .expanded.reduced>.menu-item-wrapper{justify-content:flex-start!important;border-top-left-radius:50px;border-bottom-left-radius:50px;width:37px}.navigator-container .parent.reduced>.menu-item-wrapper{justify-content:flex-start!important;border-radius:20px;width:37px}.navigator-container .custom-icon-parent-down{background-image:url('data:image/svg+xml,<svg width=\"8\" height=\"4\" viewBox=\"0 0 8 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4 3.88867L0.535899 0.555338L7.4641 0.555339L4 3.88867Z\" fill=\"%23000000\"/></svg>');display:flex;align-items:center;justify-content:center;width:8px;height:5px;background-size:contain;background-repeat:no-repeat}.navigator-container .custom-icon-parent-right{background-image:url('data:image/svg+xml,<svg width=\"5\" height=\"5\" viewBox=\"0 0 4 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4 4L0.666667 7.4641L0.666667 0.535898L4 4Z\" fill=\"%23000000\"/></svg>');display:block;position:absolute;width:8px;height:8px;align-items:center;justify-content:center;background-size:contain;background-repeat:no-repeat;float:left}.navigator-container .custom-icon-child-right{position:absolute;background-image:url('data:image/svg+xml,<svg width=\"9\" height=\"12\" viewBox=\"0 0 9 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.08811 5.23421C8.56399 5.63384 8.56399 6.36616 8.08811 6.76579L2.3931 11.5484C1.74247 12.0947 0.75 11.6322 0.75 10.7826L0.750001 1.21742C0.750001 0.367809 1.74247 -0.0947444 2.39309 0.451638L8.08811 5.23421Z\" fill=\"%23F37540\"/></svg>');display:flex;width:8px;height:8px;align-items:center;justify-content:center;background-size:contain;background-repeat:no-repeat}.navigator-container .custom-organization-icon{background-image:url('data:image/svg+xml,<svg width=\"20\" height=\"19\" viewBox=\"0 0 20 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.98901 9.6555H15.0112V11.5377H15.989V8.67772H10.489V6.72217H9.51123V8.67772H4.01123V11.5377H4.98901V9.6555Z\" fill=\"%23000000\"/><path d=\"M7.5555 12.2222H1.44439C1.12024 12.2222 0.80936 12.3509 0.580149 12.5801C0.350937 12.8094 0.222168 13.1202 0.222168 13.4444V17.1111C0.222168 17.4352 0.350937 17.7461 0.580149 17.9753C0.80936 18.2045 1.12024 18.3333 1.44439 18.3333H7.5555C7.87966 18.3333 8.19053 18.2045 8.41974 17.9753C8.64895 17.7461 8.77772 17.4352 8.77772 17.1111V13.4444C8.77772 13.1202 8.64895 12.8094 8.41974 12.5801C8.19053 12.3509 7.87966 12.2222 7.5555 12.2222ZM1.44439 17.1111V13.4444H7.5555V17.1111H1.44439Z\" fill=\"%23000000\"/><path d=\"M18.5555 12.2222H12.4444C12.1202 12.2222 11.8094 12.3509 11.5801 12.5801C11.3509 12.8094 11.2222 13.1202 11.2222 13.4444V17.1111C11.2222 17.4352 11.3509 17.7461 11.5801 17.9753C11.8094 18.2045 12.1202 18.3333 12.4444 18.3333H18.5555C18.8797 18.3333 19.1905 18.2045 19.4197 17.9753C19.649 17.7461 19.7777 17.4352 19.7777 17.1111V13.4444C19.7777 13.1202 19.649 12.8094 19.4197 12.5801C19.1905 12.3509 18.8797 12.2222 18.5555 12.2222ZM12.4444 17.1111V13.4444H18.5555V17.1111H12.4444Z\" fill=\"%23000000\"/><path d=\"M6.94439 6.11111H13.0555C13.3797 6.11111 13.6905 5.98234 13.9197 5.75313C14.149 5.52392 14.2777 5.21304 14.2777 4.88889V1.22222C14.2777 0.898069 14.149 0.587192 13.9197 0.35798C13.6905 0.128769 13.3797 0 13.0555 0H6.94439C6.62024 0 6.30936 0.128769 6.08015 0.35798C5.85094 0.587192 5.72217 0.898069 5.72217 1.22222V4.88889C5.72217 5.21304 5.85094 5.52392 6.08015 5.75313C6.30936 5.98234 6.62024 6.11111 6.94439 6.11111ZM6.94439 1.22222H13.0555V4.88889H6.94439V1.22222Z\" fill=\"%23000000\"/></svg>');display:flex;align-items:center;justify-content:center;width:15px;height:15px;background-size:contain;background-repeat:no-repeat}.navigator-container .custom-profile-icon{background-image:url('data:image/svg+xml,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"0.75\" y=\"0.75\" width=\"16.5\" height=\"16.5\" rx=\"4.25\" stroke=\"%23000000\" stroke-width=\"1.5\"/><path d=\"M14.5164 16.5755V15.2137C14.5164 14.4914 14.2258 13.7987 13.7086 13.2879C13.1913 12.7772 12.4898 12.4902 11.7583 12.4902H6.2422C5.51071 12.4902 4.80919 12.7772 4.29195 13.2879C3.77471 13.7987 3.48413 14.4914 3.48413 15.2137V16.5755\" stroke=\"%23000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.00011 9.57227C10.4432 9.57227 11.613 8.39647 11.613 6.94605C11.613 5.49562 10.4432 4.31982 9.00011 4.31982C7.55704 4.31982 6.38721 5.49562 6.38721 6.94605C6.38721 8.39647 7.55704 9.57227 9.00011 9.57227Z\" stroke=\"%23000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');display:flex;align-items:center;justify-content:center;width:15px;height:15px;background-size:contain;background-repeat:no-repeat}.navigator-container .custom-insurence-icon{background-image:url('data:image/svg+xml,<svg width=\"20\" height=\"18\" viewBox=\"0 0 20 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.8 1H17.2C17.6774 1 18.1352 1.1873 18.4728 1.5207C18.8104 1.8541 19 2.30628 19 2.77778V8.11111C19 10.4686 18.0518 12.7295 16.364 14.3965C14.6761 16.0635 12.3869 17 10 17C8.8181 17 7.64778 16.7701 6.55585 16.3234C5.46392 15.8767 4.47177 15.2219 3.63604 14.3965C1.94821 12.7295 1 10.4686 1 8.11111V2.77778C1 2.30628 1.18964 1.8541 1.52721 1.5207C1.86477 1.1873 2.32261 1 2.8 1V1Z\" stroke=\"%23000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 8.5L9.5 11.5L15 6\" stroke=\"%23000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');display:flex;align-items:center;justify-content:center;width:15px;height:15px;background-size:contain;background-repeat:no-repeat}.navigator-container .custom-education-icon{background-image:url('data:image/svg+xml,<svg width=\"21\" height=\"19\" viewBox=\"0 0 21 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1H6.66667C7.6686 1 8.62949 1.39801 9.33796 2.10649C10.0464 2.81496 10.4444 3.77585 10.4444 4.77778V18C10.4444 17.2486 10.1459 16.5279 9.61458 15.9965C9.08323 15.4652 8.36256 15.1667 7.61111 15.1667H1V1Z\" stroke=\"%23000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M19.8889 1H14.2222C13.2203 1 12.2594 1.39801 11.5509 2.10649C10.8425 2.81496 10.4445 3.77585 10.4445 4.77778V18C10.4445 17.2486 10.743 16.5279 11.2743 15.9965C11.8057 15.4652 12.5263 15.1667 13.2778 15.1667H19.8889V1Z\" stroke=\"%23000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');display:flex;align-items:center;justify-content:center;width:15px;height:15px;background-size:contain;background-repeat:no-repeat}.navigator-container .parent.expanded.reduced>.menu-item-wrapper{background-color:#fff;left:10px!important}.navigator-container .parent.expanded.reduced>.menu-item-wrapper>i{left:9px!important;top:8px!important}.navigator-container .parent.reduced>.menu-item-wrapper{left:10px!important}.navigator-container .parent.reduced>.menu-item-wrapper>i{left:9px!important}\n"], dependencies: [{ kind: "component", type: ItemComponent, selector: "app-item", inputs: ["item", "level"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "showAnyway", "position"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
24076
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ItemComponent, isStandalone: true, selector: "app-item", inputs: { item: "item", level: "level" }, viewQueries: [{ propertyName: "me", first: true, predicate: ["me"], descendants: true }, { propertyName: "children", first: true, predicate: ["children"], descendants: true }, { propertyName: "link", first: true, predicate: ["link"], descendants: true }, { propertyName: "subArrow", first: true, predicate: ["subArrow"], descendants: true }], ngImport: i0, template: "<li #me [id]=\"'main-menu-' + item.id\" class=\"parent\" [attr.data-level]=\"level\" [class.reduced]=\"leftbarReduced\"\r\n [class.expanded]=\"item.tree$Expanded\" [class.highlighted]=\"item.tree$Highlighted\">\r\n\r\n <div class=\"menu-item-wrapper\" (click)=\"onClick($event, item)\">\r\n <i [attr.data-level]=\"level\" class=\"custom-icon-parent-right\"\r\n *ngIf=\"(!!!leftbarReduced && !!hasChildren && !!!item.tree$Selected)\"></i>\r\n <i [attr.data-level]=\"level\" class=\"custom-icon-parent-down\"\r\n *ngIf=\"(!!!leftbarReduced && !!hasChildren && !!item.tree$Selected)\"></i>\r\n <i [attr.data-level]=\"level\" class=\"custom-icon-child-right\"\r\n *ngIf=\"!!!leftbarReduced && !!!hasChildren && !!item.tree$Selected && item.code !== 'MENU.DASHBOARD' && item.code !== 'MENU.HOME'\"></i>\r\n \r\n <i [attr.data-level]=\"level\" [class]=\"item.iconClass + ' module-icon'\" [appTooltip]=\"caption\"\r\n (click)=\"onModuleIconClick($event, item);false\" *ngIf=\"!!item.iconClass\"></i>\r\n\r\n <a #link [attr.data-level]=\"level\" *ngIf=\"!leftbarReduced && hasChildren\" class=\"has-submenu\" [appTooltip]=\"caption\">\r\n <ng-container (click)=\"subArrowClicked($event);false\"> <!--false is important here-->\r\n <span #subArrow *ngIf=\"(!!item.pictureBase64 || !!item.pictureUri)\"\r\n [class]=\"'img-span plus level' + level\">\r\n <img [src]=\"item.pictureBase64 || item.pictureUri\" *ngIf=\"!!item.pictureBase64\">\r\n </span>\r\n <span #subArrow *ngIf=\"!!!item.pictureBase64 && !!!item.pictureUri\"\r\n [class]=\"'plus level' + level\"></span>\r\n </ng-container>\r\n\r\n <img *ngIf=\"(!!item.pictureBase64 || !!item.pictureUri)\" [src]=\"item.pictureBase64 || item.pictureUri\">\r\n\r\n {{ caption }}\r\n\r\n </a>\r\n <a [attr.data-level]=\"level\" *ngIf=\"!leftbarReduced && !hasChildren\" [routerLink]=\"item.url\"\r\n (click)=\"onClick($event, item)\" [appTooltip]=\"caption\">\r\n {{ caption }}\r\n </a>\r\n\r\n </div>\r\n\r\n <ul #children *ngIf=\"!!hasChildren && !!item.tree$Children!.length && !!!leftbarReduced\" [ngStyle]=\"{ padding: 0}\"\r\n [class.expanded]=\"item.tree$Expanded\">\r\n <div>\r\n <app-item *ngFor=\"let child of item.tree$Children\" [item]=\"child\" [level]=\"level+1\"\r\n (clicked)=\"onClick($event, child)\"></app-item>\r\n </div>\r\n </ul>\r\n\r\n</li>", styles: [".navigator-container{--active-item-border-color: white;--line-height: 16px;--level-gap: 10px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.navigator-container .parent{--children-height: 0px;box-sizing:border-box;width:100%;transition:width 1s ease-out}.navigator-container .parent ul{animation:fadeIn .25s linear}.navigator-container .parent i[class^=custom-icon-parent-],.navigator-container .parent i[class^=custom-icon-child-]{position:absolute}.navigator-container .parent i[class^=custom-icon-parent-][data-level=\"1\"],.navigator-container .parent i[class^=custom-icon-child-][data-level=\"1\"]{left:var(--size-left-bar-the-first-icon-left)!important}.navigator-container .parent i[class^=custom-icon-parent-][data-level=\"2\"],.navigator-container .parent i[class^=custom-icon-child-][data-level=\"2\"]{left:46px!important}.navigator-container .parent i[class^=custom-icon-child-][data-level=\"3\"]{left:calc(var(--size-header-logo-left) - 2 * var(--level-gap))!important}.navigator-container .parent i.module-icon{position:absolute;display:inline-block;left:var(--size-left-bar-the-second-icon-left)!important;font-size:var(--size-left-bar-icon-font-size)!important;width:var(--size-left-bar-icon-font-size)!important;height:var(--size-left-bar-icon-font-size)!important}.navigator-container .parent .menu-item-wrapper{position:relative!important;margin-left:0!important;padding-left:0!important;border:none!important;cursor:pointer}.navigator-container .parent .menu-item-wrapper:hover{background-color:#eaf1fb}.navigator-container .parent a{position:absolute!important;margin-left:0!important;padding-left:0!important;border:none!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.navigator-container .parent a[data-level=\"1\"]{left:var(--size-header-logo-left);max-width:calc(var(--size-left-bar-current-width) - var(--size-header-logo-left) - var(--size-scrollbar-width) - var(--size-layout-block-cell-spacing) * 2)}.navigator-container .parent a[data-level=\"2\"]{left:calc(var(--size-header-logo-left) + var(--level-gap));max-width:calc(var(--size-left-bar-current-width) - var(--size-header-logo-left) - var(--size-scrollbar-width) - var(--size-layout-block-cell-spacing) * 2 - var(--level-gap))}.navigator-container .parent a[data-level=\"3\"]{left:calc(var(--size-header-logo-left) - var(--level-gap) + 3px);max-width:calc(var(--size-left-bar-current-width) - var(--size-header-logo-left) - var(--size-scrollbar-width) - var(--size-layout-block-cell-spacing) * 2 - var(--level-gap) * 2)}.navigator-container .parent[data-level=\"1\"]{margin:10px 0}.navigator-container .parent[data-level=\"1\"] a{margin-left:0;font-size:13px}.navigator-container .parent[data-level=\"2\"] a{margin-left:10px;font-size:13px}.navigator-container .parent[data-level=\"3\"] a{margin-left:20px;font-size:13px}.navigator-container .parent[data-level=\"2\"]>.menu-item-wrapper{margin-left:20px}.navigator-container .parent .menu-item-wrapper{height:35px;padding-left:0!important;display:flex;align-items:center;width:calc(var(--size-left-bar-current-width) - var(--size-layout-block-cell-spacing) - var(--size-scrollbar-width) + 5px);margin:0}.navigator-container .parent .menu-item-wrapper>i{display:inline-block;font-size:13px;color:#a9a9a9;cursor:pointer}.navigator-container .parent .menu-item-wrapper>i{color:#000}.navigator-container .parent li:hover>.menu-item-wrapper:before{content:\"\";display:inline-block;position:absolute;left:0;height:33px;width:calc(var(--size-left-bar-full-width) - 20px);background-color:#eaf1fb;border-top-right-radius:50px;border-bottom-right-radius:50px}.navigator-container .parent>ul{display:block;position:relative;overflow:hidden;display:none;opacity:0;transition:opacity .5s ease-out}.navigator-container .parent.active[data-level=\"2\"]>.menu-item-wrapper>a{transition:.5s ease-out}.navigator-container .parent.highlighted>.menu-item-wrapper>a{color:var(--color-core-org-tree-highlighted)!important;font-weight:700!important}.navigator-container .parent.expanded>ul{display:block;opacity:1;transition:opacity .5s ease-out}.navigator-container .parent.expanded[data-level=\"2\"]>ul{margin-left:25px}.navigator-container .parent.reduced .menu-item-wrapper{padding:0}.navigator-container .expanded[data-level=\"1\"]>.menu-item-wrapper{background-color:#fff;border-top-right-radius:50px;border-bottom-right-radius:50px;margin-right:2px;display:flex;justify-content:flex-start}.navigator-container .expanded[data-level=\"1\"]>.menu-item-wrapper:hover{background-color:#fff}.navigator-container .expanded>ul{overflow:visible!important}.navigator-container .expanded.reduced>.menu-item-wrapper{justify-content:flex-start!important;border-top-left-radius:50px;border-bottom-left-radius:50px;width:37px}.navigator-container .parent.reduced>.menu-item-wrapper{justify-content:flex-start!important;border-radius:20px;width:37px}.navigator-container .custom-icon-parent-down{background-image:url('data:image/svg+xml,<svg width=\"8\" height=\"4\" viewBox=\"0 0 8 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4 3.88867L0.535899 0.555338L7.4641 0.555339L4 3.88867Z\" fill=\"%23000000\"/></svg>');display:flex;align-items:center;justify-content:center;width:8px;height:5px;background-size:contain;background-repeat:no-repeat}.navigator-container .custom-icon-parent-right{background-image:url('data:image/svg+xml,<svg width=\"5\" height=\"5\" viewBox=\"0 0 4 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4 4L0.666667 7.4641L0.666667 0.535898L4 4Z\" fill=\"%23000000\"/></svg>');display:block;position:absolute;width:8px;height:8px;align-items:center;justify-content:center;background-size:contain;background-repeat:no-repeat;float:left}.navigator-container .custom-icon-child-right{position:absolute;background-image:url('data:image/svg+xml,<svg width=\"9\" height=\"12\" viewBox=\"0 0 9 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.08811 5.23421C8.56399 5.63384 8.56399 6.36616 8.08811 6.76579L2.3931 11.5484C1.74247 12.0947 0.75 11.6322 0.75 10.7826L0.750001 1.21742C0.750001 0.367809 1.74247 -0.0947444 2.39309 0.451638L8.08811 5.23421Z\" fill=\"%23F37540\"/></svg>');display:flex;width:8px;height:8px;align-items:center;justify-content:center;background-size:contain;background-repeat:no-repeat}.navigator-container .custom-organization-icon{background-image:url('data:image/svg+xml,<svg width=\"20\" height=\"19\" viewBox=\"0 0 20 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.98901 9.6555H15.0112V11.5377H15.989V8.67772H10.489V6.72217H9.51123V8.67772H4.01123V11.5377H4.98901V9.6555Z\" fill=\"%23000000\"/><path d=\"M7.5555 12.2222H1.44439C1.12024 12.2222 0.80936 12.3509 0.580149 12.5801C0.350937 12.8094 0.222168 13.1202 0.222168 13.4444V17.1111C0.222168 17.4352 0.350937 17.7461 0.580149 17.9753C0.80936 18.2045 1.12024 18.3333 1.44439 18.3333H7.5555C7.87966 18.3333 8.19053 18.2045 8.41974 17.9753C8.64895 17.7461 8.77772 17.4352 8.77772 17.1111V13.4444C8.77772 13.1202 8.64895 12.8094 8.41974 12.5801C8.19053 12.3509 7.87966 12.2222 7.5555 12.2222ZM1.44439 17.1111V13.4444H7.5555V17.1111H1.44439Z\" fill=\"%23000000\"/><path d=\"M18.5555 12.2222H12.4444C12.1202 12.2222 11.8094 12.3509 11.5801 12.5801C11.3509 12.8094 11.2222 13.1202 11.2222 13.4444V17.1111C11.2222 17.4352 11.3509 17.7461 11.5801 17.9753C11.8094 18.2045 12.1202 18.3333 12.4444 18.3333H18.5555C18.8797 18.3333 19.1905 18.2045 19.4197 17.9753C19.649 17.7461 19.7777 17.4352 19.7777 17.1111V13.4444C19.7777 13.1202 19.649 12.8094 19.4197 12.5801C19.1905 12.3509 18.8797 12.2222 18.5555 12.2222ZM12.4444 17.1111V13.4444H18.5555V17.1111H12.4444Z\" fill=\"%23000000\"/><path d=\"M6.94439 6.11111H13.0555C13.3797 6.11111 13.6905 5.98234 13.9197 5.75313C14.149 5.52392 14.2777 5.21304 14.2777 4.88889V1.22222C14.2777 0.898069 14.149 0.587192 13.9197 0.35798C13.6905 0.128769 13.3797 0 13.0555 0H6.94439C6.62024 0 6.30936 0.128769 6.08015 0.35798C5.85094 0.587192 5.72217 0.898069 5.72217 1.22222V4.88889C5.72217 5.21304 5.85094 5.52392 6.08015 5.75313C6.30936 5.98234 6.62024 6.11111 6.94439 6.11111ZM6.94439 1.22222H13.0555V4.88889H6.94439V1.22222Z\" fill=\"%23000000\"/></svg>');display:flex;align-items:center;justify-content:center;width:15px;height:15px;background-size:contain;background-repeat:no-repeat}.navigator-container .custom-profile-icon{background-image:url('data:image/svg+xml,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"0.75\" y=\"0.75\" width=\"16.5\" height=\"16.5\" rx=\"4.25\" stroke=\"%23000000\" stroke-width=\"1.5\"/><path d=\"M14.5164 16.5755V15.2137C14.5164 14.4914 14.2258 13.7987 13.7086 13.2879C13.1913 12.7772 12.4898 12.4902 11.7583 12.4902H6.2422C5.51071 12.4902 4.80919 12.7772 4.29195 13.2879C3.77471 13.7987 3.48413 14.4914 3.48413 15.2137V16.5755\" stroke=\"%23000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.00011 9.57227C10.4432 9.57227 11.613 8.39647 11.613 6.94605C11.613 5.49562 10.4432 4.31982 9.00011 4.31982C7.55704 4.31982 6.38721 5.49562 6.38721 6.94605C6.38721 8.39647 7.55704 9.57227 9.00011 9.57227Z\" stroke=\"%23000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');display:flex;align-items:center;justify-content:center;width:15px;height:15px;background-size:contain;background-repeat:no-repeat}.navigator-container .custom-insurence-icon{background-image:url('data:image/svg+xml,<svg width=\"20\" height=\"18\" viewBox=\"0 0 20 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.8 1H17.2C17.6774 1 18.1352 1.1873 18.4728 1.5207C18.8104 1.8541 19 2.30628 19 2.77778V8.11111C19 10.4686 18.0518 12.7295 16.364 14.3965C14.6761 16.0635 12.3869 17 10 17C8.8181 17 7.64778 16.7701 6.55585 16.3234C5.46392 15.8767 4.47177 15.2219 3.63604 14.3965C1.94821 12.7295 1 10.4686 1 8.11111V2.77778C1 2.30628 1.18964 1.8541 1.52721 1.5207C1.86477 1.1873 2.32261 1 2.8 1V1Z\" stroke=\"%23000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 8.5L9.5 11.5L15 6\" stroke=\"%23000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');display:flex;align-items:center;justify-content:center;width:15px;height:15px;background-size:contain;background-repeat:no-repeat}.navigator-container .custom-education-icon{background-image:url('data:image/svg+xml,<svg width=\"21\" height=\"19\" viewBox=\"0 0 21 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1H6.66667C7.6686 1 8.62949 1.39801 9.33796 2.10649C10.0464 2.81496 10.4444 3.77585 10.4444 4.77778V18C10.4444 17.2486 10.1459 16.5279 9.61458 15.9965C9.08323 15.4652 8.36256 15.1667 7.61111 15.1667H1V1Z\" stroke=\"%23000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M19.8889 1H14.2222C13.2203 1 12.2594 1.39801 11.5509 2.10649C10.8425 2.81496 10.4445 3.77585 10.4445 4.77778V18C10.4445 17.2486 10.743 16.5279 11.2743 15.9965C11.8057 15.4652 12.5263 15.1667 13.2778 15.1667H19.8889V1Z\" stroke=\"%23000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');display:flex;align-items:center;justify-content:center;width:15px;height:15px;background-size:contain;background-repeat:no-repeat}.navigator-container .parent.expanded.reduced>.menu-item-wrapper{background-color:#fff;left:10px!important}.navigator-container .parent.expanded.reduced>.menu-item-wrapper>i{left:9px!important;top:8px!important}.navigator-container .parent.reduced>.menu-item-wrapper{left:10px!important}.navigator-container .parent.reduced>.menu-item-wrapper>i{left:9px!important}\n"], dependencies: [{ kind: "component", type: ItemComponent, selector: "app-item", inputs: ["item", "level"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "showAnyway", "position"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
24029
24077
|
}
|
|
24030
24078
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ItemComponent, decorators: [{
|
|
24031
24079
|
type: Component,
|
|
@@ -24033,7 +24081,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
|
|
|
24033
24081
|
CommonModule,
|
|
24034
24082
|
RouterModule,
|
|
24035
24083
|
TooltipDirective,
|
|
24036
|
-
], encapsulation: ViewEncapsulation.None, template: "<li #me [id]=\"'main-menu-' + item.id\" class=\"parent\" [attr.data-level]=\"level\" [class.reduced]=\"leftbarReduced\"\r\n [class.expanded]=\"item.tree$Expanded\" [class.highlighted]=\"item.tree$Highlighted\">\r\n\r\n <div class=\"menu-item-wrapper\" (click)=\"onClick($event, item)\">\r\n <i [attr.data-level]=\"level\" class=\"custom-icon-parent-right\"\r\n *ngIf=\"(!!!leftbarReduced && !!hasChildren && !!!item.tree$Selected)\"></i>\r\n <i [attr.data-level]=\"level\" class=\"custom-icon-parent-down\"\r\n *ngIf=\"(!!!leftbarReduced && !!hasChildren && !!item.tree$Selected)\"></i>\r\n <i [attr.data-level]=\"level\" class=\"custom-icon-child-right\"\r\n *ngIf=\"!!!leftbarReduced && !!!hasChildren && !!item.tree$Selected && item.code !== 'MENU.DASHBOARD' && item.code !== 'MENU.HOME'\"></i>\r\n \r\n <i [attr.data-level]=\"level\" [class]=\"item.iconClass + ' module-icon'\" [appTooltip]=\"caption\"\r\n (click)=\"onModuleIconClick($event, item);false\" *ngIf=\"!!item.iconClass\"></i>\r\n\r\n <a #link [attr.data-level]=\"level\" *ngIf=\"!leftbarReduced && hasChildren\" class=\"has-submenu\">\r\n <ng-container (click)=\"subArrowClicked($event);false\"> <!--false is important here-->\r\n <span #subArrow *ngIf=\"(!!item.pictureBase64 || !!item.pictureUri)\"\r\n [class]=\"'img-span plus level' + level\">\r\n <img [src]=\"item.pictureBase64 || item.pictureUri\" *ngIf=\"!!item.pictureBase64\">\r\n </span>\r\n <span #subArrow *ngIf=\"!!!item.pictureBase64 && !!!item.pictureUri\"\r\n [class]=\"'plus level' + level\"></span>\r\n </ng-container>\r\n\r\n <img *ngIf=\"(!!item.pictureBase64 || !!item.pictureUri)\" [src]=\"item.pictureBase64 || item.pictureUri\">\r\n\r\n {{ caption }}\r\n\r\n </a>\r\n <a [attr.data-level]=\"level\" *ngIf=\"!leftbarReduced && !hasChildren\" [routerLink]=\"item.url\"\r\n (click)=\"onClick($event, item)\" [appTooltip]=\"caption\">\r\n {{ caption }}\r\n </a>\r\n\r\n </div>\r\n\r\n <ul #children *ngIf=\"!!hasChildren && !!item.tree$Children!.length && !!!leftbarReduced\" [ngStyle]=\"{ padding: 0}\"\r\n [class.expanded]=\"item.tree$Expanded\">\r\n <div>\r\n <app-item *ngFor=\"let child of item.tree$Children\" [item]=\"child\" [level]=\"level+1\"\r\n (clicked)=\"onClick($event, child)\"></app-item>\r\n </div>\r\n </ul>\r\n\r\n</li>", styles: [".navigator-container{--active-item-border-color: white;--line-height: 16px;--level-gap: 10px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.navigator-container .parent{--children-height: 0px;box-sizing:border-box;width:100%;transition:width 1s ease-out}.navigator-container .parent ul{animation:fadeIn .25s linear}.navigator-container .parent i[class^=custom-icon-parent-],.navigator-container .parent i[class^=custom-icon-child-]{position:absolute}.navigator-container .parent i[class^=custom-icon-parent-][data-level=\"1\"],.navigator-container .parent i[class^=custom-icon-child-][data-level=\"1\"]{left:var(--size-left-bar-the-first-icon-left)!important}.navigator-container .parent i[class^=custom-icon-parent-][data-level=\"2\"],.navigator-container .parent i[class^=custom-icon-child-][data-level=\"2\"]{left:46px!important}.navigator-container .parent i[class^=custom-icon-child-][data-level=\"3\"]{left:calc(var(--size-header-logo-left) - 2 * var(--level-gap))!important}.navigator-container .parent i.module-icon{position:absolute;display:inline-block;left:var(--size-left-bar-the-second-icon-left)!important;font-size:var(--size-left-bar-icon-font-size)!important;width:var(--size-left-bar-icon-font-size)!important;height:var(--size-left-bar-icon-font-size)!important}.navigator-container .parent .menu-item-wrapper{position:relative!important;margin-left:0!important;padding-left:0!important;border:none!important;cursor:pointer}.navigator-container .parent .menu-item-wrapper:hover{background-color:#eaf1fb}.navigator-container .parent a{position:absolute!important;margin-left:0!important;padding-left:0!important;border:none!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.navigator-container .parent a[data-level=\"1\"]{left:var(--size-header-logo-left);max-width:calc(var(--size-left-bar-current-width) - var(--size-header-logo-left) - var(--size-scrollbar-width) - var(--size-layout-block-cell-spacing) * 2)}.navigator-container .parent a[data-level=\"2\"]{left:calc(var(--size-header-logo-left) + var(--level-gap));max-width:calc(var(--size-left-bar-current-width) - var(--size-header-logo-left) - var(--size-scrollbar-width) - var(--size-layout-block-cell-spacing) * 2 - var(--level-gap))}.navigator-container .parent a[data-level=\"3\"]{left:calc(var(--size-header-logo-left) - var(--level-gap) + 3px);max-width:calc(var(--size-left-bar-current-width) - var(--size-header-logo-left) - var(--size-scrollbar-width) - var(--size-layout-block-cell-spacing) * 2 - var(--level-gap) * 2)}.navigator-container .parent[data-level=\"1\"]{margin:10px 0}.navigator-container .parent[data-level=\"1\"] a{margin-left:0;font-size:13px}.navigator-container .parent[data-level=\"2\"] a{margin-left:10px;font-size:13px}.navigator-container .parent[data-level=\"3\"] a{margin-left:20px;font-size:13px}.navigator-container .parent[data-level=\"2\"]>.menu-item-wrapper{margin-left:20px}.navigator-container .parent .menu-item-wrapper{height:35px;padding-left:0!important;display:flex;align-items:center;width:calc(var(--size-left-bar-current-width) - var(--size-layout-block-cell-spacing) - var(--size-scrollbar-width) + 5px);margin:0}.navigator-container .parent .menu-item-wrapper>i{display:inline-block;font-size:13px;color:#a9a9a9;cursor:pointer}.navigator-container .parent .menu-item-wrapper>i{color:#000}.navigator-container .parent li:hover>.menu-item-wrapper:before{content:\"\";display:inline-block;position:absolute;left:0;height:33px;width:calc(var(--size-left-bar-full-width) - 20px);background-color:#eaf1fb;border-top-right-radius:50px;border-bottom-right-radius:50px}.navigator-container .parent>ul{display:block;position:relative;overflow:hidden;display:none;opacity:0;transition:opacity .5s ease-out}.navigator-container .parent.active[data-level=\"2\"]>.menu-item-wrapper>a{transition:.5s ease-out}.navigator-container .parent.highlighted>.menu-item-wrapper>a{color:var(--color-core-org-tree-highlighted)!important;font-weight:700!important}.navigator-container .parent.expanded>ul{display:block;opacity:1;transition:opacity .5s ease-out}.navigator-container .parent.expanded[data-level=\"2\"]>ul{margin-left:25px}.navigator-container .parent.reduced .menu-item-wrapper{padding:0}.navigator-container .expanded[data-level=\"1\"]>.menu-item-wrapper{background-color:#fff;border-top-right-radius:50px;border-bottom-right-radius:50px;margin-right:2px;display:flex;justify-content:flex-start}.navigator-container .expanded[data-level=\"1\"]>.menu-item-wrapper:hover{background-color:#fff}.navigator-container .expanded>ul{overflow:visible!important}.navigator-container .expanded.reduced>.menu-item-wrapper{justify-content:flex-start!important;border-top-left-radius:50px;border-bottom-left-radius:50px;width:37px}.navigator-container .parent.reduced>.menu-item-wrapper{justify-content:flex-start!important;border-radius:20px;width:37px}.navigator-container .custom-icon-parent-down{background-image:url('data:image/svg+xml,<svg width=\"8\" height=\"4\" viewBox=\"0 0 8 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4 3.88867L0.535899 0.555338L7.4641 0.555339L4 3.88867Z\" fill=\"%23000000\"/></svg>');display:flex;align-items:center;justify-content:center;width:8px;height:5px;background-size:contain;background-repeat:no-repeat}.navigator-container .custom-icon-parent-right{background-image:url('data:image/svg+xml,<svg width=\"5\" height=\"5\" viewBox=\"0 0 4 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4 4L0.666667 7.4641L0.666667 0.535898L4 4Z\" fill=\"%23000000\"/></svg>');display:block;position:absolute;width:8px;height:8px;align-items:center;justify-content:center;background-size:contain;background-repeat:no-repeat;float:left}.navigator-container .custom-icon-child-right{position:absolute;background-image:url('data:image/svg+xml,<svg width=\"9\" height=\"12\" viewBox=\"0 0 9 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.08811 5.23421C8.56399 5.63384 8.56399 6.36616 8.08811 6.76579L2.3931 11.5484C1.74247 12.0947 0.75 11.6322 0.75 10.7826L0.750001 1.21742C0.750001 0.367809 1.74247 -0.0947444 2.39309 0.451638L8.08811 5.23421Z\" fill=\"%23F37540\"/></svg>');display:flex;width:8px;height:8px;align-items:center;justify-content:center;background-size:contain;background-repeat:no-repeat}.navigator-container .custom-organization-icon{background-image:url('data:image/svg+xml,<svg width=\"20\" height=\"19\" viewBox=\"0 0 20 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.98901 9.6555H15.0112V11.5377H15.989V8.67772H10.489V6.72217H9.51123V8.67772H4.01123V11.5377H4.98901V9.6555Z\" fill=\"%23000000\"/><path d=\"M7.5555 12.2222H1.44439C1.12024 12.2222 0.80936 12.3509 0.580149 12.5801C0.350937 12.8094 0.222168 13.1202 0.222168 13.4444V17.1111C0.222168 17.4352 0.350937 17.7461 0.580149 17.9753C0.80936 18.2045 1.12024 18.3333 1.44439 18.3333H7.5555C7.87966 18.3333 8.19053 18.2045 8.41974 17.9753C8.64895 17.7461 8.77772 17.4352 8.77772 17.1111V13.4444C8.77772 13.1202 8.64895 12.8094 8.41974 12.5801C8.19053 12.3509 7.87966 12.2222 7.5555 12.2222ZM1.44439 17.1111V13.4444H7.5555V17.1111H1.44439Z\" fill=\"%23000000\"/><path d=\"M18.5555 12.2222H12.4444C12.1202 12.2222 11.8094 12.3509 11.5801 12.5801C11.3509 12.8094 11.2222 13.1202 11.2222 13.4444V17.1111C11.2222 17.4352 11.3509 17.7461 11.5801 17.9753C11.8094 18.2045 12.1202 18.3333 12.4444 18.3333H18.5555C18.8797 18.3333 19.1905 18.2045 19.4197 17.9753C19.649 17.7461 19.7777 17.4352 19.7777 17.1111V13.4444C19.7777 13.1202 19.649 12.8094 19.4197 12.5801C19.1905 12.3509 18.8797 12.2222 18.5555 12.2222ZM12.4444 17.1111V13.4444H18.5555V17.1111H12.4444Z\" fill=\"%23000000\"/><path d=\"M6.94439 6.11111H13.0555C13.3797 6.11111 13.6905 5.98234 13.9197 5.75313C14.149 5.52392 14.2777 5.21304 14.2777 4.88889V1.22222C14.2777 0.898069 14.149 0.587192 13.9197 0.35798C13.6905 0.128769 13.3797 0 13.0555 0H6.94439C6.62024 0 6.30936 0.128769 6.08015 0.35798C5.85094 0.587192 5.72217 0.898069 5.72217 1.22222V4.88889C5.72217 5.21304 5.85094 5.52392 6.08015 5.75313C6.30936 5.98234 6.62024 6.11111 6.94439 6.11111ZM6.94439 1.22222H13.0555V4.88889H6.94439V1.22222Z\" fill=\"%23000000\"/></svg>');display:flex;align-items:center;justify-content:center;width:15px;height:15px;background-size:contain;background-repeat:no-repeat}.navigator-container .custom-profile-icon{background-image:url('data:image/svg+xml,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"0.75\" y=\"0.75\" width=\"16.5\" height=\"16.5\" rx=\"4.25\" stroke=\"%23000000\" stroke-width=\"1.5\"/><path d=\"M14.5164 16.5755V15.2137C14.5164 14.4914 14.2258 13.7987 13.7086 13.2879C13.1913 12.7772 12.4898 12.4902 11.7583 12.4902H6.2422C5.51071 12.4902 4.80919 12.7772 4.29195 13.2879C3.77471 13.7987 3.48413 14.4914 3.48413 15.2137V16.5755\" stroke=\"%23000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.00011 9.57227C10.4432 9.57227 11.613 8.39647 11.613 6.94605C11.613 5.49562 10.4432 4.31982 9.00011 4.31982C7.55704 4.31982 6.38721 5.49562 6.38721 6.94605C6.38721 8.39647 7.55704 9.57227 9.00011 9.57227Z\" stroke=\"%23000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');display:flex;align-items:center;justify-content:center;width:15px;height:15px;background-size:contain;background-repeat:no-repeat}.navigator-container .custom-insurence-icon{background-image:url('data:image/svg+xml,<svg width=\"20\" height=\"18\" viewBox=\"0 0 20 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.8 1H17.2C17.6774 1 18.1352 1.1873 18.4728 1.5207C18.8104 1.8541 19 2.30628 19 2.77778V8.11111C19 10.4686 18.0518 12.7295 16.364 14.3965C14.6761 16.0635 12.3869 17 10 17C8.8181 17 7.64778 16.7701 6.55585 16.3234C5.46392 15.8767 4.47177 15.2219 3.63604 14.3965C1.94821 12.7295 1 10.4686 1 8.11111V2.77778C1 2.30628 1.18964 1.8541 1.52721 1.5207C1.86477 1.1873 2.32261 1 2.8 1V1Z\" stroke=\"%23000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 8.5L9.5 11.5L15 6\" stroke=\"%23000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');display:flex;align-items:center;justify-content:center;width:15px;height:15px;background-size:contain;background-repeat:no-repeat}.navigator-container .custom-education-icon{background-image:url('data:image/svg+xml,<svg width=\"21\" height=\"19\" viewBox=\"0 0 21 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1H6.66667C7.6686 1 8.62949 1.39801 9.33796 2.10649C10.0464 2.81496 10.4444 3.77585 10.4444 4.77778V18C10.4444 17.2486 10.1459 16.5279 9.61458 15.9965C9.08323 15.4652 8.36256 15.1667 7.61111 15.1667H1V1Z\" stroke=\"%23000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M19.8889 1H14.2222C13.2203 1 12.2594 1.39801 11.5509 2.10649C10.8425 2.81496 10.4445 3.77585 10.4445 4.77778V18C10.4445 17.2486 10.743 16.5279 11.2743 15.9965C11.8057 15.4652 12.5263 15.1667 13.2778 15.1667H19.8889V1Z\" stroke=\"%23000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');display:flex;align-items:center;justify-content:center;width:15px;height:15px;background-size:contain;background-repeat:no-repeat}.navigator-container .parent.expanded.reduced>.menu-item-wrapper{background-color:#fff;left:10px!important}.navigator-container .parent.expanded.reduced>.menu-item-wrapper>i{left:9px!important;top:8px!important}.navigator-container .parent.reduced>.menu-item-wrapper{left:10px!important}.navigator-container .parent.reduced>.menu-item-wrapper>i{left:9px!important}\n"] }]
|
|
24084
|
+
], encapsulation: ViewEncapsulation.None, template: "<li #me [id]=\"'main-menu-' + item.id\" class=\"parent\" [attr.data-level]=\"level\" [class.reduced]=\"leftbarReduced\"\r\n [class.expanded]=\"item.tree$Expanded\" [class.highlighted]=\"item.tree$Highlighted\">\r\n\r\n <div class=\"menu-item-wrapper\" (click)=\"onClick($event, item)\">\r\n <i [attr.data-level]=\"level\" class=\"custom-icon-parent-right\"\r\n *ngIf=\"(!!!leftbarReduced && !!hasChildren && !!!item.tree$Selected)\"></i>\r\n <i [attr.data-level]=\"level\" class=\"custom-icon-parent-down\"\r\n *ngIf=\"(!!!leftbarReduced && !!hasChildren && !!item.tree$Selected)\"></i>\r\n <i [attr.data-level]=\"level\" class=\"custom-icon-child-right\"\r\n *ngIf=\"!!!leftbarReduced && !!!hasChildren && !!item.tree$Selected && item.code !== 'MENU.DASHBOARD' && item.code !== 'MENU.HOME'\"></i>\r\n \r\n <i [attr.data-level]=\"level\" [class]=\"item.iconClass + ' module-icon'\" [appTooltip]=\"caption\"\r\n (click)=\"onModuleIconClick($event, item);false\" *ngIf=\"!!item.iconClass\"></i>\r\n\r\n <a #link [attr.data-level]=\"level\" *ngIf=\"!leftbarReduced && hasChildren\" class=\"has-submenu\" [appTooltip]=\"caption\">\r\n <ng-container (click)=\"subArrowClicked($event);false\"> <!--false is important here-->\r\n <span #subArrow *ngIf=\"(!!item.pictureBase64 || !!item.pictureUri)\"\r\n [class]=\"'img-span plus level' + level\">\r\n <img [src]=\"item.pictureBase64 || item.pictureUri\" *ngIf=\"!!item.pictureBase64\">\r\n </span>\r\n <span #subArrow *ngIf=\"!!!item.pictureBase64 && !!!item.pictureUri\"\r\n [class]=\"'plus level' + level\"></span>\r\n </ng-container>\r\n\r\n <img *ngIf=\"(!!item.pictureBase64 || !!item.pictureUri)\" [src]=\"item.pictureBase64 || item.pictureUri\">\r\n\r\n {{ caption }}\r\n\r\n </a>\r\n <a [attr.data-level]=\"level\" *ngIf=\"!leftbarReduced && !hasChildren\" [routerLink]=\"item.url\"\r\n (click)=\"onClick($event, item)\" [appTooltip]=\"caption\">\r\n {{ caption }}\r\n </a>\r\n\r\n </div>\r\n\r\n <ul #children *ngIf=\"!!hasChildren && !!item.tree$Children!.length && !!!leftbarReduced\" [ngStyle]=\"{ padding: 0}\"\r\n [class.expanded]=\"item.tree$Expanded\">\r\n <div>\r\n <app-item *ngFor=\"let child of item.tree$Children\" [item]=\"child\" [level]=\"level+1\"\r\n (clicked)=\"onClick($event, child)\"></app-item>\r\n </div>\r\n </ul>\r\n\r\n</li>", styles: [".navigator-container{--active-item-border-color: white;--line-height: 16px;--level-gap: 10px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.navigator-container .parent{--children-height: 0px;box-sizing:border-box;width:100%;transition:width 1s ease-out}.navigator-container .parent ul{animation:fadeIn .25s linear}.navigator-container .parent i[class^=custom-icon-parent-],.navigator-container .parent i[class^=custom-icon-child-]{position:absolute}.navigator-container .parent i[class^=custom-icon-parent-][data-level=\"1\"],.navigator-container .parent i[class^=custom-icon-child-][data-level=\"1\"]{left:var(--size-left-bar-the-first-icon-left)!important}.navigator-container .parent i[class^=custom-icon-parent-][data-level=\"2\"],.navigator-container .parent i[class^=custom-icon-child-][data-level=\"2\"]{left:46px!important}.navigator-container .parent i[class^=custom-icon-child-][data-level=\"3\"]{left:calc(var(--size-header-logo-left) - 2 * var(--level-gap))!important}.navigator-container .parent i.module-icon{position:absolute;display:inline-block;left:var(--size-left-bar-the-second-icon-left)!important;font-size:var(--size-left-bar-icon-font-size)!important;width:var(--size-left-bar-icon-font-size)!important;height:var(--size-left-bar-icon-font-size)!important}.navigator-container .parent .menu-item-wrapper{position:relative!important;margin-left:0!important;padding-left:0!important;border:none!important;cursor:pointer}.navigator-container .parent .menu-item-wrapper:hover{background-color:#eaf1fb}.navigator-container .parent a{position:absolute!important;margin-left:0!important;padding-left:0!important;border:none!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.navigator-container .parent a[data-level=\"1\"]{left:var(--size-header-logo-left);max-width:calc(var(--size-left-bar-current-width) - var(--size-header-logo-left) - var(--size-scrollbar-width) - var(--size-layout-block-cell-spacing) * 2)}.navigator-container .parent a[data-level=\"2\"]{left:calc(var(--size-header-logo-left) + var(--level-gap));max-width:calc(var(--size-left-bar-current-width) - var(--size-header-logo-left) - var(--size-scrollbar-width) - var(--size-layout-block-cell-spacing) * 2 - var(--level-gap))}.navigator-container .parent a[data-level=\"3\"]{left:calc(var(--size-header-logo-left) - var(--level-gap) + 3px);max-width:calc(var(--size-left-bar-current-width) - var(--size-header-logo-left) - var(--size-scrollbar-width) - var(--size-layout-block-cell-spacing) * 2 - var(--level-gap) * 2)}.navigator-container .parent[data-level=\"1\"]{margin:10px 0}.navigator-container .parent[data-level=\"1\"] a{margin-left:0;font-size:13px}.navigator-container .parent[data-level=\"2\"] a{margin-left:10px;font-size:13px}.navigator-container .parent[data-level=\"3\"] a{margin-left:20px;font-size:13px}.navigator-container .parent[data-level=\"2\"]>.menu-item-wrapper{margin-left:20px}.navigator-container .parent .menu-item-wrapper{height:35px;padding-left:0!important;display:flex;align-items:center;width:calc(var(--size-left-bar-current-width) - var(--size-layout-block-cell-spacing) - var(--size-scrollbar-width) + 5px);margin:0}.navigator-container .parent .menu-item-wrapper>i{display:inline-block;font-size:13px;color:#a9a9a9;cursor:pointer}.navigator-container .parent .menu-item-wrapper>i{color:#000}.navigator-container .parent li:hover>.menu-item-wrapper:before{content:\"\";display:inline-block;position:absolute;left:0;height:33px;width:calc(var(--size-left-bar-full-width) - 20px);background-color:#eaf1fb;border-top-right-radius:50px;border-bottom-right-radius:50px}.navigator-container .parent>ul{display:block;position:relative;overflow:hidden;display:none;opacity:0;transition:opacity .5s ease-out}.navigator-container .parent.active[data-level=\"2\"]>.menu-item-wrapper>a{transition:.5s ease-out}.navigator-container .parent.highlighted>.menu-item-wrapper>a{color:var(--color-core-org-tree-highlighted)!important;font-weight:700!important}.navigator-container .parent.expanded>ul{display:block;opacity:1;transition:opacity .5s ease-out}.navigator-container .parent.expanded[data-level=\"2\"]>ul{margin-left:25px}.navigator-container .parent.reduced .menu-item-wrapper{padding:0}.navigator-container .expanded[data-level=\"1\"]>.menu-item-wrapper{background-color:#fff;border-top-right-radius:50px;border-bottom-right-radius:50px;margin-right:2px;display:flex;justify-content:flex-start}.navigator-container .expanded[data-level=\"1\"]>.menu-item-wrapper:hover{background-color:#fff}.navigator-container .expanded>ul{overflow:visible!important}.navigator-container .expanded.reduced>.menu-item-wrapper{justify-content:flex-start!important;border-top-left-radius:50px;border-bottom-left-radius:50px;width:37px}.navigator-container .parent.reduced>.menu-item-wrapper{justify-content:flex-start!important;border-radius:20px;width:37px}.navigator-container .custom-icon-parent-down{background-image:url('data:image/svg+xml,<svg width=\"8\" height=\"4\" viewBox=\"0 0 8 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4 3.88867L0.535899 0.555338L7.4641 0.555339L4 3.88867Z\" fill=\"%23000000\"/></svg>');display:flex;align-items:center;justify-content:center;width:8px;height:5px;background-size:contain;background-repeat:no-repeat}.navigator-container .custom-icon-parent-right{background-image:url('data:image/svg+xml,<svg width=\"5\" height=\"5\" viewBox=\"0 0 4 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4 4L0.666667 7.4641L0.666667 0.535898L4 4Z\" fill=\"%23000000\"/></svg>');display:block;position:absolute;width:8px;height:8px;align-items:center;justify-content:center;background-size:contain;background-repeat:no-repeat;float:left}.navigator-container .custom-icon-child-right{position:absolute;background-image:url('data:image/svg+xml,<svg width=\"9\" height=\"12\" viewBox=\"0 0 9 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.08811 5.23421C8.56399 5.63384 8.56399 6.36616 8.08811 6.76579L2.3931 11.5484C1.74247 12.0947 0.75 11.6322 0.75 10.7826L0.750001 1.21742C0.750001 0.367809 1.74247 -0.0947444 2.39309 0.451638L8.08811 5.23421Z\" fill=\"%23F37540\"/></svg>');display:flex;width:8px;height:8px;align-items:center;justify-content:center;background-size:contain;background-repeat:no-repeat}.navigator-container .custom-organization-icon{background-image:url('data:image/svg+xml,<svg width=\"20\" height=\"19\" viewBox=\"0 0 20 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.98901 9.6555H15.0112V11.5377H15.989V8.67772H10.489V6.72217H9.51123V8.67772H4.01123V11.5377H4.98901V9.6555Z\" fill=\"%23000000\"/><path d=\"M7.5555 12.2222H1.44439C1.12024 12.2222 0.80936 12.3509 0.580149 12.5801C0.350937 12.8094 0.222168 13.1202 0.222168 13.4444V17.1111C0.222168 17.4352 0.350937 17.7461 0.580149 17.9753C0.80936 18.2045 1.12024 18.3333 1.44439 18.3333H7.5555C7.87966 18.3333 8.19053 18.2045 8.41974 17.9753C8.64895 17.7461 8.77772 17.4352 8.77772 17.1111V13.4444C8.77772 13.1202 8.64895 12.8094 8.41974 12.5801C8.19053 12.3509 7.87966 12.2222 7.5555 12.2222ZM1.44439 17.1111V13.4444H7.5555V17.1111H1.44439Z\" fill=\"%23000000\"/><path d=\"M18.5555 12.2222H12.4444C12.1202 12.2222 11.8094 12.3509 11.5801 12.5801C11.3509 12.8094 11.2222 13.1202 11.2222 13.4444V17.1111C11.2222 17.4352 11.3509 17.7461 11.5801 17.9753C11.8094 18.2045 12.1202 18.3333 12.4444 18.3333H18.5555C18.8797 18.3333 19.1905 18.2045 19.4197 17.9753C19.649 17.7461 19.7777 17.4352 19.7777 17.1111V13.4444C19.7777 13.1202 19.649 12.8094 19.4197 12.5801C19.1905 12.3509 18.8797 12.2222 18.5555 12.2222ZM12.4444 17.1111V13.4444H18.5555V17.1111H12.4444Z\" fill=\"%23000000\"/><path d=\"M6.94439 6.11111H13.0555C13.3797 6.11111 13.6905 5.98234 13.9197 5.75313C14.149 5.52392 14.2777 5.21304 14.2777 4.88889V1.22222C14.2777 0.898069 14.149 0.587192 13.9197 0.35798C13.6905 0.128769 13.3797 0 13.0555 0H6.94439C6.62024 0 6.30936 0.128769 6.08015 0.35798C5.85094 0.587192 5.72217 0.898069 5.72217 1.22222V4.88889C5.72217 5.21304 5.85094 5.52392 6.08015 5.75313C6.30936 5.98234 6.62024 6.11111 6.94439 6.11111ZM6.94439 1.22222H13.0555V4.88889H6.94439V1.22222Z\" fill=\"%23000000\"/></svg>');display:flex;align-items:center;justify-content:center;width:15px;height:15px;background-size:contain;background-repeat:no-repeat}.navigator-container .custom-profile-icon{background-image:url('data:image/svg+xml,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"0.75\" y=\"0.75\" width=\"16.5\" height=\"16.5\" rx=\"4.25\" stroke=\"%23000000\" stroke-width=\"1.5\"/><path d=\"M14.5164 16.5755V15.2137C14.5164 14.4914 14.2258 13.7987 13.7086 13.2879C13.1913 12.7772 12.4898 12.4902 11.7583 12.4902H6.2422C5.51071 12.4902 4.80919 12.7772 4.29195 13.2879C3.77471 13.7987 3.48413 14.4914 3.48413 15.2137V16.5755\" stroke=\"%23000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.00011 9.57227C10.4432 9.57227 11.613 8.39647 11.613 6.94605C11.613 5.49562 10.4432 4.31982 9.00011 4.31982C7.55704 4.31982 6.38721 5.49562 6.38721 6.94605C6.38721 8.39647 7.55704 9.57227 9.00011 9.57227Z\" stroke=\"%23000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');display:flex;align-items:center;justify-content:center;width:15px;height:15px;background-size:contain;background-repeat:no-repeat}.navigator-container .custom-insurence-icon{background-image:url('data:image/svg+xml,<svg width=\"20\" height=\"18\" viewBox=\"0 0 20 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.8 1H17.2C17.6774 1 18.1352 1.1873 18.4728 1.5207C18.8104 1.8541 19 2.30628 19 2.77778V8.11111C19 10.4686 18.0518 12.7295 16.364 14.3965C14.6761 16.0635 12.3869 17 10 17C8.8181 17 7.64778 16.7701 6.55585 16.3234C5.46392 15.8767 4.47177 15.2219 3.63604 14.3965C1.94821 12.7295 1 10.4686 1 8.11111V2.77778C1 2.30628 1.18964 1.8541 1.52721 1.5207C1.86477 1.1873 2.32261 1 2.8 1V1Z\" stroke=\"%23000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 8.5L9.5 11.5L15 6\" stroke=\"%23000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');display:flex;align-items:center;justify-content:center;width:15px;height:15px;background-size:contain;background-repeat:no-repeat}.navigator-container .custom-education-icon{background-image:url('data:image/svg+xml,<svg width=\"21\" height=\"19\" viewBox=\"0 0 21 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1H6.66667C7.6686 1 8.62949 1.39801 9.33796 2.10649C10.0464 2.81496 10.4444 3.77585 10.4444 4.77778V18C10.4444 17.2486 10.1459 16.5279 9.61458 15.9965C9.08323 15.4652 8.36256 15.1667 7.61111 15.1667H1V1Z\" stroke=\"%23000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M19.8889 1H14.2222C13.2203 1 12.2594 1.39801 11.5509 2.10649C10.8425 2.81496 10.4445 3.77585 10.4445 4.77778V18C10.4445 17.2486 10.743 16.5279 11.2743 15.9965C11.8057 15.4652 12.5263 15.1667 13.2778 15.1667H19.8889V1Z\" stroke=\"%23000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');display:flex;align-items:center;justify-content:center;width:15px;height:15px;background-size:contain;background-repeat:no-repeat}.navigator-container .parent.expanded.reduced>.menu-item-wrapper{background-color:#fff;left:10px!important}.navigator-container .parent.expanded.reduced>.menu-item-wrapper>i{left:9px!important;top:8px!important}.navigator-container .parent.reduced>.menu-item-wrapper{left:10px!important}.navigator-container .parent.reduced>.menu-item-wrapper>i{left:9px!important}\n"] }]
|
|
24037
24085
|
}], ctorParameters: () => [{ type: i1$1.Router }, { type: NavigatorService }, { type: MultiLanguageService }, { type: LayoutService }, { type: MenuService }], propDecorators: { item: [{
|
|
24038
24086
|
type: Input
|
|
24039
24087
|
}], level: [{
|
|
@@ -24065,6 +24113,7 @@ class NavigatorComponent {
|
|
|
24065
24113
|
this.authService = authService;
|
|
24066
24114
|
this.alertService = alertService;
|
|
24067
24115
|
this.appConfigService = appConfigService;
|
|
24116
|
+
this.wideMode$ = new BehaviorSubject(true);
|
|
24068
24117
|
this.linerItems$ = new BehaviorSubject([]);
|
|
24069
24118
|
this.subscriptions = [];
|
|
24070
24119
|
this.flatNavigationCheck = [];
|
|
@@ -24073,6 +24122,8 @@ class NavigatorComponent {
|
|
|
24073
24122
|
this.searchFor = '';
|
|
24074
24123
|
this.searchStream$ = new BehaviorSubject('');
|
|
24075
24124
|
this.checkedLoadingMenu = false;
|
|
24125
|
+
this.mls.lang$.subscribe(x => this.lang = x);
|
|
24126
|
+
this.wideMode$.subscribe(x => this.wideMode = x);
|
|
24076
24127
|
}
|
|
24077
24128
|
ngOnInit() {
|
|
24078
24129
|
this.menuClickedItem = JSON.parse(localStorage.getItem('menuCurrentClicked'));
|
|
@@ -24387,7 +24438,7 @@ class NavigatorComponent {
|
|
|
24387
24438
|
});
|
|
24388
24439
|
}
|
|
24389
24440
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: NavigatorComponent, deps: [{ token: NavigatorService }, { token: SysMenuService }, { token: RecursiveService }, { token: i1$1.Router }, { token: MenuService }, { token: OrganizationService }, { token: LayoutService }, { token: MultiLanguageService }, { token: AuthService }, { token: AlertService }, { token: AppConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24390
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
24441
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.3", type: NavigatorComponent, isStandalone: true, selector: "corelib-navigator", inputs: { wideMode$: "wideMode$", logoTemplate: "logoTemplate", rightPartHeadeMenuItem: "rightPartHeadeMenuItem", rightIcon: "rightIcon" }, viewQueries: [{ propertyName: "mainMenu", first: true, predicate: ["mainMenu"], descendants: true }], ngImport: i0, template: "<div class=\"navigator-container\">\r\n\r\n <div class=\"input-search-container\" [class.opacity0]=\"!!leftbarReduced\">\r\n <input id=\"navigator-search\" [placeholder]=\"'UI_COMMON_PLACE_HOLDER_SEARCH_HERE' | translate: lang\" type=\"text\" [(ngModel)]=\"searchFor\"\r\n (ngModelChange)=\"onSearchChange($event)\">\r\n <div class=\"search-clear-wrapper\" *ngIf=\"!!searchFor.length\" (click)=\"clearSearch()\">\r\n <i class=\"feather-x\"></i>\r\n </div>\r\n </div>\r\n\r\n <div id=\"nav\">\r\n <core-loading-surface *ngIf=\"loading\"></core-loading-surface>\r\n <ul id=\"main-menu\" #mainMenu [ngStyle]=\"{ padding: 0}\">\r\n <!-- <li id=\"first-menu-item\" class=\"first-menu-iem\"><a title=\"Go to home page\" routerLink=\"/\">\r\n <span id=\"logo-menu\">\r\n <ng-container [ngTemplateOutlet]=\"logoTemplate\"></ng-container>\r\n </span>\r\n </a>\r\n </li> -->\r\n <ng-container *ngIf=\"items?.length\">\r\n <ng-container *ngFor=\"let item of items\">\r\n <app-item [item]=\"item\" [level]=\"1\"></app-item>\r\n </ng-container>\r\n\r\n </ng-container>\r\n\r\n <li class=\"parent right-part-item\" *ngIf=\"!!rightIcon\">\r\n <a (click)=\"rightIcon.function()\" class=\"no-vertical-padding\">\r\n <div class=\"right-icon-wrapper\">\r\n <i [class]=\"'right-icon ' + rightIcon.featherClass\"></i>\r\n <div class=\"right-icon-badge\">\r\n {{ rightIcon.badgeCount }}\r\n </div>\r\n </div>\r\n </a>\r\n </li>\r\n </ul>\r\n <div class=\"collapse-toggler\" [appTooltip]=\"(wideMode ? 'UI_LEFTBAR_TOGGLER_COLLAPSE' : 'UI_LEFTBAR_TOGGLER_EXPAND') | translate: lang\" [showAnyway]=\"true\" position=\"above\">\r\n <div class=\"collapse-toggler-inner\">\r\n <div class=\"core-line-wrapper\">\r\n <core-line></core-line>\r\n </div>\r\n \r\n <span>\r\n <i class=\"feather-chevrons-left\"></i>\r\n </span>\r\n @if (wideMode) {\r\n <span>\r\n {{ 'UI_LEFTBAR_TOGGLER_COLLAPSE' | translate: lang }}\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".navigator-container{--font-size: 13px;position:relative;display:block;font-size:var(--font-size)}.navigator-container .input-search-container{margin-left:12px;margin-bottom:var(--size-layout-block-cell-spacing);width:calc(var(--size-left-bar-current-width) - var(--size-left-bar-the-second-icon-left) - var(--size-scrollbar-width) - 1px);border-radius:20px;background-color:#e7e7e7}.navigator-container .input-search-container .search-clear-wrapper{display:block;position:absolute;top:5px;right:20px;width:24px;height:24px;cursor:pointer}.navigator-container .input-search-container .search-clear-wrapper i{font-size:24px;color:#848484}.navigator-container #navigator-search{font-family:Open Sans,sans-serif!important;-webkit-appearance:none;appearance:none;font-size:13px;width:100%;max-width:400px;height:35px;border:none;border-radius:20px;background-color:#e7e7e7;color:#000;padding-left:20px;position:relative;display:inline-block}.navigator-container .search-wrapper{padding:5px;position:relative}.navigator-container #main-menu{height:calc(100vh - var(--size-header-height) - 40px - var(--size-layout-block-cell-spacing) * 2);overflow-x:hidden;overflow-y:auto}.navigator-container ul{padding:0!important}.navigator-container .custom-item:hover{background-color:#eaf1fb}.navigator-container .collapse-toggler{width:calc(var(--size-left-bar-current-width) - var(--size-layout-block-cell-spacing) * 2);display:block;position:fixed;bottom:var(--size-layout-block-cell-spacing);left:var(--size-layout-block-cell-spacing);z-index:1;cursor:pointer;user-select:none;-webkit-user-select:none;height:50px;border-radius:5px}.navigator-container .collapse-toggler .core-line-wrapper{width:calc(var(--size-left-bar-current-width) - var(--size-layout-block-cell-spacing) * 2);display:block;position:absolute;left:0;top:calc(var(--size-layout-block-cell-spacing) * -1);z-index:1}.navigator-container .collapse-toggler:hover{background-color:#e1e3e5}.navigator-container .collapse-toggler .collapse-toggler-inner{display:flex;align-items:center;justify-content:flex-start;height:50px}.navigator-container .collapse-toggler .collapse-toggler-inner span{height:50px;display:flex;align-items:center;justify-content:flex-start}.navigator-container .collapse-toggler .collapse-toggler-inner span i{width:24px;height:24px;font-size:24px;color:#6b6b6b}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ItemComponent, selector: "app-item", inputs: ["item", "level"] }, { kind: "component", type: CoreLoadingSurfaceComponent, selector: "core-loading-surface", inputs: ["loading", "height"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: CoreLineComponent, selector: "core-line" }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "showAnyway", "position"] }] }); }
|
|
24391
24442
|
}
|
|
24392
24443
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: NavigatorComponent, decorators: [{
|
|
24393
24444
|
type: Component,
|
|
@@ -24396,8 +24447,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
|
|
|
24396
24447
|
FormsModule,
|
|
24397
24448
|
ItemComponent,
|
|
24398
24449
|
CoreLoadingSurfaceComponent,
|
|
24399
|
-
|
|
24400
|
-
|
|
24450
|
+
TranslatePipe,
|
|
24451
|
+
CoreLineComponent,
|
|
24452
|
+
TooltipDirective
|
|
24453
|
+
], template: "<div class=\"navigator-container\">\r\n\r\n <div class=\"input-search-container\" [class.opacity0]=\"!!leftbarReduced\">\r\n <input id=\"navigator-search\" [placeholder]=\"'UI_COMMON_PLACE_HOLDER_SEARCH_HERE' | translate: lang\" type=\"text\" [(ngModel)]=\"searchFor\"\r\n (ngModelChange)=\"onSearchChange($event)\">\r\n <div class=\"search-clear-wrapper\" *ngIf=\"!!searchFor.length\" (click)=\"clearSearch()\">\r\n <i class=\"feather-x\"></i>\r\n </div>\r\n </div>\r\n\r\n <div id=\"nav\">\r\n <core-loading-surface *ngIf=\"loading\"></core-loading-surface>\r\n <ul id=\"main-menu\" #mainMenu [ngStyle]=\"{ padding: 0}\">\r\n <!-- <li id=\"first-menu-item\" class=\"first-menu-iem\"><a title=\"Go to home page\" routerLink=\"/\">\r\n <span id=\"logo-menu\">\r\n <ng-container [ngTemplateOutlet]=\"logoTemplate\"></ng-container>\r\n </span>\r\n </a>\r\n </li> -->\r\n <ng-container *ngIf=\"items?.length\">\r\n <ng-container *ngFor=\"let item of items\">\r\n <app-item [item]=\"item\" [level]=\"1\"></app-item>\r\n </ng-container>\r\n\r\n </ng-container>\r\n\r\n <li class=\"parent right-part-item\" *ngIf=\"!!rightIcon\">\r\n <a (click)=\"rightIcon.function()\" class=\"no-vertical-padding\">\r\n <div class=\"right-icon-wrapper\">\r\n <i [class]=\"'right-icon ' + rightIcon.featherClass\"></i>\r\n <div class=\"right-icon-badge\">\r\n {{ rightIcon.badgeCount }}\r\n </div>\r\n </div>\r\n </a>\r\n </li>\r\n </ul>\r\n <div class=\"collapse-toggler\" [appTooltip]=\"(wideMode ? 'UI_LEFTBAR_TOGGLER_COLLAPSE' : 'UI_LEFTBAR_TOGGLER_EXPAND') | translate: lang\" [showAnyway]=\"true\" position=\"above\">\r\n <div class=\"collapse-toggler-inner\">\r\n <div class=\"core-line-wrapper\">\r\n <core-line></core-line>\r\n </div>\r\n \r\n <span>\r\n <i class=\"feather-chevrons-left\"></i>\r\n </span>\r\n @if (wideMode) {\r\n <span>\r\n {{ 'UI_LEFTBAR_TOGGLER_COLLAPSE' | translate: lang }}\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".navigator-container{--font-size: 13px;position:relative;display:block;font-size:var(--font-size)}.navigator-container .input-search-container{margin-left:12px;margin-bottom:var(--size-layout-block-cell-spacing);width:calc(var(--size-left-bar-current-width) - var(--size-left-bar-the-second-icon-left) - var(--size-scrollbar-width) - 1px);border-radius:20px;background-color:#e7e7e7}.navigator-container .input-search-container .search-clear-wrapper{display:block;position:absolute;top:5px;right:20px;width:24px;height:24px;cursor:pointer}.navigator-container .input-search-container .search-clear-wrapper i{font-size:24px;color:#848484}.navigator-container #navigator-search{font-family:Open Sans,sans-serif!important;-webkit-appearance:none;appearance:none;font-size:13px;width:100%;max-width:400px;height:35px;border:none;border-radius:20px;background-color:#e7e7e7;color:#000;padding-left:20px;position:relative;display:inline-block}.navigator-container .search-wrapper{padding:5px;position:relative}.navigator-container #main-menu{height:calc(100vh - var(--size-header-height) - 40px - var(--size-layout-block-cell-spacing) * 2);overflow-x:hidden;overflow-y:auto}.navigator-container ul{padding:0!important}.navigator-container .custom-item:hover{background-color:#eaf1fb}.navigator-container .collapse-toggler{width:calc(var(--size-left-bar-current-width) - var(--size-layout-block-cell-spacing) * 2);display:block;position:fixed;bottom:var(--size-layout-block-cell-spacing);left:var(--size-layout-block-cell-spacing);z-index:1;cursor:pointer;user-select:none;-webkit-user-select:none;height:50px;border-radius:5px}.navigator-container .collapse-toggler .core-line-wrapper{width:calc(var(--size-left-bar-current-width) - var(--size-layout-block-cell-spacing) * 2);display:block;position:absolute;left:0;top:calc(var(--size-layout-block-cell-spacing) * -1);z-index:1}.navigator-container .collapse-toggler:hover{background-color:#e1e3e5}.navigator-container .collapse-toggler .collapse-toggler-inner{display:flex;align-items:center;justify-content:flex-start;height:50px}.navigator-container .collapse-toggler .collapse-toggler-inner span{height:50px;display:flex;align-items:center;justify-content:flex-start}.navigator-container .collapse-toggler .collapse-toggler-inner span i{width:24px;height:24px;font-size:24px;color:#6b6b6b}\n"] }]
|
|
24454
|
+
}], ctorParameters: () => [{ type: NavigatorService }, { type: SysMenuService }, { type: RecursiveService }, { type: i1$1.Router }, { type: MenuService }, { type: OrganizationService }, { type: LayoutService }, { type: MultiLanguageService }, { type: AuthService }, { type: AlertService }, { type: AppConfigService }], propDecorators: { wideMode$: [{
|
|
24455
|
+
type: Input
|
|
24456
|
+
}], mainMenu: [{
|
|
24401
24457
|
type: ViewChild,
|
|
24402
24458
|
args: ["mainMenu"]
|
|
24403
24459
|
}], logoTemplate: [{
|