@memberjunction/ng-ui-components 5.34.1 → 5.36.0

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

@@ -0,0 +1,170 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { OverlayModule } from '@angular/cdk/overlay';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/overlay";
+const _c0 = ["*"];
+function MJFilterPopoverComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 2);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("aria-label", ctx_r1.ActiveCount + " active filters");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.ActiveCount, " ");
+} }
+function MJFilterPopoverComponent_ng_template_7_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 10);
+    i0.ɵɵlistener("click", function MJFilterPopoverComponent_ng_template_7_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ClearAll()); });
+    i0.ɵɵtext(1, " Clear all ");
+    i0.ɵɵelementEnd();
+} }
+function MJFilterPopoverComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5)(1, "div", 6)(2, "span", 7);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, MJFilterPopoverComponent_ng_template_7_Conditional_4_Template, 2, 0, "button", 8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 9);
+    i0.ɵɵprojection(6);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("aria-label", ctx_r1.Label);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.Label);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ActiveCount > 0 && ctx_r1.ShowClearAll ? 4 : -1);
+} }
+/**
+ * mj-filter-popover — Compact "Filters" trigger button that opens a popover
+ * containing arbitrary filter UI. Use this in a dashboard's page-header to
+ * keep the header chrome consistent regardless of filter density.
+ *
+ * Pass the popover content via `<ng-content>`. Drive the active-count badge
+ * via the `ActiveCount` input.
+ *
+ * Example:
+ * ```html
+ * <mj-filter-popover [ActiveCount]="activeFilters.length">
+ *   <div class="my-filter-grid">
+ *     <mj-dropdown ...></mj-dropdown>
+ *     <mj-dropdown ...></mj-dropdown>
+ *   </div>
+ * </mj-filter-popover>
+ * ```
+ */
+export class MJFilterPopoverComponent {
+    Label = 'Filters';
+    Icon = 'fa-solid fa-filter';
+    ActiveCount = 0;
+    ShowClearAll = false;
+    IsOpen = false;
+    // Note: NO offsetY here — CDK applies offsetY as `transform: translateY(...)` on the
+    // overlay pane, which creates a containing block for `position: fixed` descendants.
+    // Tree dropdowns (and any other component using position: fixed) would then mis-position.
+    // The 6px spacing below the trigger is applied via margin-top on .mj-filter-popover-panel.
+    Positions = [
+        { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },
+        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+        { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }
+    ];
+    Toggle() { this.IsOpen = !this.IsOpen; }
+    Open() { this.IsOpen = true; }
+    Close() { this.IsOpen = false; }
+    /** Emitted when the user clicks the "Clear all" link inside the popover header. */
+    ClearAllRequested = new EventEmitter();
+    ClearAll() {
+        this.ClearAllRequested.emit();
+    }
+    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: 8, vars: 14, consts: [["overlayOrigin", "cdkOverlayOrigin"], ["type", "button", "cdkOverlayOrigin", "", 1, "mj-filter-popover-trigger", 3, "click"], [1, "mj-filter-popover-badge"], [1, "fa-solid", "fa-chevron-down", "mj-filter-popover-chevron"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "mj-filter-popover-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop"], ["role", "dialog", 1, "mj-filter-popover-panel"], [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"]], template: function MJFilterPopoverComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵprojectionDef();
+            i0.ɵɵelementStart(0, "button", 1, 0);
+            i0.ɵɵlistener("click", function MJFilterPopoverComponent_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.Toggle()); });
+            i0.ɵɵelement(2, "i");
+            i0.ɵɵelementStart(3, "span");
+            i0.ɵɵtext(4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(5, MJFilterPopoverComponent_Conditional_5_Template, 2, 2, "span", 2);
+            i0.ɵɵelement(6, "i", 3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(7, MJFilterPopoverComponent_ng_template_7_Template, 7, 3, "ng-template", 4);
+            i0.ɵɵlistener("backdropClick", function MJFilterPopoverComponent_Template_ng_template_backdropClick_7_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.Close()); })("detach", function MJFilterPopoverComponent_Template_ng_template_detach_7_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.Close()); });
+        } if (rf & 2) {
+            const overlayOrigin_r4 = i0.ɵɵreference(1);
+            i0.ɵɵclassProp("mj-filter-popover-trigger--active", ctx.IsOpen || ctx.ActiveCount > 0);
+            i0.ɵɵattribute("aria-expanded", ctx.IsOpen)("aria-haspopup", true);
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassMap(ctx.Icon);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.Label);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ActiveCount > 0 ? 5 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("mj-filter-popover-chevron--open", ctx.IsOpen);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("cdkConnectedOverlayOrigin", overlayOrigin_r4)("cdkConnectedOverlayOpen", ctx.IsOpen)("cdkConnectedOverlayPositions", ctx.Positions)("cdkConnectedOverlayHasBackdrop", true);
+        } }, dependencies: [OverlayModule, i1.CdkConnectedOverlay, i1.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    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJFilterPopoverComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-filter-popover', standalone: true, imports: [OverlayModule], template: `
+    <button
+      type="button"
+      class="mj-filter-popover-trigger"
+      [class.mj-filter-popover-trigger--active]="IsOpen || ActiveCount > 0"
+      cdkOverlayOrigin
+      #overlayOrigin="cdkOverlayOrigin"
+      [attr.aria-expanded]="IsOpen"
+      [attr.aria-haspopup]="true"
+      (click)="Toggle()">
+      <i [class]="Icon"></i>
+      <span>{{ Label }}</span>
+      @if (ActiveCount > 0) {
+        <span class="mj-filter-popover-badge" [attr.aria-label]="ActiveCount + ' active filters'">
+          {{ ActiveCount }}
+        </span>
+      }
+      <i class="fa-solid fa-chevron-down mj-filter-popover-chevron" [class.mj-filter-popover-chevron--open]="IsOpen"></i>
+    </button>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="overlayOrigin"
+      [cdkConnectedOverlayOpen]="IsOpen"
+      [cdkConnectedOverlayPositions]="Positions"
+      [cdkConnectedOverlayHasBackdrop]="true"
+      cdkConnectedOverlayBackdropClass="mj-filter-popover-backdrop"
+      (backdropClick)="Close()"
+      (detach)="Close()">
+      <div class="mj-filter-popover-panel" role="dialog" [attr.aria-label]="Label">
+        <div class="mj-filter-popover-header">
+          <span class="mj-filter-popover-title">{{ Label }}</span>
+          @if (ActiveCount > 0 && ShowClearAll) {
+            <button type="button" class="mj-filter-popover-clear" (click)="ClearAll()">
+              Clear all
+            </button>
+          }
+        </div>
+        <div class="mj-filter-popover-content">
+          <ng-content></ng-content>
+        </div>
+      </div>
+    </ng-template>
+  `, styles: ["\n    :host {\n      display: inline-flex;\n    }\n\n    /* Trigger button \u2014 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  "] }]
+    }], null, { Label: [{
+            type: Input
+        }], Icon: [{
+            type: Input
+        }], ActiveCount: [{
+            type: Input
+        }], ShowClearAll: [{
+            type: Input
+        }], ClearAllRequested: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJFilterPopoverComponent, { className: "MJFilterPopoverComponent", filePath: "lib/filter-popover/filter-popover.component.ts", lineNumber: 189 }); })();
+//# sourceMappingURL=filter-popover.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filter-popover.component.js","sourceRoot":"","sources":["../../../src/lib/filter-popover/filter-popover.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,aAAa,EAAqB,MAAM,sBAAsB,CAAC;;;;;IAqChE,+BAA0F;IACxF,YACF;IAAA,iBAAO;;;;IADL,cACF;IADE,mDACF;;;;IAkBI,kCAA2E;IAArB,2MAAS,iBAAU,KAAC;IACxE,2BACF;IAAA,iBAAS;;;IAJX,AADF,AADF,8BAA6E,aACrC,cACE;IAAA,YAAW;IAAA,iBAAO;IACxD,2GAAuC;IAKzC,iBAAM;IACN,8BAAuC;IACrC,kBAAyB;IAE7B,AADE,iBAAM,EACF;;;;IAVoC,eAAW;IAAX,kCAAW;IACjD,cAIC;IAJD,wEAIC;;AA1DX;;;;;;;;;;;;;;;;;GAiBG;AAwKH,MAAM,OAAO,wBAAwB;IAC1B,KAAK,GAAW,SAAS,CAAC;IAC1B,IAAI,GAAW,oBAAoB,CAAC;IACpC,WAAW,GAAW,CAAC,CAAC;IACxB,YAAY,GAAY,KAAK,CAAC;IAEhC,MAAM,GAAY,KAAK,CAAC;IAE/B,qFAAqF;IACrF,oFAAoF;IACpF,0FAA0F;IAC1F,2FAA2F;IAC3E,SAAS,GAAwB;QAC/C,EAAE,OAAO,EAAE,KAAK,EAAI,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAI,QAAQ,EAAE,KAAK,EAAE;QAC3E,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE;QAC3E,EAAE,OAAO,EAAE,KAAK,EAAI,OAAO,EAAE,KAAK,EAAK,QAAQ,EAAE,KAAK,EAAI,QAAQ,EAAE,QAAQ,EAAE;KAC/E,CAAC;IAEK,MAAM,KAAW,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;IAC9C,IAAI,KAAW,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IACpC,KAAK,KAAW,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC;IAE7C,mFAAmF;IAClE,iBAAiB,GAAG,IAAI,YAAY,EAAQ,CAAC;IAEvD,QAAQ;QACb,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;IAChC,CAAC;kHA3BU,wBAAwB;6DAAxB,wBAAwB;;;YAlKjC,oCAQqB;YAAnB,2IAAS,YAAQ,KAAC;YAClB,oBAAsB;YACtB,4BAAM;YAAA,YAAW;YAAA,iBAAO;YACxB,2FAAuB;YAKvB,uBAAmH;YACrH,iBAAS;YAET,yFAQqB;YAAnB,AADA,gKAAiB,WAAO,KAAC,qIACf,WAAO,KAAC;;;YAxBlB,sFAAqE;;YAMlE,eAAc;YAAd,uBAAc;YACX,eAAW;YAAX,+BAAW;YACjB,cAIC;YAJD,8CAIC;YAC6D,cAAgD;YAAhD,6DAAgD;YAK9G,cAA2C;YAG3C,AADA,AADA,AADA,4DAA2C,uCACT,+CACQ,wCACH;4BA1BjC,aAAa;;iFAoKZ,wBAAwB;cAvKpC,SAAS;2BACE,mBAAmB,cACjB,IAAI,WACP,CAAC,aAAa,CAAC,YACd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CT;;kBAyHA,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBAmBL,MAAM;;kFAvBI,wBAAwB","sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\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: [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>{{ 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    <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        <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      </div>\n    </ng-template>\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})\nexport class MJFilterPopoverComponent {\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  // 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.d.ts

@@ -0,0 +1,53 @@
+import * as i0 from "@angular/core";
+/**
+ * `<mj-left-nav-content>` — Content pane paired with `<mj-left-nav>`.
+ *
+ * Sits to the right of `<mj-left-nav>` inside `<mj-page-body [Flex]="true"
+ * Direction="row">` and holds the active section's content. Provides the
+ * standard layout box (`flex: 1`, page background, vertical overflow control)
+ * plus built-in `[Loading]` / `[Error]` states so each shell doesn't reinvent
+ * them.
+ *
+ * Projected content stays attached but hides via CSS when loading or errored —
+ * matches the cached-component pattern used by admin shells where dynamically
+ * loaded sub-pages should retain their state across section switches.
+ *
+ * ## Example
+ *
+ * ```html
+ * <mj-page-body [Flex]="true" [Padding]="false" Direction="row">
+ *   <mj-left-nav [Sections]="NavSections" [ActiveId]="ActiveSection"
+ *                (ItemClicked)="OnNavItemClicked($event)" />
+ *   <mj-left-nav-content [Loading]="IsLoading" [Error]="LoadError">
+ *     <ng-container #contentHost></ng-container>
+ *   </mj-left-nav-content>
+ * </mj-page-body>
+ * ```
+ *
+ * Replaces the bespoke `.{shell}-container__content` + `.{shell}-container__host`
+ * + `.{shell}-container__loading` + `.{shell}-container__error` pattern that
+ * every left-nav shell used to declare independently.
+ */
+export declare class MJLeftNavContentComponent {
+    /**
+     * When `true`, shows a centered loading state (spinner + label) and hides
+     * any projected content via CSS. Cached components remain attached.
+     */
+    Loading: boolean;
+    /**
+     * When non-empty, shows a centered error state with this message and hides
+     * any projected content.
+     */
+    Error: string | null;
+    /** Label shown in the loading state. Defaults to "Loading…". */
+    LoadingLabel: string;
+    /**
+     * Drives the busy-state class on the host. When set, CSS hides projected
+     * content (cached components stay attached, just not visible).
+     */
+    get IsBusy(): boolean;
+    get AriaBusy(): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJLeftNavContentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJLeftNavContentComponent, "mj-left-nav-content", never, { "Loading": { "alias": "Loading"; "required": false; }; "Error": { "alias": "Error"; "required": false; }; "LoadingLabel": { "alias": "LoadingLabel"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=left-nav-content.component.d.ts.map

package/dist/lib/left-nav/left-nav-content.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"left-nav-content.component.d.ts","sourceRoot":"","sources":["../../../src/lib/left-nav/left-nav-content.component.ts"],"names":[],"mappings":";AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBAiFa,yBAAyB;IACpC;;;OAGG;IACM,OAAO,EAAE,OAAO,CAAS;IAElC;;;OAGG;IACM,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAErC,gEAAgE;IACvD,YAAY,EAAE,MAAM,CAAc;IAE3C;;;OAGG;IACH,IACI,MAAM,IAAI,OAAO,CAEpB;IAED,IACI,QAAQ,IAAI,MAAM,GAAG,IAAI,CAE5B;yCA5BU,yBAAyB;2CAAzB,yBAAyB;CA6BrC"}

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

@@ -0,0 +1,121 @@
+import { Component, HostBinding, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+function MJLeftNavContentComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 0);
+    i0.ɵɵdomElement(1, "i", 2);
+    i0.ɵɵdomElementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r0.Error);
+} }
+function MJLeftNavContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 1);
+    i0.ɵɵdomElement(1, "i", 3);
+    i0.ɵɵdomElementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r0.LoadingLabel);
+} }
+/**
+ * `<mj-left-nav-content>` — Content pane paired with `<mj-left-nav>`.
+ *
+ * Sits to the right of `<mj-left-nav>` inside `<mj-page-body [Flex]="true"
+ * Direction="row">` and holds the active section's content. Provides the
+ * standard layout box (`flex: 1`, page background, vertical overflow control)
+ * plus built-in `[Loading]` / `[Error]` states so each shell doesn't reinvent
+ * them.
+ *
+ * Projected content stays attached but hides via CSS when loading or errored —
+ * matches the cached-component pattern used by admin shells where dynamically
+ * loaded sub-pages should retain their state across section switches.
+ *
+ * ## Example
+ *
+ * ```html
+ * <mj-page-body [Flex]="true" [Padding]="false" Direction="row">
+ *   <mj-left-nav [Sections]="NavSections" [ActiveId]="ActiveSection"
+ *                (ItemClicked)="OnNavItemClicked($event)" />
+ *   <mj-left-nav-content [Loading]="IsLoading" [Error]="LoadError">
+ *     <ng-container #contentHost></ng-container>
+ *   </mj-left-nav-content>
+ * </mj-page-body>
+ * ```
+ *
+ * Replaces the bespoke `.{shell}-container__content` + `.{shell}-container__host`
+ * + `.{shell}-container__loading` + `.{shell}-container__error` pattern that
+ * every left-nav shell used to declare independently.
+ */
+export class MJLeftNavContentComponent {
+    /**
+     * When `true`, shows a centered loading state (spinner + label) and hides
+     * any projected content via CSS. Cached components remain attached.
+     */
+    Loading = false;
+    /**
+     * When non-empty, shows a centered error state with this message and hides
+     * any projected content.
+     */
+    Error = null;
+    /** Label shown in the loading state. Defaults to "Loading…". */
+    LoadingLabel = 'Loading…';
+    /**
+     * Drives the busy-state class on the host. When set, CSS hides projected
+     * content (cached components stay attached, just not visible).
+     */
+    get IsBusy() {
+        return this.Loading || !!this.Error;
+    }
+    get AriaBusy() {
+        return this.Loading ? 'true' : null;
+    }
+    static ɵfac = function MJLeftNavContentComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJLeftNavContentComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJLeftNavContentComponent, selectors: [["mj-left-nav-content"]], hostVars: 3, hostBindings: function MJLeftNavContentComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("aria-busy", ctx.AriaBusy);
+            i0.ɵɵclassProp("mj-left-nav-content--busy", ctx.IsBusy);
+        } }, inputs: { Loading: "Loading", Error: "Error", LoadingLabel: "LoadingLabel" }, ngContentSelectors: _c0, decls: 3, vars: 1, consts: [["role", "alert", 1, "mj-left-nav-content__error"], ["role", "status", "aria-live", "polite", 1, "mj-left-nav-content__loading"], ["aria-hidden", "true", 1, "fa-solid", "fa-triangle-exclamation"], ["aria-hidden", "true", 1, "fa-solid", "fa-spinner", "fa-spin"]], template: function MJLeftNavContentComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵconditionalCreate(0, MJLeftNavContentComponent_Conditional_0_Template, 4, 1, "div", 0)(1, MJLeftNavContentComponent_Conditional_1_Template, 4, 1, "div", 1);
+            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      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    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJLeftNavContentComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-left-nav-content', standalone: true, imports: [CommonModule], template: `
+    @if (Error) {
+      <div class="mj-left-nav-content__error" role="alert">
+        <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i>
+        <span>{{ Error }}</span>
+      </div>
+    } @else if (Loading) {
+      <div class="mj-left-nav-content__loading" role="status" aria-live="polite">
+        <i class="fa-solid fa-spinner fa-spin" aria-hidden="true"></i>
+        <span>{{ LoadingLabel }}</span>
+      </div>
+    }
+    <ng-content></ng-content>
+  `, styles: ["\n    :host {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      background: var(--mj-bg-page);\n      overflow: hidden;\n    }\n\n    /* Force dynamically-projected components (via ViewContainerRef.createComponent\n       or ng-content) to fill the host with a proper flex-column layout. ::ng-deep\n       is required because Angular's emulated encapsulation gives the host a scope\n       attribute that dynamically-created components do not inherit, so a plain\n       direct-child selector would not match them. The :not() filters skip our own\n       error / loading elements AND the interior chrome primitives, which already\n       self-declare their flex behavior on :host (header-interior is display:block\n       with natural height; body-interior is flex:1 1 auto with overflow-y:auto)\n       and competing with them would break multi-sibling chrome layouts inside a\n       single content pane. This replaces the bespoke inline-style hack admin\n       shells used to apply via applyHostSizing(). */\n    :host ::ng-deep > *: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    /* When busy, hide projected content but keep cached components attached\n       to the DOM so their state survives the loading / error transition. */\n    :host(.mj-left-nav-content--busy) ::ng-deep > *:not(.mj-left-nav-content__error):not(.mj-left-nav-content__loading) {\n      display: none;\n    }\n\n    .mj-left-nav-content__error,\n    .mj-left-nav-content__loading {\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 {\n      color: var(--mj-status-error);\n    }\n\n    .mj-left-nav-content__error i {\n      font-size: 20px;\n    }\n\n    .mj-left-nav-content__loading i {\n      font-size: 16px;\n      color: var(--mj-brand-primary);\n    }\n  "] }]
+    }], null, { Loading: [{
+            type: Input
+        }], Error: [{
+            type: Input
+        }], LoadingLabel: [{
+            type: Input
+        }], IsBusy: [{
+            type: HostBinding,
+            args: ['class.mj-left-nav-content--busy']
+        }], AriaBusy: [{
+            type: HostBinding,
+            args: ['attr.aria-busy']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJLeftNavContentComponent, { className: "MJLeftNavContentComponent", filePath: "lib/left-nav/left-nav-content.component.ts", lineNumber: 114 }); })();
+//# sourceMappingURL=left-nav-content.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"left-nav-content.component.js","sourceRoot":"","sources":["../../../src/lib/left-nav/left-nav-content.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;;;;IAqCzC,iCAAqD;IACnD,0BAAmE;IACnE,+BAAM;IAAA,YAAW;IACnB,AADmB,oBAAO,EACpB;;;IADE,eAAW;IAAX,kCAAW;;;IAGnB,iCAA2E;IACzE,0BAA8D;IAC9D,+BAAM;IAAA,YAAkB;IAC1B,AAD0B,oBAAO,EAC3B;;;IADE,eAAkB;IAAlB,yCAAkB;;AA1ChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAkFH,MAAM,OAAO,yBAAyB;IACpC;;;OAGG;IACM,OAAO,GAAY,KAAK,CAAC;IAElC;;;OAGG;IACM,KAAK,GAAkB,IAAI,CAAC;IAErC,gEAAgE;IACvD,YAAY,GAAW,UAAU,CAAC;IAE3C;;;OAGG;IACH,IACI,MAAM;QACR,OAAO,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;IACtC,CAAC;IAED,IACI,QAAQ;QACV,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;IACtC,CAAC;mHA5BU,yBAAyB;6DAAzB,yBAAyB;;YAAzB,uDAAyB;;;YAvEhC,AALF,2FAAa,qEAKS;YAMtB,kBAAyB;;YAXzB,sDAUC;4BAZO,YAAY;;iFA8EX,yBAAyB;cAjFrC,SAAS;2BACE,qBAAqB,cACnB,IAAI,WACP,CAAC,YAAY,CAAC,YACb;;;;;;;;;;;;;GAaT;;kBAqEA,KAAK;;kBAML,KAAK;;kBAGL,KAAK;;kBAML,WAAW;mBAAC,iCAAiC;;kBAK7C,WAAW;mBAAC,gBAAgB;;kFAzBlB,yBAAyB","sourcesContent":["import { Component, HostBinding, Input } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n/**\n * `<mj-left-nav-content>` — Content pane paired with `<mj-left-nav>`.\n *\n * Sits to the right of `<mj-left-nav>` inside `<mj-page-body [Flex]=\"true\"\n * Direction=\"row\">` and holds the active section's content. Provides the\n * standard layout box (`flex: 1`, page background, vertical overflow control)\n * plus built-in `[Loading]` / `[Error]` states so each shell doesn't reinvent\n * them.\n *\n * Projected content stays attached but hides via CSS when loading or errored —\n * matches the cached-component pattern used by admin shells where dynamically\n * loaded sub-pages should retain their state across section switches.\n *\n * ## Example\n *\n * ```html\n * <mj-page-body [Flex]=\"true\" [Padding]=\"false\" Direction=\"row\">\n *   <mj-left-nav [Sections]=\"NavSections\" [ActiveId]=\"ActiveSection\"\n *                (ItemClicked)=\"OnNavItemClicked($event)\" />\n *   <mj-left-nav-content [Loading]=\"IsLoading\" [Error]=\"LoadError\">\n *     <ng-container #contentHost></ng-container>\n *   </mj-left-nav-content>\n * </mj-page-body>\n * ```\n *\n * Replaces the bespoke `.{shell}-container__content` + `.{shell}-container__host`\n * + `.{shell}-container__loading` + `.{shell}-container__error` pattern that\n * every left-nav shell used to declare independently.\n */\n@Component({\n  selector: 'mj-left-nav-content',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    @if (Error) {\n      <div class=\"mj-left-nav-content__error\" role=\"alert\">\n        <i class=\"fa-solid fa-triangle-exclamation\" aria-hidden=\"true\"></i>\n        <span>{{ Error }}</span>\n      </div>\n    } @else if (Loading) {\n      <div class=\"mj-left-nav-content__loading\" role=\"status\" aria-live=\"polite\">\n        <i class=\"fa-solid fa-spinner fa-spin\" aria-hidden=\"true\"></i>\n        <span>{{ LoadingLabel }}</span>\n      </div>\n    }\n    <ng-content></ng-content>\n  `,\n  styles: [`\n    :host {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      background: var(--mj-bg-page);\n      overflow: hidden;\n    }\n\n    /* Force dynamically-projected components (via ViewContainerRef.createComponent\n       or ng-content) to fill the host with a proper flex-column layout. ::ng-deep\n       is required because Angular's emulated encapsulation gives the host a scope\n       attribute that dynamically-created components do not inherit, so a plain\n       direct-child selector would not match them. The :not() filters skip our own\n       error / loading elements AND the interior chrome primitives, which already\n       self-declare their flex behavior on :host (header-interior is display:block\n       with natural height; body-interior is flex:1 1 auto with overflow-y:auto)\n       and competing with them would break multi-sibling chrome layouts inside a\n       single content pane. This replaces the bespoke inline-style hack admin\n       shells used to apply via applyHostSizing(). */\n    :host ::ng-deep > *: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    /* When busy, hide projected content but keep cached components attached\n       to the DOM so their state survives the loading / error transition. */\n    :host(.mj-left-nav-content--busy) ::ng-deep > *:not(.mj-left-nav-content__error):not(.mj-left-nav-content__loading) {\n      display: none;\n    }\n\n    .mj-left-nav-content__error,\n    .mj-left-nav-content__loading {\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 {\n      color: var(--mj-status-error);\n    }\n\n    .mj-left-nav-content__error i {\n      font-size: 20px;\n    }\n\n    .mj-left-nav-content__loading i {\n      font-size: 16px;\n      color: var(--mj-brand-primary);\n    }\n  `]\n})\nexport class MJLeftNavContentComponent {\n  /**\n   * When `true`, shows a centered loading state (spinner + label) and hides\n   * any projected content via CSS. Cached components remain attached.\n   */\n  @Input() Loading: boolean = false;\n\n  /**\n   * When non-empty, shows a centered error state with this message and hides\n   * any projected content.\n   */\n  @Input() Error: string | null = null;\n\n  /** Label shown in the loading state. Defaults to \"Loading…\". */\n  @Input() LoadingLabel: string = 'Loading…';\n\n  /**\n   * Drives the busy-state class on the host. When set, CSS hides projected\n   * content (cached components stay attached, just not visible).\n   */\n  @HostBinding('class.mj-left-nav-content--busy')\n  get IsBusy(): boolean {\n    return this.Loading || !!this.Error;\n  }\n\n  @HostBinding('attr.aria-busy')\n  get AriaBusy(): string | null {\n    return this.Loading ? 'true' : null;\n  }\n}\n"]}

package/dist/lib/left-nav/left-nav.component.d.ts

@@ -0,0 +1,137 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * A single item in an `<mj-left-nav>`.
+ */
+export interface MJLeftNavItem {
+    /** Stable identifier — used for active-state matching and emitted on click. */
+    id: string;
+    /** Primary label rendered as the item's main text. */
+    label: string;
+    /** Optional Font Awesome icon class (e.g. `'fa-solid fa-users'`). */
+    icon?: string;
+    /** Optional muted secondary line shown under the label. */
+    description?: string;
+    /** Optional count badge rendered at the right of the item. */
+    badge?: string | number;
+    /** When `true`, the item renders dimmed and is not clickable. */
+    disabled?: boolean;
+    /**
+     * Optional child items for tree-structured nav (e.g. Testing Explorer's
+     * Test Suites tree). When `children` is `undefined` the item renders as a
+     * plain flat-list item (existing behavior). When defined — even as an empty
+     * array — the item participates in tree rendering: a chevron toggle shows
+     * for non-empty arrays, and an equal-width placeholder reserves alignment
+     * space for leaves so siblings line up. Expansion state is owned by the
+     * consumer via `[ExpandedIds]` on `<mj-left-nav>`.
+     */
+    children?: MJLeftNavItem[];
+}
+/**
+ * A grouped section in an `<mj-left-nav>`. The optional `label` renders as an
+ * uppercase section header above the items. Sections WITHOUT a label still
+ * group items together (use multiple unlabeled sections to get visual dividers
+ * without headers).
+ */
+export interface MJLeftNavSection {
+    /** Optional uppercase header above the items in this section. */
+    label?: string;
+    /** The clickable items in this section. */
+    items: MJLeftNavItem[];
+}
+/**
+ * `<mj-left-nav>` — Canonical left rail for MJ Explorer dashboards that have
+ * an internal section-nav (Admin shells, KH Config, KH Analytics, AI Analytics,
+ * Communication, Credentials, APIKeys, etc.).
+ *
+ * Replaces the bespoke `.{name}-nav` / `.{name}-nav-item` patterns each of
+ * those dashboards used to declare in their own CSS files.
+ *
+ * Supports:
+ *  - Plain items (icon + label)
+ *  - Items with a muted secondary description line (Admin shells pattern)
+ *  - Items with a count badge (APIKeys pattern)
+ *  - Sections with uppercase headers (Communication / Credentials pattern)
+ *  - Optional `[header]` and `[footer]` content slots (KH Config logo header, etc.)
+ *  - Responsive collapse-to-row at narrow viewports (consumer controls parent's
+ *    flex-direction switch; the rail's own styles handle item wrapping + the
+ *    description-hide behavior)
+ *
+ * ## Example
+ *
+ * ```typescript
+ * sections: MJLeftNavSection[] = [
+ *   {
+ *     items: [
+ *       { id: 'users',  icon: 'fa-solid fa-users',         label: 'Users',  description: 'Manage user accounts' },
+ *       { id: 'roles',  icon: 'fa-solid fa-user-shield',   label: 'Roles',  description: 'Define roles and assignments' },
+ *     ]
+ *   }
+ * ];
+ * activeId = 'users';
+ * ```
+ *
+ * ```html
+ * <mj-left-nav
+ *   [Sections]="sections"
+ *   [ActiveId]="activeId"
+ *   (ItemClicked)="onItemClicked($event)">
+ * </mj-left-nav>
+ * ```
+ *
+ * Responsive collapse — the rail's own CSS handles narrow-viewport item
+ * wrapping. The consumer is responsible for switching the parent's
+ * flex-direction from row → column at the same breakpoint, e.g. via
+ * `<mj-page-body>` Direction="row" with a `@media` override in the shell's CSS.
+ */
+export declare class MJLeftNavComponent {
+    /**
+     * The sections + items that make up the rail. Sections render top-to-bottom
+     * in array order; items inside each section render in array order.
+     */
+    Sections: MJLeftNavSection[];
+    /**
+     * The id of the currently active item. Items matching this id get the
+     * active styling and `aria-current="page"`.
+     */
+    ActiveId: string | null;
+    /**
+     * Width of the rail in pixels. Defaults to 240. Set to a smaller value
+     * (e.g., 200) for denser shells.
+     */
+    Width: number;
+    /**
+     * Ids of currently-expanded tree items. Items whose id appears here render
+     * with a down-chevron and their `children` are visible; items not in this
+     * list render with a right-chevron and their children stay collapsed.
+     * Consumer owns the state — toggle in response to `(ItemToggled)`.
+     *
+     * Only applies to items where `children !== undefined`; flat items ignore it.
+     */
+    ExpandedIds: string[];
+    /**
+     * Emitted when a non-disabled item is clicked.
+     */
+    ItemClicked: EventEmitter<MJLeftNavItem>;
+    /**
+     * Emitted when a tree item's chevron is clicked. Consumer should toggle
+     * the item's id in / out of `ExpandedIds`. Does NOT also fire `ItemClicked`.
+     */
+    ItemToggled: EventEmitter<MJLeftNavItem>;
+    OnItemClick(item: MJLeftNavItem): void;
+    OnItemToggle(event: Event, item: MJLeftNavItem): void;
+    IsExpanded(id: string): boolean;
+    /**
+     * Whether any top-level item in this section actually has children to expand.
+     * The template calls this once per section; the result is threaded through
+     * the recursive itemTpl so leaf nodes only reserve a chevron-column
+     * placeholder when a sibling will actually render a chevron.
+     *
+     * Top-level check is sufficient — if a deeply-nested item has children, its
+     * parent's `children.length > 0` already qualifies the section as expandable.
+     */
+    HasExpandableItems(items: MJLeftNavItem[]): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJLeftNavComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJLeftNavComponent, "mj-left-nav", never, { "Sections": { "alias": "Sections"; "required": false; }; "ActiveId": { "alias": "ActiveId"; "required": false; }; "Width": { "alias": "Width"; "required": false; }; "ExpandedIds": { "alias": "ExpandedIds"; "required": false; }; }, { "ItemClicked": "ItemClicked"; "ItemToggled": "ItemToggled"; }, never, ["[header]", "[footer]"], true, never>;
+}
+//# sourceMappingURL=left-nav.component.d.ts.map

package/dist/lib/left-nav/left-nav.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"left-nav.component.d.ts","sourceRoot":"","sources":["../../../src/lib/left-nav/left-nav.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAAiB,MAAM,eAAe,CAAC;;AAGvE;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,+EAA+E;IAC/E,EAAE,EAAE,MAAM,CAAC;IACX,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;CAC5B;AAED;;;;;GAKG;AACH,MAAM,WAAW,gBAAgB;IAC/B,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,qBAqSa,kBAAkB;IAC7B;;;OAGG;IACM,QAAQ,EAAE,gBAAgB,EAAE,CAAM;IAE3C;;;OAGG;IACM,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAQ;IAExC;;;OAGG;IACM,KAAK,EAAE,MAAM,CAAO;IAE7B;;;;;;;OAOG;IACM,WAAW,EAAE,MAAM,EAAE,CAAM;IAEpC;;OAEG;IACO,WAAW,8BAAqC;IAE1D;;;OAGG;IACO,WAAW,8BAAqC;IAE1D,WAAW,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI;IAKtC,YAAY,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,aAAa,GAAG,IAAI;IAKrD,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO;IAI/B;;;;;;;;OAQG;IACH,kBAAkB,CAAC,KAAK,EAAE,aAAa,EAAE,GAAG,OAAO;yCA/DxC,kBAAkB;2CAAlB,kBAAkB;CAqE9B"}