@quadrel-enterprise-ui/framework 20.27.2 → 20.27.3-beta.236.1

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

@@ -1,5 +1,5 @@
 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 { 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, DialogModule } from '@angular/cdk/dialog';
 import * as i1 from '@angular/common';
 import { CommonModule, NgFor, NgIf, NgClass, NgTemplateOutlet, AsyncPipe } from '@angular/common';
@@ -1550,11 +1550,11 @@ 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", 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    data-test-id=\"dialog-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  data-test-id=\"dialog-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=\"dialog-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=\"dialog-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"] }]
+            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    data-test-id=\"dialog-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  data-test-id=\"dialog-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=\"dialog-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=\"dialog-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: { body: [{
                 type: ViewChild,
                 args: ['body']
@@ -11767,41 +11767,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();
@@ -17015,11 +17021,11 @@ class QdNotificationComponent {
         return !!this.element.nativeElement.closest('qd-snackbar');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdNotificationComponent, isStandalone: false, selector: "qd-notification", inputs: { type: "type", notification: "notification" }, host: { properties: { "attr.class": "this.typeClassName" }, classAttribute: "qd-notification" }, ngImport: i0, template: "<qd-icon *ngIf=\"closeable\" [icon]=\"'timesLarge'\" class=\"closer\" (click)=\"remove()\"></qd-icon>\n<qd-icon [icon]=\"this.getIcon()\" class=\"icon\"></qd-icon>\n\n<ng-content select=\"qd-notification-content\"></ng-content>\n\n<div class=\"title\" *ngIf=\"notification?.title\">{{ notification.title.i18n | translate }}</div>\n<div class=\"message\">\n  <span>{{ notification?.i18n | translate }}</span>\n  <a class=\"link\" *ngIf=\"notification?.link\" (click)=\"handleLinkClick()\">{{ notification.link.i18n | translate }}</a>\n</div>\n", styles: [":host{position:relative;z-index:9999!important;display:block;width:100%;padding:1rem 2rem .5rem 2.75rem;border-width:.0625rem;border-style:solid;border-left-width:.25rem;margin-bottom:.5rem;background:#fff;box-shadow:0 0 .625rem #979797;font-size:.875rem;gap:.5rem;line-height:1rem}:host.qd-notification-info{border-color:#069}:host.qd-notification-info .icon,:host.qd-notification-info .title{color:#069}:host.qd-notification-warning{border-color:#ff9b00}:host.qd-notification-warning .icon,:host.qd-notification-warning .title{color:#ff9b00}:host.qd-notification-critical{border-color:#c70023}:host.qd-notification-critical .icon,:host.qd-notification-critical .title{color:#c70023}:host.qd-notification-success{border-color:#00813a}:host.qd-notification-success .icon,:host.qd-notification-success .title{color:#00813a}:host .icon{position:absolute;top:.9375rem;left:1rem;font-size:1.25rem}:host .closer{position:absolute;top:1rem;right:.75rem;color:#171717;cursor:pointer;font-size:.8125rem;font-weight:600}:host .title{margin-bottom:.375rem;font-weight:500}:host .message{margin-bottom:.25rem;white-space:pre-wrap}:host .link{margin-bottom:.375rem;margin-left:.375rem;color:#069;cursor:pointer}:host .link:hover{text-decoration:underline}:host:host-context(qd-snackbar) .link{display:block;margin-top:.375rem;margin-left:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdNotificationComponent, isStandalone: false, selector: "qd-notification", inputs: { type: "type", notification: "notification" }, host: { properties: { "attr.class": "this.typeClassName" }, classAttribute: "qd-notification" }, ngImport: i0, template: "<qd-icon *ngIf=\"closeable\" [icon]=\"'timesLarge'\" class=\"closer\" (click)=\"remove()\"></qd-icon>\n<qd-icon [icon]=\"this.getIcon()\" class=\"icon\"></qd-icon>\n\n<ng-content select=\"qd-notification-content\"></ng-content>\n\n<div class=\"title\" *ngIf=\"notification?.title\">{{ notification.title.i18n | translate }}</div>\n<div class=\"message\">\n  <span>{{ notification?.i18n | translate }}</span>\n  <a class=\"link\" *ngIf=\"notification?.link\" (click)=\"handleLinkClick()\">{{ notification.link.i18n | translate }}</a>\n</div>\n", styles: [":host{position:relative;display:block;width:100%;padding:1rem 2rem .5rem 2.75rem;border-width:.0625rem;border-style:solid;border-left-width:.25rem;margin-bottom:.5rem;background:#fff;box-shadow:0 0 .625rem #979797;font-size:.875rem;gap:.5rem;line-height:1rem}:host.qd-notification-info{border-color:#069}:host.qd-notification-info .icon,:host.qd-notification-info .title{color:#069}:host.qd-notification-warning{border-color:#ff9b00}:host.qd-notification-warning .icon,:host.qd-notification-warning .title{color:#ff9b00}:host.qd-notification-critical{border-color:#c70023}:host.qd-notification-critical .icon,:host.qd-notification-critical .title{color:#c70023}:host.qd-notification-success{border-color:#00813a}:host.qd-notification-success .icon,:host.qd-notification-success .title{color:#00813a}:host .icon{position:absolute;top:.9375rem;left:1rem;font-size:1.25rem}:host .closer{position:absolute;top:1rem;right:.75rem;color:#171717;cursor:pointer;font-size:.8125rem;font-weight:600}:host .title{margin-bottom:.375rem;font-weight:500}:host .message{margin-bottom:.25rem;white-space:pre-wrap}:host .link{margin-bottom:.375rem;margin-left:.375rem;color:#069;cursor:pointer}:host .link:hover{text-decoration:underline}:host:host-context(qd-snackbar){z-index:9999!important}:host:host-context(qd-snackbar) .link{display:block;margin-top:.375rem;margin-left:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdNotificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-notification', host: { class: 'qd-notification' }, standalone: false, template: "<qd-icon *ngIf=\"closeable\" [icon]=\"'timesLarge'\" class=\"closer\" (click)=\"remove()\"></qd-icon>\n<qd-icon [icon]=\"this.getIcon()\" class=\"icon\"></qd-icon>\n\n<ng-content select=\"qd-notification-content\"></ng-content>\n\n<div class=\"title\" *ngIf=\"notification?.title\">{{ notification.title.i18n | translate }}</div>\n<div class=\"message\">\n  <span>{{ notification?.i18n | translate }}</span>\n  <a class=\"link\" *ngIf=\"notification?.link\" (click)=\"handleLinkClick()\">{{ notification.link.i18n | translate }}</a>\n</div>\n", styles: [":host{position:relative;z-index:9999!important;display:block;width:100%;padding:1rem 2rem .5rem 2.75rem;border-width:.0625rem;border-style:solid;border-left-width:.25rem;margin-bottom:.5rem;background:#fff;box-shadow:0 0 .625rem #979797;font-size:.875rem;gap:.5rem;line-height:1rem}:host.qd-notification-info{border-color:#069}:host.qd-notification-info .icon,:host.qd-notification-info .title{color:#069}:host.qd-notification-warning{border-color:#ff9b00}:host.qd-notification-warning .icon,:host.qd-notification-warning .title{color:#ff9b00}:host.qd-notification-critical{border-color:#c70023}:host.qd-notification-critical .icon,:host.qd-notification-critical .title{color:#c70023}:host.qd-notification-success{border-color:#00813a}:host.qd-notification-success .icon,:host.qd-notification-success .title{color:#00813a}:host .icon{position:absolute;top:.9375rem;left:1rem;font-size:1.25rem}:host .closer{position:absolute;top:1rem;right:.75rem;color:#171717;cursor:pointer;font-size:.8125rem;font-weight:600}:host .title{margin-bottom:.375rem;font-weight:500}:host .message{margin-bottom:.25rem;white-space:pre-wrap}:host .link{margin-bottom:.375rem;margin-left:.375rem;color:#069;cursor:pointer}:host .link:hover{text-decoration:underline}:host:host-context(qd-snackbar) .link{display:block;margin-top:.375rem;margin-left:0}\n"] }]
+            args: [{ selector: 'qd-notification', host: { class: 'qd-notification' }, standalone: false, template: "<qd-icon *ngIf=\"closeable\" [icon]=\"'timesLarge'\" class=\"closer\" (click)=\"remove()\"></qd-icon>\n<qd-icon [icon]=\"this.getIcon()\" class=\"icon\"></qd-icon>\n\n<ng-content select=\"qd-notification-content\"></ng-content>\n\n<div class=\"title\" *ngIf=\"notification?.title\">{{ notification.title.i18n | translate }}</div>\n<div class=\"message\">\n  <span>{{ notification?.i18n | translate }}</span>\n  <a class=\"link\" *ngIf=\"notification?.link\" (click)=\"handleLinkClick()\">{{ notification.link.i18n | translate }}</a>\n</div>\n", styles: [":host{position:relative;display:block;width:100%;padding:1rem 2rem .5rem 2.75rem;border-width:.0625rem;border-style:solid;border-left-width:.25rem;margin-bottom:.5rem;background:#fff;box-shadow:0 0 .625rem #979797;font-size:.875rem;gap:.5rem;line-height:1rem}:host.qd-notification-info{border-color:#069}:host.qd-notification-info .icon,:host.qd-notification-info .title{color:#069}:host.qd-notification-warning{border-color:#ff9b00}:host.qd-notification-warning .icon,:host.qd-notification-warning .title{color:#ff9b00}:host.qd-notification-critical{border-color:#c70023}:host.qd-notification-critical .icon,:host.qd-notification-critical .title{color:#c70023}:host.qd-notification-success{border-color:#00813a}:host.qd-notification-success .icon,:host.qd-notification-success .title{color:#00813a}:host .icon{position:absolute;top:.9375rem;left:1rem;font-size:1.25rem}:host .closer{position:absolute;top:1rem;right:.75rem;color:#171717;cursor:pointer;font-size:.8125rem;font-weight:600}:host .title{margin-bottom:.375rem;font-weight:500}:host .message{margin-bottom:.25rem;white-space:pre-wrap}:host .link{margin-bottom:.375rem;margin-left:.375rem;color:#069;cursor:pointer}:host .link:hover{text-decoration:underline}:host:host-context(qd-snackbar){z-index:9999!important}:host:host-context(qd-snackbar) .link{display:block;margin-top:.375rem;margin-left:0}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
             }], notification: [{
@@ -28995,8 +29001,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);
@@ -29004,7 +29010,9 @@ class QdPageCommitActionExecutor {
                 result$ = handlerResult;
         });
         const applySuccess = () => {
-            formGroupManager.setFormGroupsSnapshot(captured);
+            formGroupManager.updateSavedSnapshotFromValues(captured);
+            formGroupManager.startAdoptingFrameworkRebuild();
+            scheduleFrameworkRebuildStop?.();
             navigationInterceptor.executeWithBypass(() => {
                 try {
                     onAfterSnapshot?.();
@@ -29048,136 +29056,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)}`);
             }
@@ -29185,15 +29227,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);
@@ -29204,68 +29258,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.
      *
-     * 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
+     * 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.
+     *
+     * 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) {
@@ -29281,6 +29438,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);
@@ -29298,6 +29461,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 });
 }
@@ -29326,7 +29502,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.
  */
@@ -29476,6 +29652,7 @@ class QdPageObjectHeaderComponent {
     confirmationDialogService = inject(QdConfirmationDialogOpenerService);
     contextService = inject(QdContextService);
     resolverTriggerService = inject(QdResolverTriggerService);
+    injector = inject(Injector);
     pageStoreService = inject(QdPageStoreService);
     config;
     hasNavigation = false;
@@ -29596,7 +29773,7 @@ class QdPageObjectHeaderComponent {
             this.setupResolverTrigger();
         this.updateCustomActions();
         this.subscribeToMetadataStream();
-        this.formGroupManagerService.takeFormGroupsSnapshot();
+        this.formGroupManagerService.updateSavedSnapshotFromCurrentValues();
         this.initContexts();
     }
     ngOnChanges(changes) {
@@ -29621,7 +29798,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();
@@ -29651,7 +29828,8 @@ class QdPageObjectHeaderComponent {
             onAfterSnapshot: () => {
                 this.formGroupManagerService.cancelPendingAsyncValidation();
                 this.pageStoreService.toggleViewonly(true);
-            }
+            },
+            scheduleFrameworkRebuildStop: () => afterNextRender(() => this.formGroupManagerService.stopAdoptingFrameworkRebuild(), { injector: this.injector })
         });
     }
     changeContext(context, selection, event) {
@@ -29679,7 +29857,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() {
@@ -31455,6 +31633,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,
@@ -31651,7 +31830,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
+                })
             });
         };
     }
@@ -31763,6 +31945,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).
@@ -31775,8 +31961,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>
@@ -31796,36 +31984,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 });