@ardimedia/angular-portal-azure 0.3.25 → 0.3.28

package/README.md

@@ -1,63 +1,63 @@
-# AngularPortalAzure
-
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.1.0.
-
-## Code scaffolding
-
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
-
-```bash
-ng generate component component-name
-```
-
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
-
-```bash
-ng generate --help
-```
-
-## Building
-
-To build the library, run:
-
-```bash
-ng build angular-portal-azure
-```
-
-This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
-
-### Publishing the Library
-
-Once the project is built, you can publish your library by following these steps:
-
-1. Navigate to the `dist` directory:
-   ```bash
-   cd dist/angular-portal-azure
-   ```
-
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
-
-## Running unit tests
-
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
-
-```bash
-ng test
-```
-
-## Running end-to-end tests
-
-For end-to-end (e2e) testing, run:
-
-```bash
-ng e2e
-```
-
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
-
-## Additional Resources
-
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+# AngularPortalAzure
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.1.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build angular-portal-azure
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+   ```bash
+   cd dist/angular-portal-azure
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

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

@@ -1,8 +1,9 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject, DestroyRef, effect, makeEnvironmentProviders, APP_INITIALIZER, ENVIRONMENT_INITIALIZER, input, output, Component, ElementRef, Injector, 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' };
@@ -72,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 };
@@ -101,6 +103,7 @@ const LABELS_EN = {
     settings: 'Settings',
     language: 'Language',
     appearance: 'Appearance',
+    unsavedChangesConfirm: 'You have unsaved changes. Leave anyway?',
 };
 /** French */
 const LABELS_FR = {
@@ -128,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 = {
@@ -155,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 = {
@@ -182,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 */
@@ -689,6 +695,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
 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.
@@ -696,6 +766,11 @@ class BladeService {
      * Ported from AreaBlades.setFirstBlade() in v0.2.346.
      */
     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 entry = this.registry.getEntry(path);
         const blade = createBlade(path.toLowerCase(), title || entry?.title || path, width ?? entry?.width ?? 315);
@@ -715,7 +790,8 @@ class BladeService {
         // Cascade close first: remove blades after the sender
         // This ensures a blade at the same path gets recreated with new params
         if (senderPath) {
-            this.clearChild(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);
@@ -739,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.
@@ -752,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
@@ -761,6 +843,7 @@ class BladeService {
                 this.portal.hideNotification();
             }
         }
+        return true;
     }
     /**
      * Remove all blades AFTER a given path (keeps the blade itself).
@@ -770,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.
@@ -786,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();
         }
     }
     /**
@@ -796,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();
         }
     }
     /**
@@ -831,7 +924,43 @@ class BladeService {
 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');
+/**
+ * Enables opt-in URL synchronization for the blade stack.
+ *
+ * Add alongside `provideRouter()` and `providePortalAzure()`:
+ * ```typescript
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideRouter(routes),
+ *     providePortalAzure({ title: 'My Portal', ... }),
+ *     provideBladeRouter(),
+ *   ],
+ * };
+ * ```
+ *
+ * Optionally pass a config to set a fixed route prefix:
+ * ```typescript
+ * provideBladeRouter({ prefix: 'app' })   // → /app/customers/list
+ * provideBladeRouter({ prefix: '' })       // → /customers/list (no prefix)
+ * ```
+ *
+ * Without this provider, blade navigation remains purely in-memory.
+ */
+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.
@@ -849,6 +978,7 @@ class BladeRouterService {
     portal = inject(PortalService);
     registry = inject(BladeRegistry);
     destroyRef = inject(DestroyRef);
+    config = inject(BLADE_ROUTER_CONFIG, { optional: true }) ?? {};
     _syncingFromUrl = false;
     _initialRestoreDone = false;
     constructor() {
@@ -859,9 +989,11 @@ class BladeRouterService {
                 return;
             if (blades.length === 0 && !this._initialRestoreDone)
                 return;
-            const routePrefix = this.getRoutePrefix();
+            const prefix = this.getEffectivePrefix();
             const bladePath = this.encodeBladesToPath(blades);
-            const targetUrl = bladePath ? `/${routePrefix}/${bladePath}` : `/${routePrefix}`;
+            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)) {
@@ -986,12 +1118,19 @@ class BladeRouterService {
     }
     /** Restore blade stack from a path-based URL */
     restoreFromPath(url) {
-        const routePrefix = this.getRoutePrefix();
+        const prefix = this.getEffectivePrefix();
         const path = url.split('?')[0]; // strip query params
-        const prefixPattern = '/' + routePrefix;
-        if (!path.startsWith(prefixPattern))
-            return;
-        const pathAfterPrefix = path.substring(prefixPattern.length + 1); // +1 for trailing /
+        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);
@@ -1054,12 +1193,25 @@ class BladeRouterService {
             const entry = this.registry.getEntry(path);
             return createBlade(path, entry?.title ?? path, entry?.width ?? 315);
         });
-        const routePrefix = this.getRoutePrefix();
+        const prefix = this.getEffectivePrefix();
         const bladePath = this.encodeBladesToPath(blades);
-        const newUrl = bladePath ? `/${routePrefix}/${bladePath}` : `/${routePrefix}`;
+        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 });
 }
@@ -1098,36 +1250,6 @@ function providePortalAzure(config) {
     ]);
 }
 
-/**
- * Enables opt-in URL synchronization for the blade stack.
- *
- * Add alongside `provideRouter()` and `providePortalAzure()`:
- * ```typescript
- * export const appConfig: ApplicationConfig = {
- *   providers: [
- *     provideRouter(routes),
- *     providePortalAzure({ title: 'My Portal', ... }),
- *     provideBladeRouter(),
- *   ],
- * };
- * ```
- *
- * When enabled, blade paths sync to the URL as a query parameter:
- *   `?blades=customers,customers/list,customers/1`
- *
- * Without this provider, blade navigation remains purely in-memory.
- */
-function provideBladeRouter() {
-    return makeEnvironmentProviders([
-        BladeRouterService,
-        {
-            provide: ENVIRONMENT_INITIALIZER,
-            multi: true,
-            useFactory: () => () => inject(BladeRouterService),
-        },
-    ]);
-}
-
 /**
  * Individual dashboard tile.
  * Ported from the tile section in home.html (v0.2.346).
@@ -1322,6 +1444,17 @@ class PortalLayoutComponent {
     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 }));
+    /**
+     * Handle an avatar dropdown item click. If the item defines an action (e.g. open a blade), run it
+     * and suppress the default link navigation; otherwise let the href navigate normally.
+     */
+    onAvatarItemClick(item, event) {
+        this.portal.closeAvatarMenu();
+        if (item.action) {
+            event.preventDefault();
+            item.action();
+        }
+    }
     constructor() {
         const stored = localStorage.getItem(PortalLayoutComponent.STORAGE_KEY);
         const dark = stored === 'true';
@@ -1499,8 +1632,9 @@ class PortalLayoutComponent {
             </a>
             @if (portal.avatarMenu().isOpen && portal.avatarMenu().items.length > 0) {
               <div class="apa-avatar-dropdown" role="menu">
-                @for (item of portal.avatarMenu().items; track item.href) {
-                  <a class="apa-avatar-dropdown-item" role="menuitem" [href]="item.href">
+                @for (item of portal.avatarMenu().items; track item.label) {
+                  <a class="apa-avatar-dropdown-item" role="menuitem" [href]="item.href"
+                     (click)="onAvatarItemClick(item, $event)">
                     @if (item.icon) {
                       <i [class]="item.icon" aria-hidden="true"></i>
                     }
@@ -1591,8 +1725,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
             </a>
             @if (portal.avatarMenu().isOpen && portal.avatarMenu().items.length > 0) {
               <div class="apa-avatar-dropdown" role="menu">
-                @for (item of portal.avatarMenu().items; track item.href) {
-                  <a class="apa-avatar-dropdown-item" role="menuitem" [href]="item.href">
+                @for (item of portal.avatarMenu().items; track item.label) {
+                  <a class="apa-avatar-dropdown-item" role="menuitem" [href]="item.href"
+                     (click)="onAvatarItemClick(item, $event)">
                     @if (item.icon) {
                       <i [class]="item.icon" aria-hidden="true"></i>
                     }
@@ -1857,28 +1992,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", 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.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", ngImport: i0, template: `
+    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.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>
@@ -1892,19 +2041,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
       <div class="fxs-journey-layout fxs-stacklayout fxs-stacklayout-horizontal">
         @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.
@@ -2145,8 +2302,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
  */
 class BladeDetailComponent {
     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.1.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 } }, ngImport: i0, template: `
+    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>
@@ -2159,7 +2338,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
       <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
@@ -2410,5 +2589,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarMenuComponent, 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 };
+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