@memberjunction/ng-ui-components 6.1.0-edge.4 → 6.1.0-edge.6

package/dist/lib/left-nav/left-nav.component.js

@@ -11,32 +11,32 @@ const _forTrack0 = ($index, $item) => $item.id;
 function MJLeftNavComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 12);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵclassMap(ctx_r1.ActiveTriggerItem.icon);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap(ctx_r0.ActiveTriggerItem.icon);
 } }
 function MJLeftNavComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
+    const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 13);
-    i0.ɵɵlistener("click", function MJLeftNavComponent_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleCollapsed()); });
+    i0.ɵɵlistener("click", function MJLeftNavComponent_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.ToggleCollapsed()); });
     i0.ɵɵelement(1, "i", 14);
     i0.ɵɵelementEnd();
     i0.ɵɵelement(2, "div", 15);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵstyleProp("margin-left", ctx_r1.CollapseToggleMarginPx, "px");
-    i0.ɵɵproperty("title", ctx_r1.Collapsed ? "Expand navigation" : "Collapse navigation");
-    i0.ɵɵattribute("aria-label", ctx_r1.Collapsed ? "Expand navigation" : "Collapse navigation")("aria-expanded", !ctx_r1.Collapsed)("aria-controls", ctx_r1.NavRegionId);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("margin-left", ctx_r0.CollapseToggleMarginPx, "px");
+    i0.ɵɵproperty("title", ctx_r0.Collapsed ? "Expand navigation" : "Collapse navigation");
+    i0.ɵɵattribute("aria-label", ctx_r0.Collapsed ? "Expand navigation" : "Collapse navigation")("aria-expanded", !ctx_r0.Collapsed)("aria-controls", ctx_r0.NavRegionId);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("fa-angles-right", ctx_r1.Collapsed)("fa-angles-left", !ctx_r1.Collapsed);
+    i0.ɵɵclassProp("fa-angles-right", ctx_r0.Collapsed)("fa-angles-left", !ctx_r0.Collapsed);
 } }
 function MJLeftNavComponent_For_15_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 16);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const section_r4 = i0.ɵɵnextContext().$implicit;
+    const section_r3 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(section_r4.label);
+    i0.ɵɵtextInterpolate(section_r3.label);
 } }
 function MJLeftNavComponent_For_15_For_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -44,33 +44,33 @@ function MJLeftNavComponent_For_15_For_2_ng_container_0_Template(rf, ctx) { if (
 function MJLeftNavComponent_For_15_For_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, MJLeftNavComponent_For_15_For_2_ng_container_0_Template, 1, 0, "ng-container", 17);
 } if (rf & 2) {
-    const item_r5 = ctx.$implicit;
-    const section_r4 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext();
-    const itemTpl_r6 = i0.ɵɵreference(18);
-    i0.ɵɵproperty("ngTemplateOutlet", itemTpl_r6)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c2, item_r5, ctx_r1.ShowTreeStructure && ctx_r1.HasExpandableItems(section_r4.items)));
+    const item_r4 = ctx.$implicit;
+    const section_r3 = i0.ɵɵnextContext().$implicit;
+    const ctx_r0 = i0.ɵɵnextContext();
+    const itemTpl_r5 = i0.ɵɵreference(18);
+    i0.ɵɵproperty("ngTemplateOutlet", itemTpl_r5)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c2, item_r4, ctx_r0.ShowTreeStructure && ctx_r0.HasExpandableItems(section_r3.items)));
 } }
 function MJLeftNavComponent_For_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, MJLeftNavComponent_For_15_Conditional_0_Template, 2, 1, "div", 16);
     i0.ɵɵrepeaterCreate(1, MJLeftNavComponent_For_15_For_2_Template, 1, 5, "ng-container", null, _forTrack0);
 } if (rf & 2) {
-    const section_r4 = ctx.$implicit;
-    i0.ɵɵconditional(section_r4.label ? 0 : -1);
+    const section_r3 = ctx.$implicit;
+    i0.ɵɵconditional(section_r3.label ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(section_r4.items);
+    i0.ɵɵrepeater(section_r3.items);
 } }
 function MJLeftNavComponent_ng_template_17_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
+    const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 21);
-    i0.ɵɵlistener("click", function MJLeftNavComponent_ng_template_17_Conditional_0_Conditional_1_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r7); const item_r8 = i0.ɵɵnextContext(2).item; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnItemToggle($event, item_r8)); });
+    i0.ɵɵlistener("click", function MJLeftNavComponent_ng_template_17_Conditional_0_Conditional_1_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r6); const item_r7 = i0.ɵɵnextContext(2).item; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnItemToggle($event, item_r7)); });
     i0.ɵɵelement(1, "i", 22);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r8 = i0.ɵɵnextContext(2).item;
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵattribute("aria-label", ctx_r1.IsExpanded(item_r8.id) ? "Collapse" : "Expand")("aria-expanded", ctx_r1.IsExpanded(item_r8.id));
+    const item_r7 = i0.ɵɵnextContext(2).item;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("aria-label", ctx_r0.IsExpanded(item_r7.id) ? "Collapse" : "Expand")("aria-expanded", ctx_r0.IsExpanded(item_r7.id));
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("fa-chevron-down", ctx_r1.IsExpanded(item_r8.id))("fa-chevron-right", !ctx_r1.IsExpanded(item_r8.id));
+    i0.ɵɵclassProp("fa-chevron-down", ctx_r0.IsExpanded(item_r7.id))("fa-chevron-right", !ctx_r0.IsExpanded(item_r7.id));
 } }
 function MJLeftNavComponent_ng_template_17_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 20);
@@ -84,19 +84,19 @@ function MJLeftNavComponent_ng_template_17_Conditional_0_Conditional_4_For_1_ng_
 function MJLeftNavComponent_ng_template_17_Conditional_0_Conditional_4_For_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, MJLeftNavComponent_ng_template_17_Conditional_0_Conditional_4_For_1_ng_container_0_Template, 1, 0, "ng-container", 17);
 } if (rf & 2) {
-    const child_r9 = ctx.$implicit;
-    const ctx_r9 = i0.ɵɵnextContext(3);
-    const depth_r11 = ctx_r9.depth;
-    const hasExpandable_r12 = ctx_r9.hasExpandable;
+    const child_r8 = ctx.$implicit;
+    const ctx_r8 = i0.ɵɵnextContext(3);
+    const depth_r10 = ctx_r8.depth;
+    const hasExpandable_r11 = ctx_r8.hasExpandable;
     i0.ɵɵnextContext();
-    const itemTpl_r6 = i0.ɵɵreference(18);
-    i0.ɵɵproperty("ngTemplateOutlet", itemTpl_r6)("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c4, child_r9, depth_r11 + 1, hasExpandable_r12));
+    const itemTpl_r5 = i0.ɵɵreference(18);
+    i0.ɵɵproperty("ngTemplateOutlet", itemTpl_r5)("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c4, child_r8, depth_r10 + 1, hasExpandable_r11));
 } }
 function MJLeftNavComponent_ng_template_17_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵrepeaterCreate(0, MJLeftNavComponent_ng_template_17_Conditional_0_Conditional_4_For_1_Template, 1, 6, "ng-container", null, _forTrack0);
 } if (rf & 2) {
-    const item_r8 = i0.ɵɵnextContext(2).item;
-    i0.ɵɵrepeater(item_r8.children);
+    const item_r7 = i0.ɵɵnextContext(2).item;
+    i0.ɵɵrepeater(item_r7.children);
 } }
 function MJLeftNavComponent_ng_template_17_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 18);
@@ -105,18 +105,18 @@ function MJLeftNavComponent_ng_template_17_Conditional_0_Template(rf, ctx) { if
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(4, MJLeftNavComponent_ng_template_17_Conditional_0_Conditional_4_Template, 2, 0);
 } if (rf & 2) {
-    const ctx_r9 = i0.ɵɵnextContext();
-    const item_r8 = ctx_r9.item;
-    const depth_r11 = ctx_r9.depth;
-    const ctx_r1 = i0.ɵɵnextContext();
-    const itemBtn_r13 = i0.ɵɵreference(20);
-    i0.ɵɵstyleProp("padding-left", depth_r11 * 14, "px");
+    const ctx_r8 = i0.ɵɵnextContext();
+    const item_r7 = ctx_r8.item;
+    const depth_r10 = ctx_r8.depth;
+    const ctx_r0 = i0.ɵɵnextContext();
+    const itemBtn_r12 = i0.ɵɵreference(20);
+    i0.ɵɵstyleProp("padding-left", depth_r10 * 14, "px");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r8.children.length > 0 ? 1 : 2);
+    i0.ɵɵconditional(item_r7.children.length > 0 ? 1 : 2);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngTemplateOutlet", itemBtn_r13)("ngTemplateOutletContext", i0.ɵɵpureFunction1(6, _c3, item_r8));
+    i0.ɵɵproperty("ngTemplateOutlet", itemBtn_r12)("ngTemplateOutletContext", i0.ɵɵpureFunction1(6, _c3, item_r7));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r8.children.length > 0 && ctx_r1.IsExpanded(item_r8.id) ? 4 : -1);
+    i0.ɵɵconditional(item_r7.children.length > 0 && ctx_r0.IsExpanded(item_r7.id) ? 4 : -1);
 } }
 function MJLeftNavComponent_ng_template_17_Conditional_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -124,56 +124,56 @@ function MJLeftNavComponent_ng_template_17_Conditional_1_ng_container_0_Template
 function MJLeftNavComponent_ng_template_17_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, MJLeftNavComponent_ng_template_17_Conditional_1_ng_container_0_Template, 1, 0, "ng-container", 17);
 } if (rf & 2) {
-    const item_r8 = i0.ɵɵnextContext().item;
+    const item_r7 = i0.ɵɵnextContext().item;
     i0.ɵɵnextContext();
-    const itemBtn_r13 = i0.ɵɵreference(20);
-    i0.ɵɵproperty("ngTemplateOutlet", itemBtn_r13)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c3, item_r8));
+    const itemBtn_r12 = i0.ɵɵreference(20);
+    i0.ɵɵproperty("ngTemplateOutlet", itemBtn_r12)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c3, item_r7));
 } }
 function MJLeftNavComponent_ng_template_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, MJLeftNavComponent_ng_template_17_Conditional_0_Template, 5, 8)(1, MJLeftNavComponent_ng_template_17_Conditional_1_Template, 1, 4, "ng-container");
 } if (rf & 2) {
-    const item_r8 = ctx.item;
-    const hasExpandable_r12 = ctx.hasExpandable;
-    i0.ɵɵconditional(item_r8.children !== undefined && hasExpandable_r12 ? 0 : 1);
+    const item_r7 = ctx.item;
+    const hasExpandable_r11 = ctx.hasExpandable;
+    i0.ɵɵconditional(item_r7.children !== undefined && hasExpandable_r11 ? 0 : 1);
 } }
 function MJLeftNavComponent_ng_template_19_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 30);
 } if (rf & 2) {
-    const item_r15 = i0.ɵɵnextContext().item;
-    i0.ɵɵclassMap(item_r15.icon);
+    const item_r14 = i0.ɵɵnextContext().item;
+    i0.ɵɵclassMap(item_r14.icon);
 } }
 function MJLeftNavComponent_ng_template_19_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 25);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r15 = i0.ɵɵnextContext().item;
-    const ctx_r1 = i0.ɵɵnextContext();
+    const item_r14 = i0.ɵɵnextContext().item;
+    const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r1.ItemInitial(item_r15));
+    i0.ɵɵtextInterpolate(ctx_r0.ItemInitial(item_r14));
 } }
 function MJLeftNavComponent_ng_template_19_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 28);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r15 = i0.ɵɵnextContext().item;
+    const item_r14 = i0.ɵɵnextContext().item;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(item_r15.description);
+    i0.ɵɵtextInterpolate(item_r14.description);
 } }
 function MJLeftNavComponent_ng_template_19_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 29);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r15 = i0.ɵɵnextContext().item;
+    const item_r14 = i0.ɵɵnextContext().item;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(item_r15.badge);
+    i0.ɵɵtextInterpolate(item_r14.badge);
 } }
 function MJLeftNavComponent_ng_template_19_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
+    const _r13 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 23);
-    i0.ɵɵlistener("click", function MJLeftNavComponent_ng_template_19_Template_button_click_0_listener() { const item_r15 = i0.ɵɵrestoreView(_r14).item; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnItemClick(item_r15)); });
+    i0.ɵɵlistener("click", function MJLeftNavComponent_ng_template_19_Template_button_click_0_listener() { const item_r14 = i0.ɵɵrestoreView(_r13).item; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnItemClick(item_r14)); });
     i0.ɵɵconditionalCreate(1, MJLeftNavComponent_ng_template_19_Conditional_1_Template, 1, 2, "i", 24)(2, MJLeftNavComponent_ng_template_19_Conditional_2_Template, 2, 1, "span", 25);
     i0.ɵɵelementStart(3, "span", 26)(4, "span", 27);
     i0.ɵɵtext(5);
@@ -183,19 +183,19 @@ function MJLeftNavComponent_ng_template_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(7, MJLeftNavComponent_ng_template_19_Conditional_7_Template, 2, 1, "span", 29);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r15 = ctx.item;
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("mj-left-nav__item--active", ctx_r1.IsItemActive(item_r15))("mj-left-nav__item--disabled", item_r15.disabled);
-    i0.ɵɵproperty("disabled", item_r15.disabled);
-    i0.ɵɵattribute("aria-current", ctx_r1.AriaCurrentFor(item_r15))("title", ctx_r1.EffectiveIconOnly ? ctx_r1.ItemTooltip(item_r15) : null)("aria-label", ctx_r1.EffectiveIconOnly ? ctx_r1.ItemTooltip(item_r15) : null);
+    const item_r14 = ctx.item;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("mj-left-nav__item--active", ctx_r0.IsItemActive(item_r14))("mj-left-nav__item--disabled", item_r14.disabled);
+    i0.ɵɵproperty("disabled", item_r14.disabled);
+    i0.ɵɵattribute("aria-current", ctx_r0.AriaCurrentFor(item_r14))("title", ctx_r0.EffectiveIconOnly ? ctx_r0.ItemTooltip(item_r14) : null)("aria-label", ctx_r0.EffectiveIconOnly ? ctx_r0.ItemTooltip(item_r14) : null);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r15.icon ? 1 : ctx_r1.EffectiveIconOnly ? 2 : -1);
+    i0.ɵɵconditional(item_r14.icon ? 1 : ctx_r0.EffectiveIconOnly ? 2 : -1);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(item_r15.label);
+    i0.ɵɵtextInterpolate(item_r14.label);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r15.description ? 6 : -1);
+    i0.ɵɵconditional(item_r14.description ? 6 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r15.badge != null ? 7 : -1);
+    i0.ɵɵconditional(item_r14.badge != null ? 7 : -1);
 } }
 /** Source of per-instance DOM ids — see {@link MJLeftNavComponent.NavRegionId}. */
 let navRegionSeq = 0;
@@ -558,10 +558,9 @@ export class MJLeftNavComponent {
         } if (rf & 2) {
             i0.ɵɵclassProp("mj-left-nav-host--collapsed", ctx.isCollapsedHost)("mj-left-nav-host--open", ctx.isMobileNavOpen);
         } }, inputs: { Sections: "Sections", ActiveId: "ActiveId", Width: "Width", IconOnly: "IconOnly", Collapsible: "Collapsible", Collapsed: "Collapsed", CollapsedWidth: "CollapsedWidth", MobileTitle: "MobileTitle", ExpandedIds: "ExpandedIds" }, outputs: { CollapsedChange: "CollapsedChange", ItemClicked: "ItemClicked", ItemToggled: "ItemToggled" }, ngContentSelectors: _c1, decls: 21, vars: 9, consts: [["itemTpl", ""], ["itemBtn", ""], ["type", "button", "aria-haspopup", "dialog", 1, "mj-left-nav__switcher", 3, "click"], ["aria-hidden", "true", 1, "mj-left-nav__switcher-icon", 3, "class"], [1, "mj-left-nav__switcher-label"], ["aria-hidden", "true", 1, "fa-solid", "fa-bars-staggered", "mj-left-nav__switcher-hint"], ["aria-hidden", "true", 1, "mj-left-nav__scrim", 3, "click"], ["role", "navigation", 1, "mj-left-nav", 3, "id"], [1, "mj-left-nav__drawer-header"], [1, "mj-left-nav__drawer-title"], ["type", "button", "aria-label", "Close menu", 1, "mj-left-nav__drawer-close", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-xmark"], ["aria-hidden", "true", 1, "mj-left-nav__switcher-icon"], ["type", "button", 1, "mj-left-nav__collapse-toggle", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", "mj-left-nav__collapse-icon"], ["aria-hidden", "true", 1, "mj-left-nav__collapse-divider"], [1, "mj-left-nav__section-label"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "mj-left-nav__row"], ["type", "button", 1, "mj-left-nav__chevron"], ["aria-hidden", "true", 1, "mj-left-nav__chevron-placeholder"], ["type", "button", 1, "mj-left-nav__chevron", 3, "click"], ["aria-hidden", "true", 1, "fa-solid"], ["type", "button", 1, "mj-left-nav__item", 3, "click", "disabled"], ["aria-hidden", "true", 1, "mj-left-nav__icon", 3, "class"], ["aria-hidden", "true", 1, "mj-left-nav__initial"], [1, "mj-left-nav__text"], [1, "mj-left-nav__label"], [1, "mj-left-nav__description"], [1, "mj-left-nav__badge"], ["aria-hidden", "true", 1, "mj-left-nav__icon"]], template: function MJLeftNavComponent_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵprojectionDef(_c0);
             i0.ɵɵelementStart(0, "button", 2);
-            i0.ɵɵlistener("click", function MJLeftNavComponent_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OpenMobileNav()); });
+            i0.ɵɵlistener("click", function MJLeftNavComponent_Template_button_click_0_listener() { return ctx.OpenMobileNav(); });
             i0.ɵɵconditionalCreate(1, MJLeftNavComponent_Conditional_1_Template, 1, 2, "i", 3);
             i0.ɵɵelementStart(2, "span", 4);
             i0.ɵɵtext(3);
@@ -569,7 +568,7 @@ export class MJLeftNavComponent {
             i0.ɵɵelement(4, "i", 5);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(5, "div", 6);
-            i0.ɵɵlistener("click", function MJLeftNavComponent_Template_div_click_5_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.CloseMobileNav()); });
+            i0.ɵɵlistener("click", function MJLeftNavComponent_Template_div_click_5_listener() { return ctx.CloseMobileNav(); });
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(6, "aside", 7);
             i0.ɵɵconditionalCreate(7, MJLeftNavComponent_Conditional_7_Template, 3, 10);
@@ -577,7 +576,7 @@ export class MJLeftNavComponent {
             i0.ɵɵtext(10);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(11, "button", 10);
-            i0.ɵɵlistener("click", function MJLeftNavComponent_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.CloseMobileNav()); });
+            i0.ɵɵlistener("click", function MJLeftNavComponent_Template_button_click_11_listener() { return ctx.CloseMobileNav(); });
             i0.ɵɵelement(12, "i", 11);
             i0.ɵɵelementEnd()();
             i0.ɵɵprojection(13);
@@ -601,7 +600,7 @@ export class MJLeftNavComponent {
             i0.ɵɵtextInterpolate(ctx.MobileTitle);
             i0.ɵɵadvance(4);
             i0.ɵɵrepeater(ctx.Sections);
-        } }, dependencies: [CommonModule, i1.NgTemplateOutlet], styles: ["[_nghost-%COMP%] {\n      display: block;\n      flex-shrink: 0;\n    }\n\n    .mj-left-nav[_ngcontent-%COMP%] {\n      height: 100%;\n      background: var(--mj-bg-surface);\n      border-right: 1px solid var(--mj-border-default);\n      overflow-y: auto;\n      padding: 8px;\n      box-sizing: border-box;\n    }\n\n    .mj-left-nav__section-label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n      color: var(--mj-text-muted);\n      padding: 12px 12px 6px;\n    }\n\n    .mj-left-nav__section-label[_ngcontent-%COMP%]:first-child {\n      padding-top: 6px;\n    }\n\n    .mj-left-nav__item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: flex-start;\n      gap: 10px;\n      padding: 10px 12px;\n      width: 100%;\n      border: none;\n      background: transparent;\n      border-radius: 8px;\n      cursor: pointer;\n      transition: background-color 0.12s ease, color 0.12s ease;\n      margin-bottom: 2px;\n      font-family: inherit;\n      color: var(--mj-text-secondary);\n      text-align: left;\n    }\n\n    .mj-left-nav__item[_ngcontent-%COMP%]:hover:not(.mj-left-nav__item--disabled) {\n      background: var(--mj-bg-surface-hover);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-left-nav__item--active[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    .mj-left-nav__item--active[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n    }\n\n    .mj-left-nav__item--disabled[_ngcontent-%COMP%] {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .mj-left-nav__icon[_ngcontent-%COMP%] {\n      width: 18px;\n      text-align: center;\n      font-size: 13px;\n      margin-top: 1px;\n      flex-shrink: 0;\n      color: inherit;\n    }\n\n    \n\n\n\n    .mj-left-nav__initial[_ngcontent-%COMP%] {\n      width: 18px;\n      text-align: center;\n      font-size: 12px;\n      font-weight: 600;\n      line-height: 1.2;\n      margin-top: 1px;\n      flex-shrink: 0;\n      color: inherit;\n      text-transform: uppercase;\n    }\n\n    .mj-left-nav__text[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .mj-left-nav__label[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-weight: 500;\n      line-height: 1.2;\n    }\n\n    .mj-left-nav__description[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      margin-top: 3px;\n      line-height: 1.3;\n    }\n\n    .mj-left-nav__item--active[_ngcontent-%COMP%]   .mj-left-nav__description[_ngcontent-%COMP%] {\n      color: color-mix(in srgb, var(--mj-brand-primary) 70%, var(--mj-text-muted));\n    }\n\n    .mj-left-nav__badge[_ngcontent-%COMP%] {\n      margin-left: auto;\n      font-size: 11px;\n      font-weight: 600;\n      padding: 2px 8px;\n      border-radius: 999px;\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-secondary);\n      align-self: center;\n    }\n\n    .mj-left-nav__item--active[_ngcontent-%COMP%]   .mj-left-nav__badge[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    \n\n\n\n\n\n\n    .mj-left-nav__row[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: stretch;\n      gap: 2px;\n    }\n\n    .mj-left-nav__row[_ngcontent-%COMP%]   .mj-left-nav__item[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .mj-left-nav__chevron[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      width: 20px;\n      height: 32px;\n      align-self: center;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      border: none;\n      background: transparent;\n      border-radius: 4px;\n      cursor: pointer;\n      color: var(--mj-text-muted);\n      font-size: 10px;\n      padding: 0;\n      transition: background-color 0.12s ease, color 0.12s ease;\n      font-family: inherit;\n    }\n\n    .mj-left-nav__chevron[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-hover);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-left-nav__chevron-placeholder[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      width: 20px;\n      display: inline-block;\n    }\n\n    \n\n\n\n\n\n\n\n    .mj-left-nav__collapse-toggle[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: fit-content;\n      padding: 8px 10px;\n      border: none;\n      border-radius: 8px;\n      background: transparent;\n      color: var(--mj-text-muted);\n      font-family: inherit;\n      cursor: pointer;\n      box-sizing: border-box;\n      transition: background-color 0.12s ease, color 0.12s ease;\n      margin-bottom: 2px;\n    }\n\n    .mj-left-nav__collapse-toggle[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-hover);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-left-nav__collapse-toggle[_ngcontent-%COMP%]:focus-visible {\n      outline: 2px solid var(--mj-border-focus);\n      outline-offset: -2px;\n    }\n\n    \n\n\n\n    .mj-left-nav__collapse-icon[_ngcontent-%COMP%] {\n      width: 18px;\n      text-align: center;\n      font-size: 12px;\n      flex-shrink: 0;\n    }\n\n    .mj-left-nav__collapse-divider[_ngcontent-%COMP%] {\n      height: 1px;\n      margin: 4px 0;\n      background: var(--mj-border-default);\n    }\n\n    @media (max-width: 700px) {\n      .mj-left-nav__collapse-toggle[_ngcontent-%COMP%], \n   .mj-left-nav__collapse-divider[_ngcontent-%COMP%] {\n        display: none;\n      }\n    }\n\n    @media (min-width: 701px) {\n      \n\n\n\n\n      .mj-left-nav-host--collapsed[_nghost-%COMP%]   .mj-left-nav__text[_ngcontent-%COMP%] {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        margin: -1px;\n        padding: 0;\n        overflow: hidden;\n        clip-path: inset(50%);\n        white-space: nowrap;\n        border: 0;\n      }\n\n      \n\n      .mj-left-nav-host--collapsed[_nghost-%COMP%]   .mj-left-nav__item[_ngcontent-%COMP%] {\n        justify-content: center;\n        gap: 0;\n        margin-inline: auto;\n        position: relative;\n      }\n\n      \n\n\n\n\n\n      .mj-left-nav-host--collapsed[_nghost-%COMP%]   .mj-left-nav__section-label[_ngcontent-%COMP%] {\n        position: relative;\n        color: transparent;\n        overflow: hidden;\n      }\n      .mj-left-nav-host--collapsed[_nghost-%COMP%]   .mj-left-nav__section-label[_ngcontent-%COMP%]::after {\n        content: '';\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n        width: 20px;\n        height: 1px;\n        background: var(--mj-border-default);\n      }\n\n      \n\n\n\n      .mj-left-nav-host--collapsed[_nghost-%COMP%]   .mj-left-nav__badge[_ngcontent-%COMP%] {\n        margin-left: 0;\n        align-self: auto;\n        position: absolute;\n        left: calc(50% + 4px);\n        top: 4px;\n        min-width: 15px;\n        height: 15px;\n        padding: 0 4px;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 9px;\n        line-height: 1;\n        white-space: nowrap;\n        background: var(--mj-brand-primary);\n        color: var(--mj-text-inverse);\n      }\n\n      \n\n      .mj-left-nav-host--collapsed[_nghost-%COMP%]   .mj-left-nav[_ngcontent-%COMP%] {\n        overflow-x: hidden;\n      }\n    }\n\n    \n\n\n\n\n\n\n\n\n\n    .mj-left-nav__switcher[_ngcontent-%COMP%], \n   .mj-left-nav__scrim[_ngcontent-%COMP%], \n   .mj-left-nav__drawer-header[_ngcontent-%COMP%] {\n      display: none;\n    }\n\n    @media (max-width: 700px) {\n      \n\n      [_nghost-%COMP%] {\n        width: 100% !important;\n      }\n\n      \n\n\n      .mj-left-nav__description[_ngcontent-%COMP%] {\n        display: none;\n      }\n\n      \n\n      .mj-left-nav__switcher[_ngcontent-%COMP%] {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        width: 100%;\n        padding: 11px 14px;\n        border: none;\n        border-bottom: 1px solid var(--mj-border-default);\n        background: var(--mj-bg-surface);\n        color: var(--mj-text-primary);\n        font-family: inherit;\n        font-size: 14px;\n        font-weight: 600;\n        text-align: left;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n      }\n      .mj-left-nav__switcher[_ngcontent-%COMP%]:active {\n        background: var(--mj-bg-surface-active);\n      }\n      .mj-left-nav__switcher-icon[_ngcontent-%COMP%] {\n        width: 18px;\n        text-align: center;\n        font-size: 14px;\n        flex-shrink: 0;\n        color: var(--mj-brand-primary);\n      }\n      .mj-left-nav__switcher-label[_ngcontent-%COMP%] {\n        flex: 1;\n        min-width: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n      .mj-left-nav__switcher-hint[_ngcontent-%COMP%] {\n        flex-shrink: 0;\n        font-size: 15px;\n        color: var(--mj-text-muted);\n      }\n\n      \n\n      .mj-left-nav__scrim[_ngcontent-%COMP%] {\n        display: block;\n        position: fixed;\n        inset: 0;\n        background: var(--mj-bg-overlay);\n        opacity: 0;\n        pointer-events: none;\n        transition: opacity 0.24s ease;\n        z-index: 9998;\n      }\n      .mj-left-nav-host--open[_nghost-%COMP%]   .mj-left-nav__scrim[_ngcontent-%COMP%] {\n        opacity: 1;\n        pointer-events: auto;\n      }\n\n      \n\n      .mj-left-nav[_ngcontent-%COMP%] {\n        position: fixed;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        width: min(320px, 84vw) !important;\n        height: 100%;\n        max-height: none;\n        border-right: 1px solid var(--mj-border-default);\n        box-shadow: var(--mj-shadow-lg);\n        transform: translateX(-100%);\n        transition: transform 0.24s ease;\n        z-index: 9999;\n        padding-top: 0;\n      }\n      .mj-left-nav-host--open[_nghost-%COMP%]   .mj-left-nav[_ngcontent-%COMP%] {\n        transform: translateX(0);\n      }\n\n      \n\n      .mj-left-nav__drawer-header[_ngcontent-%COMP%] {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 8px;\n        position: sticky;\n        top: 0;\n        z-index: 1;\n        padding: 14px 12px 10px;\n        margin: 0 -8px 4px;\n        padding-left: 16px;\n        background: var(--mj-bg-surface);\n        border-bottom: 1px solid var(--mj-border-subtle);\n      }\n      .mj-left-nav__drawer-title[_ngcontent-%COMP%] {\n        font-size: 13px;\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 0.04em;\n        color: var(--mj-text-muted);\n      }\n      .mj-left-nav__drawer-close[_ngcontent-%COMP%] {\n        flex-shrink: 0;\n        width: 32px;\n        height: 32px;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        border: none;\n        background: transparent;\n        border-radius: 8px;\n        cursor: pointer;\n        color: var(--mj-text-secondary);\n        font-size: 16px;\n        font-family: inherit;\n      }\n      .mj-left-nav__drawer-close[_ngcontent-%COMP%]:active {\n        background: var(--mj-bg-surface-active);\n      }\n    }\n\n    @media (max-width: 700px) and (prefers-reduced-motion: reduce) {\n      .mj-left-nav[_ngcontent-%COMP%], \n   .mj-left-nav__scrim[_ngcontent-%COMP%] {\n        transition: none;\n      }\n    }"] });
+        } }, dependencies: [CommonModule, i1.NgTemplateOutlet], styles: ["[_nghost-%COMP%] {\n      display: block;\n      flex-shrink: 0;\n    }\n\n    .mj-left-nav[_ngcontent-%COMP%] {\n      height: 100%;\n      background: var(--mj-bg-surface);\n      border-right: 1px solid var(--mj-border-default);\n      overflow-y: auto;\n      padding: 8px;\n      box-sizing: border-box;\n    }\n\n    .mj-left-nav__section-label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n      color: var(--mj-text-muted);\n      padding: 12px 12px 6px;\n    }\n\n    .mj-left-nav__section-label[_ngcontent-%COMP%]:first-child {\n      padding-top: 6px;\n    }\n\n    .mj-left-nav__item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: flex-start;\n      gap: 10px;\n      padding: 10px 12px;\n      width: 100%;\n      border: none;\n      background: transparent;\n      border-radius: 8px;\n      cursor: pointer;\n      transition: background-color 0.12s ease, color 0.12s ease;\n      margin-bottom: 2px;\n      font-family: inherit;\n      color: var(--mj-text-secondary);\n      text-align: left;\n    }\n\n    .mj-left-nav__item[_ngcontent-%COMP%]:hover:not(.mj-left-nav__item--disabled) {\n      background: var(--mj-bg-surface-hover);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-left-nav__item--active[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    .mj-left-nav__item--active[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n    }\n\n    .mj-left-nav__item--disabled[_ngcontent-%COMP%] {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .mj-left-nav__icon[_ngcontent-%COMP%] {\n      width: 18px;\n      text-align: center;\n      font-size: 13px;\n      margin-top: 1px;\n      flex-shrink: 0;\n      color: inherit;\n    }\n\n    \n\n\n    .mj-left-nav__initial[_ngcontent-%COMP%] {\n      width: 18px;\n      text-align: center;\n      font-size: 12px;\n      font-weight: 600;\n      line-height: 1.2;\n      margin-top: 1px;\n      flex-shrink: 0;\n      color: inherit;\n      text-transform: uppercase;\n    }\n\n    .mj-left-nav__text[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .mj-left-nav__label[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-weight: 500;\n      line-height: 1.2;\n    }\n\n    .mj-left-nav__description[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      margin-top: 3px;\n      line-height: 1.3;\n    }\n\n    .mj-left-nav__item--active[_ngcontent-%COMP%]   .mj-left-nav__description[_ngcontent-%COMP%] {\n      color: color-mix(in srgb, var(--mj-brand-primary) 70%, var(--mj-text-muted));\n    }\n\n    .mj-left-nav__badge[_ngcontent-%COMP%] {\n      margin-left: auto;\n      font-size: 11px;\n      font-weight: 600;\n      padding: 2px 8px;\n      border-radius: 999px;\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-secondary);\n      align-self: center;\n    }\n\n    .mj-left-nav__item--active[_ngcontent-%COMP%]   .mj-left-nav__badge[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    \n\n\n\n\n\n    .mj-left-nav__row[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: stretch;\n      gap: 2px;\n    }\n\n    .mj-left-nav__row[_ngcontent-%COMP%]   .mj-left-nav__item[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .mj-left-nav__chevron[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      width: 20px;\n      height: 32px;\n      align-self: center;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      border: none;\n      background: transparent;\n      border-radius: 4px;\n      cursor: pointer;\n      color: var(--mj-text-muted);\n      font-size: 10px;\n      padding: 0;\n      transition: background-color 0.12s ease, color 0.12s ease;\n      font-family: inherit;\n    }\n\n    .mj-left-nav__chevron[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-hover);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-left-nav__chevron-placeholder[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      width: 20px;\n      display: inline-block;\n    }\n\n    \n\n\n\n\n\n\n    .mj-left-nav__collapse-toggle[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: fit-content;\n      padding: 8px 10px;\n      border: none;\n      border-radius: 8px;\n      background: transparent;\n      color: var(--mj-text-muted);\n      font-family: inherit;\n      cursor: pointer;\n      box-sizing: border-box;\n      transition: background-color 0.12s ease, color 0.12s ease;\n      margin-bottom: 2px;\n    }\n\n    .mj-left-nav__collapse-toggle[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-hover);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-left-nav__collapse-toggle[_ngcontent-%COMP%]:focus-visible {\n      outline: 2px solid var(--mj-border-focus);\n      outline-offset: -2px;\n    }\n\n    \n\n\n    .mj-left-nav__collapse-icon[_ngcontent-%COMP%] {\n      width: 18px;\n      text-align: center;\n      font-size: 12px;\n      flex-shrink: 0;\n    }\n\n    .mj-left-nav__collapse-divider[_ngcontent-%COMP%] {\n      height: 1px;\n      margin: 4px 0;\n      background: var(--mj-border-default);\n    }\n\n    @media (max-width: 700px) {\n      .mj-left-nav__collapse-toggle[_ngcontent-%COMP%], \n   .mj-left-nav__collapse-divider[_ngcontent-%COMP%] {\n        display: none;\n      }\n    }\n\n    @media (min-width: 701px) {\n      \n\n\n\n      .mj-left-nav-host--collapsed[_nghost-%COMP%]   .mj-left-nav__text[_ngcontent-%COMP%] {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        margin: -1px;\n        padding: 0;\n        overflow: hidden;\n        clip-path: inset(50%);\n        white-space: nowrap;\n        border: 0;\n      }\n\n      \n      .mj-left-nav-host--collapsed[_nghost-%COMP%]   .mj-left-nav__item[_ngcontent-%COMP%] {\n        justify-content: center;\n        gap: 0;\n        margin-inline: auto;\n        position: relative;\n      }\n\n      \n\n\n\n\n      .mj-left-nav-host--collapsed[_nghost-%COMP%]   .mj-left-nav__section-label[_ngcontent-%COMP%] {\n        position: relative;\n        color: transparent;\n        overflow: hidden;\n      }\n      .mj-left-nav-host--collapsed[_nghost-%COMP%]   .mj-left-nav__section-label[_ngcontent-%COMP%]::after {\n        content: '';\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n        width: 20px;\n        height: 1px;\n        background: var(--mj-border-default);\n      }\n\n      \n\n\n      .mj-left-nav-host--collapsed[_nghost-%COMP%]   .mj-left-nav__badge[_ngcontent-%COMP%] {\n        margin-left: 0;\n        align-self: auto;\n        position: absolute;\n        left: calc(50% + 4px);\n        top: 4px;\n        min-width: 15px;\n        height: 15px;\n        padding: 0 4px;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 9px;\n        line-height: 1;\n        white-space: nowrap;\n        background: var(--mj-brand-primary);\n        color: var(--mj-text-inverse);\n      }\n\n      \n      .mj-left-nav-host--collapsed[_nghost-%COMP%]   .mj-left-nav[_ngcontent-%COMP%] {\n        overflow-x: hidden;\n      }\n    }\n\n    \n\n\n\n\n\n\n\n\n    .mj-left-nav__switcher[_ngcontent-%COMP%], \n   .mj-left-nav__scrim[_ngcontent-%COMP%], \n   .mj-left-nav__drawer-header[_ngcontent-%COMP%] {\n      display: none;\n    }\n\n    @media (max-width: 700px) {\n      \n      [_nghost-%COMP%] {\n        width: 100% !important;\n      }\n\n      \n\n      .mj-left-nav__description[_ngcontent-%COMP%] {\n        display: none;\n      }\n\n      \n      .mj-left-nav__switcher[_ngcontent-%COMP%] {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        width: 100%;\n        padding: 11px 14px;\n        border: none;\n        border-bottom: 1px solid var(--mj-border-default);\n        background: var(--mj-bg-surface);\n        color: var(--mj-text-primary);\n        font-family: inherit;\n        font-size: 14px;\n        font-weight: 600;\n        text-align: left;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n      }\n      .mj-left-nav__switcher[_ngcontent-%COMP%]:active {\n        background: var(--mj-bg-surface-active);\n      }\n      .mj-left-nav__switcher-icon[_ngcontent-%COMP%] {\n        width: 18px;\n        text-align: center;\n        font-size: 14px;\n        flex-shrink: 0;\n        color: var(--mj-brand-primary);\n      }\n      .mj-left-nav__switcher-label[_ngcontent-%COMP%] {\n        flex: 1;\n        min-width: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n      .mj-left-nav__switcher-hint[_ngcontent-%COMP%] {\n        flex-shrink: 0;\n        font-size: 15px;\n        color: var(--mj-text-muted);\n      }\n\n      \n      .mj-left-nav__scrim[_ngcontent-%COMP%] {\n        display: block;\n        position: fixed;\n        inset: 0;\n        background: var(--mj-bg-overlay);\n        opacity: 0;\n        pointer-events: none;\n        transition: opacity 0.24s ease;\n        z-index: 9998;\n      }\n      .mj-left-nav-host--open[_nghost-%COMP%]   .mj-left-nav__scrim[_ngcontent-%COMP%] {\n        opacity: 1;\n        pointer-events: auto;\n      }\n\n      \n      .mj-left-nav[_ngcontent-%COMP%] {\n        position: fixed;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        width: min(320px, 84vw) !important;\n        height: 100%;\n        max-height: none;\n        border-right: 1px solid var(--mj-border-default);\n        box-shadow: var(--mj-shadow-lg);\n        transform: translateX(-100%);\n        transition: transform 0.24s ease;\n        z-index: 9999;\n        padding-top: 0;\n      }\n      .mj-left-nav-host--open[_nghost-%COMP%]   .mj-left-nav[_ngcontent-%COMP%] {\n        transform: translateX(0);\n      }\n\n      \n      .mj-left-nav__drawer-header[_ngcontent-%COMP%] {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 8px;\n        position: sticky;\n        top: 0;\n        z-index: 1;\n        padding: 14px 12px 10px;\n        margin: 0 -8px 4px;\n        padding-left: 16px;\n        background: var(--mj-bg-surface);\n        border-bottom: 1px solid var(--mj-border-subtle);\n      }\n      .mj-left-nav__drawer-title[_ngcontent-%COMP%] {\n        font-size: 13px;\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 0.04em;\n        color: var(--mj-text-muted);\n      }\n      .mj-left-nav__drawer-close[_ngcontent-%COMP%] {\n        flex-shrink: 0;\n        width: 32px;\n        height: 32px;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        border: none;\n        background: transparent;\n        border-radius: 8px;\n        cursor: pointer;\n        color: var(--mj-text-secondary);\n        font-size: 16px;\n        font-family: inherit;\n      }\n      .mj-left-nav__drawer-close[_ngcontent-%COMP%]:active {\n        background: var(--mj-bg-surface-active);\n      }\n    }\n\n    @media (max-width: 700px) and (prefers-reduced-motion: reduce) {\n      .mj-left-nav[_ngcontent-%COMP%], \n   .mj-left-nav__scrim[_ngcontent-%COMP%] {\n        transition: none;\n      }\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJLeftNavComponent, [{
         type: Component,

package/dist/lib/left-nav/left-nav.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"left-nav.component.js","sourceRoot":"","sources":["../../../src/lib/left-nav/left-nav.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectorRef,\n  Component,\n  EventEmitter,\n  HostBinding,\n  HostListener,\n  Input,\n  NgZone,\n  OnDestroy,\n  Output,\n  inject,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n/** Source of per-instance DOM ids — see {@link MJLeftNavComponent.NavRegionId}. */\nlet navRegionSeq = 0;\n\n/**\n * A single item in an `<mj-left-nav>`.\n */\nexport interface MJLeftNavItem {\n  /** Stable identifier — used for active-state matching and emitted on click. */\n  id: string;\n  /** Primary label rendered as the item's main text. */\n  label: string;\n  /** Optional Font Awesome icon class (e.g. `'fa-solid fa-users'`). */\n  icon?: string;\n  /** Optional muted secondary line shown under the label. */\n  description?: string;\n  /** Optional count badge rendered at the right of the item. */\n  badge?: string | number;\n  /** When `true`, the item renders dimmed and is not clickable. */\n  disabled?: boolean;\n  /**\n   * Optional child items for tree-structured nav (e.g. Testing Explorer's\n   * Test Suites tree). When `children` is `undefined` the item renders as a\n   * plain flat-list item (existing behavior). When defined — even as an empty\n   * array — the item participates in tree rendering: a chevron toggle shows\n   * for non-empty arrays, and an equal-width placeholder reserves alignment\n   * space for leaves so siblings line up. Expansion state is owned by the\n   * consumer via `[ExpandedIds]` on `<mj-left-nav>`.\n   */\n  children?: MJLeftNavItem[];\n}\n\n/**\n * A grouped section in an `<mj-left-nav>`. The optional `label` renders as an\n * uppercase section header above the items. Sections WITHOUT a label still\n * group items together (use multiple unlabeled sections to get visual dividers\n * without headers).\n */\nexport interface MJLeftNavSection {\n  /** Optional uppercase header above the items in this section. */\n  label?: string;\n  /** The clickable items in this section. */\n  items: MJLeftNavItem[];\n}\n\n/**\n * `<mj-left-nav>` — Canonical left rail for MJ Explorer dashboards that have\n * an internal section-nav (Admin shells, KH Config, KH Analytics, AI Analytics,\n * Communication, Credentials, APIKeys, etc.).\n *\n * Replaces the bespoke `.{name}-nav` / `.{name}-nav-item` patterns each of\n * those dashboards used to declare in their own CSS files.\n *\n * Supports:\n *  - Plain items (icon + label)\n *  - Items with a muted secondary description line (Admin shells pattern)\n *  - Items with a count badge (APIKeys pattern)\n *  - Sections with uppercase headers (Communication / Credentials pattern)\n *  - Optional `[header]` and `[footer]` content slots (KH Config logo header, etc.)\n *  - Responsive mobile drawer (≤700px): the rail hides off-canvas and a compact\n *    section switcher takes its place; tapping it slides the full rail in over a\n *    scrim. The rail keeps its full content (trees, slots, descriptions, badges)\n *    inside the drawer — no flattening. Set `[MobileTitle]` for the drawer label.\n *\n * ## Example\n *\n * ```typescript\n * sections: MJLeftNavSection[] = [\n *   {\n *     items: [\n *       { id: 'users',  icon: 'fa-solid fa-users',         label: 'Users',  description: 'Manage user accounts' },\n *       { id: 'roles',  icon: 'fa-solid fa-user-shield',   label: 'Roles',  description: 'Define roles and assignments' },\n *     ]\n *   }\n * ];\n * activeId = 'users';\n * ```\n *\n * ```html\n * <mj-left-nav\n *   [Sections]=\"sections\"\n *   [ActiveId]=\"activeId\"\n *   (ItemClicked)=\"onItemClicked($event)\">\n * </mj-left-nav>\n * ```\n *\n * Responsive — at ≤700px the rail becomes an off-canvas drawer (see the feature\n * list above). The consumer should still switch the parent's flex-direction from\n * row → column at the same breakpoint (e.g. `<mj-page-body>` Direction=\"row\" with\n * a `@media` override) so the in-flow section switcher stacks above the content\n * pane rather than competing with it for horizontal space.\n */\n@Component({\n  selector: 'mj-left-nav',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    <!-- Mobile-only section switcher (hidden ≥701px via CSS). Shows the active\n         section and opens the full rail as an off-canvas drawer on tap. The rail\n         itself is too rich (trees, header/footer slots, descriptions, badges) to\n         flatten into a dropdown or tab strip, so we surface it as-is in a drawer. -->\n    <button\n      type=\"button\"\n      class=\"mj-left-nav__switcher\"\n      [attr.aria-expanded]=\"MobileNavOpen\"\n      aria-haspopup=\"dialog\"\n      (click)=\"OpenMobileNav()\">\n      @if (ActiveTriggerItem?.icon) {\n        <i class=\"mj-left-nav__switcher-icon\" [class]=\"ActiveTriggerItem!.icon\" aria-hidden=\"true\"></i>\n      }\n      <span class=\"mj-left-nav__switcher-label\">{{ ActiveTriggerItem?.label || MobileTitle }}</span>\n      <i class=\"fa-solid fa-bars-staggered mj-left-nav__switcher-hint\" aria-hidden=\"true\"></i>\n    </button>\n\n    <!-- Scrim behind the mobile drawer (hidden ≥701px / when closed via CSS). -->\n    <div class=\"mj-left-nav__scrim\" (click)=\"CloseMobileNav()\" aria-hidden=\"true\"></div>\n\n    <aside\n      class=\"mj-left-nav\"\n      [id]=\"NavRegionId\"\n      [style.width.px]=\"EffectiveWidth\"\n      role=\"navigation\"\n      [attr.aria-modal]=\"MobileNavOpen ? true : null\">\n      <!-- Desktop collapse toggle (opt-in via [Collapsible]) — a compact double-angle chip, NOT a\n           hamburger (a lone hamburger row reads as a broken nav item) and NOT a nav-row lookalike.\n           The chip is LOCKED in one spot — centred in the collapsed band — in BOTH modes: only the\n           glyph flips on toggle, so the user never re-aims (a control that relocates when clicked\n           makes the user chase it). « = collapse toward the left edge, » = expand. Hidden ≤700px:\n           the mobile drawer is its own affordance and collapsing a drawer is meaningless. -->\n      @if (Collapsible) {\n        <button\n          type=\"button\"\n          class=\"mj-left-nav__collapse-toggle\"\n          [style.margin-left.px]=\"CollapseToggleMarginPx\"\n          [attr.aria-label]=\"Collapsed ? 'Expand navigation' : 'Collapse navigation'\"\n          [attr.aria-expanded]=\"!Collapsed\"\n          [attr.aria-controls]=\"NavRegionId\"\n          [title]=\"Collapsed ? 'Expand navigation' : 'Collapse navigation'\"\n          (click)=\"ToggleCollapsed()\">\n          <i\n            class=\"fa-solid mj-left-nav__collapse-icon\"\n            [class.fa-angles-right]=\"Collapsed\"\n            [class.fa-angles-left]=\"!Collapsed\"\n            aria-hidden=\"true\"></i>\n        </button>\n        <!-- Wordless hairline between the toggle and the nav content: without a boundary the chip\n             reads as a destination. Same height in both modes, so items never shift on toggle. -->\n        <div class=\"mj-left-nav__collapse-divider\" aria-hidden=\"true\"></div>\n      }\n\n      <!-- Drawer header — only visible on mobile when the rail is a drawer. -->\n      <div class=\"mj-left-nav__drawer-header\">\n        <span class=\"mj-left-nav__drawer-title\">{{ MobileTitle }}</span>\n        <button\n          type=\"button\"\n          class=\"mj-left-nav__drawer-close\"\n          aria-label=\"Close menu\"\n          (click)=\"CloseMobileNav()\">\n          <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n        </button>\n      </div>\n\n      <ng-content select=\"[header]\"></ng-content>\n\n      @for (section of Sections; track $index) {\n        @if (section.label) {\n          <div class=\"mj-left-nav__section-label\">{{ section.label }}</div>\n        }\n        @for (item of section.items; track item.id) {\n          <!-- hasExpandable goes false while icons-only, collapsing each section to its TOP-LEVEL\n               items only — see ShowTreeStructure for why a tree can't survive a 60px rail. -->\n          <ng-container\n            *ngTemplateOutlet=\"itemTpl; context: { item: item, depth: 0, hasExpandable: ShowTreeStructure && HasExpandableItems(section.items) }\">\n          </ng-container>\n        }\n      }\n\n      <ng-content select=\"[footer]\"></ng-content>\n    </aside>\n\n    <!-- Recursive item template — renders one item plus, when expanded,\n         its children indented by depth. The hasExpandable flag is computed\n         once per section and threaded through the recursion so leaf nodes\n         only reserve a chevron-column placeholder when a sibling actually\n         shows a chevron. -->\n    <ng-template #itemTpl let-item=\"item\" let-depth=\"depth\" let-hasExpandable=\"hasExpandable\">\n      @if (item.children !== undefined && hasExpandable) {\n        <!-- Tree row: chevron (when this node has children) or placeholder\n             (when a sibling has children but this leaf needs alignment). -->\n        <div\n          class=\"mj-left-nav__row\"\n          [style.padding-left.px]=\"depth * 14\">\n          @if (item.children.length > 0) {\n            <button\n              type=\"button\"\n              class=\"mj-left-nav__chevron\"\n              [attr.aria-label]=\"IsExpanded(item.id) ? 'Collapse' : 'Expand'\"\n              [attr.aria-expanded]=\"IsExpanded(item.id)\"\n              (click)=\"OnItemToggle($event, item)\">\n              <i class=\"fa-solid\"\n                 [class.fa-chevron-down]=\"IsExpanded(item.id)\"\n                 [class.fa-chevron-right]=\"!IsExpanded(item.id)\"\n                 aria-hidden=\"true\"></i>\n            </button>\n          } @else {\n            <span class=\"mj-left-nav__chevron-placeholder\" aria-hidden=\"true\"></span>\n          }\n          <ng-container\n            *ngTemplateOutlet=\"itemBtn; context: { item: item }\">\n          </ng-container>\n        </div>\n\n        @if (item.children.length > 0 && IsExpanded(item.id)) {\n          @for (child of item.children; track child.id) {\n            <ng-container\n              *ngTemplateOutlet=\"itemTpl; context: { item: child, depth: depth + 1, hasExpandable: hasExpandable }\">\n            </ng-container>\n          }\n        }\n      } @else {\n        <!-- Flat render: item.children is undefined, OR no sibling in this\n             section is actually expandable — render the button directly with\n             no chevron column reserved. -->\n        <ng-container\n          *ngTemplateOutlet=\"itemBtn; context: { item: item }\">\n        </ng-container>\n      }\n    </ng-template>\n\n    <!-- Item button — shared by both flat and tree rendering paths -->\n    <ng-template #itemBtn let-item=\"item\">\n      <button\n        type=\"button\"\n        class=\"mj-left-nav__item\"\n        [class.mj-left-nav__item--active]=\"IsItemActive(item)\"\n        [class.mj-left-nav__item--disabled]=\"item.disabled\"\n        [disabled]=\"item.disabled\"\n        [attr.aria-current]=\"AriaCurrentFor(item)\"\n        [attr.title]=\"EffectiveIconOnly ? ItemTooltip(item) : null\"\n        [attr.aria-label]=\"EffectiveIconOnly ? ItemTooltip(item) : null\"\n        (click)=\"OnItemClick(item)\">\n        @if (item.icon) {\n          <i class=\"mj-left-nav__icon\" [class]=\"item.icon\" aria-hidden=\"true\"></i>\n        } @else if (EffectiveIconOnly) {\n          <!-- An icon-less item collapses to a button with NOTHING visible in it (the label is the\n               only content and it is clipped away) — an invisible-but-clickable row. The icon is\n               optional on MJLeftNavItem, so the rail cannot require one; a monogram keeps every item\n               identifiable and hittable. Only rendered icons-only: expanded rails are unchanged. -->\n          <span class=\"mj-left-nav__initial\" aria-hidden=\"true\">{{ ItemInitial(item) }}</span>\n        }\n        <span class=\"mj-left-nav__text\">\n          <span class=\"mj-left-nav__label\">{{ item.label }}</span>\n          @if (item.description) {\n            <span class=\"mj-left-nav__description\">{{ item.description }}</span>\n          }\n        </span>\n        @if (item.badge != null) {\n          <span class=\"mj-left-nav__badge\">{{ item.badge }}</span>\n        }\n      </button>\n    </ng-template>\n  `,\n  styles: [`\n    :host {\n      display: block;\n      flex-shrink: 0;\n    }\n\n    .mj-left-nav {\n      height: 100%;\n      background: var(--mj-bg-surface);\n      border-right: 1px solid var(--mj-border-default);\n      overflow-y: auto;\n      padding: 8px;\n      box-sizing: border-box;\n    }\n\n    .mj-left-nav__section-label {\n      font-size: 11px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n      color: var(--mj-text-muted);\n      padding: 12px 12px 6px;\n    }\n\n    .mj-left-nav__section-label:first-child {\n      padding-top: 6px;\n    }\n\n    .mj-left-nav__item {\n      display: flex;\n      align-items: flex-start;\n      gap: 10px;\n      padding: 10px 12px;\n      width: 100%;\n      border: none;\n      background: transparent;\n      border-radius: 8px;\n      cursor: pointer;\n      transition: background-color 0.12s ease, color 0.12s ease;\n      margin-bottom: 2px;\n      font-family: inherit;\n      color: var(--mj-text-secondary);\n      text-align: left;\n    }\n\n    .mj-left-nav__item:hover:not(.mj-left-nav__item--disabled) {\n      background: var(--mj-bg-surface-hover);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-left-nav__item--active {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    .mj-left-nav__item--active:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n    }\n\n    .mj-left-nav__item--disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .mj-left-nav__icon {\n      width: 18px;\n      text-align: center;\n      font-size: 13px;\n      margin-top: 1px;\n      flex-shrink: 0;\n      color: inherit;\n    }\n\n    /* Stand-in glyph for an icon-less item while the rail is icons-only. Same 18px box as\n       .mj-left-nav__icon so it sits on the identical optical column — the rail reads as one\n       consistent strip whether an item brought an icon or not. */\n    .mj-left-nav__initial {\n      width: 18px;\n      text-align: center;\n      font-size: 12px;\n      font-weight: 600;\n      line-height: 1.2;\n      margin-top: 1px;\n      flex-shrink: 0;\n      color: inherit;\n      text-transform: uppercase;\n    }\n\n    .mj-left-nav__text {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .mj-left-nav__label {\n      font-size: 13px;\n      font-weight: 500;\n      line-height: 1.2;\n    }\n\n    .mj-left-nav__description {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      margin-top: 3px;\n      line-height: 1.3;\n    }\n\n    .mj-left-nav__item--active .mj-left-nav__description {\n      color: color-mix(in srgb, var(--mj-brand-primary) 70%, var(--mj-text-muted));\n    }\n\n    .mj-left-nav__badge {\n      margin-left: auto;\n      font-size: 11px;\n      font-weight: 600;\n      padding: 2px 8px;\n      border-radius: 999px;\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-secondary);\n      align-self: center;\n    }\n\n    .mj-left-nav__item--active .mj-left-nav__badge {\n      background: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    /* ── Tree rendering ─────────────────────────────────────────────────────\n       Used when MJLeftNavItem.children is defined (even as an empty array).\n       The row wraps a chevron/placeholder + the item button so they sit on\n       one line, and depth-based padding-left is applied to the row (not the\n       item) so the chevron aligns with the depth column. */\n\n    .mj-left-nav__row {\n      display: flex;\n      align-items: stretch;\n      gap: 2px;\n    }\n\n    .mj-left-nav__row .mj-left-nav__item {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .mj-left-nav__chevron {\n      flex-shrink: 0;\n      width: 20px;\n      height: 32px;\n      align-self: center;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      border: none;\n      background: transparent;\n      border-radius: 4px;\n      cursor: pointer;\n      color: var(--mj-text-muted);\n      font-size: 10px;\n      padding: 0;\n      transition: background-color 0.12s ease, color 0.12s ease;\n      font-family: inherit;\n    }\n\n    .mj-left-nav__chevron:hover {\n      background: var(--mj-bg-surface-hover);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-left-nav__chevron-placeholder {\n      flex-shrink: 0;\n      width: 20px;\n      display: inline-block;\n    }\n\n    /* ── Desktop collapse (opt-in via [Collapsible]) ──────────────────────────\n       The toggle chip + the icons-only collapsed presentation. DESKTOP ONLY: below 701px the rail\n       is the off-canvas drawer, which is already dismissable — collapsing it would be nonsense —\n       so the toggle hides and the collapsed rules never apply there. Hover-to-peek is deliberately\n       NOT part of this feature (removed by ruling 2026-07-30: a rail that expands when the pointer\n       grazes it moves the target the user was aiming at). */\n\n    .mj-left-nav__collapse-toggle {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: fit-content;\n      padding: 8px 10px;\n      border: none;\n      border-radius: 8px;\n      background: transparent;\n      color: var(--mj-text-muted);\n      font-family: inherit;\n      cursor: pointer;\n      box-sizing: border-box;\n      transition: background-color 0.12s ease, color 0.12s ease;\n      margin-bottom: 2px;\n    }\n\n    .mj-left-nav__collapse-toggle:hover {\n      background: var(--mj-bg-surface-hover);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-left-nav__collapse-toggle:focus-visible {\n      outline: 2px solid var(--mj-border-focus);\n      outline-offset: -2px;\n    }\n\n    /* 18px box = the same footprint as .mj-left-nav__icon, so the chip sits on the items' optical\n       icon column when centred in the collapsed band. Slightly smaller glyph than the nav icons —\n       this is a chrome control, not a destination. */\n    .mj-left-nav__collapse-icon {\n      width: 18px;\n      text-align: center;\n      font-size: 12px;\n      flex-shrink: 0;\n    }\n\n    .mj-left-nav__collapse-divider {\n      height: 1px;\n      margin: 4px 0;\n      background: var(--mj-border-default);\n    }\n\n    @media (max-width: 700px) {\n      .mj-left-nav__collapse-toggle,\n      .mj-left-nav__collapse-divider {\n        display: none;\n      }\n    }\n\n    @media (min-width: 701px) {\n      /* ITEM labels are HIDDEN VISUALLY, NOT REMOVED. display:none would drop them from the\n         accessibility tree too, leaving every rail button unnamed — an icon-only rail a screen\n         reader cannot read. This keeps the name and only takes the pixels. (The tooltips/aria the\n         items grow while collapsed come from EffectiveIconOnly.) */\n      :host(.mj-left-nav-host--collapsed) .mj-left-nav__text {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        margin: -1px;\n        padding: 0;\n        overflow: hidden;\n        clip-path: inset(50%);\n        white-space: nowrap;\n        border: 0;\n      }\n\n      /* With the text out of flow the icon is the only thing left; centre it in the narrow rail. */\n      :host(.mj-left-nav-host--collapsed) .mj-left-nav__item {\n        justify-content: center;\n        gap: 0;\n        margin-inline: auto;\n        position: relative;\n      }\n\n      /* SECTION labels become a small centred divider line, keeping the label's OWN box (padding +\n         height) so the vertical rhythm is IDENTICAL to the expanded rail — the words come back in\n         the exact same place on expand. color: transparent hides the glyphs without removing them\n         from the a11y tree or changing the box height; overflow clips the transparent glyphs so\n         they can never make the narrow rail horizontally scrollable. */\n      :host(.mj-left-nav-host--collapsed) .mj-left-nav__section-label {\n        position: relative;\n        color: transparent;\n        overflow: hidden;\n      }\n      :host(.mj-left-nav-host--collapsed) .mj-left-nav__section-label::after {\n        content: '';\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n        width: 20px;\n        height: 1px;\n        background: var(--mj-border-default);\n      }\n\n      /* No row edge exists in the narrow rail, so the badge docks on the icon's top-right corner\n         (the activity-bar idiom) as a compact attention count — presence = action needed. The\n         centred icon itself never moves. */\n      :host(.mj-left-nav-host--collapsed) .mj-left-nav__badge {\n        margin-left: 0;\n        align-self: auto;\n        position: absolute;\n        left: calc(50% + 4px);\n        top: 4px;\n        min-width: 15px;\n        height: 15px;\n        padding: 0 4px;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 9px;\n        line-height: 1;\n        white-space: nowrap;\n        background: var(--mj-brand-primary);\n        color: var(--mj-text-inverse);\n      }\n\n      /* Belt-and-braces: a collapsed rail never scrolls sideways. */\n      :host(.mj-left-nav-host--collapsed) .mj-left-nav {\n        overflow-x: hidden;\n      }\n    }\n\n    /* ── Mobile drawer pattern (≤700px) ──────────────────────────────────────\n       Desktop shows the rail inline. On mobile the rail would otherwise eat the\n       top of the screen, so we hide it off-canvas and surface a compact section\n       switcher in its place. Tapping the switcher slides the full rail in from\n       the left over a scrim — preserving trees, header/footer slots and badges\n       (item descriptions hide in the drawer for a tighter list).\n\n       The switcher / scrim / drawer-header are display:none above the\n       breakpoint; the rail keeps its desktop layout there. */\n    .mj-left-nav__switcher,\n    .mj-left-nav__scrim,\n    .mj-left-nav__drawer-header {\n      display: none;\n    }\n\n    @media (max-width: 700px) {\n      /* Host collapses to the switcher's footprint; the rail goes out of flow. */\n      :host {\n        width: 100% !important;\n      }\n\n      /* Hide item descriptions in the drawer — the label + icon are enough on a\n         narrow sheet; the secondary line just adds clutter. */\n      .mj-left-nav__description {\n        display: none;\n      }\n\n      /* Section switcher — reads as a picker for the current section. */\n      .mj-left-nav__switcher {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        width: 100%;\n        padding: 11px 14px;\n        border: none;\n        border-bottom: 1px solid var(--mj-border-default);\n        background: var(--mj-bg-surface);\n        color: var(--mj-text-primary);\n        font-family: inherit;\n        font-size: 14px;\n        font-weight: 600;\n        text-align: left;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n      }\n      .mj-left-nav__switcher:active {\n        background: var(--mj-bg-surface-active);\n      }\n      .mj-left-nav__switcher-icon {\n        width: 18px;\n        text-align: center;\n        font-size: 14px;\n        flex-shrink: 0;\n        color: var(--mj-brand-primary);\n      }\n      .mj-left-nav__switcher-label {\n        flex: 1;\n        min-width: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n      .mj-left-nav__switcher-hint {\n        flex-shrink: 0;\n        font-size: 15px;\n        color: var(--mj-text-muted);\n      }\n\n      /* Scrim — fades in with the drawer. */\n      .mj-left-nav__scrim {\n        display: block;\n        position: fixed;\n        inset: 0;\n        background: var(--mj-bg-overlay);\n        opacity: 0;\n        pointer-events: none;\n        transition: opacity 0.24s ease;\n        z-index: 9998;\n      }\n      :host(.mj-left-nav-host--open) .mj-left-nav__scrim {\n        opacity: 1;\n        pointer-events: auto;\n      }\n\n      /* Rail becomes a left off-canvas drawer. */\n      .mj-left-nav {\n        position: fixed;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        width: min(320px, 84vw) !important;\n        height: 100%;\n        max-height: none;\n        border-right: 1px solid var(--mj-border-default);\n        box-shadow: var(--mj-shadow-lg);\n        transform: translateX(-100%);\n        transition: transform 0.24s ease;\n        z-index: 9999;\n        padding-top: 0;\n      }\n      :host(.mj-left-nav-host--open) .mj-left-nav {\n        transform: translateX(0);\n      }\n\n      /* Drawer header — sticky title + close button. */\n      .mj-left-nav__drawer-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 8px;\n        position: sticky;\n        top: 0;\n        z-index: 1;\n        padding: 14px 12px 10px;\n        margin: 0 -8px 4px;\n        padding-left: 16px;\n        background: var(--mj-bg-surface);\n        border-bottom: 1px solid var(--mj-border-subtle);\n      }\n      .mj-left-nav__drawer-title {\n        font-size: 13px;\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 0.04em;\n        color: var(--mj-text-muted);\n      }\n      .mj-left-nav__drawer-close {\n        flex-shrink: 0;\n        width: 32px;\n        height: 32px;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        border: none;\n        background: transparent;\n        border-radius: 8px;\n        cursor: pointer;\n        color: var(--mj-text-secondary);\n        font-size: 16px;\n        font-family: inherit;\n      }\n      .mj-left-nav__drawer-close:active {\n        background: var(--mj-bg-surface-active);\n      }\n    }\n\n    @media (max-width: 700px) and (prefers-reduced-motion: reduce) {\n      .mj-left-nav,\n      .mj-left-nav__scrim {\n        transition: none;\n      }\n    }\n  `]\n})\nexport class MJLeftNavComponent implements OnDestroy {\n  /**\n   * DOM id of the `<aside>`, so the collapse toggle's `aria-expanded` can name the region it\n   * expands via `aria-controls`. Per-instance because a page may host more than one rail.\n   */\n  public readonly NavRegionId: string = `mj-left-nav-${++navRegionSeq}`;\n\n  /**\n   * The sections + items that make up the rail. Sections render top-to-bottom\n   * in array order; items inside each section render in array order.\n   */\n  @Input() Sections: MJLeftNavSection[] = [];\n\n  /**\n   * The id of the currently active item. Items matching this id get the\n   * active styling and `aria-current=\"page\"`.\n   */\n  @Input() ActiveId: string | null = null;\n\n  /**\n   * Width of the rail in pixels. Defaults to 240. Set to a smaller value\n   * (e.g., 200) for denser shells. Only applies to the desktop rail — on mobile\n   * the rail becomes a fixed-width off-canvas drawer.\n   */\n  @Input() Width: number = 240;\n\n  /**\n   * Set by a consumer that has visually collapsed the rail to an icons-only strip (via `Width` plus\n   * its own CSS hiding the labels). When true, each item gains a native `title` tooltip AND an\n   * `aria-label` carrying its full text.\n   *\n   * Why it is opt-in rather than always-on:\n   *  - **Tooltip**: with labels visible, a tooltip that just repeats the label is redundant noise on\n   *    every hover. Icon-only rails everywhere (VS Code's activity bar, Slack, Linear, Jira, Figma)\n   *    show one; expanded rails do not.\n   *  - **aria-label**: when the label IS visible it already names the button, and adding an identical\n   *    aria-label is at best a no-op. When the consumer's CSS hides `.mj-left-nav__text`, the button's\n   *    accessible name goes EMPTY — a screen reader announces \"button\" with no destination. That is\n   *    the hole this closes.\n   *\n   * Leaving it false reproduces the previous markup exactly, so existing consumers are unaffected.\n   */\n  @Input() IconOnly: boolean = false;\n\n  /**\n   * Opt-in desktop collapse: renders a compact double-angle toggle chip at the top of the rail and,\n   * when {@link Collapsed}, presents the rail as an icons-only strip ({@link CollapsedWidth} wide) —\n   * labels visually hidden but kept in the a11y tree, section labels folded to divider lines,\n   * badges docked on the icon corner, and per-item tooltips/aria auto-enabled.\n   *\n   * The component owns the PRESENTATION only — the consumer owns the STATE (bind `[(Collapsed)]`\n   * and persist it however the app persists preferences), the same split as `ExpandedIds`.\n   * Desktop-only: ≤700px the rail is the off-canvas drawer and the toggle hides.\n   *\n   * Two things to know when the rail's content is richer than a flat icon list:\n   *  - **Tree sections fold to their top level while collapsed** (see {@link ShowTreeStructure});\n   *    a top-level item stands in as active for an active descendant, and the tree returns intact\n   *    on expand. Items with no `icon` render a monogram so they stay visible and hittable.\n   *  - **The `[header]` / `[footer]` slots are yours.** The rail can't restyle projected content,\n   *    so a wide header (logo lockup + wordmark, a filter box) will overflow a `CollapsedWidth`\n   *    strip. Bind the same collapsed flag in the consumer and project a compact variant.\n   *\n   * Deliberately NOT included: hover-to-peek (auto-expand on pointer hover) — removed by ruling\n   * (2026-07-30): a rail that expands when the pointer grazes it moves the target the user was\n   * aiming at. Deliberate toggling beats clever hovering.\n   */\n  @Input() Collapsible: boolean = false;\n\n  /** Whether the rail is currently collapsed to icons. Two-way bindable via `[(Collapsed)]`. */\n  @Input() Collapsed: boolean = false;\n\n  /** Emitted when the user clicks the collapse toggle. Consumer updates + persists the state. */\n  @Output() CollapsedChange = new EventEmitter<boolean>();\n\n  /**\n   * Width of the collapsed icons-only strip. The default 60 is derived from the rail's own\n   * numbers — 8+8 container padding, 12+12 item padding, 18px icon, 1px border — so icons stay\n   * centred; retune it if those change.\n   */\n  @Input() CollapsedWidth: number = 60;\n\n  /**\n   * True below the 701px breakpoint, where the rail stops being a rail and becomes the off-canvas\n   * drawer. Tracked in TS — not just CSS — because collapse is more than styling: it also decides\n   * whether tree sections fold and whether items are named by tooltip. The collapsed STYLES are\n   * gated to ≥701px, so without this the drawer would keep the collapsed BEHAVIOR while showing\n   * full labels: a flattened tree, and a monogram beside the very label it stands in for.\n   *\n   * Mirrors the matchMedia pattern in `mj-filter-popover` (same package).\n   */\n  private isMobileViewport: boolean = false;\n\n  private readonly zone = inject(NgZone);\n  private readonly cdr = inject(ChangeDetectorRef);\n\n  private readonly mediaQuery: MediaQueryList | null =\n    typeof window !== 'undefined' && typeof window.matchMedia === 'function'\n      ? window.matchMedia('(max-width: 700px)')\n      : null;\n\n  // matchMedia 'change' fires OUTSIDE Angular's zone, so re-enter before flipping state the\n  // template reads.\n  private readonly onMediaChange = (e: MediaQueryListEvent): void => {\n    this.zone.run(() => {\n      this.isMobileViewport = e.matches;\n      this.cdr.markForCheck();\n    });\n  };\n\n  constructor() {\n    if (this.mediaQuery) {\n      this.isMobileViewport = this.mediaQuery.matches;\n      this.mediaQuery.addEventListener('change', this.onMediaChange);\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.mediaQuery?.removeEventListener('change', this.onMediaChange);\n  }\n\n  /**\n   * Whether the rail is collapsed *and* in a viewport where collapse means anything. Below 701px\n   * the rail is the off-canvas drawer — already dismissable, already showing full labels — so a\n   * persisted `Collapsed = true` must not follow the user down there.\n   */\n  public get IsNativelyCollapsed(): boolean {\n    return this.Collapsible && this.Collapsed && !this.isMobileViewport;\n  }\n\n  /** The width the rail actually renders at, honoring the collapse state. */\n  public get EffectiveWidth(): number {\n    return this.IsNativelyCollapsed ? this.CollapsedWidth : this.Width;\n  }\n\n  /**\n   * Icon-only presentation is on when the consumer forces it OR the rail is natively collapsed.\n   *\n   * `IconOnly` is deliberately NOT viewport-gated: that flag means the CONSUMER's own CSS has\n   * narrowed the rail, and we can't know which breakpoints they gated it to. Withdrawing the\n   * accessible names on their behalf could leave a genuinely icons-only rail unnamed — the exact\n   * hole `IconOnly` exists to close. Native collapse is ours to gate; theirs is theirs.\n   */\n  public get EffectiveIconOnly(): boolean {\n    return this.IconOnly || this.IsNativelyCollapsed;\n  }\n\n  /**\n   * Whether tree structure (chevrons, depth indentation, expanded children) renders at all.\n   *\n   * An icons-only rail is ~60px wide and shows nothing but a centred glyph per row, which leaves a\n   * tree with no way to express itself: the chevron would eat a third of the width and shove the\n   * icon off-centre, each depth level would push its icon 14px further right until the rail clipped\n   * it, and a child's icon (optional, and usually absent on tree leaves) would say nothing about\n   * which branch it belongs to. So while icons-only, each section renders its TOP-LEVEL items only —\n   * the same choice every icon rail makes (VS Code's activity bar shows one icon per container and\n   * defers the tree to the expanded pane).\n   *\n   * Nothing is lost on the way back: `ExpandedIds` is consumer-owned and untouched here, so the tree\n   * returns exactly as the user left it the moment the rail expands.\n   */\n  public get ShowTreeStructure(): boolean {\n    return !this.EffectiveIconOnly;\n  }\n\n  /**\n   * Whether an item paints as active. Normally an exact {@link ActiveId} match — but while the tree\n   * is suppressed (see {@link ShowTreeStructure}) the active item may be a child that isn't rendered,\n   * which would leave the collapsed rail with NOTHING highlighted and no sense of place. In that\n   * state a top-level item stands in for its active descendant.\n   */\n  public IsItemActive(item: MJLeftNavItem): boolean {\n    if (item.id === this.ActiveId) return true;\n    return this.EffectiveIconOnly && this.hasActiveDescendant(item);\n  }\n\n  /**\n   * `'page'` for the active item itself; `'true'` for a stand-in ancestor, which is current in the\n   * set but is not the page the user is on. Distinguishing them keeps the announcement honest.\n   */\n  public AriaCurrentFor(item: MJLeftNavItem): 'page' | 'true' | null {\n    if (item.id === this.ActiveId) return 'page';\n    return this.IsItemActive(item) ? 'true' : null;\n  }\n\n  private hasActiveDescendant(item: MJLeftNavItem): boolean {\n    if (!this.ActiveId || !item.children?.length) return false;\n    return this.findItemById(item.children, this.ActiveId) !== undefined;\n  }\n\n  /**\n   * Monogram for an icon-less item in an icons-only rail. `Array.from` rather than `charAt` so a\n   * label starting with an emoji or an astral character yields that whole character instead of half\n   * a surrogate pair. Falls back to a bullet for a blank label so the button is never empty.\n   */\n  public ItemInitial(item: MJLeftNavItem): string {\n    return Array.from(item.label?.trim() ?? '')[0] ?? '•';\n  }\n\n  /**\n   * Left margin that pins the toggle chip at the collapsed band's centre in BOTH modes, so the\n   * chip never relocates on toggle (the user never re-aims). Derived, not magic:\n   * (CollapsedWidth − 38px chip)/2 from the rail edge, minus the rail's 8px container padding.\n   * 38 = the 18px icon box + 2×10px chip padding.\n   */\n  public get CollapseToggleMarginPx(): number {\n    return Math.max(0, Math.round((this.CollapsedWidth - 38) / 2 - 8));\n  }\n\n  /** Reflects the collapsed state onto the host so the collapsed CSS can scope to it. */\n  @HostBinding('class.mj-left-nav-host--collapsed')\n  get isCollapsedHost(): boolean {\n    return this.IsNativelyCollapsed;\n  }\n\n  /** Flip + announce. The consumer receives the new value and persists it. */\n  public ToggleCollapsed(): void {\n    this.Collapsed = !this.Collapsed;\n    this.CollapsedChange.emit(this.Collapsed);\n  }\n\n  /**\n   * The text surfaced as an icon-only item's tooltip / accessible name. Folds in the description and\n   * badge because collapsing the rail hides both: the badge survives as an unlabeled corner count,\n   * so \"Batch approvals (2)\" is the only place a hovering user learns what the 2 counts.\n   */\n  public ItemTooltip(item: MJLeftNavItem): string {\n    const parts = [item.label];\n    if (item.description) parts.push(`— ${item.description}`);\n    if (item.badge != null) parts.push(`(${item.badge})`);\n    return parts.join(' ');\n  }\n\n  /**\n   * Label shown on the mobile drawer header and used as the switcher fallback\n   * label when no item is active. Defaults to `'Menu'`. Set to something\n   * domain-specific (e.g. `'Sections'`, `'Test Suites'`) for clearer context.\n   */\n  @Input() MobileTitle: string = 'Menu';\n\n  /**\n   * Ids of currently-expanded tree items. Items whose id appears here render\n   * with a down-chevron and their `children` are visible; items not in this\n   * list render with a right-chevron and their children stay collapsed.\n   * Consumer owns the state — toggle in response to `(ItemToggled)`.\n   *\n   * Only applies to items where `children !== undefined`; flat items ignore it.\n   */\n  @Input() ExpandedIds: string[] = [];\n\n  /**\n   * Emitted when a non-disabled item is clicked.\n   */\n  @Output() ItemClicked = new EventEmitter<MJLeftNavItem>();\n\n  /**\n   * Emitted when a tree item's chevron is clicked. Consumer should toggle\n   * the item's id in / out of `ExpandedIds`. Does NOT also fire `ItemClicked`.\n   */\n  @Output() ItemToggled = new EventEmitter<MJLeftNavItem>();\n\n  /**\n   * Whether the mobile off-canvas drawer is open. Component-owned, transient UI\n   * state — no effect above the 700px breakpoint where the rail is always inline.\n   */\n  public MobileNavOpen = false;\n\n  /** Reflects {@link MobileNavOpen} onto the host so CSS can drive the drawer. */\n  @HostBinding('class.mj-left-nav-host--open')\n  get isMobileNavOpen(): boolean {\n    return this.MobileNavOpen;\n  }\n\n  OpenMobileNav(): void {\n    this.MobileNavOpen = true;\n  }\n\n  CloseMobileNav(): void {\n    this.MobileNavOpen = false;\n  }\n\n  /** Escape closes the mobile drawer. No-op when it's already closed. */\n  @HostListener('document:keydown.escape')\n  onEscape(): void {\n    if (this.MobileNavOpen) {\n      this.MobileNavOpen = false;\n    }\n  }\n\n  OnItemClick(item: MJLeftNavItem): void {\n    if (item.disabled) return;\n    // Selecting a leaf dismisses the mobile drawer; harmless on desktop.\n    this.MobileNavOpen = false;\n    this.ItemClicked.emit(item);\n  }\n\n  OnItemToggle(event: Event, item: MJLeftNavItem): void {\n    event.stopPropagation();\n    // Expanding/collapsing a tree branch keeps the drawer open.\n    this.ItemToggled.emit(item);\n  }\n\n  /**\n   * The item matching {@link ActiveId} (searched recursively through trees),\n   * used to label the mobile section switcher with the current section's icon\n   * and label. Returns `undefined` when nothing is active.\n   */\n  get ActiveTriggerItem(): MJLeftNavItem | undefined {\n    if (!this.ActiveId) return undefined;\n    return this.findItemById(this.Sections.flatMap((s) => s.items), this.ActiveId);\n  }\n\n  private findItemById(items: MJLeftNavItem[], id: string): MJLeftNavItem | undefined {\n    for (const item of items) {\n      if (item.id === id) return item;\n      if (item.children?.length) {\n        const found = this.findItemById(item.children, id);\n        if (found) return found;\n      }\n    }\n    return undefined;\n  }\n\n  IsExpanded(id: string): boolean {\n    return this.ExpandedIds.indexOf(id) >= 0;\n  }\n\n  /**\n   * Whether any top-level item in this section actually has children to expand.\n   * The template calls this once per section; the result is threaded through\n   * the recursive itemTpl so leaf nodes only reserve a chevron-column\n   * placeholder when a sibling will actually render a chevron.\n   *\n   * Top-level check is sufficient — if a deeply-nested item has children, its\n   * parent's `children.length > 0` already qualifies the section as expandable.\n   */\n  HasExpandableItems(items: MJLeftNavItem[]): boolean {\n    for (const item of items) {\n      if (item.children && item.children.length > 0) return true;\n    }\n    return false;\n  }\n}\n"]}
+{"version":3,"file":"left-nav.component.js","sourceRoot":"","sources":["../../../src/lib/left-nav/left-nav.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectorRef,\n  Component,\n  EventEmitter,\n  HostBinding,\n  HostListener,\n  Input,\n  NgZone,\n  OnDestroy,\n  Output,\n  inject,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n/** Source of per-instance DOM ids — see {@link MJLeftNavComponent.NavRegionId}. */\nlet navRegionSeq = 0;\n\n/**\n * A single item in an `<mj-left-nav>`.\n */\nexport interface MJLeftNavItem {\n  /** Stable identifier — used for active-state matching and emitted on click. */\n  id: string;\n  /** Primary label rendered as the item's main text. */\n  label: string;\n  /** Optional Font Awesome icon class (e.g. `'fa-solid fa-users'`). */\n  icon?: string;\n  /** Optional muted secondary line shown under the label. */\n  description?: string;\n  /** Optional count badge rendered at the right of the item. */\n  badge?: string | number;\n  /** When `true`, the item renders dimmed and is not clickable. */\n  disabled?: boolean;\n  /**\n   * Optional child items for tree-structured nav (e.g. Testing Explorer's\n   * Test Suites tree). When `children` is `undefined` the item renders as a\n   * plain flat-list item (existing behavior). When defined — even as an empty\n   * array — the item participates in tree rendering: a chevron toggle shows\n   * for non-empty arrays, and an equal-width placeholder reserves alignment\n   * space for leaves so siblings line up. Expansion state is owned by the\n   * consumer via `[ExpandedIds]` on `<mj-left-nav>`.\n   */\n  children?: MJLeftNavItem[];\n}\n\n/**\n * A grouped section in an `<mj-left-nav>`. The optional `label` renders as an\n * uppercase section header above the items. Sections WITHOUT a label still\n * group items together (use multiple unlabeled sections to get visual dividers\n * without headers).\n */\nexport interface MJLeftNavSection {\n  /** Optional uppercase header above the items in this section. */\n  label?: string;\n  /** The clickable items in this section. */\n  items: MJLeftNavItem[];\n}\n\n/**\n * `<mj-left-nav>` — Canonical left rail for MJ Explorer dashboards that have\n * an internal section-nav (Admin shells, KH Config, KH Analytics, AI Analytics,\n * Communication, Credentials, APIKeys, etc.).\n *\n * Replaces the bespoke `.{name}-nav` / `.{name}-nav-item` patterns each of\n * those dashboards used to declare in their own CSS files.\n *\n * Supports:\n *  - Plain items (icon + label)\n *  - Items with a muted secondary description line (Admin shells pattern)\n *  - Items with a count badge (APIKeys pattern)\n *  - Sections with uppercase headers (Communication / Credentials pattern)\n *  - Optional `[header]` and `[footer]` content slots (KH Config logo header, etc.)\n *  - Responsive mobile drawer (≤700px): the rail hides off-canvas and a compact\n *    section switcher takes its place; tapping it slides the full rail in over a\n *    scrim. The rail keeps its full content (trees, slots, descriptions, badges)\n *    inside the drawer — no flattening. Set `[MobileTitle]` for the drawer label.\n *\n * ## Example\n *\n * ```typescript\n * sections: MJLeftNavSection[] = [\n *   {\n *     items: [\n *       { id: 'users',  icon: 'fa-solid fa-users',         label: 'Users',  description: 'Manage user accounts' },\n *       { id: 'roles',  icon: 'fa-solid fa-user-shield',   label: 'Roles',  description: 'Define roles and assignments' },\n *     ]\n *   }\n * ];\n * activeId = 'users';\n * ```\n *\n * ```html\n * <mj-left-nav\n *   [Sections]=\"sections\"\n *   [ActiveId]=\"activeId\"\n *   (ItemClicked)=\"onItemClicked($event)\">\n * </mj-left-nav>\n * ```\n *\n * Responsive — at ≤700px the rail becomes an off-canvas drawer (see the feature\n * list above). The consumer should still switch the parent's flex-direction from\n * row → column at the same breakpoint (e.g. `<mj-page-body>` Direction=\"row\" with\n * a `@media` override) so the in-flow section switcher stacks above the content\n * pane rather than competing with it for horizontal space.\n */\n@Component({\n  selector: 'mj-left-nav',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    <!-- Mobile-only section switcher (hidden ≥701px via CSS). Shows the active\n         section and opens the full rail as an off-canvas drawer on tap. The rail\n         itself is too rich (trees, header/footer slots, descriptions, badges) to\n         flatten into a dropdown or tab strip, so we surface it as-is in a drawer. -->\n    <button\n      type=\"button\"\n      class=\"mj-left-nav__switcher\"\n      [attr.aria-expanded]=\"MobileNavOpen\"\n      aria-haspopup=\"dialog\"\n      (click)=\"OpenMobileNav()\">\n      @if (ActiveTriggerItem?.icon) {\n        <i class=\"mj-left-nav__switcher-icon\" [class]=\"ActiveTriggerItem!.icon\" aria-hidden=\"true\"></i>\n      }\n      <span class=\"mj-left-nav__switcher-label\">{{ ActiveTriggerItem?.label || MobileTitle }}</span>\n      <i class=\"fa-solid fa-bars-staggered mj-left-nav__switcher-hint\" aria-hidden=\"true\"></i>\n    </button>\n\n    <!-- Scrim behind the mobile drawer (hidden ≥701px / when closed via CSS). -->\n    <div class=\"mj-left-nav__scrim\" (click)=\"CloseMobileNav()\" aria-hidden=\"true\"></div>\n\n    <aside\n      class=\"mj-left-nav\"\n      [id]=\"NavRegionId\"\n      [style.width.px]=\"EffectiveWidth\"\n      role=\"navigation\"\n      [attr.aria-modal]=\"MobileNavOpen ? true : null\">\n      <!-- Desktop collapse toggle (opt-in via [Collapsible]) — a compact double-angle chip, NOT a\n           hamburger (a lone hamburger row reads as a broken nav item) and NOT a nav-row lookalike.\n           The chip is LOCKED in one spot — centred in the collapsed band — in BOTH modes: only the\n           glyph flips on toggle, so the user never re-aims (a control that relocates when clicked\n           makes the user chase it). « = collapse toward the left edge, » = expand. Hidden ≤700px:\n           the mobile drawer is its own affordance and collapsing a drawer is meaningless. -->\n      @if (Collapsible) {\n        <button\n          type=\"button\"\n          class=\"mj-left-nav__collapse-toggle\"\n          [style.margin-left.px]=\"CollapseToggleMarginPx\"\n          [attr.aria-label]=\"Collapsed ? 'Expand navigation' : 'Collapse navigation'\"\n          [attr.aria-expanded]=\"!Collapsed\"\n          [attr.aria-controls]=\"NavRegionId\"\n          [title]=\"Collapsed ? 'Expand navigation' : 'Collapse navigation'\"\n          (click)=\"ToggleCollapsed()\">\n          <i\n            class=\"fa-solid mj-left-nav__collapse-icon\"\n            [class.fa-angles-right]=\"Collapsed\"\n            [class.fa-angles-left]=\"!Collapsed\"\n            aria-hidden=\"true\"></i>\n        </button>\n        <!-- Wordless hairline between the toggle and the nav content: without a boundary the chip\n             reads as a destination. Same height in both modes, so items never shift on toggle. -->\n        <div class=\"mj-left-nav__collapse-divider\" aria-hidden=\"true\"></div>\n      }\n\n      <!-- Drawer header — only visible on mobile when the rail is a drawer. -->\n      <div class=\"mj-left-nav__drawer-header\">\n        <span class=\"mj-left-nav__drawer-title\">{{ MobileTitle }}</span>\n        <button\n          type=\"button\"\n          class=\"mj-left-nav__drawer-close\"\n          aria-label=\"Close menu\"\n          (click)=\"CloseMobileNav()\">\n          <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n        </button>\n      </div>\n\n      <ng-content select=\"[header]\"></ng-content>\n\n      @for (section of Sections; track $index) {\n        @if (section.label) {\n          <div class=\"mj-left-nav__section-label\">{{ section.label }}</div>\n        }\n        @for (item of section.items; track item.id) {\n          <!-- hasExpandable goes false while icons-only, collapsing each section to its TOP-LEVEL\n               items only — see ShowTreeStructure for why a tree can't survive a 60px rail. -->\n          <ng-container\n            *ngTemplateOutlet=\"itemTpl; context: { item: item, depth: 0, hasExpandable: ShowTreeStructure && HasExpandableItems(section.items) }\">\n          </ng-container>\n        }\n      }\n\n      <ng-content select=\"[footer]\"></ng-content>\n    </aside>\n\n    <!-- Recursive item template — renders one item plus, when expanded,\n         its children indented by depth. The hasExpandable flag is computed\n         once per section and threaded through the recursion so leaf nodes\n         only reserve a chevron-column placeholder when a sibling actually\n         shows a chevron. -->\n    <ng-template #itemTpl let-item=\"item\" let-depth=\"depth\" let-hasExpandable=\"hasExpandable\">\n      @if (item.children !== undefined && hasExpandable) {\n        <!-- Tree row: chevron (when this node has children) or placeholder\n             (when a sibling has children but this leaf needs alignment). -->\n        <div\n          class=\"mj-left-nav__row\"\n          [style.padding-left.px]=\"depth * 14\">\n          @if (item.children.length > 0) {\n            <button\n              type=\"button\"\n              class=\"mj-left-nav__chevron\"\n              [attr.aria-label]=\"IsExpanded(item.id) ? 'Collapse' : 'Expand'\"\n              [attr.aria-expanded]=\"IsExpanded(item.id)\"\n              (click)=\"OnItemToggle($event, item)\">\n              <i class=\"fa-solid\"\n                 [class.fa-chevron-down]=\"IsExpanded(item.id)\"\n                 [class.fa-chevron-right]=\"!IsExpanded(item.id)\"\n                 aria-hidden=\"true\"></i>\n            </button>\n          } @else {\n            <span class=\"mj-left-nav__chevron-placeholder\" aria-hidden=\"true\"></span>\n          }\n          <ng-container\n            *ngTemplateOutlet=\"itemBtn; context: { item: item }\">\n          </ng-container>\n        </div>\n\n        @if (item.children.length > 0 && IsExpanded(item.id)) {\n          @for (child of item.children; track child.id) {\n            <ng-container\n              *ngTemplateOutlet=\"itemTpl; context: { item: child, depth: depth + 1, hasExpandable: hasExpandable }\">\n            </ng-container>\n          }\n        }\n      } @else {\n        <!-- Flat render: item.children is undefined, OR no sibling in this\n             section is actually expandable — render the button directly with\n             no chevron column reserved. -->\n        <ng-container\n          *ngTemplateOutlet=\"itemBtn; context: { item: item }\">\n        </ng-container>\n      }\n    </ng-template>\n\n    <!-- Item button — shared by both flat and tree rendering paths -->\n    <ng-template #itemBtn let-item=\"item\">\n      <button\n        type=\"button\"\n        class=\"mj-left-nav__item\"\n        [class.mj-left-nav__item--active]=\"IsItemActive(item)\"\n        [class.mj-left-nav__item--disabled]=\"item.disabled\"\n        [disabled]=\"item.disabled\"\n        [attr.aria-current]=\"AriaCurrentFor(item)\"\n        [attr.title]=\"EffectiveIconOnly ? ItemTooltip(item) : null\"\n        [attr.aria-label]=\"EffectiveIconOnly ? ItemTooltip(item) : null\"\n        (click)=\"OnItemClick(item)\">\n        @if (item.icon) {\n          <i class=\"mj-left-nav__icon\" [class]=\"item.icon\" aria-hidden=\"true\"></i>\n        } @else if (EffectiveIconOnly) {\n          <!-- An icon-less item collapses to a button with NOTHING visible in it (the label is the\n               only content and it is clipped away) — an invisible-but-clickable row. The icon is\n               optional on MJLeftNavItem, so the rail cannot require one; a monogram keeps every item\n               identifiable and hittable. Only rendered icons-only: expanded rails are unchanged. -->\n          <span class=\"mj-left-nav__initial\" aria-hidden=\"true\">{{ ItemInitial(item) }}</span>\n        }\n        <span class=\"mj-left-nav__text\">\n          <span class=\"mj-left-nav__label\">{{ item.label }}</span>\n          @if (item.description) {\n            <span class=\"mj-left-nav__description\">{{ item.description }}</span>\n          }\n        </span>\n        @if (item.badge != null) {\n          <span class=\"mj-left-nav__badge\">{{ item.badge }}</span>\n        }\n      </button>\n    </ng-template>\n  `,\n  styles: [`\n    :host {\n      display: block;\n      flex-shrink: 0;\n    }\n\n    .mj-left-nav {\n      height: 100%;\n      background: var(--mj-bg-surface);\n      border-right: 1px solid var(--mj-border-default);\n      overflow-y: auto;\n      padding: 8px;\n      box-sizing: border-box;\n    }\n\n    .mj-left-nav__section-label {\n      font-size: 11px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n      color: var(--mj-text-muted);\n      padding: 12px 12px 6px;\n    }\n\n    .mj-left-nav__section-label:first-child {\n      padding-top: 6px;\n    }\n\n    .mj-left-nav__item {\n      display: flex;\n      align-items: flex-start;\n      gap: 10px;\n      padding: 10px 12px;\n      width: 100%;\n      border: none;\n      background: transparent;\n      border-radius: 8px;\n      cursor: pointer;\n      transition: background-color 0.12s ease, color 0.12s ease;\n      margin-bottom: 2px;\n      font-family: inherit;\n      color: var(--mj-text-secondary);\n      text-align: left;\n    }\n\n    .mj-left-nav__item:hover:not(.mj-left-nav__item--disabled) {\n      background: var(--mj-bg-surface-hover);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-left-nav__item--active {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    .mj-left-nav__item--active:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n    }\n\n    .mj-left-nav__item--disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .mj-left-nav__icon {\n      width: 18px;\n      text-align: center;\n      font-size: 13px;\n      margin-top: 1px;\n      flex-shrink: 0;\n      color: inherit;\n    }\n\n    /* Stand-in glyph for an icon-less item while the rail is icons-only. Same 18px box as\n       .mj-left-nav__icon so it sits on the identical optical column — the rail reads as one\n       consistent strip whether an item brought an icon or not. */\n    .mj-left-nav__initial {\n      width: 18px;\n      text-align: center;\n      font-size: 12px;\n      font-weight: 600;\n      line-height: 1.2;\n      margin-top: 1px;\n      flex-shrink: 0;\n      color: inherit;\n      text-transform: uppercase;\n    }\n\n    .mj-left-nav__text {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .mj-left-nav__label {\n      font-size: 13px;\n      font-weight: 500;\n      line-height: 1.2;\n    }\n\n    .mj-left-nav__description {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      margin-top: 3px;\n      line-height: 1.3;\n    }\n\n    .mj-left-nav__item--active .mj-left-nav__description {\n      color: color-mix(in srgb, var(--mj-brand-primary) 70%, var(--mj-text-muted));\n    }\n\n    .mj-left-nav__badge {\n      margin-left: auto;\n      font-size: 11px;\n      font-weight: 600;\n      padding: 2px 8px;\n      border-radius: 999px;\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-secondary);\n      align-self: center;\n    }\n\n    .mj-left-nav__item--active .mj-left-nav__badge {\n      background: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    /* ── Tree rendering ─────────────────────────────────────────────────────\n       Used when MJLeftNavItem.children is defined (even as an empty array).\n       The row wraps a chevron/placeholder + the item button so they sit on\n       one line, and depth-based padding-left is applied to the row (not the\n       item) so the chevron aligns with the depth column. */\n\n    .mj-left-nav__row {\n      display: flex;\n      align-items: stretch;\n      gap: 2px;\n    }\n\n    .mj-left-nav__row .mj-left-nav__item {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .mj-left-nav__chevron {\n      flex-shrink: 0;\n      width: 20px;\n      height: 32px;\n      align-self: center;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      border: none;\n      background: transparent;\n      border-radius: 4px;\n      cursor: pointer;\n      color: var(--mj-text-muted);\n      font-size: 10px;\n      padding: 0;\n      transition: background-color 0.12s ease, color 0.12s ease;\n      font-family: inherit;\n    }\n\n    .mj-left-nav__chevron:hover {\n      background: var(--mj-bg-surface-hover);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-left-nav__chevron-placeholder {\n      flex-shrink: 0;\n      width: 20px;\n      display: inline-block;\n    }\n\n    /* ── Desktop collapse (opt-in via [Collapsible]) ──────────────────────────\n       The toggle chip + the icons-only collapsed presentation. DESKTOP ONLY: below 701px the rail\n       is the off-canvas drawer, which is already dismissable — collapsing it would be nonsense —\n       so the toggle hides and the collapsed rules never apply there. Hover-to-peek is deliberately\n       NOT part of this feature (removed by ruling 2026-07-30: a rail that expands when the pointer\n       grazes it moves the target the user was aiming at). */\n\n    .mj-left-nav__collapse-toggle {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: fit-content;\n      padding: 8px 10px;\n      border: none;\n      border-radius: 8px;\n      background: transparent;\n      color: var(--mj-text-muted);\n      font-family: inherit;\n      cursor: pointer;\n      box-sizing: border-box;\n      transition: background-color 0.12s ease, color 0.12s ease;\n      margin-bottom: 2px;\n    }\n\n    .mj-left-nav__collapse-toggle:hover {\n      background: var(--mj-bg-surface-hover);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-left-nav__collapse-toggle:focus-visible {\n      outline: 2px solid var(--mj-border-focus);\n      outline-offset: -2px;\n    }\n\n    /* 18px box = the same footprint as .mj-left-nav__icon, so the chip sits on the items' optical\n       icon column when centred in the collapsed band. Slightly smaller glyph than the nav icons —\n       this is a chrome control, not a destination. */\n    .mj-left-nav__collapse-icon {\n      width: 18px;\n      text-align: center;\n      font-size: 12px;\n      flex-shrink: 0;\n    }\n\n    .mj-left-nav__collapse-divider {\n      height: 1px;\n      margin: 4px 0;\n      background: var(--mj-border-default);\n    }\n\n    @media (max-width: 700px) {\n      .mj-left-nav__collapse-toggle,\n      .mj-left-nav__collapse-divider {\n        display: none;\n      }\n    }\n\n    @media (min-width: 701px) {\n      /* ITEM labels are HIDDEN VISUALLY, NOT REMOVED. display:none would drop them from the\n         accessibility tree too, leaving every rail button unnamed — an icon-only rail a screen\n         reader cannot read. This keeps the name and only takes the pixels. (The tooltips/aria the\n         items grow while collapsed come from EffectiveIconOnly.) */\n      :host(.mj-left-nav-host--collapsed) .mj-left-nav__text {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        margin: -1px;\n        padding: 0;\n        overflow: hidden;\n        clip-path: inset(50%);\n        white-space: nowrap;\n        border: 0;\n      }\n\n      /* With the text out of flow the icon is the only thing left; centre it in the narrow rail. */\n      :host(.mj-left-nav-host--collapsed) .mj-left-nav__item {\n        justify-content: center;\n        gap: 0;\n        margin-inline: auto;\n        position: relative;\n      }\n\n      /* SECTION labels become a small centred divider line, keeping the label's OWN box (padding +\n         height) so the vertical rhythm is IDENTICAL to the expanded rail — the words come back in\n         the exact same place on expand. color: transparent hides the glyphs without removing them\n         from the a11y tree or changing the box height; overflow clips the transparent glyphs so\n         they can never make the narrow rail horizontally scrollable. */\n      :host(.mj-left-nav-host--collapsed) .mj-left-nav__section-label {\n        position: relative;\n        color: transparent;\n        overflow: hidden;\n      }\n      :host(.mj-left-nav-host--collapsed) .mj-left-nav__section-label::after {\n        content: '';\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n        width: 20px;\n        height: 1px;\n        background: var(--mj-border-default);\n      }\n\n      /* No row edge exists in the narrow rail, so the badge docks on the icon's top-right corner\n         (the activity-bar idiom) as a compact attention count — presence = action needed. The\n         centred icon itself never moves. */\n      :host(.mj-left-nav-host--collapsed) .mj-left-nav__badge {\n        margin-left: 0;\n        align-self: auto;\n        position: absolute;\n        left: calc(50% + 4px);\n        top: 4px;\n        min-width: 15px;\n        height: 15px;\n        padding: 0 4px;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 9px;\n        line-height: 1;\n        white-space: nowrap;\n        background: var(--mj-brand-primary);\n        color: var(--mj-text-inverse);\n      }\n\n      /* Belt-and-braces: a collapsed rail never scrolls sideways. */\n      :host(.mj-left-nav-host--collapsed) .mj-left-nav {\n        overflow-x: hidden;\n      }\n    }\n\n    /* ── Mobile drawer pattern (≤700px) ──────────────────────────────────────\n       Desktop shows the rail inline. On mobile the rail would otherwise eat the\n       top of the screen, so we hide it off-canvas and surface a compact section\n       switcher in its place. Tapping the switcher slides the full rail in from\n       the left over a scrim — preserving trees, header/footer slots and badges\n       (item descriptions hide in the drawer for a tighter list).\n\n       The switcher / scrim / drawer-header are display:none above the\n       breakpoint; the rail keeps its desktop layout there. */\n    .mj-left-nav__switcher,\n    .mj-left-nav__scrim,\n    .mj-left-nav__drawer-header {\n      display: none;\n    }\n\n    @media (max-width: 700px) {\n      /* Host collapses to the switcher's footprint; the rail goes out of flow. */\n      :host {\n        width: 100% !important;\n      }\n\n      /* Hide item descriptions in the drawer — the label + icon are enough on a\n         narrow sheet; the secondary line just adds clutter. */\n      .mj-left-nav__description {\n        display: none;\n      }\n\n      /* Section switcher — reads as a picker for the current section. */\n      .mj-left-nav__switcher {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        width: 100%;\n        padding: 11px 14px;\n        border: none;\n        border-bottom: 1px solid var(--mj-border-default);\n        background: var(--mj-bg-surface);\n        color: var(--mj-text-primary);\n        font-family: inherit;\n        font-size: 14px;\n        font-weight: 600;\n        text-align: left;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n      }\n      .mj-left-nav__switcher:active {\n        background: var(--mj-bg-surface-active);\n      }\n      .mj-left-nav__switcher-icon {\n        width: 18px;\n        text-align: center;\n        font-size: 14px;\n        flex-shrink: 0;\n        color: var(--mj-brand-primary);\n      }\n      .mj-left-nav__switcher-label {\n        flex: 1;\n        min-width: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n      .mj-left-nav__switcher-hint {\n        flex-shrink: 0;\n        font-size: 15px;\n        color: var(--mj-text-muted);\n      }\n\n      /* Scrim — fades in with the drawer. */\n      .mj-left-nav__scrim {\n        display: block;\n        position: fixed;\n        inset: 0;\n        background: var(--mj-bg-overlay);\n        opacity: 0;\n        pointer-events: none;\n        transition: opacity 0.24s ease;\n        z-index: 9998;\n      }\n      :host(.mj-left-nav-host--open) .mj-left-nav__scrim {\n        opacity: 1;\n        pointer-events: auto;\n      }\n\n      /* Rail becomes a left off-canvas drawer. */\n      .mj-left-nav {\n        position: fixed;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        width: min(320px, 84vw) !important;\n        height: 100%;\n        max-height: none;\n        border-right: 1px solid var(--mj-border-default);\n        box-shadow: var(--mj-shadow-lg);\n        transform: translateX(-100%);\n        transition: transform 0.24s ease;\n        z-index: 9999;\n        padding-top: 0;\n      }\n      :host(.mj-left-nav-host--open) .mj-left-nav {\n        transform: translateX(0);\n      }\n\n      /* Drawer header — sticky title + close button. */\n      .mj-left-nav__drawer-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 8px;\n        position: sticky;\n        top: 0;\n        z-index: 1;\n        padding: 14px 12px 10px;\n        margin: 0 -8px 4px;\n        padding-left: 16px;\n        background: var(--mj-bg-surface);\n        border-bottom: 1px solid var(--mj-border-subtle);\n      }\n      .mj-left-nav__drawer-title {\n        font-size: 13px;\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 0.04em;\n        color: var(--mj-text-muted);\n      }\n      .mj-left-nav__drawer-close {\n        flex-shrink: 0;\n        width: 32px;\n        height: 32px;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        border: none;\n        background: transparent;\n        border-radius: 8px;\n        cursor: pointer;\n        color: var(--mj-text-secondary);\n        font-size: 16px;\n        font-family: inherit;\n      }\n      .mj-left-nav__drawer-close:active {\n        background: var(--mj-bg-surface-active);\n      }\n    }\n\n    @media (max-width: 700px) and (prefers-reduced-motion: reduce) {\n      .mj-left-nav,\n      .mj-left-nav__scrim {\n        transition: none;\n      }\n    }\n  `]\n})\nexport class MJLeftNavComponent implements OnDestroy {\n  /**\n   * DOM id of the `<aside>`, so the collapse toggle's `aria-expanded` can name the region it\n   * expands via `aria-controls`. Per-instance because a page may host more than one rail.\n   */\n  public readonly NavRegionId: string = `mj-left-nav-${++navRegionSeq}`;\n\n  /**\n   * The sections + items that make up the rail. Sections render top-to-bottom\n   * in array order; items inside each section render in array order.\n   */\n  @Input() Sections: MJLeftNavSection[] = [];\n\n  /**\n   * The id of the currently active item. Items matching this id get the\n   * active styling and `aria-current=\"page\"`.\n   */\n  @Input() ActiveId: string | null = null;\n\n  /**\n   * Width of the rail in pixels. Defaults to 240. Set to a smaller value\n   * (e.g., 200) for denser shells. Only applies to the desktop rail — on mobile\n   * the rail becomes a fixed-width off-canvas drawer.\n   */\n  @Input() Width: number = 240;\n\n  /**\n   * Set by a consumer that has visually collapsed the rail to an icons-only strip (via `Width` plus\n   * its own CSS hiding the labels). When true, each item gains a native `title` tooltip AND an\n   * `aria-label` carrying its full text.\n   *\n   * Why it is opt-in rather than always-on:\n   *  - **Tooltip**: with labels visible, a tooltip that just repeats the label is redundant noise on\n   *    every hover. Icon-only rails everywhere (VS Code's activity bar, Slack, Linear, Jira, Figma)\n   *    show one; expanded rails do not.\n   *  - **aria-label**: when the label IS visible it already names the button, and adding an identical\n   *    aria-label is at best a no-op. When the consumer's CSS hides `.mj-left-nav__text`, the button's\n   *    accessible name goes EMPTY — a screen reader announces \"button\" with no destination. That is\n   *    the hole this closes.\n   *\n   * Leaving it false reproduces the previous markup exactly, so existing consumers are unaffected.\n   */\n  @Input() IconOnly: boolean = false;\n\n  /**\n   * Opt-in desktop collapse: renders a compact double-angle toggle chip at the top of the rail and,\n   * when {@link Collapsed}, presents the rail as an icons-only strip ({@link CollapsedWidth} wide) —\n   * labels visually hidden but kept in the a11y tree, section labels folded to divider lines,\n   * badges docked on the icon corner, and per-item tooltips/aria auto-enabled.\n   *\n   * The component owns the PRESENTATION only — the consumer owns the STATE (bind `[(Collapsed)]`\n   * and persist it however the app persists preferences), the same split as `ExpandedIds`.\n   * Desktop-only: ≤700px the rail is the off-canvas drawer and the toggle hides.\n   *\n   * Two things to know when the rail's content is richer than a flat icon list:\n   *  - **Tree sections fold to their top level while collapsed** (see {@link ShowTreeStructure});\n   *    a top-level item stands in as active for an active descendant, and the tree returns intact\n   *    on expand. Items with no `icon` render a monogram so they stay visible and hittable.\n   *  - **The `[header]` / `[footer]` slots are yours.** The rail can't restyle projected content,\n   *    so a wide header (logo lockup + wordmark, a filter box) will overflow a `CollapsedWidth`\n   *    strip. Bind the same collapsed flag in the consumer and project a compact variant.\n   *\n   * Deliberately NOT included: hover-to-peek (auto-expand on pointer hover) — removed by ruling\n   * (2026-07-30): a rail that expands when the pointer grazes it moves the target the user was\n   * aiming at. Deliberate toggling beats clever hovering.\n   */\n  @Input() Collapsible: boolean = false;\n\n  /** Whether the rail is currently collapsed to icons. Two-way bindable via `[(Collapsed)]`. */\n  @Input() Collapsed: boolean = false;\n\n  /** Emitted when the user clicks the collapse toggle. Consumer updates + persists the state. */\n  @Output() CollapsedChange = new EventEmitter<boolean>();\n\n  /**\n   * Width of the collapsed icons-only strip. The default 60 is derived from the rail's own\n   * numbers — 8+8 container padding, 12+12 item padding, 18px icon, 1px border — so icons stay\n   * centred; retune it if those change.\n   */\n  @Input() CollapsedWidth: number = 60;\n\n  /**\n   * True below the 701px breakpoint, where the rail stops being a rail and becomes the off-canvas\n   * drawer. Tracked in TS — not just CSS — because collapse is more than styling: it also decides\n   * whether tree sections fold and whether items are named by tooltip. The collapsed STYLES are\n   * gated to ≥701px, so without this the drawer would keep the collapsed BEHAVIOR while showing\n   * full labels: a flattened tree, and a monogram beside the very label it stands in for.\n   *\n   * Mirrors the matchMedia pattern in `mj-filter-popover` (same package).\n   */\n  private isMobileViewport: boolean = false;\n\n  private readonly zone = inject(NgZone);\n  private readonly cdr = inject(ChangeDetectorRef);\n\n  private readonly mediaQuery: MediaQueryList | null =\n    typeof window !== 'undefined' && typeof window.matchMedia === 'function'\n      ? window.matchMedia('(max-width: 700px)')\n      : null;\n\n  // matchMedia 'change' fires OUTSIDE Angular's zone, so re-enter before flipping state the\n  // template reads.\n  private readonly onMediaChange = (e: MediaQueryListEvent): void => {\n    this.zone.run(() => {\n      this.isMobileViewport = e.matches;\n      this.cdr.markForCheck();\n    });\n  };\n\n  constructor() {\n    if (this.mediaQuery) {\n      this.isMobileViewport = this.mediaQuery.matches;\n      this.mediaQuery.addEventListener('change', this.onMediaChange);\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.mediaQuery?.removeEventListener('change', this.onMediaChange);\n  }\n\n  /**\n   * Whether the rail is collapsed *and* in a viewport where collapse means anything. Below 701px\n   * the rail is the off-canvas drawer — already dismissable, already showing full labels — so a\n   * persisted `Collapsed = true` must not follow the user down there.\n   */\n  public get IsNativelyCollapsed(): boolean {\n    return this.Collapsible && this.Collapsed && !this.isMobileViewport;\n  }\n\n  /** The width the rail actually renders at, honoring the collapse state. */\n  public get EffectiveWidth(): number {\n    return this.IsNativelyCollapsed ? this.CollapsedWidth : this.Width;\n  }\n\n  /**\n   * Icon-only presentation is on when the consumer forces it OR the rail is natively collapsed.\n   *\n   * `IconOnly` is deliberately NOT viewport-gated: that flag means the CONSUMER's own CSS has\n   * narrowed the rail, and we can't know which breakpoints they gated it to. Withdrawing the\n   * accessible names on their behalf could leave a genuinely icons-only rail unnamed — the exact\n   * hole `IconOnly` exists to close. Native collapse is ours to gate; theirs is theirs.\n   */\n  public get EffectiveIconOnly(): boolean {\n    return this.IconOnly || this.IsNativelyCollapsed;\n  }\n\n  /**\n   * Whether tree structure (chevrons, depth indentation, expanded children) renders at all.\n   *\n   * An icons-only rail is ~60px wide and shows nothing but a centred glyph per row, which leaves a\n   * tree with no way to express itself: the chevron would eat a third of the width and shove the\n   * icon off-centre, each depth level would push its icon 14px further right until the rail clipped\n   * it, and a child's icon (optional, and usually absent on tree leaves) would say nothing about\n   * which branch it belongs to. So while icons-only, each section renders its TOP-LEVEL items only —\n   * the same choice every icon rail makes (VS Code's activity bar shows one icon per container and\n   * defers the tree to the expanded pane).\n   *\n   * Nothing is lost on the way back: `ExpandedIds` is consumer-owned and untouched here, so the tree\n   * returns exactly as the user left it the moment the rail expands.\n   */\n  public get ShowTreeStructure(): boolean {\n    return !this.EffectiveIconOnly;\n  }\n\n  /**\n   * Whether an item paints as active. Normally an exact {@link ActiveId} match — but while the tree\n   * is suppressed (see {@link ShowTreeStructure}) the active item may be a child that isn't rendered,\n   * which would leave the collapsed rail with NOTHING highlighted and no sense of place. In that\n   * state a top-level item stands in for its active descendant.\n   */\n  public IsItemActive(item: MJLeftNavItem): boolean {\n    if (item.id === this.ActiveId) return true;\n    return this.EffectiveIconOnly && this.hasActiveDescendant(item);\n  }\n\n  /**\n   * `'page'` for the active item itself; `'true'` for a stand-in ancestor, which is current in the\n   * set but is not the page the user is on. Distinguishing them keeps the announcement honest.\n   */\n  public AriaCurrentFor(item: MJLeftNavItem): 'page' | 'true' | null {\n    if (item.id === this.ActiveId) return 'page';\n    return this.IsItemActive(item) ? 'true' : null;\n  }\n\n  private hasActiveDescendant(item: MJLeftNavItem): boolean {\n    if (!this.ActiveId || !item.children?.length) return false;\n    return this.findItemById(item.children, this.ActiveId) !== undefined;\n  }\n\n  /**\n   * Monogram for an icon-less item in an icons-only rail. `Array.from` rather than `charAt` so a\n   * label starting with an emoji or an astral character yields that whole character instead of half\n   * a surrogate pair. Falls back to a bullet for a blank label so the button is never empty.\n   */\n  public ItemInitial(item: MJLeftNavItem): string {\n    return Array.from(item.label?.trim() ?? '')[0] ?? '•';\n  }\n\n  /**\n   * Left margin that pins the toggle chip at the collapsed band's centre in BOTH modes, so the\n   * chip never relocates on toggle (the user never re-aims). Derived, not magic:\n   * (CollapsedWidth − 38px chip)/2 from the rail edge, minus the rail's 8px container padding.\n   * 38 = the 18px icon box + 2×10px chip padding.\n   */\n  public get CollapseToggleMarginPx(): number {\n    return Math.max(0, Math.round((this.CollapsedWidth - 38) / 2 - 8));\n  }\n\n  /** Reflects the collapsed state onto the host so the collapsed CSS can scope to it. */\n  @HostBinding('class.mj-left-nav-host--collapsed')\n  get isCollapsedHost(): boolean {\n    return this.IsNativelyCollapsed;\n  }\n\n  /** Flip + announce. The consumer receives the new value and persists it. */\n  public ToggleCollapsed(): void {\n    this.Collapsed = !this.Collapsed;\n    this.CollapsedChange.emit(this.Collapsed);\n  }\n\n  /**\n   * The text surfaced as an icon-only item's tooltip / accessible name. Folds in the description and\n   * badge because collapsing the rail hides both: the badge survives as an unlabeled corner count,\n   * so \"Batch approvals (2)\" is the only place a hovering user learns what the 2 counts.\n   */\n  public ItemTooltip(item: MJLeftNavItem): string {\n    const parts = [item.label];\n    if (item.description) parts.push(`— ${item.description}`);\n    if (item.badge != null) parts.push(`(${item.badge})`);\n    return parts.join(' ');\n  }\n\n  /**\n   * Label shown on the mobile drawer header and used as the switcher fallback\n   * label when no item is active. Defaults to `'Menu'`. Set to something\n   * domain-specific (e.g. `'Sections'`, `'Test Suites'`) for clearer context.\n   */\n  @Input() MobileTitle: string = 'Menu';\n\n  /**\n   * Ids of currently-expanded tree items. Items whose id appears here render\n   * with a down-chevron and their `children` are visible; items not in this\n   * list render with a right-chevron and their children stay collapsed.\n   * Consumer owns the state — toggle in response to `(ItemToggled)`.\n   *\n   * Only applies to items where `children !== undefined`; flat items ignore it.\n   */\n  @Input() ExpandedIds: string[] = [];\n\n  /**\n   * Emitted when a non-disabled item is clicked.\n   */\n  @Output() ItemClicked = new EventEmitter<MJLeftNavItem>();\n\n  /**\n   * Emitted when a tree item's chevron is clicked. Consumer should toggle\n   * the item's id in / out of `ExpandedIds`. Does NOT also fire `ItemClicked`.\n   */\n  @Output() ItemToggled = new EventEmitter<MJLeftNavItem>();\n\n  /**\n   * Whether the mobile off-canvas drawer is open. Component-owned, transient UI\n   * state — no effect above the 700px breakpoint where the rail is always inline.\n   */\n  public MobileNavOpen = false;\n\n  /** Reflects {@link MobileNavOpen} onto the host so CSS can drive the drawer. */\n  @HostBinding('class.mj-left-nav-host--open')\n  get isMobileNavOpen(): boolean {\n    return this.MobileNavOpen;\n  }\n\n  OpenMobileNav(): void {\n    this.MobileNavOpen = true;\n  }\n\n  CloseMobileNav(): void {\n    this.MobileNavOpen = false;\n  }\n\n  /** Escape closes the mobile drawer. No-op when it's already closed. */\n  @HostListener('document:keydown.escape')\n  onEscape(): void {\n    if (this.MobileNavOpen) {\n      this.MobileNavOpen = false;\n    }\n  }\n\n  OnItemClick(item: MJLeftNavItem): void {\n    if (item.disabled) return;\n    // Selecting a leaf dismisses the mobile drawer; harmless on desktop.\n    this.MobileNavOpen = false;\n    this.ItemClicked.emit(item);\n  }\n\n  OnItemToggle(event: Event, item: MJLeftNavItem): void {\n    event.stopPropagation();\n    // Expanding/collapsing a tree branch keeps the drawer open.\n    this.ItemToggled.emit(item);\n  }\n\n  /**\n   * The item matching {@link ActiveId} (searched recursively through trees),\n   * used to label the mobile section switcher with the current section's icon\n   * and label. Returns `undefined` when nothing is active.\n   */\n  get ActiveTriggerItem(): MJLeftNavItem | undefined {\n    if (!this.ActiveId) return undefined;\n    return this.findItemById(this.Sections.flatMap((s) => s.items), this.ActiveId);\n  }\n\n  private findItemById(items: MJLeftNavItem[], id: string): MJLeftNavItem | undefined {\n    for (const item of items) {\n      if (item.id === id) return item;\n      if (item.children?.length) {\n        const found = this.findItemById(item.children, id);\n        if (found) return found;\n      }\n    }\n    return undefined;\n  }\n\n  IsExpanded(id: string): boolean {\n    return this.ExpandedIds.indexOf(id) >= 0;\n  }\n\n  /**\n   * Whether any top-level item in this section actually has children to expand.\n   * The template calls this once per section; the result is threaded through\n   * the recursive itemTpl so leaf nodes only reserve a chevron-column\n   * placeholder when a sibling will actually render a chevron.\n   *\n   * Top-level check is sufficient — if a deeply-nested item has children, its\n   * parent's `children.length > 0` already qualifies the section as expandable.\n   */\n  HasExpandableItems(items: MJLeftNavItem[]): boolean {\n    for (const item of items) {\n      if (item.children && item.children.length > 0) return true;\n    }\n    return false;\n  }\n}\n"]}