@memberjunction/ng-ui-components 5.34.1 → 5.36.0

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

@@ -0,0 +1,399 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+const _c0 = [[["", "header", ""]], [["", "footer", ""]]];
+const _c1 = ["[header]", "[footer]"];
+const _c2 = (a0, a1) => ({ item: a0, depth: 0, hasExpandable: a1 });
+const _c3 = a0 => ({ item: a0 });
+const _c4 = (a0, a1, a2) => ({ item: a0, depth: a1, hasExpandable: a2 });
+const _forTrack0 = ($index, $item) => $item.id;
+function MJLeftNavComponent_For_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 3);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const section_r1 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(section_r1.label);
+} }
+function MJLeftNavComponent_For_3_For_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function MJLeftNavComponent_For_3_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, MJLeftNavComponent_For_3_For_2_ng_container_0_Template, 1, 0, "ng-container", 4);
+} if (rf & 2) {
+    const item_r2 = ctx.$implicit;
+    const section_r1 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    const itemTpl_r4 = i0.ɵɵreference(6);
+    i0.ɵɵproperty("ngTemplateOutlet", itemTpl_r4)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c2, item_r2, ctx_r2.HasExpandableItems(section_r1.items)));
+} }
+function MJLeftNavComponent_For_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MJLeftNavComponent_For_3_Conditional_0_Template, 2, 1, "div", 3);
+    i0.ɵɵrepeaterCreate(1, MJLeftNavComponent_For_3_For_2_Template, 1, 5, "ng-container", null, _forTrack0);
+} if (rf & 2) {
+    const section_r1 = ctx.$implicit;
+    i0.ɵɵconditional(section_r1.label ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(section_r1.items);
+} }
+function MJLeftNavComponent_ng_template_5_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 8);
+    i0.ɵɵlistener("click", function MJLeftNavComponent_ng_template_5_Conditional_0_Conditional_1_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r5); const item_r6 = i0.ɵɵnextContext(2).item; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnItemToggle($event, item_r6)); });
+    i0.ɵɵelement(1, "i", 9);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r6 = i0.ɵɵnextContext(2).item;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("aria-label", ctx_r2.IsExpanded(item_r6.id) ? "Collapse" : "Expand")("aria-expanded", ctx_r2.IsExpanded(item_r6.id));
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-chevron-down", ctx_r2.IsExpanded(item_r6.id))("fa-chevron-right", !ctx_r2.IsExpanded(item_r6.id));
+} }
+function MJLeftNavComponent_ng_template_5_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 7);
+} }
+function MJLeftNavComponent_ng_template_5_Conditional_0_ng_container_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function MJLeftNavComponent_ng_template_5_Conditional_0_Conditional_4_For_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function MJLeftNavComponent_ng_template_5_Conditional_0_Conditional_4_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, MJLeftNavComponent_ng_template_5_Conditional_0_Conditional_4_For_1_ng_container_0_Template, 1, 0, "ng-container", 4);
+} if (rf & 2) {
+    const child_r7 = ctx.$implicit;
+    const ctx_r7 = i0.ɵɵnextContext(3);
+    const depth_r9 = ctx_r7.depth;
+    const hasExpandable_r10 = ctx_r7.hasExpandable;
+    i0.ɵɵnextContext();
+    const itemTpl_r4 = i0.ɵɵreference(6);
+    i0.ɵɵproperty("ngTemplateOutlet", itemTpl_r4)("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c4, child_r7, depth_r9 + 1, hasExpandable_r10));
+} }
+function MJLeftNavComponent_ng_template_5_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, MJLeftNavComponent_ng_template_5_Conditional_0_Conditional_4_For_1_Template, 1, 6, "ng-container", null, _forTrack0);
+} if (rf & 2) {
+    const item_r6 = i0.ɵɵnextContext(2).item;
+    i0.ɵɵrepeater(item_r6.children);
+} }
+function MJLeftNavComponent_ng_template_5_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵconditionalCreate(1, MJLeftNavComponent_ng_template_5_Conditional_0_Conditional_1_Template, 2, 6, "button", 6)(2, MJLeftNavComponent_ng_template_5_Conditional_0_Conditional_2_Template, 1, 0, "span", 7);
+    i0.ɵɵtemplate(3, MJLeftNavComponent_ng_template_5_Conditional_0_ng_container_3_Template, 1, 0, "ng-container", 4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, MJLeftNavComponent_ng_template_5_Conditional_0_Conditional_4_Template, 2, 0);
+} if (rf & 2) {
+    const ctx_r7 = i0.ɵɵnextContext();
+    const item_r6 = ctx_r7.item;
+    const depth_r9 = ctx_r7.depth;
+    const ctx_r2 = i0.ɵɵnextContext();
+    const itemBtn_r11 = i0.ɵɵreference(8);
+    i0.ɵɵstyleProp("padding-left", depth_r9 * 14, "px");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r6.children.length > 0 ? 1 : 2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngTemplateOutlet", itemBtn_r11)("ngTemplateOutletContext", i0.ɵɵpureFunction1(6, _c3, item_r6));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r6.children.length > 0 && ctx_r2.IsExpanded(item_r6.id) ? 4 : -1);
+} }
+function MJLeftNavComponent_ng_template_5_Conditional_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function MJLeftNavComponent_ng_template_5_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, MJLeftNavComponent_ng_template_5_Conditional_1_ng_container_0_Template, 1, 0, "ng-container", 4);
+} if (rf & 2) {
+    const item_r6 = i0.ɵɵnextContext().item;
+    i0.ɵɵnextContext();
+    const itemBtn_r11 = i0.ɵɵreference(8);
+    i0.ɵɵproperty("ngTemplateOutlet", itemBtn_r11)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c3, item_r6));
+} }
+function MJLeftNavComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MJLeftNavComponent_ng_template_5_Conditional_0_Template, 5, 8)(1, MJLeftNavComponent_ng_template_5_Conditional_1_Template, 1, 4, "ng-container");
+} if (rf & 2) {
+    const item_r6 = ctx.item;
+    const hasExpandable_r10 = ctx.hasExpandable;
+    i0.ɵɵconditional(item_r6.children !== undefined && hasExpandable_r10 ? 0 : 1);
+} }
+function MJLeftNavComponent_ng_template_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 16);
+} if (rf & 2) {
+    const item_r13 = i0.ɵɵnextContext().item;
+    i0.ɵɵclassMap(item_r13.icon);
+} }
+function MJLeftNavComponent_ng_template_7_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 14);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r13 = i0.ɵɵnextContext().item;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(item_r13.description);
+} }
+function MJLeftNavComponent_ng_template_7_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 15);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r13 = i0.ɵɵnextContext().item;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(item_r13.badge);
+} }
+function MJLeftNavComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 10);
+    i0.ɵɵlistener("click", function MJLeftNavComponent_ng_template_7_Template_button_click_0_listener() { const item_r13 = i0.ɵɵrestoreView(_r12).item; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnItemClick(item_r13)); });
+    i0.ɵɵconditionalCreate(1, MJLeftNavComponent_ng_template_7_Conditional_1_Template, 1, 2, "i", 11);
+    i0.ɵɵelementStart(2, "span", 12)(3, "span", 13);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(5, MJLeftNavComponent_ng_template_7_Conditional_5_Template, 2, 1, "span", 14);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(6, MJLeftNavComponent_ng_template_7_Conditional_6_Template, 2, 1, "span", 15);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r13 = ctx.item;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("mj-left-nav__item--active", item_r13.id === ctx_r2.ActiveId)("mj-left-nav__item--disabled", item_r13.disabled);
+    i0.ɵɵproperty("disabled", item_r13.disabled);
+    i0.ɵɵattribute("aria-current", item_r13.id === ctx_r2.ActiveId ? "page" : null);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r13.icon ? 1 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(item_r13.label);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r13.description ? 5 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r13.badge != null ? 6 : -1);
+} }
+/**
+ * `<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 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 = [];
+    /**
+     * The id of the currently active item. Items matching this id get the
+     * active styling and `aria-current="page"`.
+     */
+    ActiveId = null;
+    /**
+     * Width of the rail in pixels. Defaults to 240. Set to a smaller value
+     * (e.g., 200) for denser shells.
+     */
+    Width = 240;
+    /**
+     * 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 = [];
+    /**
+     * Emitted when a non-disabled item is clicked.
+     */
+    ItemClicked = new EventEmitter();
+    /**
+     * 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 = new EventEmitter();
+    OnItemClick(item) {
+        if (item.disabled)
+            return;
+        this.ItemClicked.emit(item);
+    }
+    OnItemToggle(event, item) {
+        event.stopPropagation();
+        this.ItemToggled.emit(item);
+    }
+    IsExpanded(id) {
+        return this.ExpandedIds.indexOf(id) >= 0;
+    }
+    /**
+     * 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) {
+        for (const item of items) {
+            if (item.children && item.children.length > 0)
+                return true;
+        }
+        return false;
+    }
+    static ɵfac = function MJLeftNavComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJLeftNavComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJLeftNavComponent, selectors: [["mj-left-nav"]], inputs: { Sections: "Sections", ActiveId: "ActiveId", Width: "Width", ExpandedIds: "ExpandedIds" }, outputs: { ItemClicked: "ItemClicked", ItemToggled: "ItemToggled" }, ngContentSelectors: _c1, decls: 9, vars: 2, consts: [["itemTpl", ""], ["itemBtn", ""], ["role", "navigation", 1, "mj-left-nav"], [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"], [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) {
+            i0.ɵɵprojectionDef(_c0);
+            i0.ɵɵelementStart(0, "aside", 2);
+            i0.ɵɵprojection(1);
+            i0.ɵɵrepeaterCreate(2, MJLeftNavComponent_For_3_Template, 3, 1, null, null, i0.ɵɵrepeaterTrackByIndex);
+            i0.ɵɵprojection(4, 1);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(5, MJLeftNavComponent_ng_template_5_Template, 2, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(7, MJLeftNavComponent_ng_template_7_Template, 7, 10, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
+        } if (rf & 2) {
+            i0.ɵɵstyleProp("width", ctx.Width, "px");
+            i0.ɵɵadvance(2);
+            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    .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    @media (max-width: 700px) {\n      [_nghost-%COMP%] {\n        width: 100% !important;\n      }\n      .mj-left-nav[_ngcontent-%COMP%] {\n        width: 100%;\n        height: auto;\n        max-height: 220px;\n        border-right: none;\n        border-bottom: 1px solid var(--mj-border-default);\n        display: flex;\n        flex-wrap: wrap;\n        gap: 4px;\n      }\n      .mj-left-nav__item[_ngcontent-%COMP%] {\n        flex: 1 1 calc(50% - 8px);\n        margin-bottom: 0;\n      }\n      .mj-left-nav__description[_ngcontent-%COMP%] {\n        display: none;\n      }\n      .mj-left-nav__section-label[_ngcontent-%COMP%] {\n        flex-basis: 100%;\n      }\n      \n\n\n      .mj-left-nav__row[_ngcontent-%COMP%] {\n        flex-basis: 100%;\n        padding-left: 0 !important;\n      }\n    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJLeftNavComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-left-nav', standalone: true, imports: [CommonModule], template: `
+    <aside class="mj-left-nav" [style.width.px]="Width" role="navigation">
+      <ng-content select="[header]"></ng-content>
+
+      @for (section of Sections; track $index) {
+        @if (section.label) {
+          <div class="mj-left-nav__section-label">{{ section.label }}</div>
+        }
+        @for (item of section.items; track item.id) {
+          <ng-container
+            *ngTemplateOutlet="itemTpl; context: { item: item, depth: 0, hasExpandable: HasExpandableItems(section.items) }">
+          </ng-container>
+        }
+      }
+
+      <ng-content select="[footer]"></ng-content>
+    </aside>
+
+    <!-- Recursive item template — renders one item plus, when expanded,
+         its children indented by depth. The hasExpandable flag is computed
+         once per section and threaded through the recursion so leaf nodes
+         only reserve a chevron-column placeholder when a sibling actually
+         shows a chevron. -->
+    <ng-template #itemTpl let-item="item" let-depth="depth" let-hasExpandable="hasExpandable">
+      @if (item.children !== undefined && hasExpandable) {
+        <!-- Tree row: chevron (when this node has children) or placeholder
+             (when a sibling has children but this leaf needs alignment). -->
+        <div
+          class="mj-left-nav__row"
+          [style.padding-left.px]="depth * 14">
+          @if (item.children.length > 0) {
+            <button
+              type="button"
+              class="mj-left-nav__chevron"
+              [attr.aria-label]="IsExpanded(item.id) ? 'Collapse' : 'Expand'"
+              [attr.aria-expanded]="IsExpanded(item.id)"
+              (click)="OnItemToggle($event, item)">
+              <i class="fa-solid"
+                 [class.fa-chevron-down]="IsExpanded(item.id)"
+                 [class.fa-chevron-right]="!IsExpanded(item.id)"
+                 aria-hidden="true"></i>
+            </button>
+          } @else {
+            <span class="mj-left-nav__chevron-placeholder" aria-hidden="true"></span>
+          }
+          <ng-container
+            *ngTemplateOutlet="itemBtn; context: { item: item }">
+          </ng-container>
+        </div>
+
+        @if (item.children.length > 0 && IsExpanded(item.id)) {
+          @for (child of item.children; track child.id) {
+            <ng-container
+              *ngTemplateOutlet="itemTpl; context: { item: child, depth: depth + 1, hasExpandable: hasExpandable }">
+            </ng-container>
+          }
+        }
+      } @else {
+        <!-- Flat render: item.children is undefined, OR no sibling in this
+             section is actually expandable — render the button directly with
+             no chevron column reserved. -->
+        <ng-container
+          *ngTemplateOutlet="itemBtn; context: { item: item }">
+        </ng-container>
+      }
+    </ng-template>
+
+    <!-- Item button — shared by both flat and tree rendering paths -->
+    <ng-template #itemBtn let-item="item">
+      <button
+        type="button"
+        class="mj-left-nav__item"
+        [class.mj-left-nav__item--active]="item.id === ActiveId"
+        [class.mj-left-nav__item--disabled]="item.disabled"
+        [disabled]="item.disabled"
+        [attr.aria-current]="item.id === ActiveId ? 'page' : null"
+        (click)="OnItemClick(item)">
+        @if (item.icon) {
+          <i class="mj-left-nav__icon" [class]="item.icon" aria-hidden="true"></i>
+        }
+        <span class="mj-left-nav__text">
+          <span class="mj-left-nav__label">{{ item.label }}</span>
+          @if (item.description) {
+            <span class="mj-left-nav__description">{{ item.description }}</span>
+          }
+        </span>
+        @if (item.badge != null) {
+          <span class="mj-left-nav__badge">{{ item.badge }}</span>
+        }
+      </button>
+    </ng-template>
+  `, styles: ["\n    :host {\n      display: block;\n      flex-shrink: 0;\n    }\n\n    .mj-left-nav {\n      height: 100%;\n      background: var(--mj-bg-surface);\n      border-right: 1px solid var(--mj-border-default);\n      overflow-y: auto;\n      padding: 8px;\n      box-sizing: border-box;\n    }\n\n    .mj-left-nav__section-label {\n      font-size: 11px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n      color: var(--mj-text-muted);\n      padding: 12px 12px 6px;\n    }\n\n    .mj-left-nav__section-label:first-child {\n      padding-top: 6px;\n    }\n\n    .mj-left-nav__item {\n      display: flex;\n      align-items: flex-start;\n      gap: 10px;\n      padding: 10px 12px;\n      width: 100%;\n      border: none;\n      background: transparent;\n      border-radius: 8px;\n      cursor: pointer;\n      transition: background-color 0.12s ease, color 0.12s ease;\n      margin-bottom: 2px;\n      font-family: inherit;\n      color: var(--mj-text-secondary);\n      text-align: left;\n    }\n\n    .mj-left-nav__item:hover:not(.mj-left-nav__item--disabled) {\n      background: var(--mj-bg-surface-hover);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-left-nav__item--active {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    .mj-left-nav__item--active:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n    }\n\n    .mj-left-nav__item--disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .mj-left-nav__icon {\n      width: 18px;\n      text-align: center;\n      font-size: 13px;\n      margin-top: 1px;\n      flex-shrink: 0;\n      color: inherit;\n    }\n\n    .mj-left-nav__text {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .mj-left-nav__label {\n      font-size: 13px;\n      font-weight: 500;\n      line-height: 1.2;\n    }\n\n    .mj-left-nav__description {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      margin-top: 3px;\n      line-height: 1.3;\n    }\n\n    .mj-left-nav__item--active .mj-left-nav__description {\n      color: color-mix(in srgb, var(--mj-brand-primary) 70%, var(--mj-text-muted));\n    }\n\n    .mj-left-nav__badge {\n      margin-left: auto;\n      font-size: 11px;\n      font-weight: 600;\n      padding: 2px 8px;\n      border-radius: 999px;\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-secondary);\n      align-self: center;\n    }\n\n    .mj-left-nav__item--active .mj-left-nav__badge {\n      background: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    /* \u2500\u2500 Tree rendering \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       Used when MJLeftNavItem.children is defined (even as an empty array).\n       The row wraps a chevron/placeholder + the item button so they sit on\n       one line, and depth-based padding-left is applied to the row (not the\n       item) so the chevron aligns with the depth column. */\n\n    .mj-left-nav__row {\n      display: flex;\n      align-items: stretch;\n      gap: 2px;\n    }\n\n    .mj-left-nav__row .mj-left-nav__item {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .mj-left-nav__chevron {\n      flex-shrink: 0;\n      width: 20px;\n      height: 32px;\n      align-self: center;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      border: none;\n      background: transparent;\n      border-radius: 4px;\n      cursor: pointer;\n      color: var(--mj-text-muted);\n      font-size: 10px;\n      padding: 0;\n      transition: background-color 0.12s ease, color 0.12s ease;\n      font-family: inherit;\n    }\n\n    .mj-left-nav__chevron:hover {\n      background: var(--mj-bg-surface-hover);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-left-nav__chevron-placeholder {\n      flex-shrink: 0;\n      width: 20px;\n      display: inline-block;\n    }\n\n    /* Responsive collapse: at narrow viewports the rail becomes a top bar of\n       wrapping items. The consumer is still responsible for switching the\n       parent's flex-direction from row \u2192 column (see <mj-page-body> Direction\n       + the shell's @media override). */\n    @media (max-width: 700px) {\n      :host {\n        width: 100% !important;\n      }\n      .mj-left-nav {\n        width: 100%;\n        height: auto;\n        max-height: 220px;\n        border-right: none;\n        border-bottom: 1px solid var(--mj-border-default);\n        display: flex;\n        flex-wrap: wrap;\n        gap: 4px;\n      }\n      .mj-left-nav__item {\n        flex: 1 1 calc(50% - 8px);\n        margin-bottom: 0;\n      }\n      .mj-left-nav__description {\n        display: none;\n      }\n      .mj-left-nav__section-label {\n        flex-basis: 100%;\n      }\n      /* Tree rows take a full line even in the wrap layout \u2014 chevron + item\n         should stay paired rather than flow as separate flex children. */\n      .mj-left-nav__row {\n        flex-basis: 100%;\n        padding-left: 0 !important;\n      }\n    }\n  "] }]
+    }], null, { Sections: [{
+            type: Input
+        }], ActiveId: [{
+            type: Input
+        }], Width: [{
+            type: Input
+        }], ExpandedIds: [{
+            type: Input
+        }], ItemClicked: [{
+            type: Output
+        }], ItemToggled: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJLeftNavComponent, { className: "MJLeftNavComponent", filePath: "lib/left-nav/left-nav.component.ts", lineNumber: 383 }); })();
+//# sourceMappingURL=left-nav.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"left-nav.component.js","sourceRoot":"","sources":["../../../src/lib/left-nav/left-nav.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n/**\n * A single item in an `<mj-left-nav>`.\n */\nexport interface MJLeftNavItem {\n  /** Stable identifier — used for active-state matching and emitted on click. */\n  id: string;\n  /** Primary label rendered as the item's main text. */\n  label: string;\n  /** Optional Font Awesome icon class (e.g. `'fa-solid fa-users'`). */\n  icon?: string;\n  /** Optional muted secondary line shown under the label. */\n  description?: string;\n  /** Optional count badge rendered at the right of the item. */\n  badge?: string | number;\n  /** When `true`, the item renders dimmed and is not clickable. */\n  disabled?: boolean;\n  /**\n   * Optional child items for tree-structured nav (e.g. Testing Explorer's\n   * Test Suites tree). When `children` is `undefined` the item renders as a\n   * plain flat-list item (existing behavior). When defined — even as an empty\n   * array — the item participates in tree rendering: a chevron toggle shows\n   * for non-empty arrays, and an equal-width placeholder reserves alignment\n   * space for leaves so siblings line up. Expansion state is owned by the\n   * consumer via `[ExpandedIds]` on `<mj-left-nav>`.\n   */\n  children?: MJLeftNavItem[];\n}\n\n/**\n * A grouped section in an `<mj-left-nav>`. The optional `label` renders as an\n * uppercase section header above the items. Sections WITHOUT a label still\n * group items together (use multiple unlabeled sections to get visual dividers\n * without headers).\n */\nexport interface MJLeftNavSection {\n  /** Optional uppercase header above the items in this section. */\n  label?: string;\n  /** The clickable items in this section. */\n  items: MJLeftNavItem[];\n}\n\n/**\n * `<mj-left-nav>` — Canonical left rail for MJ Explorer dashboards that have\n * an internal section-nav (Admin shells, KH Config, KH Analytics, AI Analytics,\n * Communication, Credentials, APIKeys, etc.).\n *\n * Replaces the bespoke `.{name}-nav` / `.{name}-nav-item` patterns each of\n * those dashboards used to declare in their own CSS files.\n *\n * Supports:\n *  - Plain items (icon + label)\n *  - Items with a muted secondary description line (Admin shells pattern)\n *  - Items with a count badge (APIKeys pattern)\n *  - Sections with uppercase headers (Communication / Credentials pattern)\n *  - Optional `[header]` and `[footer]` content slots (KH Config logo header, etc.)\n *  - Responsive collapse-to-row at narrow viewports (consumer controls parent's\n *    flex-direction switch; the rail's own styles handle item wrapping + the\n *    description-hide behavior)\n *\n * ## Example\n *\n * ```typescript\n * sections: MJLeftNavSection[] = [\n *   {\n *     items: [\n *       { id: 'users',  icon: 'fa-solid fa-users',         label: 'Users',  description: 'Manage user accounts' },\n *       { id: 'roles',  icon: 'fa-solid fa-user-shield',   label: 'Roles',  description: 'Define roles and assignments' },\n *     ]\n *   }\n * ];\n * activeId = 'users';\n * ```\n *\n * ```html\n * <mj-left-nav\n *   [Sections]=\"sections\"\n *   [ActiveId]=\"activeId\"\n *   (ItemClicked)=\"onItemClicked($event)\">\n * </mj-left-nav>\n * ```\n *\n * Responsive collapse — the rail's own CSS handles narrow-viewport item\n * wrapping. The consumer is responsible for switching the parent's\n * flex-direction from row → column at the same breakpoint, e.g. via\n * `<mj-page-body>` Direction=\"row\" with a `@media` override in the shell's CSS.\n */\n@Component({\n  selector: 'mj-left-nav',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    <aside class=\"mj-left-nav\" [style.width.px]=\"Width\" role=\"navigation\">\n      <ng-content select=\"[header]\"></ng-content>\n\n      @for (section of Sections; track $index) {\n        @if (section.label) {\n          <div class=\"mj-left-nav__section-label\">{{ section.label }}</div>\n        }\n        @for (item of section.items; track item.id) {\n          <ng-container\n            *ngTemplateOutlet=\"itemTpl; context: { item: item, depth: 0, hasExpandable: HasExpandableItems(section.items) }\">\n          </ng-container>\n        }\n      }\n\n      <ng-content select=\"[footer]\"></ng-content>\n    </aside>\n\n    <!-- Recursive item template — renders one item plus, when expanded,\n         its children indented by depth. The hasExpandable flag is computed\n         once per section and threaded through the recursion so leaf nodes\n         only reserve a chevron-column placeholder when a sibling actually\n         shows a chevron. -->\n    <ng-template #itemTpl let-item=\"item\" let-depth=\"depth\" let-hasExpandable=\"hasExpandable\">\n      @if (item.children !== undefined && hasExpandable) {\n        <!-- Tree row: chevron (when this node has children) or placeholder\n             (when a sibling has children but this leaf needs alignment). -->\n        <div\n          class=\"mj-left-nav__row\"\n          [style.padding-left.px]=\"depth * 14\">\n          @if (item.children.length > 0) {\n            <button\n              type=\"button\"\n              class=\"mj-left-nav__chevron\"\n              [attr.aria-label]=\"IsExpanded(item.id) ? 'Collapse' : 'Expand'\"\n              [attr.aria-expanded]=\"IsExpanded(item.id)\"\n              (click)=\"OnItemToggle($event, item)\">\n              <i class=\"fa-solid\"\n                 [class.fa-chevron-down]=\"IsExpanded(item.id)\"\n                 [class.fa-chevron-right]=\"!IsExpanded(item.id)\"\n                 aria-hidden=\"true\"></i>\n            </button>\n          } @else {\n            <span class=\"mj-left-nav__chevron-placeholder\" aria-hidden=\"true\"></span>\n          }\n          <ng-container\n            *ngTemplateOutlet=\"itemBtn; context: { item: item }\">\n          </ng-container>\n        </div>\n\n        @if (item.children.length > 0 && IsExpanded(item.id)) {\n          @for (child of item.children; track child.id) {\n            <ng-container\n              *ngTemplateOutlet=\"itemTpl; context: { item: child, depth: depth + 1, hasExpandable: hasExpandable }\">\n            </ng-container>\n          }\n        }\n      } @else {\n        <!-- Flat render: item.children is undefined, OR no sibling in this\n             section is actually expandable — render the button directly with\n             no chevron column reserved. -->\n        <ng-container\n          *ngTemplateOutlet=\"itemBtn; context: { item: item }\">\n        </ng-container>\n      }\n    </ng-template>\n\n    <!-- Item button — shared by both flat and tree rendering paths -->\n    <ng-template #itemBtn let-item=\"item\">\n      <button\n        type=\"button\"\n        class=\"mj-left-nav__item\"\n        [class.mj-left-nav__item--active]=\"item.id === ActiveId\"\n        [class.mj-left-nav__item--disabled]=\"item.disabled\"\n        [disabled]=\"item.disabled\"\n        [attr.aria-current]=\"item.id === ActiveId ? 'page' : null\"\n        (click)=\"OnItemClick(item)\">\n        @if (item.icon) {\n          <i class=\"mj-left-nav__icon\" [class]=\"item.icon\" aria-hidden=\"true\"></i>\n        }\n        <span class=\"mj-left-nav__text\">\n          <span class=\"mj-left-nav__label\">{{ item.label }}</span>\n          @if (item.description) {\n            <span class=\"mj-left-nav__description\">{{ item.description }}</span>\n          }\n        </span>\n        @if (item.badge != null) {\n          <span class=\"mj-left-nav__badge\">{{ item.badge }}</span>\n        }\n      </button>\n    </ng-template>\n  `,\n  styles: [`\n    :host {\n      display: block;\n      flex-shrink: 0;\n    }\n\n    .mj-left-nav {\n      height: 100%;\n      background: var(--mj-bg-surface);\n      border-right: 1px solid var(--mj-border-default);\n      overflow-y: auto;\n      padding: 8px;\n      box-sizing: border-box;\n    }\n\n    .mj-left-nav__section-label {\n      font-size: 11px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n      color: var(--mj-text-muted);\n      padding: 12px 12px 6px;\n    }\n\n    .mj-left-nav__section-label:first-child {\n      padding-top: 6px;\n    }\n\n    .mj-left-nav__item {\n      display: flex;\n      align-items: flex-start;\n      gap: 10px;\n      padding: 10px 12px;\n      width: 100%;\n      border: none;\n      background: transparent;\n      border-radius: 8px;\n      cursor: pointer;\n      transition: background-color 0.12s ease, color 0.12s ease;\n      margin-bottom: 2px;\n      font-family: inherit;\n      color: var(--mj-text-secondary);\n      text-align: left;\n    }\n\n    .mj-left-nav__item:hover:not(.mj-left-nav__item--disabled) {\n      background: var(--mj-bg-surface-hover);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-left-nav__item--active {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    .mj-left-nav__item--active:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n    }\n\n    .mj-left-nav__item--disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .mj-left-nav__icon {\n      width: 18px;\n      text-align: center;\n      font-size: 13px;\n      margin-top: 1px;\n      flex-shrink: 0;\n      color: inherit;\n    }\n\n    .mj-left-nav__text {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .mj-left-nav__label {\n      font-size: 13px;\n      font-weight: 500;\n      line-height: 1.2;\n    }\n\n    .mj-left-nav__description {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      margin-top: 3px;\n      line-height: 1.3;\n    }\n\n    .mj-left-nav__item--active .mj-left-nav__description {\n      color: color-mix(in srgb, var(--mj-brand-primary) 70%, var(--mj-text-muted));\n    }\n\n    .mj-left-nav__badge {\n      margin-left: auto;\n      font-size: 11px;\n      font-weight: 600;\n      padding: 2px 8px;\n      border-radius: 999px;\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-secondary);\n      align-self: center;\n    }\n\n    .mj-left-nav__item--active .mj-left-nav__badge {\n      background: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    /* ── Tree rendering ─────────────────────────────────────────────────────\n       Used when MJLeftNavItem.children is defined (even as an empty array).\n       The row wraps a chevron/placeholder + the item button so they sit on\n       one line, and depth-based padding-left is applied to the row (not the\n       item) so the chevron aligns with the depth column. */\n\n    .mj-left-nav__row {\n      display: flex;\n      align-items: stretch;\n      gap: 2px;\n    }\n\n    .mj-left-nav__row .mj-left-nav__item {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .mj-left-nav__chevron {\n      flex-shrink: 0;\n      width: 20px;\n      height: 32px;\n      align-self: center;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      border: none;\n      background: transparent;\n      border-radius: 4px;\n      cursor: pointer;\n      color: var(--mj-text-muted);\n      font-size: 10px;\n      padding: 0;\n      transition: background-color 0.12s ease, color 0.12s ease;\n      font-family: inherit;\n    }\n\n    .mj-left-nav__chevron:hover {\n      background: var(--mj-bg-surface-hover);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-left-nav__chevron-placeholder {\n      flex-shrink: 0;\n      width: 20px;\n      display: inline-block;\n    }\n\n    /* Responsive collapse: at narrow viewports the rail becomes a top bar of\n       wrapping items. The consumer is still responsible for switching the\n       parent's flex-direction from row → column (see <mj-page-body> Direction\n       + the shell's @media override). */\n    @media (max-width: 700px) {\n      :host {\n        width: 100% !important;\n      }\n      .mj-left-nav {\n        width: 100%;\n        height: auto;\n        max-height: 220px;\n        border-right: none;\n        border-bottom: 1px solid var(--mj-border-default);\n        display: flex;\n        flex-wrap: wrap;\n        gap: 4px;\n      }\n      .mj-left-nav__item {\n        flex: 1 1 calc(50% - 8px);\n        margin-bottom: 0;\n      }\n      .mj-left-nav__description {\n        display: none;\n      }\n      .mj-left-nav__section-label {\n        flex-basis: 100%;\n      }\n      /* Tree rows take a full line even in the wrap layout — chevron + item\n         should stay paired rather than flow as separate flex children. */\n      .mj-left-nav__row {\n        flex-basis: 100%;\n        padding-left: 0 !important;\n      }\n    }\n  `]\n})\nexport class MJLeftNavComponent {\n  /**\n   * The sections + items that make up the rail. Sections render top-to-bottom\n   * in array order; items inside each section render in array order.\n   */\n  @Input() Sections: MJLeftNavSection[] = [];\n\n  /**\n   * The id of the currently active item. Items matching this id get the\n   * active styling and `aria-current=\"page\"`.\n   */\n  @Input() ActiveId: string | null = null;\n\n  /**\n   * Width of the rail in pixels. Defaults to 240. Set to a smaller value\n   * (e.g., 200) for denser shells.\n   */\n  @Input() Width: number = 240;\n\n  /**\n   * Ids of currently-expanded tree items. Items whose id appears here render\n   * with a down-chevron and their `children` are visible; items not in this\n   * list render with a right-chevron and their children stay collapsed.\n   * Consumer owns the state — toggle in response to `(ItemToggled)`.\n   *\n   * Only applies to items where `children !== undefined`; flat items ignore it.\n   */\n  @Input() ExpandedIds: string[] = [];\n\n  /**\n   * Emitted when a non-disabled item is clicked.\n   */\n  @Output() ItemClicked = new EventEmitter<MJLeftNavItem>();\n\n  /**\n   * Emitted when a tree item's chevron is clicked. Consumer should toggle\n   * the item's id in / out of `ExpandedIds`. Does NOT also fire `ItemClicked`.\n   */\n  @Output() ItemToggled = new EventEmitter<MJLeftNavItem>();\n\n  OnItemClick(item: MJLeftNavItem): void {\n    if (item.disabled) return;\n    this.ItemClicked.emit(item);\n  }\n\n  OnItemToggle(event: Event, item: MJLeftNavItem): void {\n    event.stopPropagation();\n    this.ItemToggled.emit(item);\n  }\n\n  IsExpanded(id: string): boolean {\n    return this.ExpandedIds.indexOf(id) >= 0;\n  }\n\n  /**\n   * Whether any top-level item in this section actually has children to expand.\n   * The template calls this once per section; the result is threaded through\n   * the recursive itemTpl so leaf nodes only reserve a chevron-column\n   * placeholder when a sibling will actually render a chevron.\n   *\n   * Top-level check is sufficient — if a deeply-nested item has children, its\n   * parent's `children.length > 0` already qualifies the section as expandable.\n   */\n  HasExpandableItems(items: MJLeftNavItem[]): boolean {\n    for (const item of items) {\n      if (item.children && item.children.length > 0) return true;\n    }\n    return false;\n  }\n}\n"]}

package/dist/lib/page-body/page-body.component.d.ts

@@ -0,0 +1,56 @@
+import * as i0 from "@angular/core";
+/**
+ * mj-page-body — Standard body region for MJ Explorer dashboards / resource pages.
+ *
+ * Sits inside `<mj-page-layout>` after `<mj-page-header>`. Provides the canonical
+ * page body recipe: `flex: 1`, `min-height: 0`, padded gutters, vertical scroll.
+ *
+ * Escape hatches:
+ *  - `[Padding]="false"` — remove the 24px gutter (e.g., pages whose inner
+ *    content owns the gutter itself, like File Browser or AI Analytics shell).
+ *  - `[Flex]="true"` — switch the body to `flex; flex-direction: column;
+ *    position: relative` so a child marked `flex: 1` (e.g., a main content area
+ *    that should fill remaining height under a banner row) can grow correctly.
+ *
+ * Note: overflow-y is intentionally always `auto` and not configurable.
+ * `mj-page-layout` already has `overflow: hidden`, so any body content that
+ * exceeds the visible area would be silently clipped if the body itself didn't
+ * scroll. Pages with split-pane layouts whose children manage their own scroll
+ * regions should use `min-height: 0 + flex: 1` on the inner panes so nothing
+ * overflows the body — auto stays harmlessly inactive.
+ *
+ * Example:
+ * ```html
+ * <mj-page-layout>
+ *   <mj-page-header Title="Jobs" Icon="fa-solid fa-calendar-check"></mj-page-header>
+ *   <mj-page-body>
+ *     <!-- page content -->
+ *   </mj-page-body>
+ * </mj-page-layout>
+ * ```
+ */
+export declare class MJPageBodyComponent {
+    /** When `false`, removes the default 24px gutter. Defaults to `true`. */
+    Padding: boolean;
+    /**
+     * When `true`, switches the body to flex layout (with `position: relative`)
+     * so a child marked `flex: 1` can fill the remaining vertical space — e.g., a main
+     * content area sitting under a banner row. Defaults to `false` (block flow).
+     *
+     * Combine with `Direction="row"` to lay out children left-to-right (rail + content).
+     */
+    Flex: boolean;
+    /**
+     * When `Flex=true`, controls the flex direction. `'column'` (default) stacks
+     * children vertically. `'row'` lays them out left-to-right, useful for
+     * left-rail + content shells (Admin's `admin-container`, KH Config, etc.).
+     * Ignored when `Flex=false`.
+     */
+    Direction: 'row' | 'column';
+    get NoPaddingClass(): boolean;
+    get FlexClass(): boolean;
+    get RowClass(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJPageBodyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJPageBodyComponent, "mj-page-body", never, { "Padding": { "alias": "Padding"; "required": false; }; "Flex": { "alias": "Flex"; "required": false; }; "Direction": { "alias": "Direction"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=page-body.component.d.ts.map

package/dist/lib/page-body/page-body.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-body.component.d.ts","sourceRoot":"","sources":["../../../src/lib/page-body/page-body.component.ts"],"names":[],"mappings":";AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBAgCa,mBAAmB;IAC9B,yEAAyE;IAChE,OAAO,EAAE,OAAO,CAAQ;IAEjC;;;;;;OAMG;IACM,IAAI,EAAE,OAAO,CAAS;IAE/B;;;;;OAKG;IACM,SAAS,EAAE,KAAK,GAAG,QAAQ,CAAY;IAEhD,IACI,cAAc,IAAI,OAAO,CAE5B;IAED,IACI,SAAS,IAAI,OAAO,CAEvB;IAED,IACI,QAAQ,IAAI,OAAO,CAEtB;yCAlCU,mBAAmB;2CAAnB,mBAAmB;CAmC/B"}

package/dist/lib/page-body/page-body.component.js

@@ -0,0 +1,89 @@
+import { Component, HostBinding, Input } from '@angular/core';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * mj-page-body — Standard body region for MJ Explorer dashboards / resource pages.
+ *
+ * Sits inside `<mj-page-layout>` after `<mj-page-header>`. Provides the canonical
+ * page body recipe: `flex: 1`, `min-height: 0`, padded gutters, vertical scroll.
+ *
+ * Escape hatches:
+ *  - `[Padding]="false"` — remove the 24px gutter (e.g., pages whose inner
+ *    content owns the gutter itself, like File Browser or AI Analytics shell).
+ *  - `[Flex]="true"` — switch the body to `flex; flex-direction: column;
+ *    position: relative` so a child marked `flex: 1` (e.g., a main content area
+ *    that should fill remaining height under a banner row) can grow correctly.
+ *
+ * Note: overflow-y is intentionally always `auto` and not configurable.
+ * `mj-page-layout` already has `overflow: hidden`, so any body content that
+ * exceeds the visible area would be silently clipped if the body itself didn't
+ * scroll. Pages with split-pane layouts whose children manage their own scroll
+ * regions should use `min-height: 0 + flex: 1` on the inner panes so nothing
+ * overflows the body — auto stays harmlessly inactive.
+ *
+ * Example:
+ * ```html
+ * <mj-page-layout>
+ *   <mj-page-header Title="Jobs" Icon="fa-solid fa-calendar-check"></mj-page-header>
+ *   <mj-page-body>
+ *     <!-- page content -->
+ *   </mj-page-body>
+ * </mj-page-layout>
+ * ```
+ */
+export class MJPageBodyComponent {
+    /** When `false`, removes the default 24px gutter. Defaults to `true`. */
+    Padding = true;
+    /**
+     * When `true`, switches the body to flex layout (with `position: relative`)
+     * so a child marked `flex: 1` can fill the remaining vertical space — e.g., a main
+     * content area sitting under a banner row. Defaults to `false` (block flow).
+     *
+     * Combine with `Direction="row"` to lay out children left-to-right (rail + content).
+     */
+    Flex = false;
+    /**
+     * When `Flex=true`, controls the flex direction. `'column'` (default) stacks
+     * children vertically. `'row'` lays them out left-to-right, useful for
+     * left-rail + content shells (Admin's `admin-container`, KH Config, etc.).
+     * Ignored when `Flex=false`.
+     */
+    Direction = 'column';
+    get NoPaddingClass() {
+        return !this.Padding;
+    }
+    get FlexClass() {
+        return this.Flex;
+    }
+    get RowClass() {
+        return this.Flex && this.Direction === 'row';
+    }
+    static ɵfac = function MJPageBodyComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJPageBodyComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJPageBodyComponent, selectors: [["mj-page-body"]], hostVars: 6, hostBindings: function MJPageBodyComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵclassProp("mj-page-body--no-padding", ctx.NoPaddingClass)("mj-page-body--flex", ctx.FlexClass)("mj-page-body--row", ctx.RowClass);
+        } }, inputs: { Padding: "Padding", Flex: "Flex", Direction: "Direction" }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function MJPageBodyComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, styles: ["[_nghost-%COMP%] {\n      display: block;\n      flex: 1;\n      min-height: 0;\n      \n\n\n\n      padding: var(--mj-space-6);\n      overflow-y: auto;\n    }\n    .mj-page-body--no-padding[_nghost-%COMP%] {\n      padding: 0;\n    }\n    .mj-page-body--flex[_nghost-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      position: relative;\n    }\n    \n\n\n\n\n    .mj-page-body--flex.mj-page-body--row[_nghost-%COMP%] {\n      flex-direction: row;\n    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJPageBodyComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-page-body', standalone: true, template: `<ng-content></ng-content>`, styles: ["\n    :host {\n      display: block;\n      flex: 1;\n      min-height: 0;\n      /* Top padding doubles as header-to-body spacing \u2014 <mj-page-header>\n         intentionally has no margin-bottom so [Padding]=\"false\" yields a\n         truly flush layout (e.g. AI Analytics sidebar+content). */\n      padding: var(--mj-space-6);\n      overflow-y: auto;\n    }\n    :host(.mj-page-body--no-padding) {\n      padding: 0;\n    }\n    :host(.mj-page-body--flex) {\n      display: flex;\n      flex-direction: column;\n      position: relative;\n    }\n    /* Direction=\"row\" \u2014 switch flex direction when [Flex]=\"true\". Used by\n       shells whose body is a left-rail + content layout (Admin shells, KH\n       Config, AI Analytics). Replaces the bespoke per-shell-container body\n       grid/flex wrapper that every shell used to declare. */\n    :host(.mj-page-body--flex.mj-page-body--row) {\n      flex-direction: row;\n    }\n  "] }]
+    }], null, { Padding: [{
+            type: Input
+        }], Flex: [{
+            type: Input
+        }], Direction: [{
+            type: Input
+        }], NoPaddingClass: [{
+            type: HostBinding,
+            args: ['class.mj-page-body--no-padding']
+        }], FlexClass: [{
+            type: HostBinding,
+            args: ['class.mj-page-body--flex']
+        }], RowClass: [{
+            type: HostBinding,
+            args: ['class.mj-page-body--row']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJPageBodyComponent, { className: "MJPageBodyComponent", filePath: "lib/page-body/page-body.component.ts", lineNumber: 65 }); })();
+//# sourceMappingURL=page-body.component.js.map

package/dist/lib/page-body/page-body.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-body.component.js","sourceRoot":"","sources":["../../../src/lib/page-body/page-body.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;;;AAE9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAiCH,MAAM,OAAO,mBAAmB;IAC9B,yEAAyE;IAChE,OAAO,GAAY,IAAI,CAAC;IAEjC;;;;;;OAMG;IACM,IAAI,GAAY,KAAK,CAAC;IAE/B;;;;;OAKG;IACM,SAAS,GAAqB,QAAQ,CAAC;IAEhD,IACI,cAAc;QAChB,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;IACvB,CAAC;IAED,IACI,SAAS;QACX,OAAO,IAAI,CAAC,IAAI,CAAC;IACnB,CAAC;IAED,IACI,QAAQ;QACV,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,CAAC;IAC/C,CAAC;6GAlCU,mBAAmB;6DAAnB,mBAAmB;YAAnB,8DAAmB,qCAAA,mCAAA;;;YA7BnB,kBAAyB;;;iFA6BzB,mBAAmB;cAhC/B,SAAS;2BACE,cAAc,cACZ,IAAI,YACN,2BAA2B;;kBA+BpC,KAAK;;kBASL,KAAK;;kBAQL,KAAK;;kBAEL,WAAW;mBAAC,gCAAgC;;kBAK5C,WAAW;mBAAC,0BAA0B;;kBAKtC,WAAW;mBAAC,yBAAyB;;kFA/B3B,mBAAmB","sourcesContent":["import { Component, HostBinding, Input } from '@angular/core';\n\n/**\n * mj-page-body — Standard body region for MJ Explorer dashboards / resource pages.\n *\n * Sits inside `<mj-page-layout>` after `<mj-page-header>`. Provides the canonical\n * page body recipe: `flex: 1`, `min-height: 0`, padded gutters, vertical scroll.\n *\n * Escape hatches:\n *  - `[Padding]=\"false\"` — remove the 24px gutter (e.g., pages whose inner\n *    content owns the gutter itself, like File Browser or AI Analytics shell).\n *  - `[Flex]=\"true\"` — switch the body to `flex; flex-direction: column;\n *    position: relative` so a child marked `flex: 1` (e.g., a main content area\n *    that should fill remaining height under a banner row) can grow correctly.\n *\n * Note: overflow-y is intentionally always `auto` and not configurable.\n * `mj-page-layout` already has `overflow: hidden`, so any body content that\n * exceeds the visible area would be silently clipped if the body itself didn't\n * scroll. Pages with split-pane layouts whose children manage their own scroll\n * regions should use `min-height: 0 + flex: 1` on the inner panes so nothing\n * overflows the body — auto stays harmlessly inactive.\n *\n * Example:\n * ```html\n * <mj-page-layout>\n *   <mj-page-header Title=\"Jobs\" Icon=\"fa-solid fa-calendar-check\"></mj-page-header>\n *   <mj-page-body>\n *     <!-- page content -->\n *   </mj-page-body>\n * </mj-page-layout>\n * ```\n */\n@Component({\n  selector: 'mj-page-body',\n  standalone: true,\n  template: `<ng-content></ng-content>`,\n  styles: [`\n    :host {\n      display: block;\n      flex: 1;\n      min-height: 0;\n      /* Top padding doubles as header-to-body spacing — <mj-page-header>\n         intentionally has no margin-bottom so [Padding]=\"false\" yields a\n         truly flush layout (e.g. AI Analytics sidebar+content). */\n      padding: var(--mj-space-6);\n      overflow-y: auto;\n    }\n    :host(.mj-page-body--no-padding) {\n      padding: 0;\n    }\n    :host(.mj-page-body--flex) {\n      display: flex;\n      flex-direction: column;\n      position: relative;\n    }\n    /* Direction=\"row\" — switch flex direction when [Flex]=\"true\". Used by\n       shells whose body is a left-rail + content layout (Admin shells, KH\n       Config, AI Analytics). Replaces the bespoke per-shell-container body\n       grid/flex wrapper that every shell used to declare. */\n    :host(.mj-page-body--flex.mj-page-body--row) {\n      flex-direction: row;\n    }\n  `]\n})\nexport class MJPageBodyComponent {\n  /** When `false`, removes the default 24px gutter. Defaults to `true`. */\n  @Input() Padding: boolean = true;\n\n  /**\n   * When `true`, switches the body to flex layout (with `position: relative`)\n   * so a child marked `flex: 1` can fill the remaining vertical space — e.g., a main\n   * content area sitting under a banner row. Defaults to `false` (block flow).\n   *\n   * Combine with `Direction=\"row\"` to lay out children left-to-right (rail + content).\n   */\n  @Input() Flex: boolean = false;\n\n  /**\n   * When `Flex=true`, controls the flex direction. `'column'` (default) stacks\n   * children vertically. `'row'` lays them out left-to-right, useful for\n   * left-rail + content shells (Admin's `admin-container`, KH Config, etc.).\n   * Ignored when `Flex=false`.\n   */\n  @Input() Direction: 'row' | 'column' = 'column';\n\n  @HostBinding('class.mj-page-body--no-padding')\n  get NoPaddingClass(): boolean {\n    return !this.Padding;\n  }\n\n  @HostBinding('class.mj-page-body--flex')\n  get FlexClass(): boolean {\n    return this.Flex;\n  }\n\n  @HostBinding('class.mj-page-body--row')\n  get RowClass(): boolean {\n    return this.Flex && this.Direction === 'row';\n  }\n}\n"]}