@energycap/components 0.33.5-ECAP-18191-carbon-hub-theme-phase-1.20230606-0953 → 0.33.5-ECAP-18191-carbon-hub-theme-phase-1.20230606-1102

package/fesm2015/energycap-components.mjs

@@ -2288,10 +2288,10 @@ class MenuComponent {
     }
 }
 MenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: WindowService }, { token: ScrollService }], target: i0.ɵɵFactoryTarget.Component });
-MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MenuComponent, selector: "ec-menu", inputs: { id: "id", items: "items", selected: "selected", parent: "parent", templateType: "templateType", customMenuTemplate: "customMenuTemplate", title: "title", showNoItems: "showNoItems", noDataText: "noDataText", enableKeyNav: "enableKeyNav", highlightedItem: "highlightedItem", maintainSelectedItem: "maintainSelectedItem", truncateItems: "truncateItems", preserveIconSpace: "preserveIconSpace", dropdownToggleButton: "dropdownToggleButton" }, outputs: { selectedChanged: "selectedChanged", menuClosed: "menuClosed" }, host: { properties: { "attr.id": "this.attrId" } }, viewQueries: [{ propertyName: "labelTemplate", first: true, predicate: ["label"], descendants: true, static: true }, { propertyName: "iconAndLabelTemplate", first: true, predicate: ["iconAndLabel"], descendants: true, static: true }, { propertyName: "checkAndLabelTemplate", first: true, predicate: ["checkAndLabel"], descendants: true, static: true }], ngImport: i0, template: "<nav>\r\n    <div class=\"parent\"\r\n         [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\r\n        <header id=\"{{id}}_header\"\r\n                class=\"text-heading-3 p-1\"\r\n                [class.is-selected]=\"highlightedItemIndex === -1\"\r\n                *ngIf=\"parent\"\r\n                (click)=\"back($event)\">\r\n            <div class=\"item-wrapper\">\r\n                <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\r\n                <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\r\n            </div>\r\n        </header>\r\n\r\n        <ul id=\"{{id}}_list\" class=\"py-1\">\r\n            <li *ngFor=\"let item of items; index as i\"\r\n                id=\"{{item.id || id + '_item' + i}}\"\r\n                class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n                [attr.disabled]=\"item.disabled\"\r\n                [hidden]=\"item.hidden\"\r\n                ecNavItemActive=\"is-selected\"\r\n                [ecNavItemActiveQueryParams]=\"item.queryParams\"\r\n                [ecNavItemActiveUrl]=\"item.url\"\r\n                [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\r\n                (routerLinkActivated)=\"selectItem($event, item)\"\r\n                [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': item?.display === 'heading'}\"\r\n                (click)=\"selectItem($event, item)\">\r\n\r\n                <a *ngIf=\"item.url && !item.externalLink\"\r\n                   id=\"{{item.id}}_link\"\r\n                   title=\"{{truncateItems ? item.label : ''}}\"\r\n                   class=\"item-wrapper\"\r\n                   [routerLink]=\"item.url\"\r\n                   [queryParams]=\"item.queryParams || null\"\r\n                   target=\"{{item.target || '_self'}}\">\r\n\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </a>\r\n\r\n                <a *ngIf=\"item.url && item.externalLink\"\r\n                   id=\"{{item.id}}_link\"\r\n                   title=\"{{truncateItems ? item.label : ''}}\"\r\n                   class=\"item-wrapper\"\r\n                   href=\"{{item.url}}\"\r\n                   target=\"{{item.target || '_self'}}\">\r\n\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </a>\r\n\r\n                <div *ngIf=\"!item.url\"\r\n                     title=\"{{truncateItems ? item.label : ''}}\"\r\n                     class=\"item-wrapper\">\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </div>\r\n            </li>\r\n        </ul>\r\n\r\n        <p class=\"no-data-message\">{{noDataText | translate}}</p>\r\n    </div>\r\n\r\n    <!-- Child menu (Rendered to the right) -->\r\n    <ec-menu *ngIf=\"selected?.items\"\r\n             id=\"{{id}}_child\"\r\n             class=\"child\"\r\n             [parent]=\"selected\"\r\n             [items]=\"selected?.items\"\r\n             [showNoItems]=\"true\"\r\n             [templateType]=\"templateType\"\r\n             [enableKeyNav]=\"true\"\r\n             [truncateItems]=\"truncateItems\"\r\n             (selectedChanged)=\"onSelection($event)\"\r\n             (menuClosed)=\"toggleChildMenu(false)\">\r\n    </ec-menu>\r\n</nav>\r\n\r\n<!-- 'label' Item Template -->\r\n<ng-template #label\r\n             let-item>\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'checkAndLabel' Item Template -->\r\n<ng-template #checkAndLabel\r\n             let-item>\r\n\r\n    <i class=\"ec-icon icon-check ec-icon-sm\" *ngIf=\"item.display !== 'heading'\"></i>\r\n\r\n    <i class=\"ec-icon {{item.icon}} ml-2\" *ngIf=\"item.icon\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'iconAndLabel' Item Template -->\r\n<ng-template #iconAndLabel\r\n             let-item>\r\n    <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\r\n    <i class=\"ec-icon {{item.icon}}\" *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-font-size-action);font-weight:400;background-color:var(--ec-background-color)}:host.open>nav>.parent,:host.open>nav>.child{position:absolute;left:0;top:0;right:0;height:100%;transition:transform .25s ease}:host.open>nav>.parent{transform:translate(0)}:host.open>nav>.child{transform:translate(100%)}:host.open-active>nav>.parent{transform:translate(-100%)}:host.open-active>nav>.child{transform:translate(0)}:host(.bg-transparent){background-color:transparent}:host-context(.is-always-open){height:100%}:host-context(.is-always-open) .item-wrapper{padding-left:1rem;padding-right:1rem}nav{display:flex;position:relative;height:100%;overflow:hidden}.parent{display:flex;flex-direction:column;flex:auto;position:relative;max-width:100%}.parent>header{cursor:pointer}.parent>header.is-selected .item-wrapper,.parent>header.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}.parent>header:hover .item-wrapper{background-color:var(--ec-background-color-hover)}.parent.no-data ul{display:none}.parent.no-data .no-data-message{display:block}ul{padding:0;margin:0;list-style:none;flex:auto;height:100%;overflow-y:auto}ul li{cursor:pointer;padding:0 .25rem}ul li a{color:inherit;border-bottom:0;text-decoration:none}ul li.is-selected .item-wrapper,ul li.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}ul li:hover .item-wrapper{background-color:var(--ec-background-color-hover)}ul li:focus .item-wrapper{background-color:var(--ec-color-disabled-dark);position:relative;z-index:1;outline:none}ul li.is-disabled .item-wrapper{color:var(--ec-color-secondary-dark);opacity:.65}ul li.is-disabled,ul li.is-readonly{cursor:default}ul li.is-disabled .item-wrapper,ul li.is-readonly .item-wrapper{background-color:transparent;color:inherit}ul li.is-checked .icon-check{opacity:1}ul li.heading{cursor:default}ul li.heading .item-wrapper{background-color:transparent}ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider{border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.indent-1 .item-wrapper{padding-left:1.5rem}ul li.indent-2 .item-wrapper{padding-left:2.5rem}ul li.indent-3 .item-wrapper{padding-left:3.5rem}.item-wrapper{cursor:inherit;line-height:1.25rem;min-height:1.75rem;padding:.25rem .5rem;border-radius:var(--ec-border-radius);display:flex;color:inherit}.item-wrapper .label{margin-right:auto}.item-wrapper .label+.ec-icon{margin-left:.5rem}.item-wrapper .ec-icon{margin-top:calc((1.25rem - var(--ec-font-size-icon)) / 2);flex:none}.item-wrapper .ec-icon+.label{margin-left:.5rem}.item-wrapper .ec-icon-sm{margin-top:calc((1.25rem - calc(var(--ec-font-size-icon) * .75)) / 2)}.item-wrapper .icon-check{opacity:0}.no-data-message{display:none;text-align:center;padding:1rem;color:var(--ec-color-hint-dark);margin-bottom:0;font-size:var(--ec-font-size-body)}:host-context(ec-tree) ul{overflow-x:hidden}:host-context(ec-tree) li.is-selected,:host-context(ec-tree) li.is-highlighted{font-weight:700}:host-context(ec-tree) li.is-selected:not(:hover),:host-context(ec-tree) li.is-highlighted:not(:hover){background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NavItemActiveDirective, selector: "[ecNavItemActive]", inputs: ["ecNavItemActive", "ecNavItemActiveExactMatch", "ecNavItemActiveQueryParams", "ecNavItemActiveUrl"], outputs: ["routerLinkActivated"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "menuClosed"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MenuComponent, selector: "ec-menu", inputs: { id: "id", items: "items", selected: "selected", parent: "parent", templateType: "templateType", customMenuTemplate: "customMenuTemplate", title: "title", showNoItems: "showNoItems", noDataText: "noDataText", enableKeyNav: "enableKeyNav", highlightedItem: "highlightedItem", maintainSelectedItem: "maintainSelectedItem", truncateItems: "truncateItems", preserveIconSpace: "preserveIconSpace", dropdownToggleButton: "dropdownToggleButton" }, outputs: { selectedChanged: "selectedChanged", menuClosed: "menuClosed" }, host: { properties: { "attr.id": "this.attrId" } }, viewQueries: [{ propertyName: "labelTemplate", first: true, predicate: ["label"], descendants: true, static: true }, { propertyName: "iconAndLabelTemplate", first: true, predicate: ["iconAndLabel"], descendants: true, static: true }, { propertyName: "checkAndLabelTemplate", first: true, predicate: ["checkAndLabel"], descendants: true, static: true }], ngImport: i0, template: "<nav>\r\n    <div class=\"parent\"\r\n         [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\r\n        <header id=\"{{id}}_header\"\r\n                class=\"text-heading-3 p-1\"\r\n                [class.is-selected]=\"highlightedItemIndex === -1\"\r\n                *ngIf=\"parent\"\r\n                (click)=\"back($event)\">\r\n            <div class=\"item-wrapper\">\r\n                <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\r\n                <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\r\n            </div>\r\n        </header>\r\n\r\n        <ul id=\"{{id}}_list\" class=\"py-1\">\r\n            <li *ngFor=\"let item of items; index as i\"\r\n                id=\"{{item.id || id + '_item' + i}}\"\r\n                class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n                [attr.disabled]=\"item.disabled\"\r\n                [hidden]=\"item.hidden\"\r\n                ecNavItemActive=\"is-selected\"\r\n                [ecNavItemActiveQueryParams]=\"item.queryParams\"\r\n                [ecNavItemActiveUrl]=\"item.url\"\r\n                [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\r\n                (routerLinkActivated)=\"selectItem($event, item)\"\r\n                [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': item?.display === 'heading'}\"\r\n                (click)=\"selectItem($event, item)\">\r\n\r\n                <a *ngIf=\"item.url && !item.externalLink\"\r\n                   id=\"{{item.id}}_link\"\r\n                   title=\"{{truncateItems ? item.label : ''}}\"\r\n                   class=\"item-wrapper\"\r\n                   [routerLink]=\"item.url\"\r\n                   [queryParams]=\"item.queryParams || null\"\r\n                   target=\"{{item.target || '_self'}}\">\r\n\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </a>\r\n\r\n                <a *ngIf=\"item.url && item.externalLink\"\r\n                   id=\"{{item.id}}_link\"\r\n                   title=\"{{truncateItems ? item.label : ''}}\"\r\n                   class=\"item-wrapper\"\r\n                   href=\"{{item.url}}\"\r\n                   target=\"{{item.target || '_self'}}\">\r\n\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </a>\r\n\r\n                <div *ngIf=\"!item.url\"\r\n                     title=\"{{truncateItems ? item.label : ''}}\"\r\n                     class=\"item-wrapper\">\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </div>\r\n            </li>\r\n        </ul>\r\n\r\n        <p class=\"no-data-message\">{{noDataText | translate}}</p>\r\n    </div>\r\n\r\n    <!-- Child menu (Rendered to the right) -->\r\n    <ec-menu *ngIf=\"selected?.items\"\r\n             id=\"{{id}}_child\"\r\n             class=\"child\"\r\n             [parent]=\"selected\"\r\n             [items]=\"selected?.items\"\r\n             [showNoItems]=\"true\"\r\n             [templateType]=\"templateType\"\r\n             [enableKeyNav]=\"true\"\r\n             [truncateItems]=\"truncateItems\"\r\n             (selectedChanged)=\"onSelection($event)\"\r\n             (menuClosed)=\"toggleChildMenu(false)\">\r\n    </ec-menu>\r\n</nav>\r\n\r\n<!-- 'label' Item Template -->\r\n<ng-template #label\r\n             let-item>\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'checkAndLabel' Item Template -->\r\n<ng-template #checkAndLabel\r\n             let-item>\r\n\r\n    <i class=\"ec-icon icon-check ec-icon-sm\" *ngIf=\"item.display !== 'heading'\"></i>\r\n\r\n    <i class=\"ec-icon {{item.icon}} ml-2\" *ngIf=\"item.icon\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'iconAndLabel' Item Template -->\r\n<ng-template #iconAndLabel\r\n             let-item>\r\n    <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\r\n    <i class=\"ec-icon {{item.icon}}\" *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-font-size-action);font-weight:400;background-color:var(--ec-menu-background-color, var(--ec-background-color))}:host.open>nav>.parent,:host.open>nav>.child{position:absolute;left:0;top:0;right:0;height:100%;transition:transform .25s ease}:host.open>nav>.parent{transform:translate(0)}:host.open>nav>.child{transform:translate(100%)}:host.open-active>nav>.parent{transform:translate(-100%)}:host.open-active>nav>.child{transform:translate(0)}:host(.bg-transparent){background-color:transparent}:host-context(.is-always-open){height:100%}:host-context(.is-always-open) .item-wrapper{padding-left:1rem;padding-right:1rem}nav{display:flex;position:relative;height:100%;overflow:hidden}.parent{display:flex;flex-direction:column;flex:auto;position:relative;max-width:100%}.parent>header{cursor:pointer}.parent>header.is-selected .item-wrapper,.parent>header.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}.parent>header:hover .item-wrapper{background-color:var(--ec-background-color-hover)}.parent.no-data ul{display:none}.parent.no-data .no-data-message{display:block}ul{padding:0;margin:0;list-style:none;flex:auto;height:100%;overflow-y:auto}ul li{cursor:pointer;padding:0 .25rem}ul li a{color:inherit;border-bottom:0;text-decoration:none}ul li.is-selected .item-wrapper,ul li.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}ul li:hover .item-wrapper{background-color:var(--ec-background-color-hover)}ul li:focus .item-wrapper{background-color:var(--ec-color-disabled-dark);position:relative;z-index:1;outline:none}ul li.is-disabled .item-wrapper{color:var(--ec-color-secondary-dark);opacity:.65}ul li.is-disabled,ul li.is-readonly{cursor:default}ul li.is-disabled .item-wrapper,ul li.is-readonly .item-wrapper{background-color:transparent;color:inherit}ul li.is-checked .icon-check{opacity:1}ul li.heading{cursor:default}ul li.heading .item-wrapper{background-color:transparent}ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider{border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.indent-1 .item-wrapper{padding-left:1.5rem}ul li.indent-2 .item-wrapper{padding-left:2.5rem}ul li.indent-3 .item-wrapper{padding-left:3.5rem}.item-wrapper{cursor:inherit;line-height:1.25rem;min-height:1.75rem;padding:.25rem .5rem;border-radius:var(--ec-border-radius);display:flex;color:inherit}.item-wrapper .label{margin-right:auto}.item-wrapper .label+.ec-icon{margin-left:.5rem}.item-wrapper .ec-icon{margin-top:calc((1.25rem - var(--ec-font-size-icon)) / 2);flex:none}.item-wrapper .ec-icon+.label{margin-left:.5rem}.item-wrapper .ec-icon-sm{margin-top:calc((1.25rem - calc(var(--ec-font-size-icon) * .75)) / 2)}.item-wrapper .icon-check{opacity:0}.no-data-message{display:none;text-align:center;padding:1rem;color:var(--ec-color-hint-dark);margin-bottom:0;font-size:var(--ec-font-size-body)}:host-context(ec-tree) ul{overflow-x:hidden}:host-context(ec-tree) li.is-selected,:host-context(ec-tree) li.is-highlighted{font-weight:700}:host-context(ec-tree) li.is-selected:not(:hover),:host-context(ec-tree) li.is-highlighted:not(:hover){background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NavItemActiveDirective, selector: "[ecNavItemActive]", inputs: ["ecNavItemActive", "ecNavItemActiveExactMatch", "ecNavItemActiveQueryParams", "ecNavItemActiveUrl"], outputs: ["routerLinkActivated"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "menuClosed"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-menu', template: "<nav>\r\n    <div class=\"parent\"\r\n         [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\r\n        <header id=\"{{id}}_header\"\r\n                class=\"text-heading-3 p-1\"\r\n                [class.is-selected]=\"highlightedItemIndex === -1\"\r\n                *ngIf=\"parent\"\r\n                (click)=\"back($event)\">\r\n            <div class=\"item-wrapper\">\r\n                <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\r\n                <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\r\n            </div>\r\n        </header>\r\n\r\n        <ul id=\"{{id}}_list\" class=\"py-1\">\r\n            <li *ngFor=\"let item of items; index as i\"\r\n                id=\"{{item.id || id + '_item' + i}}\"\r\n                class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n                [attr.disabled]=\"item.disabled\"\r\n                [hidden]=\"item.hidden\"\r\n                ecNavItemActive=\"is-selected\"\r\n                [ecNavItemActiveQueryParams]=\"item.queryParams\"\r\n                [ecNavItemActiveUrl]=\"item.url\"\r\n                [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\r\n                (routerLinkActivated)=\"selectItem($event, item)\"\r\n                [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': item?.display === 'heading'}\"\r\n                (click)=\"selectItem($event, item)\">\r\n\r\n                <a *ngIf=\"item.url && !item.externalLink\"\r\n                   id=\"{{item.id}}_link\"\r\n                   title=\"{{truncateItems ? item.label : ''}}\"\r\n                   class=\"item-wrapper\"\r\n                   [routerLink]=\"item.url\"\r\n                   [queryParams]=\"item.queryParams || null\"\r\n                   target=\"{{item.target || '_self'}}\">\r\n\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </a>\r\n\r\n                <a *ngIf=\"item.url && item.externalLink\"\r\n                   id=\"{{item.id}}_link\"\r\n                   title=\"{{truncateItems ? item.label : ''}}\"\r\n                   class=\"item-wrapper\"\r\n                   href=\"{{item.url}}\"\r\n                   target=\"{{item.target || '_self'}}\">\r\n\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </a>\r\n\r\n                <div *ngIf=\"!item.url\"\r\n                     title=\"{{truncateItems ? item.label : ''}}\"\r\n                     class=\"item-wrapper\">\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </div>\r\n            </li>\r\n        </ul>\r\n\r\n        <p class=\"no-data-message\">{{noDataText | translate}}</p>\r\n    </div>\r\n\r\n    <!-- Child menu (Rendered to the right) -->\r\n    <ec-menu *ngIf=\"selected?.items\"\r\n             id=\"{{id}}_child\"\r\n             class=\"child\"\r\n             [parent]=\"selected\"\r\n             [items]=\"selected?.items\"\r\n             [showNoItems]=\"true\"\r\n             [templateType]=\"templateType\"\r\n             [enableKeyNav]=\"true\"\r\n             [truncateItems]=\"truncateItems\"\r\n             (selectedChanged)=\"onSelection($event)\"\r\n             (menuClosed)=\"toggleChildMenu(false)\">\r\n    </ec-menu>\r\n</nav>\r\n\r\n<!-- 'label' Item Template -->\r\n<ng-template #label\r\n             let-item>\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'checkAndLabel' Item Template -->\r\n<ng-template #checkAndLabel\r\n             let-item>\r\n\r\n    <i class=\"ec-icon icon-check ec-icon-sm\" *ngIf=\"item.display !== 'heading'\"></i>\r\n\r\n    <i class=\"ec-icon {{item.icon}} ml-2\" *ngIf=\"item.icon\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'iconAndLabel' Item Template -->\r\n<ng-template #iconAndLabel\r\n             let-item>\r\n    <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\r\n    <i class=\"ec-icon {{item.icon}}\" *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-font-size-action);font-weight:400;background-color:var(--ec-background-color)}:host.open>nav>.parent,:host.open>nav>.child{position:absolute;left:0;top:0;right:0;height:100%;transition:transform .25s ease}:host.open>nav>.parent{transform:translate(0)}:host.open>nav>.child{transform:translate(100%)}:host.open-active>nav>.parent{transform:translate(-100%)}:host.open-active>nav>.child{transform:translate(0)}:host(.bg-transparent){background-color:transparent}:host-context(.is-always-open){height:100%}:host-context(.is-always-open) .item-wrapper{padding-left:1rem;padding-right:1rem}nav{display:flex;position:relative;height:100%;overflow:hidden}.parent{display:flex;flex-direction:column;flex:auto;position:relative;max-width:100%}.parent>header{cursor:pointer}.parent>header.is-selected .item-wrapper,.parent>header.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}.parent>header:hover .item-wrapper{background-color:var(--ec-background-color-hover)}.parent.no-data ul{display:none}.parent.no-data .no-data-message{display:block}ul{padding:0;margin:0;list-style:none;flex:auto;height:100%;overflow-y:auto}ul li{cursor:pointer;padding:0 .25rem}ul li a{color:inherit;border-bottom:0;text-decoration:none}ul li.is-selected .item-wrapper,ul li.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}ul li:hover .item-wrapper{background-color:var(--ec-background-color-hover)}ul li:focus .item-wrapper{background-color:var(--ec-color-disabled-dark);position:relative;z-index:1;outline:none}ul li.is-disabled .item-wrapper{color:var(--ec-color-secondary-dark);opacity:.65}ul li.is-disabled,ul li.is-readonly{cursor:default}ul li.is-disabled .item-wrapper,ul li.is-readonly .item-wrapper{background-color:transparent;color:inherit}ul li.is-checked .icon-check{opacity:1}ul li.heading{cursor:default}ul li.heading .item-wrapper{background-color:transparent}ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider{border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.indent-1 .item-wrapper{padding-left:1.5rem}ul li.indent-2 .item-wrapper{padding-left:2.5rem}ul li.indent-3 .item-wrapper{padding-left:3.5rem}.item-wrapper{cursor:inherit;line-height:1.25rem;min-height:1.75rem;padding:.25rem .5rem;border-radius:var(--ec-border-radius);display:flex;color:inherit}.item-wrapper .label{margin-right:auto}.item-wrapper .label+.ec-icon{margin-left:.5rem}.item-wrapper .ec-icon{margin-top:calc((1.25rem - var(--ec-font-size-icon)) / 2);flex:none}.item-wrapper .ec-icon+.label{margin-left:.5rem}.item-wrapper .ec-icon-sm{margin-top:calc((1.25rem - calc(var(--ec-font-size-icon) * .75)) / 2)}.item-wrapper .icon-check{opacity:0}.no-data-message{display:none;text-align:center;padding:1rem;color:var(--ec-color-hint-dark);margin-bottom:0;font-size:var(--ec-font-size-body)}:host-context(ec-tree) ul{overflow-x:hidden}:host-context(ec-tree) li.is-selected,:host-context(ec-tree) li.is-highlighted{font-weight:700}:host-context(ec-tree) li.is-selected:not(:hover),:host-context(ec-tree) li.is-highlighted:not(:hover){background-color:transparent}\n"] }]
+            args: [{ selector: 'ec-menu', template: "<nav>\r\n    <div class=\"parent\"\r\n         [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\r\n        <header id=\"{{id}}_header\"\r\n                class=\"text-heading-3 p-1\"\r\n                [class.is-selected]=\"highlightedItemIndex === -1\"\r\n                *ngIf=\"parent\"\r\n                (click)=\"back($event)\">\r\n            <div class=\"item-wrapper\">\r\n                <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\r\n                <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\r\n            </div>\r\n        </header>\r\n\r\n        <ul id=\"{{id}}_list\" class=\"py-1\">\r\n            <li *ngFor=\"let item of items; index as i\"\r\n                id=\"{{item.id || id + '_item' + i}}\"\r\n                class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n                [attr.disabled]=\"item.disabled\"\r\n                [hidden]=\"item.hidden\"\r\n                ecNavItemActive=\"is-selected\"\r\n                [ecNavItemActiveQueryParams]=\"item.queryParams\"\r\n                [ecNavItemActiveUrl]=\"item.url\"\r\n                [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\r\n                (routerLinkActivated)=\"selectItem($event, item)\"\r\n                [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': item?.display === 'heading'}\"\r\n                (click)=\"selectItem($event, item)\">\r\n\r\n                <a *ngIf=\"item.url && !item.externalLink\"\r\n                   id=\"{{item.id}}_link\"\r\n                   title=\"{{truncateItems ? item.label : ''}}\"\r\n                   class=\"item-wrapper\"\r\n                   [routerLink]=\"item.url\"\r\n                   [queryParams]=\"item.queryParams || null\"\r\n                   target=\"{{item.target || '_self'}}\">\r\n\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </a>\r\n\r\n                <a *ngIf=\"item.url && item.externalLink\"\r\n                   id=\"{{item.id}}_link\"\r\n                   title=\"{{truncateItems ? item.label : ''}}\"\r\n                   class=\"item-wrapper\"\r\n                   href=\"{{item.url}}\"\r\n                   target=\"{{item.target || '_self'}}\">\r\n\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </a>\r\n\r\n                <div *ngIf=\"!item.url\"\r\n                     title=\"{{truncateItems ? item.label : ''}}\"\r\n                     class=\"item-wrapper\">\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </div>\r\n            </li>\r\n        </ul>\r\n\r\n        <p class=\"no-data-message\">{{noDataText | translate}}</p>\r\n    </div>\r\n\r\n    <!-- Child menu (Rendered to the right) -->\r\n    <ec-menu *ngIf=\"selected?.items\"\r\n             id=\"{{id}}_child\"\r\n             class=\"child\"\r\n             [parent]=\"selected\"\r\n             [items]=\"selected?.items\"\r\n             [showNoItems]=\"true\"\r\n             [templateType]=\"templateType\"\r\n             [enableKeyNav]=\"true\"\r\n             [truncateItems]=\"truncateItems\"\r\n             (selectedChanged)=\"onSelection($event)\"\r\n             (menuClosed)=\"toggleChildMenu(false)\">\r\n    </ec-menu>\r\n</nav>\r\n\r\n<!-- 'label' Item Template -->\r\n<ng-template #label\r\n             let-item>\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'checkAndLabel' Item Template -->\r\n<ng-template #checkAndLabel\r\n             let-item>\r\n\r\n    <i class=\"ec-icon icon-check ec-icon-sm\" *ngIf=\"item.display !== 'heading'\"></i>\r\n\r\n    <i class=\"ec-icon {{item.icon}} ml-2\" *ngIf=\"item.icon\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'iconAndLabel' Item Template -->\r\n<ng-template #iconAndLabel\r\n             let-item>\r\n    <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\r\n    <i class=\"ec-icon {{item.icon}}\" *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-font-size-action);font-weight:400;background-color:var(--ec-menu-background-color, var(--ec-background-color))}:host.open>nav>.parent,:host.open>nav>.child{position:absolute;left:0;top:0;right:0;height:100%;transition:transform .25s ease}:host.open>nav>.parent{transform:translate(0)}:host.open>nav>.child{transform:translate(100%)}:host.open-active>nav>.parent{transform:translate(-100%)}:host.open-active>nav>.child{transform:translate(0)}:host(.bg-transparent){background-color:transparent}:host-context(.is-always-open){height:100%}:host-context(.is-always-open) .item-wrapper{padding-left:1rem;padding-right:1rem}nav{display:flex;position:relative;height:100%;overflow:hidden}.parent{display:flex;flex-direction:column;flex:auto;position:relative;max-width:100%}.parent>header{cursor:pointer}.parent>header.is-selected .item-wrapper,.parent>header.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}.parent>header:hover .item-wrapper{background-color:var(--ec-background-color-hover)}.parent.no-data ul{display:none}.parent.no-data .no-data-message{display:block}ul{padding:0;margin:0;list-style:none;flex:auto;height:100%;overflow-y:auto}ul li{cursor:pointer;padding:0 .25rem}ul li a{color:inherit;border-bottom:0;text-decoration:none}ul li.is-selected .item-wrapper,ul li.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}ul li:hover .item-wrapper{background-color:var(--ec-background-color-hover)}ul li:focus .item-wrapper{background-color:var(--ec-color-disabled-dark);position:relative;z-index:1;outline:none}ul li.is-disabled .item-wrapper{color:var(--ec-color-secondary-dark);opacity:.65}ul li.is-disabled,ul li.is-readonly{cursor:default}ul li.is-disabled .item-wrapper,ul li.is-readonly .item-wrapper{background-color:transparent;color:inherit}ul li.is-checked .icon-check{opacity:1}ul li.heading{cursor:default}ul li.heading .item-wrapper{background-color:transparent}ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider{border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.indent-1 .item-wrapper{padding-left:1.5rem}ul li.indent-2 .item-wrapper{padding-left:2.5rem}ul li.indent-3 .item-wrapper{padding-left:3.5rem}.item-wrapper{cursor:inherit;line-height:1.25rem;min-height:1.75rem;padding:.25rem .5rem;border-radius:var(--ec-border-radius);display:flex;color:inherit}.item-wrapper .label{margin-right:auto}.item-wrapper .label+.ec-icon{margin-left:.5rem}.item-wrapper .ec-icon{margin-top:calc((1.25rem - var(--ec-font-size-icon)) / 2);flex:none}.item-wrapper .ec-icon+.label{margin-left:.5rem}.item-wrapper .ec-icon-sm{margin-top:calc((1.25rem - calc(var(--ec-font-size-icon) * .75)) / 2)}.item-wrapper .icon-check{opacity:0}.no-data-message{display:none;text-align:center;padding:1rem;color:var(--ec-color-hint-dark);margin-bottom:0;font-size:var(--ec-font-size-body)}:host-context(ec-tree) ul{overflow-x:hidden}:host-context(ec-tree) li.is-selected,:host-context(ec-tree) li.is-highlighted{font-weight:700}:host-context(ec-tree) li.is-selected:not(:hover),:host-context(ec-tree) li.is-highlighted:not(:hover){background-color:transparent}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: WindowService }, { type: ScrollService }]; }, propDecorators: { id: [{
                 type: Input
             }], attrId: [{
@@ -7926,10 +7926,10 @@ class TreeComponent {
     }
 }
 TreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TreeComponent, selector: "ec-tree", inputs: { id: "id", treeTitle: "treeTitle", hideTreeHeader: "hideTreeHeader", treeItems: "treeItems", treeHierarchyHideRootNode: "treeHierarchyHideRootNode", treeHierarchy: "treeHierarchy", treeMenuMaintainSelectedItem: "treeMenuMaintainSelectedItem", customTreeMenuTemplate: "customTreeMenuTemplate", status: "status", type: "type", menuItems: "menuItems", menuStatus: "menuStatus", menuTemplateType: "menuTemplateType", preserveIconSpace: "preserveIconSpace", templateType: "templateType" }, outputs: { treeSelection: "treeSelection", getTreeItemChildren: "getTreeItemChildren" }, host: { properties: { "attr.id": "this.attrId" } }, viewQueries: [{ propertyName: "menuComponent", first: true, predicate: MenuComponent, descendants: true }, { propertyName: "hierarchyTreeComponent", first: true, predicate: HierarchyTreeComponent, descendants: true }], ngImport: i0, template: "<header *ngIf=\"!hideTreeHeader\"\r\n        class=\"flex-shrink d-flex align-items-center border-bottom bg-content pl-2 pr-1\">\r\n  <h2 id=\"{{id}}_title\"\r\n      class=\"flex-grow mr-2 text-heading-1\">{{treeTitle | translate}}</h2>\r\n  <ec-dropdown *ngIf=\"menuItems?.length\"\r\n               id=\"{{id}}_dropdown\"\r\n               class=\"flex-shrink\"\r\n               icon=\"icon-menu\"\r\n               [menuTemplateType]=\"menuTemplateType\"\r\n               menuPosition=\"left\"\r\n               [status]=\"menuStatus\"\r\n               [popupFixed]=\"true\"\r\n               [showArrow]=\"false\"\r\n               [menuMinWidth]=\"240\"\r\n               [items]=\"menuItems\">\r\n  </ec-dropdown>\r\n</header>\r\n\r\n<div class=\"flex-grow d-flex\"\r\n     ecOverlay\r\n     [status]=\"status?.status\"\r\n     [displayAsMask]=\"true\">\r\n  <ng-container *ngIf=\"type === 'menu'\">\r\n    <ec-menu [id]=\"id\"\r\n             [items]=\"treeItems\"\r\n             [templateType]=\"templateType\"\r\n             [maintainSelectedItem]=\"treeMenuMaintainSelectedItem\"\r\n             [truncateItems]=\"true\"\r\n             (selectedChanged)=\"onItemSelected($event)\"\r\n             [customMenuTemplate]=\"customTreeMenuTemplate ? customTreeMenuTemplate : undefined\"\r\n             [preserveIconSpace]=\"preserveIconSpace\"\r\n             class=\"flex-grow\">\r\n    </ec-menu>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"type === 'hierarchy'\">\r\n    <ec-hierarchy-tree [id]=\"id\"\r\n                       [rootNode]=\"treeHierarchy\"\r\n                       [hideRootNode]=\"treeHierarchyHideRootNode\"\r\n                       (getItemChildren)=\"onHierarchyGetItemChildren($event)\"\r\n                       (itemSelected)=\"onItemSelected($event)\"\r\n                       class=\"flex-grow d-flex\">\r\n    </ec-hierarchy-tree>\r\n  </ng-container>\r\n</div>", styles: [":host{display:flex;flex-direction:column}header{height:3rem}ec-dropdown.fill{height:3rem;width:3rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "menuClosed"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }, { kind: "component", type: HierarchyTreeComponent, selector: "ec-hierarchy-tree", inputs: ["id", "hideRootNode"], outputs: ["itemSelected"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+TreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TreeComponent, selector: "ec-tree", inputs: { id: "id", treeTitle: "treeTitle", hideTreeHeader: "hideTreeHeader", treeItems: "treeItems", treeHierarchyHideRootNode: "treeHierarchyHideRootNode", treeHierarchy: "treeHierarchy", treeMenuMaintainSelectedItem: "treeMenuMaintainSelectedItem", customTreeMenuTemplate: "customTreeMenuTemplate", status: "status", type: "type", menuItems: "menuItems", menuStatus: "menuStatus", menuTemplateType: "menuTemplateType", preserveIconSpace: "preserveIconSpace", templateType: "templateType" }, outputs: { treeSelection: "treeSelection", getTreeItemChildren: "getTreeItemChildren" }, host: { properties: { "attr.id": "this.attrId" } }, viewQueries: [{ propertyName: "menuComponent", first: true, predicate: MenuComponent, descendants: true }, { propertyName: "hierarchyTreeComponent", first: true, predicate: HierarchyTreeComponent, descendants: true }], ngImport: i0, template: "<header *ngIf=\"!hideTreeHeader\"\r\n        class=\"flex-shrink d-flex align-items-center\">\r\n  <h2 id=\"{{id}}_title\"\r\n      class=\"flex-grow mr-2 text-heading-1\">{{treeTitle | translate}}</h2>\r\n  <ec-dropdown *ngIf=\"menuItems?.length\"\r\n               id=\"{{id}}_dropdown\"\r\n               class=\"flex-shrink\"\r\n               icon=\"icon-menu\"\r\n               [menuTemplateType]=\"menuTemplateType\"\r\n               menuPosition=\"left\"\r\n               [status]=\"menuStatus\"\r\n               [popupFixed]=\"true\"\r\n               [showArrow]=\"false\"\r\n               [menuMinWidth]=\"240\"\r\n               [items]=\"menuItems\">\r\n  </ec-dropdown>\r\n</header>\r\n\r\n<div class=\"flex-grow d-flex\"\r\n     ecOverlay\r\n     [status]=\"status?.status\"\r\n     [displayAsMask]=\"true\">\r\n  <ng-container *ngIf=\"type === 'menu'\">\r\n    <ec-menu [id]=\"id\"\r\n             [items]=\"treeItems\"\r\n             [templateType]=\"templateType\"\r\n             [maintainSelectedItem]=\"treeMenuMaintainSelectedItem\"\r\n             [truncateItems]=\"true\"\r\n             (selectedChanged)=\"onItemSelected($event)\"\r\n             [customMenuTemplate]=\"customTreeMenuTemplate ? customTreeMenuTemplate : undefined\"\r\n             [preserveIconSpace]=\"preserveIconSpace\"\r\n             class=\"flex-grow\">\r\n    </ec-menu>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"type === 'hierarchy'\">\r\n    <ec-hierarchy-tree [id]=\"id\"\r\n                       [rootNode]=\"treeHierarchy\"\r\n                       [hideRootNode]=\"treeHierarchyHideRootNode\"\r\n                       (getItemChildren)=\"onHierarchyGetItemChildren($event)\"\r\n                       (itemSelected)=\"onItemSelected($event)\"\r\n                       class=\"flex-grow d-flex\">\r\n    </ec-hierarchy-tree>\r\n  </ng-container>\r\n</div>", styles: [":host{display:flex;flex-direction:column}header{height:var(--ec-tree-height-header, 3rem);background-color:var(--ec-tree-background-color, var(--ec-background-color));padding:var(--ec-tree-padding-header, 0 .25rem 0 .5rem);border-bottom:var(--ec-tree-border-bottom-header, var(--ec-border-width) solid var(--ec-border-color))}ec-dropdown.fill{height:var(--ec-tree-height-header, 3rem);width:var(--ec-tree-height-header, 3rem)}ec-menu{--ec-menu-background-color: var(--ec-tree-background-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "menuClosed"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }, { kind: "component", type: HierarchyTreeComponent, selector: "ec-hierarchy-tree", inputs: ["id", "hideRootNode"], outputs: ["itemSelected"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-tree', template: "<header *ngIf=\"!hideTreeHeader\"\r\n        class=\"flex-shrink d-flex align-items-center border-bottom bg-content pl-2 pr-1\">\r\n  <h2 id=\"{{id}}_title\"\r\n      class=\"flex-grow mr-2 text-heading-1\">{{treeTitle | translate}}</h2>\r\n  <ec-dropdown *ngIf=\"menuItems?.length\"\r\n               id=\"{{id}}_dropdown\"\r\n               class=\"flex-shrink\"\r\n               icon=\"icon-menu\"\r\n               [menuTemplateType]=\"menuTemplateType\"\r\n               menuPosition=\"left\"\r\n               [status]=\"menuStatus\"\r\n               [popupFixed]=\"true\"\r\n               [showArrow]=\"false\"\r\n               [menuMinWidth]=\"240\"\r\n               [items]=\"menuItems\">\r\n  </ec-dropdown>\r\n</header>\r\n\r\n<div class=\"flex-grow d-flex\"\r\n     ecOverlay\r\n     [status]=\"status?.status\"\r\n     [displayAsMask]=\"true\">\r\n  <ng-container *ngIf=\"type === 'menu'\">\r\n    <ec-menu [id]=\"id\"\r\n             [items]=\"treeItems\"\r\n             [templateType]=\"templateType\"\r\n             [maintainSelectedItem]=\"treeMenuMaintainSelectedItem\"\r\n             [truncateItems]=\"true\"\r\n             (selectedChanged)=\"onItemSelected($event)\"\r\n             [customMenuTemplate]=\"customTreeMenuTemplate ? customTreeMenuTemplate : undefined\"\r\n             [preserveIconSpace]=\"preserveIconSpace\"\r\n             class=\"flex-grow\">\r\n    </ec-menu>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"type === 'hierarchy'\">\r\n    <ec-hierarchy-tree [id]=\"id\"\r\n                       [rootNode]=\"treeHierarchy\"\r\n                       [hideRootNode]=\"treeHierarchyHideRootNode\"\r\n                       (getItemChildren)=\"onHierarchyGetItemChildren($event)\"\r\n                       (itemSelected)=\"onItemSelected($event)\"\r\n                       class=\"flex-grow d-flex\">\r\n    </ec-hierarchy-tree>\r\n  </ng-container>\r\n</div>", styles: [":host{display:flex;flex-direction:column}header{height:3rem}ec-dropdown.fill{height:3rem;width:3rem}\n"] }]
+            args: [{ selector: 'ec-tree', template: "<header *ngIf=\"!hideTreeHeader\"\r\n        class=\"flex-shrink d-flex align-items-center\">\r\n  <h2 id=\"{{id}}_title\"\r\n      class=\"flex-grow mr-2 text-heading-1\">{{treeTitle | translate}}</h2>\r\n  <ec-dropdown *ngIf=\"menuItems?.length\"\r\n               id=\"{{id}}_dropdown\"\r\n               class=\"flex-shrink\"\r\n               icon=\"icon-menu\"\r\n               [menuTemplateType]=\"menuTemplateType\"\r\n               menuPosition=\"left\"\r\n               [status]=\"menuStatus\"\r\n               [popupFixed]=\"true\"\r\n               [showArrow]=\"false\"\r\n               [menuMinWidth]=\"240\"\r\n               [items]=\"menuItems\">\r\n  </ec-dropdown>\r\n</header>\r\n\r\n<div class=\"flex-grow d-flex\"\r\n     ecOverlay\r\n     [status]=\"status?.status\"\r\n     [displayAsMask]=\"true\">\r\n  <ng-container *ngIf=\"type === 'menu'\">\r\n    <ec-menu [id]=\"id\"\r\n             [items]=\"treeItems\"\r\n             [templateType]=\"templateType\"\r\n             [maintainSelectedItem]=\"treeMenuMaintainSelectedItem\"\r\n             [truncateItems]=\"true\"\r\n             (selectedChanged)=\"onItemSelected($event)\"\r\n             [customMenuTemplate]=\"customTreeMenuTemplate ? customTreeMenuTemplate : undefined\"\r\n             [preserveIconSpace]=\"preserveIconSpace\"\r\n             class=\"flex-grow\">\r\n    </ec-menu>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"type === 'hierarchy'\">\r\n    <ec-hierarchy-tree [id]=\"id\"\r\n                       [rootNode]=\"treeHierarchy\"\r\n                       [hideRootNode]=\"treeHierarchyHideRootNode\"\r\n                       (getItemChildren)=\"onHierarchyGetItemChildren($event)\"\r\n                       (itemSelected)=\"onItemSelected($event)\"\r\n                       class=\"flex-grow d-flex\">\r\n    </ec-hierarchy-tree>\r\n  </ng-container>\r\n</div>", styles: [":host{display:flex;flex-direction:column}header{height:var(--ec-tree-height-header, 3rem);background-color:var(--ec-tree-background-color, var(--ec-background-color));padding:var(--ec-tree-padding-header, 0 .25rem 0 .5rem);border-bottom:var(--ec-tree-border-bottom-header, var(--ec-border-width) solid var(--ec-border-color))}ec-dropdown.fill{height:var(--ec-tree-height-header, 3rem);width:var(--ec-tree-height-header, 3rem)}ec-menu{--ec-menu-background-color: var(--ec-tree-background-color)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { attrId: [{
                 type: HostBinding,
                 args: ['attr.id']