@memberjunction/ng-ui-components 6.1.0-edge.5 → 6.1.0-edge.7

package/dist/lib/filter-popover/filter-popover.component.js

@@ -10,15 +10,15 @@ function MJFilterPopoverComponent_Conditional_5_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵattribute("aria-label", ctx_r1.ActiveCount + " active filters");
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("aria-label", ctx_r0.ActiveCount + " active filters");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.ActiveCount, " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.ActiveCount, " ");
 } }
 function MJFilterPopoverComponent_ng_template_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
+    const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 11);
-    i0.ɵɵlistener("click", function MJFilterPopoverComponent_ng_template_7_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ClearAll()); });
+    i0.ɵɵlistener("click", function MJFilterPopoverComponent_ng_template_7_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.ClearAll()); });
     i0.ɵɵtext(1, " Clear all ");
     i0.ɵɵelementEnd();
 } }
@@ -32,37 +32,37 @@ function MJFilterPopoverComponent_ng_template_7_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵprojection(5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.Label);
+    i0.ɵɵtextInterpolate(ctx_r0.Label);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.ActiveCount > 0 && ctx_r1.ShowClearAll ? 3 : -1);
+    i0.ɵɵconditional(ctx_r0.ActiveCount > 0 && ctx_r0.ShowClearAll ? 3 : -1);
 } }
 function MJFilterPopoverComponent_Conditional_9_Conditional_0_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
 function MJFilterPopoverComponent_Conditional_9_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
+    const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 12);
-    i0.ɵɵlistener("click", function MJFilterPopoverComponent_Conditional_9_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.Close()); });
+    i0.ɵɵlistener("click", function MJFilterPopoverComponent_Conditional_9_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.Close()); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(1, "div", 13);
     i0.ɵɵelement(2, "div", 14);
     i0.ɵɵtemplate(3, MJFilterPopoverComponent_Conditional_9_Conditional_0_ng_container_3_Template, 1, 0, "ng-container", 15);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    const panelBody_r5 = i0.ɵɵreference(8);
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    const panelBody_r4 = i0.ɵɵreference(8);
     i0.ɵɵadvance();
-    i0.ɵɵattribute("aria-label", ctx_r1.Label);
+    i0.ɵɵattribute("aria-label", ctx_r0.Label);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngTemplateOutlet", panelBody_r5);
+    i0.ɵɵproperty("ngTemplateOutlet", panelBody_r4);
 } }
 function MJFilterPopoverComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, MJFilterPopoverComponent_Conditional_9_Conditional_0_Template, 4, 2);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵconditional(ctx_r1.IsOpen ? 0 : -1);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r0.IsOpen ? 0 : -1);
 } }
 function MJFilterPopoverComponent_Conditional_10_ng_template_0_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -72,20 +72,20 @@ function MJFilterPopoverComponent_Conditional_10_ng_template_0_Template(rf, ctx)
     i0.ɵɵtemplate(1, MJFilterPopoverComponent_Conditional_10_ng_template_0_ng_container_1_Template, 1, 0, "ng-container", 15);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    const panelBody_r5 = i0.ɵɵreference(8);
-    i0.ɵɵattribute("aria-label", ctx_r1.Label);
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    const panelBody_r4 = i0.ɵɵreference(8);
+    i0.ɵɵattribute("aria-label", ctx_r0.Label);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", panelBody_r5);
+    i0.ɵɵproperty("ngTemplateOutlet", panelBody_r4);
 } }
 function MJFilterPopoverComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
+    const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵtemplate(0, MJFilterPopoverComponent_Conditional_10_ng_template_0_Template, 2, 2, "ng-template", 16);
-    i0.ɵɵlistener("backdropClick", function MJFilterPopoverComponent_Conditional_10_Template_ng_template_backdropClick_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Close()); })("detach", function MJFilterPopoverComponent_Conditional_10_Template_ng_template_detach_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Close()); });
+    i0.ɵɵlistener("backdropClick", function MJFilterPopoverComponent_Conditional_10_Template_ng_template_backdropClick_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.Close()); })("detach", function MJFilterPopoverComponent_Conditional_10_Template_ng_template_detach_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.Close()); });
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    const overlayOrigin_r7 = i0.ɵɵreference(1);
-    i0.ɵɵproperty("cdkConnectedOverlayOrigin", overlayOrigin_r7)("cdkConnectedOverlayOpen", ctx_r1.IsOpen)("cdkConnectedOverlayPositions", ctx_r1.Positions)("cdkConnectedOverlayHasBackdrop", true);
+    const ctx_r0 = i0.ɵɵnextContext();
+    const overlayOrigin_r6 = i0.ɵɵreference(1);
+    i0.ɵɵproperty("cdkConnectedOverlayOrigin", overlayOrigin_r6)("cdkConnectedOverlayOpen", ctx_r0.IsOpen)("cdkConnectedOverlayPositions", ctx_r0.Positions)("cdkConnectedOverlayHasBackdrop", true);
 } }
 /**
  * mj-filter-popover — Compact "Filters" trigger button that opens a popover
@@ -162,10 +162,9 @@ export class MJFilterPopoverComponent {
     }
     static ɵfac = function MJFilterPopoverComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJFilterPopoverComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJFilterPopoverComponent, selectors: [["mj-filter-popover"]], inputs: { Label: "Label", Icon: "Icon", ActiveCount: "ActiveCount", ShowClearAll: "ShowClearAll" }, outputs: { ClearAllRequested: "ClearAllRequested" }, ngContentSelectors: _c0, decls: 11, vars: 11, consts: [["overlayOrigin", "cdkOverlayOrigin"], ["panelBody", ""], ["type", "button", "cdkOverlayOrigin", "", 1, "mj-filter-popover-trigger", 3, "click"], [1, "mj-filter-popover-label"], [1, "mj-filter-popover-badge"], [1, "fa-solid", "fa-chevron-down", "mj-filter-popover-chevron"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "mj-filter-popover-backdrop", 3, "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop"], [1, "mj-filter-popover-header"], [1, "mj-filter-popover-title"], ["type", "button", 1, "mj-filter-popover-clear"], [1, "mj-filter-popover-content"], ["type", "button", 1, "mj-filter-popover-clear", 3, "click"], ["aria-hidden", "true", 1, "mj-filter-popover-scrim", 3, "click"], ["role", "dialog", 1, "mj-filter-popover-sheet"], ["aria-hidden", "true", 1, "mj-filter-popover-grab"], [4, "ngTemplateOutlet"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "mj-filter-popover-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop"], ["role", "dialog", 1, "mj-filter-popover-panel"]], template: function MJFilterPopoverComponent_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "button", 2, 0);
-            i0.ɵɵlistener("click", function MJFilterPopoverComponent_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.Toggle()); });
+            i0.ɵɵlistener("click", function MJFilterPopoverComponent_Template_button_click_0_listener() { return ctx.Toggle(); });
             i0.ɵɵelement(2, "i");
             i0.ɵɵelementStart(3, "span", 3);
             i0.ɵɵtext(4);
@@ -188,7 +187,7 @@ export class MJFilterPopoverComponent {
             i0.ɵɵclassProp("mj-filter-popover-chevron--open", ctx.IsOpen);
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.IsMobile ? 9 : 10);
-        } }, dependencies: [CommonModule, i1.NgTemplateOutlet, OverlayModule, i2.CdkConnectedOverlay, i2.CdkOverlayOrigin], styles: ["[_nghost-%COMP%] {\n      display: inline-flex;\n    }\n\n    \n\n\n\n    .mj-filter-popover-trigger[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      min-height: 32px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      border-radius: var(--mj-radius-md);\n      color: var(--mj-text-primary);\n      font-family: inherit;\n      font-size: 0.8125rem;\n      font-weight: var(--mj-font-semibold);\n      line-height: 1.5;\n      cursor: pointer;\n      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;\n      white-space: nowrap;\n    }\n\n    .mj-filter-popover-trigger[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-active);\n      border-color: var(--mj-border-strong);\n    }\n\n    .mj-filter-popover-trigger--active[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-border-default));\n      color: var(--mj-brand-primary);\n    }\n\n    .mj-filter-popover-trigger--active[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 14%, var(--mj-bg-surface));\n    }\n\n    .mj-filter-popover-trigger[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%]:first-child {\n      font-size: var(--mj-text-xs);\n      color: var(--mj-brand-primary);\n    }\n\n    .mj-filter-popover-badge[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-width: 20px;\n      height: 20px;\n      padding: 0 var(--mj-space-1-5);\n      border-radius: 10px;\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      font-size: 11px;\n      font-weight: 700;\n      line-height: 1;\n    }\n\n    .mj-filter-popover-chevron[_ngcontent-%COMP%] {\n      font-size: 10px;\n      transition: transform 0.2s ease;\n      color: var(--mj-text-muted);\n    }\n\n    .mj-filter-popover-chevron--open[_ngcontent-%COMP%] {\n      transform: rotate(180deg);\n    }\n\n    .mj-filter-popover-panel[_ngcontent-%COMP%] {\n      min-width: 320px;\n      max-width: 480px;\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      border-radius: var(--mj-radius-md);\n      box-shadow: var(--mj-shadow-md);\n      margin-top: var(--mj-space-1-5);\n      overflow: hidden;\n    }\n\n    .mj-filter-popover-header[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: var(--mj-space-3) var(--mj-space-4) 0;\n    }\n\n    .mj-filter-popover-title[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .mj-filter-popover-clear[_ngcontent-%COMP%] {\n      background: transparent;\n      border: none;\n      color: var(--mj-brand-primary);\n      font-size: var(--mj-text-xs);\n      font-weight: 500;\n      cursor: pointer;\n      padding: var(--mj-space-1) var(--mj-space-2);\n      border-radius: var(--mj-radius-sm);\n    }\n\n    .mj-filter-popover-clear[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-hover);\n    }\n\n    .mj-filter-popover-content[_ngcontent-%COMP%] {\n      padding: var(--mj-space-3) var(--mj-space-4) var(--mj-space-4);\n      display: flex;\n      flex-direction: column;\n      gap: var(--mj-space-2-5);\n    }\n\n    \n\n\n\n\n    .mj-filter-popover-scrim[_ngcontent-%COMP%] {\n      position: fixed;\n      inset: 0;\n      background: var(--mj-bg-overlay);\n      z-index: 9998;\n      animation: _ngcontent-%COMP%_mj-fp-fade 0.2s ease;\n    }\n    .mj-filter-popover-sheet[_ngcontent-%COMP%] {\n      position: fixed;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 9999;\n      display: flex;\n      flex-direction: column;\n      max-height: 85vh;\n      background: var(--mj-bg-surface);\n      border-top-left-radius: 16px;\n      border-top-right-radius: 16px;\n      box-shadow: var(--mj-shadow-lg);\n      animation: _ngcontent-%COMP%_mj-fp-slide-up 0.24s ease;\n    }\n    .mj-filter-popover-grab[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      width: 36px;\n      height: 4px;\n      border-radius: 2px;\n      background: var(--mj-border-strong);\n      margin: 10px auto 2px;\n    }\n    .mj-filter-popover-sheet[_ngcontent-%COMP%]   .mj-filter-popover-header[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n    }\n    .mj-filter-popover-sheet[_ngcontent-%COMP%]   .mj-filter-popover-content[_ngcontent-%COMP%] {\n      flex: 1;\n      min-height: 0;\n      overflow-y: auto;\n      -webkit-overflow-scrolling: touch;\n      padding-bottom: var(--mj-space-6);\n    }\n    @keyframes _ngcontent-%COMP%_mj-fp-fade {\n      from { opacity: 0; }\n      to { opacity: 1; }\n    }\n    @keyframes _ngcontent-%COMP%_mj-fp-slide-up {\n      from { transform: translateY(100%); }\n      to { transform: translateY(0); }\n    }\n    @media (prefers-reduced-motion: reduce) {\n      .mj-filter-popover-scrim[_ngcontent-%COMP%], \n   .mj-filter-popover-sheet[_ngcontent-%COMP%] {\n        animation: none;\n      }\n    }\n\n    \n\n\n\n    @media (max-width: 700px) {\n      .mj-filter-popover-label[_ngcontent-%COMP%], \n   .mj-filter-popover-chevron[_ngcontent-%COMP%] {\n        display: none;\n      }\n      .mj-filter-popover-trigger[_ngcontent-%COMP%] {\n        padding: 6px 10px;\n        gap: 4px;\n      }\n    }"] });
+        } }, dependencies: [CommonModule, i1.NgTemplateOutlet, OverlayModule, i2.CdkConnectedOverlay, i2.CdkOverlayOrigin], styles: ["[_nghost-%COMP%] {\n      display: inline-flex;\n    }\n\n    \n\n\n    .mj-filter-popover-trigger[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      min-height: 32px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      border-radius: var(--mj-radius-md);\n      color: var(--mj-text-primary);\n      font-family: inherit;\n      font-size: 0.8125rem;\n      font-weight: var(--mj-font-semibold);\n      line-height: 1.5;\n      cursor: pointer;\n      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;\n      white-space: nowrap;\n    }\n\n    .mj-filter-popover-trigger[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-active);\n      border-color: var(--mj-border-strong);\n    }\n\n    .mj-filter-popover-trigger--active[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-border-default));\n      color: var(--mj-brand-primary);\n    }\n\n    .mj-filter-popover-trigger--active[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 14%, var(--mj-bg-surface));\n    }\n\n    .mj-filter-popover-trigger[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%]:first-child {\n      font-size: var(--mj-text-xs);\n      color: var(--mj-brand-primary);\n    }\n\n    .mj-filter-popover-badge[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-width: 20px;\n      height: 20px;\n      padding: 0 var(--mj-space-1-5);\n      border-radius: 10px;\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      font-size: 11px;\n      font-weight: 700;\n      line-height: 1;\n    }\n\n    .mj-filter-popover-chevron[_ngcontent-%COMP%] {\n      font-size: 10px;\n      transition: transform 0.2s ease;\n      color: var(--mj-text-muted);\n    }\n\n    .mj-filter-popover-chevron--open[_ngcontent-%COMP%] {\n      transform: rotate(180deg);\n    }\n\n    .mj-filter-popover-panel[_ngcontent-%COMP%] {\n      min-width: 320px;\n      max-width: 480px;\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      border-radius: var(--mj-radius-md);\n      box-shadow: var(--mj-shadow-md);\n      margin-top: var(--mj-space-1-5);\n      overflow: hidden;\n    }\n\n    .mj-filter-popover-header[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: var(--mj-space-3) var(--mj-space-4) 0;\n    }\n\n    .mj-filter-popover-title[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .mj-filter-popover-clear[_ngcontent-%COMP%] {\n      background: transparent;\n      border: none;\n      color: var(--mj-brand-primary);\n      font-size: var(--mj-text-xs);\n      font-weight: 500;\n      cursor: pointer;\n      padding: var(--mj-space-1) var(--mj-space-2);\n      border-radius: var(--mj-radius-sm);\n    }\n\n    .mj-filter-popover-clear[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-hover);\n    }\n\n    .mj-filter-popover-content[_ngcontent-%COMP%] {\n      padding: var(--mj-space-3) var(--mj-space-4) var(--mj-space-4);\n      display: flex;\n      flex-direction: column;\n      gap: var(--mj-space-2-5);\n    }\n\n    \n\n\n\n    .mj-filter-popover-scrim[_ngcontent-%COMP%] {\n      position: fixed;\n      inset: 0;\n      background: var(--mj-bg-overlay);\n      z-index: 9998;\n      animation: _ngcontent-%COMP%_mj-fp-fade 0.2s ease;\n    }\n    .mj-filter-popover-sheet[_ngcontent-%COMP%] {\n      position: fixed;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 9999;\n      display: flex;\n      flex-direction: column;\n      max-height: 85vh;\n      background: var(--mj-bg-surface);\n      border-top-left-radius: 16px;\n      border-top-right-radius: 16px;\n      box-shadow: var(--mj-shadow-lg);\n      animation: _ngcontent-%COMP%_mj-fp-slide-up 0.24s ease;\n    }\n    .mj-filter-popover-grab[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      width: 36px;\n      height: 4px;\n      border-radius: 2px;\n      background: var(--mj-border-strong);\n      margin: 10px auto 2px;\n    }\n    .mj-filter-popover-sheet[_ngcontent-%COMP%]   .mj-filter-popover-header[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n    }\n    .mj-filter-popover-sheet[_ngcontent-%COMP%]   .mj-filter-popover-content[_ngcontent-%COMP%] {\n      flex: 1;\n      min-height: 0;\n      overflow-y: auto;\n      -webkit-overflow-scrolling: touch;\n      padding-bottom: var(--mj-space-6);\n    }\n    @keyframes _ngcontent-%COMP%_mj-fp-fade {\n      from { opacity: 0; }\n      to { opacity: 1; }\n    }\n    @keyframes _ngcontent-%COMP%_mj-fp-slide-up {\n      from { transform: translateY(100%); }\n      to { transform: translateY(0); }\n    }\n    @media (prefers-reduced-motion: reduce) {\n      .mj-filter-popover-scrim[_ngcontent-%COMP%], \n   .mj-filter-popover-sheet[_ngcontent-%COMP%] {\n        animation: none;\n      }\n    }\n\n    \n\n\n    @media (max-width: 700px) {\n      .mj-filter-popover-label[_ngcontent-%COMP%], \n   .mj-filter-popover-chevron[_ngcontent-%COMP%] {\n        display: none;\n      }\n      .mj-filter-popover-trigger[_ngcontent-%COMP%] {\n        padding: 6px 10px;\n        gap: 4px;\n      }\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJFilterPopoverComponent, [{
         type: Component,

package/dist/lib/filter-popover/filter-popover.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-popover.component.js","sourceRoot":"","sources":["../../../src/lib/filter-popover/filter-popover.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { ChangeDetectorRef, Component, EventEmitter, Input, NgZone, OnDestroy, Output, inject } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { OverlayModule, ConnectedPosition } from '@angular/cdk/overlay';\n\n/**\n * mj-filter-popover — Compact \"Filters\" trigger button that opens a popover\n * containing arbitrary filter UI. Use this in a dashboard's page-header to\n * keep the header chrome consistent regardless of filter density.\n *\n * Pass the popover content via `<ng-content>`. Drive the active-count badge\n * via the `ActiveCount` input.\n *\n * Example:\n * ```html\n * <mj-filter-popover [ActiveCount]=\"activeFilters.length\">\n *   <div class=\"my-filter-grid\">\n *     <mj-dropdown ...></mj-dropdown>\n *     <mj-dropdown ...></mj-dropdown>\n *   </div>\n * </mj-filter-popover>\n * ```\n */\n@Component({\n  selector: 'mj-filter-popover',\n  standalone: true,\n  imports: [CommonModule, OverlayModule],\n  template: `\n    <button\n      type=\"button\"\n      class=\"mj-filter-popover-trigger\"\n      [class.mj-filter-popover-trigger--active]=\"IsOpen || ActiveCount > 0\"\n      cdkOverlayOrigin\n      #overlayOrigin=\"cdkOverlayOrigin\"\n      [attr.aria-expanded]=\"IsOpen\"\n      [attr.aria-haspopup]=\"true\"\n      (click)=\"Toggle()\">\n      <i [class]=\"Icon\"></i>\n      <span class=\"mj-filter-popover-label\">{{ Label }}</span>\n      @if (ActiveCount > 0) {\n        <span class=\"mj-filter-popover-badge\" [attr.aria-label]=\"ActiveCount + ' active filters'\">\n          {{ ActiveCount }}\n        </span>\n      }\n      <i class=\"fa-solid fa-chevron-down mj-filter-popover-chevron\" [class.mj-filter-popover-chevron--open]=\"IsOpen\"></i>\n    </button>\n\n    <!-- The panel body (header + projected filter UI) is declared ONCE here and\n         stamped into whichever wrapper is active (anchored overlay on desktop,\n         docked sheet on mobile). A single <ng-content> avoids the duplicate-slot\n         bug where projected content lands in only one of two branches. -->\n    <ng-template #panelBody>\n      <div class=\"mj-filter-popover-header\">\n        <span class=\"mj-filter-popover-title\">{{ Label }}</span>\n        @if (ActiveCount > 0 && ShowClearAll) {\n          <button type=\"button\" class=\"mj-filter-popover-clear\" (click)=\"ClearAll()\">\n            Clear all\n          </button>\n        }\n      </div>\n      <div class=\"mj-filter-popover-content\">\n        <ng-content></ng-content>\n      </div>\n    </ng-template>\n\n    @if (IsMobile) {\n      <!-- Mobile: the popover docks as a bottom sheet — mirrors how mj-left-nav\n           becomes a drawer at this width. -->\n      @if (IsOpen) {\n        <div class=\"mj-filter-popover-scrim\" (click)=\"Close()\" aria-hidden=\"true\"></div>\n        <div class=\"mj-filter-popover-sheet\" role=\"dialog\" [attr.aria-label]=\"Label\">\n          <div class=\"mj-filter-popover-grab\" aria-hidden=\"true\"></div>\n          <ng-container *ngTemplateOutlet=\"panelBody\"></ng-container>\n        </div>\n      }\n    } @else {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n        [cdkConnectedOverlayOpen]=\"IsOpen\"\n        [cdkConnectedOverlayPositions]=\"Positions\"\n        [cdkConnectedOverlayHasBackdrop]=\"true\"\n        cdkConnectedOverlayBackdropClass=\"mj-filter-popover-backdrop\"\n        (backdropClick)=\"Close()\"\n        (detach)=\"Close()\">\n        <div class=\"mj-filter-popover-panel\" role=\"dialog\" [attr.aria-label]=\"Label\">\n          <ng-container *ngTemplateOutlet=\"panelBody\"></ng-container>\n        </div>\n      </ng-template>\n    }\n  `,\n  styles: [`\n    :host {\n      display: inline-flex;\n    }\n\n    /* Trigger button — visually aligned with mjButton size=\"sm\" variant=\"secondary\"\n       (same height, padding, font-size, font-weight, background) so it sits\n       cleanly next to Refresh/Export/+Add in chrome and filter-card rows. */\n    .mj-filter-popover-trigger {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      min-height: 32px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      border-radius: var(--mj-radius-md);\n      color: var(--mj-text-primary);\n      font-family: inherit;\n      font-size: 0.8125rem;\n      font-weight: var(--mj-font-semibold);\n      line-height: 1.5;\n      cursor: pointer;\n      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;\n      white-space: nowrap;\n    }\n\n    .mj-filter-popover-trigger:hover {\n      background: var(--mj-bg-surface-active);\n      border-color: var(--mj-border-strong);\n    }\n\n    .mj-filter-popover-trigger--active {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-border-default));\n      color: var(--mj-brand-primary);\n    }\n\n    .mj-filter-popover-trigger--active:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 14%, var(--mj-bg-surface));\n    }\n\n    .mj-filter-popover-trigger > i:first-child {\n      font-size: var(--mj-text-xs);\n      color: var(--mj-brand-primary);\n    }\n\n    .mj-filter-popover-badge {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-width: 20px;\n      height: 20px;\n      padding: 0 var(--mj-space-1-5);\n      border-radius: 10px;\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      font-size: 11px;\n      font-weight: 700;\n      line-height: 1;\n    }\n\n    .mj-filter-popover-chevron {\n      font-size: 10px;\n      transition: transform 0.2s ease;\n      color: var(--mj-text-muted);\n    }\n\n    .mj-filter-popover-chevron--open {\n      transform: rotate(180deg);\n    }\n\n    .mj-filter-popover-panel {\n      min-width: 320px;\n      max-width: 480px;\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      border-radius: var(--mj-radius-md);\n      box-shadow: var(--mj-shadow-md);\n      margin-top: var(--mj-space-1-5);\n      overflow: hidden;\n    }\n\n    .mj-filter-popover-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: var(--mj-space-3) var(--mj-space-4) 0;\n    }\n\n    .mj-filter-popover-title {\n      font-size: 13px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .mj-filter-popover-clear {\n      background: transparent;\n      border: none;\n      color: var(--mj-brand-primary);\n      font-size: var(--mj-text-xs);\n      font-weight: 500;\n      cursor: pointer;\n      padding: var(--mj-space-1) var(--mj-space-2);\n      border-radius: var(--mj-radius-sm);\n    }\n\n    .mj-filter-popover-clear:hover {\n      background: var(--mj-bg-surface-hover);\n    }\n\n    .mj-filter-popover-content {\n      padding: var(--mj-space-3) var(--mj-space-4) var(--mj-space-4);\n      display: flex;\n      flex-direction: column;\n      gap: var(--mj-space-2-5);\n    }\n\n    /* ── Mobile bottom sheet (≤700px) ─────────────────────────────────────\n       The trigger button stays inline; tapping it docks the panel body as a\n       sheet at the bottom of the viewport over a scrim — same body, different\n       wrapper. Mirrors the mj-left-nav drawer treatment. */\n    .mj-filter-popover-scrim {\n      position: fixed;\n      inset: 0;\n      background: var(--mj-bg-overlay);\n      z-index: 9998;\n      animation: mj-fp-fade 0.2s ease;\n    }\n    .mj-filter-popover-sheet {\n      position: fixed;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 9999;\n      display: flex;\n      flex-direction: column;\n      max-height: 85vh;\n      background: var(--mj-bg-surface);\n      border-top-left-radius: 16px;\n      border-top-right-radius: 16px;\n      box-shadow: var(--mj-shadow-lg);\n      animation: mj-fp-slide-up 0.24s ease;\n    }\n    .mj-filter-popover-grab {\n      flex-shrink: 0;\n      width: 36px;\n      height: 4px;\n      border-radius: 2px;\n      background: var(--mj-border-strong);\n      margin: 10px auto 2px;\n    }\n    .mj-filter-popover-sheet .mj-filter-popover-header {\n      flex-shrink: 0;\n    }\n    .mj-filter-popover-sheet .mj-filter-popover-content {\n      flex: 1;\n      min-height: 0;\n      overflow-y: auto;\n      -webkit-overflow-scrolling: touch;\n      padding-bottom: var(--mj-space-6);\n    }\n    @keyframes mj-fp-fade {\n      from { opacity: 0; }\n      to { opacity: 1; }\n    }\n    @keyframes mj-fp-slide-up {\n      from { transform: translateY(100%); }\n      to { transform: translateY(0); }\n    }\n    @media (prefers-reduced-motion: reduce) {\n      .mj-filter-popover-scrim,\n      .mj-filter-popover-sheet {\n        animation: none;\n      }\n    }\n\n    /* On mobile the trigger collapses to icon-only (the count badge still\n       conveys active state) so the control bar — search · Filter · view —\n       stays on one line. */\n    @media (max-width: 700px) {\n      .mj-filter-popover-label,\n      .mj-filter-popover-chevron {\n        display: none;\n      }\n      .mj-filter-popover-trigger {\n        padding: 6px 10px;\n        gap: 4px;\n      }\n    }\n  `]\n})\nexport class MJFilterPopoverComponent implements OnDestroy {\n  @Input() Label: string = 'Filters';\n  @Input() Icon: string = 'fa-solid fa-filter';\n  @Input() ActiveCount: number = 0;\n  @Input() ShowClearAll: boolean = false;\n\n  public IsOpen: boolean = false;\n\n  /**\n   * True when the viewport is narrow enough that the popover should dock as a\n   * bottom sheet instead of an anchored overlay. Driven by matchMedia so it\n   * tracks live resize without Angular change-detection plumbing.\n   */\n  public IsMobile: 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 the flip must be\n  // re-entered into the zone — otherwise the IsMobile change lands mid-CD and\n  // the @if(IsMobile) branch swap throws ExpressionChangedAfterItHasBeenChecked\n  // when crossing the breakpoint. Also close across the switch so a sheet/overlay\n  // opened in one mode doesn't linger in the other.\n  private readonly onMediaChange = (e: MediaQueryListEvent): void => {\n    this.zone.run(() => {\n      this.IsMobile = e.matches;\n      this.IsOpen = false;\n      this.cdr.markForCheck();\n    });\n  };\n\n  constructor() {\n    if (this.mediaQuery) {\n      this.IsMobile = 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  // Note: NO offsetY here — CDK applies offsetY as `transform: translateY(...)` on the\n  // overlay pane, which creates a containing block for `position: fixed` descendants.\n  // Tree dropdowns (and any other component using position: fixed) would then mis-position.\n  // The 6px spacing below the trigger is applied via margin-top on .mj-filter-popover-panel.\n  public readonly Positions: ConnectedPosition[] = [\n    { originX: 'end',   originY: 'bottom', overlayX: 'end',   overlayY: 'top' },\n    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n    { originX: 'end',   originY: 'top',    overlayX: 'end',   overlayY: 'bottom' }\n  ];\n\n  public Toggle(): void { this.IsOpen = !this.IsOpen; }\n  public Open(): void { this.IsOpen = true; }\n  public Close(): void { this.IsOpen = false; }\n\n  /** Emitted when the user clicks the \"Clear all\" link inside the popover header. */\n  @Output() public ClearAllRequested = new EventEmitter<void>();\n\n  public ClearAll(): void {\n    this.ClearAllRequested.emit();\n  }\n}\n"]}
+{"version":3,"file":"filter-popover.component.js","sourceRoot":"","sources":["../../../src/lib/filter-popover/filter-popover.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { ChangeDetectorRef, Component, EventEmitter, Input, NgZone, OnDestroy, Output, inject } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { OverlayModule, ConnectedPosition } from '@angular/cdk/overlay';\n\n/**\n * mj-filter-popover — Compact \"Filters\" trigger button that opens a popover\n * containing arbitrary filter UI. Use this in a dashboard's page-header to\n * keep the header chrome consistent regardless of filter density.\n *\n * Pass the popover content via `<ng-content>`. Drive the active-count badge\n * via the `ActiveCount` input.\n *\n * Example:\n * ```html\n * <mj-filter-popover [ActiveCount]=\"activeFilters.length\">\n *   <div class=\"my-filter-grid\">\n *     <mj-dropdown ...></mj-dropdown>\n *     <mj-dropdown ...></mj-dropdown>\n *   </div>\n * </mj-filter-popover>\n * ```\n */\n@Component({\n  selector: 'mj-filter-popover',\n  standalone: true,\n  imports: [CommonModule, OverlayModule],\n  template: `\n    <button\n      type=\"button\"\n      class=\"mj-filter-popover-trigger\"\n      [class.mj-filter-popover-trigger--active]=\"IsOpen || ActiveCount > 0\"\n      cdkOverlayOrigin\n      #overlayOrigin=\"cdkOverlayOrigin\"\n      [attr.aria-expanded]=\"IsOpen\"\n      [attr.aria-haspopup]=\"true\"\n      (click)=\"Toggle()\">\n      <i [class]=\"Icon\"></i>\n      <span class=\"mj-filter-popover-label\">{{ Label }}</span>\n      @if (ActiveCount > 0) {\n        <span class=\"mj-filter-popover-badge\" [attr.aria-label]=\"ActiveCount + ' active filters'\">\n          {{ ActiveCount }}\n        </span>\n      }\n      <i class=\"fa-solid fa-chevron-down mj-filter-popover-chevron\" [class.mj-filter-popover-chevron--open]=\"IsOpen\"></i>\n    </button>\n\n    <!-- The panel body (header + projected filter UI) is declared ONCE here and\n         stamped into whichever wrapper is active (anchored overlay on desktop,\n         docked sheet on mobile). A single <ng-content> avoids the duplicate-slot\n         bug where projected content lands in only one of two branches. -->\n    <ng-template #panelBody>\n      <div class=\"mj-filter-popover-header\">\n        <span class=\"mj-filter-popover-title\">{{ Label }}</span>\n        @if (ActiveCount > 0 && ShowClearAll) {\n          <button type=\"button\" class=\"mj-filter-popover-clear\" (click)=\"ClearAll()\">\n            Clear all\n          </button>\n        }\n      </div>\n      <div class=\"mj-filter-popover-content\">\n        <ng-content></ng-content>\n      </div>\n    </ng-template>\n\n    @if (IsMobile) {\n      <!-- Mobile: the popover docks as a bottom sheet — mirrors how mj-left-nav\n           becomes a drawer at this width. -->\n      @if (IsOpen) {\n        <div class=\"mj-filter-popover-scrim\" (click)=\"Close()\" aria-hidden=\"true\"></div>\n        <div class=\"mj-filter-popover-sheet\" role=\"dialog\" [attr.aria-label]=\"Label\">\n          <div class=\"mj-filter-popover-grab\" aria-hidden=\"true\"></div>\n          <ng-container *ngTemplateOutlet=\"panelBody\"></ng-container>\n        </div>\n      }\n    } @else {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n        [cdkConnectedOverlayOpen]=\"IsOpen\"\n        [cdkConnectedOverlayPositions]=\"Positions\"\n        [cdkConnectedOverlayHasBackdrop]=\"true\"\n        cdkConnectedOverlayBackdropClass=\"mj-filter-popover-backdrop\"\n        (backdropClick)=\"Close()\"\n        (detach)=\"Close()\">\n        <div class=\"mj-filter-popover-panel\" role=\"dialog\" [attr.aria-label]=\"Label\">\n          <ng-container *ngTemplateOutlet=\"panelBody\"></ng-container>\n        </div>\n      </ng-template>\n    }\n  `,\n  styles: [`\n    :host {\n      display: inline-flex;\n    }\n\n    /* Trigger button — visually aligned with mjButton size=\"sm\" variant=\"secondary\"\n       (same height, padding, font-size, font-weight, background) so it sits\n       cleanly next to Refresh/Export/+Add in chrome and filter-card rows. */\n    .mj-filter-popover-trigger {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      min-height: 32px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      border-radius: var(--mj-radius-md);\n      color: var(--mj-text-primary);\n      font-family: inherit;\n      font-size: 0.8125rem;\n      font-weight: var(--mj-font-semibold);\n      line-height: 1.5;\n      cursor: pointer;\n      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;\n      white-space: nowrap;\n    }\n\n    .mj-filter-popover-trigger:hover {\n      background: var(--mj-bg-surface-active);\n      border-color: var(--mj-border-strong);\n    }\n\n    .mj-filter-popover-trigger--active {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-border-default));\n      color: var(--mj-brand-primary);\n    }\n\n    .mj-filter-popover-trigger--active:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 14%, var(--mj-bg-surface));\n    }\n\n    .mj-filter-popover-trigger > i:first-child {\n      font-size: var(--mj-text-xs);\n      color: var(--mj-brand-primary);\n    }\n\n    .mj-filter-popover-badge {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-width: 20px;\n      height: 20px;\n      padding: 0 var(--mj-space-1-5);\n      border-radius: 10px;\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      font-size: 11px;\n      font-weight: 700;\n      line-height: 1;\n    }\n\n    .mj-filter-popover-chevron {\n      font-size: 10px;\n      transition: transform 0.2s ease;\n      color: var(--mj-text-muted);\n    }\n\n    .mj-filter-popover-chevron--open {\n      transform: rotate(180deg);\n    }\n\n    .mj-filter-popover-panel {\n      min-width: 320px;\n      max-width: 480px;\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      border-radius: var(--mj-radius-md);\n      box-shadow: var(--mj-shadow-md);\n      margin-top: var(--mj-space-1-5);\n      overflow: hidden;\n    }\n\n    .mj-filter-popover-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: var(--mj-space-3) var(--mj-space-4) 0;\n    }\n\n    .mj-filter-popover-title {\n      font-size: 13px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .mj-filter-popover-clear {\n      background: transparent;\n      border: none;\n      color: var(--mj-brand-primary);\n      font-size: var(--mj-text-xs);\n      font-weight: 500;\n      cursor: pointer;\n      padding: var(--mj-space-1) var(--mj-space-2);\n      border-radius: var(--mj-radius-sm);\n    }\n\n    .mj-filter-popover-clear:hover {\n      background: var(--mj-bg-surface-hover);\n    }\n\n    .mj-filter-popover-content {\n      padding: var(--mj-space-3) var(--mj-space-4) var(--mj-space-4);\n      display: flex;\n      flex-direction: column;\n      gap: var(--mj-space-2-5);\n    }\n\n    /* ── Mobile bottom sheet (≤700px) ─────────────────────────────────────\n       The trigger button stays inline; tapping it docks the panel body as a\n       sheet at the bottom of the viewport over a scrim — same body, different\n       wrapper. Mirrors the mj-left-nav drawer treatment. */\n    .mj-filter-popover-scrim {\n      position: fixed;\n      inset: 0;\n      background: var(--mj-bg-overlay);\n      z-index: 9998;\n      animation: mj-fp-fade 0.2s ease;\n    }\n    .mj-filter-popover-sheet {\n      position: fixed;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 9999;\n      display: flex;\n      flex-direction: column;\n      max-height: 85vh;\n      background: var(--mj-bg-surface);\n      border-top-left-radius: 16px;\n      border-top-right-radius: 16px;\n      box-shadow: var(--mj-shadow-lg);\n      animation: mj-fp-slide-up 0.24s ease;\n    }\n    .mj-filter-popover-grab {\n      flex-shrink: 0;\n      width: 36px;\n      height: 4px;\n      border-radius: 2px;\n      background: var(--mj-border-strong);\n      margin: 10px auto 2px;\n    }\n    .mj-filter-popover-sheet .mj-filter-popover-header {\n      flex-shrink: 0;\n    }\n    .mj-filter-popover-sheet .mj-filter-popover-content {\n      flex: 1;\n      min-height: 0;\n      overflow-y: auto;\n      -webkit-overflow-scrolling: touch;\n      padding-bottom: var(--mj-space-6);\n    }\n    @keyframes mj-fp-fade {\n      from { opacity: 0; }\n      to { opacity: 1; }\n    }\n    @keyframes mj-fp-slide-up {\n      from { transform: translateY(100%); }\n      to { transform: translateY(0); }\n    }\n    @media (prefers-reduced-motion: reduce) {\n      .mj-filter-popover-scrim,\n      .mj-filter-popover-sheet {\n        animation: none;\n      }\n    }\n\n    /* On mobile the trigger collapses to icon-only (the count badge still\n       conveys active state) so the control bar — search · Filter · view —\n       stays on one line. */\n    @media (max-width: 700px) {\n      .mj-filter-popover-label,\n      .mj-filter-popover-chevron {\n        display: none;\n      }\n      .mj-filter-popover-trigger {\n        padding: 6px 10px;\n        gap: 4px;\n      }\n    }\n  `]\n})\nexport class MJFilterPopoverComponent implements OnDestroy {\n  @Input() Label: string = 'Filters';\n  @Input() Icon: string = 'fa-solid fa-filter';\n  @Input() ActiveCount: number = 0;\n  @Input() ShowClearAll: boolean = false;\n\n  public IsOpen: boolean = false;\n\n  /**\n   * True when the viewport is narrow enough that the popover should dock as a\n   * bottom sheet instead of an anchored overlay. Driven by matchMedia so it\n   * tracks live resize without Angular change-detection plumbing.\n   */\n  public IsMobile: 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 the flip must be\n  // re-entered into the zone — otherwise the IsMobile change lands mid-CD and\n  // the @if(IsMobile) branch swap throws ExpressionChangedAfterItHasBeenChecked\n  // when crossing the breakpoint. Also close across the switch so a sheet/overlay\n  // opened in one mode doesn't linger in the other.\n  private readonly onMediaChange = (e: MediaQueryListEvent): void => {\n    this.zone.run(() => {\n      this.IsMobile = e.matches;\n      this.IsOpen = false;\n      this.cdr.markForCheck();\n    });\n  };\n\n  constructor() {\n    if (this.mediaQuery) {\n      this.IsMobile = 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  // Note: NO offsetY here — CDK applies offsetY as `transform: translateY(...)` on the\n  // overlay pane, which creates a containing block for `position: fixed` descendants.\n  // Tree dropdowns (and any other component using position: fixed) would then mis-position.\n  // The 6px spacing below the trigger is applied via margin-top on .mj-filter-popover-panel.\n  public readonly Positions: ConnectedPosition[] = [\n    { originX: 'end',   originY: 'bottom', overlayX: 'end',   overlayY: 'top' },\n    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n    { originX: 'end',   originY: 'top',    overlayX: 'end',   overlayY: 'bottom' }\n  ];\n\n  public Toggle(): void { this.IsOpen = !this.IsOpen; }\n  public Open(): void { this.IsOpen = true; }\n  public Close(): void { this.IsOpen = false; }\n\n  /** Emitted when the user clicks the \"Clear all\" link inside the popover header. */\n  @Output() public ClearAllRequested = new EventEmitter<void>();\n\n  public ClearAll(): void {\n    this.ClearAllRequested.emit();\n  }\n}\n"]}

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

@@ -86,7 +86,7 @@ export class MJLeftNavContentComponent {
             i0.ɵɵprojection(2);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.Error ? 0 : ctx.Loading ? 1 : -1);
-        } }, dependencies: [CommonModule], styles: ["[_nghost-%COMP%] {\n      flex: 1;\n      min-width: 0;\n      \n\n\n\n\n\n      min-height: 0;\n      display: flex;\n      flex-direction: column;\n      background: var(--mj-bg-page);\n      overflow: hidden;\n    }\n\n    \n\n\n\n\n\n\n\n\n\n\n\n    [_nghost-%COMP%]     > *:not(.mj-left-nav-content__error):not(.mj-left-nav-content__loading):not(mj-page-header-interior):not(mj-page-body-interior) {\n      flex: 1 1 auto;\n      min-height: 0;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    \n\n\n    .mj-left-nav-content--busy[_nghost-%COMP%]     > *:not(.mj-left-nav-content__error):not(.mj-left-nav-content__loading) {\n      display: none;\n    }\n\n    .mj-left-nav-content__error[_ngcontent-%COMP%], \n   .mj-left-nav-content__loading[_ngcontent-%COMP%] {\n      flex: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 10px;\n      color: var(--mj-text-muted);\n      font-size: 13px;\n      padding: 32px;\n      text-align: center;\n    }\n\n    .mj-left-nav-content__error[_ngcontent-%COMP%] {\n      color: var(--mj-status-error);\n    }\n\n    .mj-left-nav-content__error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 20px;\n    }\n\n    .mj-left-nav-content__loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 16px;\n      color: var(--mj-brand-primary);\n    }"] });
+        } }, dependencies: [CommonModule], styles: ["[_nghost-%COMP%] {\n      flex: 1;\n      min-width: 0;\n      \n\n\n\n\n      min-height: 0;\n      display: flex;\n      flex-direction: column;\n      background: var(--mj-bg-page);\n      overflow: hidden;\n    }\n\n    \n\n\n\n\n\n\n\n\n\n\n    [_nghost-%COMP%]     > *:not(.mj-left-nav-content__error):not(.mj-left-nav-content__loading):not(mj-page-header-interior):not(mj-page-body-interior) {\n      flex: 1 1 auto;\n      min-height: 0;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    \n\n    .mj-left-nav-content--busy[_nghost-%COMP%]     > *:not(.mj-left-nav-content__error):not(.mj-left-nav-content__loading) {\n      display: none;\n    }\n\n    .mj-left-nav-content__error[_ngcontent-%COMP%], \n   .mj-left-nav-content__loading[_ngcontent-%COMP%] {\n      flex: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 10px;\n      color: var(--mj-text-muted);\n      font-size: 13px;\n      padding: 32px;\n      text-align: center;\n    }\n\n    .mj-left-nav-content__error[_ngcontent-%COMP%] {\n      color: var(--mj-status-error);\n    }\n\n    .mj-left-nav-content__error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 20px;\n    }\n\n    .mj-left-nav-content__loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 16px;\n      color: var(--mj-brand-primary);\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJLeftNavContentComponent, [{
         type: Component,

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,