ng-hub-ui-nav 22.13.0 → 22.14.0

package/README.md

@@ -8,7 +8,7 @@
 A flexible, accessible, and highly customizable navigation component for Angular 21+. It supports horizontal menus, vertical sidebars, mobile collapse modes, stacked drill-down panels, projected start/end slots, and scroll-spy integration.
 
 > [!IMPORTANT]
-> Version `22.13.0` targets Angular 21 and follows the signal-first architecture used across `ng-hub-ui`.
+> Version `22.14.0` targets Angular 21 and follows the signal-first architecture used across `ng-hub-ui`.
 
 ## Documentation and Live Examples
 

package/fesm2022/ng-hub-ui-nav.mjs

@@ -2328,7 +2328,7 @@ class HubNavPanelComponent {
         return !!owningList && owningList === directList;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubNavPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubNavPanelComponent, isStandalone: true, selector: "hub-nav-panel", inputs: { panel: { classPropertyName: "panel", publicName: "panel", isSignal: true, isRequired: true, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, dropdownRenderMode: { classPropertyName: "dropdownRenderMode", publicName: "dropdownRenderMode", isSignal: true, isRequired: false, transformFunction: null }, overlayOwnerClass: { classPropertyName: "overlayOwnerClass", publicName: "overlayOwnerClass", isSignal: true, isRequired: false, transformFunction: null }, overlayOrientationClass: { classPropertyName: "overlayOrientationClass", publicName: "overlayOrientationClass", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closePanel: "closePanel", backClick: "backClick", itemClick: "itemClick", dropdownToggle: "dropdownToggle", panelOpen: "panelOpen" }, host: { attributes: { "role": "navigation", "tabindex": "-1" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.hub-nav-panel--drill-down": "panel().isDrillDown", "class.hub-nav-panel--last": "isLast()", "style.width": "panelWidth()", "attr.aria-label": "ariaLabel()" }, classAttribute: "hub-nav-panel" }, ngImport: i0, template: "@if (showHeader()) {\n\t<div class=\"hub-nav-panel__header\">\n\t\t@if (panel().isDrillDown) {\n\t\t\t<button type=\"button\" class=\"hub-nav-panel__back\" [attr.aria-label]=\"backLabel()\" (click)=\"onBackClick()\">\n\t\t\t\t<span aria-hidden=\"true\">&#8592;</span>\n\t\t\t</button>\n\t\t}\n\t\t<span class=\"hub-nav-panel__title\">{{ currentLabel() }}</span>\n\t\t<button type=\"button\" class=\"hub-nav-panel__close\" [attr.aria-label]=\"closeLabel()\" (click)=\"onCloseClick()\">\n\t\t\t<span aria-hidden=\"true\">&times;</span>\n\t\t</button>\n\t</div>\n}\n\n<div class=\"hub-nav-panel__body\">\n\t<hub-nav-item-list\n\t\t[items]=\"panel().items\"\n\t\t[depth]=\"0\"\n\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t[overlayOwnerClass]=\"overlayOwnerClass()\"\n\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t(itemClick)=\"onItemClick($event)\"\n\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t/>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;height:100%;min-width:0;flex-shrink:0;position:relative;z-index:var(--hub-nav-panel-zindex, 1000);background:var(--hub-nav-panel-bg);color:var(--hub-nav-panel-color);border-inline-start:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);box-shadow:var(--hub-nav-panel-shadow);overflow:hidden}:host-context(.hub-nav--horizontal){width:100%!important;height:auto;min-height:0;flex-direction:row;border-inline-start:none;border-inline-end:none;border-top:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);box-shadow:none;animation:none}.hub-nav-panel__header{display:flex;align-items:center;gap:var(--hub-ref-space-2, .5rem);height:var(--hub-nav-panel-header-height);min-height:var(--hub-nav-panel-header-height);padding:0 var(--hub-nav-panel-header-padding-x);background:var(--hub-nav-panel-header-bg);border-bottom:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color);font-size:var(--hub-nav-panel-header-font-size);font-weight:var(--hub-nav-panel-header-font-weight)}:host-context(.hub-nav--horizontal) .hub-nav-panel__header{flex:0 0 var(--hub-nav-panel-width, 16rem);height:auto;min-height:0;max-height:none;border-bottom:none;border-inline-end:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color)}:host-context(.hub-nav--horizontal):host-context([dir=rtl]) .hub-nav-panel__header{order:2;border-inline-end:none;border-inline-start:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color)}.hub-nav-panel__title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hub-nav-panel__back,.hub-nav-panel__close{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-panel-back-size);height:var(--hub-nav-panel-back-size);padding:0;border:none;border-radius:var(--hub-nav-item-border-radius, .25rem);background:none;color:var(--hub-nav-panel-back-color);font-size:var(--hub-ref-font-size-lg, 1.25rem);cursor:pointer;transition:var(--hub-nav-item-transition, all .15s ease-in-out);flex-shrink:0}.hub-nav-panel__back:hover,.hub-nav-panel__close:hover{background:var(--hub-nav-panel-back-hover-bg)}.hub-nav-panel__back:focus-visible,.hub-nav-panel__close:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-panel__close{margin-inline-start:auto}.hub-nav-panel__body{flex:1;overflow-y:auto;overflow-x:hidden;padding-block:var(--hub-nav-vertical-panel-padding-block, 0);padding-inline:var(--hub-nav-vertical-panel-padding-inline, .5rem);-ms-overflow-style:none;scrollbar-width:var(--hub-nav-scrollbar-width, none);scrollbar-color:var(--hub-nav-scrollbar-color, transparent transparent)}.hub-nav-panel__body::-webkit-scrollbar{width:var(--hub-nav-scrollbar-webkit-size, 0);height:var(--hub-nav-scrollbar-webkit-size, 0)}.hub-nav-panel__body::-webkit-scrollbar-thumb{background-color:var(--hub-nav-scrollbar-thumb-color, transparent);border-radius:var(--hub-nav-scrollbar-thumb-radius, 50rem)}.hub-nav-panel__body::-webkit-scrollbar-track{background-color:var(--hub-nav-scrollbar-track-color, transparent)}:host-context(.hub-nav--horizontal) .hub-nav-panel__body{display:flex;align-items:center;justify-content:flex-start;min-width:0;overflow-x:auto;overflow-y:hidden;padding:var(--hub-nav-horizontal-panel-padding-y, .5rem) var(--hub-nav-horizontal-panel-padding-x, 0)}:host-context(.hub-nav--horizontal) .hub-nav-panel__body>hub-nav-item-list{flex:0 0 auto;width:max-content;min-width:max-content;margin-inline:auto}:host{animation:hubNavPanelEnter .3s ease forwards}@keyframes hubNavPanelEnter{0%{opacity:0;transform:translate(-1rem)}to{opacity:1;transform:translate(0)}}:host-context(.hub-nav-panel-container--right){border-inline-start:none;border-inline-end:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);animation-name:hubNavPanelEnterRight}:host(.hub-nav-panel--last){border-right:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);box-shadow:var(--hub-nav-panel-last-shadow, none)}:host-context(.hub-nav-panel-container--right).hub-nav-panel--last{border-left:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);border-right:none}:host-context(.hub-nav--horizontal).hub-nav-panel--last{border-left:none;border-right:none}@keyframes hubNavPanelEnterRight{0%{opacity:0;transform:translate(1rem)}to{opacity:1;transform:translate(0)}}:host(.hub-nav-panel--drill-down) .hub-nav-panel__body{animation:hubNavPanelDrillDown .2s ease forwards}@keyframes hubNavPanelDrillDown{0%{opacity:0;transform:translate(.5rem)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){:host{animation:none}:host(.hub-nav-panel--drill-down) .hub-nav-panel__body{animation:none}}\n"], dependencies: [{ kind: "component", type: HubNavItemListComponent, selector: "hub-nav-item-list", inputs: ["items", "depth", "itemTemplate", "forceAccordionMode", "dropdownRenderMode", "overlayOwnerClass", "overlayOrientationClass"], outputs: ["itemClick", "dropdownToggle", "panelOpen"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubNavPanelComponent, isStandalone: true, selector: "hub-nav-panel", inputs: { panel: { classPropertyName: "panel", publicName: "panel", isSignal: true, isRequired: true, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, dropdownRenderMode: { classPropertyName: "dropdownRenderMode", publicName: "dropdownRenderMode", isSignal: true, isRequired: false, transformFunction: null }, overlayOwnerClass: { classPropertyName: "overlayOwnerClass", publicName: "overlayOwnerClass", isSignal: true, isRequired: false, transformFunction: null }, overlayOrientationClass: { classPropertyName: "overlayOrientationClass", publicName: "overlayOrientationClass", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closePanel: "closePanel", backClick: "backClick", itemClick: "itemClick", dropdownToggle: "dropdownToggle", panelOpen: "panelOpen" }, host: { attributes: { "role": "navigation", "tabindex": "-1" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.hub-nav-panel--drill-down": "panel().isDrillDown", "class.hub-nav-panel--last": "isLast()", "style.width": "panelWidth()", "attr.aria-label": "ariaLabel()" }, classAttribute: "hub-nav-panel" }, ngImport: i0, template: "@if (showHeader()) {\n\t<div class=\"hub-nav-panel__header\">\n\t\t@if (panel().isDrillDown) {\n\t\t\t<button type=\"button\" class=\"hub-nav-panel__back\" [attr.aria-label]=\"backLabel()\" (click)=\"onBackClick()\">\n\t\t\t\t<span aria-hidden=\"true\">&#8592;</span>\n\t\t\t</button>\n\t\t}\n\t\t<span class=\"hub-nav-panel__title\">{{ currentLabel() }}</span>\n\t\t<button type=\"button\" class=\"hub-nav-panel__close\" [attr.aria-label]=\"closeLabel()\" (click)=\"onCloseClick()\">\n\t\t\t<span aria-hidden=\"true\">&times;</span>\n\t\t</button>\n\t</div>\n}\n\n<div class=\"hub-nav-panel__body\">\n\t<hub-nav-item-list\n\t\t[items]=\"panel().items\"\n\t\t[depth]=\"0\"\n\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t[overlayOwnerClass]=\"overlayOwnerClass()\"\n\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t(itemClick)=\"onItemClick($event)\"\n\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t/>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;height:100%;min-width:0;flex-shrink:0;position:relative;z-index:var(--hub-nav-panel-zindex, 1000);background:var(--hub-nav-panel-bg);color:var(--hub-nav-panel-color);border-inline-start:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);box-shadow:var(--hub-nav-panel-shadow);overflow:hidden}:host-context(.hub-nav--horizontal){width:100%!important;height:auto;min-height:0;flex-direction:row;border-inline-start:none;border-inline-end:none;border-top:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);box-shadow:none;animation:none}.hub-nav-panel__header{display:flex;align-items:center;gap:var(--hub-ref-space-2, .5rem);height:var(--hub-nav-panel-header-height);min-height:var(--hub-nav-panel-header-height);padding:0 var(--hub-nav-panel-header-padding-x);background:var(--hub-nav-panel-header-bg);border-bottom:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color);font-size:var(--hub-nav-panel-header-font-size);font-weight:var(--hub-nav-panel-header-font-weight)}:host-context(.hub-nav--horizontal) .hub-nav-panel__header{flex:0 0 var(--hub-nav-panel-width, 16rem);height:auto;min-height:0;max-height:none;border-bottom:none;border-inline-end:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color)}:host-context(.hub-nav--horizontal):host-context([dir=rtl]) .hub-nav-panel__header{order:2;border-inline-end:none;border-inline-start:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color)}.hub-nav-panel__title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hub-nav-panel__back,.hub-nav-panel__close{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-panel-back-size);height:var(--hub-nav-panel-back-size);padding:0;border:none;border-radius:var(--hub-nav-item-border-radius, .25rem);background:none;color:var(--hub-nav-panel-back-color);font-size:var(--hub-ref-font-size-lg, 1.25rem);cursor:pointer;transition:var(--hub-nav-item-transition, all .15s ease-in-out);flex-shrink:0}.hub-nav-panel__back:hover,.hub-nav-panel__close:hover{background:var(--hub-nav-panel-back-hover-bg)}.hub-nav-panel__back:focus-visible,.hub-nav-panel__close:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-panel__close{margin-inline-start:auto}.hub-nav-panel__body{flex:1;overflow-y:auto;overflow-x:hidden;padding-block:var(--hub-nav-vertical-panel-padding-block, 0);padding-inline:var(--hub-nav-vertical-panel-padding-inline, .5rem);-ms-overflow-style:none;scrollbar-width:var(--hub-nav-scrollbar-width, none);scrollbar-color:var(--hub-nav-scrollbar-color, transparent transparent)}.hub-nav-panel__body::-webkit-scrollbar{width:var(--hub-nav-scrollbar-webkit-size, 0);height:var(--hub-nav-scrollbar-webkit-size, 0)}.hub-nav-panel__body::-webkit-scrollbar-thumb{background-color:var(--hub-nav-scrollbar-thumb-color, transparent);border-radius:var(--hub-nav-scrollbar-thumb-radius, 50rem)}.hub-nav-panel__body::-webkit-scrollbar-track{background-color:var(--hub-nav-scrollbar-track-color, transparent)}:host-context(.hub-nav--horizontal) .hub-nav-panel__body{display:flex;align-items:center;justify-content:flex-start;min-width:0;overflow-x:auto;overflow-y:hidden;padding:var(--hub-nav-horizontal-panel-padding-y, .5rem) var(--hub-nav-horizontal-panel-padding-x, 0)}:host-context(.hub-nav--horizontal) .hub-nav-panel__body>hub-nav-item-list{flex:0 0 auto;width:max-content;min-width:max-content;margin-inline:auto}:host{animation:hubNavPanelEnter .3s ease forwards}@keyframes hubNavPanelEnter{0%{opacity:0;transform:translate(-1rem)}to{opacity:1;transform:translate(0)}}:host-context(.hub-nav-panel-container--right){border-inline-start:none;border-inline-end:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);animation-name:hubNavPanelEnterRight}:host(.hub-nav-panel--last){border-right:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);box-shadow:var(--hub-nav-panel-last-shadow, none);border-start-end-radius:var(--hub-nav-border-radius, 0);border-end-end-radius:var(--hub-nav-border-radius, 0)}:host-context(.hub-nav-panel-container--right).hub-nav-panel--last{border-left:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);border-right:none;border-start-end-radius:0;border-end-end-radius:0;border-start-start-radius:var(--hub-nav-border-radius, 0);border-end-start-radius:var(--hub-nav-border-radius, 0)}:host-context(.hub-nav--horizontal).hub-nav-panel--last{border-left:none;border-right:none;border-radius:0}@keyframes hubNavPanelEnterRight{0%{opacity:0;transform:translate(1rem)}to{opacity:1;transform:translate(0)}}:host(.hub-nav-panel--drill-down) .hub-nav-panel__body{animation:hubNavPanelDrillDown .2s ease forwards}@keyframes hubNavPanelDrillDown{0%{opacity:0;transform:translate(.5rem)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){:host{animation:none}:host(.hub-nav-panel--drill-down) .hub-nav-panel__body{animation:none}}\n"], dependencies: [{ kind: "component", type: HubNavItemListComponent, selector: "hub-nav-item-list", inputs: ["items", "depth", "itemTemplate", "forceAccordionMode", "dropdownRenderMode", "overlayOwnerClass", "overlayOrientationClass"], outputs: ["itemClick", "dropdownToggle", "panelOpen"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubNavPanelComponent, decorators: [{
             type: Component,
@@ -2341,7 +2341,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         '[attr.aria-label]': 'ariaLabel()',
                         tabindex: '-1',
                         '(keydown)': 'onKeyDown($event)'
-                    }, template: "@if (showHeader()) {\n\t<div class=\"hub-nav-panel__header\">\n\t\t@if (panel().isDrillDown) {\n\t\t\t<button type=\"button\" class=\"hub-nav-panel__back\" [attr.aria-label]=\"backLabel()\" (click)=\"onBackClick()\">\n\t\t\t\t<span aria-hidden=\"true\">&#8592;</span>\n\t\t\t</button>\n\t\t}\n\t\t<span class=\"hub-nav-panel__title\">{{ currentLabel() }}</span>\n\t\t<button type=\"button\" class=\"hub-nav-panel__close\" [attr.aria-label]=\"closeLabel()\" (click)=\"onCloseClick()\">\n\t\t\t<span aria-hidden=\"true\">&times;</span>\n\t\t</button>\n\t</div>\n}\n\n<div class=\"hub-nav-panel__body\">\n\t<hub-nav-item-list\n\t\t[items]=\"panel().items\"\n\t\t[depth]=\"0\"\n\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t[overlayOwnerClass]=\"overlayOwnerClass()\"\n\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t(itemClick)=\"onItemClick($event)\"\n\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t/>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;height:100%;min-width:0;flex-shrink:0;position:relative;z-index:var(--hub-nav-panel-zindex, 1000);background:var(--hub-nav-panel-bg);color:var(--hub-nav-panel-color);border-inline-start:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);box-shadow:var(--hub-nav-panel-shadow);overflow:hidden}:host-context(.hub-nav--horizontal){width:100%!important;height:auto;min-height:0;flex-direction:row;border-inline-start:none;border-inline-end:none;border-top:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);box-shadow:none;animation:none}.hub-nav-panel__header{display:flex;align-items:center;gap:var(--hub-ref-space-2, .5rem);height:var(--hub-nav-panel-header-height);min-height:var(--hub-nav-panel-header-height);padding:0 var(--hub-nav-panel-header-padding-x);background:var(--hub-nav-panel-header-bg);border-bottom:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color);font-size:var(--hub-nav-panel-header-font-size);font-weight:var(--hub-nav-panel-header-font-weight)}:host-context(.hub-nav--horizontal) .hub-nav-panel__header{flex:0 0 var(--hub-nav-panel-width, 16rem);height:auto;min-height:0;max-height:none;border-bottom:none;border-inline-end:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color)}:host-context(.hub-nav--horizontal):host-context([dir=rtl]) .hub-nav-panel__header{order:2;border-inline-end:none;border-inline-start:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color)}.hub-nav-panel__title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hub-nav-panel__back,.hub-nav-panel__close{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-panel-back-size);height:var(--hub-nav-panel-back-size);padding:0;border:none;border-radius:var(--hub-nav-item-border-radius, .25rem);background:none;color:var(--hub-nav-panel-back-color);font-size:var(--hub-ref-font-size-lg, 1.25rem);cursor:pointer;transition:var(--hub-nav-item-transition, all .15s ease-in-out);flex-shrink:0}.hub-nav-panel__back:hover,.hub-nav-panel__close:hover{background:var(--hub-nav-panel-back-hover-bg)}.hub-nav-panel__back:focus-visible,.hub-nav-panel__close:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-panel__close{margin-inline-start:auto}.hub-nav-panel__body{flex:1;overflow-y:auto;overflow-x:hidden;padding-block:var(--hub-nav-vertical-panel-padding-block, 0);padding-inline:var(--hub-nav-vertical-panel-padding-inline, .5rem);-ms-overflow-style:none;scrollbar-width:var(--hub-nav-scrollbar-width, none);scrollbar-color:var(--hub-nav-scrollbar-color, transparent transparent)}.hub-nav-panel__body::-webkit-scrollbar{width:var(--hub-nav-scrollbar-webkit-size, 0);height:var(--hub-nav-scrollbar-webkit-size, 0)}.hub-nav-panel__body::-webkit-scrollbar-thumb{background-color:var(--hub-nav-scrollbar-thumb-color, transparent);border-radius:var(--hub-nav-scrollbar-thumb-radius, 50rem)}.hub-nav-panel__body::-webkit-scrollbar-track{background-color:var(--hub-nav-scrollbar-track-color, transparent)}:host-context(.hub-nav--horizontal) .hub-nav-panel__body{display:flex;align-items:center;justify-content:flex-start;min-width:0;overflow-x:auto;overflow-y:hidden;padding:var(--hub-nav-horizontal-panel-padding-y, .5rem) var(--hub-nav-horizontal-panel-padding-x, 0)}:host-context(.hub-nav--horizontal) .hub-nav-panel__body>hub-nav-item-list{flex:0 0 auto;width:max-content;min-width:max-content;margin-inline:auto}:host{animation:hubNavPanelEnter .3s ease forwards}@keyframes hubNavPanelEnter{0%{opacity:0;transform:translate(-1rem)}to{opacity:1;transform:translate(0)}}:host-context(.hub-nav-panel-container--right){border-inline-start:none;border-inline-end:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);animation-name:hubNavPanelEnterRight}:host(.hub-nav-panel--last){border-right:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);box-shadow:var(--hub-nav-panel-last-shadow, none)}:host-context(.hub-nav-panel-container--right).hub-nav-panel--last{border-left:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);border-right:none}:host-context(.hub-nav--horizontal).hub-nav-panel--last{border-left:none;border-right:none}@keyframes hubNavPanelEnterRight{0%{opacity:0;transform:translate(1rem)}to{opacity:1;transform:translate(0)}}:host(.hub-nav-panel--drill-down) .hub-nav-panel__body{animation:hubNavPanelDrillDown .2s ease forwards}@keyframes hubNavPanelDrillDown{0%{opacity:0;transform:translate(.5rem)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){:host{animation:none}:host(.hub-nav-panel--drill-down) .hub-nav-panel__body{animation:none}}\n"] }]
+                    }, template: "@if (showHeader()) {\n\t<div class=\"hub-nav-panel__header\">\n\t\t@if (panel().isDrillDown) {\n\t\t\t<button type=\"button\" class=\"hub-nav-panel__back\" [attr.aria-label]=\"backLabel()\" (click)=\"onBackClick()\">\n\t\t\t\t<span aria-hidden=\"true\">&#8592;</span>\n\t\t\t</button>\n\t\t}\n\t\t<span class=\"hub-nav-panel__title\">{{ currentLabel() }}</span>\n\t\t<button type=\"button\" class=\"hub-nav-panel__close\" [attr.aria-label]=\"closeLabel()\" (click)=\"onCloseClick()\">\n\t\t\t<span aria-hidden=\"true\">&times;</span>\n\t\t</button>\n\t</div>\n}\n\n<div class=\"hub-nav-panel__body\">\n\t<hub-nav-item-list\n\t\t[items]=\"panel().items\"\n\t\t[depth]=\"0\"\n\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t[overlayOwnerClass]=\"overlayOwnerClass()\"\n\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t(itemClick)=\"onItemClick($event)\"\n\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t/>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;height:100%;min-width:0;flex-shrink:0;position:relative;z-index:var(--hub-nav-panel-zindex, 1000);background:var(--hub-nav-panel-bg);color:var(--hub-nav-panel-color);border-inline-start:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);box-shadow:var(--hub-nav-panel-shadow);overflow:hidden}:host-context(.hub-nav--horizontal){width:100%!important;height:auto;min-height:0;flex-direction:row;border-inline-start:none;border-inline-end:none;border-top:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);box-shadow:none;animation:none}.hub-nav-panel__header{display:flex;align-items:center;gap:var(--hub-ref-space-2, .5rem);height:var(--hub-nav-panel-header-height);min-height:var(--hub-nav-panel-header-height);padding:0 var(--hub-nav-panel-header-padding-x);background:var(--hub-nav-panel-header-bg);border-bottom:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color);font-size:var(--hub-nav-panel-header-font-size);font-weight:var(--hub-nav-panel-header-font-weight)}:host-context(.hub-nav--horizontal) .hub-nav-panel__header{flex:0 0 var(--hub-nav-panel-width, 16rem);height:auto;min-height:0;max-height:none;border-bottom:none;border-inline-end:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color)}:host-context(.hub-nav--horizontal):host-context([dir=rtl]) .hub-nav-panel__header{order:2;border-inline-end:none;border-inline-start:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color)}.hub-nav-panel__title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hub-nav-panel__back,.hub-nav-panel__close{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-panel-back-size);height:var(--hub-nav-panel-back-size);padding:0;border:none;border-radius:var(--hub-nav-item-border-radius, .25rem);background:none;color:var(--hub-nav-panel-back-color);font-size:var(--hub-ref-font-size-lg, 1.25rem);cursor:pointer;transition:var(--hub-nav-item-transition, all .15s ease-in-out);flex-shrink:0}.hub-nav-panel__back:hover,.hub-nav-panel__close:hover{background:var(--hub-nav-panel-back-hover-bg)}.hub-nav-panel__back:focus-visible,.hub-nav-panel__close:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-panel__close{margin-inline-start:auto}.hub-nav-panel__body{flex:1;overflow-y:auto;overflow-x:hidden;padding-block:var(--hub-nav-vertical-panel-padding-block, 0);padding-inline:var(--hub-nav-vertical-panel-padding-inline, .5rem);-ms-overflow-style:none;scrollbar-width:var(--hub-nav-scrollbar-width, none);scrollbar-color:var(--hub-nav-scrollbar-color, transparent transparent)}.hub-nav-panel__body::-webkit-scrollbar{width:var(--hub-nav-scrollbar-webkit-size, 0);height:var(--hub-nav-scrollbar-webkit-size, 0)}.hub-nav-panel__body::-webkit-scrollbar-thumb{background-color:var(--hub-nav-scrollbar-thumb-color, transparent);border-radius:var(--hub-nav-scrollbar-thumb-radius, 50rem)}.hub-nav-panel__body::-webkit-scrollbar-track{background-color:var(--hub-nav-scrollbar-track-color, transparent)}:host-context(.hub-nav--horizontal) .hub-nav-panel__body{display:flex;align-items:center;justify-content:flex-start;min-width:0;overflow-x:auto;overflow-y:hidden;padding:var(--hub-nav-horizontal-panel-padding-y, .5rem) var(--hub-nav-horizontal-panel-padding-x, 0)}:host-context(.hub-nav--horizontal) .hub-nav-panel__body>hub-nav-item-list{flex:0 0 auto;width:max-content;min-width:max-content;margin-inline:auto}:host{animation:hubNavPanelEnter .3s ease forwards}@keyframes hubNavPanelEnter{0%{opacity:0;transform:translate(-1rem)}to{opacity:1;transform:translate(0)}}:host-context(.hub-nav-panel-container--right){border-inline-start:none;border-inline-end:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);animation-name:hubNavPanelEnterRight}:host(.hub-nav-panel--last){border-right:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);box-shadow:var(--hub-nav-panel-last-shadow, none);border-start-end-radius:var(--hub-nav-border-radius, 0);border-end-end-radius:var(--hub-nav-border-radius, 0)}:host-context(.hub-nav-panel-container--right).hub-nav-panel--last{border-left:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);border-right:none;border-start-end-radius:0;border-end-end-radius:0;border-start-start-radius:var(--hub-nav-border-radius, 0);border-end-start-radius:var(--hub-nav-border-radius, 0)}:host-context(.hub-nav--horizontal).hub-nav-panel--last{border-left:none;border-right:none;border-radius:0}@keyframes hubNavPanelEnterRight{0%{opacity:0;transform:translate(1rem)}to{opacity:1;transform:translate(0)}}:host(.hub-nav-panel--drill-down) .hub-nav-panel__body{animation:hubNavPanelDrillDown .2s ease forwards}@keyframes hubNavPanelDrillDown{0%{opacity:0;transform:translate(.5rem)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){:host{animation:none}:host(.hub-nav-panel--drill-down) .hub-nav-panel__body{animation:none}}\n"] }]
         }], propDecorators: { panel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panel", required: true }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], isLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLast", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], dropdownRenderMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownRenderMode", required: false }] }], overlayOwnerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOwnerClass", required: false }] }], overlayOrientationClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOrientationClass", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], closePanel: [{ type: i0.Output, args: ["closePanel"] }], backClick: [{ type: i0.Output, args: ["backClick"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], dropdownToggle: [{ type: i0.Output, args: ["dropdownToggle"] }], panelOpen: [{ type: i0.Output, args: ["panelOpen"] }] } });
 
 /**