@quadrel-enterprise-ui/framework 20.6.1 → 20.7.0

package/fesm2022/quadrel-enterprise-ui-framework.mjs

@@ -3,7 +3,7 @@ import { inject, ElementRef, Directive, InjectionToken, HostBinding, Input, View
 import { Dialog, DialogRef, DialogModule } from '@angular/cdk/dialog';
 import * as i1 from '@angular/common';
 import { CommonModule, NgFor, NgIf, NgClass, NgTemplateOutlet, AsyncPipe } from '@angular/common';
-import { BehaviorSubject, pairwise, from, switchMap, map as map$1, Subject, throwError, of, ReplaySubject, merge, fromEvent, isObservable, NEVER, Observable, EMPTY, shareReplay, Subscription, distinctUntilChanged as distinctUntilChanged$1, debounce, timer, startWith as startWith$1, debounceTime as debounceTime$1, takeUntil as takeUntil$1, firstValueFrom, combineLatest, concat, take as take$1, delay, tap as tap$1, first, scan, queueScheduler, combineLatestWith, forkJoin, delayWhen, withLatestFrom, async, filter as filter$1 } from 'rxjs';
+import { BehaviorSubject, pairwise, from, switchMap, map as map$1, Subject, throwError, of, ReplaySubject, merge, fromEvent, isObservable, NEVER, Observable, EMPTY, shareReplay, Subscription, distinctUntilChanged as distinctUntilChanged$1, debounce, timer, startWith as startWith$1, debounceTime as debounceTime$1, takeUntil as takeUntil$1, firstValueFrom, combineLatest, concat, take as take$1, delay, tap as tap$1, first, scan, queueScheduler, filter as filter$1, concatMap as concatMap$1, exhaustMap, finalize, combineLatestWith, forkJoin, delayWhen, withLatestFrom, async } from 'rxjs';
 import { map, takeUntil, take, filter, catchError, debounceTime, startWith, distinctUntilChanged, concatMap, tap, skip, observeOn, switchMap as switchMap$1, pairwise as pairwise$1, mergeMap, delay as delay$1 } from 'rxjs/operators';
 import { v4 } from 'uuid';
 import * as i3 from '@ngx-translate/core';
@@ -1161,6 +1161,7 @@ class QdConfirmationDialogOpenerService {
     open(component, config) {
         config.panelClass = 'qd-custom-panel';
         config.width = config.dialogSize || QdDialogSize.Default;
+        config.disableClose = true;
         return this.dialog.open(component, config);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdConfirmationDialogOpenerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -1222,8 +1223,8 @@ class QdDialogService {
     open(component, config) {
         config.panelClass = 'qd-custom-panel';
         config.width = config.dialogSize || QdDialogSize.Default;
+        config.disableClose = true;
         if (config.dialogSize === QdDialogSize.FullWidth) {
-            config.disableClose = true;
             config.maxWidth = '100vw';
             config.width = '100vw';
             config.maxHeight = '100vh';
@@ -1435,8 +1436,7 @@ class QdDialogComponent {
         this.dialogService.pageDialogCanClose$.pipe(takeUntil(this._destroyed$)).subscribe(entry => {
             this._pageDialogCanCloseFn = entry?.owner === this.dialogRef ? entry.fn : null;
         });
-        if (this.isFullWidth)
-            this.bindEscToClose();
+        this.bindEscToClose();
     }
     ngAfterContentChecked() {
         const children = Array.from(this.body?.nativeElement?.children ?? []);
@@ -6855,185 +6855,230 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         }] });
 
 /**
- * Service for handling real-time server-sent events.
+ * Manages a server-sent event (SSE) connection with automatic reconnection and heartbeat monitoring.
  *
- * ### Benefits
+ * All service endpoints — including SSE — must be protected. The connection is therefore secured
+ * via Quadrel Auth (Bearer token) by default. When the access token refreshes, the connection is
+ * transparently rebuilt. Only disable authentication for endpoints that are explicitly public.
  *
- * - **Real-Time Interaction**: Enables live updates without user actions or polling.
- * - **Scalable and Flexible**: The system is flexible and easily expandable to handle new events.
- * - **Consistency**: Ensures synchronization between server and client states for a consistent user experience.
- * - **Authorization**: It uses the user's authentication (QdAuth) to secure the connection against the backend out-of-the-box. This requires a proper QdAuth setup. You can disable this feature when starting the connection.
+ * ### Reconnection behavior
+ *
+ * - **Heartbeat timeout**: If no HEARTBEAT event arrives within the expected interval, the service reconnects.
+ * - **401 Unauthorized**: Triggers exponential-backoff reconnection (max 5 attempts, capped at 30 s).
+ * - **Other errors**: Reconnects immediately when the EventSource transitions to CLOSED.
+ *
+ * Existing `observe()` subscriptions are preserved across reconnections.
  *
  * ### Usage
  *
  * ```ts
- * // Start the connection to the events
- * pushEventsService.connect('http://service-endpint/events');
- * // or start without authentication in case you don't need:
- * pushEventsService.connect('http://service-endpint/events', { disableAuthentication: true });
+ * pushEventsService.connect('https://api.example.com/events');
  *
- * // Subscribe to the event (Side Effect)
- * const subscription = pushEventsService.observe('RESOURCE_UPDATED').subscribe(event => handleEvent(event));
+ * const sub = pushEventsService.observe('RESOURCE_UPDATED').subscribe(event => handleEvent(event));
  *
- * // Unsubscribe to prevent memory leaks
- * subscription.unsubscribe();
- *
- * // Disconnect the connection
+ * sub.unsubscribe();
  * pushEventsService.disconnect();
  * ```
  */
 class QdPushEventsService {
     authenticationService = inject('QdAuthenticationService', { optional: true });
     _eventSource;
-    _eventSubscriptionSubjects = new Map();
+    _subjects = new Map();
     _listeners = [];
-    _heartbeatTimeout;
-    _reconnectDelayTime = 10000;
-    _heartbeatReconnectDelayTime = 100;
     _accessTokenSub;
     _options;
+    _heartbeatTimeout;
+    _heartbeatGracePeriod = 100;
+    _initialHeartbeatTimeout = 10000;
     _isUnauthorized = false;
+    _reconnectAttempts = 0;
+    _maxReconnectAttempts = 5;
+    _backoffTimer;
     /**
-     * Establishes an EventSource connection to the given URL.
-     * Automatically reconnects if heartbeat fails or is delayed.
-     * Subscribers are retained across reconnections.
+     * Opens an SSE connection to the given URL.
+     *
+     * With authentication enabled (default), the service subscribes to the `accessToken$` observable
+     * provided by Quadrel Auth and rebuilds the connection whenever the token changes.
+     * No-op if already connected.
+     *
+     * @param url The SSE endpoint URL.
+     * @param options Set `{ disableAuthentication: true }` only for explicitly public endpoints.
+     *
+     * @example
+     * ```ts
+     * // Authenticated (default — requires Quadrel Auth)
+     * pushEventsService.connect('https://api.example.com/events');
      *
-     * @param url The backend URL for the event stream.
-     * @param options Options for the connection
+     * // Without authentication (only for public endpoints)
+     * pushEventsService.connect('https://api.example.com/public-events', { disableAuthentication: true });
+     * ```
      */
     connect(url, options) {
         if (this.isConnectedOrConnecting())
             return;
-        if (!options?.disableAuthentication) {
-            if (!this.authenticationService) {
-                this.logError("Can't connect to SSE without QdAuth as the connection has to be secured. Please install QdAuth or disable authentication when connecting.");
-                return;
-            }
-            if (this._accessTokenSub)
-                this._accessTokenSub.unsubscribe();
-            this._accessTokenSub = this.authenticationService.accessToken$.subscribe((token) => {
-                this._options = { url, options };
-                this.connectEventSource(url, {
-                    headers: { Authorization: `Bearer ${token}` }
-                }, true);
-            });
+        this._options = { url, options };
+        if (options?.disableAuthentication) {
+            this.openEventSource(url);
         }
         else {
-            this._options = { url, options };
-            this.connectEventSource(url);
+            this.connectWithAuth(url);
         }
     }
     /**
-     * Closes the EventSource connection and clears all listeners.
-     * Subscribers are preserved for reconnection.
+     * Closes the EventSource connection, clears all event listeners, and cancels pending backoff timers.
+     * Subscription subjects are preserved so that a subsequent `connect()` re-attaches them.
+     *
+     * @example
+     * ```ts
+     * pushEventsService.disconnect();
+     * // Subjects survive — a new connect() will re-attach existing observe() subscriptions.
+     * ```
      */
     disconnect() {
         if (!this._eventSource) {
             this.logWarn('No active connection to disconnect.');
             return;
         }
-        this.removeAllEventListenersFromEventSource();
+        if (this._accessTokenSub) {
+            this._accessTokenSub.unsubscribe();
+            this._accessTokenSub = undefined;
+        }
+        if (this._heartbeatTimeout)
+            clearTimeout(this._heartbeatTimeout);
+        if (this._backoffTimer) {
+            clearTimeout(this._backoffTimer);
+            this._backoffTimer = undefined;
+        }
+        this.removeAllListeners();
         this._eventSource.close();
     }
     /**
-     * Returns an Observable for the specified event name.
-     * If not connected, returns `NEVER` and logs an error.
-     * Automatically adds a listener for the event if needed.
+     * Returns an Observable that emits whenever the server sends an event of the given type.
      *
-     * @param eventName The event type ('RESOURCE_CREATED', 'RESOURCE_UPDATED', 'RESOURCE_DELETED').
-     * @returns Observable<MessageEvent> The event stream.
+     * Lazily registers an EventSource listener on first call per event name.
+     * Returns `NEVER` and logs an error if no connection exists.
+     *
+     * @param eventName The SSE event type to listen for.
+     *
+     * @example
+     * ```ts
+     * pushEventsService.observe('RESOURCE_UPDATED').subscribe(event => handleUpdate(event));
+     * ```
      */
     observe(eventName) {
         if (!this._eventSource) {
-            this.logError('Cannot observe events without a connection. Call connect() first.');
+            this.logWarn('Cannot observe events without a connection. Call connect() first.');
             return NEVER;
         }
-        if (!this._eventSubscriptionSubjects.has(eventName)) {
-            this._eventSubscriptionSubjects.set(eventName, new Subject());
-            this.addEventListenerForEventName(eventName);
+        if (!this._subjects.has(eventName)) {
+            this._subjects.set(eventName, new Subject());
+            this.addListener(eventName, (event) => this._subjects.get(eventName).next(event));
         }
-        return this._eventSubscriptionSubjects.get(eventName).asObservable();
+        return this._subjects.get(eventName).asObservable();
     }
     /**
-     * Removes all listeners and clears all subscriptions.
-     * The EventSource connection remains open.
+     * Removes all event listeners and clears all subscription subjects. The connection stays open.
+     * Use this to reset all subscriptions without disconnecting the SSE stream.
+     *
+     * @example
+     * ```ts
+     * pushEventsService.unobserveAll();
+     * // Connection remains open, but no events are forwarded until observe() is called again.
+     * ```
      */
     unobserveAll() {
-        this.removeAllEventListenersFromEventSource();
-        this._eventSubscriptionSubjects.clear();
+        this.removeAllListeners();
+        this._subjects.clear();
     }
-    /**
-     * Checks if the EventSource is connected or in the process of connecting.
-     */
+    /** Returns `true` when the EventSource is in state OPEN or CONNECTING. */
     isConnectedOrConnecting() {
         return (this._eventSource &&
             (this._eventSource.readyState === EventSource.OPEN || this._eventSource.readyState === EventSource.CONNECTING));
     }
-    reconnect() {
-        if (this.isConnectedOrConnecting())
+    connectWithAuth(url) {
+        if (!this.authenticationService) {
+            this.logError("Can't connect to SSE without Quadrel Auth as the connection has to be secured. Please install Quadrel Auth or disable authentication when connecting.");
             return;
-        if (this._isUnauthorized)
+        }
+        this._accessTokenSub = this.authenticationService.accessToken$.subscribe((token) => {
+            this.openEventSource(url, { headers: { Authorization: `Bearer ${token}` } });
+        });
+    }
+    openEventSource(url, options = {}) {
+        this._isUnauthorized = false;
+        if (this._eventSource && this._eventSource.readyState !== EventSource.CLOSED)
+            this._eventSource.close();
+        this._eventSource = new EventSourcePolyfill(url, options);
+        this._eventSource.onerror = (err) => this.handleError(err);
+        this._eventSource.addEventListener('HEARTBEAT', (message) => this.handleHeartbeat(message));
+        if (this._heartbeatTimeout)
+            clearTimeout(this._heartbeatTimeout);
+        this._heartbeatTimeout = setTimeout(() => this.reconnect(), this._initialHeartbeatTimeout);
+        if (this._backoffTimer) {
+            clearTimeout(this._backoffTimer);
+            this._backoffTimer = undefined;
+        }
+        this._listeners = [];
+        this.reattachListeners();
+    }
+    reconnect() {
+        if (this.isConnectedOrConnecting() || this._isUnauthorized)
             return;
         this.disconnect();
         this.connect(this._options.url, this._options.options);
     }
-    addEventListenerForEventName(eventName) {
-        const callback = (messageEvent) => {
-            const subject = this._eventSubscriptionSubjects.get(eventName);
-            if (subject)
-                subject.next(messageEvent);
-        };
-        this._eventSource.addEventListener(eventName, callback);
-        this._listeners.push([eventName, callback]);
+    handleError(err) {
+        const status = err?.status || err?.target?.status;
+        if (status === 401) {
+            this._isUnauthorized = true;
+            this.logError('SSE connection unauthorized (401):', err);
+            this._eventSource.close();
+            this.scheduleRetry();
+            return;
+        }
+        if (this._eventSource.readyState === EventSource.CLOSED)
+            this.reconnect();
+        this.logError('SSE connection error:', err);
+    }
+    scheduleRetry() {
+        if (this._reconnectAttempts >= this._maxReconnectAttempts) {
+            this.logError(`SSE reconnect aborted after ${this._maxReconnectAttempts} failed attempts.`);
+            return;
+        }
+        const delay = Math.min(1000 * Math.pow(2, this._reconnectAttempts), 30000);
+        this._reconnectAttempts++;
+        this._backoffTimer = setTimeout(() => {
+            this._isUnauthorized = false;
+            this.reconnect();
+        }, delay);
     }
-    addEventListenersForExistingSubscriptions() {
-        this._eventSubscriptionSubjects.forEach((subject, eventName) => this.addEventListenerToEventSource(eventName, (messageEvent) => subject.next(messageEvent)));
+    handleHeartbeat(message) {
+        if (this._isUnauthorized)
+            return;
+        if (this._heartbeatTimeout)
+            clearTimeout(this._heartbeatTimeout);
+        this._reconnectAttempts = 0;
+        const interval = JSON.parse(message.data).interval;
+        this._heartbeatTimeout = setTimeout(() => this.reconnect(), interval + this._heartbeatGracePeriod);
     }
-    addEventListenerToEventSource(eventName, callback) {
+    addListener(eventName, callback) {
         this._eventSource.addEventListener(eventName, callback);
         this._listeners.push([eventName, callback]);
     }
-    removeAllEventListenersFromEventSource() {
-        if (!this._eventSource) {
-            this.logWarn('Cannot remove listeners: No active connection.');
+    reattachListeners() {
+        this._subjects.forEach((subject, eventName) => this.addListener(eventName, (event) => subject.next(event)));
+    }
+    removeAllListeners() {
+        if (!this._eventSource)
             return;
-        }
         this._listeners.forEach(([eventName, callback]) => this._eventSource.removeEventListener(eventName, callback));
         this._listeners = [];
     }
     logWarn(message) {
-        console.warn(`QD-UI | QdPushEventsService - ${message}`);
+        console.warn(`QD-UI | QdPushEvents - ${message}`);
     }
     logError(message, err) {
-        console.error(`QD-UI | QdPushEventsService - ${message}`, err);
-    }
-    connectEventSource(url, options = {}, reconnect) {
-        if (this._eventSource && this._eventSource.readyState !== EventSource.CLOSED)
-            this._eventSource.close();
-        if (!this._eventSource || this._eventSource.readyState === EventSource.CLOSED || reconnect)
-            this._eventSource = new EventSourcePolyfill(url, options);
-        this._eventSource.onerror = (err) => {
-            const status = err?.status || err?.target?.status;
-            if (status === 401) {
-                this._isUnauthorized = true;
-                this.logError('SSE connection unauthorized (401):', err);
-                this._eventSource.close();
-                return;
-            }
-            if (this._eventSource.readyState === EventSource.CLOSED)
-                this.reconnect();
-            this.logError('SSE connection error:', err);
-        };
-        this._eventSource.addEventListener('HEARTBEAT', (message) => {
-            if (this._isUnauthorized)
-                return;
-            if (this._heartbeatTimeout)
-                clearTimeout(this._heartbeatTimeout);
-            const interval = JSON.parse(message.data).interval;
-            this._heartbeatTimeout = setTimeout(() => this.reconnect(), interval + this._heartbeatReconnectDelayTime);
-        });
-        this._heartbeatTimeout = setTimeout(() => this.reconnect(), this._reconnectDelayTime);
-        this.addEventListenersForExistingSubscriptions();
+        console.error(`QD-UI | QdPushEvents - ${message}`, err);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPushEventsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPushEventsService, providedIn: 'root' });
@@ -20736,11 +20781,11 @@ class QdFilterItemSelectCategoryComponent {
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemSelectCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemSelectCategoryComponent, isStandalone: false, selector: "qd-filter-category-select", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-filter__category-select" }, viewQueries: [{ propertyName: "popoverDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }], ngImport: i0, template: "<div\n  *ngIf=\"showSelectButton$ | async\"\n  [class]=\"buttonClassName\"\n  [qdPopoverOnClick]=\"filterLayer\"\n  [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n  [qdPopoverStopPropagation]=\"true\"\n  [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n  [positionStrategy]=\"positionStrategy\"\n  (opened)=\"onLayerOpened()\"\n  (closed)=\"onLayerClosed()\"\n  [attr.data-test-id]=\"testId + '-select-button'\"\n>\n  <qd-icon\n    *ngIf=\"!open\"\n    [icon]=\"'ctrlDown'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--closed'\"\n    [attr.data-test-id]=\"testId + '-closed'\"\n  ></qd-icon>\n  <qd-icon\n    *ngIf=\"open\"\n    [icon]=\"'ctrlTop'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--open'\"\n    [attr.data-test-id]=\"testId + '-opened'\"\n  ></qd-icon>\n\n  <div class=\"qd-filter__category-button-caption\">\n    <span>\n      {{ i18n | translate }}\n    </span>\n  </div>\n\n  <ng-container *ngTemplateOutlet=\"SelectedChip\"></ng-container>\n</div>\n\n<ng-template #filterLayer>\n  <div [class]=\"layerContentClassName\">\n    <qd-icon\n      *ngIf=\"closeButton\"\n      [class]=\"'qd-filter__category-layer-close'\"\n      (click)=\"closeLayer()\"\n      [icon]=\"'timesLargeLight'\"\n      [attr.data-test-id]=\"testId + '-layer-close'\"\n    ></qd-icon>\n\n    <ng-container [ngSwitch]=\"type\">\n      <ng-container *ngSwitchCase=\"'multiSelect'\">\n        <qd-filter-form-items\n          *ngIf=\"filter\"\n          [inputFilterValue]=\"filterCategoryValue$ | async\"\n          (filterValueChange)=\"changeValue($event)\"\n          [data-test-id]=\"testId\"\n        ></qd-filter-form-items>\n\n        <div class=\"qd-filter__category-layer-items\">\n          <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n            <qd-filter-item-multi-select\n              *ngIf=\"!item.hidden\"\n              [categoryIndex]=\"categoryIndex\"\n              [itemIndex]=\"itemIndex\"\n              [filterId]=\"filterId\"\n              [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n            >\n            </qd-filter-item-multi-select>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'singleSelect'\">\n        <qd-filter-form-items\n          *ngIf=\"filter\"\n          [inputFilterValue]=\"filterCategoryValue$ | async\"\n          (filterValueChange)=\"changeValue($event)\"\n          [data-test-id]=\"testId\"\n        ></qd-filter-form-items>\n\n        <div class=\"qd-filter__category-layer-items\">\n          <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n            <qd-filter-item-single-select\n              *ngIf=\"!item.hidden\"\n              [categoryIndex]=\"categoryIndex\"\n              [itemIndex]=\"itemIndex\"\n              (closeEventEmitter)=\"closeLayer()\"\n              [filterId]=\"filterId\"\n              [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n            >\n            </qd-filter-item-single-select>\n          </ng-container>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #SelectedChip>\n  <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n    <!-- TODO: Add tooltip-->\n    <qd-chip\n      *ngIf=\"item.active\"\n      [state]=\"'filter'\"\n      [close]=\"true\"\n      (closeClickEmitter)=\"close($event)\"\n      [data]=\"itemIndex\"\n      [data-test-id]=\"testId + '-selected-chip-' + item.item\"\n      >{{ item.i18n | translate }}</qd-chip\n    >\n  </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdFilterFormItemsComponent, selector: "qd-filter-form-items", inputs: ["inputFilterValue", "data-test-id"], outputs: ["filterValueChange"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdFilterItemMultiSelectComponent, selector: "qd-filter-item-multi-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"] }, { kind: "component", type: QdFilterItemSingleSelectComponent, selector: "qd-filter-item-single-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"], outputs: ["closeEventEmitter"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemSelectCategoryComponent, isStandalone: false, selector: "qd-filter-category-select", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-filter__category-select" }, viewQueries: [{ propertyName: "popoverDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }], ngImport: i0, template: "<div\n  *ngIf=\"showSelectButton$ | async\"\n  [class]=\"buttonClassName\"\n  [qdPopoverOnClick]=\"filterLayer\"\n  [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n  [qdPopoverStopPropagation]=\"true\"\n  [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n  [positionStrategy]=\"positionStrategy\"\n  (opened)=\"onLayerOpened()\"\n  (closed)=\"onLayerClosed()\"\n  [attr.data-test-id]=\"testId + '-select-button'\"\n>\n  <qd-icon\n    *ngIf=\"!open\"\n    [icon]=\"'ctrlDown'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--closed'\"\n    [attr.data-test-id]=\"testId + '-closed'\"\n  ></qd-icon>\n  <qd-icon\n    *ngIf=\"open\"\n    [icon]=\"'ctrlTop'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--open'\"\n    [attr.data-test-id]=\"testId + '-opened'\"\n  ></qd-icon>\n\n  <div class=\"qd-filter__category-button-caption\">\n    <span>\n      {{ i18n | translate }}\n    </span>\n  </div>\n\n  <ng-container *ngTemplateOutlet=\"SelectedChip\"></ng-container>\n</div>\n\n<ng-template #filterLayer>\n  <div [class]=\"layerContentClassName\">\n    <qd-icon\n      *ngIf=\"closeButton\"\n      [class]=\"'qd-filter__category-layer-close'\"\n      (click)=\"closeLayer()\"\n      [icon]=\"'timesLargeLight'\"\n      [attr.data-test-id]=\"testId + '-layer-close'\"\n    ></qd-icon>\n\n    <ng-container [ngSwitch]=\"type\">\n      <ng-container *ngSwitchCase=\"'multiSelect'\">\n        <qd-filter-form-items\n          *ngIf=\"filter\"\n          [inputFilterValue]=\"filterCategoryValue$ | async\"\n          (filterValueChange)=\"changeValue($event)\"\n          [data-test-id]=\"testId\"\n        ></qd-filter-form-items>\n\n        <div class=\"qd-filter__category-layer-items\">\n          <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n            <qd-filter-item-multi-select\n              *ngIf=\"!item.hidden\"\n              [categoryIndex]=\"categoryIndex\"\n              [itemIndex]=\"itemIndex\"\n              [filterId]=\"filterId\"\n              [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n            >\n            </qd-filter-item-multi-select>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'singleSelect'\">\n        <qd-filter-form-items\n          *ngIf=\"filter\"\n          [inputFilterValue]=\"filterCategoryValue$ | async\"\n          (filterValueChange)=\"changeValue($event)\"\n          [data-test-id]=\"testId\"\n        ></qd-filter-form-items>\n\n        <div class=\"qd-filter__category-layer-items\">\n          <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n            <qd-filter-item-single-select\n              *ngIf=\"!item.hidden\"\n              [categoryIndex]=\"categoryIndex\"\n              [itemIndex]=\"itemIndex\"\n              (closeEventEmitter)=\"closeLayer()\"\n              [filterId]=\"filterId\"\n              [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n            >\n            </qd-filter-item-single-select>\n          </ng-container>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #SelectedChip>\n  <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n    <!-- TODO: Add tooltip-->\n    <qd-chip\n      *ngIf=\"item.active\"\n      [state]=\"'filter'\"\n      [close]=\"true\"\n      (closeClickEmitter)=\"close($event)\"\n      [data]=\"itemIndex\"\n      [data-test-id]=\"testId + '-selected-chip-' + item.item\"\n      >{{ item.i18n | translate }}</qd-chip\n    >\n  </ng-container>\n</ng-template>\n", styles: ["::ng-deep .qd-filter__category-layer{display:flex;overflow:hidden;min-width:16.25rem;max-width:56.25rem;height:100%;flex-direction:column;padding:1rem 0 0;border:.0625rem solid rgb(151,151,151);background:#fff;box-shadow:#d5d5d5 .125rem .25rem .4375rem}::ng-deep .qd-filter__category-layer .qd-filter-form-items__filter{flex-shrink:0;margin-bottom:0}::ng-deep .qd-filter__category-layer .qd-checkbox__label{display:flex;height:2.5rem}::ng-deep .qd-filter__category-layer .qd-checkbox__indicator,::ng-deep .qd-filter__category-layer .qd-radio-buttons__indicator{transform:translateY(-.0625rem)}::ng-deep .qd-filter__category-layer-items{flex:1;overflow-y:auto}::ng-deep .qd-filter__category-layer-container{position:relative}::ng-deep .qd-filter__category-layer-close{position:absolute;z-index:1;top:1rem;right:1rem;color:#757575;cursor:pointer}::ng-deep .qd-filter__category-layer-close:before{position:absolute;content:\"\";inset:-.5rem}::ng-deep .qd-filter__category-layer-close:hover,::ng-deep .qd-filter__category-layer-close:focus{color:#171717}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdFilterFormItemsComponent, selector: "qd-filter-form-items", inputs: ["inputFilterValue", "data-test-id"], outputs: ["filterValueChange"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdFilterItemMultiSelectComponent, selector: "qd-filter-item-multi-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"] }, { kind: "component", type: QdFilterItemSingleSelectComponent, selector: "qd-filter-item-single-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"], outputs: ["closeEventEmitter"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemSelectCategoryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-filter-category-select', host: { class: 'qd-filter__category-select' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  *ngIf=\"showSelectButton$ | async\"\n  [class]=\"buttonClassName\"\n  [qdPopoverOnClick]=\"filterLayer\"\n  [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n  [qdPopoverStopPropagation]=\"true\"\n  [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n  [positionStrategy]=\"positionStrategy\"\n  (opened)=\"onLayerOpened()\"\n  (closed)=\"onLayerClosed()\"\n  [attr.data-test-id]=\"testId + '-select-button'\"\n>\n  <qd-icon\n    *ngIf=\"!open\"\n    [icon]=\"'ctrlDown'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--closed'\"\n    [attr.data-test-id]=\"testId + '-closed'\"\n  ></qd-icon>\n  <qd-icon\n    *ngIf=\"open\"\n    [icon]=\"'ctrlTop'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--open'\"\n    [attr.data-test-id]=\"testId + '-opened'\"\n  ></qd-icon>\n\n  <div class=\"qd-filter__category-button-caption\">\n    <span>\n      {{ i18n | translate }}\n    </span>\n  </div>\n\n  <ng-container *ngTemplateOutlet=\"SelectedChip\"></ng-container>\n</div>\n\n<ng-template #filterLayer>\n  <div [class]=\"layerContentClassName\">\n    <qd-icon\n      *ngIf=\"closeButton\"\n      [class]=\"'qd-filter__category-layer-close'\"\n      (click)=\"closeLayer()\"\n      [icon]=\"'timesLargeLight'\"\n      [attr.data-test-id]=\"testId + '-layer-close'\"\n    ></qd-icon>\n\n    <ng-container [ngSwitch]=\"type\">\n      <ng-container *ngSwitchCase=\"'multiSelect'\">\n        <qd-filter-form-items\n          *ngIf=\"filter\"\n          [inputFilterValue]=\"filterCategoryValue$ | async\"\n          (filterValueChange)=\"changeValue($event)\"\n          [data-test-id]=\"testId\"\n        ></qd-filter-form-items>\n\n        <div class=\"qd-filter__category-layer-items\">\n          <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n            <qd-filter-item-multi-select\n              *ngIf=\"!item.hidden\"\n              [categoryIndex]=\"categoryIndex\"\n              [itemIndex]=\"itemIndex\"\n              [filterId]=\"filterId\"\n              [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n            >\n            </qd-filter-item-multi-select>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'singleSelect'\">\n        <qd-filter-form-items\n          *ngIf=\"filter\"\n          [inputFilterValue]=\"filterCategoryValue$ | async\"\n          (filterValueChange)=\"changeValue($event)\"\n          [data-test-id]=\"testId\"\n        ></qd-filter-form-items>\n\n        <div class=\"qd-filter__category-layer-items\">\n          <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n            <qd-filter-item-single-select\n              *ngIf=\"!item.hidden\"\n              [categoryIndex]=\"categoryIndex\"\n              [itemIndex]=\"itemIndex\"\n              (closeEventEmitter)=\"closeLayer()\"\n              [filterId]=\"filterId\"\n              [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n            >\n            </qd-filter-item-single-select>\n          </ng-container>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #SelectedChip>\n  <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n    <!-- TODO: Add tooltip-->\n    <qd-chip\n      *ngIf=\"item.active\"\n      [state]=\"'filter'\"\n      [close]=\"true\"\n      (closeClickEmitter)=\"close($event)\"\n      [data]=\"itemIndex\"\n      [data-test-id]=\"testId + '-selected-chip-' + item.item\"\n      >{{ item.i18n | translate }}</qd-chip\n    >\n  </ng-container>\n</ng-template>\n" }]
+            args: [{ selector: 'qd-filter-category-select', host: { class: 'qd-filter__category-select' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  *ngIf=\"showSelectButton$ | async\"\n  [class]=\"buttonClassName\"\n  [qdPopoverOnClick]=\"filterLayer\"\n  [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n  [qdPopoverStopPropagation]=\"true\"\n  [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n  [positionStrategy]=\"positionStrategy\"\n  (opened)=\"onLayerOpened()\"\n  (closed)=\"onLayerClosed()\"\n  [attr.data-test-id]=\"testId + '-select-button'\"\n>\n  <qd-icon\n    *ngIf=\"!open\"\n    [icon]=\"'ctrlDown'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--closed'\"\n    [attr.data-test-id]=\"testId + '-closed'\"\n  ></qd-icon>\n  <qd-icon\n    *ngIf=\"open\"\n    [icon]=\"'ctrlTop'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--open'\"\n    [attr.data-test-id]=\"testId + '-opened'\"\n  ></qd-icon>\n\n  <div class=\"qd-filter__category-button-caption\">\n    <span>\n      {{ i18n | translate }}\n    </span>\n  </div>\n\n  <ng-container *ngTemplateOutlet=\"SelectedChip\"></ng-container>\n</div>\n\n<ng-template #filterLayer>\n  <div [class]=\"layerContentClassName\">\n    <qd-icon\n      *ngIf=\"closeButton\"\n      [class]=\"'qd-filter__category-layer-close'\"\n      (click)=\"closeLayer()\"\n      [icon]=\"'timesLargeLight'\"\n      [attr.data-test-id]=\"testId + '-layer-close'\"\n    ></qd-icon>\n\n    <ng-container [ngSwitch]=\"type\">\n      <ng-container *ngSwitchCase=\"'multiSelect'\">\n        <qd-filter-form-items\n          *ngIf=\"filter\"\n          [inputFilterValue]=\"filterCategoryValue$ | async\"\n          (filterValueChange)=\"changeValue($event)\"\n          [data-test-id]=\"testId\"\n        ></qd-filter-form-items>\n\n        <div class=\"qd-filter__category-layer-items\">\n          <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n            <qd-filter-item-multi-select\n              *ngIf=\"!item.hidden\"\n              [categoryIndex]=\"categoryIndex\"\n              [itemIndex]=\"itemIndex\"\n              [filterId]=\"filterId\"\n              [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n            >\n            </qd-filter-item-multi-select>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'singleSelect'\">\n        <qd-filter-form-items\n          *ngIf=\"filter\"\n          [inputFilterValue]=\"filterCategoryValue$ | async\"\n          (filterValueChange)=\"changeValue($event)\"\n          [data-test-id]=\"testId\"\n        ></qd-filter-form-items>\n\n        <div class=\"qd-filter__category-layer-items\">\n          <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n            <qd-filter-item-single-select\n              *ngIf=\"!item.hidden\"\n              [categoryIndex]=\"categoryIndex\"\n              [itemIndex]=\"itemIndex\"\n              (closeEventEmitter)=\"closeLayer()\"\n              [filterId]=\"filterId\"\n              [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n            >\n            </qd-filter-item-single-select>\n          </ng-container>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #SelectedChip>\n  <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n    <!-- TODO: Add tooltip-->\n    <qd-chip\n      *ngIf=\"item.active\"\n      [state]=\"'filter'\"\n      [close]=\"true\"\n      (closeClickEmitter)=\"close($event)\"\n      [data]=\"itemIndex\"\n      [data-test-id]=\"testId + '-selected-chip-' + item.item\"\n      >{{ item.i18n | translate }}</qd-chip\n    >\n  </ng-container>\n</ng-template>\n", styles: ["::ng-deep .qd-filter__category-layer{display:flex;overflow:hidden;min-width:16.25rem;max-width:56.25rem;height:100%;flex-direction:column;padding:1rem 0 0;border:.0625rem solid rgb(151,151,151);background:#fff;box-shadow:#d5d5d5 .125rem .25rem .4375rem}::ng-deep .qd-filter__category-layer .qd-filter-form-items__filter{flex-shrink:0;margin-bottom:0}::ng-deep .qd-filter__category-layer .qd-checkbox__label{display:flex;height:2.5rem}::ng-deep .qd-filter__category-layer .qd-checkbox__indicator,::ng-deep .qd-filter__category-layer .qd-radio-buttons__indicator{transform:translateY(-.0625rem)}::ng-deep .qd-filter__category-layer-items{flex:1;overflow-y:auto}::ng-deep .qd-filter__category-layer-container{position:relative}::ng-deep .qd-filter__category-layer-close{position:absolute;z-index:1;top:1rem;right:1rem;color:#757575;cursor:pointer}::ng-deep .qd-filter__category-layer-close:before{position:absolute;content:\"\";inset:-.5rem}::ng-deep .qd-filter__category-layer-close:hover,::ng-deep .qd-filter__category-layer-close:focus{color:#171717}\n"] }]
         }], propDecorators: { filterId: [{
                 type: Input
             }], categoryIndex: [{
@@ -27158,18 +27203,24 @@ class QdFormGroupManagerService {
             const snapshot = this._formGroupsSnapshot.get(key);
             if (!snapshot)
                 return;
-            Object.entries(fg.controls).forEach(([ctrlKey, ctrl]) => {
-                const newValue = snapshot[ctrlKey];
-                if (ctrl instanceof FormArray && Array.isArray(newValue)) {
-                    this.resetFormArrayToValues(ctrl, newValue);
-                }
-                else {
-                    ctrl.reset(newValue);
-                }
-            });
+            this.restoreFormGroup(fg, snapshot);
         });
         this.cancelPendingAsyncValidation();
     }
+    restoreFormGroup(fg, snapshot) {
+        Object.entries(fg.controls).forEach(([ctrlKey, ctrl]) => {
+            const newValue = snapshot[ctrlKey];
+            if (ctrl instanceof FormArray && Array.isArray(newValue)) {
+                this.resetFormArrayToValues(ctrl, newValue);
+            }
+            else if (ctrl instanceof FormGroup && newValue && typeof newValue === 'object') {
+                this.restoreFormGroup(ctrl, newValue);
+            }
+            else {
+                ctrl.reset(newValue);
+            }
+        });
+    }
     /**
      * Cancels any in-flight async validators on all registered form groups.
      *
@@ -28536,6 +28587,121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Intercepts router navigation when unsaved form changes exist on a QdPage.
+ *
+ * Provided per `QdPageComponent`. Activated automatically when the page enters an editable state
+ * (create pages or inspect pages in edit mode). Deactivated when the page returns to view mode.
+ *
+ * #### When navigation is intercepted
+ *
+ * - The user has unsaved form changes (tracked via `QdFormGroupManagerService`).
+ * - A `NavigationStart` event occurs (browser back, shell back button, or programmatic navigation).
+ *
+ * The current navigation is cancelled, and a confirmation dialog is shown. The user can either
+ * discard changes and proceed or cancel and stay on the page.
+ *
+ * #### When navigation is allowed
+ *
+ * - No unsaved changes exist — navigation proceeds silently.
+ * - A framework action (Submit, SaveDraft) wraps its handler via `executeWithBypass()`.
+ * - A confirmed discard sets `allowNextNavigation()` before the cancel handler navigates.
+ * - The page switches to view mode via `deactivate()`.
+ *
+ * Custom actions defined by the application are not bypassed. If a custom action navigates away
+ * while unsaved changes exist, the confirmation dialog is shown.
+ */
+class QdPageNavigationInterceptorService {
+    router = inject(Router);
+    formGroupManager = inject(QdFormGroupManagerService);
+    confirmationDialog = inject(QdConfirmationDialogOpenerService);
+    _destroy$ = new Subject();
+    _deactivate$ = new Subject();
+    _bypassInterception = false;
+    _allowedTargetUrls = new Set();
+    _confirmationMessage;
+    ngOnDestroy() {
+        this._allowedTargetUrls.clear();
+        this._destroy$.next();
+        this._destroy$.complete();
+        this._deactivate$.complete();
+    }
+    /**
+     * Starts intercepting navigation events. Replaces any previously active listener.
+     */
+    activate(confirmationMessage) {
+        this._confirmationMessage = confirmationMessage;
+        this._deactivate$.next();
+        this.listenForUnsavedNavigationAttempts();
+    }
+    /**
+     * Stops intercepting and clears all pending URL bypasses.
+     */
+    deactivate() {
+        this._deactivate$.next();
+        this._allowedTargetUrls.clear();
+    }
+    /**
+     * Whitelists the next navigation so it bypasses interception.
+     * Without a URL, any next navigation is bypassed (wildcard). With a URL, only that
+     * specific navigation is bypassed — non-matching navigations are still intercepted.
+     */
+    allowNextNavigation(targetUrl) {
+        this._allowedTargetUrls.add(targetUrl ?? '*');
+    }
+    /**
+     * Executes the callback with interception temporarily disabled.
+     * The callback must navigate synchronously — async navigation after the callback returns
+     * will not be bypassed. This works because Angular's router emits NavigationStart
+     * synchronously within the navigateByUrl() / navigate() call.
+     */
+    executeWithBypass(fn) {
+        this._bypassInterception = true;
+        try {
+            fn();
+        }
+        finally {
+            this._bypassInterception = false;
+        }
+    }
+    listenForUnsavedNavigationAttempts() {
+        this.router.events
+            .pipe(filter$1((event) => event instanceof NavigationStart), filter$1(() => !this._bypassInterception), filter$1(event => this.shouldIntercept(event)), concatMap$1(event => this.checkForPendingChanges(event)), filter$1(({ hasChanges }) => hasChanges), exhaustMap(({ event }) => this.cancelNavigationAndConfirm(event)), filter$1(({ confirmed }) => confirmed), takeUntil$1(this._deactivate$), takeUntil$1(this._destroy$))
+            .subscribe(({ targetUrl }) => this.navigateToConfirmedTarget(targetUrl));
+    }
+    shouldIntercept(event) {
+        if (this._allowedTargetUrls.has('*')) {
+            this._allowedTargetUrls.clear();
+            return false;
+        }
+        if (this._allowedTargetUrls.has(event.url)) {
+            this._allowedTargetUrls.delete(event.url);
+            return false;
+        }
+        return true;
+    }
+    checkForPendingChanges(event) {
+        return this.formGroupManager.$hasValuesChanged().pipe(take$1(1), map$1(hasChanges => ({ event, hasChanges })));
+    }
+    cancelNavigationAndConfirm(event) {
+        this._bypassInterception = true;
+        void this.router.navigateByUrl(this.router.url, { skipLocationChange: true });
+        return this.confirmationDialog
+            .showCancelConfirmation({ cancel: { confirmationMessage: this._confirmationMessage } })
+            .pipe(map$1(confirmed => ({ confirmed, targetUrl: event.url })), finalize(() => (this._bypassInterception = false)));
+    }
+    navigateToConfirmedTarget(targetUrl) {
+        this._bypassInterception = false;
+        this._allowedTargetUrls.add(targetUrl);
+        void this.router.navigateByUrl(targetUrl);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageNavigationInterceptorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageNavigationInterceptorService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageNavigationInterceptorService, decorators: [{
+            type: Injectable
+        }] });
+
 class QdPageSubmitActionService {
     footerService = inject(QdPageFooterService);
     formGroupManagerService = inject(QdFormGroupManagerService);
@@ -28997,6 +29163,7 @@ class QdPageComponent {
     dialog = inject(QdDialogService);
     bottomOffset$ = inject(QD_SAFE_BOTTOM_OFFSET, { optional: true });
     dialogRef = inject(DialogRef, { optional: true });
+    navigationInterceptor = inject(QdPageNavigationInterceptorService);
     /**
      * This property defines the configuration for the QdPage component, including the page type,
      * title, and specific configurations for each type of page.
@@ -29064,8 +29231,10 @@ class QdPageComponent {
             ]);
     }
     ngAfterViewInit() {
-        if (this.config.pageType === 'create')
+        if (this.config.pageType === 'create') {
             this.setupCreatePageFooterActions();
+            this.navigationInterceptor.activate(this.config.pageTypeConfig?.cancel?.confirmationMessage);
+        }
         if (this.config.pageType === 'create' && this.config?.pageTypeConfig?.cancel !== undefined)
             this.handleCancelActionWithFormChanges();
         if (this.config.pageType === 'create' && this.config?.pageTypeConfig?.saveDraft !== undefined)
@@ -29115,8 +29284,12 @@ class QdPageComponent {
                     actionKey: 'cancel',
                     partialAction: {
                         handler: hasChanged
-                            ? () => this.setupSubmitActionValidation()
-                            : () => this.config?.pageTypeConfig?.cancel?.handler()
+                            ? () => this.setupCancelConfirmation()
+                            : () => {
+                                this.navigationInterceptor.executeWithBypass(() => {
+                                    this.config?.pageTypeConfig?.cancel?.handler();
+                                });
+                            }
                     }
                 }
             ]);
@@ -29130,7 +29303,7 @@ class QdPageComponent {
                 action: {
                     titleI18n: pageTypeConfig.saveDraft?.label?.i18n ?? 'i18n.qd.page.footer.saveDraft',
                     type: QdFooterActionType.Secondary,
-                    handler: () => pageTypeConfig?.saveDraft?.handler(),
+                    handler: this.generateFooterActionHandler(pageTypeConfig?.saveDraft?.handler),
                     isVisible: true,
                     isDisabled: false
                 }
@@ -29138,6 +29311,12 @@ class QdPageComponent {
         ]);
     }
     updateInspectPageOperationMode(pageTypeConfig, mode) {
+        if (mode === 'edit') {
+            this.navigationInterceptor.activate(pageTypeConfig?.cancel?.confirmationMessage);
+        }
+        else {
+            this.navigationInterceptor.deactivate();
+        }
         if (mode === 'view') {
             this.formGroupManagerService.cancelPendingAsyncValidation();
             setTimeout(() => this.formGroupManagerService.cancelPendingAsyncValidation());
@@ -29155,18 +29334,19 @@ class QdPageComponent {
         return (...args) => {
             if (!handler)
                 return;
-            handler(this.formGroupManagerService.hasFormGroups() ? this.formGroupManagerService.getAllValues() : args);
+            const values = this.formGroupManagerService.hasFormGroups() ? this.formGroupManagerService.getAllValues() : args;
+            this.navigationInterceptor.executeWithBypass(() => handler(values));
         };
     }
-    setupSubmitActionValidation() {
+    setupCancelConfirmation() {
         this.dialog
             .open(QdPageCancelConfirmationDialogComponent, {
             title: { i18n: 'i18n.qd.page.cancel.confirmation.dialog.title' },
             dialogSize: QdDialogSize.Small,
             data: this.config.pageTypeConfig
         })
-            .closed.pipe(takeUntil(this._destroyed$))
-            .subscribe();
+            .closed.pipe(filter$1(result => !!result), takeUntil(this._destroyed$))
+            .subscribe(() => this.navigationInterceptor.allowNextNavigation());
     }
     initSubmitValidation() {
         this._cancelSubmitValidation$.next();
@@ -29203,11 +29383,23 @@ class QdPageComponent {
         }))), this.dialogRef);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageComponent, isStandalone: false, selector: "qd-page", inputs: { config: "config", testId: ["data-test-id", "testId"] }, outputs: { operationModeChanged: "operationModeChanged" }, host: { properties: { "class.has-control-panel": "isControlPanelVisible", "class.control-panel-broad": "isControlPanelBroad", "class.has-footer": "this.footerVisible", "class.has-info-banners": "this.hasInfoBanners" } }, providers: [QdPageFooterService, QdFormGroupManagerService, QdPageSubmitActionService, QdResolverTriggerService], queries: [{ propertyName: "controlPanel", first: true, predicate: QdPageControlPanelComponent, descendants: true }, { propertyName: "stepperComponent", first: true, predicate: QdPageStepperComponent, descendants: true }, { propertyName: "tabsComponent", first: true, predicate: QdPageTabsComponent, descendants: true }, { propertyName: "stepperAdapterDirective", first: true, predicate: QdPageStepperAdapterDirective, descendants: true }, { propertyName: "tabsAdapterDirective", first: true, predicate: QdPageTabsAdapterDirective, descendants: true }, { propertyName: "sections", predicate: QdSectionComponent }, { propertyName: "infoBanners", predicate: QdPageInfoBannerComponent }], usesOnChanges: true, ngImport: i0, template: "<main qdSnackbarListener>\n  <qd-page-object-header\n    [data-test-id]=\"testId\"\n    [attr.data-test-id]=\"testId + 'object-header'\"\n    [config]=\"config\"\n    [hasNavigation]=\"hasNavigation\"\n  ></qd-page-object-header>\n\n  <div class=\"page-info-banners\">\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n\n  <ng-container *ngIf=\"config.pageType === 'create' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-stepper\"></ng-content>\n    <ng-content select=\"[qdPageStepperAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'overview' || config.pageType === 'inspect' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-tabs\"></ng-content>\n    <ng-content select=\"[qdPageTabsAdapter]\"></ng-content>\n    <ng-content select=\"qd-section\"></ng-content>\n    <ng-content select=\"[qdSectionAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'custom'\">\n    <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n  </ng-container>\n</main>\n\n<footer *ngIf=\"footerHasContent$ | async\">\n  <qd-page-footer [attr.data-test-id]=\"testId + '-footer'\">\n    <ng-content select=\"[qdPageFooter]\"></ng-content>\n  </qd-page-footer>\n</footer>\n\n<aside *ngIf=\"isControlPanelVisible\">\n  <ng-content select=\"qd-page-control-panel\"></ng-content>\n</aside>\n\n<qd-projection-guard *ngIf=\"config.pageType !== 'custom'\" [warningMessage]=\"projectionGuardMessage\">\n  <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n</qd-projection-guard>\n\n<ng-template #projectedContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{position:absolute;display:grid;overflow:hidden;width:100%;height:100%;background:#efefef;grid-template-areas:\"main\";grid-template-columns:1fr;grid-template-rows:1fr}:host.has-control-panel{grid-template-areas:\"main aside\";grid-template-columns:1fr 18.75rem}:host.control-panel-broad{grid-template-columns:1fr 27rem}:host.has-info-banners .page-info-banners{padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}@media (max-width: 599.98px){:host.has-info-banners .page-info-banners{padding-right:.9375rem;padding-left:.9375rem}}:host.has-info-banners qd-page-info-banner:last-child{margin-bottom:0}:host.has-footer{grid-template-areas:\"main\" \"footer\";grid-template-rows:calc(100% - 4rem) 4rem}:host.has-control-panel.has-footer{grid-template-areas:\"main aside\" \"footer aside\"}:host main{position:relative;grid-area:main;overflow-y:auto}:host aside{border-left:rgb(213,213,213) solid .0625rem;background:#fff;grid-area:aside}:host footer{grid-area:footer}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success{position:relative;top:-.5rem;padding-top:0rem;padding-bottom:0rem;border-top-width:0;margin-bottom:0rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .icon,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .icon,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .icon,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .icon{display:none}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .title,:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .message,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .title,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .message,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .title,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .message,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .title,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .message{position:relative;top:-.625rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info:before,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning:before,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical:before,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success:before{position:relative;top:-.625rem;left:-2.75rem;display:block;width:calc(100% + 4.75rem);height:.625rem;background-color:#fff;content:\"\"}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QdProjectionGuardComponent, selector: "qd-projection-guard", inputs: ["isDisabled", "warningMessage"] }, { kind: "component", type: QdPageFooterComponent, selector: "qd-page-footer" }, { kind: "component", type: QdPageObjectHeaderComponent, selector: "qd-page-object-header", inputs: ["config", "hasNavigation", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageComponent, isStandalone: false, selector: "qd-page", inputs: { config: "config", testId: ["data-test-id", "testId"] }, outputs: { operationModeChanged: "operationModeChanged" }, host: { properties: { "class.has-control-panel": "isControlPanelVisible", "class.control-panel-broad": "isControlPanelBroad", "class.has-footer": "this.footerVisible", "class.has-info-banners": "this.hasInfoBanners" } }, providers: [
+            QdPageFooterService,
+            QdFormGroupManagerService,
+            QdPageSubmitActionService,
+            QdResolverTriggerService,
+            QdPageNavigationInterceptorService
+        ], queries: [{ propertyName: "controlPanel", first: true, predicate: QdPageControlPanelComponent, descendants: true }, { propertyName: "stepperComponent", first: true, predicate: QdPageStepperComponent, descendants: true }, { propertyName: "tabsComponent", first: true, predicate: QdPageTabsComponent, descendants: true }, { propertyName: "stepperAdapterDirective", first: true, predicate: QdPageStepperAdapterDirective, descendants: true }, { propertyName: "tabsAdapterDirective", first: true, predicate: QdPageTabsAdapterDirective, descendants: true }, { propertyName: "sections", predicate: QdSectionComponent }, { propertyName: "infoBanners", predicate: QdPageInfoBannerComponent }], usesOnChanges: true, ngImport: i0, template: "<main qdSnackbarListener>\n  <qd-page-object-header\n    [data-test-id]=\"testId\"\n    [attr.data-test-id]=\"testId + 'object-header'\"\n    [config]=\"config\"\n    [hasNavigation]=\"hasNavigation\"\n  ></qd-page-object-header>\n\n  <div class=\"page-info-banners\">\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n\n  <ng-container *ngIf=\"config.pageType === 'create' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-stepper\"></ng-content>\n    <ng-content select=\"[qdPageStepperAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'overview' || config.pageType === 'inspect' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-tabs\"></ng-content>\n    <ng-content select=\"[qdPageTabsAdapter]\"></ng-content>\n    <ng-content select=\"qd-section\"></ng-content>\n    <ng-content select=\"[qdSectionAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'custom'\">\n    <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n  </ng-container>\n</main>\n\n<footer *ngIf=\"footerHasContent$ | async\">\n  <qd-page-footer [attr.data-test-id]=\"testId + '-footer'\">\n    <ng-content select=\"[qdPageFooter]\"></ng-content>\n  </qd-page-footer>\n</footer>\n\n<aside *ngIf=\"isControlPanelVisible\">\n  <ng-content select=\"qd-page-control-panel\"></ng-content>\n</aside>\n\n<qd-projection-guard *ngIf=\"config.pageType !== 'custom'\" [warningMessage]=\"projectionGuardMessage\">\n  <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n</qd-projection-guard>\n\n<ng-template #projectedContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{position:absolute;display:grid;overflow:hidden;width:100%;height:100%;background:#efefef;grid-template-areas:\"main\";grid-template-columns:1fr;grid-template-rows:1fr}:host.has-control-panel{grid-template-areas:\"main aside\";grid-template-columns:1fr 18.75rem}:host.control-panel-broad{grid-template-columns:1fr 27rem}:host.has-info-banners .page-info-banners{padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}@media (max-width: 599.98px){:host.has-info-banners .page-info-banners{padding-right:.9375rem;padding-left:.9375rem}}:host.has-info-banners qd-page-info-banner:last-child{margin-bottom:0}:host.has-footer{grid-template-areas:\"main\" \"footer\";grid-template-rows:calc(100% - 4rem) 4rem}:host.has-control-panel.has-footer{grid-template-areas:\"main aside\" \"footer aside\"}:host main{position:relative;grid-area:main;overflow-y:auto}:host aside{border-left:rgb(213,213,213) solid .0625rem;background:#fff;grid-area:aside}:host footer{grid-area:footer}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success{position:relative;top:-.5rem;padding-top:0rem;padding-bottom:0rem;border-top-width:0;margin-bottom:0rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .icon,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .icon,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .icon,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .icon{display:none}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .title,:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .message,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .title,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .message,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .title,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .message,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .title,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .message{position:relative;top:-.625rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info:before,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning:before,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical:before,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success:before{position:relative;top:-.625rem;left:-2.75rem;display:block;width:calc(100% + 4.75rem);height:.625rem;background-color:#fff;content:\"\"}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QdProjectionGuardComponent, selector: "qd-projection-guard", inputs: ["isDisabled", "warningMessage"] }, { kind: "component", type: QdPageFooterComponent, selector: "qd-page-footer" }, { kind: "component", type: QdPageObjectHeaderComponent, selector: "qd-page-object-header", inputs: ["config", "hasNavigation", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-page', providers: [QdPageFooterService, QdFormGroupManagerService, QdPageSubmitActionService, QdResolverTriggerService], host: { '[class.has-control-panel]': 'isControlPanelVisible', '[class.control-panel-broad]': 'isControlPanelBroad' }, standalone: false, template: "<main qdSnackbarListener>\n  <qd-page-object-header\n    [data-test-id]=\"testId\"\n    [attr.data-test-id]=\"testId + 'object-header'\"\n    [config]=\"config\"\n    [hasNavigation]=\"hasNavigation\"\n  ></qd-page-object-header>\n\n  <div class=\"page-info-banners\">\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n\n  <ng-container *ngIf=\"config.pageType === 'create' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-stepper\"></ng-content>\n    <ng-content select=\"[qdPageStepperAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'overview' || config.pageType === 'inspect' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-tabs\"></ng-content>\n    <ng-content select=\"[qdPageTabsAdapter]\"></ng-content>\n    <ng-content select=\"qd-section\"></ng-content>\n    <ng-content select=\"[qdSectionAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'custom'\">\n    <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n  </ng-container>\n</main>\n\n<footer *ngIf=\"footerHasContent$ | async\">\n  <qd-page-footer [attr.data-test-id]=\"testId + '-footer'\">\n    <ng-content select=\"[qdPageFooter]\"></ng-content>\n  </qd-page-footer>\n</footer>\n\n<aside *ngIf=\"isControlPanelVisible\">\n  <ng-content select=\"qd-page-control-panel\"></ng-content>\n</aside>\n\n<qd-projection-guard *ngIf=\"config.pageType !== 'custom'\" [warningMessage]=\"projectionGuardMessage\">\n  <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n</qd-projection-guard>\n\n<ng-template #projectedContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{position:absolute;display:grid;overflow:hidden;width:100%;height:100%;background:#efefef;grid-template-areas:\"main\";grid-template-columns:1fr;grid-template-rows:1fr}:host.has-control-panel{grid-template-areas:\"main aside\";grid-template-columns:1fr 18.75rem}:host.control-panel-broad{grid-template-columns:1fr 27rem}:host.has-info-banners .page-info-banners{padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}@media (max-width: 599.98px){:host.has-info-banners .page-info-banners{padding-right:.9375rem;padding-left:.9375rem}}:host.has-info-banners qd-page-info-banner:last-child{margin-bottom:0}:host.has-footer{grid-template-areas:\"main\" \"footer\";grid-template-rows:calc(100% - 4rem) 4rem}:host.has-control-panel.has-footer{grid-template-areas:\"main aside\" \"footer aside\"}:host main{position:relative;grid-area:main;overflow-y:auto}:host aside{border-left:rgb(213,213,213) solid .0625rem;background:#fff;grid-area:aside}:host footer{grid-area:footer}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success{position:relative;top:-.5rem;padding-top:0rem;padding-bottom:0rem;border-top-width:0;margin-bottom:0rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .icon,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .icon,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .icon,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .icon{display:none}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .title,:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .message,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .title,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .message,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .title,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .message,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .title,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .message{position:relative;top:-.625rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info:before,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning:before,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical:before,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success:before{position:relative;top:-.625rem;left:-2.75rem;display:block;width:calc(100% + 4.75rem);height:.625rem;background-color:#fff;content:\"\"}\n"] }]
+            args: [{ selector: 'qd-page', providers: [
+                        QdPageFooterService,
+                        QdFormGroupManagerService,
+                        QdPageSubmitActionService,
+                        QdResolverTriggerService,
+                        QdPageNavigationInterceptorService
+                    ], host: { '[class.has-control-panel]': 'isControlPanelVisible', '[class.control-panel-broad]': 'isControlPanelBroad' }, standalone: false, template: "<main qdSnackbarListener>\n  <qd-page-object-header\n    [data-test-id]=\"testId\"\n    [attr.data-test-id]=\"testId + 'object-header'\"\n    [config]=\"config\"\n    [hasNavigation]=\"hasNavigation\"\n  ></qd-page-object-header>\n\n  <div class=\"page-info-banners\">\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n\n  <ng-container *ngIf=\"config.pageType === 'create' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-stepper\"></ng-content>\n    <ng-content select=\"[qdPageStepperAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'overview' || config.pageType === 'inspect' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-tabs\"></ng-content>\n    <ng-content select=\"[qdPageTabsAdapter]\"></ng-content>\n    <ng-content select=\"qd-section\"></ng-content>\n    <ng-content select=\"[qdSectionAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'custom'\">\n    <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n  </ng-container>\n</main>\n\n<footer *ngIf=\"footerHasContent$ | async\">\n  <qd-page-footer [attr.data-test-id]=\"testId + '-footer'\">\n    <ng-content select=\"[qdPageFooter]\"></ng-content>\n  </qd-page-footer>\n</footer>\n\n<aside *ngIf=\"isControlPanelVisible\">\n  <ng-content select=\"qd-page-control-panel\"></ng-content>\n</aside>\n\n<qd-projection-guard *ngIf=\"config.pageType !== 'custom'\" [warningMessage]=\"projectionGuardMessage\">\n  <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n</qd-projection-guard>\n\n<ng-template #projectedContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{position:absolute;display:grid;overflow:hidden;width:100%;height:100%;background:#efefef;grid-template-areas:\"main\";grid-template-columns:1fr;grid-template-rows:1fr}:host.has-control-panel{grid-template-areas:\"main aside\";grid-template-columns:1fr 18.75rem}:host.control-panel-broad{grid-template-columns:1fr 27rem}:host.has-info-banners .page-info-banners{padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}@media (max-width: 599.98px){:host.has-info-banners .page-info-banners{padding-right:.9375rem;padding-left:.9375rem}}:host.has-info-banners qd-page-info-banner:last-child{margin-bottom:0}:host.has-footer{grid-template-areas:\"main\" \"footer\";grid-template-rows:calc(100% - 4rem) 4rem}:host.has-control-panel.has-footer{grid-template-areas:\"main aside\" \"footer aside\"}:host main{position:relative;grid-area:main;overflow-y:auto}:host aside{border-left:rgb(213,213,213) solid .0625rem;background:#fff;grid-area:aside}:host footer{grid-area:footer}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success{position:relative;top:-.5rem;padding-top:0rem;padding-bottom:0rem;border-top-width:0;margin-bottom:0rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .icon,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .icon,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .icon,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .icon{display:none}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .title,:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .message,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .title,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .message,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .title,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .message,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .title,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .message{position:relative;top:-.625rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info:before,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning:before,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical:before,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success:before{position:relative;top:-.625rem;left:-2.75rem;display:block;width:calc(100% + 4.75rem);height:.625rem;background-color:#fff;content:\"\"}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input,
                 args: [{ required: true }]