@hestia-earth/ui-components 0.41.22 → 0.41.24

package/fesm2022/hestia-earth-ui-components.mjs

@@ -43,7 +43,7 @@ import { isCSVIncluded, isDefaultCSVSelected } from '@hestia-earth/json-schema/s
 import { recommendedProperties, loadSchemas } from '@hestia-earth/json-schema';
 import set from 'lodash.set';
 import uniqBy from 'lodash.uniqby';
-import { CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
+import { ScrollStrategyOptions, CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { ResizableDirective, ResizeHandleDirective } from 'angular-resizable-element';
 import * as semver from 'semver';
 import { parse } from 'papaparse';
@@ -2026,6 +2026,7 @@ const linksActiveChange = (item, parentItems = []) => [item, ...parentItems].for
 class NavigationMenuComponent {
     constructor() {
         this.links = input([], ...(ngDevMode ? [{ debugName: "links" }] : []));
+        this.secondaryLinks = input([], ...(ngDevMode ? [{ debugName: "secondaryLinks" }] : []));
         this.sticky = input(false, ...(ngDevMode ? [{ debugName: "sticky" }] : []));
         this.collapsible = input(false, ...(ngDevMode ? [{ debugName: "collapsible" }] : []));
         this.routerLinkMatchOptions = input({
@@ -2057,14 +2058,14 @@ class NavigationMenuComponent {
         return toggleLink($event, link);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NavigationMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NavigationMenuComponent, isStandalone: true, selector: "he-navigation-menu", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, routerLinkMatchOptions: { classPropertyName: "routerLinkMatchOptions", publicName: "routerLinkMatchOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { classAttribute: "no-print navigation-menu" }, ngImport: i0, template: "<aside\n  class=\"is-flex is-flex-direction-column is-gap-12 is-overflow-hidden is-py-desktop-3 | menu\"\n  [class.sticky]=\"sticky()\">\n  <ng-content select=\"[header]\" />\n\n  <div class=\"is-flex is-flex-direction-column is-gap-4\">\n    @for (link of links(); track trackByLink(link)) {\n      <ng-container *ngTemplateOutlet=\"linkItem; context: { link, parentLinks: [], level: 1 }\" />\n    }\n  </div>\n\n  <ng-content select=\"[footer]\" />\n</aside>\n\n<ng-template #linkExpandIcon let-link>\n  @if (isCollapsible(link)) {\n    <he-svg-icon\n      [name]=\"link.expanded ? 'chevron-down' : 'chevron-right'\"\n      class=\"is-inline-block is-clickable\"\n      size=\"20\"\n      (click)=\"toggleLink($event, link)\" />\n  }\n</ng-template>\n\n<ng-template #linkContent let-link=\"link\" let-level=\"level\">\n  @if (level === 1) {\n    @if (link.icon) {\n      <he-svg-icon [name]=\"link.icon\" size=\"20\" class=\"is-inline-block has-text-secondary\" />\n    } @else if (hasPrimaryIcons()) {\n      <span class=\"primary-missing-icon\">&nbsp;</span>\n    }\n  }\n  <span class=\"is-flex is-flex-grow-1 is-align-self-center\" [innerHTML]=\"link.title\"></span>\n  <ng-container *ngTemplateOutlet=\"linkExpandIcon; context: { $implicit: link }\" />\n</ng-template>\n\n<ng-template #linkItemChildren let-link=\"link\" let-parentLinks=\"parentLinks\" let-level=\"level\">\n  @let childParents = concatLinks(link, parentLinks);\n  @if (isCollapsible(link)) {\n    <div\n      class=\"is-flex is-flex-direction-column is-align-items-stretch | he-menu-child-items\"\n      [class.is-hidden]=\"!link.expanded\">\n      @for (childLink of link.links; track trackByLink(childLink)) {\n        <ng-container\n          *ngTemplateOutlet=\"linkItem; context: { link: childLink, parentLinks: childParents, level: level + 1 }\" />\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #linkItem let-link=\"link\" let-parentLinks=\"parentLinks\" let-level=\"level\">\n  <div\n    class=\"is-flex is-align-items-center is-gap-4 | he-menu-item\"\n    [attr.data-menu-level]=\"level\"\n    (click)=\"toggleLink($event, link)\"\n    [class.with-border-color]=\"!!link.borderColor\">\n    @if (link.borderColor) {\n      <div class=\"he-menu-border\" [style.background-color]=\"link.borderColor\"></div>\n    }\n    <a\n      class=\"is-flex is-flex-grow-1 is-align-self-stretch is-align-items-center is-gap-8 has-text-secondary | he-menu-label\"\n      [class.he-menu-item-selectable]=\"!!link?.url\"\n      (click)=\"link.url ? selectLink($event, link) : true\"\n      [routerLink]=\"link.url\"\n      [queryParams]=\"link.queryParams\"\n      [fragment]=\"link.fragment\"\n      routerLinkActive=\"link-active\"\n      [routerLinkActiveOptions]=\"linkActiveOptions(link, level)\"\n      (isActiveChange)=\"$event && linksActiveChange(link, parentLinks)\">\n      <ng-container *ngTemplateOutlet=\"linkContent; context: { link, level }\" />\n    </a>\n  </div>\n  <ng-container *ngTemplateOutlet=\"linkItemChildren; context: { link, parentLinks, level }\" />\n</ng-template>\n", styles: [".navigation-menu{width:100%;display:block}.navigation-menu .menu{font-size:.875rem;line-height:16px;color:#193957;font-weight:400;width:100%!important;max-width:100%!important}@media screen and (min-width:1024px){.navigation-menu .menu{width:14rem!important;min-width:14rem!important;max-width:14rem!important;border-style:solid;border-color:#ffc000;border-width:1px 0}}.navigation-menu .menu.fixed-top{transform:translate3d(0,6.75rem,0)}.navigation-menu .menu.sticky{position:sticky;top:6.75rem}.navigation-menu a{text-decoration:none!important}.navigation-menu a:focus,.navigation-menu a:active{outline:0!important}.navigation-menu .cursor-default{cursor:default!important}.navigation-menu .primary-missing-icon{height:20px;width:20px;min-width:20px}.navigation-menu .he-menu-item{padding:1px 0}.navigation-menu .he-menu-item .he-menu-label{min-height:28px;border-radius:3px;padding:4px}.navigation-menu .he-menu-item .he-menu-border{width:8px;height:28px}.navigation-menu .he-menu-item[data-menu-level=\"1\"] span{font-weight:700}.navigation-menu .he-menu-item[data-menu-level=\"1\"]+.he-menu-child-items{padding-left:14px}.navigation-menu .he-menu-item[data-menu-level=\"2\"]{padding-left:14px;border-left:1px solid #ffc000}.navigation-menu .he-menu-item[data-menu-level=\"2\"]+.he-menu-child-items{padding-left:28px}.navigation-menu .he-menu-item-selectable:not(.link-active):hover{background-color:#fefaef}.navigation-menu .he-menu-item.with-border-color .he-menu-label{border-radius:0}.navigation-menu .he-menu-item.with-border-color[data-menu-level=\"1\"]+.he-menu-child-items{padding-left:26px}.navigation-menu .he-menu-child-items{padding-left:14px}.navigation-menu .link-active{background-color:#ffe8a3;color:#193957!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NavigationMenuComponent, isStandalone: true, selector: "he-navigation-menu", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, secondaryLinks: { classPropertyName: "secondaryLinks", publicName: "secondaryLinks", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, routerLinkMatchOptions: { classPropertyName: "routerLinkMatchOptions", publicName: "routerLinkMatchOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { classAttribute: "no-print navigation-menu" }, ngImport: i0, template: "<aside\n  class=\"is-flex is-flex-direction-column is-gap-12 is-overflow-hidden is-py-desktop-3 | menu\"\n  [class.sticky]=\"sticky()\">\n  <ng-content select=\"[header]\" />\n\n  <div class=\"is-flex is-flex-direction-column is-gap-4\">\n    @for (link of links(); track trackByLink(link)) {\n      <ng-container *ngTemplateOutlet=\"linkItem; context: { link, parentLinks: [], level: 1 }\" />\n    }\n\n    @if (secondaryLinks().length) {\n      <hr class=\"links-divider is-my-2 is-p-0\" />\n\n      @for (link of secondaryLinks(); track trackByLink(link)) {\n        <ng-container *ngTemplateOutlet=\"linkItem; context: { link, parentLinks: [], level: 1 }\" />\n      }\n    }\n  </div>\n\n  <ng-content select=\"[footer]\" />\n</aside>\n\n<ng-template #linkExpandIcon let-link>\n  @if (isCollapsible(link)) {\n    <he-svg-icon\n      [name]=\"link.expanded ? 'chevron-down' : 'chevron-right'\"\n      class=\"is-inline-block is-clickable\"\n      size=\"20\"\n      (click)=\"toggleLink($event, link)\" />\n  }\n</ng-template>\n\n<ng-template #linkContent let-link=\"link\" let-level=\"level\">\n  @if (level === 1) {\n    @if (link.icon) {\n      <he-svg-icon [name]=\"link.icon\" size=\"20\" class=\"is-inline-block has-text-secondary\" />\n    } @else if (hasPrimaryIcons()) {\n      <span class=\"primary-missing-icon\">&nbsp;</span>\n    }\n  }\n  <span class=\"is-flex is-flex-grow-1 is-align-self-center\" [innerHTML]=\"link.title\"></span>\n  <ng-container *ngTemplateOutlet=\"linkExpandIcon; context: { $implicit: link }\" />\n</ng-template>\n\n<ng-template #linkItemChildren let-link=\"link\" let-parentLinks=\"parentLinks\" let-level=\"level\">\n  @let childParents = concatLinks(link, parentLinks);\n  @if (isCollapsible(link)) {\n    <div\n      class=\"is-flex is-flex-direction-column is-align-items-stretch | he-menu-child-items\"\n      [class.is-hidden]=\"!link.expanded\">\n      @for (childLink of link.links; track trackByLink(childLink)) {\n        <ng-container\n          *ngTemplateOutlet=\"linkItem; context: { link: childLink, parentLinks: childParents, level: level + 1 }\" />\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #linkItem let-link=\"link\" let-parentLinks=\"parentLinks\" let-level=\"level\">\n  <div\n    class=\"is-flex is-align-items-center is-gap-4 | he-menu-item\"\n    [attr.data-menu-level]=\"level\"\n    (click)=\"toggleLink($event, link)\"\n    [class.with-border-color]=\"!!link.borderColor\">\n    @if (link.borderColor) {\n      <div class=\"he-menu-border\" [style.background-color]=\"link.borderColor\"></div>\n    }\n    <a\n      class=\"is-flex is-flex-grow-1 is-align-self-stretch is-align-items-center is-gap-8 has-text-secondary | he-menu-label\"\n      [class.he-menu-item-selectable]=\"!!link?.url\"\n      (click)=\"link.url ? selectLink($event, link) : true\"\n      [routerLink]=\"link.url\"\n      [queryParams]=\"link.queryParams\"\n      [fragment]=\"link.fragment\"\n      routerLinkActive=\"link-active\"\n      [routerLinkActiveOptions]=\"linkActiveOptions(link, level)\"\n      (isActiveChange)=\"$event && linksActiveChange(link, parentLinks)\">\n      <ng-container *ngTemplateOutlet=\"linkContent; context: { link, level }\" />\n    </a>\n  </div>\n  <ng-container *ngTemplateOutlet=\"linkItemChildren; context: { link, parentLinks, level }\" />\n</ng-template>\n", styles: [".navigation-menu{width:100%;display:block}.navigation-menu .menu{font-size:.875rem;line-height:16px;color:#193957;font-weight:400;width:100%!important;max-width:100%!important}@media screen and (min-width:1024px){.navigation-menu .menu{width:14rem!important;min-width:14rem!important;max-width:14rem!important;border-style:solid;border-color:#ffc000;border-width:1px 0}}.navigation-menu .menu.fixed-top{transform:translate3d(0,6.75rem,0)}.navigation-menu .menu.sticky{position:sticky;top:6.75rem}.navigation-menu a{text-decoration:none!important}.navigation-menu a:focus,.navigation-menu a:active{outline:0!important}.navigation-menu .cursor-default{cursor:default!important}.navigation-menu .primary-missing-icon{height:20px;width:20px;min-width:20px}.navigation-menu .he-menu-item{padding:1px 0}.navigation-menu .he-menu-item .he-menu-label{min-height:28px;border-radius:3px;padding:4px}.navigation-menu .he-menu-item .he-menu-border{width:8px;height:28px}.navigation-menu .he-menu-item[data-menu-level=\"1\"] span{font-weight:700}.navigation-menu .he-menu-item[data-menu-level=\"1\"]+.he-menu-child-items{padding-left:14px}.navigation-menu .he-menu-item[data-menu-level=\"2\"]{padding-left:14px;border-left:1px solid #ffc000}.navigation-menu .he-menu-item[data-menu-level=\"2\"]+.he-menu-child-items{padding-left:28px}.navigation-menu .he-menu-item-selectable:not(.link-active):hover{background-color:#fefaef}.navigation-menu .he-menu-item.with-border-color .he-menu-label{border-radius:0}.navigation-menu .he-menu-item.with-border-color[data-menu-level=\"1\"]+.he-menu-child-items{padding-left:26px}.navigation-menu .he-menu-child-items{padding-left:14px}.navigation-menu .link-active{background-color:#ffe8a3;color:#193957!important}.navigation-menu .links-divider{height:1px;background-color:#dbe3ea}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NavigationMenuComponent, decorators: [{
             type: Component$1,
             args: [{ selector: 'he-navigation-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, RouterLinkActive, RouterLink, HESvgIconComponent], host: {
                         class: 'no-print navigation-menu'
-                    }, template: "<aside\n  class=\"is-flex is-flex-direction-column is-gap-12 is-overflow-hidden is-py-desktop-3 | menu\"\n  [class.sticky]=\"sticky()\">\n  <ng-content select=\"[header]\" />\n\n  <div class=\"is-flex is-flex-direction-column is-gap-4\">\n    @for (link of links(); track trackByLink(link)) {\n      <ng-container *ngTemplateOutlet=\"linkItem; context: { link, parentLinks: [], level: 1 }\" />\n    }\n  </div>\n\n  <ng-content select=\"[footer]\" />\n</aside>\n\n<ng-template #linkExpandIcon let-link>\n  @if (isCollapsible(link)) {\n    <he-svg-icon\n      [name]=\"link.expanded ? 'chevron-down' : 'chevron-right'\"\n      class=\"is-inline-block is-clickable\"\n      size=\"20\"\n      (click)=\"toggleLink($event, link)\" />\n  }\n</ng-template>\n\n<ng-template #linkContent let-link=\"link\" let-level=\"level\">\n  @if (level === 1) {\n    @if (link.icon) {\n      <he-svg-icon [name]=\"link.icon\" size=\"20\" class=\"is-inline-block has-text-secondary\" />\n    } @else if (hasPrimaryIcons()) {\n      <span class=\"primary-missing-icon\">&nbsp;</span>\n    }\n  }\n  <span class=\"is-flex is-flex-grow-1 is-align-self-center\" [innerHTML]=\"link.title\"></span>\n  <ng-container *ngTemplateOutlet=\"linkExpandIcon; context: { $implicit: link }\" />\n</ng-template>\n\n<ng-template #linkItemChildren let-link=\"link\" let-parentLinks=\"parentLinks\" let-level=\"level\">\n  @let childParents = concatLinks(link, parentLinks);\n  @if (isCollapsible(link)) {\n    <div\n      class=\"is-flex is-flex-direction-column is-align-items-stretch | he-menu-child-items\"\n      [class.is-hidden]=\"!link.expanded\">\n      @for (childLink of link.links; track trackByLink(childLink)) {\n        <ng-container\n          *ngTemplateOutlet=\"linkItem; context: { link: childLink, parentLinks: childParents, level: level + 1 }\" />\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #linkItem let-link=\"link\" let-parentLinks=\"parentLinks\" let-level=\"level\">\n  <div\n    class=\"is-flex is-align-items-center is-gap-4 | he-menu-item\"\n    [attr.data-menu-level]=\"level\"\n    (click)=\"toggleLink($event, link)\"\n    [class.with-border-color]=\"!!link.borderColor\">\n    @if (link.borderColor) {\n      <div class=\"he-menu-border\" [style.background-color]=\"link.borderColor\"></div>\n    }\n    <a\n      class=\"is-flex is-flex-grow-1 is-align-self-stretch is-align-items-center is-gap-8 has-text-secondary | he-menu-label\"\n      [class.he-menu-item-selectable]=\"!!link?.url\"\n      (click)=\"link.url ? selectLink($event, link) : true\"\n      [routerLink]=\"link.url\"\n      [queryParams]=\"link.queryParams\"\n      [fragment]=\"link.fragment\"\n      routerLinkActive=\"link-active\"\n      [routerLinkActiveOptions]=\"linkActiveOptions(link, level)\"\n      (isActiveChange)=\"$event && linksActiveChange(link, parentLinks)\">\n      <ng-container *ngTemplateOutlet=\"linkContent; context: { link, level }\" />\n    </a>\n  </div>\n  <ng-container *ngTemplateOutlet=\"linkItemChildren; context: { link, parentLinks, level }\" />\n</ng-template>\n", styles: [".navigation-menu{width:100%;display:block}.navigation-menu .menu{font-size:.875rem;line-height:16px;color:#193957;font-weight:400;width:100%!important;max-width:100%!important}@media screen and (min-width:1024px){.navigation-menu .menu{width:14rem!important;min-width:14rem!important;max-width:14rem!important;border-style:solid;border-color:#ffc000;border-width:1px 0}}.navigation-menu .menu.fixed-top{transform:translate3d(0,6.75rem,0)}.navigation-menu .menu.sticky{position:sticky;top:6.75rem}.navigation-menu a{text-decoration:none!important}.navigation-menu a:focus,.navigation-menu a:active{outline:0!important}.navigation-menu .cursor-default{cursor:default!important}.navigation-menu .primary-missing-icon{height:20px;width:20px;min-width:20px}.navigation-menu .he-menu-item{padding:1px 0}.navigation-menu .he-menu-item .he-menu-label{min-height:28px;border-radius:3px;padding:4px}.navigation-menu .he-menu-item .he-menu-border{width:8px;height:28px}.navigation-menu .he-menu-item[data-menu-level=\"1\"] span{font-weight:700}.navigation-menu .he-menu-item[data-menu-level=\"1\"]+.he-menu-child-items{padding-left:14px}.navigation-menu .he-menu-item[data-menu-level=\"2\"]{padding-left:14px;border-left:1px solid #ffc000}.navigation-menu .he-menu-item[data-menu-level=\"2\"]+.he-menu-child-items{padding-left:28px}.navigation-menu .he-menu-item-selectable:not(.link-active):hover{background-color:#fefaef}.navigation-menu .he-menu-item.with-border-color .he-menu-label{border-radius:0}.navigation-menu .he-menu-item.with-border-color[data-menu-level=\"1\"]+.he-menu-child-items{padding-left:26px}.navigation-menu .he-menu-child-items{padding-left:14px}.navigation-menu .link-active{background-color:#ffe8a3;color:#193957!important}\n"] }]
-        }], propDecorators: { links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], routerLinkMatchOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkMatchOptions", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+                    }, template: "<aside\n  class=\"is-flex is-flex-direction-column is-gap-12 is-overflow-hidden is-py-desktop-3 | menu\"\n  [class.sticky]=\"sticky()\">\n  <ng-content select=\"[header]\" />\n\n  <div class=\"is-flex is-flex-direction-column is-gap-4\">\n    @for (link of links(); track trackByLink(link)) {\n      <ng-container *ngTemplateOutlet=\"linkItem; context: { link, parentLinks: [], level: 1 }\" />\n    }\n\n    @if (secondaryLinks().length) {\n      <hr class=\"links-divider is-my-2 is-p-0\" />\n\n      @for (link of secondaryLinks(); track trackByLink(link)) {\n        <ng-container *ngTemplateOutlet=\"linkItem; context: { link, parentLinks: [], level: 1 }\" />\n      }\n    }\n  </div>\n\n  <ng-content select=\"[footer]\" />\n</aside>\n\n<ng-template #linkExpandIcon let-link>\n  @if (isCollapsible(link)) {\n    <he-svg-icon\n      [name]=\"link.expanded ? 'chevron-down' : 'chevron-right'\"\n      class=\"is-inline-block is-clickable\"\n      size=\"20\"\n      (click)=\"toggleLink($event, link)\" />\n  }\n</ng-template>\n\n<ng-template #linkContent let-link=\"link\" let-level=\"level\">\n  @if (level === 1) {\n    @if (link.icon) {\n      <he-svg-icon [name]=\"link.icon\" size=\"20\" class=\"is-inline-block has-text-secondary\" />\n    } @else if (hasPrimaryIcons()) {\n      <span class=\"primary-missing-icon\">&nbsp;</span>\n    }\n  }\n  <span class=\"is-flex is-flex-grow-1 is-align-self-center\" [innerHTML]=\"link.title\"></span>\n  <ng-container *ngTemplateOutlet=\"linkExpandIcon; context: { $implicit: link }\" />\n</ng-template>\n\n<ng-template #linkItemChildren let-link=\"link\" let-parentLinks=\"parentLinks\" let-level=\"level\">\n  @let childParents = concatLinks(link, parentLinks);\n  @if (isCollapsible(link)) {\n    <div\n      class=\"is-flex is-flex-direction-column is-align-items-stretch | he-menu-child-items\"\n      [class.is-hidden]=\"!link.expanded\">\n      @for (childLink of link.links; track trackByLink(childLink)) {\n        <ng-container\n          *ngTemplateOutlet=\"linkItem; context: { link: childLink, parentLinks: childParents, level: level + 1 }\" />\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #linkItem let-link=\"link\" let-parentLinks=\"parentLinks\" let-level=\"level\">\n  <div\n    class=\"is-flex is-align-items-center is-gap-4 | he-menu-item\"\n    [attr.data-menu-level]=\"level\"\n    (click)=\"toggleLink($event, link)\"\n    [class.with-border-color]=\"!!link.borderColor\">\n    @if (link.borderColor) {\n      <div class=\"he-menu-border\" [style.background-color]=\"link.borderColor\"></div>\n    }\n    <a\n      class=\"is-flex is-flex-grow-1 is-align-self-stretch is-align-items-center is-gap-8 has-text-secondary | he-menu-label\"\n      [class.he-menu-item-selectable]=\"!!link?.url\"\n      (click)=\"link.url ? selectLink($event, link) : true\"\n      [routerLink]=\"link.url\"\n      [queryParams]=\"link.queryParams\"\n      [fragment]=\"link.fragment\"\n      routerLinkActive=\"link-active\"\n      [routerLinkActiveOptions]=\"linkActiveOptions(link, level)\"\n      (isActiveChange)=\"$event && linksActiveChange(link, parentLinks)\">\n      <ng-container *ngTemplateOutlet=\"linkContent; context: { link, level }\" />\n    </a>\n  </div>\n  <ng-container *ngTemplateOutlet=\"linkItemChildren; context: { link, parentLinks, level }\" />\n</ng-template>\n", styles: [".navigation-menu{width:100%;display:block}.navigation-menu .menu{font-size:.875rem;line-height:16px;color:#193957;font-weight:400;width:100%!important;max-width:100%!important}@media screen and (min-width:1024px){.navigation-menu .menu{width:14rem!important;min-width:14rem!important;max-width:14rem!important;border-style:solid;border-color:#ffc000;border-width:1px 0}}.navigation-menu .menu.fixed-top{transform:translate3d(0,6.75rem,0)}.navigation-menu .menu.sticky{position:sticky;top:6.75rem}.navigation-menu a{text-decoration:none!important}.navigation-menu a:focus,.navigation-menu a:active{outline:0!important}.navigation-menu .cursor-default{cursor:default!important}.navigation-menu .primary-missing-icon{height:20px;width:20px;min-width:20px}.navigation-menu .he-menu-item{padding:1px 0}.navigation-menu .he-menu-item .he-menu-label{min-height:28px;border-radius:3px;padding:4px}.navigation-menu .he-menu-item .he-menu-border{width:8px;height:28px}.navigation-menu .he-menu-item[data-menu-level=\"1\"] span{font-weight:700}.navigation-menu .he-menu-item[data-menu-level=\"1\"]+.he-menu-child-items{padding-left:14px}.navigation-menu .he-menu-item[data-menu-level=\"2\"]{padding-left:14px;border-left:1px solid #ffc000}.navigation-menu .he-menu-item[data-menu-level=\"2\"]+.he-menu-child-items{padding-left:28px}.navigation-menu .he-menu-item-selectable:not(.link-active):hover{background-color:#fefaef}.navigation-menu .he-menu-item.with-border-color .he-menu-label{border-radius:0}.navigation-menu .he-menu-item.with-border-color[data-menu-level=\"1\"]+.he-menu-child-items{padding-left:26px}.navigation-menu .he-menu-child-items{padding-left:14px}.navigation-menu .link-active{background-color:#ffe8a3;color:#193957!important}.navigation-menu .links-divider{height:1px;background-color:#dbe3ea}\n"] }]
+        }], propDecorators: { links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }], secondaryLinks: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryLinks", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], routerLinkMatchOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkMatchOptions", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 var Breakpoint;
 (function (Breakpoint) {
@@ -2191,6 +2192,7 @@ class DrawerContainerComponent {
         this.contentPaddingStyles = input(...(ngDevMode ? [undefined, { debugName: "contentPaddingStyles" }] : []));
         this.menuOverlap = input(true, ...(ngDevMode ? [{ debugName: "menuOverlap" }] : []));
         this.links = input([], ...(ngDevMode ? [{ debugName: "links" }] : []));
+        this.secondaryLinks = input([], ...(ngDevMode ? [{ debugName: "secondaryLinks" }] : []));
         this.drawerHeaderTemplate = input(...(ngDevMode ? [undefined, { debugName: "drawerHeaderTemplate" }] : []));
         /**
          * Drawer content is not visible when the drawer is compacted.
@@ -2312,7 +2314,7 @@ class DrawerContainerComponent {
         return parseInt(padding, 10) + parseInt(margin, 10);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DrawerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DrawerContainerComponent, isStandalone: true, selector: "he-drawer-container", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, compactBreakpoint: { classPropertyName: "compactBreakpoint", publicName: "compactBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, contentStyles: { classPropertyName: "contentStyles", publicName: "contentStyles", isSignal: true, isRequired: false, transformFunction: null }, contentPaddingStyles: { classPropertyName: "contentPaddingStyles", publicName: "contentPaddingStyles", isSignal: true, isRequired: false, transformFunction: null }, menuOverlap: { classPropertyName: "menuOverlap", publicName: "menuOverlap", isSignal: true, isRequired: false, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, drawerHeaderTemplate: { classPropertyName: "drawerHeaderTemplate", publicName: "drawerHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerContentTemplate: { classPropertyName: "drawerContentTemplate", publicName: "drawerContentTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerFooterTemplate: { classPropertyName: "drawerFooterTemplate", publicName: "drawerFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerMenuHeaderTemplate: { classPropertyName: "drawerMenuHeaderTemplate", publicName: "drawerMenuHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerMenuFooterTemplate: { classPropertyName: "drawerMenuFooterTemplate", publicName: "drawerMenuFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, compactMenuLabel: { classPropertyName: "compactMenuLabel", publicName: "compactMenuLabel", isSignal: true, isRequired: false, transformFunction: null }, compactHeaderClass: { classPropertyName: "compactHeaderClass", publicName: "compactHeaderClass", isSignal: true, isRequired: false, transformFunction: null }, compactMenuHeaderClass: { classPropertyName: "compactMenuHeaderClass", publicName: "compactMenuHeaderClass", isSignal: true, isRequired: false, transformFunction: null }, minMenuDistance: { classPropertyName: "minMenuDistance", publicName: "minMenuDistance", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", width: "widthChange", opened: "opened", closed: "closed" }, host: { listeners: { "window:mouseup": "stopResizing()", "window:touchend": "stopResizing()", "window:touchcancel": "stopResizing()" }, properties: { "class": "hostClass()", "attr.drawer-position": "position()", "attr.drawer-state": "menuState()" } }, providers: [sidenavStore], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n  @if (isCompact()) {\n    <div class=\"compact-header\">\n      <div [ngClass]=\"compactHeaderClass()\">\n        <div class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 w-100\">\n          @if (drawerHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n          }\n          @if (links()?.length > 0) {\n            <div\n              ngbDropdown\n              #optionDd=\"ngbDropdown\"\n              container=\"body\"\n              placement=\"bottom-end\"\n              [dropdownClass]=\"compactMenuHeaderClass()\">\n              <button\n                ngbDropdownToggle\n                class=\"button is-small is-no-shadow is-block has-text-weight-bold has-text-secondary is-size-6 is-py-1 is-px-2 is-radius-3 is-gap-4 | compact-header--btn\"\n                aria-controls=\"drawer-menu\"\n                type=\"button\">\n                <span>{{ compactMenuLabel() }}</span>\n                <he-svg-icon\n                  class=\"compact-header--btn__icon\"\n                  [name]=\"optionDd.isOpen() ? 'chevron-up' : 'chevron-down'\"\n                  aria-hidden=\"true\" />\n              </button>\n\n              <div ngbDropdownMenu id=\"drawer-menu\">\n                <div class=\"dropdown-content navigation-menu-dropdown\">\n                  <he-navigation-menu (closed)=\"optionDd.close()\" [links]=\"links()\">\n                    @if (drawerMenuHeaderTemplate()) {\n                      <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n                    }\n                    @if (drawerMenuFooterTemplate()) {\n                      <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n                    }\n                  </he-navigation-menu>\n                </div>\n              </div>\n            </div>\n          }\n          @if (drawerFooterTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n          }\n        </div>\n      </div>\n    </div>\n  } @else {\n    <aside>\n      <div\n        class=\"is-absolute h-100 shadow-2 has-background-white | shell__menuContent\"\n        (@sideMenu.done)=\"animationDone($event)\"\n        [@sideMenu]=\"expanded() ? 'full' : 'hidden'\">\n        <div\n          class=\"h-100 is-overflow-y-auto\"\n          [class.is-py-4]=\"!drawerContentTemplate()\"\n          [class.is-px-2]=\"!drawerContentTemplate()\">\n          @if (drawerHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n          }\n          @if (drawerContentTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerContentTemplate()\" />\n          }\n          @if (links()?.length > 0) {\n            <he-navigation-menu [links]=\"links()\">\n              @if (drawerMenuHeaderTemplate()) {\n                <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n              }\n              @if (drawerMenuFooterTemplate()) {\n                <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n              }\n            </he-navigation-menu>\n          }\n          @if (drawerFooterTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n          }\n        </div>\n        @if (collapsible()) {\n          <button\n            (click)=\"toggleMenu()\"\n            (mousedown)=\"startResizing($event)\"\n            (touchstart)=\"startResizing($event)\"\n            class=\"is-absolute is-overflow-hidden is-flex is-justify-content-center is-align-items-center | shell__menuContent--toggle\"\n            pointer>\n            <he-svg-icon [name]=\"resizable() ? 'drag' : toggleIcon()\" size=\"20\" />\n          </button>\n        }\n      </div>\n    </aside>\n  }\n}\n\n<div [class.is-resizing]=\"isHoldingToggle()\" class=\"shell__content | h-100 w-100 is-flex\">\n  <div class=\"shell__content--body | w-100\" [@reduceWidth]=\"reduceAnimation()\">\n    <div #contentContainer class=\"w-100 h-100\" [style]=\"contentStyles()\" [className]=\"contentPaddingStyles()\">\n      <ng-content select=\"[drawer-content]\" />\n    </div>\n  </div>\n</div>\n", styles: ["::ng-deep :root{--drawer-toggle-position: -20px;--sidenav-left-width: 256px;--sidenav-right-width: 256px;--content-transition-left-x: 0;--content-transition-right-x: 0}:host-context[drawer-position=left]{--sidenav-side-transform: 1;--sidenav-width: var(--sidenav-left-width);--content-transition-x: var(--content-transition-left-x);--menu-transition-transform: -1}:host-context[drawer-position=left]>aside{left:0}:host-context[drawer-position=left]>aside>.shell__menuContent{left:0}:host-context[drawer-position=left]>aside>.shell__menuContent>.shell__menuContent--toggle{right:var(--drawer-toggle-position);border-radius:0 9px 9px 0}:host-context[drawer-position=right]{--sidenav-side-transform: 0;--sidenav-width: var(--sidenav-right-width);--content-transition-x: var(--content-transition-right-x);--menu-transition-transform: 1}:host-context[drawer-position=right]>aside{right:0;order:1}:host-context[drawer-position=right]>aside>.shell__menuContent{right:0}:host-context[drawer-position=right]>aside>.shell__menuContent>.shell__menuContent--toggle{left:var(--drawer-toggle-position);border-radius:9px 0 0 9px}:host{position:relative;max-height:100%;display:flex;justify-content:space-between}:host aside{position:sticky;top:var(--navbar-height);z-index:10;height:calc(100vh - var(--navbar-height))}:host aside .shell__menuContent{top:0;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);background:#dbe3ea;border:none;width:20px;height:48px}:host aside ::ng-deep he-collapsible-box{box-shadow:none;padding:4px!important}@media screen and (max-width:1023px){:host aside ::ng-deep he-collapsible-box{background-color:transparent}}:host aside ::ng-deep he-collapsible-box>div{gap:16px!important}:host aside ::ng-deep he-collapsible-box .dropdown-content{box-shadow:none}:host aside ::ng-deep he-collapsible-box .dropdown-item+.dropdown-item{border-top:1px solid #b5b5b5}:host aside ::ng-deep he-collapsible-box .navbar-divider{background-color:#b5b5b5;margin:0}:host.is-resizable .shell__menuContent--toggle:active{cursor:col-resize}.shell__content--body{container-type:inline-size;transition:none}.shell__content:not(.is-resizing) .shell__content--body{transition:transform .3s ease-in-out,width .3s ease-in-out}.navigation-menu-dropdown{padding:.5rem 1rem;width:300px}@media screen and (max-width:767px){.navigation-menu-dropdown{width:calc(100dvw - 3rem)}}.compact-header{position:sticky;top:calc(var(--navbar-height));z-index:10}@media screen and (max-width:767px){.compact-header{top:0}}.compact-header--btn{background:#dbe3ea}he-navigation-menu ::ng-deep .menu{width:100%!important;min-width:100%!important;max-width:100%!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "component", type: NavigationMenuComponent, selector: "he-navigation-menu", inputs: ["links", "sticky", "collapsible", "routerLinkMatchOptions"], outputs: ["closed"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], animations: ANIMATIONS, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DrawerContainerComponent, isStandalone: true, selector: "he-drawer-container", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, compactBreakpoint: { classPropertyName: "compactBreakpoint", publicName: "compactBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, contentStyles: { classPropertyName: "contentStyles", publicName: "contentStyles", isSignal: true, isRequired: false, transformFunction: null }, contentPaddingStyles: { classPropertyName: "contentPaddingStyles", publicName: "contentPaddingStyles", isSignal: true, isRequired: false, transformFunction: null }, menuOverlap: { classPropertyName: "menuOverlap", publicName: "menuOverlap", isSignal: true, isRequired: false, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, secondaryLinks: { classPropertyName: "secondaryLinks", publicName: "secondaryLinks", isSignal: true, isRequired: false, transformFunction: null }, drawerHeaderTemplate: { classPropertyName: "drawerHeaderTemplate", publicName: "drawerHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerContentTemplate: { classPropertyName: "drawerContentTemplate", publicName: "drawerContentTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerFooterTemplate: { classPropertyName: "drawerFooterTemplate", publicName: "drawerFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerMenuHeaderTemplate: { classPropertyName: "drawerMenuHeaderTemplate", publicName: "drawerMenuHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerMenuFooterTemplate: { classPropertyName: "drawerMenuFooterTemplate", publicName: "drawerMenuFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, compactMenuLabel: { classPropertyName: "compactMenuLabel", publicName: "compactMenuLabel", isSignal: true, isRequired: false, transformFunction: null }, compactHeaderClass: { classPropertyName: "compactHeaderClass", publicName: "compactHeaderClass", isSignal: true, isRequired: false, transformFunction: null }, compactMenuHeaderClass: { classPropertyName: "compactMenuHeaderClass", publicName: "compactMenuHeaderClass", isSignal: true, isRequired: false, transformFunction: null }, minMenuDistance: { classPropertyName: "minMenuDistance", publicName: "minMenuDistance", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", width: "widthChange", opened: "opened", closed: "closed" }, host: { listeners: { "window:mouseup": "stopResizing()", "window:touchend": "stopResizing()", "window:touchcancel": "stopResizing()" }, properties: { "class": "hostClass()", "attr.drawer-position": "position()", "attr.drawer-state": "menuState()" } }, providers: [sidenavStore], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n  @if (isCompact()) {\n    <div class=\"compact-header\">\n      <div [ngClass]=\"compactHeaderClass()\">\n        <div class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 w-100\">\n          @if (drawerHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n          }\n          @if (links()?.length > 0) {\n            <div\n              ngbDropdown\n              #optionDd=\"ngbDropdown\"\n              container=\"body\"\n              placement=\"bottom-end\"\n              [dropdownClass]=\"compactMenuHeaderClass()\">\n              <button\n                ngbDropdownToggle\n                class=\"button is-small is-no-shadow is-block has-text-weight-bold has-text-secondary is-size-6 is-py-1 is-px-2 is-radius-3 is-gap-4 | compact-header--btn\"\n                aria-controls=\"drawer-menu\"\n                type=\"button\">\n                <span>{{ compactMenuLabel() }}</span>\n                <he-svg-icon\n                  class=\"compact-header--btn__icon\"\n                  [name]=\"optionDd.isOpen() ? 'chevron-up' : 'chevron-down'\"\n                  aria-hidden=\"true\" />\n              </button>\n\n              <div ngbDropdownMenu id=\"drawer-menu\">\n                <div class=\"dropdown-content navigation-menu-dropdown\">\n                  <he-navigation-menu (closed)=\"optionDd.close()\" [links]=\"links()\" [secondaryLinks]=\"secondaryLinks()\">\n                    @if (drawerMenuHeaderTemplate()) {\n                      <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n                    }\n                    @if (drawerMenuFooterTemplate()) {\n                      <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n                    }\n                  </he-navigation-menu>\n                </div>\n              </div>\n            </div>\n          }\n          @if (drawerFooterTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n          }\n        </div>\n      </div>\n    </div>\n  } @else {\n    <aside>\n      <div\n        class=\"is-absolute h-100 shadow-2 has-background-white | shell__menuContent\"\n        (@sideMenu.done)=\"animationDone($event)\"\n        [@sideMenu]=\"expanded() ? 'full' : 'hidden'\">\n        <div\n          class=\"h-100 is-overflow-y-auto\"\n          [class.is-py-4]=\"!drawerContentTemplate()\"\n          [class.is-px-2]=\"!drawerContentTemplate()\">\n          @if (drawerHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n          }\n          @if (drawerContentTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerContentTemplate()\" />\n          }\n          @if (links()?.length > 0) {\n            <he-navigation-menu [links]=\"links()\" [secondaryLinks]=\"secondaryLinks()\">\n              @if (drawerMenuHeaderTemplate()) {\n                <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n              }\n              @if (drawerMenuFooterTemplate()) {\n                <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n              }\n            </he-navigation-menu>\n          }\n          @if (drawerFooterTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n          }\n        </div>\n        @if (collapsible()) {\n          <button\n            (click)=\"toggleMenu()\"\n            (mousedown)=\"startResizing($event)\"\n            (touchstart)=\"startResizing($event)\"\n            class=\"is-absolute is-overflow-hidden is-flex is-justify-content-center is-align-items-center | shell__menuContent--toggle\"\n            pointer>\n            <he-svg-icon [name]=\"resizable() ? 'drag' : toggleIcon()\" size=\"20\" />\n          </button>\n        }\n      </div>\n    </aside>\n  }\n}\n\n<div [class.is-resizing]=\"isHoldingToggle()\" class=\"shell__content | h-100 w-100 is-flex\">\n  <div class=\"shell__content--body | w-100\" [@reduceWidth]=\"reduceAnimation()\">\n    <div #contentContainer class=\"w-100 h-100\" [style]=\"contentStyles()\" [className]=\"contentPaddingStyles()\">\n      <ng-content select=\"[drawer-content]\" />\n    </div>\n  </div>\n</div>\n", styles: ["::ng-deep :root{--drawer-toggle-position: -20px;--sidenav-left-width: 256px;--sidenav-right-width: 256px;--content-transition-left-x: 0;--content-transition-right-x: 0}:host-context[drawer-position=left]{--sidenav-side-transform: 1;--sidenav-width: var(--sidenav-left-width);--content-transition-x: var(--content-transition-left-x);--menu-transition-transform: -1}:host-context[drawer-position=left]>aside{left:0}:host-context[drawer-position=left]>aside>.shell__menuContent{left:0}:host-context[drawer-position=left]>aside>.shell__menuContent>.shell__menuContent--toggle{right:var(--drawer-toggle-position);border-radius:0 9px 9px 0}:host-context[drawer-position=right]{--sidenav-side-transform: 0;--sidenav-width: var(--sidenav-right-width);--content-transition-x: var(--content-transition-right-x);--menu-transition-transform: 1}:host-context[drawer-position=right]>aside{right:0;order:1}:host-context[drawer-position=right]>aside>.shell__menuContent{right:0}:host-context[drawer-position=right]>aside>.shell__menuContent>.shell__menuContent--toggle{left:var(--drawer-toggle-position);border-radius:9px 0 0 9px}:host{position:relative;max-height:100%;display:flex;justify-content:space-between}:host aside{position:sticky;top:var(--navbar-height);z-index:10;height:calc(100vh - var(--navbar-height))}:host aside .shell__menuContent{top:0;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);background:#dbe3ea;border:none;width:20px;height:48px}:host aside ::ng-deep he-collapsible-box{box-shadow:none;padding:4px!important}@media screen and (max-width:1023px){:host aside ::ng-deep he-collapsible-box{background-color:transparent}}:host aside ::ng-deep he-collapsible-box>div{gap:16px!important}:host aside ::ng-deep he-collapsible-box .dropdown-content{box-shadow:none}:host aside ::ng-deep he-collapsible-box .dropdown-item+.dropdown-item{border-top:1px solid #b5b5b5}:host aside ::ng-deep he-collapsible-box .navbar-divider{background-color:#b5b5b5;margin:0}:host.is-resizable .shell__menuContent--toggle:active{cursor:col-resize}.shell__content--body{container-type:inline-size;transition:none}.shell__content:not(.is-resizing) .shell__content--body{transition:transform .3s ease-in-out,width .3s ease-in-out}.navigation-menu-dropdown{padding:.5rem 1rem;width:300px}@media screen and (max-width:767px){.navigation-menu-dropdown{width:calc(100dvw - 3rem)}}.compact-header{position:sticky;top:calc(var(--navbar-height));z-index:10}@media screen and (max-width:767px){.compact-header{top:0}}.compact-header--btn{background:#dbe3ea}he-navigation-menu ::ng-deep .menu{width:100%!important;min-width:100%!important;max-width:100%!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "component", type: NavigationMenuComponent, selector: "he-navigation-menu", inputs: ["links", "secondaryLinks", "sticky", "collapsible", "routerLinkMatchOptions"], outputs: ["closed"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], animations: ANIMATIONS, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DrawerContainerComponent, decorators: [{
             type: Component$1,
@@ -2329,8 +2331,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         '[class]': 'hostClass()',
                         '[attr.drawer-position]': 'position()',
                         '[attr.drawer-state]': 'menuState()'
-                    }, providers: [sidenavStore], template: "@if (visible()) {\n  @if (isCompact()) {\n    <div class=\"compact-header\">\n      <div [ngClass]=\"compactHeaderClass()\">\n        <div class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 w-100\">\n          @if (drawerHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n          }\n          @if (links()?.length > 0) {\n            <div\n              ngbDropdown\n              #optionDd=\"ngbDropdown\"\n              container=\"body\"\n              placement=\"bottom-end\"\n              [dropdownClass]=\"compactMenuHeaderClass()\">\n              <button\n                ngbDropdownToggle\n                class=\"button is-small is-no-shadow is-block has-text-weight-bold has-text-secondary is-size-6 is-py-1 is-px-2 is-radius-3 is-gap-4 | compact-header--btn\"\n                aria-controls=\"drawer-menu\"\n                type=\"button\">\n                <span>{{ compactMenuLabel() }}</span>\n                <he-svg-icon\n                  class=\"compact-header--btn__icon\"\n                  [name]=\"optionDd.isOpen() ? 'chevron-up' : 'chevron-down'\"\n                  aria-hidden=\"true\" />\n              </button>\n\n              <div ngbDropdownMenu id=\"drawer-menu\">\n                <div class=\"dropdown-content navigation-menu-dropdown\">\n                  <he-navigation-menu (closed)=\"optionDd.close()\" [links]=\"links()\">\n                    @if (drawerMenuHeaderTemplate()) {\n                      <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n                    }\n                    @if (drawerMenuFooterTemplate()) {\n                      <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n                    }\n                  </he-navigation-menu>\n                </div>\n              </div>\n            </div>\n          }\n          @if (drawerFooterTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n          }\n        </div>\n      </div>\n    </div>\n  } @else {\n    <aside>\n      <div\n        class=\"is-absolute h-100 shadow-2 has-background-white | shell__menuContent\"\n        (@sideMenu.done)=\"animationDone($event)\"\n        [@sideMenu]=\"expanded() ? 'full' : 'hidden'\">\n        <div\n          class=\"h-100 is-overflow-y-auto\"\n          [class.is-py-4]=\"!drawerContentTemplate()\"\n          [class.is-px-2]=\"!drawerContentTemplate()\">\n          @if (drawerHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n          }\n          @if (drawerContentTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerContentTemplate()\" />\n          }\n          @if (links()?.length > 0) {\n            <he-navigation-menu [links]=\"links()\">\n              @if (drawerMenuHeaderTemplate()) {\n                <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n              }\n              @if (drawerMenuFooterTemplate()) {\n                <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n              }\n            </he-navigation-menu>\n          }\n          @if (drawerFooterTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n          }\n        </div>\n        @if (collapsible()) {\n          <button\n            (click)=\"toggleMenu()\"\n            (mousedown)=\"startResizing($event)\"\n            (touchstart)=\"startResizing($event)\"\n            class=\"is-absolute is-overflow-hidden is-flex is-justify-content-center is-align-items-center | shell__menuContent--toggle\"\n            pointer>\n            <he-svg-icon [name]=\"resizable() ? 'drag' : toggleIcon()\" size=\"20\" />\n          </button>\n        }\n      </div>\n    </aside>\n  }\n}\n\n<div [class.is-resizing]=\"isHoldingToggle()\" class=\"shell__content | h-100 w-100 is-flex\">\n  <div class=\"shell__content--body | w-100\" [@reduceWidth]=\"reduceAnimation()\">\n    <div #contentContainer class=\"w-100 h-100\" [style]=\"contentStyles()\" [className]=\"contentPaddingStyles()\">\n      <ng-content select=\"[drawer-content]\" />\n    </div>\n  </div>\n</div>\n", styles: ["::ng-deep :root{--drawer-toggle-position: -20px;--sidenav-left-width: 256px;--sidenav-right-width: 256px;--content-transition-left-x: 0;--content-transition-right-x: 0}:host-context[drawer-position=left]{--sidenav-side-transform: 1;--sidenav-width: var(--sidenav-left-width);--content-transition-x: var(--content-transition-left-x);--menu-transition-transform: -1}:host-context[drawer-position=left]>aside{left:0}:host-context[drawer-position=left]>aside>.shell__menuContent{left:0}:host-context[drawer-position=left]>aside>.shell__menuContent>.shell__menuContent--toggle{right:var(--drawer-toggle-position);border-radius:0 9px 9px 0}:host-context[drawer-position=right]{--sidenav-side-transform: 0;--sidenav-width: var(--sidenav-right-width);--content-transition-x: var(--content-transition-right-x);--menu-transition-transform: 1}:host-context[drawer-position=right]>aside{right:0;order:1}:host-context[drawer-position=right]>aside>.shell__menuContent{right:0}:host-context[drawer-position=right]>aside>.shell__menuContent>.shell__menuContent--toggle{left:var(--drawer-toggle-position);border-radius:9px 0 0 9px}:host{position:relative;max-height:100%;display:flex;justify-content:space-between}:host aside{position:sticky;top:var(--navbar-height);z-index:10;height:calc(100vh - var(--navbar-height))}:host aside .shell__menuContent{top:0;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);background:#dbe3ea;border:none;width:20px;height:48px}:host aside ::ng-deep he-collapsible-box{box-shadow:none;padding:4px!important}@media screen and (max-width:1023px){:host aside ::ng-deep he-collapsible-box{background-color:transparent}}:host aside ::ng-deep he-collapsible-box>div{gap:16px!important}:host aside ::ng-deep he-collapsible-box .dropdown-content{box-shadow:none}:host aside ::ng-deep he-collapsible-box .dropdown-item+.dropdown-item{border-top:1px solid #b5b5b5}:host aside ::ng-deep he-collapsible-box .navbar-divider{background-color:#b5b5b5;margin:0}:host.is-resizable .shell__menuContent--toggle:active{cursor:col-resize}.shell__content--body{container-type:inline-size;transition:none}.shell__content:not(.is-resizing) .shell__content--body{transition:transform .3s ease-in-out,width .3s ease-in-out}.navigation-menu-dropdown{padding:.5rem 1rem;width:300px}@media screen and (max-width:767px){.navigation-menu-dropdown{width:calc(100dvw - 3rem)}}.compact-header{position:sticky;top:calc(var(--navbar-height));z-index:10}@media screen and (max-width:767px){.compact-header{top:0}}.compact-header--btn{background:#dbe3ea}he-navigation-menu ::ng-deep .menu{width:100%!important;min-width:100%!important;max-width:100%!important}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { contentContainer: [{ type: i0.ViewChild, args: ['contentContainer', { ...{ read: ElementRef }, isSignal: true }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], compactBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactBreakpoint", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }, { type: i0.Output, args: ["widthChange"] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], contentStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyles", required: false }] }], contentPaddingStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPaddingStyles", required: false }] }], menuOverlap: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuOverlap", required: false }] }], links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }], drawerHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerHeaderTemplate", required: false }] }], drawerContentTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerContentTemplate", required: false }] }], drawerFooterTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerFooterTemplate", required: false }] }], drawerMenuHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerMenuHeaderTemplate", required: false }] }], drawerMenuFooterTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerMenuFooterTemplate", required: false }] }], compactMenuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactMenuLabel", required: false }] }], compactHeaderClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactHeaderClass", required: false }] }], compactMenuHeaderClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactMenuHeaderClass", required: false }] }], minMenuDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "minMenuDistance", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], stopResizing: [{
+                    }, providers: [sidenavStore], template: "@if (visible()) {\n  @if (isCompact()) {\n    <div class=\"compact-header\">\n      <div [ngClass]=\"compactHeaderClass()\">\n        <div class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 w-100\">\n          @if (drawerHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n          }\n          @if (links()?.length > 0) {\n            <div\n              ngbDropdown\n              #optionDd=\"ngbDropdown\"\n              container=\"body\"\n              placement=\"bottom-end\"\n              [dropdownClass]=\"compactMenuHeaderClass()\">\n              <button\n                ngbDropdownToggle\n                class=\"button is-small is-no-shadow is-block has-text-weight-bold has-text-secondary is-size-6 is-py-1 is-px-2 is-radius-3 is-gap-4 | compact-header--btn\"\n                aria-controls=\"drawer-menu\"\n                type=\"button\">\n                <span>{{ compactMenuLabel() }}</span>\n                <he-svg-icon\n                  class=\"compact-header--btn__icon\"\n                  [name]=\"optionDd.isOpen() ? 'chevron-up' : 'chevron-down'\"\n                  aria-hidden=\"true\" />\n              </button>\n\n              <div ngbDropdownMenu id=\"drawer-menu\">\n                <div class=\"dropdown-content navigation-menu-dropdown\">\n                  <he-navigation-menu (closed)=\"optionDd.close()\" [links]=\"links()\" [secondaryLinks]=\"secondaryLinks()\">\n                    @if (drawerMenuHeaderTemplate()) {\n                      <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n                    }\n                    @if (drawerMenuFooterTemplate()) {\n                      <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n                    }\n                  </he-navigation-menu>\n                </div>\n              </div>\n            </div>\n          }\n          @if (drawerFooterTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n          }\n        </div>\n      </div>\n    </div>\n  } @else {\n    <aside>\n      <div\n        class=\"is-absolute h-100 shadow-2 has-background-white | shell__menuContent\"\n        (@sideMenu.done)=\"animationDone($event)\"\n        [@sideMenu]=\"expanded() ? 'full' : 'hidden'\">\n        <div\n          class=\"h-100 is-overflow-y-auto\"\n          [class.is-py-4]=\"!drawerContentTemplate()\"\n          [class.is-px-2]=\"!drawerContentTemplate()\">\n          @if (drawerHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n          }\n          @if (drawerContentTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerContentTemplate()\" />\n          }\n          @if (links()?.length > 0) {\n            <he-navigation-menu [links]=\"links()\" [secondaryLinks]=\"secondaryLinks()\">\n              @if (drawerMenuHeaderTemplate()) {\n                <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n              }\n              @if (drawerMenuFooterTemplate()) {\n                <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n              }\n            </he-navigation-menu>\n          }\n          @if (drawerFooterTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n          }\n        </div>\n        @if (collapsible()) {\n          <button\n            (click)=\"toggleMenu()\"\n            (mousedown)=\"startResizing($event)\"\n            (touchstart)=\"startResizing($event)\"\n            class=\"is-absolute is-overflow-hidden is-flex is-justify-content-center is-align-items-center | shell__menuContent--toggle\"\n            pointer>\n            <he-svg-icon [name]=\"resizable() ? 'drag' : toggleIcon()\" size=\"20\" />\n          </button>\n        }\n      </div>\n    </aside>\n  }\n}\n\n<div [class.is-resizing]=\"isHoldingToggle()\" class=\"shell__content | h-100 w-100 is-flex\">\n  <div class=\"shell__content--body | w-100\" [@reduceWidth]=\"reduceAnimation()\">\n    <div #contentContainer class=\"w-100 h-100\" [style]=\"contentStyles()\" [className]=\"contentPaddingStyles()\">\n      <ng-content select=\"[drawer-content]\" />\n    </div>\n  </div>\n</div>\n", styles: ["::ng-deep :root{--drawer-toggle-position: -20px;--sidenav-left-width: 256px;--sidenav-right-width: 256px;--content-transition-left-x: 0;--content-transition-right-x: 0}:host-context[drawer-position=left]{--sidenav-side-transform: 1;--sidenav-width: var(--sidenav-left-width);--content-transition-x: var(--content-transition-left-x);--menu-transition-transform: -1}:host-context[drawer-position=left]>aside{left:0}:host-context[drawer-position=left]>aside>.shell__menuContent{left:0}:host-context[drawer-position=left]>aside>.shell__menuContent>.shell__menuContent--toggle{right:var(--drawer-toggle-position);border-radius:0 9px 9px 0}:host-context[drawer-position=right]{--sidenav-side-transform: 0;--sidenav-width: var(--sidenav-right-width);--content-transition-x: var(--content-transition-right-x);--menu-transition-transform: 1}:host-context[drawer-position=right]>aside{right:0;order:1}:host-context[drawer-position=right]>aside>.shell__menuContent{right:0}:host-context[drawer-position=right]>aside>.shell__menuContent>.shell__menuContent--toggle{left:var(--drawer-toggle-position);border-radius:9px 0 0 9px}:host{position:relative;max-height:100%;display:flex;justify-content:space-between}:host aside{position:sticky;top:var(--navbar-height);z-index:10;height:calc(100vh - var(--navbar-height))}:host aside .shell__menuContent{top:0;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);background:#dbe3ea;border:none;width:20px;height:48px}:host aside ::ng-deep he-collapsible-box{box-shadow:none;padding:4px!important}@media screen and (max-width:1023px){:host aside ::ng-deep he-collapsible-box{background-color:transparent}}:host aside ::ng-deep he-collapsible-box>div{gap:16px!important}:host aside ::ng-deep he-collapsible-box .dropdown-content{box-shadow:none}:host aside ::ng-deep he-collapsible-box .dropdown-item+.dropdown-item{border-top:1px solid #b5b5b5}:host aside ::ng-deep he-collapsible-box .navbar-divider{background-color:#b5b5b5;margin:0}:host.is-resizable .shell__menuContent--toggle:active{cursor:col-resize}.shell__content--body{container-type:inline-size;transition:none}.shell__content:not(.is-resizing) .shell__content--body{transition:transform .3s ease-in-out,width .3s ease-in-out}.navigation-menu-dropdown{padding:.5rem 1rem;width:300px}@media screen and (max-width:767px){.navigation-menu-dropdown{width:calc(100dvw - 3rem)}}.compact-header{position:sticky;top:calc(var(--navbar-height));z-index:10}@media screen and (max-width:767px){.compact-header{top:0}}.compact-header--btn{background:#dbe3ea}he-navigation-menu ::ng-deep .menu{width:100%!important;min-width:100%!important;max-width:100%!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { contentContainer: [{ type: i0.ViewChild, args: ['contentContainer', { ...{ read: ElementRef }, isSignal: true }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], compactBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactBreakpoint", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }, { type: i0.Output, args: ["widthChange"] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], contentStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyles", required: false }] }], contentPaddingStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPaddingStyles", required: false }] }], menuOverlap: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuOverlap", required: false }] }], links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }], secondaryLinks: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryLinks", required: false }] }], drawerHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerHeaderTemplate", required: false }] }], drawerContentTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerContentTemplate", required: false }] }], drawerFooterTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerFooterTemplate", required: false }] }], drawerMenuHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerMenuHeaderTemplate", required: false }] }], drawerMenuFooterTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerMenuFooterTemplate", required: false }] }], compactMenuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactMenuLabel", required: false }] }], compactHeaderClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactHeaderClass", required: false }] }], compactMenuHeaderClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactMenuHeaderClass", required: false }] }], minMenuDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "minMenuDistance", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], stopResizing: [{
                 type: HostListener,
                 args: ['window:mouseup']
             }, {
@@ -6982,7 +6984,7 @@ const nodeTypeIcon = {
     [NodeType.Source]: 'source',
     [NodeType.Term]: 'term',
     [SchemaType.Property]: 'magnifier',
-    [SchemaType.Transformation]: 'truck'
+    [SchemaType.Transport]: 'truck'
 };
 
 class NodeLinkComponent {
@@ -7630,7 +7632,7 @@ const dataWithConfigModelLogs = (logs, termId) => (data) => {
     const termsLog = termId in log && data.key === 'input'
         ? log[termId].models.reduce((p, c) => {
             // extend requirements if none found
-            p[c].requirements = p[c].requirements || log[c]?.requirements;
+            p[c].requirements = p[c]?.requirements || log[c]?.requirements;
             return p;
         }, log[termId])
         : log;
@@ -7999,6 +8001,7 @@ class GuideOverlayComponent {
         this.domSanitizer = inject(DomSanitizer);
         this.localStorage = inject(LocalStorageService);
         this.guideEnabled = inject(GUIDE_ENABLED);
+        this.scrollStrategy = inject(ScrollStrategyOptions);
         this.responsiveService = inject(ResponsiveService);
         this.service = inject(GuideOverlayService);
         this.pageId = input('', ...(ngDevMode ? [{ debugName: "pageId" }] : []));
@@ -8030,6 +8033,14 @@ class GuideOverlayComponent {
                 offsetX: 24
             }
         ], ...(ngDevMode ? [{ debugName: "positions" }] : []));
+        this.mobilePosition = {
+            originX: 'start',
+            originY: 'center',
+            overlayX: 'end',
+            overlayY: 'top'
+        };
+        this.blockStrategy = this.scrollStrategy.block();
+        this.repositiontrategy = this.scrollStrategy.reposition();
         this.url = computed(() => this.domSanitizer.bypassSecurityTrustResourceUrl([baseUrl(false), 'guide', 'overlay', this.pageId()].filter(Boolean).join('/')), ...(ngDevMode ? [{ debugName: "url" }] : []));
         this.open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
         effect(() => {
@@ -8050,7 +8061,7 @@ class GuideOverlayComponent {
         this.localStorage.store(storageKey$1, JSON.stringify({ width, height }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GuideOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: GuideOverlayComponent, isStandalone: true, selector: "he-guide-overlay", inputs: { pageId: { classPropertyName: "pageId", publicName: "pageId", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, positions: { classPropertyName: "positions", publicName: "positions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { width: "widthChange", height: "heightChange" }, host: { properties: { "class.is-none": "this.hidden" } }, ngImport: i0, template: "<a\n  class=\"has-text-secondary\"\n  (click)=\"$event.stopPropagation(); open.set(!open())\"\n  [ngbTooltip]=\"responsiveService.isTouch() || open() ? null : 'Click to open the Guide'\"\n  container=\"body\">\n  <he-svg-icon name=\"guide-overlay\" size=\"24\" />\n  <span class=\"shadow-origin\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\"></span>\n</a>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions()\"\n  [cdkConnectedOverlayBackdropClass]=\"['cdk-overlay-transparent-backdrop']\"\n  (backdropClick)=\"open.set(false)\">\n  <div\n    class=\"is-relative has-background-white | guide-overlay-container\"\n    [style.width]=\"width() + 'px'\"\n    [style.height]=\"height() + 'px'\"\n    mwlResizable\n    [mouseMoveThrottleMS]=\"100\"\n    (resizing)=\"onResize($event)\"\n    (resizeEnd)=\"onResizeEnd($event)\">\n    <div class=\"is-absolute | resize-handle-left\" mwlResizeHandle [resizeEdges]=\"{ left: true }\"></div>\n    <div class=\"is-absolute | resize-handle-bottom\" mwlResizeHandle [resizeEdges]=\"{ bottom: true }\"></div>\n    <iframe [src]=\"url()\"></iframe>\n  </div>\n</ng-template>\n", styles: ["@media screen and (max-width:767px){.shadow-origin{position:absolute;right:16px}}.resize-handle-bottom{cursor:row-resize;height:5px;width:100%;bottom:0}.resize-handle-left{cursor:col-resize;height:100%;width:5px;left:0}::ng-deep .cdk-overlay-container .guide-overlay-container{max-height:80vh;max-width:80vw;border-radius:6px;border:1px solid rgba(221,225,230,.5);box-shadow:16px 16px 24px #00000014}@media screen and (max-width:767px){::ng-deep .cdk-overlay-container .guide-overlay-container{max-width:calc(100vw - 2 * var(--content-screen-padding-min-size))}}::ng-deep .cdk-overlay-container iframe{display:block;height:100%;width:100%;border:none}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: ResizableDirective, selector: "[mwlResizable]", inputs: ["validateResize", "enableGhostResize", "resizeSnapGrid", "resizeCursors", "ghostElementPositioning", "allowNegativeResizes", "mouseMoveThrottleMS"], outputs: ["resizeStart", "resizing", "resizeEnd"], exportAs: ["mwlResizable"] }, { kind: "directive", type: ResizeHandleDirective, selector: "[mwlResizeHandle]", inputs: ["resizeEdges", "resizableContainer"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: GuideOverlayComponent, isStandalone: true, selector: "he-guide-overlay", inputs: { pageId: { classPropertyName: "pageId", publicName: "pageId", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, positions: { classPropertyName: "positions", publicName: "positions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { width: "widthChange", height: "heightChange" }, host: { properties: { "class.is-none": "this.hidden" } }, ngImport: i0, template: "<a\n  class=\"has-text-secondary\"\n  (click)=\"$event.stopPropagation(); open.set(!open())\"\n  [ngbTooltip]=\"responsiveService.isTouch() || open() ? null : 'Click to open the Guide'\"\n  container=\"body\">\n  <he-svg-icon name=\"guide-overlay\" size=\"24\" />\n  <span class=\"shadow-origin\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\"></span>\n</a>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayBackdropClass]=\"['cdk-overlay-transparent-backdrop']\"\n  [cdkConnectedOverlayPositions]=\"responsiveService.isMobile() ? undefined : positions()\"\n  [cdkConnectedOverlayScrollStrategy]=\"responsiveService.isMobile() ? blockStrategy : repositiontrategy\"\n  [cdkConnectedOverlayPanelClass]=\"responsiveService.isMobile() ? 'fullscreen-overlay' : undefined\"\n  (backdropClick)=\"open.set(false)\">\n  <div\n    class=\"is-relative has-background-white | guide-overlay-container\"\n    [style.width]=\"responsiveService.isMobile() ? '100%' : width() + 'px'\"\n    [style.height]=\"responsiveService.isMobile() ? '100%' : height() + 'px'\"\n    mwlResizable\n    [mouseMoveThrottleMS]=\"100\"\n    (resizing)=\"onResize($event)\"\n    (resizeEnd)=\"onResizeEnd($event)\">\n    @if (!responsiveService.isMobile()) {\n      <div class=\"is-absolute | resize-handle-left\" mwlResizeHandle [resizeEdges]=\"{ left: true }\"></div>\n      <div class=\"is-absolute | resize-handle-bottom\" mwlResizeHandle [resizeEdges]=\"{ bottom: true }\"></div>\n    }\n    <iframe [src]=\"url()\"></iframe>\n  </div>\n</ng-template>\n", styles: ["@media screen and (max-width:767px){.shadow-origin{position:absolute;right:16px}}.resize-handle-bottom{cursor:row-resize;height:5px;width:100%;bottom:0}.resize-handle-left{cursor:col-resize;height:100%;width:5px;left:0}::ng-deep .cdk-overlay-container .guide-overlay-container{max-height:80vh;max-width:80vw;border-radius:6px;border:1px solid rgba(221,225,230,.5);box-shadow:16px 16px 24px #00000014}@media screen and (max-width:767px){::ng-deep .cdk-overlay-container .guide-overlay-container{width:100vw!important;height:100vh!important;max-width:100vw!important;max-height:100vh!important}}::ng-deep .cdk-overlay-container iframe{display:block;height:100%;width:100%;border:none}::ng-deep .fullscreen-overlay{width:100vw!important;height:100vh!important;position:fixed!important;top:0!important;left:0!important;max-width:100vw!important}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: ResizableDirective, selector: "[mwlResizable]", inputs: ["validateResize", "enableGhostResize", "resizeSnapGrid", "resizeCursors", "ghostElementPositioning", "allowNegativeResizes", "mouseMoveThrottleMS"], outputs: ["resizeStart", "resizing", "resizeEnd"], exportAs: ["mwlResizable"] }, { kind: "directive", type: ResizeHandleDirective, selector: "[mwlResizeHandle]", inputs: ["resizeEdges", "resizableContainer"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GuideOverlayComponent, decorators: [{
             type: Component$1,
@@ -8061,7 +8072,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         ResizableDirective,
                         ResizeHandleDirective,
                         HESvgIconComponent
-                    ], template: "<a\n  class=\"has-text-secondary\"\n  (click)=\"$event.stopPropagation(); open.set(!open())\"\n  [ngbTooltip]=\"responsiveService.isTouch() || open() ? null : 'Click to open the Guide'\"\n  container=\"body\">\n  <he-svg-icon name=\"guide-overlay\" size=\"24\" />\n  <span class=\"shadow-origin\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\"></span>\n</a>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions()\"\n  [cdkConnectedOverlayBackdropClass]=\"['cdk-overlay-transparent-backdrop']\"\n  (backdropClick)=\"open.set(false)\">\n  <div\n    class=\"is-relative has-background-white | guide-overlay-container\"\n    [style.width]=\"width() + 'px'\"\n    [style.height]=\"height() + 'px'\"\n    mwlResizable\n    [mouseMoveThrottleMS]=\"100\"\n    (resizing)=\"onResize($event)\"\n    (resizeEnd)=\"onResizeEnd($event)\">\n    <div class=\"is-absolute | resize-handle-left\" mwlResizeHandle [resizeEdges]=\"{ left: true }\"></div>\n    <div class=\"is-absolute | resize-handle-bottom\" mwlResizeHandle [resizeEdges]=\"{ bottom: true }\"></div>\n    <iframe [src]=\"url()\"></iframe>\n  </div>\n</ng-template>\n", styles: ["@media screen and (max-width:767px){.shadow-origin{position:absolute;right:16px}}.resize-handle-bottom{cursor:row-resize;height:5px;width:100%;bottom:0}.resize-handle-left{cursor:col-resize;height:100%;width:5px;left:0}::ng-deep .cdk-overlay-container .guide-overlay-container{max-height:80vh;max-width:80vw;border-radius:6px;border:1px solid rgba(221,225,230,.5);box-shadow:16px 16px 24px #00000014}@media screen and (max-width:767px){::ng-deep .cdk-overlay-container .guide-overlay-container{max-width:calc(100vw - 2 * var(--content-screen-padding-min-size))}}::ng-deep .cdk-overlay-container iframe{display:block;height:100%;width:100%;border:none}\n"] }]
+                    ], template: "<a\n  class=\"has-text-secondary\"\n  (click)=\"$event.stopPropagation(); open.set(!open())\"\n  [ngbTooltip]=\"responsiveService.isTouch() || open() ? null : 'Click to open the Guide'\"\n  container=\"body\">\n  <he-svg-icon name=\"guide-overlay\" size=\"24\" />\n  <span class=\"shadow-origin\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\"></span>\n</a>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayBackdropClass]=\"['cdk-overlay-transparent-backdrop']\"\n  [cdkConnectedOverlayPositions]=\"responsiveService.isMobile() ? undefined : positions()\"\n  [cdkConnectedOverlayScrollStrategy]=\"responsiveService.isMobile() ? blockStrategy : repositiontrategy\"\n  [cdkConnectedOverlayPanelClass]=\"responsiveService.isMobile() ? 'fullscreen-overlay' : undefined\"\n  (backdropClick)=\"open.set(false)\">\n  <div\n    class=\"is-relative has-background-white | guide-overlay-container\"\n    [style.width]=\"responsiveService.isMobile() ? '100%' : width() + 'px'\"\n    [style.height]=\"responsiveService.isMobile() ? '100%' : height() + 'px'\"\n    mwlResizable\n    [mouseMoveThrottleMS]=\"100\"\n    (resizing)=\"onResize($event)\"\n    (resizeEnd)=\"onResizeEnd($event)\">\n    @if (!responsiveService.isMobile()) {\n      <div class=\"is-absolute | resize-handle-left\" mwlResizeHandle [resizeEdges]=\"{ left: true }\"></div>\n      <div class=\"is-absolute | resize-handle-bottom\" mwlResizeHandle [resizeEdges]=\"{ bottom: true }\"></div>\n    }\n    <iframe [src]=\"url()\"></iframe>\n  </div>\n</ng-template>\n", styles: ["@media screen and (max-width:767px){.shadow-origin{position:absolute;right:16px}}.resize-handle-bottom{cursor:row-resize;height:5px;width:100%;bottom:0}.resize-handle-left{cursor:col-resize;height:100%;width:5px;left:0}::ng-deep .cdk-overlay-container .guide-overlay-container{max-height:80vh;max-width:80vw;border-radius:6px;border:1px solid rgba(221,225,230,.5);box-shadow:16px 16px 24px #00000014}@media screen and (max-width:767px){::ng-deep .cdk-overlay-container .guide-overlay-container{width:100vw!important;height:100vh!important;max-width:100vw!important;max-height:100vh!important}}::ng-deep .cdk-overlay-container iframe{display:block;height:100%;width:100%;border:none}::ng-deep .fullscreen-overlay{width:100vw!important;height:100vh!important;position:fixed!important;top:0!important;left:0!important;max-width:100vw!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { pageId: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageId", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }, { type: i0.Output, args: ["widthChange"] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }, { type: i0.Output, args: ["heightChange"] }], positions: [{ type: i0.Input, args: [{ isSignal: true, alias: "positions", required: false }] }], hidden: [{
                 type: HostBinding,
                 args: ['class.is-none']