@ardimedia/angular-portal-azure 0.3.18 → 0.3.27

package/fesm2022/ardimedia-angular-portal-azure.mjs

@@ -1,6 +1,9 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject, makeEnvironmentProviders, APP_INITIALIZER, input, output, Component, ElementRef, Injector, DestroyRef, effect, afterNextRender } from '@angular/core';
+import { signal, computed, Injectable, inject, InjectionToken, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, DestroyRef, effect, APP_INITIALIZER, input, output, Component, ElementRef, Injector, afterNextRender, contentChild } from '@angular/core';
+import { Router, NavigationEnd } from '@angular/router';
+import { filter } from 'rxjs/operators';
 import { DOCUMENT, NgComponentOutlet } from '@angular/common';
+import { NgForm } from '@angular/forms';
 
 function clearStatusBar() {
     return { text: '', style: 'none' };
@@ -15,19 +18,26 @@ function statusBarSuccess(text) {
     return { text, style: 'success' };
 }
 
+let _nextBladeUid = 0;
+/** @internal */
+function nextBladeUid() { return ++_nextBladeUid; }
 /** Creates a blade definition with sensible defaults.
- *  statusBar uses a getter/setter backed by a signal for zoneless change detection. */
-function createBlade(path, title, width = 315) {
-    const _statusBar = signal(clearStatusBar(), ...(ngDevMode ? [{ debugName: "_statusBar" }] : []));
+ *  statusBar and title use getter/setter pairs backed by signals for zoneless change detection. */
+function createBlade(path, title, width = 315, params = {}, uid) {
+    const _statusBar = signal(clearStatusBar(), ...(ngDevMode ? [{ debugName: "_statusBar" }] : /* istanbul ignore next */ []));
+    const _title = signal(title, ...(ngDevMode ? [{ debugName: "_title" }] : /* istanbul ignore next */ []));
     return {
+        uid: uid ?? nextBladeUid(),
         path: path.toLowerCase(),
-        title,
+        get title() { return _title(); },
+        set title(value) { _title.set(value); },
         subtitle: '',
         width,
         isInnerHtml: true,
         commands: [],
         get statusBar() { return _statusBar(); },
         set statusBar(value) { _statusBar.set(value); },
+        params,
     };
 }
 
@@ -63,6 +73,7 @@ const LABELS_DE_CH = {
     settings: 'Einstellungen',
     language: 'Sprache',
     appearance: 'Darstellung',
+    unsavedChangesConfirm: 'Die Änderungen wurden noch nicht gespeichert. Trotzdem verlassen?',
 };
 /** German (Germany) — Swiss spelling rules apply (no ß) */
 const LABELS_DE_DE = { ...LABELS_DE_CH };
@@ -92,6 +103,7 @@ const LABELS_EN = {
     settings: 'Settings',
     language: 'Language',
     appearance: 'Appearance',
+    unsavedChangesConfirm: 'You have unsaved changes. Leave anyway?',
 };
 /** French */
 const LABELS_FR = {
@@ -119,6 +131,7 @@ const LABELS_FR = {
     settings: 'Paramètres',
     language: 'Langue',
     appearance: 'Apparence',
+    unsavedChangesConfirm: 'Les modifications n\'ont pas été enregistrées. Quitter quand même ?',
 };
 /** Spanish */
 const LABELS_ES = {
@@ -146,6 +159,7 @@ const LABELS_ES = {
     settings: 'Configuración',
     language: 'Idioma',
     appearance: 'Apariencia',
+    unsavedChangesConfirm: 'Hay cambios sin guardar. ¿Salir de todos modos?',
 };
 /** Italian */
 const LABELS_IT = {
@@ -173,6 +187,7 @@ const LABELS_IT = {
     settings: 'Impostazioni',
     language: 'Lingua',
     appearance: 'Aspetto',
+    unsavedChangesConfirm: 'Le modifiche non sono state salvate. Uscire comunque?',
 };
 // ── Language preset registry ────────────────────────────────────────
 /** Keep DEFAULT_LABELS as alias for backward compatibility */
@@ -192,16 +207,19 @@ function registerLanguagePreset(preset) {
 }
 
 /** Creates a data blade definition with sensible defaults.
- *  statusBar, item, items use getter/setter pairs backed by signals for zoneless change detection.
+ *  statusBar, title, item, items use getter/setter pairs backed by signals for zoneless change detection.
  *  Note: cannot use ...createBlade() spread here — spread copies getter values, not getter/setter pairs. */
-function createDataBlade(path, title, width = 315) {
-    const _statusBar = signal(clearStatusBar(), ...(ngDevMode ? [{ debugName: "_statusBar" }] : []));
-    const _item = signal({}, ...(ngDevMode ? [{ debugName: "_item" }] : []));
-    const _items = signal([], ...(ngDevMode ? [{ debugName: "_items" }] : []));
-    const _loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
+function createDataBlade(path, title, width = 315, params = {}, uid) {
+    const _statusBar = signal(clearStatusBar(), ...(ngDevMode ? [{ debugName: "_statusBar" }] : /* istanbul ignore next */ []));
+    const _title = signal(title, ...(ngDevMode ? [{ debugName: "_title" }] : /* istanbul ignore next */ []));
+    const _item = signal({}, ...(ngDevMode ? [{ debugName: "_item" }] : /* istanbul ignore next */ []));
+    const _items = signal([], ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
+    const _loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : /* istanbul ignore next */ []));
     return {
+        uid: uid ?? nextBladeUid(),
         path: path.toLowerCase(),
-        title,
+        get title() { return _title(); },
+        set title(value) { _title.set(value); },
         subtitle: '',
         width,
         isInnerHtml: true,
@@ -215,6 +233,7 @@ function createDataBlade(path, title, width = 315) {
         get loading() { return _loading(); },
         set loading(value) { _loading.set(value); },
         lifecycle: {},
+        params,
     };
 }
 /**
@@ -330,6 +349,10 @@ function getUserDisplayName(account) {
     return `${account.firstName || ''} ${account.lastName || ''}`.trim();
 }
 
+/**
+ * Notification panel definition.
+ * Ported from AreaNotification in v0.2.346.
+ */
 function createNotificationPanel() {
     return {
         path: '',
@@ -426,32 +449,32 @@ function getAllStringValues(obj) {
 class PortalService {
     static LANG_STORAGE_KEY = 'apa-language';
     /** Localization labels (defaults to German/de-CH, override via PortalConfig.labels) */
-    labels = signal({ ...DEFAULT_LABELS }, ...(ngDevMode ? [{ debugName: "labels" }] : []));
+    labels = signal({ ...DEFAULT_LABELS }, ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
     /** Current language code */
-    currentLanguage = signal('de-CH', ...(ngDevMode ? [{ debugName: "currentLanguage" }] : []));
+    currentLanguage = signal('de-CH', ...(ngDevMode ? [{ debugName: "currentLanguage" }] : /* istanbul ignore next */ []));
     /** Whether the settings dropdown is open */
-    isSettingsOpen = signal(false, ...(ngDevMode ? [{ debugName: "isSettingsOpen" }] : []));
+    isSettingsOpen = signal(false, ...(ngDevMode ? [{ debugName: "isSettingsOpen" }] : /* istanbul ignore next */ []));
     /** The blade stack — ordered left-to-right */
-    blades = signal([], ...(ngDevMode ? [{ debugName: "blades" }] : []));
+    blades = signal([], ...(ngDevMode ? [{ debugName: "blades" }] : /* istanbul ignore next */ []));
     /** Panorama (startboard/dashboard) state */
-    panorama = signal(createPanorama(''), ...(ngDevMode ? [{ debugName: "panorama" }] : []));
+    panorama = signal(createPanorama(''), ...(ngDevMode ? [{ debugName: "panorama" }] : /* istanbul ignore next */ []));
     /** Notification panel state */
-    notification = signal(createNotificationPanel(), ...(ngDevMode ? [{ debugName: "notification" }] : []));
+    notification = signal(createNotificationPanel(), ...(ngDevMode ? [{ debugName: "notification" }] : /* istanbul ignore next */ []));
     /** Avatar menu state */
-    avatarMenu = signal(createAvatarMenu(), ...(ngDevMode ? [{ debugName: "avatarMenu" }] : []));
+    avatarMenu = signal(createAvatarMenu(), ...(ngDevMode ? [{ debugName: "avatarMenu" }] : /* istanbul ignore next */ []));
     /** Shared parameter for passing data between blades */
-    parameter = signal({ action: 'none', itemId: 0 }, ...(ngDevMode ? [{ debugName: "parameter" }] : []));
+    parameter = signal({ action: 'none', itemId: 0 }, ...(ngDevMode ? [{ debugName: "parameter" }] : /* istanbul ignore next */ []));
     /** Portal theme identifier */
-    theme = signal('azure-blue', ...(ngDevMode ? [{ debugName: "theme" }] : []));
+    theme = signal('azure-blue', ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
     /** Whether the panorama is visible (true when no blades are open) */
-    isPanoramaVisible = computed(() => this.blades().length === 0, ...(ngDevMode ? [{ debugName: "isPanoramaVisible" }] : []));
+    isPanoramaVisible = computed(() => this.blades().length === 0, ...(ngDevMode ? [{ debugName: "isPanoramaVisible" }] : /* istanbul ignore next */ []));
     /** Number of open blades */
-    bladeCount = computed(() => this.blades().length, ...(ngDevMode ? [{ debugName: "bladeCount" }] : []));
+    bladeCount = computed(() => this.blades().length, ...(ngDevMode ? [{ debugName: "bladeCount" }] : /* istanbul ignore next */ []));
     /** Positioned tiles with layout coordinates */
     positionedTiles = computed(() => {
         const pano = this.panorama();
         return pano.tiles;
-    }, ...(ngDevMode ? [{ debugName: "positionedTiles" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "positionedTiles" }] : /* istanbul ignore next */ []));
     /** Consumer label overrides from PortalConfig — re-applied on every language switch */
     _configLabelOverrides = {};
     /**
@@ -559,20 +582,26 @@ class PortalService {
     }
     // --- Notification panel ---
     /** Show the notification panel */
-    showNotification(path, width = 250) {
+    showNotification(path, width = 250, lifecycle) {
+        lifecycle?.onShow?.();
         this.notification.update((n) => ({
             ...n,
             path,
             width,
             isVisible: true,
+            lifecycle,
         }));
     }
-    /** Hide the notification panel */
+    /** Hide the notification panel. Aborted if onHide() returns false. */
     hideNotification() {
+        const current = this.notification();
+        if (current.lifecycle?.onHide?.() === false)
+            return;
         this.notification.update((n) => ({
             ...n,
             path: '',
             isVisible: false,
+            lifecycle: undefined,
         }));
     }
     // --- Avatar menu ---
@@ -591,10 +620,64 @@ class PortalService {
     setAvatarMenuItems(items) {
         this.avatarMenu.update((m) => ({ ...m, items }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PortalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PortalService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: PortalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: PortalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: PortalService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Registry for mapping blade paths to Angular components.
+ *
+ * Allows consumer apps to register components for blade paths,
+ * enabling dynamic rendering in BladeHostComponent without
+ * manual @switch blocks.
+ *
+ * Usage in app bootstrap:
+ * ```typescript
+ * const registry = inject(BladeRegistry);
+ * registry.register('customers', CustomerNavComponent);
+ * registry.register('customers/list', CustomerListComponent, { title: 'All Customers', width: 585 });
+ * ```
+ *
+ * Or register multiple at once:
+ * ```typescript
+ * registry.registerAll({
+ *   'customers': CustomerNavComponent,
+ *   'customers/list': CustomerListComponent,
+ * });
+ * ```
+ */
+class BladeRegistry {
+    registry = new Map();
+    /** Register a component for a blade path with optional metadata (title, width, params) */
+    register(path, component, metadata) {
+        this.registry.set(path.toLowerCase(), { component, ...metadata });
+    }
+    /** Register multiple blade path → component mappings */
+    registerAll(mappings) {
+        for (const [path, component] of Object.entries(mappings)) {
+            this.register(path, component);
+        }
+    }
+    /** Get the component registered for a path, if any */
+    get(path) {
+        return this.registry.get(path.toLowerCase())?.component;
+    }
+    /** Get the full registry entry (component + metadata) for a path */
+    getEntry(path) {
+        return this.registry.get(path.toLowerCase());
+    }
+    /** Check if a component is registered for a path */
+    has(path) {
+        return this.registry.has(path.toLowerCase());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: BladeRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: BladeRegistry, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PortalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: BladeRegistry, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -605,18 +688,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  *
  * Manages the blade stack: adding, removing, cascade-closing,
  * and panorama visibility toggling.
+ *
+ * When a BladeRegistry is available, metadata (title, width) from the
+ * registry is used as defaults — explicit arguments take precedence.
  */
 class BladeService {
     portal = inject(PortalService);
+    registry = inject(BladeRegistry);
+    /**
+     * Unsaved-changes guard registry: blade path -> predicate returning true when the blade has
+     * unsaved edits. Populated by apa-blade-detail (from the projected NgForm). Consulted before a
+     * blade is closed/replaced or the page is left, so the user can confirm discarding changes.
+     * Message can be localised via PortalLabels.unsavedChangesConfirm; the navigation flow is
+     * synchronous, so a synchronous window.confirm is used.
+     */
+    dirtyChecks = new Map();
+    /** Optional override for the confirmation message (defaults to the de-CH label). */
+    unsavedChangesMessage = DEFAULT_LABELS.unsavedChangesConfirm;
+    constructor() {
+        // Native browser guard when the whole page/tab is closed or reloaded with unsaved edits.
+        if (typeof window !== 'undefined') {
+            window.addEventListener('beforeunload', (e) => {
+                if (this.anyDirty()) {
+                    e.preventDefault();
+                    e.returnValue = '';
+                }
+            });
+        }
+    }
+    /** Register a blade's unsaved-changes predicate (called by apa-blade-detail). */
+    registerDirtyCheck(path, isDirty) {
+        this.dirtyChecks.set(path.toLowerCase(), isDirty);
+    }
+    /** Remove a blade's unsaved-changes predicate (called when the detail is destroyed). */
+    unregisterDirtyCheck(path) {
+        this.dirtyChecks.delete(path.toLowerCase());
+    }
+    isPathDirty(path) {
+        const check = this.dirtyChecks.get(path.toLowerCase());
+        try {
+            return check ? check() === true : false;
+        }
+        catch {
+            return false;
+        }
+    }
+    anyDirty() {
+        for (const path of this.dirtyChecks.keys()) {
+            if (this.isPathDirty(path))
+                return true;
+        }
+        return false;
+    }
+    /**
+     * Returns true if it's OK to proceed with removing the given blade paths: none of them is dirty,
+     * or the user confirmed discarding the changes. Shows one confirmation regardless of how many
+     * dirty blades are affected.
+     */
+    mayDiscard(removedPaths) {
+        const anyDirty = removedPaths.some((p) => this.isPathDirty(p));
+        if (!anyDirty)
+            return true;
+        return typeof window === 'undefined' ? true : window.confirm(this.unsavedChangesMessage);
+    }
+    /** Drop dirty-check entries for paths that are no longer open. */
+    pruneDirtyChecks() {
+        const open = new Set(this.portal.blades().map((b) => b.path));
+        for (const path of [...this.dirtyChecks.keys()]) {
+            if (!open.has(path))
+                this.dirtyChecks.delete(path);
+        }
+    }
     /**
      * Set the first blade (e.g., when opening a top-level item from a tile).
      * Clears all existing blades, hides panorama, and adds the new blade.
      *
      * Ported from AreaBlades.setFirstBlade() in v0.2.346.
      */
-    setFirstBlade(path, title = '', width = 315) {
+    setFirstBlade(path, title = '', width) {
+        const existing = this.portal.blades();
+        if (existing.length > 0 && !this.mayDiscard(existing.map((b) => b.path))) {
+            return existing[0];
+        }
+        this.dirtyChecks.clear();
         this.portal.blades.set([]);
-        const blade = createBlade(path.toLowerCase(), title, width);
+        const entry = this.registry.getEntry(path);
+        const blade = createBlade(path.toLowerCase(), title || entry?.title || path, width ?? entry?.width ?? 315);
         this.portal.blades.set([blade]);
         return blade;
     }
@@ -626,21 +783,23 @@ class BladeService {
      *
      * Ported from AreaBlades.addBlade() in v0.2.346.
      */
-    addBlade(path, senderPath = '', title = '', width = 315) {
+    addBlade(path, senderPath = '', title = '', width, params) {
         if (!path)
             return undefined;
         const normalizedPath = path.toLowerCase();
-        const blades = this.portal.blades();
-        // Check if blade already exists
-        const existing = blades.find((b) => b.path === normalizedPath);
+        // Cascade close first: remove blades after the sender
+        // This ensures a blade at the same path gets recreated with new params
+        if (senderPath) {
+            if (!this.clearChild(senderPath))
+                return undefined;
+        }
+        // Check if blade already exists (after cascade close)
+        const existing = this.portal.blades().find((b) => b.path === normalizedPath);
         if (existing) {
             return existing;
         }
-        // Cascade close: remove blades after the sender
-        if (senderPath) {
-            this.clearChild(senderPath);
-        }
-        const blade = createBlade(normalizedPath, title, width);
+        const entry = this.registry.getEntry(normalizedPath);
+        const blade = createBlade(normalizedPath, title || entry?.title || normalizedPath, width ?? entry?.width ?? 315, params);
         this.portal.blades.update((b) => [...b, blade]);
         return blade;
     }
@@ -648,7 +807,7 @@ class BladeService {
      * Open a blade from a navigation event (e.g., tile click, nav item click).
      * Wraps addBlade with AddBladeEventArgs for compatibility.
      */
-    openBlade(args, title = '', width = 315) {
+    openBlade(args, title = '', width) {
         return this.addBlade(args.path, args.pathSender, title, width);
     }
     /**
@@ -656,7 +815,10 @@ class BladeService {
      * Ported from AreaBlades.clearAll() in v0.2.346.
      */
     clearAll() {
+        if (!this.mayDiscard(this.portal.blades().map((b) => b.path)))
+            return;
         this.portal.blades.set([]);
+        this.dirtyChecks.clear();
     }
     /**
      * Remove a specific blade and all blades to its right.
@@ -669,7 +831,10 @@ class BladeService {
         const blades = this.portal.blades();
         const index = blades.findIndex((b) => b.path === normalizedPath);
         if (index >= 0) {
+            if (!this.mayDiscard(blades.slice(index).map((b) => b.path)))
+                return false;
             this.portal.blades.set(blades.slice(0, index));
+            this.pruneDirtyChecks();
         }
         else {
             // Check notification area
@@ -678,6 +843,7 @@ class BladeService {
                 this.portal.hideNotification();
             }
         }
+        return true;
     }
     /**
      * Remove all blades AFTER a given path (keeps the blade itself).
@@ -687,13 +853,17 @@ class BladeService {
      */
     clearChild(path) {
         if (!path)
-            return;
+            return true;
         const normalizedPath = path.toLowerCase();
         const blades = this.portal.blades();
         const index = blades.findIndex((b) => b.path === normalizedPath);
         if (index >= 0) {
+            if (!this.mayDiscard(blades.slice(index + 1).map((b) => b.path)))
+                return false;
             this.portal.blades.set(blades.slice(0, index + 1));
+            this.pruneDirtyChecks();
         }
+        return true;
     }
     /**
      * Remove blades at and beyond a specific 1-based level.
@@ -703,7 +873,10 @@ class BladeService {
         const adjustedLevel = level <= 0 ? 1 : level;
         const blades = this.portal.blades();
         if (adjustedLevel <= blades.length) {
+            if (!this.mayDiscard(blades.slice(adjustedLevel - 1).map((b) => b.path)))
+                return;
             this.portal.blades.set(blades.slice(0, adjustedLevel - 1));
+            this.pruneDirtyChecks();
         }
     }
     /**
@@ -713,7 +886,10 @@ class BladeService {
     clearLastLevel() {
         const blades = this.portal.blades();
         if (blades.length > 0) {
+            if (!this.mayDiscard([blades[blades.length - 1].path]))
+                return;
             this.portal.blades.set(blades.slice(0, -1));
+            this.pruneDirtyChecks();
         }
     }
     /**
@@ -735,63 +911,313 @@ class BladeService {
     isBladeOpen(path) {
         return this.portal.blades().some((b) => b.path === path.toLowerCase());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BladeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BladeService, providedIn: 'root' });
+    /**
+     * Get URL-persisted parameters for a blade by path.
+     * Returns empty object if blade not found or has no params.
+     */
+    getBladeParams(path) {
+        return this.getBlade(path)?.params ?? {};
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: BladeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: BladeService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BladeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: BladeService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }] });
+        }], ctorParameters: () => [] });
 
+/** @internal */
+const BLADE_ROUTER_CONFIG = new InjectionToken('BLADE_ROUTER_CONFIG');
 /**
- * Registry for mapping blade paths to Angular components.
- *
- * Allows consumer apps to register components for blade paths,
- * enabling dynamic rendering in BladeHostComponent without
- * manual @switch blocks.
+ * Enables opt-in URL synchronization for the blade stack.
  *
- * Usage in app bootstrap:
+ * Add alongside `provideRouter()` and `providePortalAzure()`:
  * ```typescript
- * const registry = inject(BladeRegistry);
- * registry.register('customers', CustomerNavComponent);
- * registry.register('customers/list', CustomerListComponent);
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideRouter(routes),
+ *     providePortalAzure({ title: 'My Portal', ... }),
+ *     provideBladeRouter(),
+ *   ],
+ * };
  * ```
  *
- * Or register multiple at once:
+ * Optionally pass a config to set a fixed route prefix:
  * ```typescript
- * registry.registerAll({
- *   'customers': CustomerNavComponent,
- *   'customers/list': CustomerListComponent,
- * });
+ * provideBladeRouter({ prefix: 'app' })   // → /app/customers/list
+ * provideBladeRouter({ prefix: '' })       // → /customers/list (no prefix)
  * ```
+ *
+ * Without this provider, blade navigation remains purely in-memory.
  */
-class BladeRegistry {
-    registry = new Map();
-    /** Register a component for a blade path */
-    register(path, component) {
-        this.registry.set(path.toLowerCase(), component);
+function provideBladeRouter(config) {
+    return makeEnvironmentProviders([
+        BladeRouterService,
+        { provide: BLADE_ROUTER_CONFIG, useValue: config ?? {} },
+        {
+            provide: ENVIRONMENT_INITIALIZER,
+            multi: true,
+            useFactory: () => () => inject(BladeRouterService),
+        },
+    ]);
+}
+
+/**
+ * Optional service that syncs the blade stack with the browser URL.
+ *
+ * When enabled, blade paths are stored as URL path segments with matrix params:
+ *   `/crm/customers/list/detail;id=1`
+ *
+ * This makes blade states bookmarkable, shareable, and back-button navigable.
+ *
+ * Opt-in: add `provideBladeRouter()` to your app providers alongside `provideRouter()`.
+ * Without it, blade navigation remains purely in-memory (no URL changes).
+ */
+class BladeRouterService {
+    router = inject(Router);
+    portal = inject(PortalService);
+    registry = inject(BladeRegistry);
+    destroyRef = inject(DestroyRef);
+    config = inject(BLADE_ROUTER_CONFIG, { optional: true }) ?? {};
+    _syncingFromUrl = false;
+    _initialRestoreDone = false;
+    constructor() {
+        // Sync: blade stack changes → URL path segments
+        effect(() => {
+            const blades = this.portal.blades();
+            if (this._syncingFromUrl)
+                return;
+            if (blades.length === 0 && !this._initialRestoreDone)
+                return;
+            const prefix = this.getEffectivePrefix();
+            const bladePath = this.encodeBladesToPath(blades);
+            const targetUrl = prefix
+                ? (bladePath ? `/${prefix}/${bladePath}` : `/${prefix}`)
+                : (bladePath ? `/${bladePath}` : `/`);
+            const currentPath = this.router.url.split('?')[0].split(';')[0];
+            // Only navigate if the path actually changed (avoid loops)
+            if (this.normalizeUrl(currentPath) !== this.normalizeUrl(targetUrl)) {
+                this.router.navigateByUrl(targetUrl);
+            }
+        });
+        // Sync: URL path segments → blade stack (on NavigationEnd)
+        const sub = this.router.events
+            .pipe(filter((e) => e instanceof NavigationEnd))
+            .subscribe((e) => {
+            this._initialRestoreDone = true;
+            const url = e.urlAfterRedirects;
+            // Backward compat: handle legacy ?blades= query param
+            const legacyParam = this.extractLegacyBladesParam(url);
+            if (legacyParam !== null) {
+                this.handleLegacyUrl(legacyParam);
+                return;
+            }
+            this.restoreFromPath(url);
+        });
+        this.destroyRef.onDestroy(() => sub.unsubscribe());
     }
-    /** Register multiple blade path → component mappings */
-    registerAll(mappings) {
-        for (const [path, component] of Object.entries(mappings)) {
-            this.register(path, component);
+    /**
+     * Encode the blade stack into URL path segments.
+     * Each blade contributes its "short name" (suffix after parent prefix).
+     * Blades with params get Angular matrix params appended.
+     *
+     * Example: [customers, customers/list, customers/detail{id:1}]
+     *   → "customers/list/detail;id=1"
+     */
+    encodeBladesToPath(blades) {
+        if (blades.length === 0)
+            return '';
+        const segments = [];
+        const allPaths = [];
+        for (const blade of blades) {
+            // Compute short name: strip the longest matching ancestor prefix
+            let shortName = blade.path;
+            for (let i = allPaths.length - 1; i >= 0; i--) {
+                if (blade.path.startsWith(allPaths[i] + '/')) {
+                    shortName = blade.path.substring(allPaths[i].length + 1);
+                    break;
+                }
+            }
+            // Append matrix params if any
+            let segment = shortName;
+            if (blade.params && Object.keys(blade.params).length > 0) {
+                const paramStr = Object.entries(blade.params)
+                    .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
+                    .join(';');
+                segment += ';' + paramStr;
+            }
+            segments.push(segment);
+            allPaths.push(blade.path);
         }
+        return segments.join('/');
     }
-    /** Get the component registered for a path, if any */
-    get(path) {
-        return this.registry.get(path.toLowerCase());
+    /**
+     * Decode URL path segments into blade definitions.
+     * Resolves short segment names to full blade paths using the registry.
+     *
+     * Example: "customers/list/detail;id=1" with route prefix "crm"
+     *   → [customers, customers/list, customers/detail] with detail.params={id:'1'}
+     */
+    decodeBladesFromPath(pathAfterPrefix) {
+        if (!pathAfterPrefix)
+            return [];
+        const rawSegments = pathAfterPrefix.split('/').filter(Boolean);
+        const blades = [];
+        const resolvedPaths = [];
+        for (const rawSegment of rawSegments) {
+            // Parse matrix params from segment: "detail;id=1" → name="detail", params={id:'1'}
+            const { name, params } = this.parseSegment(rawSegment);
+            // Resolve short name to full blade path
+            const fullPath = this.resolveSegment(name, resolvedPaths);
+            if (!fullPath) {
+                console.warn(`[BladeRouter] Could not resolve segment "${name}" to a registered blade path`);
+                continue;
+            }
+            const entry = this.registry.getEntry(fullPath);
+            const blade = createBlade(fullPath, entry?.title ?? fullPath, entry?.width ?? 315, params);
+            blades.push(blade);
+            resolvedPaths.push(fullPath);
+        }
+        return blades;
     }
-    /** Check if a component is registered for a path */
-    has(path) {
-        return this.registry.has(path.toLowerCase());
+    /**
+     * Parse a URL segment into its name and matrix parameters.
+     * "detail;id=1;mode=edit" → { name: "detail", params: { id: "1", mode: "edit" } }
+     */
+    parseSegment(segment) {
+        const parts = segment.split(';');
+        const name = decodeURIComponent(parts[0]);
+        const params = {};
+        for (let i = 1; i < parts.length; i++) {
+            const eqIndex = parts[i].indexOf('=');
+            if (eqIndex > 0) {
+                const key = decodeURIComponent(parts[i].substring(0, eqIndex));
+                const value = decodeURIComponent(parts[i].substring(eqIndex + 1));
+                params[key] = value;
+            }
+        }
+        return { name, params };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BladeRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BladeRegistry, providedIn: 'root' });
+    /**
+     * Resolve a short segment name to a full blade path using the registry.
+     * Tries parent/segment first, then walks up ancestors.
+     */
+    resolveSegment(name, previousPaths) {
+        // Direct match: the segment itself is a registered path
+        if (this.registry.has(name)) {
+            return name.toLowerCase();
+        }
+        // Try prepending each previous blade path (most recent first)
+        for (let i = previousPaths.length - 1; i >= 0; i--) {
+            const candidate = previousPaths[i] + '/' + name;
+            if (this.registry.has(candidate)) {
+                return candidate.toLowerCase();
+            }
+        }
+        return null;
+    }
+    /** Restore blade stack from a path-based URL */
+    restoreFromPath(url) {
+        const prefix = this.getEffectivePrefix();
+        const path = url.split('?')[0]; // strip query params
+        let pathAfterPrefix;
+        if (prefix) {
+            const prefixPattern = '/' + prefix;
+            if (!path.startsWith(prefixPattern))
+                return;
+            pathAfterPrefix = path.substring(prefixPattern.length + 1); // +1 for trailing /
+        }
+        else {
+            // No prefix: everything after the leading / is blade path
+            pathAfterPrefix = path.substring(1);
+        }
+        const newBlades = this.decodeBladesFromPath(pathAfterPrefix);
+        const currentPaths = this.portal.blades().map((b) => b.path);
+        const newPaths = newBlades.map((b) => b.path);
+        // Skip if blade stack already matches (paths and params)
+        if (newPaths.length === currentPaths.length &&
+            newPaths.every((p, i) => p === currentPaths[i]) &&
+            this.paramsMatch(newBlades, this.portal.blades())) {
+            return;
+        }
+        this._syncingFromUrl = true;
+        this.portal.blades.set(newBlades);
+        // Restore parameter signal for backward compat (from deepest blade with params)
+        const deepestWithParams = [...newBlades].reverse().find((b) => Object.keys(b.params).length > 0);
+        if (deepestWithParams && deepestWithParams.params['id']) {
+            this.portal.setParameter({
+                action: 'edit',
+                itemId: Number(deepestWithParams.params['id']) || 0,
+            });
+        }
+        queueMicrotask(() => (this._syncingFromUrl = false));
+    }
+    /** Check if params match between two blade arrays */
+    paramsMatch(a, b) {
+        if (a.length !== b.length)
+            return false;
+        return a.every((blade, i) => {
+            const aKeys = Object.keys(blade.params);
+            const bKeys = Object.keys(b[i].params);
+            if (aKeys.length !== bKeys.length)
+                return false;
+            return aKeys.every((k) => blade.params[k] === b[i].params[k]);
+        });
+    }
+    /** Get the route prefix from the current URL (e.g., 'crm' from '/crm/...') */
+    getRoutePrefix() {
+        const url = this.router.url.split('?')[0];
+        const firstSegment = url.split('/').filter(Boolean)[0] ?? '';
+        return firstSegment.split(';')[0];
+    }
+    /** Normalize URL for comparison (strip trailing slashes) */
+    normalizeUrl(url) {
+        return url.replace(/\/+$/, '') || '/';
+    }
+    // --- Legacy backward compatibility ---
+    /** Extract legacy `blades` query parameter from URL */
+    extractLegacyBladesParam(url) {
+        const qIndex = url.indexOf('?');
+        if (qIndex === -1)
+            return null;
+        const params = new URLSearchParams(url.substring(qIndex));
+        return params.get('blades');
+    }
+    /** Handle legacy ?blades= URL by redirecting to new path format */
+    handleLegacyUrl(bladesParam) {
+        const paths = bladesParam.split(',').filter(Boolean);
+        if (paths.length === 0)
+            return;
+        // Create temporary blades to encode
+        const blades = paths.map((path) => {
+            const entry = this.registry.getEntry(path);
+            return createBlade(path, entry?.title ?? path, entry?.width ?? 315);
+        });
+        const prefix = this.getEffectivePrefix();
+        const bladePath = this.encodeBladesToPath(blades);
+        const newUrl = prefix
+            ? (bladePath ? `/${prefix}/${bladePath}` : `/${prefix}`)
+            : (bladePath ? `/${bladePath}` : `/`);
+        // Redirect to new format
+        this.router.navigateByUrl(newUrl, { replaceUrl: true });
+    }
+    /**
+     * Return the effective route prefix. If a prefix was configured via
+     * `provideBladeRouter({ prefix })`, use it (including empty string).
+     * Otherwise fall back to dynamically reading the first URL segment.
+     */
+    getEffectivePrefix() {
+        if (this.config.prefix !== undefined) {
+            return this.config.prefix;
+        }
+        return this.getRoutePrefix();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: BladeRouterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: BladeRouterService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BladeRegistry, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: BladeRouterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
 
 /**
  * Provide the angular-portal-azure library configuration.
@@ -834,27 +1260,32 @@ function providePortalAzure(config) {
  * ```
  */
 class TileComponent {
-    tile = input.required(...(ngDevMode ? [{ debugName: "tile" }] : []));
+    tile = input.required(...(ngDevMode ? [{ debugName: "tile" }] : /* istanbul ignore next */ []));
     tileClick = output();
     onClick() {
-        this.tileClick.emit(this.tile());
+        if (!this.tile().disabled) {
+            this.tileClick.emit(this.tile());
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TileComponent, isStandalone: true, selector: "apa-tile", inputs: { tile: { classPropertyName: "tile", publicName: "tile", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { tileClick: "tileClick" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: TileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: TileComponent, isStandalone: true, selector: "apa-tile", inputs: { tile: { classPropertyName: "tile", publicName: "tile", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { tileClick: "tileClick" }, ngImport: i0, template: `
     <section
       class="fxs-tile fx-rightClick fxs-flowlayout-element"
       [class.fxs-tilesize-normal]="tile().size === 'normal'"
       [class.fxs-tilesize-mini]="tile().size === 'mini'"
       [class.fxs-tilesize-herowide]="tile().size === 'herowide'"
       [class.fxs-tilesize-small]="tile().size === 'small'">
-      <div class="fxs-part fxs-part-clickable"
+      <div class="fxs-part"
+           [class.fxs-part-clickable]="!tile().disabled"
            role="button"
-           tabindex="0"
+           [attr.tabindex]="tile().disabled ? -1 : 0"
            [attr.aria-label]="tile().title"
+           [attr.aria-disabled]="tile().disabled || null"
            (click)="onClick()"
            (keydown.enter)="onClick()"
            (keydown.space)="onClick(); $event.preventDefault()"
-           style="cursor:pointer;">
+           [style.cursor]="tile().disabled ? 'default' : 'pointer'"
+           [style.opacity]="tile().disabled ? 0.45 : 1">
         <header class="fxs-part-title">
           <h2 class="msportalfx-tooltip-overflow">{{ tile().title }}</h2>
           @if (tile().subtitle) {
@@ -867,7 +1298,7 @@ class TileComponent {
     </section>
   `, isInline: true, styles: [":host{display:contents}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: TileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'apa-tile', standalone: true, template: `
     <section
@@ -876,14 +1307,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
       [class.fxs-tilesize-mini]="tile().size === 'mini'"
       [class.fxs-tilesize-herowide]="tile().size === 'herowide'"
       [class.fxs-tilesize-small]="tile().size === 'small'">
-      <div class="fxs-part fxs-part-clickable"
+      <div class="fxs-part"
+           [class.fxs-part-clickable]="!tile().disabled"
            role="button"
-           tabindex="0"
+           [attr.tabindex]="tile().disabled ? -1 : 0"
            [attr.aria-label]="tile().title"
+           [attr.aria-disabled]="tile().disabled || null"
            (click)="onClick()"
            (keydown.enter)="onClick()"
            (keydown.space)="onClick(); $event.preventDefault()"
-           style="cursor:pointer;">
+           [style.cursor]="tile().disabled ? 'default' : 'pointer'"
+           [style.opacity]="tile().disabled ? 0.45 : 1">
         <header class="fxs-part-title">
           <h2 class="msportalfx-tooltip-overflow">{{ tile().title }}</h2>
           @if (tile().subtitle) {
@@ -904,20 +1338,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * Displays tiles on the startboard. When a tile is clicked, it opens
  * the first blade via BladeService.setFirstBlade().
  *
+ * When `autoNavigate` is true (default), clicking a tile automatically
+ * opens the first blade. Set it to false to handle tile clicks manually
+ * via the `(tileClick)` output.
+ *
  * Usage:
  * ```html
  * <apa-panorama />
+ * <apa-panorama [autoNavigate]="false" (tileClick)="onTileClick($event)" />
  * ```
  */
 class PanoramaComponent {
     portal = inject(PortalService);
     bladeService = inject(BladeService);
+    /** When false, tile clicks only emit tileClick without opening a blade. */
+    autoNavigate = input(true, ...(ngDevMode ? [{ debugName: "autoNavigate" }] : /* istanbul ignore next */ []));
+    /** Emitted when a tile is clicked (always, regardless of autoNavigate). */
+    tileClick = output();
     panorama = this.portal.panorama;
     onTileClick(tile) {
-        this.bladeService.setFirstBlade(tile.bladePath, tile.title);
+        this.tileClick.emit(tile);
+        if (this.autoNavigate()) {
+            this.bladeService.setFirstBlade(tile.bladePath, tile.title);
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PanoramaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PanoramaComponent, isStandalone: true, selector: "apa-panorama", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: PanoramaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: PanoramaComponent, isStandalone: true, selector: "apa-panorama", inputs: { autoNavigate: { classPropertyName: "autoNavigate", publicName: "autoNavigate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tileClick: "tileClick" }, ngImport: i0, template: `
     @if (portal.isPanoramaVisible()) {
       <div class="fxs-panorama-homearea" [class.collapsed]="!panorama().showTiles">
         <div class="fxs-startboard-target fxs-startboard fx-rightClick" [class.collapsed]="!panorama().showTiles">
@@ -943,7 +1389,7 @@ class PanoramaComponent {
     }
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: TileComponent, selector: "apa-tile", inputs: ["tile"], outputs: ["tileClick"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PanoramaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: PanoramaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'apa-panorama', standalone: true, imports: [TileComponent], template: `
     @if (portal.isPanoramaVisible()) {
@@ -970,7 +1416,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
       </div>
     }
   `, styles: [":host{display:contents}\n"] }]
-        }] });
+        }], propDecorators: { autoNavigate: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoNavigate", required: false }] }], tileClick: [{ type: i0.Output, args: ["tileClick"] }] } });
 
 /**
  * Root portal shell component.
@@ -995,7 +1441,7 @@ class PortalLayoutComponent {
     elementRef = inject(ElementRef);
     injector = inject(Injector);
     destroyRef = inject(DestroyRef);
-    isDark = signal(false, ...(ngDevMode ? [{ debugName: "isDark" }] : []));
+    isDark = signal(false, ...(ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []));
     /** Available languages from the preset registry */
     availableLanguages = Array.from(LANGUAGE_PRESETS.values()).map((p) => ({ code: p.code, displayName: p.displayName }));
     constructor() {
@@ -1110,8 +1556,8 @@ class PortalLayoutComponent {
         targetScroll = Math.min(targetScroll, currentScroll + viewportWidth);
         scrollContainer.scrollTo({ left: targetScroll, behavior: 'smooth' });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PortalLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PortalLayoutComponent, isStandalone: true, selector: "apa-portal-layout", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: PortalLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: PortalLayoutComponent, isStandalone: true, selector: "apa-portal-layout", ngImport: i0, template: `
     <div class="fxs-portal fxs-theme-blue">
       <!-- Top bar -->
       <header class="fxs-topbar" role="banner">
@@ -1198,7 +1644,7 @@ class PortalLayoutComponent {
     </div>
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PortalLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: PortalLayoutComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'apa-portal-layout',
@@ -1304,7 +1750,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * ```
  */
 class CommandBarComponent {
-    commands = input([], ...(ngDevMode ? [{ debugName: "commands" }] : []));
+    commands = input([], ...(ngDevMode ? [{ debugName: "commands" }] : /* istanbul ignore next */ []));
     visibleCommands() {
         return this.commands().filter((c) => c.visible);
     }
@@ -1316,8 +1762,8 @@ class CommandBarComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CommandBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CommandBarComponent, isStandalone: true, selector: "apa-command-bar", inputs: { commands: { classPropertyName: "commands", publicName: "commands", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: CommandBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: CommandBarComponent, isStandalone: true, selector: "apa-command-bar", inputs: { commands: { classPropertyName: "commands", publicName: "commands", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <nav class="fxs-commandBar" role="toolbar" aria-label="Commands">
       <ul class="fxs-commandBar-itemList" role="list">
         @for (cmd of visibleCommands(); track cmd.key) {
@@ -1344,7 +1790,7 @@ class CommandBarComponent {
     </nav>
   `, isInline: true, styles: [":host{display:block}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CommandBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: CommandBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'apa-command-bar', standalone: true, template: `
     <nav class="fxs-commandBar" role="toolbar" aria-label="Commands">
@@ -1389,7 +1835,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * ```
  */
 class BladeComponent {
-    blade = input.required(...(ngDevMode ? [{ debugName: "blade" }] : []));
+    blade = input.required(...(ngDevMode ? [{ debugName: "blade" }] : /* istanbul ignore next */ []));
     bladeClose = output();
     portal = inject(PortalService);
     bladeService = inject(BladeService);
@@ -1398,8 +1844,8 @@ class BladeComponent {
         this.bladeClose.emit(b);
         this.bladeService.closeBlade(b);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BladeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: BladeComponent, isStandalone: true, selector: "apa-blade", inputs: { blade: { classPropertyName: "blade", publicName: "blade", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { bladeClose: "bladeClose" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: BladeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: BladeComponent, isStandalone: true, selector: "apa-blade", inputs: { blade: { classPropertyName: "blade", publicName: "blade", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { bladeClose: "bladeClose" }, ngImport: i0, template: `
     <section class="fxs-blade-locked fxs-blade fx-rightClick fxs-bladesize-small"
              role="region"
              [attr.aria-label]="blade().title"
@@ -1458,7 +1904,7 @@ class BladeComponent {
     </section>
   `, isInline: true, styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: CommandBarComponent, selector: "apa-command-bar", inputs: ["commands"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BladeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: BladeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'apa-blade', standalone: true, imports: [CommandBarComponent], template: `
     <section class="fxs-blade-locked fxs-blade fx-rightClick fxs-bladesize-small"
@@ -1533,54 +1979,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  *
  * Usage:
  * ```html
+ * <!-- Default: each component is wrapped in <apa-blade> -->
  * <apa-blade-host />
+ *
+ * <!-- No wrapper: components render directly (they manage their own blade chrome) -->
+ * <apa-blade-host [wrapBlade]="false" />
  * ```
  */
 class BladeHostComponent {
+    /** Whether to wrap each component in an `<apa-blade>` element. Default: true. */
+    wrapBlade = input(true, ...(ngDevMode ? [{ debugName: "wrapBlade" }] : /* istanbul ignore next */ []));
     portal = inject(PortalService);
     registry = inject(BladeRegistry);
     getComponent(path) {
         return this.registry.get(path) ?? null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BladeHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: BladeHostComponent, isStandalone: true, selector: "apa-blade-host", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: BladeHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: BladeHostComponent, isStandalone: true, selector: "apa-blade-host", inputs: { wrapBlade: { classPropertyName: "wrapBlade", publicName: "wrapBlade", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div id="apa-blade-area" class="fxs-journey-target fxs-journey">
       <div class="fxs-journey-layout fxs-stacklayout fxs-stacklayout-horizontal">
-        @for (blade of portal.blades(); track blade.path) {
+        @for (blade of portal.blades(); track blade.uid) {
           <div class="azureportalblade fxs-stacklayout-child">
-            <apa-blade [blade]="blade">
+            @if (wrapBlade()) {
+              <apa-blade [blade]="blade">
+                @if (getComponent(blade.path); as component) {
+                  <ng-container *ngComponentOutlet="component" />
+                } @else {
+                  <p style="padding:25px; color:var(--apa-text-secondary);">{{ blade.path }}</p>
+                }
+              </apa-blade>
+            } @else {
               @if (getComponent(blade.path); as component) {
                 <ng-container *ngComponentOutlet="component" />
               } @else {
                 <p style="padding:25px; color:var(--apa-text-secondary);">{{ blade.path }}</p>
               }
-            </apa-blade>
+            }
           </div>
         }
       </div>
     </div>
   `, isInline: true, styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: BladeComponent, selector: "apa-blade", inputs: ["blade"], outputs: ["bladeClose"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BladeHostComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: BladeHostComponent, decorators: [{
             type: Component,
             args: [{ selector: 'apa-blade-host', standalone: true, imports: [BladeComponent, NgComponentOutlet], template: `
     <div id="apa-blade-area" class="fxs-journey-target fxs-journey">
       <div class="fxs-journey-layout fxs-stacklayout fxs-stacklayout-horizontal">
-        @for (blade of portal.blades(); track blade.path) {
+        @for (blade of portal.blades(); track blade.uid) {
           <div class="azureportalblade fxs-stacklayout-child">
-            <apa-blade [blade]="blade">
+            @if (wrapBlade()) {
+              <apa-blade [blade]="blade">
+                @if (getComponent(blade.path); as component) {
+                  <ng-container *ngComponentOutlet="component" />
+                } @else {
+                  <p style="padding:25px; color:var(--apa-text-secondary);">{{ blade.path }}</p>
+                }
+              </apa-blade>
+            } @else {
               @if (getComponent(blade.path); as component) {
                 <ng-container *ngComponentOutlet="component" />
               } @else {
                 <p style="padding:25px; color:var(--apa-text-secondary);">{{ blade.path }}</p>
               }
-            </apa-blade>
+            }
           </div>
         }
       </div>
     </div>
   `, styles: [":host{display:block;height:100%}\n"] }]
-        }] });
+        }], propDecorators: { wrapBlade: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapBlade", required: false }] }] } });
 
 /**
  * Navigation blade content — renders a list of nav items.
@@ -1597,8 +2065,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * ```
  */
 class BladeNavComponent {
-    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
-    senderPath = input('', ...(ngDevMode ? [{ debugName: "senderPath" }] : []));
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    senderPath = input('', ...(ngDevMode ? [{ debugName: "senderPath" }] : /* istanbul ignore next */ []));
     bladeService = inject(BladeService);
     visibleItems() {
         return this.items().filter((item) => item.isVisible);
@@ -1613,8 +2081,8 @@ class BladeNavComponent {
         }
         item.callback?.();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BladeNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: BladeNavComponent, isStandalone: true, selector: "apa-blade-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, senderPath: { classPropertyName: "senderPath", publicName: "senderPath", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: BladeNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: BladeNavComponent, isStandalone: true, selector: "apa-blade-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, senderPath: { classPropertyName: "senderPath", publicName: "senderPath", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <table class="azc-grid-full azc-grid-multiselectable" role="grid" aria-label="Navigation">
       <colgroup>
         <col class="col0" style="width:28px;">
@@ -1644,7 +2112,7 @@ class BladeNavComponent {
     </table>
   `, isInline: true, styles: [":host{display:flex;flex-direction:column;flex:1}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BladeNavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: BladeNavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'apa-blade-nav', standalone: true, template: `
     <table class="azc-grid-full azc-grid-multiselectable" role="grid" aria-label="Navigation">
@@ -1697,11 +2165,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * ```
  */
 class BladeGridComponent {
-    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
-    senderPath = input('', ...(ngDevMode ? [{ debugName: "senderPath" }] : []));
-    displayField = input('title', ...(ngDevMode ? [{ debugName: "displayField" }] : []));
-    bladePathField = input('bladePath', ...(ngDevMode ? [{ debugName: "bladePathField" }] : []));
-    searchable = input(true, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    senderPath = input('', ...(ngDevMode ? [{ debugName: "senderPath" }] : /* istanbul ignore next */ []));
+    displayField = input('title', ...(ngDevMode ? [{ debugName: "displayField" }] : /* istanbul ignore next */ []));
+    bladePathField = input('bladePath', ...(ngDevMode ? [{ debugName: "bladePathField" }] : /* istanbul ignore next */ []));
+    idField = input('id', ...(ngDevMode ? [{ debugName: "idField" }] : /* istanbul ignore next */ []));
+    iconClass = input('ti ti-point-filled', ...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
+    searchable = input(true, ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
     itemClick = output();
     searchText = '';
     bladeService = inject(BladeService);
@@ -1719,11 +2189,13 @@ class BladeGridComponent {
         this.itemClick.emit(item);
         const bladePath = item[this.bladePathField()];
         if (bladePath) {
-            this.bladeService.addBlade(bladePath, this.senderPath());
+            const itemId = item[this.idField()];
+            const params = itemId != null ? { id: String(itemId) } : undefined;
+            this.bladeService.addBlade(bladePath, this.senderPath(), '', undefined, params);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BladeGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: BladeGridComponent, isStandalone: true, selector: "apa-blade-grid", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, senderPath: { classPropertyName: "senderPath", publicName: "senderPath", isSignal: true, isRequired: false, transformFunction: null }, displayField: { classPropertyName: "displayField", publicName: "displayField", isSignal: true, isRequired: false, transformFunction: null }, bladePathField: { classPropertyName: "bladePathField", publicName: "bladePathField", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: BladeGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: BladeGridComponent, isStandalone: true, selector: "apa-blade-grid", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, senderPath: { classPropertyName: "senderPath", publicName: "senderPath", isSignal: true, isRequired: false, transformFunction: null }, displayField: { classPropertyName: "displayField", publicName: "displayField", isSignal: true, isRequired: false, transformFunction: null }, bladePathField: { classPropertyName: "bladePathField", publicName: "bladePathField", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: `
     @if (searchable()) {
       <div style="padding:0 0 10px 0;">
         <input type="search"
@@ -1746,11 +2218,7 @@ class BladeGridComponent {
               (click)="onRowClick(item)"
               (keydown.enter)="onRowClick(item)">
             <td class="msportalfx-gridcolumn-asseticon" role="gridcell" aria-hidden="true">
-              <svg xmlns="http://www.w3.org/2000/svg" class="msportal-fx-svg-placeholder" viewBox="0 0 50 50" focusable="false" style="height:21px;width:21px;">
-                <rect class="msportalfx-svg-c04" x="19.8" y="39.4" width="10.6" height="3.4"/>
-                <polygon class="msportalfx-svg-c04" points="23.1,50 27,50 30.3,46.5 19.8,46.5"/>
-                <path class="msportalfx-svg-c20" d="M41.2 14.7v-.3c0-7.7-6.6-14.1-14.7-14.2-.2-.3-4.8.1-4.8.1-7.3.9-13 7-13 14.1 0 .2-.8 5.8 4.9 10.5 2.6 2.3 5.3 8.5 5.7 10.3l.3.6h10.6l.3-.6c.4-1.8 3.2-8 5.7-10.2C41.9 20.2 41.2 14.9 41.2 14.7z"/>
-              </svg>
+              <i [class]="iconClass()" style="font-size:20px; color:var(--apa-accent);"></i>
             </td>
             <td tabindex="0" role="gridcell">
               <span>{{ getDisplayValue(item) }}</span>
@@ -1761,7 +2229,7 @@ class BladeGridComponent {
     </table>
   `, isInline: true, styles: [":host{display:flex;flex-direction:column;flex:1}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BladeGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: BladeGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'apa-blade-grid', standalone: true, template: `
     @if (searchable()) {
@@ -1786,11 +2254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
               (click)="onRowClick(item)"
               (keydown.enter)="onRowClick(item)">
             <td class="msportalfx-gridcolumn-asseticon" role="gridcell" aria-hidden="true">
-              <svg xmlns="http://www.w3.org/2000/svg" class="msportal-fx-svg-placeholder" viewBox="0 0 50 50" focusable="false" style="height:21px;width:21px;">
-                <rect class="msportalfx-svg-c04" x="19.8" y="39.4" width="10.6" height="3.4"/>
-                <polygon class="msportalfx-svg-c04" points="23.1,50 27,50 30.3,46.5 19.8,46.5"/>
-                <path class="msportalfx-svg-c20" d="M41.2 14.7v-.3c0-7.7-6.6-14.1-14.7-14.2-.2-.3-4.8.1-4.8.1-7.3.9-13 7-13 14.1 0 .2-.8 5.8 4.9 10.5 2.6 2.3 5.3 8.5 5.7 10.3l.3.6h10.6l.3-.6c.4-1.8 3.2-8 5.7-10.2C41.9 20.2 41.2 14.9 41.2 14.7z"/>
-              </svg>
+              <i [class]="iconClass()" style="font-size:20px; color:var(--apa-accent);"></i>
             </td>
             <td tabindex="0" role="gridcell">
               <span>{{ getDisplayValue(item) }}</span>
@@ -1800,7 +2264,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
       </tbody>
     </table>
   `, styles: [":host{display:flex;flex-direction:column;flex:1}\n"] }]
-        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], senderPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "senderPath", required: false }] }], displayField: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayField", required: false }] }], bladePathField: [{ type: i0.Input, args: [{ isSignal: true, alias: "bladePathField", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], senderPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "senderPath", required: false }] }], displayField: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayField", required: false }] }], bladePathField: [{ type: i0.Input, args: [{ isSignal: true, alias: "bladePathField", required: false }] }], idField: [{ type: i0.Input, args: [{ isSignal: true, alias: "idField", required: false }] }], iconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconClass", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
 
 /**
  * Detail/edit blade content — renders a form area for editing an item.
@@ -1824,22 +2288,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * ```
  */
 class BladeDetailComponent {
-    blade = input.required(...(ngDevMode ? [{ debugName: "blade" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BladeDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: BladeDetailComponent, isStandalone: true, selector: "apa-blade-detail", inputs: { blade: { classPropertyName: "blade", publicName: "blade", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    blade = input.required(...(ngDevMode ? [{ debugName: "blade" }] : /* istanbul ignore next */ []));
+    bladeService = inject(BladeService);
+    /** The template-driven form projected into this detail, if any (auto-discovered). */
+    form = contentChild(NgForm, { ...(ngDevMode ? { debugName: "form" } : /* istanbul ignore next */ {}), descendants: true });
+    ngAfterContentInit() {
+        const blade = this.blade();
+        const isDirty = () => this.form()?.dirty ?? false;
+        // Expose on the lifecycle (for consumers) and register with the BladeService so navigation
+        // away from a dirty blade prompts for confirmation. No per-detail wiring needed — every
+        // detail that projects a <form> is guarded automatically.
+        blade.lifecycle.isDirty = isDirty;
+        this.bladeService.registerDirtyCheck(blade.path, isDirty);
+        // After a successful save, reset the form to pristine so the guard does not fire on a
+        // saved-but-not-yet-navigated blade. Wrap (don't replace) any existing onSavedItem hook.
+        const originalOnSaved = blade.lifecycle.onSavedItem;
+        blade.lifecycle.onSavedItem = () => {
+            this.form()?.form.markAsPristine();
+            originalOnSaved?.();
+        };
+    }
+    ngOnDestroy() {
+        this.bladeService.unregisterDirtyCheck(this.blade().path);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: BladeDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.3", type: BladeDetailComponent, isStandalone: true, selector: "apa-blade-detail", inputs: { blade: { classPropertyName: "blade", publicName: "blade", isSignal: true, isRequired: true, transformFunction: null } }, queries: [{ propertyName: "form", first: true, predicate: NgForm, descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="apa-blade-detail">
       <ng-content />
     </div>
   `, isInline: true, styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0}.apa-blade-detail{flex:1;display:flex;flex-direction:column;min-height:0}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BladeDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: BladeDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'apa-blade-detail', standalone: true, template: `
     <div class="apa-blade-detail">
       <ng-content />
     </div>
   `, styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0}.apa-blade-detail{flex:1;display:flex;flex-direction:column;min-height:0}\n"] }]
-        }], propDecorators: { blade: [{ type: i0.Input, args: [{ isSignal: true, alias: "blade", required: true }] }] } });
+        }], propDecorators: { blade: [{ type: i0.Input, args: [{ isSignal: true, alias: "blade", required: true }] }], form: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgForm), { ...{ descendants: true }, isSignal: true }] }] } });
 /**
  * Create standard detail blade commands (new, save, delete, cancel).
  * Convenience function for setting up typical detail/edit blade commands
@@ -1875,11 +2361,22 @@ function createDetailCommands(handlers, labels = DEFAULT_LABELS) {
  */
 class NotificationPanelComponent {
     portal = inject(PortalService);
+    wasVisible = false;
+    constructor() {
+        effect(() => {
+            const visible = this.portal.notification().isVisible;
+            if (visible && !this.wasVisible) {
+                const lifecycle = this.portal.notification().lifecycle;
+                queueMicrotask(() => lifecycle?.onShowed?.());
+            }
+            this.wasVisible = visible;
+        });
+    }
     onClose() {
         this.portal.hideNotification();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NotificationPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NotificationPanelComponent, isStandalone: true, selector: "apa-notification-panel", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: NotificationPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: NotificationPanelComponent, isStandalone: true, selector: "apa-notification-panel", ngImport: i0, template: `
     @if (portal.notification().isVisible) {
       <div class="apa-notification-panel"
            role="complementary"
@@ -1897,7 +2394,7 @@ class NotificationPanelComponent {
     }
   `, isInline: true, styles: [":host{display:contents}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NotificationPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: NotificationPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'apa-notification-panel', standalone: true, template: `
     @if (portal.notification().isVisible) {
@@ -1916,7 +2413,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
       </div>
     }
   `, styles: [":host{display:contents}\n"] }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Avatar menu — user account dropdown in the portal header.
@@ -1940,8 +2437,8 @@ class AvatarMenuComponent {
     displayName() {
         return getUserDisplayName(this.userAccount());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AvatarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AvatarMenuComponent, isStandalone: true, selector: "apa-avatar-menu", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: AvatarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: AvatarMenuComponent, isStandalone: true, selector: "apa-avatar-menu", ngImport: i0, template: `
     <div class="fxs-avatarmenu">
       <a class="fxs-has-hover" (click)="portal.toggleAvatarMenu()">
         <div class="fxs-avatarmenu-header">
@@ -1959,7 +2456,7 @@ class AvatarMenuComponent {
     </div>
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AvatarMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: AvatarMenuComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'apa-avatar-menu',
@@ -1998,10 +2495,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * ```
  */
 class SidebarComponent {
-    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
-    collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
-    width = input(200, ...(ngDevMode ? [{ debugName: "width" }] : []));
-    collapsedWidth = input(50, ...(ngDevMode ? [{ debugName: "collapsedWidth" }] : []));
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    width = input(200, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    collapsedWidth = input(50, ...(ngDevMode ? [{ debugName: "collapsedWidth" }] : /* istanbul ignore next */ []));
     bladeService = inject(BladeService);
     visibleItems() {
         return this.items().filter((item) => item.isVisible);
@@ -2012,8 +2509,8 @@ class SidebarComponent {
         }
         item.callback?.();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SidebarComponent, isStandalone: true, selector: "apa-sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, collapsedWidth: { classPropertyName: "collapsedWidth", publicName: "collapsedWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: SidebarComponent, isStandalone: true, selector: "apa-sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, collapsedWidth: { classPropertyName: "collapsedWidth", publicName: "collapsedWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <nav class="apa-sidebar" aria-label="Sidebar"
          [class.apa-sidebar-collapsed]="collapsed()"
          [style.width.px]="collapsed() ? collapsedWidth() : width()">
@@ -2040,7 +2537,7 @@ class SidebarComponent {
     </nav>
   `, isInline: true, styles: [".apa-sidebar{display:flex;flex-direction:column;background-color:var(--apa-chrome);height:100%;padding-top:10px;transition:width .2s ease}.apa-sidebar-item{display:flex;align-items:center;padding:10px 15px;color:var(--apa-chrome-text);text-decoration:none;font-size:13px;transition:background-color .15s ease}.apa-sidebar-item:hover{background-color:var(--apa-chrome-hover)}.apa-sidebar-icon{margin-right:10px;width:20px;text-align:center}.apa-sidebar-collapsed .apa-sidebar-icon{margin-right:0}.apa-sidebar-label{flex:1}.apa-sidebar-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background-color:var(--apa-accent);color:#fff;font-size:11px;font-weight:600;line-height:1}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SidebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'apa-sidebar', standalone: true, template: `
     <nav class="apa-sidebar" aria-label="Sidebar"
@@ -2079,5 +2576,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarMenuComponent, BladeComponent, BladeDetailComponent, BladeGridComponent, BladeHostComponent, BladeNavComponent, BladeRegistry, BladeService, CommandBarComponent, DEFAULT_LABELS, LABELS_DE_CH, LABELS_DE_DE, LABELS_EN, LABELS_ES, LABELS_FR, LABELS_IT, LANGUAGE_PRESETS, NotificationPanelComponent, PanoramaComponent, PortalLayoutComponent, PortalService, SidebarComponent, TILE_DIMENSIONS, TileComponent, TileSize, clearStatusBar, createAvatarMenu, createBlade, createCommand, createDataBlade, createDetailCommands, createNavItem, createNotificationPanel, createPanorama, createTile, executeDeleteItem, executeLoadItem, executeLoadItems, executeSaveItem, filterItems, getUserDisplayName, layoutTiles, providePortalAzure, registerLanguagePreset, statusBarError, statusBarInfo, statusBarSuccess };
+export { AvatarMenuComponent, BLADE_ROUTER_CONFIG, BladeComponent, BladeDetailComponent, BladeGridComponent, BladeHostComponent, BladeNavComponent, BladeRegistry, BladeRouterService, BladeService, CommandBarComponent, DEFAULT_LABELS, LABELS_DE_CH, LABELS_DE_DE, LABELS_EN, LABELS_ES, LABELS_FR, LABELS_IT, LANGUAGE_PRESETS, NotificationPanelComponent, PanoramaComponent, PortalLayoutComponent, PortalService, SidebarComponent, TILE_DIMENSIONS, TileComponent, TileSize, clearStatusBar, createAvatarMenu, createBlade, createCommand, createDataBlade, createDetailCommands, createNavItem, createNotificationPanel, createPanorama, createTile, executeDeleteItem, executeLoadItem, executeLoadItems, executeSaveItem, filterItems, getUserDisplayName, layoutTiles, nextBladeUid, provideBladeRouter, providePortalAzure, registerLanguagePreset, statusBarError, statusBarInfo, statusBarSuccess };
 //# sourceMappingURL=ardimedia-angular-portal-azure.mjs.map