@memberjunction/ng-explorer-core 5.49.0 → 5.50.0

package/dist/lib/shell/components/header/app-nav.component.js

@@ -1,17 +1,24 @@
-import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ViewChild, HostListener } from '@angular/core';
 import { Subject, takeUntil } from 'rxjs';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-base-application";
 import * as i2 from "@memberjunction/ng-shared";
 import * as i3 from "@memberjunction/ng-ui-components";
-function AppNavComponent_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+const _c0 = ["navList"];
+const _c1 = ["moreBtn"];
+function AppNavComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 3);
+    i0.ɵɵelement(1, "span", 7)(2, "span", 8)(3, "span", 9);
+    i0.ɵɵelementEnd();
+} }
+function AppNavComponent_For_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i");
 } if (rf & 2) {
     const item_r2 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵclassMap(item_r2.Icon);
 } }
-function AppNavComponent_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 4);
+function AppNavComponent_For_4_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 12);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -19,23 +26,23 @@ function AppNavComponent_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(item_r2.Badge);
 } }
-function AppNavComponent_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function AppNavComponent_For_4_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 6);
-    i0.ɵɵlistener("click", function AppNavComponent_For_2_Conditional_5_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r4); const item_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDismiss(item_r2, $event)); });
-    i0.ɵɵelement(1, "i", 7);
+    i0.ɵɵelementStart(0, "button", 14);
+    i0.ɵɵlistener("click", function AppNavComponent_For_4_Conditional_5_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r4); const item_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDismiss(item_r2, $event)); });
+    i0.ɵɵelement(1, "i", 15);
     i0.ɵɵelementEnd();
 } }
-function AppNavComponent_For_2_Template(rf, ctx) { if (rf & 1) {
+function AppNavComponent_For_4_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵlistener("click", function AppNavComponent_For_2_Template_div_click_0_listener($event) { const item_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onNavClick(item_r2, $event)); });
-    i0.ɵɵconditionalCreate(1, AppNavComponent_For_2_Conditional_1_Template, 1, 2, "i", 3);
+    i0.ɵɵelementStart(0, "div", 10);
+    i0.ɵɵlistener("click", function AppNavComponent_For_4_Template_div_click_0_listener($event) { const item_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onNavClick(item_r2, $event)); });
+    i0.ɵɵconditionalCreate(1, AppNavComponent_For_4_Conditional_1_Template, 1, 2, "i", 11);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, AppNavComponent_For_2_Conditional_4_Template, 2, 1, "span", 4);
-    i0.ɵɵconditionalCreate(5, AppNavComponent_For_2_Conditional_5_Template, 2, 0, "button", 5);
+    i0.ɵɵconditionalCreate(4, AppNavComponent_For_4_Conditional_4_Template, 2, 1, "span", 12);
+    i0.ɵɵconditionalCreate(5, AppNavComponent_For_4_Conditional_5_Template, 2, 0, "button", 13);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const item_r2 = ctx.$implicit;
@@ -52,18 +59,100 @@ function AppNavComponent_For_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.isDynamic(item_r2) ? 5 : -1);
 } }
+function AppNavComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 16, 1);
+    i0.ɵɵlistener("click", function AppNavComponent_Conditional_5_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ToggleMore($event)); });
+    i0.ɵɵelement(2, "i", 17);
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4, "More");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 18);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("active", ctx_r2.OverflowHasActive);
+    i0.ɵɵattribute("aria-haspopup", true)("aria-expanded", ctx_r2.MoreOpen);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r2.OverflowItems.length);
+} }
+function AppNavComponent_Conditional_6_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i");
+} if (rf & 2) {
+    const item_r7 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassMap(item_r7.Icon);
+} }
+function AppNavComponent_Conditional_6_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 12);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r7 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(item_r7.Badge);
+} }
+function AppNavComponent_Conditional_6_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 14);
+    i0.ɵɵlistener("click", function AppNavComponent_Conditional_6_For_2_Conditional_5_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r8); const item_r7 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onDismiss(item_r7, $event)); });
+    i0.ɵɵelement(1, "i", 15);
+    i0.ɵɵelementEnd();
+} }
+function AppNavComponent_Conditional_6_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 21);
+    i0.ɵɵlistener("click", function AppNavComponent_Conditional_6_For_2_Template_div_click_0_listener($event) { const item_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onNavClick(item_r7, $event)); });
+    i0.ɵɵconditionalCreate(1, AppNavComponent_Conditional_6_For_2_Conditional_1_Template, 1, 2, "i", 11);
+    i0.ɵɵelementStart(2, "span", 22);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, AppNavComponent_Conditional_6_For_2_Conditional_4_Template, 2, 1, "span", 12);
+    i0.ɵɵconditionalCreate(5, AppNavComponent_Conditional_6_For_2_Conditional_5_Template, 2, 0, "button", 13);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r7 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("active", ctx_r2.isActive(item_r7))("dynamic", ctx_r2.isDynamic(item_r7));
+    i0.ɵɵproperty("mjClickable", item_r7.Label)("testId", "nav-more-item-" + item_r7.Label);
+    i0.ɵɵattribute("aria-current", ctx_r2.isActive(item_r7) ? "page" : null);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r7.Icon ? 1 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(item_r7.Label);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r7.Badge ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.isDynamic(item_r7) ? 5 : -1);
+} }
+function AppNavComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 19);
+    i0.ɵɵrepeaterCreate(1, AppNavComponent_Conditional_6_For_2_Template, 6, 11, "div", 20, i0.ɵɵcomponentInstance().trackByNavItem, true);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("left", ctx_r2.MoreDropdownLeft, "px");
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.OverflowItems);
+} }
 /**
  * Horizontal navigation items for the current app.
  * Uses OnPush change detection and reactive state management for optimal performance.
+ *
+ * Overflow behavior (priority+ pattern): when the header can't fit every nav item,
+ * trailing items collapse into a "More" dropdown instead of squeezing the header's
+ * action cluster off-screen. Item widths are measured once per nav-items change
+ * (all items render for one frame, widths are cached), then every resize recomputes
+ * the fit from the cache — no re-measure, no layout thrash.
  */
 export class AppNavComponent {
     workspaceManager;
     sharedService;
     cdr;
+    host;
     destroy$ = new Subject();
     _app = null;
     _cachedNavItems = [];
-    _cachedAppColor = 'var(--mj-brand-primary)';
     _servicesInjected = false;
     /**
      * Monotonically increasing counter used to detect and discard stale async results.
@@ -82,12 +171,49 @@ export class AppNavComponent {
     _updateGeneration = 0;
     // Map of nav item key (Route or Label) to active state
     activeStateMap = new Map();
+    // ---- Overflow (priority+) state ----
+    /** Cached natural pixel width of each nav item, parallel to navItems order */
+    itemWidths = [];
+    /** Measured width of the More button (fallback used until first render) */
+    moreBtnWidth = 120;
+    /** Left offset (px, relative to host) where the More dropdown anchors */
+    MoreDropdownLeft = 0;
+    /** True when even one item + More can't fit — the lone visible pill
+     *  shrinks with an ellipsis instead of clipping the More button. */
+    Tight = false;
+    /** Flex gap between nav items — measured from the rendered row (falls back
+     *  to --mj-space-1's default of 4px until first measurement) */
+    itemGap = 4;
+    /** How many leading nav items are currently visible inline */
+    VisibleCount = Number.MAX_SAFE_INTEGER;
+    /** Whether the More dropdown is open */
+    MoreOpen = false;
+    /** True while nav items are being (re)loaded for skeleton display */
+    Loading = false;
+    resizeObserver = null;
+    _overflowEnabled = true;
+    navListRef;
+    moreBtnRef;
     navItemClick = new EventEmitter();
     navItemDismiss = new EventEmitter();
-    constructor(workspaceManager, sharedService, cdr) {
+    /**
+     * Disable the priority+ overflow behavior. Used by the mobile drawer instance,
+     * where items stack vertically and can never overflow horizontally.
+     */
+    set OverflowEnabled(value) {
+        this._overflowEnabled = value;
+        if (!value) {
+            this.VisibleCount = Number.MAX_SAFE_INTEGER;
+        }
+    }
+    get OverflowEnabled() {
+        return this._overflowEnabled;
+    }
+    constructor(workspaceManager, sharedService, cdr, host) {
         this.workspaceManager = workspaceManager;
         this.sharedService = sharedService;
         this.cdr = cdr;
+        this.host = host;
     }
     /**
      * Input setter for app - triggers cache update when app changes
@@ -98,6 +224,7 @@ export class AppNavComponent {
             this._cachedNavItems = []; // Clear stale items immediately so previous app's items don't flash
             this.activeStateMap.clear();
             this._servicesInjected = false; // Reset injection flag
+            this.Loading = value != null; // Skeleton until GetNavItems resolves
             this.updateCachedData();
             this.cdr.markForCheck();
         }
@@ -117,7 +244,23 @@ export class AppNavComponent {
             await this.updateCachedData();
         });
     }
+    ngAfterViewInit() {
+        if (this._overflowEnabled && typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => this.recomputeFit());
+            this.resizeObserver.observe(this.host.nativeElement);
+        }
+        // Widths measured before webfonts arrive are stale (Explorer's Montserrat
+        // loads late over the fallback stack) — invalidate the cache once fonts
+        // settle so the fit is computed against real glyph metrics.
+        if (this._overflowEnabled && typeof document !== 'undefined' && document.fonts?.ready) {
+            document.fonts.ready.then(() => {
+                this.itemWidths = [];
+                this.recomputeFit();
+            });
+        }
+    }
     ngOnDestroy() {
+        this.resizeObserver?.disconnect();
         this.destroy$.next();
         this.destroy$.complete();
     }
@@ -148,27 +291,197 @@ export class AppNavComponent {
             }
             // Only show items with Status 'Active' or undefined (default to Active)
             this._cachedNavItems = items.filter(item => !item.Status || item.Status === 'Active');
-            this._cachedAppColor = this._app.GetColor() || 'var(--mj-brand-primary)';
         }
         else {
             this._cachedNavItems = [];
-            this._cachedAppColor = 'var(--mj-brand-primary)';
         }
+        this.Loading = false;
         // Update active states after nav items change
         const config = this.workspaceManager.GetConfiguration();
         this.updateActiveStates(config);
+        // New item set: show everything for one frame so natural widths can be
+        // measured (the row clips, so the temporary full row is invisible),
+        // then collapse to fit. Tight mode MUST be off during measurement — its
+        // flex-shrink would record squeezed widths and poison the fit arithmetic.
+        this.VisibleCount = Number.MAX_SAFE_INTEGER;
+        this.MoreOpen = false;
+        this.Tight = false;
+        this.syncChangeDetection();
+        if (this._overflowEnabled) {
+            requestAnimationFrame(() => {
+                this.measureItemWidths();
+                this.recomputeFit();
+            });
+        }
+    }
+    /**
+     * Cache the natural width of every nav item. Called in the frame after a new
+     * item set renders (all items visible, flex-shrink: 0, so widths are natural
+     * even if the row is clipped by overflow: hidden).
+     */
+    measureItemWidths() {
+        const list = this.navListRef?.nativeElement;
+        if (!list) {
+            return;
+        }
+        const els = Array.from(list.querySelectorAll('.nav-item:not(.nav-more-btn)'));
+        if (els.length !== this._cachedNavItems.length) {
+            return; // View out of sync (mid-CD) — the next update cycle re-measures
+        }
+        this.itemWidths = els.map(el => el.offsetWidth);
+        // Measure the real flex gap (rem-based tokens can differ from the 4px
+        // fallback if the root font-size changes)
+        const gap = parseFloat(getComputedStyle(list).columnGap);
+        if (!Number.isNaN(gap)) {
+            this.itemGap = gap;
+        }
+    }
+    /**
+     * Decide how many items fit in the host's current width; the rest collapse
+     * into the More dropdown. Pure arithmetic over cached widths — safe to call
+     * on every resize.
+     */
+    recomputeFit() {
+        if (!this._overflowEnabled || this._cachedNavItems.length === 0) {
+            return;
+        }
+        const hostWidth = this.host.nativeElement.clientWidth;
+        if (hostWidth === 0) {
+            return; // Hidden (mobile breakpoint) — leave state alone
+        }
+        if (!this.ensureFreshWidthCache()) {
+            return; // Cache still stale — a retry frame is already scheduled
+        }
+        if (this.moreBtnRef?.nativeElement) {
+            this.moreBtnWidth = this.moreBtnRef.nativeElement.offsetWidth || this.moreBtnWidth;
+        }
+        const fit = this.computeFitCount(hostWidth);
+        this.applyFit(fit.count, fit.tight);
+    }
+    /**
+     * Self-heal for the item-width cache: if it's stale or missing (the
+     * measurement frame can race the first render after a reload/app switch),
+     * expand to the full item set, re-measure, and retry next frame until it
+     * converges. Returns true when the cache matches the current item set.
+     */
+    ensureFreshWidthCache() {
+        if (this.itemWidths.length === this._cachedNavItems.length) {
+            return true;
+        }
+        if (this.VisibleCount < this._cachedNavItems.length || this.Tight) {
+            this.VisibleCount = Number.MAX_SAFE_INTEGER;
+            this.Tight = false; // Never measure with tight-mode shrink applied
+            this.syncChangeDetection();
+        }
+        this.measureItemWidths();
+        if (this.itemWidths.length !== this._cachedNavItems.length) {
+            requestAnimationFrame(() => this.recomputeFit());
+            return false;
+        }
+        return true;
+    }
+    /** Pure fit arithmetic: how many leading items fit beside the More button */
+    computeFitCount(hostWidth) {
+        const gap = this.itemGap;
+        const n = this.itemWidths.length;
+        const totalAll = this.itemWidths.reduce((a, b) => a + b, 0) + gap * (n - 1);
+        if (totalAll <= hostWidth) {
+            return { count: Number.MAX_SAFE_INTEGER, tight: false }; // Everything fits
+        }
+        // Reserve room for the More button, then fit as many leading items as possible
+        let used = this.moreBtnWidth;
+        let fit = 0;
+        for (let i = 0; i < n; i++) {
+            const next = used + gap + this.itemWidths[i];
+            if (next > hostWidth) {
+                break;
+            }
+            used = next;
+            fit++;
+        }
+        // Never collapse below one visible item; tight = even the lone item + More overflows
+        return { count: Math.max(1, fit), tight: fit === 0 };
+    }
+    /** Commit a fit result, closing More if nothing overflows; CD only on change */
+    applyFit(count, tight) {
+        if (count === this.VisibleCount && tight === this.Tight) {
+            return;
+        }
+        this.VisibleCount = count;
+        this.Tight = tight;
+        if (this.OverflowItems.length === 0) {
+            this.MoreOpen = false;
+        }
+        this.syncChangeDetection();
+    }
+    /**
+     * markForCheck + synchronous detectChanges. In Angular 21 zoneless mode,
+     * markForCheck() alone is unreliable when the trigger is an RxJS
+     * subscription or rAF callback not tracked by the zoneless scheduler — the
+     * dirty flag is set but no follow-up tick is scheduled. detectChanges()
+     * throws if invoked re-entrantly during an in-flight CD pass; that's
+     * harmless (the in-flight pass picks up our markForCheck), hence the catch.
+     */
+    syncChangeDetection() {
         this.cdr.markForCheck();
-        // In Angular 21 zoneless mode, markForCheck() alone is unreliable when the trigger
-        // is an RxJS subscription (workspaceManager.Configuration here) not tracked by the
-        // zoneless scheduler — the dirty flag is set but no follow-up tick is scheduled.
-        // detectChanges() runs CD synchronously on this view, rendering the new data
-        // immediately. Wrapped because detectChanges throws if invoked re-entrantly during
-        // another in-flight CD pass — harmless if so.
         try {
             this.cdr.detectChanges();
         }
         catch {
-            // Re-entrant CD — harmless, the in-flight pass picks up our markForCheck.
+            // Re-entrant CD — harmless.
+        }
+    }
+    /** Items rendered inline in the header row */
+    get InlineItems() {
+        return this._cachedNavItems.slice(0, this.VisibleCount);
+    }
+    /** Items collapsed into the More dropdown */
+    get OverflowItems() {
+        return this.VisibleCount >= this._cachedNavItems.length
+            ? []
+            : this._cachedNavItems.slice(this.VisibleCount);
+    }
+    /** True when any overflowed item is the active one (More button shows active tint) */
+    get OverflowHasActive() {
+        return this.OverflowItems.some(item => this.isActive(item));
+    }
+    /** Open/close the More dropdown, anchoring it under the More button and clamping it inside the host */
+    ToggleMore(event) {
+        event.stopPropagation();
+        this.MoreOpen = !this.MoreOpen;
+        if (this.MoreOpen) {
+            // Anchor the dropdown under the More button; once the dropdown has
+            // rendered, clamp it so its right edge stays inside the host.
+            this.MoreDropdownLeft = this.moreBtnRef?.nativeElement?.offsetLeft ?? 0;
+            requestAnimationFrame(() => {
+                const dropdown = this.host.nativeElement.querySelector('.nav-more-dropdown');
+                if (dropdown) {
+                    const maxLeft = this.host.nativeElement.clientWidth - dropdown.offsetWidth;
+                    this.MoreDropdownLeft = Math.max(0, Math.min(this.MoreDropdownLeft, maxLeft));
+                    this.cdr.markForCheck();
+                    try {
+                        this.cdr.detectChanges();
+                    }
+                    catch {
+                        // Re-entrant CD — harmless.
+                    }
+                }
+            });
+        }
+        this.cdr.markForCheck();
+    }
+    /** Close the More dropdown on any outside click or Escape */
+    onDocumentClick(event) {
+        if (this.MoreOpen && !this.host.nativeElement.contains(event.target)) {
+            this.MoreOpen = false;
+            this.cdr.markForCheck();
+        }
+    }
+    /** Close the More dropdown on Escape */
+    onEscape() {
+        if (this.MoreOpen) {
+            this.MoreOpen = false;
+            this.cdr.markForCheck();
         }
     }
     /**
@@ -237,12 +550,6 @@ export class AppNavComponent {
     get navItems() {
         return this._cachedNavItems;
     }
-    /**
-     * Get cached app color (no computation in getter)
-     */
-    get appColor() {
-        return this._cachedAppColor;
-    }
     /**
      * Check if nav item is active (uses cached state from Map)
      */
@@ -260,6 +567,7 @@ export class AppNavComponent {
      * Handle nav item click
      */
     onNavClick(item, event) {
+        this.MoreOpen = false;
         this.navItemClick.emit({
             item,
             shiftKey: event?.shiftKey || false
@@ -282,26 +590,57 @@ export class AppNavComponent {
         }
         this.navItemDismiss.emit(item);
     }
-    static ɵfac = function AppNavComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AppNavComponent)(i0.ɵɵdirectiveInject(i1.WorkspaceStateManager), i0.ɵɵdirectiveInject(i2.SharedService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AppNavComponent, selectors: [["mj-app-nav"]], inputs: { app: "app" }, outputs: { navItemClick: "navItemClick", navItemDismiss: "navItemDismiss" }, standalone: false, decls: 3, vars: 2, consts: [[1, "nav-list"], ["role", "link", 1, "nav-item", 3, "mjClickable", "testId", "active", "dynamic", "no-icon"], ["role", "link", 1, "nav-item", 3, "click", "mjClickable", "testId"], [3, "class"], [1, "badge"], ["title", "Remove", 1, "dismiss-btn"], ["title", "Remove", 1, "dismiss-btn", 3, "click"], [1, "fa-solid", "fa-xmark"]], template: function AppNavComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "nav", 0);
-            i0.ɵɵrepeaterCreate(1, AppNavComponent_For_2_Template, 6, 13, "div", 1, ctx.trackByNavItem, true);
+    static ɵfac = function AppNavComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AppNavComponent)(i0.ɵɵdirectiveInject(i1.WorkspaceStateManager), i0.ɵɵdirectiveInject(i2.SharedService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ElementRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AppNavComponent, selectors: [["mj-app-nav"]], viewQuery: function AppNavComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5)(_c1, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.navListRef = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.moreBtnRef = _t.first);
+        } }, hostBindings: function AppNavComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("click", function AppNavComponent_click_HostBindingHandler($event) { return ctx.onDocumentClick($event); }, i0.ɵɵresolveDocument)("keydown.escape", function AppNavComponent_keydown_escape_HostBindingHandler() { return ctx.onEscape(); }, i0.ɵɵresolveDocument);
+        } }, inputs: { OverflowEnabled: "OverflowEnabled", app: "app" }, outputs: { navItemClick: "navItemClick", navItemDismiss: "navItemDismiss" }, standalone: false, decls: 7, vars: 5, consts: [["navList", ""], ["moreBtn", ""], [1, "nav-list"], ["aria-hidden", "true", 1, "nav-skeleton"], ["role", "link", 1, "nav-item", 3, "mjClickable", "testId", "active", "dynamic", "no-icon"], ["mjClickable", "More navigation items", "testId", "nav-more-btn", 1, "nav-item", "nav-more-btn", 3, "active"], [1, "nav-more-dropdown", 3, "left"], [1, "nav-skeleton-pill", 2, "width", "88px"], [1, "nav-skeleton-pill", 2, "width", "72px"], [1, "nav-skeleton-pill", 2, "width", "96px"], ["role", "link", 1, "nav-item", 3, "click", "mjClickable", "testId"], [3, "class"], [1, "badge"], ["title", "Remove", 1, "dismiss-btn"], ["title", "Remove", 1, "dismiss-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], ["mjClickable", "More navigation items", "testId", "nav-more-btn", 1, "nav-item", "nav-more-btn", 3, "click"], [1, "fa-solid", "fa-ellipsis"], [1, "more-count"], [1, "nav-more-dropdown"], ["role", "link", 1, "nav-more-item", 3, "mjClickable", "testId", "active", "dynamic"], ["role", "link", 1, "nav-more-item", 3, "click", "mjClickable", "testId"], [1, "more-item-label"]], template: function AppNavComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "nav", 2, 0);
+            i0.ɵɵconditionalCreate(2, AppNavComponent_Conditional_2_Template, 4, 0, "div", 3);
+            i0.ɵɵrepeaterCreate(3, AppNavComponent_For_4_Template, 6, 13, "div", 4, ctx.trackByNavItem, true);
+            i0.ɵɵconditionalCreate(5, AppNavComponent_Conditional_5_Template, 7, 5, "div", 5);
             i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(6, AppNavComponent_Conditional_6_Template, 3, 2, "div", 6);
         } if (rf & 2) {
-            i0.ɵɵstyleProp("--app-color", ctx.appColor);
+            i0.ɵɵclassProp("tight", ctx.Tight);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.Loading && ctx.navItems.length === 0 ? 2 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵrepeater(ctx.navItems);
-        } }, dependencies: [i3.MJClickableDirective], styles: [".nav-list[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  border-radius: 6px;\n  text-decoration: none;\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n  font-size: 14px;\n  transition: all 0.15s;\n  position: relative;\n  cursor: pointer;\n  user-select: none;\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--app-color, var(--mj-brand-primary)) 12%, var(--mj-bg-surface));\n  color: var(--app-color, var(--mj-brand-primary));\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item.active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--app-color, var(--mj-brand-primary));\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item.no-icon[_ngcontent-%COMP%] {\n  padding-left: 12px;\n  padding-right: 12px;\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]   .badge[_ngcontent-%COMP%] {\n  background: var(--mj-status-error);\n  color: white;\n  border-radius: 10px;\n  padding: 2px 6px;\n  font-size: 11px;\n  font-weight: 600;\n  min-width: 18px;\n  text-align: center;\n}\n\n\n\n.nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]:not(.dynamic)    + .nav-item.dynamic[_ngcontent-%COMP%] {\n  margin-left: 4px;\n  padding-left: 16px;\n  border-left: 1px solid var(--mj-border-default);\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item.dynamic[_ngcontent-%COMP%]:not(.active) {\n  opacity: 0.7;\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item.dynamic[_ngcontent-%COMP%]:not(.active):hover {\n  opacity: 1;\n}\n\n\n\n.nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]   .dismiss-btn[_ngcontent-%COMP%] {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  font-size: 10px;\n  cursor: pointer;\n  transition: all 0.15s;\n  margin-left: -2px;\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item.dynamic[_ngcontent-%COMP%]:hover   .dismiss-btn[_ngcontent-%COMP%] {\n  display: flex;\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]   .dismiss-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-active);\n  color: var(--mj-text-secondary);\n}\n\n\n\n.mobile-nav-content[_nghost-%COMP%]   .nav-list[_ngcontent-%COMP%], .mobile-nav-content   [_nghost-%COMP%]   .nav-list[_ngcontent-%COMP%] {\n  flex-direction: column;\n  gap: 2px;\n  padding: 0 12px;\n}\n.mobile-nav-content[_nghost-%COMP%]   .nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%], .mobile-nav-content   [_nghost-%COMP%]   .nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  border-radius: 8px;\n}\n.mobile-nav-content[_nghost-%COMP%]   .nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], .mobile-nav-content   [_nghost-%COMP%]   .nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 20px;\n  text-align: center;\n}"], changeDetection: 0 });
+            i0.ɵɵrepeater(ctx.InlineItems);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.OverflowItems.length > 0 ? 5 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.MoreOpen && ctx.OverflowItems.length > 0 ? 6 : -1);
+        } }, dependencies: [i3.MJClickableDirective], styles: ["[_nghost-%COMP%] {\n  display: block;\n  min-width: 0;\n  position: relative;\n}\n\n\n\n\n.nav-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: nowrap;\n  gap: var(--mj-space-1);\n  overflow: hidden;\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n\n\n\n.nav-list.tight[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]:not(.nav-more-btn) {\n  flex-shrink: 1;\n  min-width: 0;\n}\n.nav-list.tight[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]:not(.nav-more-btn)    > span[_ngcontent-%COMP%]:first-of-type {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-2) var(--mj-space-4);\n  border-radius: var(--mj-radius-md);\n  text-decoration: none;\n  color: var(--mj-text-secondary);\n  font-weight: var(--mj-font-medium);\n  font-size: var(--mj-text-sm);\n  white-space: nowrap;\n  transition: all var(--mj-transition-fast);\n  position: relative;\n  cursor: pointer;\n  user-select: none;\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mj-border-focus);\n  outline-offset: 2px;\n}\n\n\n\n\n\n.nav-list[_ngcontent-%COMP%]   .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.nav-list[_ngcontent-%COMP%]   .nav-item.active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-base);\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item.no-icon[_ngcontent-%COMP%] {\n  padding-left: var(--mj-space-3);\n  padding-right: var(--mj-space-3);\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]   .badge[_ngcontent-%COMP%] {\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  border-radius: var(--mj-radius-full);\n  padding: var(--mj-space-0-5) var(--mj-space-1-5);\n  font-size: 11px;\n  font-weight: var(--mj-font-semibold);\n  min-width: 18px;\n  text-align: center;\n}\n\n\n\n.nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]:not(.dynamic)    + .nav-item.dynamic[_ngcontent-%COMP%] {\n  margin-left: var(--mj-space-1);\n  padding-left: var(--mj-space-4);\n  border-left: 1px solid var(--mj-border-default);\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item.dynamic[_ngcontent-%COMP%]:not(.active) {\n  opacity: 0.7;\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item.dynamic[_ngcontent-%COMP%]:not(.active):hover {\n  opacity: 1;\n}\n\n\n\n.nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]   .dismiss-btn[_ngcontent-%COMP%] {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  font-size: 10px;\n  cursor: pointer;\n  transition: all var(--mj-transition-fast);\n  margin-left: calc(-1 * var(--mj-space-0-5));\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item.dynamic[_ngcontent-%COMP%]:hover   .dismiss-btn[_ngcontent-%COMP%] {\n  display: flex;\n}\n.nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]   .dismiss-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-active);\n  color: var(--mj-text-secondary);\n}\n\n\n\n.nav-more-btn[_ngcontent-%COMP%]   .more-count[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-active);\n  color: var(--mj-text-secondary);\n  border-radius: var(--mj-radius-full);\n  padding: var(--mj-space-0-5) var(--mj-space-1-5);\n  font-size: 11px;\n  font-weight: var(--mj-font-semibold);\n  min-width: 18px;\n  text-align: center;\n  line-height: var(--mj-leading-none);\n}\n.nav-more-btn.active[_ngcontent-%COMP%]   .more-count[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n  color: var(--mj-brand-primary);\n}\n.nav-more-dropdown[_ngcontent-%COMP%] {\n  position: absolute;\n  top: calc(100% + var(--mj-space-2));\n  left: 0; \n\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 200px;\n  width: max-content;\n  max-height: calc(100vh - 80px);\n  overflow-y: auto;\n  padding: var(--mj-space-1) 0;\n  z-index: 10000;\n}\n.nav-more-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2-5);\n  padding: var(--mj-space-2-5) var(--mj-space-4);\n  cursor: pointer;\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-secondary);\n  white-space: nowrap;\n  transition: all var(--mj-transition-fast);\n}\n.nav-more-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 18px;\n  text-align: center;\n  font-size: var(--mj-text-base);\n}\n.nav-more-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.nav-more-item[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mj-border-focus);\n  outline-offset: -2px;\n}\n.nav-more-item.active[_ngcontent-%COMP%] {\n  \n\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  color: var(--mj-brand-primary);\n}\n.nav-more-item[_ngcontent-%COMP%]   .badge[_ngcontent-%COMP%] {\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  border-radius: var(--mj-radius-full);\n  padding: var(--mj-space-0-5) var(--mj-space-1-5);\n  font-size: 11px;\n  font-weight: var(--mj-font-semibold);\n  min-width: 18px;\n  text-align: center;\n}\n.nav-more-item[_ngcontent-%COMP%]   .dismiss-btn[_ngcontent-%COMP%] {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  font-size: 10px;\n  cursor: pointer;\n}\n.nav-more-item.dynamic[_ngcontent-%COMP%]:hover   .dismiss-btn[_ngcontent-%COMP%] {\n  display: flex;\n}\n\n\n\n.nav-skeleton[_ngcontent-%COMP%] {\n  display: flex;\n  gap: var(--mj-space-1);\n}\n.nav-skeleton-pill[_ngcontent-%COMP%] {\n  height: 34px;\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface-sunken);\n  animation: _ngcontent-%COMP%_nav-skeleton-pulse 1.2s ease-in-out infinite;\n}\n@keyframes _ngcontent-%COMP%_nav-skeleton-pulse {\n  0%, 100% { opacity: 0.55; }\n  50% { opacity: 1; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .nav-skeleton-pill[_ngcontent-%COMP%] {\n    animation: none;\n    opacity: 0.7;\n  }\n}\n\n\n\n.mobile-nav-content[_nghost-%COMP%]   .nav-list[_ngcontent-%COMP%], .mobile-nav-content   [_nghost-%COMP%]   .nav-list[_ngcontent-%COMP%] {\n  flex-direction: column;\n  gap: var(--mj-space-0-5);\n  padding: 0 var(--mj-space-3);\n}\n.mobile-nav-content[_nghost-%COMP%]   .nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%], .mobile-nav-content   [_nghost-%COMP%]   .nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%] {\n  padding: var(--mj-space-3) var(--mj-space-4);\n  border-radius: var(--mj-radius-md);\n  min-height: 48px; \n\n  box-sizing: border-box;\n}\n.mobile-nav-content[_nghost-%COMP%]   .nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], .mobile-nav-content   [_nghost-%COMP%]   .nav-list[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 20px;\n  text-align: center;\n}"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AppNavComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-app-nav', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"nav-list\" [style.--app-color]=\"appColor\">\n  @for (item of navItems; track trackByNavItem($index, item)) {\n    <div\n      class=\"nav-item\"\n      [mjClickable]=\"item.Label\"\n      role=\"link\"\n      [testId]=\"'nav-item-' + item.Label\"\n      [attr.aria-current]=\"isActive(item) ? 'page' : null\"\n      [class.active]=\"isActive(item)\"\n      [class.dynamic]=\"isDynamic(item)\"\n      [class.no-icon]=\"!item.Icon\"\n      (click)=\"onNavClick(item, $event)\">\n      @if (item.Icon) {\n        <i [class]=\"item.Icon\"></i>\n      }\n      <span>{{ item.Label }}</span>\n      @if (item.Badge) {\n        <span class=\"badge\">{{ item.Badge }}</span>\n      }\n      @if (isDynamic(item)) {\n        <button class=\"dismiss-btn\" title=\"Remove\" (click)=\"onDismiss(item, $event)\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      }\n    </div>\n  }\n</nav>\n", styles: [".nav-list {\n  display: flex;\n  gap: 4px;\n}\n.nav-list .nav-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  border-radius: 6px;\n  text-decoration: none;\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n  font-size: 14px;\n  transition: all 0.15s;\n  position: relative;\n  cursor: pointer;\n  user-select: none;\n}\n.nav-list .nav-item:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.nav-list .nav-item.active {\n  background: color-mix(in srgb, var(--app-color, var(--mj-brand-primary)) 12%, var(--mj-bg-surface));\n  color: var(--app-color, var(--mj-brand-primary));\n}\n.nav-list .nav-item.active i {\n  color: var(--app-color, var(--mj-brand-primary));\n}\n.nav-list .nav-item i {\n  font-size: 16px;\n}\n.nav-list .nav-item.no-icon {\n  padding-left: 12px;\n  padding-right: 12px;\n}\n.nav-list .nav-item .badge {\n  background: var(--mj-status-error);\n  color: white;\n  border-radius: 10px;\n  padding: 2px 6px;\n  font-size: 11px;\n  font-weight: 600;\n  min-width: 18px;\n  text-align: center;\n}\n\n/* Dynamic nav items (recent orphan resources) \u2014 separator and dimming */\n.nav-list .nav-item:not(.dynamic) + .nav-item.dynamic {\n  margin-left: 4px;\n  padding-left: 16px;\n  border-left: 1px solid var(--mj-border-default);\n}\n.nav-list .nav-item.dynamic:not(.active) {\n  opacity: 0.7;\n}\n.nav-list .nav-item.dynamic:not(.active):hover {\n  opacity: 1;\n}\n\n/* Dismiss button for dynamic nav items */\n.nav-list .nav-item .dismiss-btn {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  font-size: 10px;\n  cursor: pointer;\n  transition: all 0.15s;\n  margin-left: -2px;\n}\n.nav-list .nav-item.dynamic:hover .dismiss-btn {\n  display: flex;\n}\n.nav-list .nav-item .dismiss-btn:hover {\n  background: var(--mj-bg-surface-active);\n  color: var(--mj-text-secondary);\n}\n\n/* Mobile drawer vertical layout */\n:host-context(.mobile-nav-content) .nav-list {\n  flex-direction: column;\n  gap: 2px;\n  padding: 0 12px;\n}\n:host-context(.mobile-nav-content) .nav-list .nav-item {\n  padding: 12px 16px;\n  border-radius: 8px;\n}\n:host-context(.mobile-nav-content) .nav-list .nav-item i {\n  width: 20px;\n  text-align: center;\n}\n"] }]
-    }], () => [{ type: i1.WorkspaceStateManager }, { type: i2.SharedService }, { type: i0.ChangeDetectorRef }], { navItemClick: [{
+        args: [{ standalone: false, selector: 'mj-app-nav', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"nav-list\" #navList [class.tight]=\"Tight\">\n  @if (Loading && navItems.length === 0) {\n    <!-- Skeleton pills while GetNavItems() resolves \u2014 prevents header pop-in -->\n    <div class=\"nav-skeleton\" aria-hidden=\"true\">\n      <span class=\"nav-skeleton-pill\" style=\"width: 88px\"></span>\n      <span class=\"nav-skeleton-pill\" style=\"width: 72px\"></span>\n      <span class=\"nav-skeleton-pill\" style=\"width: 96px\"></span>\n    </div>\n  }\n  @for (item of InlineItems; track trackByNavItem($index, item)) {\n    <div\n      class=\"nav-item\"\n      [mjClickable]=\"item.Label\"\n      role=\"link\"\n      [testId]=\"'nav-item-' + item.Label\"\n      [attr.aria-current]=\"isActive(item) ? 'page' : null\"\n      [class.active]=\"isActive(item)\"\n      [class.dynamic]=\"isDynamic(item)\"\n      [class.no-icon]=\"!item.Icon\"\n      (click)=\"onNavClick(item, $event)\">\n      @if (item.Icon) {\n        <i [class]=\"item.Icon\"></i>\n      }\n      <span>{{ item.Label }}</span>\n      @if (item.Badge) {\n        <span class=\"badge\">{{ item.Badge }}</span>\n      }\n      @if (isDynamic(item)) {\n        <button class=\"dismiss-btn\" title=\"Remove\" (click)=\"onDismiss(item, $event)\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      }\n    </div>\n  }\n  @if (OverflowItems.length > 0) {\n    <div\n      #moreBtn\n      class=\"nav-item nav-more-btn\"\n      mjClickable=\"More navigation items\"\n      testId=\"nav-more-btn\"\n      [attr.aria-haspopup]=\"true\"\n      [attr.aria-expanded]=\"MoreOpen\"\n      [class.active]=\"OverflowHasActive\"\n      (click)=\"ToggleMore($event)\">\n      <i class=\"fa-solid fa-ellipsis\"></i>\n      <span>More</span>\n      <span class=\"more-count\">{{ OverflowItems.length }}</span>\n    </div>\n  }\n</nav>\n\n<!-- The dropdown lives OUTSIDE the clipped nav row (the row keeps\n     overflow: hidden so fit-arithmetic slack can never paint over the\n     header's action cluster). Anchored to the More button by measurement. -->\n@if (MoreOpen && OverflowItems.length > 0) {\n  <div class=\"nav-more-dropdown\" [style.left.px]=\"MoreDropdownLeft\">\n    @for (item of OverflowItems; track trackByNavItem($index, item)) {\n      <div\n        class=\"nav-more-item\"\n        [mjClickable]=\"item.Label\"\n        role=\"link\"\n        [testId]=\"'nav-more-item-' + item.Label\"\n        [attr.aria-current]=\"isActive(item) ? 'page' : null\"\n        [class.active]=\"isActive(item)\"\n        [class.dynamic]=\"isDynamic(item)\"\n        (click)=\"onNavClick(item, $event)\">\n        @if (item.Icon) {\n          <i [class]=\"item.Icon\"></i>\n        }\n        <span class=\"more-item-label\">{{ item.Label }}</span>\n        @if (item.Badge) {\n          <span class=\"badge\">{{ item.Badge }}</span>\n        }\n        @if (isDynamic(item)) {\n          <button class=\"dismiss-btn\" title=\"Remove\" (click)=\"onDismiss(item, $event)\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host {\n  display: block;\n  min-width: 0;\n  position: relative;\n}\n/* Always clipped: if the fit arithmetic is ever a few px off (badge widths,\n   font fallbacks), the row clips inside its own box instead of painting over\n   the header's action cluster. The More dropdown renders outside this row. */\n.nav-list {\n  display: flex;\n  flex-wrap: nowrap;\n  gap: var(--mj-space-1);\n  overflow: hidden;\n}\n.nav-list .nav-item {\n  flex-shrink: 0;\n}\n/* Tight mode: even one item + More can't fit, so the lone visible pill\n   yields with an ellipsis and the More button stays whole. */\n.nav-list.tight .nav-item:not(.nav-more-btn) {\n  flex-shrink: 1;\n  min-width: 0;\n}\n.nav-list.tight .nav-item:not(.nav-more-btn) > span:first-of-type {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.nav-list .nav-item {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-2) var(--mj-space-4);\n  border-radius: var(--mj-radius-md);\n  text-decoration: none;\n  color: var(--mj-text-secondary);\n  font-weight: var(--mj-font-medium);\n  font-size: var(--mj-text-sm);\n  white-space: nowrap;\n  transition: all var(--mj-transition-fast);\n  position: relative;\n  cursor: pointer;\n  user-select: none;\n}\n.nav-list .nav-item:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.nav-list .nav-item:focus-visible {\n  outline: 2px solid var(--mj-border-focus);\n  outline-offset: 2px;\n}\n/* Active = brand-primary everywhere; the app's metadata color is an identity\n   accent (icon glyphs), never a state color. Shared active-tint recipe:\n   color-mix(in srgb, var(--mj-brand-primary) 10%, transparent) \u2014 keep in sync\n   across nav pills, pinned app buttons, launcher cards, and omnibar rows. */\n.nav-list .nav-item.active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  color: var(--mj-brand-primary);\n}\n.nav-list .nav-item.active i {\n  color: var(--mj-brand-primary);\n}\n.nav-list .nav-item i {\n  font-size: var(--mj-text-base);\n}\n.nav-list .nav-item.no-icon {\n  padding-left: var(--mj-space-3);\n  padding-right: var(--mj-space-3);\n}\n.nav-list .nav-item .badge {\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  border-radius: var(--mj-radius-full);\n  padding: var(--mj-space-0-5) var(--mj-space-1-5);\n  font-size: 11px;\n  font-weight: var(--mj-font-semibold);\n  min-width: 18px;\n  text-align: center;\n}\n\n/* Dynamic nav items (recent orphan resources) \u2014 separator and dimming */\n.nav-list .nav-item:not(.dynamic) + .nav-item.dynamic {\n  margin-left: var(--mj-space-1);\n  padding-left: var(--mj-space-4);\n  border-left: 1px solid var(--mj-border-default);\n}\n.nav-list .nav-item.dynamic:not(.active) {\n  opacity: 0.7;\n}\n.nav-list .nav-item.dynamic:not(.active):hover {\n  opacity: 1;\n}\n\n/* Dismiss button for dynamic nav items */\n.nav-list .nav-item .dismiss-btn {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  font-size: 10px;\n  cursor: pointer;\n  transition: all var(--mj-transition-fast);\n  margin-left: calc(-1 * var(--mj-space-0-5));\n}\n.nav-list .nav-item.dynamic:hover .dismiss-btn {\n  display: flex;\n}\n.nav-list .nav-item .dismiss-btn:hover {\n  background: var(--mj-bg-surface-active);\n  color: var(--mj-text-secondary);\n}\n\n/* ---- Priority+ overflow: the More button + dropdown ---- */\n.nav-more-btn .more-count {\n  background: var(--mj-bg-surface-active);\n  color: var(--mj-text-secondary);\n  border-radius: var(--mj-radius-full);\n  padding: var(--mj-space-0-5) var(--mj-space-1-5);\n  font-size: 11px;\n  font-weight: var(--mj-font-semibold);\n  min-width: 18px;\n  text-align: center;\n  line-height: var(--mj-leading-none);\n}\n.nav-more-btn.active .more-count {\n  background: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n  color: var(--mj-brand-primary);\n}\n.nav-more-dropdown {\n  position: absolute;\n  top: calc(100% + var(--mj-space-2));\n  left: 0; /* Overridden by the measured [style.left.px] anchor */\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 200px;\n  width: max-content;\n  max-height: calc(100vh - 80px);\n  overflow-y: auto;\n  padding: var(--mj-space-1) 0;\n  z-index: 10000;\n}\n.nav-more-item {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2-5);\n  padding: var(--mj-space-2-5) var(--mj-space-4);\n  cursor: pointer;\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-secondary);\n  white-space: nowrap;\n  transition: all var(--mj-transition-fast);\n}\n.nav-more-item i {\n  width: 18px;\n  text-align: center;\n  font-size: var(--mj-text-base);\n}\n.nav-more-item:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.nav-more-item:focus-visible {\n  outline: 2px solid var(--mj-border-focus);\n  outline-offset: -2px;\n}\n.nav-more-item.active {\n  /* Shared active-tint recipe */\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  color: var(--mj-brand-primary);\n}\n.nav-more-item .badge {\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  border-radius: var(--mj-radius-full);\n  padding: var(--mj-space-0-5) var(--mj-space-1-5);\n  font-size: 11px;\n  font-weight: var(--mj-font-semibold);\n  min-width: 18px;\n  text-align: center;\n}\n.nav-more-item .dismiss-btn {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  font-size: 10px;\n  cursor: pointer;\n}\n.nav-more-item.dynamic:hover .dismiss-btn {\n  display: flex;\n}\n\n/* ---- Skeleton pills shown while nav items load ---- */\n.nav-skeleton {\n  display: flex;\n  gap: var(--mj-space-1);\n}\n.nav-skeleton-pill {\n  height: 34px;\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface-sunken);\n  animation: nav-skeleton-pulse 1.2s ease-in-out infinite;\n}\n@keyframes nav-skeleton-pulse {\n  0%, 100% { opacity: 0.55; }\n  50% { opacity: 1; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .nav-skeleton-pill {\n    animation: none;\n    opacity: 0.7;\n  }\n}\n\n/* Mobile drawer vertical layout */\n:host-context(.mobile-nav-content) .nav-list {\n  flex-direction: column;\n  gap: var(--mj-space-0-5);\n  padding: 0 var(--mj-space-3);\n}\n:host-context(.mobile-nav-content) .nav-list .nav-item {\n  padding: var(--mj-space-3) var(--mj-space-4);\n  border-radius: var(--mj-radius-md);\n  min-height: 48px; /* Touch-target parity with the app switcher's mobile items */\n  box-sizing: border-box;\n}\n:host-context(.mobile-nav-content) .nav-list .nav-item i {\n  width: 20px;\n  text-align: center;\n}\n"] }]
+    }], () => [{ type: i1.WorkspaceStateManager }, { type: i2.SharedService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], { navListRef: [{
+            type: ViewChild,
+            args: ['navList']
+        }], moreBtnRef: [{
+            type: ViewChild,
+            args: ['moreBtn']
+        }], navItemClick: [{
             type: Output
         }], navItemDismiss: [{
             type: Output
+        }], OverflowEnabled: [{
+            type: Input
         }], app: [{
             type: Input
+        }], onDocumentClick: [{
+            type: HostListener,
+            args: ['document:click', ['$event']]
+        }], onEscape: [{
+            type: HostListener,
+            args: ['document:keydown.escape']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AppNavComponent, { className: "AppNavComponent", filePath: "src/lib/shell/components/header/app-nav.component.ts", lineNumber: 25 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AppNavComponent, { className: "AppNavComponent", filePath: "src/lib/shell/components/header/app-nav.component.ts", lineNumber: 31 }); })();
 //# sourceMappingURL=app-nav.component.js.map