@energycap/components 0.43.5-vch-test.20250515-1736 → 0.43.6-ECAP-29175-UpdateModuleBarStyling.20250605-1342

package/fesm2022/energycap-components.mjs

@@ -3070,11 +3070,11 @@ class MenuComponent {
      */
     static getSelectableItems(items) {
         return items.reduce((selectableItems, item) => {
-            if (item.display !== 'heading' && item.display !== 'divided-section') {
+            if (item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {
                 selectableItems.push(item);
             }
             else if (item.items) {
-                selectableItems.push(...item.items.filter(childItem => childItem.display !== 'heading' && childItem.display !== 'divided-section'));
+                selectableItems.push(...item.items.filter(childItem => childItem.display !== 'heading' && childItem.display !== 'divided-section' && childItem.display !== 'heading-divided-section'));
             }
             return selectableItems;
         }, []);
@@ -3098,7 +3098,7 @@ class MenuComponent {
                     return `${menuComponentId}_item${i}`;
                 }
                 // If the item is a heading or divided section, check its children
-                if (itemInList.items && (itemInList.display === 'heading' || itemInList.display === 'divided-section')) {
+                if (itemInList.items && (itemInList.display === 'heading' || itemInList.display === 'divided-section' || itemInList.display === 'heading-divided-section')) {
                     for (let j = 0; j < itemInList.items.length; j++) {
                         const childItem = itemInList.items[j];
                         // Fall back to checking only the label if the item doesn't have an id
@@ -3258,7 +3258,7 @@ class MenuComponent {
                 if (item.onClick) {
                     item.onClick(item, false);
                 }
-                if (item.items && item.display !== 'heading' && item.display !== 'divided-section') {
+                if (item.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {
                     this.toggleChildMenu(true);
                 }
                 else {
@@ -3305,7 +3305,7 @@ class MenuComponent {
      * @param item The selected item
      */
     onSelection(item) {
-        if (item.display !== 'heading' && item.display !== 'divided-section') {
+        if (item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {
             this.selectedChanged.emit(item);
         }
     }
@@ -3476,11 +3476,11 @@ class MenuComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: WindowService }, { token: ScrollService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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 }, { propertyName: "iconLabelCaptionTemplate", first: true, predicate: ["iconLabelCaption"], descendants: true, static: true }], usesOnChanges: 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\"\r\n            class=\"py-1\">\r\n            <ng-container *ngFor=\"let item of items; index as i\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\r\n\r\n                <!-- Show child items under parent item if the item is a heading or divided-section -->\r\n                <ng-container\r\n                              *ngIf=\"item.items?.length && (item.display === 'heading' || item.display === 'divided-section')\">\r\n                    <ng-container *ngFor=\"let childItem of item.items; index as j; first as isFirst; last as isLast\"\r\n                                  [ngTemplateOutlet]=\"itemTemplate\"\r\n                                  [ngTemplateOutletContext]=\"{$implicit: childItem, index: i + '-' + j, isDividedSectionChild: item.display === 'divided-section', isFirst: isFirst, isLast: isLast}\">\r\n                    </ng-container>\r\n                </ng-container>\r\n            </ng-container>\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 && selected?.display !== 'heading' && selected?.display !== 'divided-section'\"\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<ng-template #itemTemplate\r\n             let-item\r\n             let-i=\"index\"\r\n             let-isDividedSectionChild=\"isDividedSectionChild\"\r\n             let-isFirst=\"isFirst\"\r\n             let-isLast=\"isLast\">\r\n    <li *ngIf=\"!(item.hideIfNoItems && !item.items?.length) && item.display !== 'divided-section'\"\r\n        id=\"{{item.id || id + '_item' + i}}\"\r\n        class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n        [class.divider-top]=\"item.display === 'divider-top' || (isDividedSectionChild && isFirst)\"\r\n        [class.divider]=\"item.display === 'divider' || (isDividedSectionChild && isLast)\"\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            <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            <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</ng-template>\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\">\r\n        {{item.label}}\r\n        <ng-container *ngIf=\"item.helpPopover\"\r\n                      [ngTemplateOutlet]=\"helpPopover\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n        </ng-container>\r\n    </span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section'\"></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\"\r\n       *ngIf=\"item.display !== 'heading'\"></i>\r\n\r\n    <i class=\"ec-icon {{item.icon}} ml-2\"\r\n       *ngIf=\"item.icon\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">\r\n        {{item.label}}\r\n        <ng-container *ngIf=\"item.helpPopover\"\r\n                      [ngTemplateOutlet]=\"helpPopover\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n        </ng-container>\r\n    </span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section'\"></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}}\"\r\n       *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\">\r\n        {{item.label}}\r\n        <ng-container *ngIf=\"item.helpPopover\"\r\n                      [ngTemplateOutlet]=\"helpPopover\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n        </ng-container>\r\n    </span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section'\"></i>\r\n</ng-template>\r\n\r\n<ng-template #iconLabelCaption\r\n             let-item>\r\n    <i class=\"ec-icon {{item.icon}}\"\r\n       *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n    <div *ngIf=\"item.display !== 'heading'\"\r\n         class=\"label flex-grow\">\r\n        <div id=\"{{item.id}}_label\"\r\n             class=\"text-body-1\"\r\n             [class.text-truncate]=\"truncateItems\">\r\n            {{item.label}}\r\n            <ng-container *ngIf=\"item.helpPopover\"\r\n                          [ngTemplateOutlet]=\"helpPopover\"\r\n                          [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n            </ng-container>\r\n        </div>\r\n        <div id=\"{{item.id}}_caption\"\r\n             *ngIf=\"item.caption\"\r\n             class=\"text-caption-1\"\r\n             [class.text-truncate]=\"truncateItems\"\r\n             [innerHTML]=\"item.caption\"></div>\r\n    </div>\r\n    <h3 *ngIf=\"item.display === 'heading'\"\r\n        class=\"flex-grow text-heading-3 align-self-center\"\r\n        [class.text-truncate]=\"truncateItems\">\r\n        {{item.label}}\r\n        <ng-container *ngIf=\"item.helpPopover\"\r\n                      [ngTemplateOutlet]=\"helpPopover\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n        </ng-container>\r\n    </h3>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270 align-self-center\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section'\"></i>\r\n</ng-template>\r\n\r\n<ng-template #helpPopover\r\n             let-item>\r\n    <ec-help-popover id=\"{{item.id}}_helpPopover\"\r\n                     class=\"d-inline-block my-n3 mx-n1\"\r\n                     text=\"{{item.helpPopover | translate}}\"\r\n                     contentPosition=\"{{item.helpPopoverPosition ?? 'top-left'}}\">\r\n    </ec-help-popover>\r\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-menu-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{outline:none;background-color:var(--ec-color-disabled-dark);position:relative;z-index:1}ul li.is-disabled .item-wrapper{color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled)}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:not(:last-child){border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.divider-top:not(:first-child):not(.divider+.divider-top){border-top:1px solid var(--ec-border-color);padding-top:.25rem;margin-top:.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;color:var(--ec-menu-color-highlighted, inherit)}: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$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "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: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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 }, { propertyName: "iconLabelCaptionTemplate", first: true, predicate: ["iconLabelCaption"], descendants: true, static: true }], usesOnChanges: 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\"\r\n            class=\"py-1\">\r\n            <ng-container *ngFor=\"let item of items; index as i\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\r\n\r\n                <!-- Show child items under parent item if the item is a heading or divided-section -->\r\n                <ng-container\r\n                              *ngIf=\"item.items?.length && (item.display === 'heading' || item.display === 'divided-section' || item.display === 'heading-divided-section')\">\r\n                    <ng-container *ngFor=\"let childItem of item.items; index as j; first as isFirst; last as isLast\"\r\n                                  [ngTemplateOutlet]=\"itemTemplate\"\r\n                                  [ngTemplateOutletContext]=\"{$implicit: childItem, index: i + '-' + j, isDividedSectionChild: ( item.display === 'divided-section' || item.display === 'heading-divided-section'), isFirst: isFirst, isLast: isLast}\">\r\n                    </ng-container>\r\n                </ng-container>\r\n            </ng-container>\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 && selected?.display !== 'heading' && selected?.display !== 'divided-section' && selected?.display !== 'heading-divided-section'\"\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<ng-template #itemTemplate\r\n             let-item\r\n             let-i=\"index\"\r\n             let-isDividedSectionChild=\"isDividedSectionChild\"\r\n             let-isFirst=\"isFirst\"\r\n             let-isLast=\"isLast\">\r\n    <li *ngIf=\"!(item.hideIfNoItems && !item.items?.length) && item.display !== 'divided-section'\"\r\n        id=\"{{item.id || id + '_item' + i}}\"\r\n        class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n        [class.divider-top]=\"item.display === 'divider-top' || item.display === 'heading-divided-section' || (isDividedSectionChild && isFirst && item.display === 'heading-divided-section')\"\r\n        [class.divider]=\"item.display === 'divider' || (isDividedSectionChild && isLast)\"\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'  && item?.display !== 'heading-divided-section') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': (item?.display === 'heading' || item?.display === 'heading-divided-section')}\"\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            <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            <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</ng-template>\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\">\r\n        {{item.label}}\r\n        <ng-container *ngIf=\"item.helpPopover\"\r\n                      [ngTemplateOutlet]=\"helpPopover\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n        </ng-container>\r\n    </span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section'\"></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\"\r\n       *ngIf=\"item.display !== 'heading' || item.display !== 'heading-divided-section'\"></i>\r\n\r\n    <i class=\"ec-icon {{item.icon}} ml-2\"\r\n       *ngIf=\"item.icon\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">\r\n        {{item.label}}\r\n        <ng-container *ngIf=\"item.helpPopover\"\r\n                      [ngTemplateOutlet]=\"helpPopover\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n        </ng-container>\r\n    </span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section'\"></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}}\"\r\n       *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\">\r\n        {{item.label}}\r\n        <ng-container *ngIf=\"item.helpPopover\"\r\n                      [ngTemplateOutlet]=\"helpPopover\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n        </ng-container>\r\n    </span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section'\"></i>\r\n</ng-template>\r\n\r\n<ng-template #iconLabelCaption\r\n             let-item>\r\n    <i class=\"ec-icon {{item.icon}}\"\r\n       *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n    <div *ngIf=\"item.display !== 'heading' || item.display !== 'heading-divided-section'\"\r\n         class=\"label flex-grow\">\r\n        <div id=\"{{item.id}}_label\"\r\n             class=\"text-body-1\"\r\n             [class.text-truncate]=\"truncateItems\">\r\n            {{item.label}}\r\n            <ng-container *ngIf=\"item.helpPopover\"\r\n                          [ngTemplateOutlet]=\"helpPopover\"\r\n                          [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n            </ng-container>\r\n        </div>\r\n        <div id=\"{{item.id}}_caption\"\r\n             *ngIf=\"item.caption\"\r\n             class=\"text-caption-1\"\r\n             [class.text-truncate]=\"truncateItems\"\r\n             [innerHTML]=\"item.caption\"></div>\r\n    </div>\r\n    <h3 *ngIf=\"item.display === 'heading' || item.display === 'heading-divided-section'\"\r\n        class=\"flex-grow text-heading-3 align-self-center\"\r\n        [class.text-truncate]=\"truncateItems\">\r\n        {{item.label}}\r\n        <ng-container *ngIf=\"item.helpPopover\"\r\n                      [ngTemplateOutlet]=\"helpPopover\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n        </ng-container>\r\n    </h3>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270 align-self-center\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section'\"></i>\r\n</ng-template>\r\n\r\n<ng-template #helpPopover\r\n             let-item>\r\n    <ec-help-popover id=\"{{item.id}}_helpPopover\"\r\n                     class=\"d-inline-block my-n3 mx-n1\"\r\n                     text=\"{{item.helpPopover | translate}}\"\r\n                     contentPosition=\"{{item.helpPopoverPosition ?? 'top-left'}}\">\r\n    </ec-help-popover>\r\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-menu-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{outline:none;background-color:var(--ec-color-disabled-dark);position:relative;z-index:1}ul li.is-disabled .item-wrapper{color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled)}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-divided-section,ul li.heading{cursor:default}ul li.heading-divided-section .item-wrapper,ul li.heading .item-wrapper{background-color:transparent}ul li.heading-divided-section:not(:first-child),ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider:not(:last-child){border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.divider-top:not(:first-child):not(.divider+.divider-top){border-top:1px solid var(--ec-border-color);padding-top:.25rem;margin-top:.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;color:var(--ec-menu-color-highlighted, inherit)}: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$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "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: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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\"\r\n            class=\"py-1\">\r\n            <ng-container *ngFor=\"let item of items; index as i\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\r\n\r\n                <!-- Show child items under parent item if the item is a heading or divided-section -->\r\n                <ng-container\r\n                              *ngIf=\"item.items?.length && (item.display === 'heading' || item.display === 'divided-section')\">\r\n                    <ng-container *ngFor=\"let childItem of item.items; index as j; first as isFirst; last as isLast\"\r\n                                  [ngTemplateOutlet]=\"itemTemplate\"\r\n                                  [ngTemplateOutletContext]=\"{$implicit: childItem, index: i + '-' + j, isDividedSectionChild: item.display === 'divided-section', isFirst: isFirst, isLast: isLast}\">\r\n                    </ng-container>\r\n                </ng-container>\r\n            </ng-container>\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 && selected?.display !== 'heading' && selected?.display !== 'divided-section'\"\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<ng-template #itemTemplate\r\n             let-item\r\n             let-i=\"index\"\r\n             let-isDividedSectionChild=\"isDividedSectionChild\"\r\n             let-isFirst=\"isFirst\"\r\n             let-isLast=\"isLast\">\r\n    <li *ngIf=\"!(item.hideIfNoItems && !item.items?.length) && item.display !== 'divided-section'\"\r\n        id=\"{{item.id || id + '_item' + i}}\"\r\n        class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n        [class.divider-top]=\"item.display === 'divider-top' || (isDividedSectionChild && isFirst)\"\r\n        [class.divider]=\"item.display === 'divider' || (isDividedSectionChild && isLast)\"\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            <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            <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</ng-template>\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\">\r\n        {{item.label}}\r\n        <ng-container *ngIf=\"item.helpPopover\"\r\n                      [ngTemplateOutlet]=\"helpPopover\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n        </ng-container>\r\n    </span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section'\"></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\"\r\n       *ngIf=\"item.display !== 'heading'\"></i>\r\n\r\n    <i class=\"ec-icon {{item.icon}} ml-2\"\r\n       *ngIf=\"item.icon\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">\r\n        {{item.label}}\r\n        <ng-container *ngIf=\"item.helpPopover\"\r\n                      [ngTemplateOutlet]=\"helpPopover\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n        </ng-container>\r\n    </span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section'\"></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}}\"\r\n       *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\">\r\n        {{item.label}}\r\n        <ng-container *ngIf=\"item.helpPopover\"\r\n                      [ngTemplateOutlet]=\"helpPopover\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n        </ng-container>\r\n    </span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section'\"></i>\r\n</ng-template>\r\n\r\n<ng-template #iconLabelCaption\r\n             let-item>\r\n    <i class=\"ec-icon {{item.icon}}\"\r\n       *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n    <div *ngIf=\"item.display !== 'heading'\"\r\n         class=\"label flex-grow\">\r\n        <div id=\"{{item.id}}_label\"\r\n             class=\"text-body-1\"\r\n             [class.text-truncate]=\"truncateItems\">\r\n            {{item.label}}\r\n            <ng-container *ngIf=\"item.helpPopover\"\r\n                          [ngTemplateOutlet]=\"helpPopover\"\r\n                          [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n            </ng-container>\r\n        </div>\r\n        <div id=\"{{item.id}}_caption\"\r\n             *ngIf=\"item.caption\"\r\n             class=\"text-caption-1\"\r\n             [class.text-truncate]=\"truncateItems\"\r\n             [innerHTML]=\"item.caption\"></div>\r\n    </div>\r\n    <h3 *ngIf=\"item.display === 'heading'\"\r\n        class=\"flex-grow text-heading-3 align-self-center\"\r\n        [class.text-truncate]=\"truncateItems\">\r\n        {{item.label}}\r\n        <ng-container *ngIf=\"item.helpPopover\"\r\n                      [ngTemplateOutlet]=\"helpPopover\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n        </ng-container>\r\n    </h3>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270 align-self-center\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section'\"></i>\r\n</ng-template>\r\n\r\n<ng-template #helpPopover\r\n             let-item>\r\n    <ec-help-popover id=\"{{item.id}}_helpPopover\"\r\n                     class=\"d-inline-block my-n3 mx-n1\"\r\n                     text=\"{{item.helpPopover | translate}}\"\r\n                     contentPosition=\"{{item.helpPopoverPosition ?? 'top-left'}}\">\r\n    </ec-help-popover>\r\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-menu-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{outline:none;background-color:var(--ec-color-disabled-dark);position:relative;z-index:1}ul li.is-disabled .item-wrapper{color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled)}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:not(:last-child){border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.divider-top:not(:first-child):not(.divider+.divider-top){border-top:1px solid var(--ec-border-color);padding-top:.25rem;margin-top:.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;color:var(--ec-menu-color-highlighted, inherit)}: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\"\r\n            class=\"py-1\">\r\n            <ng-container *ngFor=\"let item of items; index as i\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\r\n\r\n                <!-- Show child items under parent item if the item is a heading or divided-section -->\r\n                <ng-container\r\n                              *ngIf=\"item.items?.length && (item.display === 'heading' || item.display === 'divided-section' || item.display === 'heading-divided-section')\">\r\n                    <ng-container *ngFor=\"let childItem of item.items; index as j; first as isFirst; last as isLast\"\r\n                                  [ngTemplateOutlet]=\"itemTemplate\"\r\n                                  [ngTemplateOutletContext]=\"{$implicit: childItem, index: i + '-' + j, isDividedSectionChild: ( item.display === 'divided-section' || item.display === 'heading-divided-section'), isFirst: isFirst, isLast: isLast}\">\r\n                    </ng-container>\r\n                </ng-container>\r\n            </ng-container>\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 && selected?.display !== 'heading' && selected?.display !== 'divided-section' && selected?.display !== 'heading-divided-section'\"\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<ng-template #itemTemplate\r\n             let-item\r\n             let-i=\"index\"\r\n             let-isDividedSectionChild=\"isDividedSectionChild\"\r\n             let-isFirst=\"isFirst\"\r\n             let-isLast=\"isLast\">\r\n    <li *ngIf=\"!(item.hideIfNoItems && !item.items?.length) && item.display !== 'divided-section'\"\r\n        id=\"{{item.id || id + '_item' + i}}\"\r\n        class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n        [class.divider-top]=\"item.display === 'divider-top' || item.display === 'heading-divided-section' || (isDividedSectionChild && isFirst && item.display === 'heading-divided-section')\"\r\n        [class.divider]=\"item.display === 'divider' || (isDividedSectionChild && isLast)\"\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'  && item?.display !== 'heading-divided-section') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': (item?.display === 'heading' || item?.display === 'heading-divided-section')}\"\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            <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            <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</ng-template>\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\">\r\n        {{item.label}}\r\n        <ng-container *ngIf=\"item.helpPopover\"\r\n                      [ngTemplateOutlet]=\"helpPopover\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n        </ng-container>\r\n    </span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section'\"></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\"\r\n       *ngIf=\"item.display !== 'heading' || item.display !== 'heading-divided-section'\"></i>\r\n\r\n    <i class=\"ec-icon {{item.icon}} ml-2\"\r\n       *ngIf=\"item.icon\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">\r\n        {{item.label}}\r\n        <ng-container *ngIf=\"item.helpPopover\"\r\n                      [ngTemplateOutlet]=\"helpPopover\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n        </ng-container>\r\n    </span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section'\"></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}}\"\r\n       *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\">\r\n        {{item.label}}\r\n        <ng-container *ngIf=\"item.helpPopover\"\r\n                      [ngTemplateOutlet]=\"helpPopover\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n        </ng-container>\r\n    </span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section'\"></i>\r\n</ng-template>\r\n\r\n<ng-template #iconLabelCaption\r\n             let-item>\r\n    <i class=\"ec-icon {{item.icon}}\"\r\n       *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n    <div *ngIf=\"item.display !== 'heading' || item.display !== 'heading-divided-section'\"\r\n         class=\"label flex-grow\">\r\n        <div id=\"{{item.id}}_label\"\r\n             class=\"text-body-1\"\r\n             [class.text-truncate]=\"truncateItems\">\r\n            {{item.label}}\r\n            <ng-container *ngIf=\"item.helpPopover\"\r\n                          [ngTemplateOutlet]=\"helpPopover\"\r\n                          [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n            </ng-container>\r\n        </div>\r\n        <div id=\"{{item.id}}_caption\"\r\n             *ngIf=\"item.caption\"\r\n             class=\"text-caption-1\"\r\n             [class.text-truncate]=\"truncateItems\"\r\n             [innerHTML]=\"item.caption\"></div>\r\n    </div>\r\n    <h3 *ngIf=\"item.display === 'heading' || item.display === 'heading-divided-section'\"\r\n        class=\"flex-grow text-heading-3 align-self-center\"\r\n        [class.text-truncate]=\"truncateItems\">\r\n        {{item.label}}\r\n        <ng-container *ngIf=\"item.helpPopover\"\r\n                      [ngTemplateOutlet]=\"helpPopover\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n        </ng-container>\r\n    </h3>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270 align-self-center\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section'\"></i>\r\n</ng-template>\r\n\r\n<ng-template #helpPopover\r\n             let-item>\r\n    <ec-help-popover id=\"{{item.id}}_helpPopover\"\r\n                     class=\"d-inline-block my-n3 mx-n1\"\r\n                     text=\"{{item.helpPopover | translate}}\"\r\n                     contentPosition=\"{{item.helpPopoverPosition ?? 'top-left'}}\">\r\n    </ec-help-popover>\r\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-menu-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{outline:none;background-color:var(--ec-color-disabled-dark);position:relative;z-index:1}ul li.is-disabled .item-wrapper{color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled)}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-divided-section,ul li.heading{cursor:default}ul li.heading-divided-section .item-wrapper,ul li.heading .item-wrapper{background-color:transparent}ul li.heading-divided-section:not(:first-child),ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider:not(:last-child){border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.divider-top:not(:first-child):not(.divider+.divider-top){border-top:1px solid var(--ec-border-color);padding-top:.25rem;margin-top:.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;color:var(--ec-menu-color-highlighted, inherit)}:host-context(ec-tree) li.is-selected:not(:hover),:host-context(ec-tree) li.is-highlighted:not(:hover){background-color:transparent}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: WindowService }, { type: ScrollService }], propDecorators: { id: [{
                 type: Input
             }], attrId: [{
@@ -9788,7 +9788,8 @@ class HierarchyTreeComponent extends HierarchyBase {
     constructor(scrollService, injector) {
         super(injector);
         this.scrollService = scrollService;
-        // test 
+        /** Allows the root node to be collapsible with a toggle */
+        this.collapsibleRootNode = false;
         /** The value of the id attribute of the tree's root HTMLUListElement, suffixed with '_root' */
         this.id = 'HierarchyTree';
         /** Emits a HierarchyItem whenever one is selected by clicking */
@@ -9822,12 +9823,14 @@ class HierarchyTreeComponent extends HierarchyBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HierarchyTreeComponent, deps: [{ token: ScrollService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HierarchyTreeComponent, selector: "ec-hierarchy-tree", inputs: { id: "id", hideRootNode: "hideRootNode", customItemTemplate: "customItemTemplate" }, outputs: { itemSelected: "itemSelected" }, usesInheritance: true, ngImport: i0, template: "<ul id=\"{{scrollContainerId}}\"\r\n    class=\"flex-grow scroll-y py-1\">\r\n\r\n  <li *ngIf=\"!hideRootNode && rootNode\">\r\n    <div class=\"item-wrapper\"\r\n         title=\"{{rootNode?.tooltip ?? rootNode?.label}}\"\r\n         [ngClass]=\"{'is-heading': rootNode?.display === 'heading'}\"\r\n         ecNavItemActive=\"is-selected\"\r\n         [ecNavItemActiveUrl]=\"rootNode?.url\"\r\n         [ecNavItemActiveExactMatch]='rootNode?.isActiveExactMatch'>\r\n      <a id=\"rootNode_{{rootNode?.id}}_link\"\r\n         class=\"item flex-grow d-flex align-items-center\"\r\n         routerLink=\"{{rootNode?.url}}\"\r\n         [queryParams]=\"rootNode?.queryParams\">\r\n        <ng-container *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: rootNode }\"></ng-container>\r\n      </a>\r\n    </div>\r\n  </li>\r\n\r\n  <ng-template #hierarchyView\r\n               let-items>\r\n    <li *ngFor=\"let item of items; index as index; first as isFirst\"\r\n        [ngClass]=\"{'divider': item.display === 'divider'}\"\r\n        id=\"treeItem_{{item.id}}\">\r\n      <div class=\"item-wrapper\"\r\n           title=\"{{item.tooltip ?? item.label}}\"\r\n           [ngClass]=\"{'is-heading': item.display === 'heading'}\"\r\n           ecNavItemActive=\"is-selected\"\r\n           [ecNavItemActiveUrl]=\"item.url\"\r\n           [ecNavItemActiveExactMatch]=\"item.isActiveExactMatch\"\r\n           [ecNavItemActiveQueryParams]=\"item.queryParams\">\r\n\r\n        <!-- This element provides the indentation for each level -->\r\n        <span id=\"indent_{{item.id}}\"\r\n              *ngIf=\"!item.noIndent\"\r\n              class=\"d-block h-100\"\r\n              [style.width.px]=\"(indent) * (item.level - 1) + (item.level * 4) + (item.hasChildren ? 0 : indent)\">\r\n        </span>\r\n\r\n        <!-- Toggle the button icon to be a spinner when item.status is pending -->\r\n        <ec-collapsible-toggle id=\"toggle_{{item.id}}\"\r\n                               class=\"flex-shrink\"\r\n                               [style.width.px]=\"indent\"\r\n                               *ngIf=\"item.hasChildren && !item.hideToggle\"\r\n                               [hidden]=\"item.status === 'pending'\"\r\n                               [expanded]=\"item.expanded\"\r\n                               (expandedChange)=\"toggleItemClicked(item, $event)\">\r\n        </ec-collapsible-toggle>\r\n\r\n        <i class=\"ec-icon icon-loading my-1\"\r\n           [hidden]=\"item.status !== 'pending'\"></i>\r\n\r\n        <a id=\"treeItem_{{item.id}}_link\"\r\n           class=\"item\"\r\n           *ngIf=\"item.url\"\r\n           (click)=\"selectItem(item)\"\r\n           [routerLink]=\"item.url\"\r\n           [queryParams]=\"item.queryParams\"\r\n           [queryParamsHandling]=\"item.queryParamsHandling || ''\">\r\n           <ng-container *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: item }\"></ng-container>\r\n        </a>\r\n        <div id=\"treeItem_{{item.id}}_heading\"\r\n             class=\"item\"\r\n             *ngIf=\"!item.url\"\r\n             (click)=\"selectItem(item)\">\r\n             <ng-container *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: item }\"></ng-container>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <ul *ngIf=\"item.children.length > 0 && item.expanded\">\r\n        <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: item.children }\"></ng-container>\r\n      </ul>\r\n    </li>\r\n  </ng-template>\r\n\r\n  <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: rootNode?.children }\"></ng-container>\r\n</ul>\r\n\r\n<ng-template #defaultItemTemplate\r\n             let-item>\r\n  <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\r\n     [attr.title]=\"item.iconTooltip\"\r\n     *ngIf=\"item.icon\"></i>\r\n  <span class=\"mx-1 text-truncate\">{{item.label}}</span>\r\n</ng-template>", styles: [":host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));background-color:var(--ec-menu-background-color, var(--ec-background-color))}ul{padding:0;margin:0;list-style:none;overflow-x:hidden}ul li{white-space:nowrap;padding:0}ul li.divider{border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul .item-wrapper{display:flex;align-items:center;padding:0 .25rem;margin:0 .25rem;height:1.75rem;border-radius:var(--ec-border-radius)}ul .item-wrapper.is-heading{cursor:pointer;color:var(--ec-color-hint-dark);text-transform:uppercase;font-weight:var(--ec-font-weight-bold);font-size:var(--ec-font-size-label)}ul .item-wrapper:hover{background-color:var(--ec-background-color-hover)}ul .item-wrapper.is-selected{font-weight:700}ul .item-wrapper a{text-decoration:none}ul .item{color:inherit;display:flex;align-items:center;flex:1 1;min-height:0;min-width:0}\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$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NavItemActiveDirective, selector: "[ecNavItemActive]", inputs: ["ecNavItemActive", "ecNavItemActiveExactMatch", "ecNavItemActiveQueryParams", "ecNavItemActiveUrl"], outputs: ["routerLinkActivated"] }, { kind: "component", type: CollapsibleToggleComponent, selector: "ec-collapsible-toggle", inputs: ["id", "expanded", "tabindex"], outputs: ["expandedChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: HierarchyTreeComponent, selector: "ec-hierarchy-tree", inputs: { collapsibleRootNode: "collapsibleRootNode", id: "id", hideRootNode: "hideRootNode", customItemTemplate: "customItemTemplate" }, outputs: { itemSelected: "itemSelected" }, usesInheritance: true, ngImport: i0, template: "<ul id=\"{{scrollContainerId}}\"\r\n    class=\"flex-grow scroll-y py-1\">\r\n\r\n  <li *ngIf=\"!hideRootNode && rootNode\">\r\n    <div class=\"item-wrapper\"\r\n         title=\"{{rootNode?.tooltip ?? rootNode?.label}}\"\r\n         [ngClass]=\"{'is-heading': rootNode?.display === 'heading'}\"\r\n         ecNavItemActive=\"is-selected\"\r\n         [ecNavItemActiveUrl]=\"rootNode?.url\"\r\n         [ecNavItemActiveExactMatch]='rootNode?.isActiveExactMatch'>\r\n\r\n      <ec-collapsible-toggle id=\"toggle_{{rootNode.id}}\"\r\n                             class=\"flex-shrink\"\r\n                             [style.width.px]=\"indent\"\r\n                             *ngIf=\"rootNode.hasChildren && collapsibleRootNode\"\r\n                             [expanded]=\"rootNode.expanded\"\r\n                             (expandedChange)=\"toggleItemClicked(rootNode, $event)\">\r\n      </ec-collapsible-toggle>\r\n\r\n      <a id=\"rootNode_{{rootNode?.id}}_link\"\r\n         class=\"item flex-grow d-flex align-items-center\"\r\n         routerLink=\"{{rootNode?.url}}\"\r\n         [queryParams]=\"rootNode?.queryParams\">\r\n        <ng-container\r\n                      *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: rootNode }\"></ng-container>\r\n      </a>\r\n    </div>\r\n  </li>\r\n\r\n  <ng-template #hierarchyView\r\n               let-items>\r\n\r\n    @for(item of items; let index = $index; let first = $first; track item) {\r\n    @if(!collapsibleRootNode || (hideRootNode ? true : rootNode.expanded)) {\r\n    <li [ngClass]=\"{'divider': item.display === 'divider'}\"\r\n        id=\"treeItem_{{item.id}}\">\r\n      <div class=\"item-wrapper\"\r\n           title=\"{{item.tooltip ?? item.label}}\"\r\n           [ngClass]=\"{'is-heading': item.display === 'heading'}\"\r\n           ecNavItemActive=\"is-selected\"\r\n           [ecNavItemActiveUrl]=\"item.url\"\r\n           [ecNavItemActiveExactMatch]=\"item.isActiveExactMatch\"\r\n           [ecNavItemActiveQueryParams]=\"item.queryParams\">\r\n\r\n        <!-- This element provides the indentation for each level -->\r\n        <span id=\"indent_{{item.id}}\"\r\n              *ngIf=\"!item.noIndent\"\r\n              class=\"d-block h-100\"\r\n              [style.width.px]=\"(indent) * (item.level - 1) + (item.level * 4) + (item.hasChildren ? 0 : indent)\">\r\n        </span>\r\n\r\n        <!-- Toggle the button icon to be a spinner when item.status is pending -->\r\n        <ec-collapsible-toggle id=\"toggle_{{item.id}}\"\r\n                               class=\"flex-shrink\"\r\n                               [style.width.px]=\"indent\"\r\n                               *ngIf=\"item.hasChildren && !item.hideToggle\"\r\n                               [hidden]=\"item.status === 'pending'\"\r\n                               [expanded]=\"item.expanded\"\r\n                               (expandedChange)=\"toggleItemClicked(item, $event)\">\r\n        </ec-collapsible-toggle>\r\n\r\n        <i class=\"ec-icon icon-loading my-1\"\r\n           [hidden]=\"item.status !== 'pending'\"></i>\r\n\r\n        <a id=\"treeItem_{{item.id}}_link\"\r\n           class=\"item\"\r\n           *ngIf=\"item.url\"\r\n           (click)=\"selectItem(item)\"\r\n           [routerLink]=\"item.url\"\r\n           [queryParams]=\"item.queryParams\"\r\n           [queryParamsHandling]=\"item.queryParamsHandling || ''\">\r\n          <ng-container\r\n                        *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: item }\"></ng-container>\r\n        </a>\r\n        <div id=\"treeItem_{{item.id}}_heading\"\r\n             class=\"item\"\r\n             *ngIf=\"!item.url\"\r\n             (click)=\"selectItem(item)\">\r\n          <ng-container\r\n                        *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: item }\"></ng-container>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <ul *ngIf=\"item.children.length > 0 && item.expanded\">\r\n        <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: item.children }\"></ng-container>\r\n      </ul>\r\n    </li>\r\n    }\r\n    }\r\n\r\n  </ng-template>\r\n\r\n  <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: rootNode?.children }\"></ng-container>\r\n</ul>\r\n\r\n<ng-template #defaultItemTemplate\r\n             let-item>\r\n  <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\r\n     [attr.title]=\"item.iconTooltip\"\r\n     *ngIf=\"item.icon\"></i>\r\n  <span class=\"mx-1 text-truncate\">{{item.label}}</span>\r\n</ng-template>", styles: [":host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));background-color:var(--ec-menu-background-color, var(--ec-background-color))}ul{padding:0;margin:0;list-style:none;overflow-x:hidden}ul li{white-space:nowrap;padding:0}ul li.divider{border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul .item-wrapper{display:flex;align-items:center;padding:0 .25rem;margin:0 .25rem;height:1.75rem;border-radius:var(--ec-border-radius)}ul .item-wrapper.is-heading{cursor:pointer;color:var(--ec-color-hint-dark);text-transform:uppercase;font-weight:var(--ec-font-weight-bold);font-size:var(--ec-font-size-label)}ul .item-wrapper:hover{background-color:var(--ec-background-color-hover)}ul .item-wrapper.is-selected{font-weight:700}ul .item-wrapper a{text-decoration:none}ul .item{color:inherit;display:flex;align-items:center;flex:1 1;min-height:0;min-width:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NavItemActiveDirective, selector: "[ecNavItemActive]", inputs: ["ecNavItemActive", "ecNavItemActiveExactMatch", "ecNavItemActiveQueryParams", "ecNavItemActiveUrl"], outputs: ["routerLinkActivated"] }, { kind: "component", type: CollapsibleToggleComponent, selector: "ec-collapsible-toggle", inputs: ["id", "expanded", "tabindex"], outputs: ["expandedChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HierarchyTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-hierarchy-tree', template: "<ul id=\"{{scrollContainerId}}\"\r\n    class=\"flex-grow scroll-y py-1\">\r\n\r\n  <li *ngIf=\"!hideRootNode && rootNode\">\r\n    <div class=\"item-wrapper\"\r\n         title=\"{{rootNode?.tooltip ?? rootNode?.label}}\"\r\n         [ngClass]=\"{'is-heading': rootNode?.display === 'heading'}\"\r\n         ecNavItemActive=\"is-selected\"\r\n         [ecNavItemActiveUrl]=\"rootNode?.url\"\r\n         [ecNavItemActiveExactMatch]='rootNode?.isActiveExactMatch'>\r\n      <a id=\"rootNode_{{rootNode?.id}}_link\"\r\n         class=\"item flex-grow d-flex align-items-center\"\r\n         routerLink=\"{{rootNode?.url}}\"\r\n         [queryParams]=\"rootNode?.queryParams\">\r\n        <ng-container *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: rootNode }\"></ng-container>\r\n      </a>\r\n    </div>\r\n  </li>\r\n\r\n  <ng-template #hierarchyView\r\n               let-items>\r\n    <li *ngFor=\"let item of items; index as index; first as isFirst\"\r\n        [ngClass]=\"{'divider': item.display === 'divider'}\"\r\n        id=\"treeItem_{{item.id}}\">\r\n      <div class=\"item-wrapper\"\r\n           title=\"{{item.tooltip ?? item.label}}\"\r\n           [ngClass]=\"{'is-heading': item.display === 'heading'}\"\r\n           ecNavItemActive=\"is-selected\"\r\n           [ecNavItemActiveUrl]=\"item.url\"\r\n           [ecNavItemActiveExactMatch]=\"item.isActiveExactMatch\"\r\n           [ecNavItemActiveQueryParams]=\"item.queryParams\">\r\n\r\n        <!-- This element provides the indentation for each level -->\r\n        <span id=\"indent_{{item.id}}\"\r\n              *ngIf=\"!item.noIndent\"\r\n              class=\"d-block h-100\"\r\n              [style.width.px]=\"(indent) * (item.level - 1) + (item.level * 4) + (item.hasChildren ? 0 : indent)\">\r\n        </span>\r\n\r\n        <!-- Toggle the button icon to be a spinner when item.status is pending -->\r\n        <ec-collapsible-toggle id=\"toggle_{{item.id}}\"\r\n                               class=\"flex-shrink\"\r\n                               [style.width.px]=\"indent\"\r\n                               *ngIf=\"item.hasChildren && !item.hideToggle\"\r\n                               [hidden]=\"item.status === 'pending'\"\r\n                               [expanded]=\"item.expanded\"\r\n                               (expandedChange)=\"toggleItemClicked(item, $event)\">\r\n        </ec-collapsible-toggle>\r\n\r\n        <i class=\"ec-icon icon-loading my-1\"\r\n           [hidden]=\"item.status !== 'pending'\"></i>\r\n\r\n        <a id=\"treeItem_{{item.id}}_link\"\r\n           class=\"item\"\r\n           *ngIf=\"item.url\"\r\n           (click)=\"selectItem(item)\"\r\n           [routerLink]=\"item.url\"\r\n           [queryParams]=\"item.queryParams\"\r\n           [queryParamsHandling]=\"item.queryParamsHandling || ''\">\r\n           <ng-container *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: item }\"></ng-container>\r\n        </a>\r\n        <div id=\"treeItem_{{item.id}}_heading\"\r\n             class=\"item\"\r\n             *ngIf=\"!item.url\"\r\n             (click)=\"selectItem(item)\">\r\n             <ng-container *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: item }\"></ng-container>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <ul *ngIf=\"item.children.length > 0 && item.expanded\">\r\n        <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: item.children }\"></ng-container>\r\n      </ul>\r\n    </li>\r\n  </ng-template>\r\n\r\n  <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: rootNode?.children }\"></ng-container>\r\n</ul>\r\n\r\n<ng-template #defaultItemTemplate\r\n             let-item>\r\n  <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\r\n     [attr.title]=\"item.iconTooltip\"\r\n     *ngIf=\"item.icon\"></i>\r\n  <span class=\"mx-1 text-truncate\">{{item.label}}</span>\r\n</ng-template>", styles: [":host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));background-color:var(--ec-menu-background-color, var(--ec-background-color))}ul{padding:0;margin:0;list-style:none;overflow-x:hidden}ul li{white-space:nowrap;padding:0}ul li.divider{border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul .item-wrapper{display:flex;align-items:center;padding:0 .25rem;margin:0 .25rem;height:1.75rem;border-radius:var(--ec-border-radius)}ul .item-wrapper.is-heading{cursor:pointer;color:var(--ec-color-hint-dark);text-transform:uppercase;font-weight:var(--ec-font-weight-bold);font-size:var(--ec-font-size-label)}ul .item-wrapper:hover{background-color:var(--ec-background-color-hover)}ul .item-wrapper.is-selected{font-weight:700}ul .item-wrapper a{text-decoration:none}ul .item{color:inherit;display:flex;align-items:center;flex:1 1;min-height:0;min-width:0}\n"] }]
-        }], ctorParameters: () => [{ type: ScrollService }, { type: i0.Injector }], propDecorators: { id: [{
+            args: [{ selector: 'ec-hierarchy-tree', template: "<ul id=\"{{scrollContainerId}}\"\r\n    class=\"flex-grow scroll-y py-1\">\r\n\r\n  <li *ngIf=\"!hideRootNode && rootNode\">\r\n    <div class=\"item-wrapper\"\r\n         title=\"{{rootNode?.tooltip ?? rootNode?.label}}\"\r\n         [ngClass]=\"{'is-heading': rootNode?.display === 'heading'}\"\r\n         ecNavItemActive=\"is-selected\"\r\n         [ecNavItemActiveUrl]=\"rootNode?.url\"\r\n         [ecNavItemActiveExactMatch]='rootNode?.isActiveExactMatch'>\r\n\r\n      <ec-collapsible-toggle id=\"toggle_{{rootNode.id}}\"\r\n                             class=\"flex-shrink\"\r\n                             [style.width.px]=\"indent\"\r\n                             *ngIf=\"rootNode.hasChildren && collapsibleRootNode\"\r\n                             [expanded]=\"rootNode.expanded\"\r\n                             (expandedChange)=\"toggleItemClicked(rootNode, $event)\">\r\n      </ec-collapsible-toggle>\r\n\r\n      <a id=\"rootNode_{{rootNode?.id}}_link\"\r\n         class=\"item flex-grow d-flex align-items-center\"\r\n         routerLink=\"{{rootNode?.url}}\"\r\n         [queryParams]=\"rootNode?.queryParams\">\r\n        <ng-container\r\n                      *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: rootNode }\"></ng-container>\r\n      </a>\r\n    </div>\r\n  </li>\r\n\r\n  <ng-template #hierarchyView\r\n               let-items>\r\n\r\n    @for(item of items; let index = $index; let first = $first; track item) {\r\n    @if(!collapsibleRootNode || (hideRootNode ? true : rootNode.expanded)) {\r\n    <li [ngClass]=\"{'divider': item.display === 'divider'}\"\r\n        id=\"treeItem_{{item.id}}\">\r\n      <div class=\"item-wrapper\"\r\n           title=\"{{item.tooltip ?? item.label}}\"\r\n           [ngClass]=\"{'is-heading': item.display === 'heading'}\"\r\n           ecNavItemActive=\"is-selected\"\r\n           [ecNavItemActiveUrl]=\"item.url\"\r\n           [ecNavItemActiveExactMatch]=\"item.isActiveExactMatch\"\r\n           [ecNavItemActiveQueryParams]=\"item.queryParams\">\r\n\r\n        <!-- This element provides the indentation for each level -->\r\n        <span id=\"indent_{{item.id}}\"\r\n              *ngIf=\"!item.noIndent\"\r\n              class=\"d-block h-100\"\r\n              [style.width.px]=\"(indent) * (item.level - 1) + (item.level * 4) + (item.hasChildren ? 0 : indent)\">\r\n        </span>\r\n\r\n        <!-- Toggle the button icon to be a spinner when item.status is pending -->\r\n        <ec-collapsible-toggle id=\"toggle_{{item.id}}\"\r\n                               class=\"flex-shrink\"\r\n                               [style.width.px]=\"indent\"\r\n                               *ngIf=\"item.hasChildren && !item.hideToggle\"\r\n                               [hidden]=\"item.status === 'pending'\"\r\n                               [expanded]=\"item.expanded\"\r\n                               (expandedChange)=\"toggleItemClicked(item, $event)\">\r\n        </ec-collapsible-toggle>\r\n\r\n        <i class=\"ec-icon icon-loading my-1\"\r\n           [hidden]=\"item.status !== 'pending'\"></i>\r\n\r\n        <a id=\"treeItem_{{item.id}}_link\"\r\n           class=\"item\"\r\n           *ngIf=\"item.url\"\r\n           (click)=\"selectItem(item)\"\r\n           [routerLink]=\"item.url\"\r\n           [queryParams]=\"item.queryParams\"\r\n           [queryParamsHandling]=\"item.queryParamsHandling || ''\">\r\n          <ng-container\r\n                        *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: item }\"></ng-container>\r\n        </a>\r\n        <div id=\"treeItem_{{item.id}}_heading\"\r\n             class=\"item\"\r\n             *ngIf=\"!item.url\"\r\n             (click)=\"selectItem(item)\">\r\n          <ng-container\r\n                        *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: item }\"></ng-container>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <ul *ngIf=\"item.children.length > 0 && item.expanded\">\r\n        <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: item.children }\"></ng-container>\r\n      </ul>\r\n    </li>\r\n    }\r\n    }\r\n\r\n  </ng-template>\r\n\r\n  <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: rootNode?.children }\"></ng-container>\r\n</ul>\r\n\r\n<ng-template #defaultItemTemplate\r\n             let-item>\r\n  <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\r\n     [attr.title]=\"item.iconTooltip\"\r\n     *ngIf=\"item.icon\"></i>\r\n  <span class=\"mx-1 text-truncate\">{{item.label}}</span>\r\n</ng-template>", styles: [":host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));background-color:var(--ec-menu-background-color, var(--ec-background-color))}ul{padding:0;margin:0;list-style:none;overflow-x:hidden}ul li{white-space:nowrap;padding:0}ul li.divider{border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul .item-wrapper{display:flex;align-items:center;padding:0 .25rem;margin:0 .25rem;height:1.75rem;border-radius:var(--ec-border-radius)}ul .item-wrapper.is-heading{cursor:pointer;color:var(--ec-color-hint-dark);text-transform:uppercase;font-weight:var(--ec-font-weight-bold);font-size:var(--ec-font-size-label)}ul .item-wrapper:hover{background-color:var(--ec-background-color-hover)}ul .item-wrapper.is-selected{font-weight:700}ul .item-wrapper a{text-decoration:none}ul .item{color:inherit;display:flex;align-items:center;flex:1 1;min-height:0;min-width:0}\n"] }]
+        }], ctorParameters: () => [{ type: ScrollService }, { type: i0.Injector }], propDecorators: { collapsibleRootNode: [{
+                type: Input
+            }], id: [{
                 type: Input
             }], hideRootNode: [{
                 type: Input
@@ -10994,6 +10997,8 @@ class TreeComponent {
         this.treeTitle = '';
         /** Hides the tree header when set to true */
         this.hideTreeHeader = false;
+        /** Allows the root node to be collapsible with a toggle */
+        this.collapsibleRootNode = false;
         /** Used when the tree is in menu mode to tell the menu if it should maintain the selected item
          *  Useful in side nav components where this tree component may exist alongside other trees or menus
          *  used for navigation. If this tree is in menu mode you would want this set to false so when you select an item
@@ -11043,11 +11048,11 @@ class TreeComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TreeComponent, selector: "ec-tree", inputs: { id: "id", treeTitle: "treeTitle", hideTreeHeader: "hideTreeHeader", treeItems: "treeItems", treeHierarchyHideRootNode: "treeHierarchyHideRootNode", treeHierarchy: "treeHierarchy", treeMenuMaintainSelectedItem: "treeMenuMaintainSelectedItem", customTreeMenuTemplate: "customTreeMenuTemplate", customHierarchyItemTemplate: "customHierarchyItemTemplate", status: "status", type: "type", menuItems: "menuItems", menuStatus: "menuStatus", menuTemplateType: "menuTemplateType", preserveIconSpace: "preserveIconSpace", templateType: "templateType" }, outputs: { treeSelection: "treeSelection", getTreeItemChildren: "getTreeItemChildren", treeItemToggled: "treeItemToggled" }, 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     [message]=\"status?.message\"\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                       (itemToggled)=\"onHierarchyItemToggled($event)\"\r\n                       (itemSelected)=\"onItemSelected($event)\"\r\n                       [customItemTemplate]=\"customHierarchyItemTemplate\"\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-hierarchy-tree{--ec-menu-background-color: var(--ec-tree-background-color)}[ecOverlay]{--ec-overlay-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", "customItemTemplate"], outputs: ["itemSelected"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TreeComponent, selector: "ec-tree", inputs: { id: "id", treeTitle: "treeTitle", hideTreeHeader: "hideTreeHeader", treeItems: "treeItems", treeHierarchyHideRootNode: "treeHierarchyHideRootNode", collapsibleRootNode: "collapsibleRootNode", treeHierarchy: "treeHierarchy", treeMenuMaintainSelectedItem: "treeMenuMaintainSelectedItem", customTreeMenuTemplate: "customTreeMenuTemplate", customHierarchyItemTemplate: "customHierarchyItemTemplate", status: "status", type: "type", menuItems: "menuItems", menuStatus: "menuStatus", menuTemplateType: "menuTemplateType", preserveIconSpace: "preserveIconSpace", templateType: "templateType" }, outputs: { treeSelection: "treeSelection", getTreeItemChildren: "getTreeItemChildren", treeItemToggled: "treeItemToggled" }, 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     [message]=\"status?.message\"\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                       [collapsibleRootNode]=\"collapsibleRootNode\"\r\n                       (getItemChildren)=\"onHierarchyGetItemChildren($event)\"\r\n                       (itemToggled)=\"onHierarchyItemToggled($event)\"\r\n                       (itemSelected)=\"onItemSelected($event)\"\r\n                       [customItemTemplate]=\"customHierarchyItemTemplate\"\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-hierarchy-tree{--ec-menu-background-color: var(--ec-tree-background-color)}[ecOverlay]{--ec-overlay-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: ["collapsibleRootNode", "id", "hideRootNode", "customItemTemplate"], outputs: ["itemSelected"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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\">\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     [message]=\"status?.message\"\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                       (itemToggled)=\"onHierarchyItemToggled($event)\"\r\n                       (itemSelected)=\"onItemSelected($event)\"\r\n                       [customItemTemplate]=\"customHierarchyItemTemplate\"\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-hierarchy-tree{--ec-menu-background-color: var(--ec-tree-background-color)}[ecOverlay]{--ec-overlay-background-color: var(--ec-tree-background-color)}\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     [message]=\"status?.message\"\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                       [collapsibleRootNode]=\"collapsibleRootNode\"\r\n                       (getItemChildren)=\"onHierarchyGetItemChildren($event)\"\r\n                       (itemToggled)=\"onHierarchyItemToggled($event)\"\r\n                       (itemSelected)=\"onItemSelected($event)\"\r\n                       [customItemTemplate]=\"customHierarchyItemTemplate\"\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-hierarchy-tree{--ec-menu-background-color: var(--ec-tree-background-color)}[ecOverlay]{--ec-overlay-background-color: var(--ec-tree-background-color)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { attrId: [{
                 type: HostBinding,
                 args: ['attr.id']
@@ -11061,6 +11066,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], treeHierarchyHideRootNode: [{
                 type: Input
+            }], collapsibleRootNode: [{
+                type: Input
             }], treeHierarchy: [{
                 type: Input
             }], treeMenuMaintainSelectedItem: [{