@quadrel-enterprise-ui/framework 20.27.5 → 20.27.6-beta.242.1

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

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Directive, InjectionToken, HostBinding, Input, ViewEncapsulation, Component, Injectable, Injector, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, NgModule, EventEmitter, Output, Renderer2, Pipe, ViewContainerRef, NO_ERRORS_SCHEMA, DestroyRef, SecurityContext, NgZone, ViewChildren, forwardRef, ContentChildren, ContentChild, isDevMode, QueryList, TemplateRef, CUSTOM_ELEMENTS_SCHEMA, provideAppInitializer } from '@angular/core';
-import { Dialog, DialogRef, DialogModule } from '@angular/cdk/dialog';
+import { inject, ElementRef, Directive, InjectionToken, HostBinding, Input, ViewEncapsulation, Component, Injectable, Injector, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, NgModule, EventEmitter, Output, Renderer2, Pipe, ViewContainerRef, NO_ERRORS_SCHEMA, DestroyRef, SecurityContext, NgZone, ViewChildren, forwardRef, ContentChildren, ContentChild, afterNextRender, isDevMode, QueryList, TemplateRef, CUSTOM_ELEMENTS_SCHEMA, provideAppInitializer } from '@angular/core';
+import { Dialog, DialogRef, DIALOG_DATA, 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, tap as tap$1, delay, first, scan, queueScheduler, filter as filter$1, concatMap as concatMap$1, exhaustMap, finalize, forkJoin, delayWhen, combineLatestWith, withLatestFrom as withLatestFrom$1, async } from 'rxjs';
+import { BehaviorSubject, pairwise, map as map$1, Subject, throwError, of, ReplaySubject, merge, fromEvent, isObservable, NEVER, Observable, EMPTY, shareReplay, Subscription, distinctUntilChanged as distinctUntilChanged$1, debounce, timer, switchMap, startWith as startWith$1, debounceTime as debounceTime$1, takeUntil as takeUntil$1, firstValueFrom, combineLatest, concat, take as take$1, tap as tap$1, from, delay, first, scan, queueScheduler, filter as filter$1, concatMap as concatMap$1, exhaustMap, finalize, forkJoin, delayWhen, combineLatestWith, withLatestFrom as withLatestFrom$1, async } from 'rxjs';
 import { map, takeUntil, take, filter, catchError, debounceTime, startWith, distinctUntilChanged, concatMap, skip, tap, auditTime, withLatestFrom, 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';
@@ -1143,13 +1143,41 @@ var QdDialogSize;
     QdDialogSize["FullWidth"] = "100%";
 })(QdDialogSize || (QdDialogSize = {}));
 
+/**
+ * Tracks which dialogs currently hold unsaved changes.
+ *
+ * Pending changes are always bound to the dialog that owns them. A dialog is
+ * identified by its `DialogRef`, so two dialogs open at the same time never
+ * read or overwrite each other's state.
+ *
+ * #### Notes & Best Practices:
+ *
+ * - A dialog can hold several sources of pending changes, for example one per
+ *   form. The dialog counts as changed while at least one source is marked.
+ * - Every source that marks changes must clear them again when it is destroyed.
+ * - A dialog without any marked source reports no pending changes. This is why
+ *   the discard confirmation dialog can always close itself.
+ * - Owners are held weakly, so a dialog that is destroyed without clearing its
+ *   sources cannot keep them alive.
+ */
 class QdDialogChangeGuardService {
-    _hasChanges = false;
-    get hasPendingChanges() {
-        return this._hasChanges;
-    }
-    setPendingChangesStatus(status) {
-        this._hasChanges = status;
+    _pendingChangeSourcesByOwner = new WeakMap();
+    hasPendingChanges(owner) {
+        const sources = this._pendingChangeSourcesByOwner.get(owner);
+        return !!sources?.size;
+    }
+    markPendingChanges(source, owner) {
+        const sources = this._pendingChangeSourcesByOwner.get(owner) ?? new Set();
+        sources.add(source);
+        this._pendingChangeSourcesByOwner.set(owner, sources);
+    }
+    clearPendingChanges(source, owner) {
+        const sources = this._pendingChangeSourcesByOwner.get(owner);
+        if (!sources)
+            return;
+        sources.delete(source);
+        if (!sources.size)
+            this._pendingChangeSourcesByOwner.delete(owner);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDialogChangeGuardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDialogChangeGuardService, providedIn: 'root' });
@@ -1161,6 +1189,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }] });
 
+/**
+ * DI token that provides the component rendered inside the discard-confirmation
+ * dialog.
+ *
+ * The discard dialog renders `<qd-dialog>`, `<qd-dialog>` opens the discard
+ * dialog through this service, and the service opens the discard dialog
+ * component — a compile-time template cycle. Binding the component through this
+ * token (instead of the service importing it directly) breaks that cycle, so
+ * the dialog can be bundled eagerly instead of lazy-loaded. This is the one
+ * place a token is genuinely required.
+ */
+const QD_DISCARD_CONFIRM_DIALOG_COMPONENT_TOKEN = new InjectionToken('QD_DISCARD_CONFIRM_DIALOG_COMPONENT_TOKEN');
+
 const GENERIC_DEFAULTS = {
     title: { i18n: 'i18n.qd.dialog.confirm.title' },
     confirm: { i18n: 'i18n.qd.dialog.confirm.proceed' },
@@ -1174,6 +1215,7 @@ const CANCEL_DEFAULTS = {
 };
 class QdConfirmationDialogOpenerService {
     dialog = inject(Dialog);
+    confirmDialogComponent = inject(QD_DISCARD_CONFIRM_DIALOG_COMPONENT_TOKEN);
     showConfirmDialog(config, testId = 'dialog-confirm') {
         const resolved = {
             title: config.title ?? GENERIC_DEFAULTS.title,
@@ -1181,14 +1223,12 @@ class QdConfirmationDialogOpenerService {
             confirm: config.confirm ?? GENERIC_DEFAULTS.confirm,
             cancel: config.cancel ?? GENERIC_DEFAULTS.cancel
         };
-        return from(import('./quadrel-enterprise-ui-framework-dialog-confirm.module-BQLiEzSo.mjs').then(m => m.QdDialogConfirmComponent)).pipe(switchMap(component => {
-            const dialogRef = this.open(component, {
-                title: resolved.title,
-                dialogSize: QdDialogSize.Small,
-                data: { ...resolved, testId }
-            });
-            return dialogRef.closed.pipe(map$1(result => !!result));
-        }));
+        const dialogRef = this.open(this.confirmDialogComponent, {
+            title: resolved.title,
+            dialogSize: QdDialogSize.Small,
+            data: { ...resolved, testId }
+        });
+        return dialogRef.closed.pipe(map$1(result => !!result));
     }
     showDiscardConfirmDialog(message, testId = 'cancel-confirmation') {
         return this.showConfirmDialog({
@@ -1458,6 +1498,15 @@ class QdDialogComponent {
     changeDetectorRef = inject(ChangeDetectorRef);
     dialogChangeGuard = inject(QdDialogChangeGuardService);
     dialogService = inject(QdDialogService);
+    /**
+     * A static test ID for integration tests can be set. <br />
+     * The value for the HTML attribute [data-test-id].
+     *
+     * Every element of the dialog derives its own test ID from this root,
+     * for example `<root>-close-button`. A nested dialog passes its own root
+     * down, so a stacked dialog stays reachable without structural selectors.
+     */
+    testId = 'dialog';
     body;
     infoBanners;
     get hasSectionsClass() {
@@ -1468,6 +1517,7 @@ class QdDialogComponent {
     hasInfoBanner;
     _destroyed$ = new Subject();
     _pageDialogCanCloseFn = null;
+    _isConfirmingClose = false;
     get isFullWidth() {
         return this.config.dialogSize === QdDialogSize.FullWidth;
     }
@@ -1509,10 +1559,14 @@ class QdDialogComponent {
         this.dialogRef.close();
     }
     confirmAndClose() {
+        if (this._isConfirmingClose)
+            return;
+        this._isConfirmingClose = true;
         this.dialog
             .showDiscardConfirmDialog(this.config.cancel?.confirmationMessage, 'dialog-cancel-confirmation')
             .pipe(take(1))
             .subscribe(confirmed => {
+            this._isConfirmingClose = false;
             if (!confirmed)
                 return;
             this.config.cancel?.handler?.();
@@ -1533,7 +1587,7 @@ class QdDialogComponent {
         });
     }
     handleLegacyDialogClose() {
-        if (!this.dialogChangeGuard.hasPendingChanges)
+        if (!this.dialogChangeGuard.hasPendingChanges(this.dialogRef))
             return this.runCancelHandlerAndClose();
         this.confirmAndClose();
     }
@@ -1550,12 +1604,15 @@ class QdDialogComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDialogComponent, isStandalone: false, selector: "qd-dialog", host: { properties: { "class.full-width": "isFullWidth", "class.has-sections": "this.hasSectionsClass" } }, providers: [QdDialogComponent], viewQueries: [{ propertyName: "body", first: true, predicate: ["body"], descendants: true }, { propertyName: "infoBanners", first: true, predicate: ["banners"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"!isFullWidth\" class=\"dialog-header\">\n  <div class=\"title-container\">\n    {{ config?.title?.i18n | translate }}\n  </div>\n  <button\n    *ngIf=\"!config?.hideCloseHeaderButton\"\n    qdIconButton\n    class=\"close\"\n    color=\"secondary\"\n    tabindex=\"-1\"\n    (click)=\"close()\"\n  >\n    <qd-icon icon=\"timesLargeLight\"></qd-icon>\n  </button>\n</div>\n\n<button\n  *ngIf=\"!config?.hideCloseHeaderButton && isFullWidth\"\n  qdIconButton\n  class=\"close\"\n  color=\"secondary\"\n  tabindex=\"-1\"\n  (click)=\"close()\"\n>\n  <qd-icon icon=\"timesLargeLight\"></qd-icon>\n</button>\n\n<div class=\"wrapper-body\">\n  <div [class.has-dialog-info-banners]=\"hasInfoBanner\" #banners>\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n  <div class=\"body\" [class.full-width]=\"isFullWidth\" #body>\n    <ng-content></ng-content>\n  </div>\n</div>\n\n<div class=\"qd-dialog-actions\">\n  <button *ngIf=\"config.cancel\" qdButton qdButtonGhost color=\"secondary\" (click)=\"close()\">\n    {{ config?.cancel?.label?.i18n ?? \"i18n.qd.dialog.action.cancel\" | translate }}\n  </button>\n  <button *ngIf=\"config.primary\" qdButton (click)=\"primaryActionClicked()\">\n    {{ config?.primary?.label?.i18n ?? \"i18n.qd.dialog.action.primary\" | translate }}\n  </button>\n  <ng-content select=\"qd-dialog-action\"></ng-content>\n</div>\n", styles: ["qd-dialog{display:flex;width:100%;height:100%;flex-direction:column;background:#efefef}qd-dialog.full-width{position:relative;width:calc(100% - 3rem)!important;height:calc(100% - 3rem)!important;margin:1.5rem}qd-dialog.full-width .close{position:absolute;z-index:9999;top:1.25rem;right:1rem;color:#454545;cursor:pointer}.dialog-header{display:flex;height:3.125rem;flex-direction:row;align-items:center;justify-content:space-between;padding:.5rem 1.5rem;border-bottom:2px solid rgb(213,213,213);background:#fff}.dialog-header .title-container{display:block;color:#171717;font-weight:500}.dialog-header .close{cursor:pointer}.wrapper-body{overflow:auto;flex:1;background:#efefef}.wrapper-body .has-dialog-info-banners{padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}.wrapper-body .has-dialog-info-banners qd-page-info-banner:last-child{margin-bottom:0}.wrapper-body .body.full-width{height:100%}.wrapper-body .body:not(.full-width){max-height:80vh;padding:1rem 1.5rem}.wrapper-body .body:not(.full-width) qd-section{padding-right:1.5rem;padding-left:1.5rem}.wrapper-body .body:not(.full-width) qd-text-section{margin-right:0;margin-left:0}qd-dialog.has-sections .wrapper-body .body:not(.full-width){padding:0}.qd-dialog-actions{display:flex;justify-content:flex-end;padding:.5rem 1.5rem;border-top:2px solid rgb(213,213,213);background:#efefef;column-gap:.625rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: QdIconButtonComponent, selector: "button[qdIconButton], a[qdIconButton], button[qd-icon-button]", inputs: ["color", "data-test-id"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDialogComponent, isStandalone: false, selector: "qd-dialog", inputs: { testId: ["data-test-id", "testId"] }, host: { properties: { "class.full-width": "isFullWidth", "class.has-sections": "this.hasSectionsClass" } }, providers: [QdDialogComponent], viewQueries: [{ propertyName: "body", first: true, predicate: ["body"], descendants: true }, { propertyName: "infoBanners", first: true, predicate: ["banners"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"!isFullWidth\" class=\"dialog-header\">\n  <div class=\"title-container\">\n    {{ config?.title?.i18n | translate }}\n  </div>\n  <button\n    *ngIf=\"!config?.hideCloseHeaderButton\"\n    qdIconButton\n    class=\"close\"\n    color=\"secondary\"\n    tabindex=\"-1\"\n    (click)=\"close()\"\n    [attr.aria-label]=\"'i18n.qd.dialog.action.close' | translate\"\n    [data-test-id]=\"testId + '-close-button'\"\n  >\n    <qd-icon icon=\"timesLargeLight\"></qd-icon>\n  </button>\n</div>\n\n<button\n  *ngIf=\"!config?.hideCloseHeaderButton && isFullWidth\"\n  qdIconButton\n  class=\"close\"\n  color=\"secondary\"\n  tabindex=\"-1\"\n  (click)=\"close()\"\n  [attr.aria-label]=\"'i18n.qd.dialog.action.close' | translate\"\n  [data-test-id]=\"testId + '-close-button'\"\n>\n  <qd-icon icon=\"timesLargeLight\"></qd-icon>\n</button>\n\n<div class=\"wrapper-body\">\n  <div [class.has-dialog-info-banners]=\"hasInfoBanner\" #banners>\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n  <div class=\"body\" [class.full-width]=\"isFullWidth\" #body>\n    <ng-content></ng-content>\n  </div>\n</div>\n\n<div class=\"qd-dialog-actions\">\n  <button\n    *ngIf=\"config.cancel\"\n    qdButton\n    qdButtonGhost\n    color=\"secondary\"\n    (click)=\"close()\"\n    [data-test-id]=\"testId + '-cancel-button'\"\n  >\n    {{ config?.cancel?.label?.i18n ?? \"i18n.qd.dialog.action.cancel\" | translate }}\n  </button>\n  <button *ngIf=\"config.primary\" qdButton (click)=\"primaryActionClicked()\" [data-test-id]=\"testId + '-primary-button'\">\n    {{ config?.primary?.label?.i18n ?? \"i18n.qd.dialog.action.primary\" | translate }}\n  </button>\n  <ng-content select=\"qd-dialog-action\"></ng-content>\n</div>\n", styles: ["qd-dialog{display:flex;width:100%;height:100%;flex-direction:column;background:#efefef}qd-dialog.full-width{position:relative;width:calc(100% - 3rem)!important;height:calc(100% - 3rem)!important;margin:1.5rem}qd-dialog.full-width .close{position:absolute;z-index:9999;top:1.25rem;right:1rem;color:#454545;cursor:pointer}.dialog-header{display:flex;height:3.125rem;flex-direction:row;align-items:center;justify-content:space-between;padding:.5rem 1.5rem;border-bottom:2px solid rgb(213,213,213);background:#fff}.dialog-header .title-container{display:block;color:#171717;font-weight:500}.dialog-header .close{cursor:pointer}.wrapper-body{overflow:auto;flex:1;background:#efefef}.wrapper-body .has-dialog-info-banners{padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}.wrapper-body .has-dialog-info-banners qd-page-info-banner:last-child{margin-bottom:0}.wrapper-body .body.full-width{height:100%}.wrapper-body .body:not(.full-width){max-height:80vh;padding:1rem 1.5rem}.wrapper-body .body:not(.full-width) qd-section{padding-right:1.5rem;padding-left:1.5rem}.wrapper-body .body:not(.full-width) qd-text-section{margin-right:0;margin-left:0}qd-dialog.has-sections .wrapper-body .body:not(.full-width){padding:0}.qd-dialog-actions{display:flex;justify-content:flex-end;padding:.5rem 1.5rem;border-top:2px solid rgb(213,213,213);background:#efefef;column-gap:.625rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: QdIconButtonComponent, selector: "button[qdIconButton], a[qdIconButton], button[qd-icon-button]", inputs: ["color", "data-test-id"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-dialog', host: { '[class.full-width]': 'isFullWidth' }, encapsulation: ViewEncapsulation.None, providers: [QdDialogComponent], standalone: false, template: "<div *ngIf=\"!isFullWidth\" class=\"dialog-header\">\n  <div class=\"title-container\">\n    {{ config?.title?.i18n | translate }}\n  </div>\n  <button\n    *ngIf=\"!config?.hideCloseHeaderButton\"\n    qdIconButton\n    class=\"close\"\n    color=\"secondary\"\n    tabindex=\"-1\"\n    (click)=\"close()\"\n  >\n    <qd-icon icon=\"timesLargeLight\"></qd-icon>\n  </button>\n</div>\n\n<button\n  *ngIf=\"!config?.hideCloseHeaderButton && isFullWidth\"\n  qdIconButton\n  class=\"close\"\n  color=\"secondary\"\n  tabindex=\"-1\"\n  (click)=\"close()\"\n>\n  <qd-icon icon=\"timesLargeLight\"></qd-icon>\n</button>\n\n<div class=\"wrapper-body\">\n  <div [class.has-dialog-info-banners]=\"hasInfoBanner\" #banners>\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n  <div class=\"body\" [class.full-width]=\"isFullWidth\" #body>\n    <ng-content></ng-content>\n  </div>\n</div>\n\n<div class=\"qd-dialog-actions\">\n  <button *ngIf=\"config.cancel\" qdButton qdButtonGhost color=\"secondary\" (click)=\"close()\">\n    {{ config?.cancel?.label?.i18n ?? \"i18n.qd.dialog.action.cancel\" | translate }}\n  </button>\n  <button *ngIf=\"config.primary\" qdButton (click)=\"primaryActionClicked()\">\n    {{ config?.primary?.label?.i18n ?? \"i18n.qd.dialog.action.primary\" | translate }}\n  </button>\n  <ng-content select=\"qd-dialog-action\"></ng-content>\n</div>\n", styles: ["qd-dialog{display:flex;width:100%;height:100%;flex-direction:column;background:#efefef}qd-dialog.full-width{position:relative;width:calc(100% - 3rem)!important;height:calc(100% - 3rem)!important;margin:1.5rem}qd-dialog.full-width .close{position:absolute;z-index:9999;top:1.25rem;right:1rem;color:#454545;cursor:pointer}.dialog-header{display:flex;height:3.125rem;flex-direction:row;align-items:center;justify-content:space-between;padding:.5rem 1.5rem;border-bottom:2px solid rgb(213,213,213);background:#fff}.dialog-header .title-container{display:block;color:#171717;font-weight:500}.dialog-header .close{cursor:pointer}.wrapper-body{overflow:auto;flex:1;background:#efefef}.wrapper-body .has-dialog-info-banners{padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}.wrapper-body .has-dialog-info-banners qd-page-info-banner:last-child{margin-bottom:0}.wrapper-body .body.full-width{height:100%}.wrapper-body .body:not(.full-width){max-height:80vh;padding:1rem 1.5rem}.wrapper-body .body:not(.full-width) qd-section{padding-right:1.5rem;padding-left:1.5rem}.wrapper-body .body:not(.full-width) qd-text-section{margin-right:0;margin-left:0}qd-dialog.has-sections .wrapper-body .body:not(.full-width){padding:0}.qd-dialog-actions{display:flex;justify-content:flex-end;padding:.5rem 1.5rem;border-top:2px solid rgb(213,213,213);background:#efefef;column-gap:.625rem}\n"] }]
-        }], propDecorators: { body: [{
+            args: [{ selector: 'qd-dialog', host: { '[class.full-width]': 'isFullWidth' }, encapsulation: ViewEncapsulation.None, providers: [QdDialogComponent], standalone: false, template: "<div *ngIf=\"!isFullWidth\" class=\"dialog-header\">\n  <div class=\"title-container\">\n    {{ config?.title?.i18n | translate }}\n  </div>\n  <button\n    *ngIf=\"!config?.hideCloseHeaderButton\"\n    qdIconButton\n    class=\"close\"\n    color=\"secondary\"\n    tabindex=\"-1\"\n    (click)=\"close()\"\n    [attr.aria-label]=\"'i18n.qd.dialog.action.close' | translate\"\n    [data-test-id]=\"testId + '-close-button'\"\n  >\n    <qd-icon icon=\"timesLargeLight\"></qd-icon>\n  </button>\n</div>\n\n<button\n  *ngIf=\"!config?.hideCloseHeaderButton && isFullWidth\"\n  qdIconButton\n  class=\"close\"\n  color=\"secondary\"\n  tabindex=\"-1\"\n  (click)=\"close()\"\n  [attr.aria-label]=\"'i18n.qd.dialog.action.close' | translate\"\n  [data-test-id]=\"testId + '-close-button'\"\n>\n  <qd-icon icon=\"timesLargeLight\"></qd-icon>\n</button>\n\n<div class=\"wrapper-body\">\n  <div [class.has-dialog-info-banners]=\"hasInfoBanner\" #banners>\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n  <div class=\"body\" [class.full-width]=\"isFullWidth\" #body>\n    <ng-content></ng-content>\n  </div>\n</div>\n\n<div class=\"qd-dialog-actions\">\n  <button\n    *ngIf=\"config.cancel\"\n    qdButton\n    qdButtonGhost\n    color=\"secondary\"\n    (click)=\"close()\"\n    [data-test-id]=\"testId + '-cancel-button'\"\n  >\n    {{ config?.cancel?.label?.i18n ?? \"i18n.qd.dialog.action.cancel\" | translate }}\n  </button>\n  <button *ngIf=\"config.primary\" qdButton (click)=\"primaryActionClicked()\" [data-test-id]=\"testId + '-primary-button'\">\n    {{ config?.primary?.label?.i18n ?? \"i18n.qd.dialog.action.primary\" | translate }}\n  </button>\n  <ng-content select=\"qd-dialog-action\"></ng-content>\n</div>\n", styles: ["qd-dialog{display:flex;width:100%;height:100%;flex-direction:column;background:#efefef}qd-dialog.full-width{position:relative;width:calc(100% - 3rem)!important;height:calc(100% - 3rem)!important;margin:1.5rem}qd-dialog.full-width .close{position:absolute;z-index:9999;top:1.25rem;right:1rem;color:#454545;cursor:pointer}.dialog-header{display:flex;height:3.125rem;flex-direction:row;align-items:center;justify-content:space-between;padding:.5rem 1.5rem;border-bottom:2px solid rgb(213,213,213);background:#fff}.dialog-header .title-container{display:block;color:#171717;font-weight:500}.dialog-header .close{cursor:pointer}.wrapper-body{overflow:auto;flex:1;background:#efefef}.wrapper-body .has-dialog-info-banners{padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}.wrapper-body .has-dialog-info-banners qd-page-info-banner:last-child{margin-bottom:0}.wrapper-body .body.full-width{height:100%}.wrapper-body .body:not(.full-width){max-height:80vh;padding:1rem 1.5rem}.wrapper-body .body:not(.full-width) qd-section{padding-right:1.5rem;padding-left:1.5rem}.wrapper-body .body:not(.full-width) qd-text-section{margin-right:0;margin-left:0}qd-dialog.has-sections .wrapper-body .body:not(.full-width){padding:0}.qd-dialog-actions{display:flex;justify-content:flex-end;padding:.5rem 1.5rem;border-top:2px solid rgb(213,213,213);background:#efefef;column-gap:.625rem}\n"] }]
+        }], propDecorators: { testId: [{
+                type: Input,
+                args: ['data-test-id']
+            }], body: [{
                 type: ViewChild,
                 args: ['body']
             }], infoBanners: [{
@@ -1579,7 +1636,7 @@ class QdDialogAuthSessionEndComponent {
         this.dialogRef.close({ doLogoutViaIdentityBroker: true });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDialogAuthSessionEndComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDialogAuthSessionEndComponent, isStandalone: false, selector: "qd-dialog-auth-session-end", ngImport: i0, template: "<qd-dialog>\n  <qd-text-section>\n    <qd-text-section-paragraph>\n      {{ \"i18n.qd.authSupport.dialog.content\" | translate }}\n    </qd-text-section-paragraph>\n  </qd-text-section>\n\n  <qd-dialog-action>\n    <button qdButton color=\"secondary\" (click)=\"backToEPortal()\">\n      {{ \"i18n.qd.authSupport.dialog.action.backToEPortal\" | translate }}\n    </button>\n    <button qdButton (click)=\"reAuthenticate()\">\n      {{ \"i18n.qd.authSupport.dialog.action.reAuthenticate\" | translate }}\n    </button>\n  </qd-dialog-action>\n</qd-dialog>\n", dependencies: [{ kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "component", type: QdTextSectionComponent, selector: "qd-text-section" }, { kind: "component", type: QdTextSectionParagraphComponent, selector: "qd-text-section-paragraph" }, { kind: "component", type: QdDialogActionComponent, selector: "qd-dialog-action" }, { kind: "component", type: QdDialogComponent, selector: "qd-dialog" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDialogAuthSessionEndComponent, isStandalone: false, selector: "qd-dialog-auth-session-end", ngImport: i0, template: "<qd-dialog>\n  <qd-text-section>\n    <qd-text-section-paragraph>\n      {{ \"i18n.qd.authSupport.dialog.content\" | translate }}\n    </qd-text-section-paragraph>\n  </qd-text-section>\n\n  <qd-dialog-action>\n    <button qdButton color=\"secondary\" (click)=\"backToEPortal()\">\n      {{ \"i18n.qd.authSupport.dialog.action.backToEPortal\" | translate }}\n    </button>\n    <button qdButton (click)=\"reAuthenticate()\">\n      {{ \"i18n.qd.authSupport.dialog.action.reAuthenticate\" | translate }}\n    </button>\n  </qd-dialog-action>\n</qd-dialog>\n", dependencies: [{ kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "component", type: QdTextSectionComponent, selector: "qd-text-section" }, { kind: "component", type: QdTextSectionParagraphComponent, selector: "qd-text-section-paragraph" }, { kind: "component", type: QdDialogActionComponent, selector: "qd-dialog-action" }, { kind: "component", type: QdDialogComponent, selector: "qd-dialog", inputs: ["data-test-id"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDialogAuthSessionEndComponent, decorators: [{
             type: Component,
@@ -11547,6 +11604,7 @@ class QdInputComponent {
     controlContainer = inject(ControlContainer, { optional: true, host: true, skipSelf: true });
     eventBrokerService = inject(QdEventBrokerService, { optional: true });
     numberInputService = inject(QdNumberInputService);
+    translateService = inject(TranslateService);
     /**
      * The form control name can be assigned here if you want to use Reactive Forms.
      */
@@ -11703,7 +11761,7 @@ class QdInputComponent {
         const displayValue = this.inputType === 'number'
             ? this.numberInputService.formatNumberForViewonly(this._value.value)
             : this._value.value;
-        return [`${displayValue}${this._value.unit ? ' ' + this._value.unit : ''}`];
+        return [`${displayValue}${this._value.unit ? ' ' + this.getUnitLabel(this._value.unit) : ''}`];
     }
     ngOnInit() {
         this.subscribeToOptions();
@@ -11767,41 +11825,47 @@ class QdInputComponent {
         if (input?.validity?.badInput)
             return;
         const value = event.target.value;
-        if (this.inputType === 'number' && value && !this.numberInputService.isValidNumber(value)) {
-            this.control?.setErrors({
-                ...this.control.errors,
-                invalidCharacters: this.numberInputService.invalidCharactersErrorKey
-            });
+        if (this.inputType === 'number' && value && !this.handleNumberInput(value))
             return;
-        }
-        if (this.inputType === 'number' && value) {
-            const valueWithoutGroups = value.split(this.numberInputService.groupSeparator).join('');
-            const filtered = this.numberInputService.filterValue(valueWithoutGroups);
-            const hasInvalidChars = filtered !== valueWithoutGroups;
-            if (hasInvalidChars) {
-                this._value = { ...this._value, value: filtered };
-                if (this.control) {
-                    this.control.setErrors({
-                        ...this.control.errors,
-                        invalidCharacters: this.numberInputService.invalidCharactersErrorKey
-                    });
-                }
-                this._isUserTyped = true;
-                this._onTouch();
-                this.emitValue();
-                return;
-            }
-            if (this.control?.errors?.['invalidCharacters']) {
-                const remainingErrors = Object.fromEntries(Object.entries(this.control.errors).filter(([key]) => key !== 'invalidCharacters'));
-                this.control.setErrors(Object.keys(remainingErrors).length ? remainingErrors : null);
-            }
-        }
         this._isUserTyped = true;
         this._value = { ...this._value, value };
+        this._displayValue = String(value ?? '');
         this.loadOptionsForTypedValue(value);
         this.emitValue();
         this._onTouch();
     }
+    handleNumberInput(value) {
+        if (!this.numberInputService.isValidNumber(value)) {
+            this.setInvalidCharactersError();
+            return false;
+        }
+        const valueWithoutGroups = value.split(this.numberInputService.groupSeparator).join('');
+        const filtered = this.numberInputService.filterValue(valueWithoutGroups);
+        if (filtered !== valueWithoutGroups) {
+            this._value = { ...this._value, value: filtered };
+            this.setInvalidCharactersError();
+            this._isUserTyped = true;
+            this._onTouch();
+            this.emitValue();
+            return false;
+        }
+        this.clearInvalidCharactersError();
+        return true;
+    }
+    setInvalidCharactersError() {
+        if (!this.control)
+            return;
+        this.control.setErrors({
+            ...this.control.errors,
+            invalidCharacters: this.numberInputService.invalidCharactersErrorKey
+        });
+    }
+    clearInvalidCharactersError() {
+        if (!this.control?.errors?.['invalidCharacters'])
+            return;
+        const remainingErrors = Object.fromEntries(Object.entries(this.control.errors).filter(([key]) => key !== 'invalidCharacters'));
+        this.control.setErrors(Object.keys(remainingErrors).length ? remainingErrors : null);
+    }
     handleOptionSelected(option) {
         this._value = { ...this._value, value: option.i18n };
         this.popover?.close();
@@ -11903,6 +11967,10 @@ class QdInputComponent {
             this.popover?.close();
         }
     }
+    getUnitLabel(unit) {
+        const unitOption = this.config?.units?.find(option => option.value === unit);
+        return unitOption ? this.translateService.instant(unitOption.i18n) : unit;
+    }
     emitValue() {
         const emittable = this.inputType === 'number' ? this.numberInputService.parseValue(this._value.value) : this._value.value;
         if (this.hasUnits) {
@@ -18841,6 +18909,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }] });
 
+class QdDialogConfirmComponent {
+    dialogRef = inject(DialogRef);
+    data = inject(DIALOG_DATA);
+    config = this.data;
+    testId = this.data?.testId ?? 'dialog-confirm';
+    close() {
+        this.dialogRef.close(false);
+    }
+    confirm() {
+        this.dialogRef.close(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDialogConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDialogConfirmComponent, isStandalone: false, selector: "qd-dialog-confirm", ngImport: i0, template: "<qd-dialog [data-test-id]=\"testId\">\n  <qd-text-section>\n    <qd-text-section-paragraph>\n      {{ config.message.i18n | translate }}\n    </qd-text-section-paragraph>\n  </qd-text-section>\n\n  <qd-dialog-action>\n    <button qdButton qdButtonGhost color=\"secondary\" (click)=\"close()\" [data-test-id]=\"testId + '-close'\">\n      {{ config.cancel.i18n | translate }}\n    </button>\n\n    <button qdButton color=\"error\" (click)=\"confirm()\" [data-test-id]=\"testId + '-proceed'\">\n      {{ config.confirm.i18n | translate }}\n    </button>\n  </qd-dialog-action>\n</qd-dialog>\n", dependencies: [{ kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: QdTextSectionComponent, selector: "qd-text-section" }, { kind: "component", type: QdTextSectionParagraphComponent, selector: "qd-text-section-paragraph" }, { kind: "component", type: QdDialogActionComponent, selector: "qd-dialog-action" }, { kind: "component", type: QdDialogComponent, selector: "qd-dialog", inputs: ["data-test-id"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDialogConfirmComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'qd-dialog-confirm', standalone: false, template: "<qd-dialog [data-test-id]=\"testId\">\n  <qd-text-section>\n    <qd-text-section-paragraph>\n      {{ config.message.i18n | translate }}\n    </qd-text-section-paragraph>\n  </qd-text-section>\n\n  <qd-dialog-action>\n    <button qdButton qdButtonGhost color=\"secondary\" (click)=\"close()\" [data-test-id]=\"testId + '-close'\">\n      {{ config.cancel.i18n | translate }}\n    </button>\n\n    <button qdButton color=\"error\" (click)=\"confirm()\" [data-test-id]=\"testId + '-proceed'\">\n      {{ config.confirm.i18n | translate }}\n    </button>\n  </qd-dialog-action>\n</qd-dialog>\n" }]
+        }] });
+
 /**
  * **QdDialogRecordStepperComponent** provides a pagination for the fullscreen version of **QdDialog**. <br />
  * It is possible to navigate through a list of data provided by the dialog.
@@ -19103,7 +19190,7 @@ class QdDialogConfirmationComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDialogConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDialogConfirmationComponent, isStandalone: false, selector: "qd-dialog-confirmation", inputs: { config: "config", testId: ["data-test-id", "testId"] }, ngImport: i0, template: "<qd-dialog [attr.data-test-id]=\"testId\">\n  <div class=\"loading-overlay\" *ngIf=\"isLoading\">\n    <qd-spinner></qd-spinner>\n  </div>\n\n  <div class=\"headline\" *ngIf=\"isInfoState\">{{ config.info.headline.i18n | translate }}</div>\n\n  <div class=\"headline\" *ngIf=\"isSuccessState\">\n    {{ (config.success.headline.i18n | translate) || (config.info.headline.i18n | translate) }}\n  </div>\n\n  <div class=\"headline\" *ngIf=\"isErrorState && config.error.headline.i18n\">\n    {{ config.error.headline.i18n | translate }}\n  </div>\n\n  <div class=\"info\">\n    <ng-container *ngIf=\"isInfoState\"> {{ config.info.info.i18n | translate }} </ng-container>\n\n    <ng-container *ngIf=\"isSuccessState\">\n      <qd-icon class=\"success\" [icon]=\"'checkCircleSolid'\"></qd-icon>\n      <span>{{ (config.success.info.i18n | translate) || (config.info.info.i18n | translate) }} </span>\n    </ng-container>\n\n    <ng-container *ngIf=\"isErrorState && config.error?.info?.i18n\">\n      <qd-icon class=\"error\" [icon]=\"'timesCircleSolid'\"></qd-icon>\n      <span>{{ config.error?.info?.i18n | translate }}</span>\n    </ng-container>\n  </div>\n\n  <div class=\"confirm-content\">\n    <ng-container *ngIf=\"isInfoState\">\n      <ng-content select=\"[qdDialogConfirmInfo]\"></ng-content>\n      <qd-checkboxes\n        [attr.data-test-id]=\"testId + '-checkbox'\"\n        *ngIf=\"useCheckbox\"\n        [config]=\"checkboxConfig\"\n        [(values)]=\"confirmChecked\"\n      ></qd-checkboxes>\n    </ng-container>\n\n    <ng-container *ngIf=\"isSuccessState\">\n      <ng-content select=\"[qdDialogConfirmSuccess]\"></ng-content>\n    </ng-container>\n\n    <ng-container *ngIf=\"isErrorState\">\n      <ng-content select=\"[qdDialogConfirmError]\"></ng-content>\n    </ng-container>\n\n    <qd-notifications [context]=\"notificationContext\"></qd-notifications>\n  </div>\n\n  <qd-dialog-action>\n    <ng-container *ngIf=\"isInfoState\">\n      <button qdButton qdButtonGhost (click)=\"close()\" [disabled]=\"isLoading\">\n        {{ config.buttons.cancel.i18n | translate }}\n      </button>\n\n      <button qdButton color=\"primary\" (click)=\"confirm()\" [disabled]=\"(useCheckbox && !isConfirmed) || isLoading\">\n        {{ config.buttons.next.i18n | translate }}\n      </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"isSuccessState\">\n      <button qdButton color=\"primary\" (click)=\"submit()\">\n        {{ (config.buttons.success?.i18n | translate) || (config.buttons.next.i18n | translate) }}\n      </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"isErrorState\">\n      <button qdButton color=\"primary\" (click)=\"submit()\">\n        {{ (config.buttons.error?.i18n | translate) || (config.buttons.next.i18n | translate) }}\n      </button>\n    </ng-container>\n  </qd-dialog-action>\n</qd-dialog>\n", styles: [":host .headline{color:#171717;font-size:1rem;font-weight:700;line-height:1.5rem;margin-bottom:.75rem}:host .info{color:#171717;font-size:1rem;font-weight:400;line-height:1.5rem;display:flex}:host .info ::ng-deep .qd-icon{width:.875rem;margin-right:.75rem;font-size:1.25rem;font-weight:300}:host .info ::ng-deep .qd-icon.success{color:#00813a}:host .info ::ng-deep .qd-icon.error{color:#c70023}:host .loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: QdCheckboxesComponent, selector: "qd-checkboxes", inputs: ["formControlName", "values", "config", "data-test-id"], outputs: ["valuesChange", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdNotificationsComponent, selector: "qd-notifications", inputs: ["context"] }, { kind: "component", type: QdSpinnerComponent, selector: "qd-spinner" }, { kind: "component", type: QdDialogActionComponent, selector: "qd-dialog-action" }, { kind: "component", type: QdDialogComponent, selector: "qd-dialog" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDialogConfirmationComponent, isStandalone: false, selector: "qd-dialog-confirmation", inputs: { config: "config", testId: ["data-test-id", "testId"] }, ngImport: i0, template: "<qd-dialog [attr.data-test-id]=\"testId\">\n  <div class=\"loading-overlay\" *ngIf=\"isLoading\">\n    <qd-spinner></qd-spinner>\n  </div>\n\n  <div class=\"headline\" *ngIf=\"isInfoState\">{{ config.info.headline.i18n | translate }}</div>\n\n  <div class=\"headline\" *ngIf=\"isSuccessState\">\n    {{ (config.success.headline.i18n | translate) || (config.info.headline.i18n | translate) }}\n  </div>\n\n  <div class=\"headline\" *ngIf=\"isErrorState && config.error.headline.i18n\">\n    {{ config.error.headline.i18n | translate }}\n  </div>\n\n  <div class=\"info\">\n    <ng-container *ngIf=\"isInfoState\"> {{ config.info.info.i18n | translate }} </ng-container>\n\n    <ng-container *ngIf=\"isSuccessState\">\n      <qd-icon class=\"success\" [icon]=\"'checkCircleSolid'\"></qd-icon>\n      <span>{{ (config.success.info.i18n | translate) || (config.info.info.i18n | translate) }} </span>\n    </ng-container>\n\n    <ng-container *ngIf=\"isErrorState && config.error?.info?.i18n\">\n      <qd-icon class=\"error\" [icon]=\"'timesCircleSolid'\"></qd-icon>\n      <span>{{ config.error?.info?.i18n | translate }}</span>\n    </ng-container>\n  </div>\n\n  <div class=\"confirm-content\">\n    <ng-container *ngIf=\"isInfoState\">\n      <ng-content select=\"[qdDialogConfirmInfo]\"></ng-content>\n      <qd-checkboxes\n        [attr.data-test-id]=\"testId + '-checkbox'\"\n        *ngIf=\"useCheckbox\"\n        [config]=\"checkboxConfig\"\n        [(values)]=\"confirmChecked\"\n      ></qd-checkboxes>\n    </ng-container>\n\n    <ng-container *ngIf=\"isSuccessState\">\n      <ng-content select=\"[qdDialogConfirmSuccess]\"></ng-content>\n    </ng-container>\n\n    <ng-container *ngIf=\"isErrorState\">\n      <ng-content select=\"[qdDialogConfirmError]\"></ng-content>\n    </ng-container>\n\n    <qd-notifications [context]=\"notificationContext\"></qd-notifications>\n  </div>\n\n  <qd-dialog-action>\n    <ng-container *ngIf=\"isInfoState\">\n      <button qdButton qdButtonGhost (click)=\"close()\" [disabled]=\"isLoading\">\n        {{ config.buttons.cancel.i18n | translate }}\n      </button>\n\n      <button qdButton color=\"primary\" (click)=\"confirm()\" [disabled]=\"(useCheckbox && !isConfirmed) || isLoading\">\n        {{ config.buttons.next.i18n | translate }}\n      </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"isSuccessState\">\n      <button qdButton color=\"primary\" (click)=\"submit()\">\n        {{ (config.buttons.success?.i18n | translate) || (config.buttons.next.i18n | translate) }}\n      </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"isErrorState\">\n      <button qdButton color=\"primary\" (click)=\"submit()\">\n        {{ (config.buttons.error?.i18n | translate) || (config.buttons.next.i18n | translate) }}\n      </button>\n    </ng-container>\n  </qd-dialog-action>\n</qd-dialog>\n", styles: [":host .headline{color:#171717;font-size:1rem;font-weight:700;line-height:1.5rem;margin-bottom:.75rem}:host .info{color:#171717;font-size:1rem;font-weight:400;line-height:1.5rem;display:flex}:host .info ::ng-deep .qd-icon{width:.875rem;margin-right:.75rem;font-size:1.25rem;font-weight:300}:host .info ::ng-deep .qd-icon.success{color:#00813a}:host .info ::ng-deep .qd-icon.error{color:#c70023}:host .loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: QdCheckboxesComponent, selector: "qd-checkboxes", inputs: ["formControlName", "values", "config", "data-test-id"], outputs: ["valuesChange", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdNotificationsComponent, selector: "qd-notifications", inputs: ["context"] }, { kind: "component", type: QdSpinnerComponent, selector: "qd-spinner" }, { kind: "component", type: QdDialogActionComponent, selector: "qd-dialog-action" }, { kind: "component", type: QdDialogComponent, selector: "qd-dialog", inputs: ["data-test-id"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDialogConfirmationComponent, decorators: [{
             type: Component,
@@ -19118,7 +19205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 
 class QdPageDialogWithBreadcrumbsComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageDialogWithBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageDialogWithBreadcrumbsComponent, isStandalone: false, selector: "ng-component", ngImport: i0, template: "<qd-dialog>\n  <div class=\"wrapper\">\n    <qd-breadcrumbs></qd-breadcrumbs>\n    <div class=\"router-outlet-wrapper\">\n      <router-outlet name=\"dialog\"></router-outlet>\n    </div>\n  </div>\n</qd-dialog>\n", styles: [".wrapper{display:flex;height:100%;flex-flow:column}qd-breadcrumbs{z-index:99;flex:0 1 auto;padding-right:2.25rem;padding-bottom:.75rem;margin-bottom:-.75rem}.router-outlet-wrapper{position:relative;height:100%;flex:1 1 auto}\n"], dependencies: [{ kind: "directive", type: i2$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: QdBreadcrumbsComponent, selector: "qd-breadcrumbs" }, { kind: "component", type: QdDialogComponent, selector: "qd-dialog" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageDialogWithBreadcrumbsComponent, isStandalone: false, selector: "ng-component", ngImport: i0, template: "<qd-dialog>\n  <div class=\"wrapper\">\n    <qd-breadcrumbs></qd-breadcrumbs>\n    <div class=\"router-outlet-wrapper\">\n      <router-outlet name=\"dialog\"></router-outlet>\n    </div>\n  </div>\n</qd-dialog>\n", styles: [".wrapper{display:flex;height:100%;flex-flow:column}qd-breadcrumbs{z-index:99;flex:0 1 auto;padding-right:2.25rem;padding-bottom:.75rem;margin-bottom:-.75rem}.router-outlet-wrapper{position:relative;height:100%;flex:1 1 auto}\n"], dependencies: [{ kind: "directive", type: i2$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: QdBreadcrumbsComponent, selector: "qd-breadcrumbs" }, { kind: "component", type: QdDialogComponent, selector: "qd-dialog", inputs: ["data-test-id"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageDialogWithBreadcrumbsComponent, decorators: [{
             type: Component,
@@ -19129,10 +19216,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  * Tracks pending changes inside a QdDialog by comparing the current form value with the initial value.
  * Supports both Reactive Forms (FormGroupDirective) and Template-Driven Forms (NgForm).
  *
- * Relevant when closing the dialog (X icon or Cancel button):
+ * Relevant when closing the dialog (X icon, ESC or Cancel button):
  * - if the current value equals the initial value, closing will not trigger a pending-changes warning
  * - the form is reset to pristine, so the dialog behaves like “unchanged”
  *
+ * #### Notes & Best Practices:
+ *
+ * - Pending changes are reported for the dialog that hosts the form. Other open
+ *   dialogs are never affected.
+ * - Outside a dialog there is nothing to guard. The form is still reset to
+ *   pristine, but no pending changes are reported.
+ *
  * #### **Usage (Reactive Form)**
  *
  * ```html
@@ -19146,6 +19240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 class QdPendingChangesGuardDirective {
     ngForm = inject(NgForm, { optional: true });
     formGroupDirective = inject(FormGroupDirective, { optional: true });
+    dialogRef = inject(DialogRef, { optional: true });
     changeGuard = inject(QdDialogChangeGuardService);
     statusSubscription;
     initialValue;
@@ -19165,19 +19260,25 @@ class QdPendingChangesGuardDirective {
             });
         }
     }
+    ngOnDestroy() {
+        this.statusSubscription?.unsubscribe();
+        this.reportPendingChanges(false);
+    }
     updateStatus() {
         if (!this.formGroup)
             return;
         const isPristine = isEqual(this.formGroup.value, this.initialValue);
-        const hasChanges = !isPristine;
-        this.changeGuard.setPendingChangesStatus(hasChanges);
+        this.reportPendingChanges(!isPristine);
         if (isPristine && this.formGroup.dirty) {
             this.formGroup.markAsPristine();
         }
     }
-    ngOnDestroy() {
-        this.statusSubscription?.unsubscribe();
-        this.changeGuard.setPendingChangesStatus(false);
+    reportPendingChanges(hasChanges) {
+        if (!this.dialogRef)
+            return;
+        if (hasChanges)
+            return this.changeGuard.markPendingChanges(this, this.dialogRef);
+        this.changeGuard.clearPendingChanges(this, this.dialogRef);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPendingChangesGuardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QdPendingChangesGuardDirective, isStandalone: false, selector: "[qdPendingChangesGuard]", ngImport: i0 });
@@ -19195,6 +19296,7 @@ class QdDialogModule {
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: QdDialogModule, declarations: [QdDialogActionComponent,
             QdDialogAuthSessionEndComponent,
             QdDialogComponent,
+            QdDialogConfirmComponent,
             QdDialogConfirmationComponent,
             QdDialogConfirmationErrorDirective,
             QdDialogConfirmationInfoDirective,
@@ -19224,6 +19326,10 @@ class QdDialogModule {
             {
                 provide: QD_PAGE_DIALOG_WITH_BREADCRUMBS_HOST,
                 useValue: QdPageDialogWithBreadcrumbsComponent
+            },
+            {
+                provide: QD_DISCARD_CONFIRM_DIALOG_COMPONENT_TOKEN,
+                useValue: QdDialogConfirmComponent
             }
         ], imports: [CommonModule,
             TranslateModule,
@@ -19259,6 +19365,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         QdDialogActionComponent,
                         QdDialogAuthSessionEndComponent,
                         QdDialogComponent,
+                        QdDialogConfirmComponent,
                         QdDialogConfirmationComponent,
                         QdDialogConfirmationErrorDirective,
                         QdDialogConfirmationInfoDirective,
@@ -19281,6 +19388,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         {
                             provide: QD_PAGE_DIALOG_WITH_BREADCRUMBS_HOST,
                             useValue: QdPageDialogWithBreadcrumbsComponent
+                        },
+                        {
+                            provide: QD_DISCARD_CONFIRM_DIALOG_COMPONENT_TOKEN,
+                            useValue: QdDialogConfirmComponent
                         }
                     ]
                 }]
@@ -19716,7 +19827,7 @@ class QdFileCollectorDialogComponent {
         return !!fileUpload.error || fileUpload.progress === 100;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFileCollectorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFileCollectorDialogComponent, isStandalone: false, selector: "qd-file-collector-dialog", providers: [QdFileCollectorService], ngImport: i0, template: "<qd-dialog>\n  <qd-file-collector-dialog-item\n    *ngFor=\"let fileUpload of this.fileUploads; let i = index\"\n    [progress]=\"fileUpload.progress\"\n    [collectedFile]=\"fileUpload.collectedFile\"\n    [error]=\"fileUpload.error\"\n    [data-test-id]=\"'file-collector-dialog-item-' + i\"\n  ></qd-file-collector-dialog-item>\n  <qd-dialog-action>\n    <button\n      qdButton\n      (click)=\"close()\"\n      [disabled]=\"isCloseButtonDisabled()\"\n      data-test-id=\"file-collector-dialog-button-finish\"\n    >\n      {{ \"i18n.qd.fileCollector.button.finish\" | translate }}\n    </button>\n  </qd-dialog-action>\n</qd-dialog>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "component", type: QdDialogActionComponent, selector: "qd-dialog-action" }, { kind: "component", type: QdDialogComponent, selector: "qd-dialog" }, { kind: "component", type: QdFileCollectorDialogItemComponent, selector: "qd-file-collector-dialog-item", inputs: ["progress", "collectedFile", "error", "data-test-id"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFileCollectorDialogComponent, isStandalone: false, selector: "qd-file-collector-dialog", providers: [QdFileCollectorService], ngImport: i0, template: "<qd-dialog>\n  <qd-file-collector-dialog-item\n    *ngFor=\"let fileUpload of this.fileUploads; let i = index\"\n    [progress]=\"fileUpload.progress\"\n    [collectedFile]=\"fileUpload.collectedFile\"\n    [error]=\"fileUpload.error\"\n    [data-test-id]=\"'file-collector-dialog-item-' + i\"\n  ></qd-file-collector-dialog-item>\n  <qd-dialog-action>\n    <button\n      qdButton\n      (click)=\"close()\"\n      [disabled]=\"isCloseButtonDisabled()\"\n      data-test-id=\"file-collector-dialog-button-finish\"\n    >\n      {{ \"i18n.qd.fileCollector.button.finish\" | translate }}\n    </button>\n  </qd-dialog-action>\n</qd-dialog>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "component", type: QdDialogActionComponent, selector: "qd-dialog-action" }, { kind: "component", type: QdDialogComponent, selector: "qd-dialog", inputs: ["data-test-id"] }, { kind: "component", type: QdFileCollectorDialogItemComponent, selector: "qd-file-collector-dialog-item", inputs: ["progress", "collectedFile", "error", "data-test-id"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFileCollectorDialogComponent, decorators: [{
             type: Component,
@@ -19919,7 +20030,7 @@ class QdFileDeleteDialogComponent {
         this.dialogRef.close(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFileDeleteDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFileDeleteDialogComponent, isStandalone: false, selector: "qd-file-delete-dialog", ngImport: i0, template: "<qd-dialog>\n  {{ deleteHint }}\n\n  <qd-dialog-action>\n    <button (click)=\"cancel()\" qdButton qdButtonGhost color=\"secondary\" data-test-id=\"file-delete-dialog-button-cancel\">\n      {{ \"i18n.qd.fileCollector.deleteConfirmation.button.cancel\" | translate }}\n    </button>\n\n    <button (click)=\"delete()\" qdButton color=\"error\" data-test-id=\"file-delete-dialog-button-delete\">\n      {{ \"i18n.qd.fileCollector.deleteConfirmation.button.delete\" | translate }}\n    </button>\n  </qd-dialog-action>\n</qd-dialog>\n", styles: [":host{overflow-wrap:break-word}\n"], dependencies: [{ kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: QdDialogActionComponent, selector: "qd-dialog-action" }, { kind: "component", type: QdDialogComponent, selector: "qd-dialog" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFileDeleteDialogComponent, isStandalone: false, selector: "qd-file-delete-dialog", ngImport: i0, template: "<qd-dialog>\n  {{ deleteHint }}\n\n  <qd-dialog-action>\n    <button (click)=\"cancel()\" qdButton qdButtonGhost color=\"secondary\" data-test-id=\"file-delete-dialog-button-cancel\">\n      {{ \"i18n.qd.fileCollector.deleteConfirmation.button.cancel\" | translate }}\n    </button>\n\n    <button (click)=\"delete()\" qdButton color=\"error\" data-test-id=\"file-delete-dialog-button-delete\">\n      {{ \"i18n.qd.fileCollector.deleteConfirmation.button.delete\" | translate }}\n    </button>\n  </qd-dialog-action>\n</qd-dialog>\n", styles: [":host{overflow-wrap:break-word}\n"], dependencies: [{ kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: QdDialogActionComponent, selector: "qd-dialog-action" }, { kind: "component", type: QdDialogComponent, selector: "qd-dialog", inputs: ["data-test-id"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFileDeleteDialogComponent, decorators: [{
             type: Component,
@@ -28279,6 +28390,7 @@ class QdTableModule {
             TranslateModule, i1$1.StoreFeatureModule, QdButtonModule,
             QdChipModule,
             QdDataFacetsModule,
+            QdDialogModule,
             QdIconModule,
             QdPopoverModule,
             QdStatusIndicatorModule,
@@ -28291,6 +28403,7 @@ class QdTableModule {
             QdButtonModule,
             QdChipModule,
             QdDataFacetsModule,
+            QdDialogModule,
             QdIconModule,
             QdPopoverModule,
             QdStatusIndicatorModule,
@@ -28308,6 +28421,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         QdButtonModule,
                         QdChipModule,
                         QdDataFacetsModule,
+                        QdDialogModule,
                         QdIconModule,
                         QdPopoverModule,
                         QdStatusIndicatorModule,
@@ -28713,7 +28827,7 @@ class QdContextSelectDialogComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdContextSelectDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdContextSelectDialogComponent, isStandalone: false, selector: "qd-context-select-dialog", providers: [QdSearchService], ngImport: i0, template: "<qd-dialog>\n  <div class=\"search\" *ngIf=\"data.config.hasSearch\">\n    <qd-search [configData]=\"searchConfig\"></qd-search>\n  </div>\n  <qd-table\n    [data]=\"tableData\"\n    [config]=\"tableConfig\"\n    (selectedRowsOutput)=\"select($event)\"\n    data-test-id=\"context-select-dialog-table\"\n  ></qd-table>\n  <qd-dialog-action>\n    <button qdButton qdButtonGhost color=\"secondary\" (click)=\"cancel()\">\n      {{ \"i18n.qd.context.dialog.cancelButtonLabel\" | translate }}\n    </button>\n    <button qdButton (click)=\"confirm()\" data-test-id=\"context-select-dialog-submit\">\n      {{ \"i18n.qd.context.dialog.confirmButtonLabel\" | translate }}\n    </button>\n  </qd-dialog-action>\n</qd-dialog>\n", styles: [".search{display:flex;justify-content:end;padding-bottom:.9375rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: QdDialogActionComponent, selector: "qd-dialog-action" }, { kind: "component", type: QdDialogComponent, selector: "qd-dialog" }, { kind: "component", type: QdTableComponent, selector: "qd-table", inputs: ["config", "data", "data-test-id"], outputs: ["secondaryActionOutput", "selectedRowsOutput", "emptyStateActionOutput"] }, { kind: "component", type: QdSearchComponent, selector: "qd-search", inputs: ["configData"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdContextSelectDialogComponent, isStandalone: false, selector: "qd-context-select-dialog", providers: [QdSearchService], ngImport: i0, template: "<qd-dialog>\n  <div class=\"search\" *ngIf=\"data.config.hasSearch\">\n    <qd-search [configData]=\"searchConfig\"></qd-search>\n  </div>\n  <qd-table\n    [data]=\"tableData\"\n    [config]=\"tableConfig\"\n    (selectedRowsOutput)=\"select($event)\"\n    data-test-id=\"context-select-dialog-table\"\n  ></qd-table>\n  <qd-dialog-action>\n    <button qdButton qdButtonGhost color=\"secondary\" (click)=\"cancel()\">\n      {{ \"i18n.qd.context.dialog.cancelButtonLabel\" | translate }}\n    </button>\n    <button qdButton (click)=\"confirm()\" data-test-id=\"context-select-dialog-submit\">\n      {{ \"i18n.qd.context.dialog.confirmButtonLabel\" | translate }}\n    </button>\n  </qd-dialog-action>\n</qd-dialog>\n", styles: [".search{display:flex;justify-content:end;padding-bottom:.9375rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: QdDialogActionComponent, selector: "qd-dialog-action" }, { kind: "component", type: QdDialogComponent, selector: "qd-dialog", inputs: ["data-test-id"] }, { kind: "component", type: QdTableComponent, selector: "qd-table", inputs: ["config", "data", "data-test-id"], outputs: ["secondaryActionOutput", "selectedRowsOutput", "emptyStateActionOutput"] }, { kind: "component", type: QdSearchComponent, selector: "qd-search", inputs: ["configData"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdContextSelectDialogComponent, decorators: [{
             type: Component,
@@ -28997,8 +29111,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 
 class QdPageCommitActionExecutor {
     static execute(action, values, context) {
-        const { formGroupManager, navigationInterceptor, destroyed$, onAfterSnapshot } = context;
-        const captured = formGroupManager.captureFormValues();
+        const { formGroupManager, navigationInterceptor, destroyed$, onAfterSnapshot, scheduleFrameworkRebuildStop } = context;
+        const captured = formGroupManager.createCurrentValuesSnapshot();
         let result$;
         navigationInterceptor.executeWithBypass(() => {
             const handlerResult = action.handler(values);
@@ -29006,7 +29120,9 @@ class QdPageCommitActionExecutor {
                 result$ = handlerResult;
         });
         const applySuccess = () => {
-            formGroupManager.setFormGroupsSnapshot(captured);
+            formGroupManager.updateSavedSnapshotFromValues(captured);
+            formGroupManager.startAdoptingFrameworkRebuild();
+            scheduleFrameworkRebuildStop?.();
             navigationInterceptor.executeWithBypass(() => {
                 try {
                     onAfterSnapshot?.();
@@ -29050,136 +29166,170 @@ class QdPageCommitActionExecutor {
 }
 
 /**
- * The QdFormGroupManagerService provides centralized registration, snapshotting, and value tracking
- * for multiple Angular `FormGroup` instances. It supports efficient state restoration, including dynamic
- * resizing of embedded `FormArray` controls, while avoiding any structural cloning in snapshots.
- *
- * #### Purpose:
- * This service is useful when managing multiple reactive forms that must be:
- * - Observed for changes
- * - Checked for validity
- * - Compared against a previous state (snapshot)
- * - Reset to a previous state, including dynamic form arrays
- *
- * #### Value Snapshot
- * Snapshots store only **raw values** (via `getRawValue()`), not any control instances.
- * This allows for minimal memory usage and easy comparison using deep equality checks.
- *
- * #### Smart FormArray Reset
- * When restoring a `FormArray`, the service ensures that the number and structure of controls
- * matches the snapshot values. Controls are cloned dynamically from an existing prototype.
- * If a `FormArray` was emptied (e.g. via `removeAt()`), a minimal control structure is inferred
- * from the snapshot data.
- *
- * #### Example Usage:
- *
- * **Register a FormGroup**
- * ```ts
- * service.setFormGroup('userForm', formGroup);
- * ```
- *
- * **Take a Snapshot**
- * ```ts
- * service.takeFormGroupsSnapshot();
- * ```
- *
- * **Detect Changes**
- * ```ts
- * service.$hasValuesChanged().subscribe(changed => {
- *   if (changed) {
- *     console.log('Form data has changed');
- *   }
- * });
- * ```
- *
- * **Restore from Snapshot**
- * ```ts
- * service.restoreFormGroupsFromSnapshot();
- * ```
- *
- * **Check if All Forms Are Valid**
- * ```ts
- * service.$areFormGroupsValid().subscribe(valid => {
- *   if (valid) {
- *     console.log('All forms valid!');
- *   }
- * });
- * ```
- *
- * #### Notes:
- * - FormArrays are not replaced during restore. Their length is adjusted and their content reset.
- * - Control cloning is recursive and structure-preserving.
- * - No structural information is stored in the snapshot; only data.
+ * Central tracker for all reactive forms on a single QdPage.
+ *
+ * Its main job is to answer one question: **has the user changed anything since the last save?**
+ * The page uses that answer to warn before leaving with unsaved changes.
+ *
+ * #### What it does
+ * - **Registry** — holds every form of the page and gives access to it.
+ * - **Change detection** — keeps a snapshot of the saved values and compares the live form against it.
+ * - **Restore** — resets the forms back to the snapshot when the user discards changes.
+ * - **Validity** — reports whether all forms are valid and can cancel in-flight async validators.
+ *
+ * #### Adopting framework rebuilds
+ * After a save, the consumer often rebuilds the form itself — a `FormArray` cleared and pushed
+ * again, or a control replaced via `setControl`. A plain value compare would wrongly read that as a
+ * user edit. To prevent that:
+ *
+ * - **What it does** — right after each save or snapshot write, the framework briefly *adopts its
+ *   own rebuild* (`startAdoptingFrameworkRebuild`) and folds those control replacements into the
+ *   snapshot, so they count as already saved.
+ * - **Why it is needed** — otherwise a rebuilt value (text `"99"` becoming number `99`) would look
+ *   like an unsaved change.
+ * - **When it ends** — the page stops adopting once the rebuild has rendered
+ *   (`stopAdoptingFrameworkRebuild`).
+ * - **User edits stay unsaved** — they always happen after that window, so they are still reported.
+ *
+ * #### Notes
+ * - Snapshots store only **raw values** (`getRawValue()`), never control instances — cheap to keep and compare.
+ * - Restoring a `FormArray` adjusts its length and resets its contents; it never replaces the array instance.
+ * - No structural information is stored in the snapshot, only data.
  */
 class QdFormGroupManagerService {
     _formGroups = new Map();
     _formGroupsSnapshot = new Map();
+    _knownControlInstances = new Map();
+    _isAdoptingFrameworkRebuild = false;
+    _frameworkRebuildSub;
     _formGroupsChanged$ = new BehaviorSubject(undefined);
+    _keysInInitialBuildup = new Set();
+    /**
+     * Registers a form under a key so the manager can track it.
+     *
+     * On first registration it also seeds the saved snapshot from the current values, so a freshly
+     * registered form counts as unchanged until the user actually edits it.
+     */
     setFormGroup(key, formGroup) {
         this._formGroups.set(key, formGroup);
+        if (!this._formGroupsSnapshot.has(key)) {
+            this._formGroupsSnapshot.set(key, formGroup.getRawValue());
+            this.rememberControlInstances(key, formGroup);
+            this._keysInInitialBuildup.add(key);
+        }
         this._formGroupsChanged$.next();
     }
+    /**
+     * Returns the form registered under the given key, or `undefined` if none is registered.
+     */
     getFormGroup(key) {
         return this._formGroups.get(key);
     }
+    /**
+     * Returns all registered forms, keyed by their registration key.
+     */
     getAllFormGroups() {
         return this._formGroups;
     }
-    tryRemoveFormGroup(key) {
-        this._formGroups.delete(key);
-        this._formGroupsChanged$.next();
-    }
+    /**
+     * Returns `true` if at least one form is registered.
+     */
     hasFormGroups() {
         return this._formGroups.size > 0;
     }
+    /**
+     * Returns `true` if no form is registered under the given key yet.
+     */
+    isFormGroupKeyUnique(key) {
+        return !this._formGroups.has(key);
+    }
+    /**
+     * Returns the current `.value` of every registered form, keyed by registration key.
+     *
+     * Uses Angular's `.value`, so disabled controls are omitted. Use the snapshot methods when you
+     * need the raw values including disabled controls.
+     */
     getAllValues() {
         const allValues = {};
         this._formGroups.forEach((formGroup, key) => (allValues[key] = formGroup.value));
         return allValues;
     }
-    isFormGroupKeyUnique(key) {
-        return !this._formGroups.has(key);
+    /**
+     * Unregisters the form under the given key and drops its instance tracking.
+     *
+     * Does nothing if no form is registered for the key.
+     */
+    tryRemoveFormGroup(key) {
+        this._formGroups.delete(key);
+        this._knownControlInstances.delete(key);
+        this._keysInInitialBuildup.delete(key);
+        this._formGroupsChanged$.next();
     }
-    $areFormGroupsValid() {
-        return this._formGroupsChanged$.pipe(observeOn(queueScheduler), switchMap$1(() => {
-            if (!this.hasFormGroups())
-                return of(false);
-            const obs = Array.from(this._formGroups.values()).map(fg => fg.statusChanges.pipe(startWith(fg.status), map(() => this.areFormGroupsValid(fg))));
-            return combineLatest(obs).pipe(map(valids => valids.every(Boolean)));
-        }));
+    /**
+     * Ends the initial-buildup phase for a key and fixes its baseline from the form as it is now.
+     *
+     * During that phase the key never counts as changed, so a form filled right after registration
+     * (e.g. by an `effect`) is not flagged as unsaved. This stores the current values as the baseline,
+     * so later edits are measured against the filled form.
+     *
+     * Does nothing if the key is not in its initial-buildup phase.
+     */
+    endInitialBuildup(key) {
+        if (!this._keysInInitialBuildup.delete(key))
+            return;
+        const formGroup = this._formGroups.get(key);
+        if (formGroup) {
+            this._formGroupsSnapshot.set(key, formGroup.getRawValue());
+            this.rememberControlInstances(key, formGroup);
+        }
+        this._formGroupsChanged$.next();
     }
+    /**
+     * Emits whether any registered form differs from its saved snapshot — i.e. whether the user has
+     * unsaved changes.
+     *
+     * Framework-driven rebuilds are folded into the snapshot first while the framework is adopting
+     * them (see the class docs), so they are not reported as changes.
+     */
     $hasValuesChanged() {
-        return this._formGroupsChanged$.pipe(observeOn(queueScheduler), switchMap$1(() => {
-            if (!this.hasFormGroups())
-                return of(false);
-            const obs = Array.from(this._formGroups.entries()).map(([key, fg]) => fg.valueChanges.pipe(startWith(fg.getRawValue()), map(() => {
-                const currentValues = fg.getRawValue();
-                const snapshot = this._formGroupsSnapshot.get(key);
-                return snapshot ? !isEqual$1(currentValues, snapshot) : true;
-            })));
-            return combineLatest(obs).pipe(map(changes => changes.some(Boolean)));
-        }));
+        return this._formGroupsChanged$.pipe(observeOn(queueScheduler), switchMap$1(() => this.anyRegisteredFormChanged$()));
     }
-    takeFormGroupsSnapshot() {
-        this._formGroups.forEach((fg, key) => this._formGroupsSnapshot.set(key, fg.getRawValue()));
+    /**
+     * Overwrites the saved snapshot with the **current** form values — for a **synchronous** save
+     * that is already finished.
+     *
+     * - Stores each form's raw values (`getRawValue`) as the new saved snapshot.
+     * - Takes them **directly, without a deep copy** — synchronous means no edits can slip in
+     *   between, so the cheap path is safe (only the async path needs the copy).
+     * - Afterwards the current state counts as saved; later edits are measured against it.
+     *
+     * For an **asynchronous** save, use `createCurrentValuesSnapshot()` + `updateSavedSnapshotFromValues()`.
+     */
+    updateSavedSnapshotFromCurrentValues() {
+        this._formGroups.forEach((fg, key) => {
+            this._formGroupsSnapshot.set(key, fg.getRawValue());
+            this.rememberControlInstances(key, fg);
+        });
     }
     /**
-     * Captures a deep-cloned snapshot of all current form values without mutating internal state.
+     * Creates an independent snapshot of the **current** form values and returns it — for the
+     * **click moment** of an **asynchronous** save.
      *
-     * Used by framework orchestration code that needs to remember the "at click time" state of a form
-     * so the snapshot can later be set to exactly those values — even if the user edits the form
-     * while an async commit action is pending.
+     * - Deep-copies each form's raw values (`structuredClone`), detached from the live form.
+     * - Writes **nothing** internally — the saved snapshot stays unchanged.
+     * - Freezes the click-time state: later edits (while the backend runs) do not change the copy.
+     * - Hand the result to `updateSavedSnapshotFromValues()` once the save succeeds.
      *
      * Throws if any form value is not structured-cloneable (functions, symbols, DOM nodes).
      */
-    captureFormValues() {
+    createCurrentValuesSnapshot() {
         const captured = new Map();
         this._formGroups.forEach((fg, key) => {
             try {
                 captured.set(key, structuredClone(fg.getRawValue()));
             }
             catch (err) {
-                throw new Error(`Quadrel Framework | QdFormGroupManager - captureFormValues() failed for group "${key}". ` +
+                throw new Error(`Quadrel Framework | QdFormGroupManager - createCurrentValuesSnapshot() failed for group "${key}". ` +
                     `Form values must be structured-cloneable. Non-cloneable values like functions, ` +
                     `symbols, or DOM nodes are not supported. Original error: ${String(err)}`);
             }
@@ -29187,15 +29337,27 @@ class QdFormGroupManagerService {
         return captured;
     }
     /**
-     * Replaces the internal saved snapshot with the provided values.
+     * Overwrites the saved snapshot with the **given** snapshot — on **success** of an
+     * **asynchronous** save, using the snapshot taken earlier by `createCurrentValuesSnapshot()`.
      *
-     * Intended to be paired with `captureFormValues()` so that the snapshot can be set to the
-     * values present when a commit action was initiated — independent of whether the user edited
-     * the form in the meantime.
-     */
-    setFormGroupsSnapshot(values) {
-        values.forEach((snapshot, key) => this._formGroupsSnapshot.set(key, snapshot));
+     * - Stores the passed snapshot as the new saved state.
+     * - Uses the click-time snapshot, **not** the current form — so edits the user made while the
+     *   backend was running stay correctly marked as unsaved.
+     */
+    updateSavedSnapshotFromValues(snapshot) {
+        snapshot.forEach((values, key) => {
+            this._formGroupsSnapshot.set(key, values);
+            const formGroup = this._formGroups.get(key);
+            if (formGroup)
+                this.rememberControlInstances(key, formGroup);
+        });
     }
+    /**
+     * Resets every registered form back to its saved snapshot — used when the user discards changes.
+     *
+     * FormArrays are resized to match the snapshot length; pending async validators are cancelled
+     * afterwards so no stale validation result survives the restore.
+     */
     restoreFormGroupsFromSnapshot() {
         this._formGroups.forEach((fg, key) => {
             const snapshot = this._formGroupsSnapshot.get(key);
@@ -29206,68 +29368,171 @@ class QdFormGroupManagerService {
         this.cancelPendingAsyncValidation();
     }
     /**
-     * Cancels any in-flight async validators on all registered form groups.
+     * Starts adopting framework rebuilds into the snapshot. While active, a framework-driven control
+     * replacement (a `setControl` on a leaf or a whole `FormArray` rebuilt via clear/push) is folded
+     * into the saved snapshot, so it is not reported as an unsaved change.
+     *
+     * User edits never fall in this short window, so they stay dirty. The framework starts it after a
+     * successful commit and after every snapshot write; the page stops it deterministically once the
+     * rebuild has rendered.
+     */
+    startAdoptingFrameworkRebuild() {
+        this._isAdoptingFrameworkRebuild = true;
+        this._frameworkRebuildSub?.unsubscribe();
+        const valueStreams = Array.from(this._formGroups.values()).map(fg => fg.valueChanges);
+        if (valueStreams.length)
+            this._frameworkRebuildSub = merge(...valueStreams).subscribe(() => this.adoptFrameworkRebuild());
+        this.adoptFrameworkRebuild();
+    }
+    /**
+     * Stops adopting framework rebuilds. After this, control replacements count as user edits again.
+     *
+     * The page calls this once the framework rebuild has rendered (via `afterNextRender`).
+     */
+    stopAdoptingFrameworkRebuild() {
+        this._isAdoptingFrameworkRebuild = false;
+        this._frameworkRebuildSub?.unsubscribe();
+    }
+    /**
+     * Emits whether every registered form is currently valid.
+     *
+     * A disabled control without validators is treated as valid.
+     */
+    $areFormGroupsValid() {
+        return this._formGroupsChanged$.pipe(observeOn(queueScheduler), switchMap$1(() => {
+            if (!this.hasFormGroups())
+                return of(false);
+            const obs = Array.from(this._formGroups.values()).map(fg => fg.statusChanges.pipe(startWith(fg.status), map(() => this.areFormGroupsValid(fg))));
+            return combineLatest(obs).pipe(map(valids => valids.every(Boolean)));
+        }));
+    }
+    /**
+     * Cancels every in-flight (PENDING) async validator across all registered forms, so no stale
+     * validation result can land after a restore or a commit.
      *
-     * 1. Collect all PENDING controls and their async validators
-     * 2. Clear all async validators, then update validity (sync-only, no cascade)
-     * 3. Re-attach async validators for future use
+     * The async validators themselves are kept — only the pending run is dropped. Each phase runs
+     * over **all** pending controls before the next starts (detach → re-evaluate sync-only, no
+     * cascade → re-attach), so validity is never recomputed while a run is still settling.
      */
     cancelPendingAsyncValidation() {
         this._formGroups.forEach(fg => {
             const pendingControls = this.collectPendingControls(fg);
             if (pendingControls.length === 0)
                 return;
-            for (const { control } of pendingControls) {
-                control.clearAsyncValidators();
-            }
-            for (const { control } of pendingControls) {
-                control.updateValueAndValidity({ onlySelf: true });
-            }
-            for (const { control, asyncValidator } of pendingControls) {
-                control.setAsyncValidators(asyncValidator);
-            }
+            pendingControls.forEach(({ control }) => control.clearAsyncValidators());
+            pendingControls.forEach(({ control }) => control.updateValueAndValidity({ onlySelf: true }));
+            pendingControls.forEach(({ control, asyncValidator }) => control.setAsyncValidators(asyncValidator));
         });
     }
-    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);
-            }
+    anyRegisteredFormChanged$() {
+        if (!this.hasFormGroups())
+            return of(false);
+        const perForm = Array.from(this._formGroups.entries()).map(([key, fg]) => fg.valueChanges.pipe(startWith(null), map(() => this.hasFormChanged(key, fg))));
+        return combineLatest(perForm).pipe(map(flags => flags.some(Boolean)));
+    }
+    hasFormChanged(key, fg) {
+        if (this._keysInInitialBuildup.has(key))
+            return false;
+        const snapshot = this._formGroupsSnapshot.get(key);
+        if (snapshot)
+            this.adoptRebuildInGroup(key, fg, snapshot);
+        return snapshot ? !isEqual$1(fg.getRawValue(), snapshot) : true;
+    }
+    adoptFrameworkRebuild() {
+        this._formGroups.forEach((fg, key) => {
+            const snapshot = this._formGroupsSnapshot.get(key);
+            if (snapshot)
+                this.adoptRebuildInGroup(key, fg, snapshot);
         });
     }
-    collectPendingControls(control) {
-        const result = [];
-        if (control instanceof FormGroup) {
-            Object.values(control.controls).forEach(c => result.push(...this.collectPendingControls(c)));
-        }
-        else if (control instanceof FormArray) {
-            control.controls.forEach(c => result.push(...this.collectPendingControls(c)));
-        }
-        if (control.status === 'PENDING') {
-            result.push({ control, asyncValidator: control.asyncValidator });
+    adoptRebuildInGroup(key, formGroup, snapshot) {
+        const tracked = this._knownControlInstances.get(key) ?? new Map();
+        this.adoptRebuiltControls(formGroup, snapshot, tracked, '');
+        this._knownControlInstances.set(key, tracked);
+    }
+    adoptRebuiltControls(group, snapshot, tracked, prefix) {
+        Object.entries(group.controls).forEach(([name, control]) => {
+            const path = prefix ? `${prefix}.${name}` : name;
+            const isNewKey = !(name in snapshot);
+            if (control instanceof FormArray)
+                this.adoptRebuiltList(control, snapshot, name, isNewKey);
+            else if (control instanceof FormGroup)
+                this.adoptRebuiltGroup(control, snapshot, name, isNewKey, tracked, path);
+            else
+                this.adoptRebuiltField(control, snapshot, name, isNewKey, tracked.get(path));
+            tracked.set(path, control);
+        });
+    }
+    adoptRebuiltList(control, snapshot, name, isNewKey) {
+        if (isNewKey) {
+            this.adoptNewPristineControl(control, snapshot, name);
+            return;
         }
-        return result;
+        if (!this.isAdoptableArrayRebuild(control, snapshot, name))
+            return;
+        const snapshotArray = snapshot[name];
+        const currentArray = control.getRawValue();
+        if (currentArray.length === snapshotArray.length && !isEqual$1(currentArray, snapshotArray))
+            snapshot[name] = currentArray;
+    }
+    adoptRebuiltGroup(group, snapshot, name, isNewKey, tracked, path) {
+        if (isNewKey)
+            this.adoptNewPristineControl(group, snapshot, name);
+        const nested = snapshot[name];
+        if (this.isPlainObject(nested))
+            this.adoptRebuiltControls(group, nested, tracked, path);
+    }
+    adoptRebuiltField(control, snapshot, name, isNewKey, known) {
+        if (isNewKey)
+            this.adoptNewPristineControl(control, snapshot, name);
+        else if (this.isReplacedPristineControl(control, known))
+            snapshot[name] = control.getRawValue();
+    }
+    adoptNewPristineControl(control, snapshot, name) {
+        if (control.pristine)
+            snapshot[name] = control.getRawValue();
+    }
+    isAdoptableArrayRebuild(control, snapshot, name) {
+        return this._isAdoptingFrameworkRebuild && control.pristine && Array.isArray(snapshot[name]);
+    }
+    isReplacedPristineControl(control, known) {
+        return this._isAdoptingFrameworkRebuild && !!known && known !== control && control.pristine;
+    }
+    rememberControlInstances(key, formGroup) {
+        const tracked = new Map();
+        this.collectControlInstances(formGroup, tracked, '');
+        this._knownControlInstances.set(key, tracked);
+    }
+    collectControlInstances(group, tracked, prefix) {
+        Object.entries(group.controls).forEach(([name, control]) => {
+            const path = prefix ? `${prefix}.${name}` : name;
+            tracked.set(path, control);
+            if (control instanceof FormGroup)
+                this.collectControlInstances(control, tracked, path);
+        });
+    }
+    restoreFormGroup(fg, snapshot) {
+        Object.entries(fg.controls).forEach(([ctrlKey, ctrl]) => this.restoreControl(ctrl, snapshot[ctrlKey]));
+    }
+    restoreControl(ctrl, newValue) {
+        if (ctrl instanceof FormArray && Array.isArray(newValue))
+            this.resetFormArrayToValues(ctrl, newValue);
+        else if (ctrl instanceof FormGroup && this.isPlainObject(newValue))
+            this.restoreFormGroup(ctrl, newValue);
+        else
+            ctrl.reset(newValue);
+    }
+    isPlainObject(value) {
+        return !!value && typeof value === 'object';
     }
     resetFormArrayToValues(array, newValues) {
         if (!Array.isArray(newValues))
             return;
-        const oldLen = array.length;
-        const newLen = newValues.length;
-        if (oldLen === 0 && newLen === 0)
+        if (array.length === 0 && newValues.length === 0)
             return;
-        if (oldLen === 0 && newLen > 0)
+        if (array.length === 0)
             return this.initFormArrayFromValues(array, newValues);
-        while (array.length < newLen)
-            array.push(this.deepCloneControl(array.at(0)));
-        while (array.length > newLen)
-            array.removeAt(array.length - 1);
+        this.resizeFormArray(array, newValues.length);
         array.reset(newValues);
     }
     initFormArrayFromValues(array, values) {
@@ -29283,6 +29548,12 @@ class QdFormGroupManagerService {
         }
         array.reset(values);
     }
+    resizeFormArray(array, length) {
+        while (array.length < length)
+            array.push(this.deepCloneControl(array.at(0)));
+        while (array.length > length)
+            array.removeAt(array.length - 1);
+    }
     deepCloneControl(control) {
         if (control instanceof FormControl)
             return new FormControl(undefined, control.validator, control.asyncValidator);
@@ -29300,6 +29571,19 @@ class QdFormGroupManagerService {
     areFormGroupsValid(fg) {
         return Object.values(fg.controls).every(c => (c.disabled && !c.validator && !c.asyncValidator ? true : c.valid));
     }
+    collectPendingControls(control) {
+        const result = this.childControlsOf(control).flatMap(child => this.collectPendingControls(child));
+        if (control.status === 'PENDING')
+            result.push({ control, asyncValidator: control.asyncValidator });
+        return result;
+    }
+    childControlsOf(control) {
+        if (control instanceof FormGroup)
+            return Object.values(control.controls);
+        if (control instanceof FormArray)
+            return control.controls;
+        return [];
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFormGroupManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFormGroupManagerService });
 }
@@ -29328,7 +29612,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  * - The page switches to view mode via `deactivate()`.
  *
  * The service has no concept of "pending actions" or bypass windows. Framework actions update the
- * saved snapshot directly via `QdFormGroupManagerService.setFormGroupsSnapshot(...)`; cancel-discard
+ * saved snapshot directly via `QdFormGroupManagerService.updateSavedSnapshotFromValues(...)`; cancel-discard
  * flows reset the form to the saved snapshot via `restoreFormGroupsFromSnapshot()`. Either way, the
  * interceptor only observes the resulting form state — there is no time window where a bypass is active.
  */
@@ -29478,6 +29762,7 @@ class QdPageObjectHeaderComponent {
     confirmationDialogService = inject(QdConfirmationDialogOpenerService);
     contextService = inject(QdContextService);
     resolverTriggerService = inject(QdResolverTriggerService);
+    injector = inject(Injector);
     pageStoreService = inject(QdPageStoreService);
     config;
     hasNavigation = false;
@@ -29598,7 +29883,7 @@ class QdPageObjectHeaderComponent {
             this.setupResolverTrigger();
         this.updateCustomActions();
         this.subscribeToMetadataStream();
-        this.formGroupManagerService.takeFormGroupsSnapshot();
+        this.formGroupManagerService.updateSavedSnapshotFromCurrentValues();
         this.initContexts();
     }
     ngOnChanges(changes) {
@@ -29623,7 +29908,7 @@ class QdPageObjectHeaderComponent {
         return this.config.headerFacets != null;
     }
     edit() {
-        this.formGroupManagerService.takeFormGroupsSnapshot();
+        this.formGroupManagerService.updateSavedSnapshotFromCurrentValues();
         this.pageStoreService.toggleViewonly(false);
         if (this.editButton?.handler)
             this.editButton.handler();
@@ -29653,7 +29938,8 @@ class QdPageObjectHeaderComponent {
             onAfterSnapshot: () => {
                 this.formGroupManagerService.cancelPendingAsyncValidation();
                 this.pageStoreService.toggleViewonly(true);
-            }
+            },
+            scheduleFrameworkRebuildStop: () => afterNextRender(() => this.formGroupManagerService.stopAdoptingFrameworkRebuild(), { injector: this.injector })
         });
     }
     changeContext(context, selection, event) {
@@ -29681,7 +29967,7 @@ class QdPageObjectHeaderComponent {
             .pipe(takeUntil(this._destroyed$), filter(shouldTrigger => shouldTrigger), tap(() => this._isLoadingSubject.next(true)), switchMap(() => this.pageObjectResolver.resolve()), tap(objectData => {
             this._pageObjectDataSubject.next({ ...objectData, ...this._pendingMetadata });
             this._pendingMetadata = {};
-        }), tap(() => this._isLoadingSubject.next(false)), tap(() => this.formGroupManagerService.takeFormGroupsSnapshot()))
+        }), tap(() => this._isLoadingSubject.next(false)), tap(() => this.formGroupManagerService.updateSavedSnapshotFromCurrentValues()))
             .subscribe();
     }
     initContexts() {
@@ -29872,7 +30158,7 @@ class QdPageStepperCancelDialogComponent {
       </button>
       <button qdButton (click)="close(true)">{{ 'i18n.qd.stepper.cancel.dialog.delete' | translate }}</button>
     </qd-dialog-action>
-  </qd-dialog> `, isInline: true, dependencies: [{ kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: QdDialogActionComponent, selector: "qd-dialog-action" }, { kind: "component", type: QdDialogComponent, selector: "qd-dialog" }, { kind: "component", type: QdTextSectionComponent, selector: "qd-text-section" }, { kind: "component", type: QdTextSectionParagraphComponent, selector: "qd-text-section-paragraph" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  </qd-dialog> `, isInline: true, dependencies: [{ kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: QdDialogActionComponent, selector: "qd-dialog-action" }, { kind: "component", type: QdDialogComponent, selector: "qd-dialog", inputs: ["data-test-id"] }, { kind: "component", type: QdTextSectionComponent, selector: "qd-text-section" }, { kind: "component", type: QdTextSectionParagraphComponent, selector: "qd-text-section-paragraph" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageStepperCancelDialogComponent, decorators: [{
             type: Component,
@@ -31459,6 +31745,7 @@ class QdPageComponent {
     bottomOffset$ = inject(QD_SAFE_BOTTOM_OFFSET, { optional: true });
     dialogRef = inject(DialogRef, { optional: true });
     navigationInterceptor = inject(QdPageNavigationInterceptorService);
+    injector = inject(Injector);
     confirmationDialogService = inject(QdConfirmationDialogOpenerService);
     /**
      * This property defines the configuration for the QdPage component, including the page type,
@@ -31655,7 +31942,10 @@ class QdPageComponent {
             QdPageCommitActionExecutor.execute(action, values, {
                 formGroupManager: this.formGroupManagerService,
                 navigationInterceptor: this.navigationInterceptor,
-                destroyed$: this._destroyed$
+                destroyed$: this._destroyed$,
+                scheduleFrameworkRebuildStop: () => afterNextRender(() => this.formGroupManagerService.stopAdoptingFrameworkRebuild(), {
+                    injector: this.injector
+                })
             });
         };
     }
@@ -31767,6 +32057,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  * - Snapshots store only raw values and are taken by the page/header workflow (e.g. on init, edit, save). The confirmation dialog may restore all registered form groups from the snapshot.
  * - FormArrays are restored with dynamic resizing (length is aligned to snapshot before values are reset).
  *
+ * ### **Filling a form right after connecting it**
+ * - You can fill a connected form right after registration — e.g. an `effect` that adds controls or pushes `FormArray` rows. This first fill is the form's starting point, not a user change.
+ * - So loading data into a fresh form never triggers a false "unsaved changes" prompt. Only later edits count.
+ *
  * ### **Page-Dialog (FullWidth) – Unsaved-Changes Close Contract**
  * - When a QdPage is embedded in a full-width page dialog, the directive’s registered form groups are also used to guard dialog closing.
  * - The page dialog can only close (e.g. via ESC or backdrop) if no unsaved changes are detected ($hasValuesChanged() is false).
@@ -31779,8 +32073,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  * ```html
  * <qd-page [config]="pageConfig">
  *   <qd-section [config]="sectionConfig">
- *     <qd-grid [formGroup]="myFormGroup" qdConnectFormStateToPage="myFormGroup">
- *       My Section
+ *     <qd-grid
+ *        qdConnectFormStateToPage="myFormGroup"
+ *        [formGroup]="myFormGroup">
+ *          My Section
  *     </qd-grid>
  *   </qd-section>
  * </qd-page>
@@ -31800,36 +32096,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 class QdConnectFormStateToPageDirective {
     formGroupManagerService = inject(QdFormGroupManagerService, { optional: true });
     formGroupDirective = inject(FormGroupDirective, { host: true, optional: true });
+    closeInitialBuildupHandle;
     /**
      * This key is used to manage and track the form state within the page. It has to be unique for each FormGroup Connector. Use the property name of the FormGroup in your component.
      */
     qdConnectFormStateToPage;
     ngOnInit() {
-        if (!this.isValid())
-            return;
         const formGroup = this.formGroupDirective?.control;
-        if (formGroup && this.qdConnectFormStateToPage) {
-            this.formGroupManagerService.setFormGroup(this.qdConnectFormStateToPage, formGroup);
-        }
-    }
-    ngOnDestroy() {
-        this.formGroupManagerService?.tryRemoveFormGroup(this.qdConnectFormStateToPage);
-    }
-    isValid() {
-        const hasFormGroup = this.formGroupDirective?.control;
-        if (!hasFormGroup) {
+        if (!formGroup) {
             console.error('Quadrel Framework | QdConnectFormStateToPage - Either a [formGroup] binding or <qd-quick-edit> with a FormGroup is required.');
-            return false;
+            return;
         }
         if (!this.formGroupManagerService) {
             console.error('Quadrel Framework | QdConnectFormStateToPage - The connector must be used within <qd-page>.');
-            return false;
+            return;
         }
         if (!this.formGroupManagerService.isFormGroupKeyUnique(this.qdConnectFormStateToPage)) {
             console.error(`Quadrel Framework | QdConnectFormStateToPage - The FormGroup key "${this.qdConnectFormStateToPage}" is not unique.`);
-            return false;
+            return;
         }
-        return true;
+        this.formGroupManagerService.setFormGroup(this.qdConnectFormStateToPage, formGroup);
+        this.scheduleInitialBaseline(this.formGroupManagerService);
+    }
+    ngOnDestroy() {
+        if (this.closeInitialBuildupHandle)
+            clearTimeout(this.closeInitialBuildupHandle);
+        this.formGroupManagerService?.tryRemoveFormGroup(this.qdConnectFormStateToPage);
+    }
+    scheduleInitialBaseline(manager) {
+        const key = this.qdConnectFormStateToPage;
+        this.closeInitialBuildupHandle = setTimeout(() => manager.endInitialBuildup(key));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdConnectFormStateToPageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QdConnectFormStateToPageDirective, isStandalone: false, selector: "[qdConnectFormStateToPage]", inputs: { qdConnectFormStateToPage: "qdConnectFormStateToPage" }, ngImport: i0 });
@@ -33762,7 +34058,7 @@ class AddCommentDialogComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AddCommentDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: AddCommentDialogComponent, isStandalone: false, selector: "qd-comment-dialog", ngImport: i0, template: "<qd-dialog>\n  <form [formGroup]=\"form\">\n    <qd-input [config]=\"authorInputConfig\"></qd-input>\n    <qd-dropdown\n      *ngIf=\"customInputConfig\"\n      [config]=\"customInputConfig\"\n      [formControlName]=\"'custom'\"\n      [attr.data-test-id]=\"'comment-custom'\"\n    ></qd-dropdown>\n\n    <qd-richtext [config]=\"richtextConfig\" #commentText [formControlName]=\"'comment'\"> </qd-richtext>\n  </form>\n  <qd-dialog-action>\n    <button qdButton qdButtonGhost color=\"secondary\" (click)=\"close()\" [data-test-id]=\"'button-cancel'\">\n      {{ \"i18n.qd.comments.add.dialog.cancel\" | translate }}\n    </button>\n    <button\n      [disabled]=\"!commentText.value || commentText.hasError\"\n      qdButton\n      (click)=\"close('Yes')\"\n      [data-test-id]=\"'button-submit'\"\n    >\n      {{ \"i18n.qd.comments.add.dialog.submit\" | translate }}\n    </button>\n  </qd-dialog-action>\n</qd-dialog>\n", styles: [".validation-message{margin-top:4px;color:red;font-size:.875em}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }, { kind: "component", type: QdRichtextComponent, selector: "qd-richtext", inputs: ["formControlName", "value", "config", "data-test-id"], outputs: ["valueChange", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "component", type: QdDialogActionComponent, selector: "qd-dialog-action" }, { kind: "component", type: QdDialogComponent, selector: "qd-dialog" }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: AddCommentDialogComponent, isStandalone: false, selector: "qd-comment-dialog", ngImport: i0, template: "<qd-dialog>\n  <form [formGroup]=\"form\">\n    <qd-input [config]=\"authorInputConfig\"></qd-input>\n    <qd-dropdown\n      *ngIf=\"customInputConfig\"\n      [config]=\"customInputConfig\"\n      [formControlName]=\"'custom'\"\n      [attr.data-test-id]=\"'comment-custom'\"\n    ></qd-dropdown>\n\n    <qd-richtext [config]=\"richtextConfig\" #commentText [formControlName]=\"'comment'\"> </qd-richtext>\n  </form>\n  <qd-dialog-action>\n    <button qdButton qdButtonGhost color=\"secondary\" (click)=\"close()\" [data-test-id]=\"'button-cancel'\">\n      {{ \"i18n.qd.comments.add.dialog.cancel\" | translate }}\n    </button>\n    <button\n      [disabled]=\"!commentText.value || commentText.hasError\"\n      qdButton\n      (click)=\"close('Yes')\"\n      [data-test-id]=\"'button-submit'\"\n    >\n      {{ \"i18n.qd.comments.add.dialog.submit\" | translate }}\n    </button>\n  </qd-dialog-action>\n</qd-dialog>\n", styles: [".validation-message{margin-top:4px;color:red;font-size:.875em}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }, { kind: "component", type: QdRichtextComponent, selector: "qd-richtext", inputs: ["formControlName", "value", "config", "data-test-id"], outputs: ["valueChange", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "component", type: QdDialogActionComponent, selector: "qd-dialog-action" }, { kind: "component", type: QdDialogComponent, selector: "qd-dialog", inputs: ["data-test-id"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AddCommentDialogComponent, decorators: [{
             type: Component,