@quadrel-enterprise-ui/framework 20.27.6 → 20.28.0

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 { CommonModule, DOCUMENT, NgFor, NgIf, NgClass, NgTemplateOutlet, AsyncPipe } from '@angular/common';
+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,
@@ -8593,6 +8650,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }] });
 
+class QdIconButtonModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdIconButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: QdIconButtonModule, declarations: [QdIconButtonComponent], imports: [CommonModule], exports: [QdIconButtonComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdIconButtonModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdIconButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [QdIconButtonComponent],
+                    exports: [QdIconButtonComponent]
+                }]
+        }] });
+
 class QdAutofocusService {
     _isAutofocusActivated = false;
     set isAutofocusActivated(hasInstance) {
@@ -9446,8 +9517,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 args: ['class.qd-form-error']
             }] } });
 
+class QdKeyboardDetectionService {
+    static KEYBOARD_ACTIVE_CLASS = 'qd-keyboard-active';
+    document = inject(DOCUMENT);
+    ngZone = inject(NgZone);
+    onKeydown = () => {
+        this.document?.documentElement?.classList.add(QdKeyboardDetectionService.KEYBOARD_ACTIVE_CLASS);
+    };
+    onPointerdown = () => {
+        this.document?.documentElement?.classList.remove(QdKeyboardDetectionService.KEYBOARD_ACTIVE_CLASS);
+    };
+    constructor() {
+        const root = this.document?.documentElement;
+        if (!root)
+            return;
+        root.classList.add(QdKeyboardDetectionService.KEYBOARD_ACTIVE_CLASS);
+        this.ngZone.runOutsideAngular(() => {
+            this.document.addEventListener('keydown', this.onKeydown, true);
+            this.document.addEventListener('pointerdown', this.onPointerdown, true);
+        });
+    }
+    ngOnDestroy() {
+        this.document?.removeEventListener('keydown', this.onKeydown, true);
+        this.document?.removeEventListener('pointerdown', this.onPointerdown, true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdKeyboardDetectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdKeyboardDetectionService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdKeyboardDetectionService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
 // @ts-strict-ignore
 class QdCheckboxComponent {
+    keyboardDetection = inject(QdKeyboardDetectionService);
     // TODO: Refactor FormInput for better internal interface
     inputData;
     value;
@@ -9506,7 +9610,7 @@ class QdCheckboxComponent {
                 useExisting: QdCheckboxComponent,
                 multi: true
             }
-        ], ngImport: i0, template: "<label\n  [for]=\"inputData.value\"\n  [attr.data-test-id]=\"testId + '-label'\"\n  [ngClass]=\"\n    'qd-checkbox__label' +\n    (inputData.disabled || disabled ? ' qd-checkbox__label--disabled' : '') +\n    (checked ? ' qd-checkbox__label--checked' : '')\n  \"\n>\n  <input\n    type=\"checkbox\"\n    qdVisuallyHidden\n    [qdAutofocus]=\"hasAutofocus\"\n    [id]=\"inputData.value\"\n    [attr.data-test-id]=\"testId + '-input'\"\n    [ngClass]=\"'qd-checkbox__checkbox'\"\n    [name]=\"id\"\n    [value]=\"inputData.value\"\n    [disabled]=\"inputData.disabled || disabled\"\n    (click)=\"handleClick(inputData.value, $event)\"\n    [checked]=\"checked\"\n  />\n\n  <qd-icon\n    [ngClass]=\"'qd-checkbox__indicator'\"\n    *ngIf=\"checked\"\n    [icon]=\"'timesSquareSolid'\"\n    [attr.data-test-id]=\"testId + '-indicator-checked'\"\n  ></qd-icon>\n  <qd-icon\n    [ngClass]=\"'qd-checkbox__indicator'\"\n    *ngIf=\"!checked\"\n    [icon]=\"'squareSolid'\"\n    [attr.data-test-id]=\"testId + '-indicator-unchecked'\"\n  ></qd-icon>\n\n  <span [ngClass]=\"'qd-checkbox__caption qd-intersection-target'\">{{ inputData.i18n | translate }}</span>\n</label>\n", styles: [".qd-checkbox{display:flex;align-items:center;margin-right:1rem}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled){border:.0625rem solid rgb(180,180,180);margin-right:0;margin-bottom:.75rem;background:#fff}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label{width:100%;padding-left:.75rem;line-height:2.25rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label .qd-checkbox__indicator.qd-icon{margin-right:.75rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label--disabled .qd-checkbox__caption{color:#d5d5d5}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{margin-right:.75rem;color:#171717;transform:translateY(.0625rem)}}@media (max-width: 959.98px) and (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{padding:.375rem 0;line-height:1.25rem}}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled):last-child{margin-bottom:0}}.qd-checkbox:last-child{margin-right:0}.qd-checkbox .qd-checkbox__label{position:relative;display:flex;max-width:100%;align-items:center;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400}.qd-checkbox .qd-checkbox__label .qd-checkbox__indicator{margin-right:.375rem;color:#b4b4b4;font-size:1.25rem}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus{color:#171717}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover .qd-checkbox__indicator,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus .qd-checkbox__indicator{color:#757575}.qd-checkbox .qd-checkbox__label--checked{color:#171717}.qd-checkbox .qd-checkbox__label--checked .qd-checkbox__indicator{color:#069}.qd-checkbox .qd-checkbox__label--disabled{color:#d5d5d5;cursor:default}.qd-checkbox .qd-checkbox__label--disabled .qd-checkbox__indicator{color:#d5d5d5}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: QdAutofocusDirective, selector: "[qdAutofocus]", inputs: ["qdAutofocus"] }, { kind: "directive", type: QdVisuallyHiddenDirective, selector: "[qdVisuallyHidden]" }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "<label\n  [for]=\"inputData.value + id\"\n  [attr.data-test-id]=\"testId + '-label'\"\n  [ngClass]=\"\n    'qd-checkbox__label' +\n    (inputData.disabled || disabled ? ' qd-checkbox__label--disabled' : '') +\n    (checked ? ' qd-checkbox__label--checked' : '')\n  \"\n>\n  <input\n    type=\"checkbox\"\n    tabindex=\"0\"\n    qdVisuallyHidden\n    [qdAutofocus]=\"hasAutofocus\"\n    [id]=\"inputData.value + id\"\n    [attr.data-test-id]=\"testId + '-input'\"\n    [ngClass]=\"'qd-checkbox__checkbox'\"\n    [name]=\"id\"\n    [value]=\"inputData.value\"\n    [disabled]=\"inputData.disabled || disabled\"\n    (click)=\"handleClick(inputData.value, $event)\"\n    [checked]=\"checked\"\n  />\n\n  <qd-icon\n    [ngClass]=\"'qd-checkbox__indicator'\"\n    *ngIf=\"checked\"\n    [icon]=\"'timesSquareSolid'\"\n    [attr.data-test-id]=\"testId + '-indicator-checked'\"\n  ></qd-icon>\n  <qd-icon\n    [ngClass]=\"'qd-checkbox__indicator'\"\n    *ngIf=\"!checked\"\n    [icon]=\"'squareSolid'\"\n    [attr.data-test-id]=\"testId + '-indicator-unchecked'\"\n  ></qd-icon>\n\n  <span [ngClass]=\"'qd-checkbox__caption qd-intersection-target'\">{{ inputData.i18n | translate }}</span>\n</label>\n", styles: [".qd-checkbox{display:flex;align-items:center;margin-right:1rem}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled){border:.0625rem solid rgb(180,180,180);margin-right:0;margin-bottom:.75rem;background:#fff}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label{width:100%;padding-left:.75rem;line-height:2.25rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label .qd-checkbox__indicator.qd-icon{margin-right:.75rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label--disabled .qd-checkbox__caption{color:#d5d5d5}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{margin-right:.75rem;color:#171717;transform:translateY(.0625rem)}}@media (max-width: 959.98px) and (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{padding:.375rem 0;line-height:1.25rem}}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled):last-child{margin-bottom:0}}.qd-checkbox:last-child{margin-right:0}.qd-checkbox .qd-checkbox__label{position:relative;display:flex;max-width:100%;align-items:center;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400}.qd-checkbox .qd-checkbox__label .qd-checkbox__indicator{position:relative;margin-right:.375rem;color:#b4b4b4;font-size:1.25rem}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus{color:#171717}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover .qd-checkbox__indicator,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus .qd-checkbox__indicator{color:#757575}.qd-checkbox .qd-checkbox__label--checked{color:#171717}.qd-checkbox .qd-checkbox__label--checked .qd-checkbox__indicator{color:#069}.qd-checkbox .qd-checkbox__label--disabled{color:#d5d5d5;cursor:default}.qd-checkbox .qd-checkbox__label--disabled .qd-checkbox__indicator{color:#d5d5d5}.qd-keyboard-active .qd-checkbox__checkbox:focus~.qd-checkbox__indicator:after{position:absolute;top:50%;left:50%;width:1.25rem;height:1.25rem;content:\"\";outline:.125rem solid rgb(23,23,23);outline-offset:0;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: QdAutofocusDirective, selector: "[qdAutofocus]", inputs: ["qdAutofocus"] }, { kind: "directive", type: QdVisuallyHiddenDirective, selector: "[qdVisuallyHidden]" }, { 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: QdCheckboxComponent, decorators: [{
             type: Component,
@@ -9516,7 +9620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                             useExisting: QdCheckboxComponent,
                             multi: true
                         }
-                    ], encapsulation: ViewEncapsulation.None, host: { class: 'qd-checkbox' }, standalone: false, template: "<label\n  [for]=\"inputData.value\"\n  [attr.data-test-id]=\"testId + '-label'\"\n  [ngClass]=\"\n    'qd-checkbox__label' +\n    (inputData.disabled || disabled ? ' qd-checkbox__label--disabled' : '') +\n    (checked ? ' qd-checkbox__label--checked' : '')\n  \"\n>\n  <input\n    type=\"checkbox\"\n    qdVisuallyHidden\n    [qdAutofocus]=\"hasAutofocus\"\n    [id]=\"inputData.value\"\n    [attr.data-test-id]=\"testId + '-input'\"\n    [ngClass]=\"'qd-checkbox__checkbox'\"\n    [name]=\"id\"\n    [value]=\"inputData.value\"\n    [disabled]=\"inputData.disabled || disabled\"\n    (click)=\"handleClick(inputData.value, $event)\"\n    [checked]=\"checked\"\n  />\n\n  <qd-icon\n    [ngClass]=\"'qd-checkbox__indicator'\"\n    *ngIf=\"checked\"\n    [icon]=\"'timesSquareSolid'\"\n    [attr.data-test-id]=\"testId + '-indicator-checked'\"\n  ></qd-icon>\n  <qd-icon\n    [ngClass]=\"'qd-checkbox__indicator'\"\n    *ngIf=\"!checked\"\n    [icon]=\"'squareSolid'\"\n    [attr.data-test-id]=\"testId + '-indicator-unchecked'\"\n  ></qd-icon>\n\n  <span [ngClass]=\"'qd-checkbox__caption qd-intersection-target'\">{{ inputData.i18n | translate }}</span>\n</label>\n", styles: [".qd-checkbox{display:flex;align-items:center;margin-right:1rem}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled){border:.0625rem solid rgb(180,180,180);margin-right:0;margin-bottom:.75rem;background:#fff}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label{width:100%;padding-left:.75rem;line-height:2.25rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label .qd-checkbox__indicator.qd-icon{margin-right:.75rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label--disabled .qd-checkbox__caption{color:#d5d5d5}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{margin-right:.75rem;color:#171717;transform:translateY(.0625rem)}}@media (max-width: 959.98px) and (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{padding:.375rem 0;line-height:1.25rem}}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled):last-child{margin-bottom:0}}.qd-checkbox:last-child{margin-right:0}.qd-checkbox .qd-checkbox__label{position:relative;display:flex;max-width:100%;align-items:center;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400}.qd-checkbox .qd-checkbox__label .qd-checkbox__indicator{margin-right:.375rem;color:#b4b4b4;font-size:1.25rem}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus{color:#171717}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover .qd-checkbox__indicator,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus .qd-checkbox__indicator{color:#757575}.qd-checkbox .qd-checkbox__label--checked{color:#171717}.qd-checkbox .qd-checkbox__label--checked .qd-checkbox__indicator{color:#069}.qd-checkbox .qd-checkbox__label--disabled{color:#d5d5d5;cursor:default}.qd-checkbox .qd-checkbox__label--disabled .qd-checkbox__indicator{color:#d5d5d5}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, host: { class: 'qd-checkbox' }, standalone: false, template: "<label\n  [for]=\"inputData.value + id\"\n  [attr.data-test-id]=\"testId + '-label'\"\n  [ngClass]=\"\n    'qd-checkbox__label' +\n    (inputData.disabled || disabled ? ' qd-checkbox__label--disabled' : '') +\n    (checked ? ' qd-checkbox__label--checked' : '')\n  \"\n>\n  <input\n    type=\"checkbox\"\n    tabindex=\"0\"\n    qdVisuallyHidden\n    [qdAutofocus]=\"hasAutofocus\"\n    [id]=\"inputData.value + id\"\n    [attr.data-test-id]=\"testId + '-input'\"\n    [ngClass]=\"'qd-checkbox__checkbox'\"\n    [name]=\"id\"\n    [value]=\"inputData.value\"\n    [disabled]=\"inputData.disabled || disabled\"\n    (click)=\"handleClick(inputData.value, $event)\"\n    [checked]=\"checked\"\n  />\n\n  <qd-icon\n    [ngClass]=\"'qd-checkbox__indicator'\"\n    *ngIf=\"checked\"\n    [icon]=\"'timesSquareSolid'\"\n    [attr.data-test-id]=\"testId + '-indicator-checked'\"\n  ></qd-icon>\n  <qd-icon\n    [ngClass]=\"'qd-checkbox__indicator'\"\n    *ngIf=\"!checked\"\n    [icon]=\"'squareSolid'\"\n    [attr.data-test-id]=\"testId + '-indicator-unchecked'\"\n  ></qd-icon>\n\n  <span [ngClass]=\"'qd-checkbox__caption qd-intersection-target'\">{{ inputData.i18n | translate }}</span>\n</label>\n", styles: [".qd-checkbox{display:flex;align-items:center;margin-right:1rem}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled){border:.0625rem solid rgb(180,180,180);margin-right:0;margin-bottom:.75rem;background:#fff}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label{width:100%;padding-left:.75rem;line-height:2.25rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label .qd-checkbox__indicator.qd-icon{margin-right:.75rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label--disabled .qd-checkbox__caption{color:#d5d5d5}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{margin-right:.75rem;color:#171717;transform:translateY(.0625rem)}}@media (max-width: 959.98px) and (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{padding:.375rem 0;line-height:1.25rem}}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled):last-child{margin-bottom:0}}.qd-checkbox:last-child{margin-right:0}.qd-checkbox .qd-checkbox__label{position:relative;display:flex;max-width:100%;align-items:center;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400}.qd-checkbox .qd-checkbox__label .qd-checkbox__indicator{position:relative;margin-right:.375rem;color:#b4b4b4;font-size:1.25rem}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus{color:#171717}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover .qd-checkbox__indicator,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus .qd-checkbox__indicator{color:#757575}.qd-checkbox .qd-checkbox__label--checked{color:#171717}.qd-checkbox .qd-checkbox__label--checked .qd-checkbox__indicator{color:#069}.qd-checkbox .qd-checkbox__label--disabled{color:#d5d5d5;cursor:default}.qd-checkbox .qd-checkbox__label--disabled .qd-checkbox__indicator{color:#d5d5d5}.qd-keyboard-active .qd-checkbox__checkbox:focus~.qd-checkbox__indicator:after{position:absolute;top:50%;left:50%;width:1.25rem;height:1.25rem;content:\"\";outline:.125rem solid rgb(23,23,23);outline-offset:0;transform:translate(-50%,-50%)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputData: [{
                 type: Input
             }], value: [{
@@ -9588,14 +9692,10 @@ class QdCheckboxesService {
         this.checkboxesListForView = this.checkboxesList;
     }
     updateCheckboxesListForView(value) {
-        this.checkboxesListForView = this.checkboxesListForView.map(checkbox => {
-            if (checkbox.value === value) {
-                return { ...checkbox, ...{ checked: !checkbox.checked }, ...{ index: checkbox.index } };
-            }
-            else {
-                return checkbox;
-            }
-        });
+        const checkbox = this.checkboxesListForView.find(option => option.value === value);
+        if (checkbox) {
+            checkbox.checked = !checkbox.checked;
+        }
     }
     getCheckboxesListForView() {
         return this.checkboxesListForView;
@@ -9838,6 +9938,9 @@ class QdCheckboxesComponent {
     setDisabledState(disabled) {
         this.disabled = disabled;
     }
+    getCheckboxId(_index, checkbox) {
+        return checkbox.index;
+    }
     handleClick(checkbox) {
         if (checkbox.disabled || this.config.disabled)
             return;
@@ -9918,7 +10021,7 @@ class QdCheckboxesComponent {
             },
             QdCheckboxesService,
             QdFormsActionEmitterService
-        ], viewQueries: [{ propertyName: "checkboxes", predicate: QdCheckboxComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n  [isDisabled]=\"isLabelDisabled\"\n></qd-form-label>\n\n<div class=\"qd-checkboxes__input-section\" *ngIf=\"!readonly && !viewonly\">\n  <qd-filter-form-items\n    *ngIf=\"filter\"\n    (filterValueChange)=\"changeValue($event)\"\n    [data-test-id]=\"testId + '-filter-form'\"\n  ></qd-filter-form-items>\n\n  <div class=\"qd-checkboxes__checkbox-section\">\n    <qd-checkbox\n      *ngFor=\"let checkbox of checkboxesListForView\"\n      [inputData]=\"checkbox\"\n      [value]=\"checkboxesValues[checkbox.index]\"\n      [disabled]=\"checkbox.disabled || disabled\"\n      [hasAutofocus]=\"hasAutofocus && checkbox.index === 0\"\n      (valueChange)=\"handleClick(checkbox)\"\n      [data-test-id]=\"testId + '-checkbox-' + checkbox.index\"\n    ></qd-checkbox>\n  </div>\n</div>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n  [hint]=\"hint\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"selectedValuesTranslated\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"selectedValuesTranslated\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-checkboxes{display:block;margin-bottom:.75rem}@media (max-width: 959.98px){.qd-checkboxes{height:initial}}.qd-checkboxes .qd-checkboxes__input-section{display:block;flex-direction:column;margin-bottom:.3125rem}.qd-checkboxes .qd-checkboxes__checkbox-section{display:flex;min-height:2.25rem;flex-direction:row}@media (max-width: 959.98px){.qd-checkboxes .qd-checkboxes__checkbox-section{height:initial;flex-direction:column}}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section{display:flex;flex-direction:column}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section .qd-checkbox:not(:last-child){margin-bottom:.5rem}.qd-checkboxes.qd-checkboxes-disabled{pointer-events:none}.qd-checkboxes-readonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--readonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--readonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}.qd-checkboxes-viewonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdCheckboxComponent, selector: "qd-checkbox", inputs: ["inputData", "value", "data-test-id", "disabled", "hasAutofocus"], outputs: ["valueChange"] }, { kind: "component", type: QdFilterFormItemsComponent, selector: "qd-filter-form-items", inputs: ["inputFilterValue", "data-test-id"], outputs: ["filterValueChange"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }], encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "checkboxes", predicate: QdCheckboxComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n  [isDisabled]=\"isLabelDisabled\"\n></qd-form-label>\n\n<div class=\"qd-checkboxes__input-section\" *ngIf=\"!readonly && !viewonly\">\n  <qd-filter-form-items\n    *ngIf=\"filter\"\n    (filterValueChange)=\"changeValue($event)\"\n    [data-test-id]=\"testId + '-filter-form'\"\n  ></qd-filter-form-items>\n\n  <div class=\"qd-checkboxes__checkbox-section\">\n    <qd-checkbox\n      *ngFor=\"let checkbox of checkboxesListForView; trackBy: getCheckboxId\"\n      [inputData]=\"checkbox\"\n      [value]=\"checkboxesValues[checkbox.index]\"\n      [disabled]=\"checkbox.disabled || disabled\"\n      [hasAutofocus]=\"hasAutofocus && checkbox.index === 0\"\n      (valueChange)=\"handleClick(checkbox)\"\n      [data-test-id]=\"testId + '-checkbox-' + checkbox.index\"\n    ></qd-checkbox>\n  </div>\n</div>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n  [hint]=\"hint\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"selectedValuesTranslated\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"selectedValuesTranslated\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-checkboxes{display:block;margin-bottom:.75rem}@media (max-width: 959.98px){.qd-checkboxes{height:initial}}.qd-checkboxes .qd-checkboxes__input-section{display:block;flex-direction:column;margin-bottom:.3125rem}.qd-checkboxes .qd-checkboxes__checkbox-section{display:flex;min-height:2.25rem;flex-direction:row}@media (max-width: 959.98px){.qd-checkboxes .qd-checkboxes__checkbox-section{height:initial;flex-direction:column}}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section{display:flex;flex-direction:column}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section .qd-checkbox:not(:last-child){margin-bottom:.5rem}.qd-checkboxes.qd-checkboxes-disabled{pointer-events:none}.qd-checkboxes-readonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--readonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--readonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}.qd-checkboxes-viewonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdCheckboxComponent, selector: "qd-checkbox", inputs: ["inputData", "value", "data-test-id", "disabled", "hasAutofocus"], outputs: ["valueChange"] }, { kind: "component", type: QdFilterFormItemsComponent, selector: "qd-filter-form-items", inputs: ["inputFilterValue", "data-test-id"], outputs: ["filterValueChange"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdCheckboxesComponent, decorators: [{
             type: Component,
@@ -9930,7 +10033,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         },
                         QdCheckboxesService,
                         QdFormsActionEmitterService
-                    ], encapsulation: ViewEncapsulation.None, host: { class: 'qd-checkboxes' }, standalone: false, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n  [isDisabled]=\"isLabelDisabled\"\n></qd-form-label>\n\n<div class=\"qd-checkboxes__input-section\" *ngIf=\"!readonly && !viewonly\">\n  <qd-filter-form-items\n    *ngIf=\"filter\"\n    (filterValueChange)=\"changeValue($event)\"\n    [data-test-id]=\"testId + '-filter-form'\"\n  ></qd-filter-form-items>\n\n  <div class=\"qd-checkboxes__checkbox-section\">\n    <qd-checkbox\n      *ngFor=\"let checkbox of checkboxesListForView\"\n      [inputData]=\"checkbox\"\n      [value]=\"checkboxesValues[checkbox.index]\"\n      [disabled]=\"checkbox.disabled || disabled\"\n      [hasAutofocus]=\"hasAutofocus && checkbox.index === 0\"\n      (valueChange)=\"handleClick(checkbox)\"\n      [data-test-id]=\"testId + '-checkbox-' + checkbox.index\"\n    ></qd-checkbox>\n  </div>\n</div>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n  [hint]=\"hint\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"selectedValuesTranslated\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"selectedValuesTranslated\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-checkboxes{display:block;margin-bottom:.75rem}@media (max-width: 959.98px){.qd-checkboxes{height:initial}}.qd-checkboxes .qd-checkboxes__input-section{display:block;flex-direction:column;margin-bottom:.3125rem}.qd-checkboxes .qd-checkboxes__checkbox-section{display:flex;min-height:2.25rem;flex-direction:row}@media (max-width: 959.98px){.qd-checkboxes .qd-checkboxes__checkbox-section{height:initial;flex-direction:column}}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section{display:flex;flex-direction:column}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section .qd-checkbox:not(:last-child){margin-bottom:.5rem}.qd-checkboxes.qd-checkboxes-disabled{pointer-events:none}.qd-checkboxes-readonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--readonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--readonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}.qd-checkboxes-viewonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, host: { class: 'qd-checkboxes' }, standalone: false, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n  [isDisabled]=\"isLabelDisabled\"\n></qd-form-label>\n\n<div class=\"qd-checkboxes__input-section\" *ngIf=\"!readonly && !viewonly\">\n  <qd-filter-form-items\n    *ngIf=\"filter\"\n    (filterValueChange)=\"changeValue($event)\"\n    [data-test-id]=\"testId + '-filter-form'\"\n  ></qd-filter-form-items>\n\n  <div class=\"qd-checkboxes__checkbox-section\">\n    <qd-checkbox\n      *ngFor=\"let checkbox of checkboxesListForView; trackBy: getCheckboxId\"\n      [inputData]=\"checkbox\"\n      [value]=\"checkboxesValues[checkbox.index]\"\n      [disabled]=\"checkbox.disabled || disabled\"\n      [hasAutofocus]=\"hasAutofocus && checkbox.index === 0\"\n      (valueChange)=\"handleClick(checkbox)\"\n      [data-test-id]=\"testId + '-checkbox-' + checkbox.index\"\n    ></qd-checkbox>\n  </div>\n</div>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n  [hint]=\"hint\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"selectedValuesTranslated\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"selectedValuesTranslated\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-checkboxes{display:block;margin-bottom:.75rem}@media (max-width: 959.98px){.qd-checkboxes{height:initial}}.qd-checkboxes .qd-checkboxes__input-section{display:block;flex-direction:column;margin-bottom:.3125rem}.qd-checkboxes .qd-checkboxes__checkbox-section{display:flex;min-height:2.25rem;flex-direction:row}@media (max-width: 959.98px){.qd-checkboxes .qd-checkboxes__checkbox-section{height:initial;flex-direction:column}}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section{display:flex;flex-direction:column}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section .qd-checkbox:not(:last-child){margin-bottom:.5rem}.qd-checkboxes.qd-checkboxes-disabled{pointer-events:none}.qd-checkboxes-readonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--readonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--readonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}.qd-checkboxes-viewonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}\n"] }]
         }], ctorParameters: () => [], propDecorators: { formControlName: [{
                 type: Input
             }], values: [{
@@ -10875,9 +10978,18 @@ class QdDropdownComponent {
      */
     valueChange = new EventEmitter();
     /**
-     * Emits event when the value has changed. Note: Emits on keyup.
+     * Emits when the dropdown is opened.
+     *
+     * @deprecated The name no longer reflects the behavior (it fires on every open, not just on a
+     * click). Use {@link dropdownOpened} instead. Will be removed in v22.
      */
     enterClick = new EventEmitter();
+    /**
+     * Emits whenever the dropdown opens or closes, regardless of input modality
+     * (mouse click or keyboard Enter/Space). The boolean payload is the open state:
+     * `true` when opened, `false` when closed.
+     */
+    dropdownOpened = new EventEmitter();
     /**
      * Emits event when the hint is clicked/tapped. `hintAction` must be set to `true` for this.
      */
@@ -11030,11 +11142,17 @@ class QdDropdownComponent {
     }
     onOpenDropdown() {
         this.isOpen = true;
+        // Emitted whenever the trigger opens — by mouse click or by keyboard (Enter/Space) — so the
+        // open event fires consistently regardless of input modality. `enterClick` is kept for
+        // backward compatibility (deprecated, removed in v22); `dropdownOpened` is the replacement.
+        this.enterClick.emit();
+        this.dropdownOpened.emit(true);
         this.loadOptionsForCurrentConfig();
         this.dropdownOptions?.onOpen();
     }
     onDropdownClosed() {
         this.isOpen = false;
+        this.dropdownOpened.emit(false);
         if (this.control && this._value != null) {
             this._onChange(this._value);
             this._onTouch();
@@ -11094,7 +11212,7 @@ class QdDropdownComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDropdownComponent, isStandalone: false, selector: "qd-dropdown", inputs: { value: "value", id: "id", formControlName: "formControlName", config: "config", testId: ["data-test-id", "testId"], qdPopoverMaxHeight: "qdPopoverMaxHeight", dense: "dense" }, outputs: { valueChange: "valueChange", enterClick: "enterClick", clickHint: "clickHint", clickReadonly: "clickReadonly", clickViewonly: "clickViewonly", optionsResolved: "optionsResolved" }, host: { properties: { "class.qd-dropdown-readonly": "this.readonly", "class.qd-dropdown--readonly-action": "this.readonlyAction", "class.qd-dropdown-viewonly": "this.viewonly", "class.qd-dropdown--viewonly-action": "this.viewonlyAction", "class.qd-form-hint-action": "this.hintAction", "class.qd-dropdown--hint-action": "this.hintAction", "class.qd-form-disabled": "this.disabled", "class.qd-dropdown-disabled": "this.disabled", "class.dense": "this.dense", "class.qd-dropdown-open": "this.isOpen", "class.qd-form-error": "this.hasError", "class.qd-dropdown-error": "this.hasError", "class.qd-dropdown-selected": "this.isSelected" }, classAttribute: "qd-dropdown" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDropdownComponent, isStandalone: false, selector: "qd-dropdown", inputs: { value: "value", id: "id", formControlName: "formControlName", config: "config", testId: ["data-test-id", "testId"], qdPopoverMaxHeight: "qdPopoverMaxHeight", dense: "dense" }, outputs: { valueChange: "valueChange", enterClick: "enterClick", dropdownOpened: "dropdownOpened", clickHint: "clickHint", clickReadonly: "clickReadonly", clickViewonly: "clickViewonly", optionsResolved: "optionsResolved" }, host: { properties: { "class.qd-dropdown-readonly": "this.readonly", "class.qd-dropdown--readonly-action": "this.readonlyAction", "class.qd-dropdown-viewonly": "this.viewonly", "class.qd-dropdown--viewonly-action": "this.viewonlyAction", "class.qd-form-hint-action": "this.hintAction", "class.qd-dropdown--hint-action": "this.hintAction", "class.qd-form-disabled": "this.disabled", "class.qd-dropdown-disabled": "this.disabled", "class.dense": "this.dense", "class.qd-dropdown-open": "this.isOpen", "class.qd-form-error": "this.hasError", "class.qd-dropdown-error": "this.hasError", "class.qd-dropdown-selected": "this.isSelected" }, classAttribute: "qd-dropdown" }, providers: [
             QdFormsActionEmitterService,
             QdFormOptionsResolverRegistry,
             QdFormKeyboardService,
@@ -11108,7 +11226,7 @@ class QdDropdownComponent {
                 provide: QD_FOCUSABLE_TOKEN,
                 useExisting: QdDropdownComponent
             }
-        ], viewQueries: [{ propertyName: "dropdownOptions", first: true, predicate: QdDropdownOptionsComponent, descendants: true }, { propertyName: "dropdownDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }, { propertyName: "box", first: true, predicate: ["box"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<div class=\"qd-dropdown__wrapper\">\n  <div\n    class=\"qd-dropdown__box\"\n    tabindex=\"0\"\n    *ngIf=\"!readonly && !viewonly && hasOptions\"\n    [qdPopoverOnClick]=\"dropdownMenu\"\n    [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n    [qdPopoverStopPropagation]=\"true\"\n    [qdPopoverDisabled]=\"disabled\"\n    [qdPopoverMaxHeight]=\"qdPopoverMaxHeight\"\n    [qdPopoverAutoSize]=\"{ width: true }\"\n    [qdPopoverEnableKeyControl]=\"true\"\n    [qdPopoverFlipIntoViewport]=\"true\"\n    (opened)=\"onOpenDropdown()\"\n    (closed)=\"onDropdownClosed()\"\n    (click)=\"enterClick.emit()\"\n    qdPopoverPlacement=\"bottom-start\"\n  >\n    {{ (selectedOption?.i18n | translate) || placeholder }}\n\n    <div class=\"qd-dropdown-suffix\">\n      <qd-icon *ngIf=\"hasError\" class=\"qd-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n    </div>\n  </div>\n</div>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hasHint || hasError)\"\n  [hint]=\"hasHint ? config.hint.i18n : ''\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"[selectedOption]\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"[selectedOption]\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n\n<ng-template #dropdownMenu>\n  <qd-dropdown-options\n    [filter]=\"filter\"\n    [filterText]=\"filterText\"\n    [testId]=\"testId\"\n    [id]=\"id\"\n    (filterChange)=\"handleFilterChange($event)\"\n    (optionClick)=\"handleClick($event)\"\n  ></qd-dropdown-options>\n</ng-template>\n", styles: [".qd-dropdown__wrapper{position:relative;margin-bottom:.375rem}.qd-dropdown__wrapper.dense{margin-bottom:0}.qd-dropdown__wrapper .qd-dropdown__box{display:flex;overflow:hidden;width:100%;height:2.25rem;justify-content:space-between;padding:0 .75rem;border:.0625rem solid rgb(180,180,180);margin-bottom:.25rem;background:#fff;color:#fff;font-size:.875rem;font-weight:400;line-height:2.25rem;text-overflow:ellipsis;white-space:nowrap}.qd-dropdown__wrapper .qd-dropdown__box.dense{margin-bottom:0}.qd-dropdown-selected .qd-dropdown__wrapper .qd-dropdown__box{color:#171717}.qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown__wrapper .qd-dropdown__box:active,.qd-dropdown__wrapper .qd-dropdown__box:hover{padding:0 .6875rem;border-width:.125rem;border-color:#171717;line-height:2.125rem;outline:0}.qd-dropdown__wrapper .qd-dropdown__box:active{color:#b4b4b4}.qd-dropdown__wrapper .qd-dropdown__box:hover:after{border-top-color:#b4b4b4}.qd-dropdown__wrapper .qd-dropdown__box:after{position:absolute;z-index:5;top:1rem;right:.75rem;width:0;height:0;border-top:.3125rem solid rgb(180,180,180);border-right:.3125rem solid rgba(255,255,255,0);border-left:.3125rem solid rgba(255,255,255,0);content:\"\";pointer-events:none}.qd-dropdown__wrapper .qd-dropdown__box .qd-dropdown-suffix{position:relative;z-index:8;margin-right:1rem;background:#fff}.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box{background:#f5f5f5;color:#979797}.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box:hover,.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box:active{padding:0 .75rem;border:.0625rem solid rgb(180,180,180);line-height:2.25rem}.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box{height:inherit;padding:0;border:none;line-height:2.25rem}.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:hover,.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:active{color:inherit}.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:after{display:none}.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box{height:inherit;padding:0;border:none;line-height:2.25rem}.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:hover,.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:active{color:inherit}.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:after{display:none}.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly{color:#069;cursor:pointer}.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly:hover,.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly:active,.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly:focus{color:#069;text-decoration:underline}.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly{color:#069;cursor:pointer}.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly:hover,.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly:active,.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly:focus{color:#069;text-decoration:underline}.qd-dropdown-error .qd-dropdown__box{padding:0 .75rem;border:.0625rem solid rgb(199,0,35);line-height:2.25rem}.qd-dropdown-error .qd-dropdown__box:focus,.qd-dropdown-error .qd-dropdown__box:hover,.qd-dropdown-error .qd-dropdown__box:active{padding:0 .6875rem;border:.125rem solid rgb(199,0,35);line-height:2.125rem}.qd-dropdown-error .qd-dropdown__box .qd-error-icon{color:#c70023}.qd-dropdown{display:block;height:4.5rem;margin-bottom:.75rem}.qd-dropdown.dense{width:100%;height:auto;margin-bottom:0}.qd-dropdown.dense .qd-dropdown__wrapper,.qd-dropdown.dense .qd-dropdown__box{margin-bottom:0}.qd-dropdown-open .qd-dropdown__wrapper .qd-dropdown__box{padding:0 .6875rem;border-width:.125rem;border-color:#069;line-height:2.125rem}.qd-dropdown-open .qd-dropdown__wrapper .qd-dropdown__box:after{border-top:none;border-bottom:.3125rem solid rgb(23,23,23)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdDropdownOptionsComponent, selector: "qd-dropdown-options", inputs: ["filter", "filterText", "testId", "id"], outputs: ["filterChange", "optionClick"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "dropdownOptions", first: true, predicate: QdDropdownOptionsComponent, descendants: true }, { propertyName: "dropdownDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }, { propertyName: "box", first: true, predicate: ["box"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<div class=\"qd-dropdown__wrapper\">\n  <div\n    class=\"qd-dropdown__box\"\n    tabindex=\"0\"\n    *ngIf=\"!readonly && !viewonly && hasOptions\"\n    [qdPopoverOnClick]=\"dropdownMenu\"\n    [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n    [qdPopoverStopPropagation]=\"true\"\n    [qdPopoverDisabled]=\"disabled\"\n    [qdPopoverMaxHeight]=\"qdPopoverMaxHeight\"\n    [qdPopoverAutoSize]=\"{ width: true }\"\n    [qdPopoverEnableKeyControl]=\"true\"\n    [qdPopoverFlipIntoViewport]=\"true\"\n    (opened)=\"onOpenDropdown()\"\n    (closed)=\"onDropdownClosed()\"\n    qdPopoverPlacement=\"bottom-start\"\n  >\n    {{ (selectedOption?.i18n | translate) || placeholder }}\n\n    <div class=\"qd-dropdown-suffix\">\n      <qd-icon *ngIf=\"hasError\" class=\"qd-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n    </div>\n  </div>\n</div>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hasHint || hasError)\"\n  [hint]=\"hasHint ? config.hint.i18n : ''\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"[selectedOption]\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"[selectedOption]\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n\n<ng-template #dropdownMenu>\n  <qd-dropdown-options\n    [filter]=\"filter\"\n    [filterText]=\"filterText\"\n    [testId]=\"testId\"\n    [id]=\"id\"\n    (filterChange)=\"handleFilterChange($event)\"\n    (optionClick)=\"handleClick($event)\"\n  ></qd-dropdown-options>\n</ng-template>\n", styles: [".qd-dropdown__wrapper{position:relative;margin-bottom:.375rem}.qd-dropdown__wrapper.dense{margin-bottom:0}.qd-dropdown__wrapper .qd-dropdown__box{display:flex;overflow:hidden;width:100%;height:2.25rem;justify-content:space-between;padding:0 .75rem;border:.0625rem solid rgb(180,180,180);margin-bottom:.25rem;background:#fff;color:#fff;font-size:.875rem;font-weight:400;line-height:2.25rem;text-overflow:ellipsis;white-space:nowrap}.qd-dropdown__wrapper .qd-dropdown__box.dense{margin-bottom:0}.qd-dropdown-selected .qd-dropdown__wrapper .qd-dropdown__box{color:#171717}.qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown__wrapper .qd-dropdown__box:active,.qd-dropdown__wrapper .qd-dropdown__box:hover{padding:0 .6875rem;border-width:.125rem;border-color:#171717;line-height:2.125rem;outline:0}.qd-dropdown__wrapper .qd-dropdown__box:active{color:#b4b4b4}.qd-dropdown__wrapper .qd-dropdown__box:hover:after{border-top-color:#b4b4b4}.qd-dropdown__wrapper .qd-dropdown__box:after{position:absolute;z-index:5;top:1rem;right:.75rem;width:0;height:0;border-top:.3125rem solid rgb(180,180,180);border-right:.3125rem solid rgba(255,255,255,0);border-left:.3125rem solid rgba(255,255,255,0);content:\"\";pointer-events:none}.qd-dropdown__wrapper .qd-dropdown__box .qd-dropdown-suffix{position:relative;z-index:8;margin-right:1rem;background:#fff}.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box{background:#f5f5f5;color:#979797}.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box:hover,.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box:active{padding:0 .75rem;border:.0625rem solid rgb(180,180,180);line-height:2.25rem}.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box{height:inherit;padding:0;border:none;line-height:2.25rem}.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:hover,.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:active{color:inherit}.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:after{display:none}.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box{height:inherit;padding:0;border:none;line-height:2.25rem}.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:hover,.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:active{color:inherit}.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:after{display:none}.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly{color:#069;cursor:pointer}.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly:hover,.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly:active,.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly:focus{color:#069;text-decoration:underline}.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly{color:#069;cursor:pointer}.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly:hover,.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly:active,.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly:focus{color:#069;text-decoration:underline}.qd-dropdown-error .qd-dropdown__box{padding:0 .75rem;border:.0625rem solid rgb(199,0,35);line-height:2.25rem}.qd-dropdown-error .qd-dropdown__box:focus,.qd-dropdown-error .qd-dropdown__box:hover,.qd-dropdown-error .qd-dropdown__box:active{padding:0 .6875rem;border:.125rem solid rgb(199,0,35);line-height:2.125rem}.qd-dropdown-error .qd-dropdown__box .qd-error-icon{color:#c70023}.qd-dropdown{display:block;height:4.5rem;margin-bottom:.75rem}.qd-dropdown.dense{width:100%;height:auto;margin-bottom:0}.qd-dropdown.dense .qd-dropdown__wrapper,.qd-dropdown.dense .qd-dropdown__box{margin-bottom:0}.qd-dropdown-open .qd-dropdown__wrapper .qd-dropdown__box{padding:0 .6875rem;border-width:.125rem;border-color:#069;line-height:2.125rem}.qd-dropdown-open .qd-dropdown__wrapper .qd-dropdown__box:after{border-top:none;border-bottom:.3125rem solid rgb(23,23,23)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdDropdownOptionsComponent, selector: "qd-dropdown-options", inputs: ["filter", "filterText", "testId", "id"], outputs: ["filterChange", "optionClick"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDropdownComponent, decorators: [{
             type: Component,
@@ -11126,7 +11244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                             provide: QD_FOCUSABLE_TOKEN,
                             useExisting: QdDropdownComponent
                         }
-                    ], encapsulation: ViewEncapsulation.None, host: { class: 'qd-dropdown' }, standalone: false, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<div class=\"qd-dropdown__wrapper\">\n  <div\n    class=\"qd-dropdown__box\"\n    tabindex=\"0\"\n    *ngIf=\"!readonly && !viewonly && hasOptions\"\n    [qdPopoverOnClick]=\"dropdownMenu\"\n    [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n    [qdPopoverStopPropagation]=\"true\"\n    [qdPopoverDisabled]=\"disabled\"\n    [qdPopoverMaxHeight]=\"qdPopoverMaxHeight\"\n    [qdPopoverAutoSize]=\"{ width: true }\"\n    [qdPopoverEnableKeyControl]=\"true\"\n    [qdPopoverFlipIntoViewport]=\"true\"\n    (opened)=\"onOpenDropdown()\"\n    (closed)=\"onDropdownClosed()\"\n    (click)=\"enterClick.emit()\"\n    qdPopoverPlacement=\"bottom-start\"\n  >\n    {{ (selectedOption?.i18n | translate) || placeholder }}\n\n    <div class=\"qd-dropdown-suffix\">\n      <qd-icon *ngIf=\"hasError\" class=\"qd-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n    </div>\n  </div>\n</div>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hasHint || hasError)\"\n  [hint]=\"hasHint ? config.hint.i18n : ''\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"[selectedOption]\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"[selectedOption]\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n\n<ng-template #dropdownMenu>\n  <qd-dropdown-options\n    [filter]=\"filter\"\n    [filterText]=\"filterText\"\n    [testId]=\"testId\"\n    [id]=\"id\"\n    (filterChange)=\"handleFilterChange($event)\"\n    (optionClick)=\"handleClick($event)\"\n  ></qd-dropdown-options>\n</ng-template>\n", styles: [".qd-dropdown__wrapper{position:relative;margin-bottom:.375rem}.qd-dropdown__wrapper.dense{margin-bottom:0}.qd-dropdown__wrapper .qd-dropdown__box{display:flex;overflow:hidden;width:100%;height:2.25rem;justify-content:space-between;padding:0 .75rem;border:.0625rem solid rgb(180,180,180);margin-bottom:.25rem;background:#fff;color:#fff;font-size:.875rem;font-weight:400;line-height:2.25rem;text-overflow:ellipsis;white-space:nowrap}.qd-dropdown__wrapper .qd-dropdown__box.dense{margin-bottom:0}.qd-dropdown-selected .qd-dropdown__wrapper .qd-dropdown__box{color:#171717}.qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown__wrapper .qd-dropdown__box:active,.qd-dropdown__wrapper .qd-dropdown__box:hover{padding:0 .6875rem;border-width:.125rem;border-color:#171717;line-height:2.125rem;outline:0}.qd-dropdown__wrapper .qd-dropdown__box:active{color:#b4b4b4}.qd-dropdown__wrapper .qd-dropdown__box:hover:after{border-top-color:#b4b4b4}.qd-dropdown__wrapper .qd-dropdown__box:after{position:absolute;z-index:5;top:1rem;right:.75rem;width:0;height:0;border-top:.3125rem solid rgb(180,180,180);border-right:.3125rem solid rgba(255,255,255,0);border-left:.3125rem solid rgba(255,255,255,0);content:\"\";pointer-events:none}.qd-dropdown__wrapper .qd-dropdown__box .qd-dropdown-suffix{position:relative;z-index:8;margin-right:1rem;background:#fff}.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box{background:#f5f5f5;color:#979797}.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box:hover,.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box:active{padding:0 .75rem;border:.0625rem solid rgb(180,180,180);line-height:2.25rem}.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box{height:inherit;padding:0;border:none;line-height:2.25rem}.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:hover,.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:active{color:inherit}.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:after{display:none}.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box{height:inherit;padding:0;border:none;line-height:2.25rem}.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:hover,.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:active{color:inherit}.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:after{display:none}.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly{color:#069;cursor:pointer}.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly:hover,.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly:active,.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly:focus{color:#069;text-decoration:underline}.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly{color:#069;cursor:pointer}.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly:hover,.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly:active,.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly:focus{color:#069;text-decoration:underline}.qd-dropdown-error .qd-dropdown__box{padding:0 .75rem;border:.0625rem solid rgb(199,0,35);line-height:2.25rem}.qd-dropdown-error .qd-dropdown__box:focus,.qd-dropdown-error .qd-dropdown__box:hover,.qd-dropdown-error .qd-dropdown__box:active{padding:0 .6875rem;border:.125rem solid rgb(199,0,35);line-height:2.125rem}.qd-dropdown-error .qd-dropdown__box .qd-error-icon{color:#c70023}.qd-dropdown{display:block;height:4.5rem;margin-bottom:.75rem}.qd-dropdown.dense{width:100%;height:auto;margin-bottom:0}.qd-dropdown.dense .qd-dropdown__wrapper,.qd-dropdown.dense .qd-dropdown__box{margin-bottom:0}.qd-dropdown-open .qd-dropdown__wrapper .qd-dropdown__box{padding:0 .6875rem;border-width:.125rem;border-color:#069;line-height:2.125rem}.qd-dropdown-open .qd-dropdown__wrapper .qd-dropdown__box:after{border-top:none;border-bottom:.3125rem solid rgb(23,23,23)}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, host: { class: 'qd-dropdown' }, standalone: false, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<div class=\"qd-dropdown__wrapper\">\n  <div\n    class=\"qd-dropdown__box\"\n    tabindex=\"0\"\n    *ngIf=\"!readonly && !viewonly && hasOptions\"\n    [qdPopoverOnClick]=\"dropdownMenu\"\n    [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n    [qdPopoverStopPropagation]=\"true\"\n    [qdPopoverDisabled]=\"disabled\"\n    [qdPopoverMaxHeight]=\"qdPopoverMaxHeight\"\n    [qdPopoverAutoSize]=\"{ width: true }\"\n    [qdPopoverEnableKeyControl]=\"true\"\n    [qdPopoverFlipIntoViewport]=\"true\"\n    (opened)=\"onOpenDropdown()\"\n    (closed)=\"onDropdownClosed()\"\n    qdPopoverPlacement=\"bottom-start\"\n  >\n    {{ (selectedOption?.i18n | translate) || placeholder }}\n\n    <div class=\"qd-dropdown-suffix\">\n      <qd-icon *ngIf=\"hasError\" class=\"qd-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n    </div>\n  </div>\n</div>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hasHint || hasError)\"\n  [hint]=\"hasHint ? config.hint.i18n : ''\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"[selectedOption]\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"[selectedOption]\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n\n<ng-template #dropdownMenu>\n  <qd-dropdown-options\n    [filter]=\"filter\"\n    [filterText]=\"filterText\"\n    [testId]=\"testId\"\n    [id]=\"id\"\n    (filterChange)=\"handleFilterChange($event)\"\n    (optionClick)=\"handleClick($event)\"\n  ></qd-dropdown-options>\n</ng-template>\n", styles: [".qd-dropdown__wrapper{position:relative;margin-bottom:.375rem}.qd-dropdown__wrapper.dense{margin-bottom:0}.qd-dropdown__wrapper .qd-dropdown__box{display:flex;overflow:hidden;width:100%;height:2.25rem;justify-content:space-between;padding:0 .75rem;border:.0625rem solid rgb(180,180,180);margin-bottom:.25rem;background:#fff;color:#fff;font-size:.875rem;font-weight:400;line-height:2.25rem;text-overflow:ellipsis;white-space:nowrap}.qd-dropdown__wrapper .qd-dropdown__box.dense{margin-bottom:0}.qd-dropdown-selected .qd-dropdown__wrapper .qd-dropdown__box{color:#171717}.qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown__wrapper .qd-dropdown__box:active,.qd-dropdown__wrapper .qd-dropdown__box:hover{padding:0 .6875rem;border-width:.125rem;border-color:#171717;line-height:2.125rem;outline:0}.qd-dropdown__wrapper .qd-dropdown__box:active{color:#b4b4b4}.qd-dropdown__wrapper .qd-dropdown__box:hover:after{border-top-color:#b4b4b4}.qd-dropdown__wrapper .qd-dropdown__box:after{position:absolute;z-index:5;top:1rem;right:.75rem;width:0;height:0;border-top:.3125rem solid rgb(180,180,180);border-right:.3125rem solid rgba(255,255,255,0);border-left:.3125rem solid rgba(255,255,255,0);content:\"\";pointer-events:none}.qd-dropdown__wrapper .qd-dropdown__box .qd-dropdown-suffix{position:relative;z-index:8;margin-right:1rem;background:#fff}.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box{background:#f5f5f5;color:#979797}.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box:hover,.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box:active{padding:0 .75rem;border:.0625rem solid rgb(180,180,180);line-height:2.25rem}.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box{height:inherit;padding:0;border:none;line-height:2.25rem}.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:hover,.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:active{color:inherit}.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:after{display:none}.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box{height:inherit;padding:0;border:none;line-height:2.25rem}.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:hover,.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:active{color:inherit}.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:after{display:none}.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly{color:#069;cursor:pointer}.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly:hover,.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly:active,.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly:focus{color:#069;text-decoration:underline}.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly{color:#069;cursor:pointer}.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly:hover,.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly:active,.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly:focus{color:#069;text-decoration:underline}.qd-dropdown-error .qd-dropdown__box{padding:0 .75rem;border:.0625rem solid rgb(199,0,35);line-height:2.25rem}.qd-dropdown-error .qd-dropdown__box:focus,.qd-dropdown-error .qd-dropdown__box:hover,.qd-dropdown-error .qd-dropdown__box:active{padding:0 .6875rem;border:.125rem solid rgb(199,0,35);line-height:2.125rem}.qd-dropdown-error .qd-dropdown__box .qd-error-icon{color:#c70023}.qd-dropdown{display:block;height:4.5rem;margin-bottom:.75rem}.qd-dropdown.dense{width:100%;height:auto;margin-bottom:0}.qd-dropdown.dense .qd-dropdown__wrapper,.qd-dropdown.dense .qd-dropdown__box{margin-bottom:0}.qd-dropdown-open .qd-dropdown__wrapper .qd-dropdown__box{padding:0 .6875rem;border-width:.125rem;border-color:#069;line-height:2.125rem}.qd-dropdown-open .qd-dropdown__wrapper .qd-dropdown__box:after{border-top:none;border-bottom:.3125rem solid rgb(23,23,23)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], id: [{
@@ -11144,6 +11262,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Output
             }], enterClick: [{
                 type: Output
+            }], dropdownOpened: [{
+                type: Output
             }], clickHint: [{
                 type: Output
             }], clickReadonly: [{
@@ -11768,41 +11888,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();
@@ -12183,6 +12309,7 @@ class QdDatepickerComponent {
     displayedDateTime = '';
     label;
     hint;
+    hasAutofocus = false;
     readonlyAction = false;
     viewonlyAction = false;
     language = DEFAULT_LANGUAGE;
@@ -12364,6 +12491,7 @@ class QdDatepickerComponent {
     updateConfiguration() {
         this.label = getLabel(this.config);
         this.hint = getHint(this.config);
+        this.hasAutofocus = getHasAutofocus(this.config);
         this.readonly = getReadonly(this.config, this.readonly);
         this.viewonly = getViewonly(this.config, this.viewonly);
         this.hintAction = getHintAction(this.config);
@@ -12472,7 +12600,7 @@ class QdDatepickerComponent {
                 useValue: true
             },
             QdFormsActionEmitterService
-        ], viewQueries: [{ propertyName: "popover", first: true, predicate: ["qdPopoverOnClick"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<qd-input\n  *ngIf=\"!readonly && !viewonly\"\n  [value]=\"config?.timePicker && displayedDateTime ? displayedDateTime : displayedDate\"\n  (valueChange)=\"config?.timePicker ? handleUpdatedDateTime($event) : handleUpdatedDate($event)\"\n  [config]=\"{ disabled, readonly, viewonly, placeholder: config?.placeholder }\"\n  [isError]=\"hasError\"\n>\n  <button\n    type=\"button\"\n    class=\"datepicker-toggle\"\n    qdIconButton\n    [qdPopoverOnClick]=\"disabled ? null : calendar\"\n    [qdPopoverMaxWidth]=\"332\"\n    qdPopoverCloseStrategy=\"onOutsideClick\"\n    #qdPopoverOnClick=\"qdPopoverOnClick\"\n  >\n    <qd-icon [icon]=\"'calendar'\"></qd-icon>\n  </button>\n</qd-input>\n\n<ng-template #calendar>\n  <qd-calendar\n    [selectedDate]=\"config?.timePicker && displayedDateTime ? displayedDateTime : displayedDate\"\n    [language]=\"language\"\n    [disabledDates]=\"config?.disabledDates\"\n    (selectedChange)=\"handleUpdatedDate($event)\"\n  ></qd-calendar>\n  <qd-dropdown\n    class=\"timepicker-dropdown\"\n    *ngIf=\"timePicker\"\n    [value]=\"displayedTime\"\n    (valueChange)=\"handleUpdatedTime($event)\"\n    [config]=\"timePicker\"\n    [qdPopoverMaxHeight]=\"300\"\n  ></qd-dropdown>\n</ng-template>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n  [hint]=\"hint\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"[displayedDate]\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"[displayedDate]\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: ["qd-datepicker{position:relative;display:block;width:100%;margin-bottom:.75rem}qd-datepicker .calendar{padding:1rem}qd-datepicker .calendar mat-calendar{display:block}qd-datepicker .datepicker-toggle{background-color:unset;color:inherit}qd-datepicker:not(.qd-datepicker-calendar-only) qd-input{height:2.25rem;margin-bottom:.375rem!important}qd-datepicker:not(.qd-datepicker-calendar-only) qd-input .qd-form-label,qd-datepicker:not(.qd-datepicker-calendar-only) qd-input .qd-form-hint{display:none}qd-datepicker .qd-form-disabled .datepicker-toggle{color:#979797;cursor:default}qd-datepicker.qd-datepicker-calendar-only{margin-bottom:0}qd-datepicker.qd-datepicker-calendar-only qd-input{margin:0}qd-datepicker.qd-datepicker-calendar-only .qd-form-label,qd-datepicker.qd-datepicker-calendar-only .qd-form-hint,qd-datepicker.qd-datepicker-calendar-only .qd-input-input input{display:none}qd-datepicker.qd-datepicker-calendar-only .qd-input-input{height:initial!important;padding:0!important;border:none!important;margin:0!important}qd-datepicker.qd-datepicker-calendar-only .qd-input-suffix{margin-left:0!important}.timepicker-dropdown{margin:.75rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdCalendarComponent, selector: "qd-calendar", inputs: ["selectedDate", "language", "disabledDates"], outputs: ["selectedChange"] }, { 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: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }], encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "popover", first: true, predicate: ["qdPopoverOnClick"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<qd-input\n  *ngIf=\"!readonly && !viewonly\"\n  [value]=\"config?.timePicker && displayedDateTime ? displayedDateTime : displayedDate\"\n  (valueChange)=\"config?.timePicker ? handleUpdatedDateTime($event) : handleUpdatedDate($event)\"\n  [config]=\"{\n    disabled,\n    readonly,\n    viewonly,\n    placeholder: config?.placeholder,\n    hasAutofocus\n  }\"\n  [isError]=\"hasError\"\n>\n  <button\n    type=\"button\"\n    class=\"datepicker-toggle\"\n    qdIconButton\n    [qdPopoverOnClick]=\"disabled ? null : calendar\"\n    [qdPopoverMaxWidth]=\"332\"\n    qdPopoverCloseStrategy=\"onOutsideClick\"\n    #qdPopoverOnClick=\"qdPopoverOnClick\"\n  >\n    <qd-icon [icon]=\"'calendar'\"></qd-icon>\n  </button>\n</qd-input>\n\n<ng-template #calendar>\n  <qd-calendar\n    [selectedDate]=\"config?.timePicker && displayedDateTime ? displayedDateTime : displayedDate\"\n    [language]=\"language\"\n    [disabledDates]=\"config?.disabledDates\"\n    (selectedChange)=\"handleUpdatedDate($event)\"\n  ></qd-calendar>\n  <qd-dropdown\n    class=\"timepicker-dropdown\"\n    *ngIf=\"timePicker\"\n    [value]=\"displayedTime\"\n    (valueChange)=\"handleUpdatedTime($event)\"\n    [config]=\"timePicker\"\n    [qdPopoverMaxHeight]=\"300\"\n  ></qd-dropdown>\n</ng-template>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n  [hint]=\"hint\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"[displayedDate]\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"[displayedDate]\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: ["qd-datepicker{position:relative;display:block;width:100%;margin-bottom:.75rem}qd-datepicker .calendar{padding:1rem}qd-datepicker button.datepicker-toggle{width:1.75rem;height:1.75rem;justify-content:center;padding:.25rem;margin-right:.125rem}qd-datepicker button.datepicker-toggle .qd-icon{display:flex;align-items:center;justify-content:center;font-size:1.125rem;line-height:1}qd-datepicker button.datepicker-toggle:focus-visible{background:#fff0;box-shadow:inset 0 0 0 .125rem #069;outline:none}qd-datepicker:not(.qd-datepicker-calendar-only) qd-input{height:2.25rem;margin-bottom:.375rem!important}qd-datepicker:not(.qd-datepicker-calendar-only) qd-input .qd-form-label,qd-datepicker:not(.qd-datepicker-calendar-only) qd-input .qd-form-hint{display:none}qd-datepicker .qd-form-disabled .datepicker-toggle{color:#979797;cursor:default}qd-datepicker.qd-datepicker-calendar-only{margin-bottom:0}qd-datepicker.qd-datepicker-calendar-only qd-input{margin:0}qd-datepicker.qd-datepicker-calendar-only .qd-form-label,qd-datepicker.qd-datepicker-calendar-only .qd-form-hint,qd-datepicker.qd-datepicker-calendar-only .qd-input-input input{display:none}qd-datepicker.qd-datepicker-calendar-only .qd-input-input{height:initial!important;padding:0!important;border:none!important;margin:0!important}qd-datepicker.qd-datepicker-calendar-only .qd-input-suffix{margin-left:0!important}.timepicker-dropdown{margin:.75rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdCalendarComponent, selector: "qd-calendar", inputs: ["selectedDate", "language", "disabledDates"], outputs: ["selectedChange"] }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "dropdownOpened", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDatepickerComponent, decorators: [{
             type: Component,
@@ -12487,7 +12615,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                             useValue: true
                         },
                         QdFormsActionEmitterService
-                    ], standalone: false, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<qd-input\n  *ngIf=\"!readonly && !viewonly\"\n  [value]=\"config?.timePicker && displayedDateTime ? displayedDateTime : displayedDate\"\n  (valueChange)=\"config?.timePicker ? handleUpdatedDateTime($event) : handleUpdatedDate($event)\"\n  [config]=\"{ disabled, readonly, viewonly, placeholder: config?.placeholder }\"\n  [isError]=\"hasError\"\n>\n  <button\n    type=\"button\"\n    class=\"datepicker-toggle\"\n    qdIconButton\n    [qdPopoverOnClick]=\"disabled ? null : calendar\"\n    [qdPopoverMaxWidth]=\"332\"\n    qdPopoverCloseStrategy=\"onOutsideClick\"\n    #qdPopoverOnClick=\"qdPopoverOnClick\"\n  >\n    <qd-icon [icon]=\"'calendar'\"></qd-icon>\n  </button>\n</qd-input>\n\n<ng-template #calendar>\n  <qd-calendar\n    [selectedDate]=\"config?.timePicker && displayedDateTime ? displayedDateTime : displayedDate\"\n    [language]=\"language\"\n    [disabledDates]=\"config?.disabledDates\"\n    (selectedChange)=\"handleUpdatedDate($event)\"\n  ></qd-calendar>\n  <qd-dropdown\n    class=\"timepicker-dropdown\"\n    *ngIf=\"timePicker\"\n    [value]=\"displayedTime\"\n    (valueChange)=\"handleUpdatedTime($event)\"\n    [config]=\"timePicker\"\n    [qdPopoverMaxHeight]=\"300\"\n  ></qd-dropdown>\n</ng-template>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n  [hint]=\"hint\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"[displayedDate]\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"[displayedDate]\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: ["qd-datepicker{position:relative;display:block;width:100%;margin-bottom:.75rem}qd-datepicker .calendar{padding:1rem}qd-datepicker .calendar mat-calendar{display:block}qd-datepicker .datepicker-toggle{background-color:unset;color:inherit}qd-datepicker:not(.qd-datepicker-calendar-only) qd-input{height:2.25rem;margin-bottom:.375rem!important}qd-datepicker:not(.qd-datepicker-calendar-only) qd-input .qd-form-label,qd-datepicker:not(.qd-datepicker-calendar-only) qd-input .qd-form-hint{display:none}qd-datepicker .qd-form-disabled .datepicker-toggle{color:#979797;cursor:default}qd-datepicker.qd-datepicker-calendar-only{margin-bottom:0}qd-datepicker.qd-datepicker-calendar-only qd-input{margin:0}qd-datepicker.qd-datepicker-calendar-only .qd-form-label,qd-datepicker.qd-datepicker-calendar-only .qd-form-hint,qd-datepicker.qd-datepicker-calendar-only .qd-input-input input{display:none}qd-datepicker.qd-datepicker-calendar-only .qd-input-input{height:initial!important;padding:0!important;border:none!important;margin:0!important}qd-datepicker.qd-datepicker-calendar-only .qd-input-suffix{margin-left:0!important}.timepicker-dropdown{margin:.75rem}\n"] }]
+                    ], standalone: false, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<qd-input\n  *ngIf=\"!readonly && !viewonly\"\n  [value]=\"config?.timePicker && displayedDateTime ? displayedDateTime : displayedDate\"\n  (valueChange)=\"config?.timePicker ? handleUpdatedDateTime($event) : handleUpdatedDate($event)\"\n  [config]=\"{\n    disabled,\n    readonly,\n    viewonly,\n    placeholder: config?.placeholder,\n    hasAutofocus\n  }\"\n  [isError]=\"hasError\"\n>\n  <button\n    type=\"button\"\n    class=\"datepicker-toggle\"\n    qdIconButton\n    [qdPopoverOnClick]=\"disabled ? null : calendar\"\n    [qdPopoverMaxWidth]=\"332\"\n    qdPopoverCloseStrategy=\"onOutsideClick\"\n    #qdPopoverOnClick=\"qdPopoverOnClick\"\n  >\n    <qd-icon [icon]=\"'calendar'\"></qd-icon>\n  </button>\n</qd-input>\n\n<ng-template #calendar>\n  <qd-calendar\n    [selectedDate]=\"config?.timePicker && displayedDateTime ? displayedDateTime : displayedDate\"\n    [language]=\"language\"\n    [disabledDates]=\"config?.disabledDates\"\n    (selectedChange)=\"handleUpdatedDate($event)\"\n  ></qd-calendar>\n  <qd-dropdown\n    class=\"timepicker-dropdown\"\n    *ngIf=\"timePicker\"\n    [value]=\"displayedTime\"\n    (valueChange)=\"handleUpdatedTime($event)\"\n    [config]=\"timePicker\"\n    [qdPopoverMaxHeight]=\"300\"\n  ></qd-dropdown>\n</ng-template>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n  [hint]=\"hint\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"[displayedDate]\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"[displayedDate]\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: ["qd-datepicker{position:relative;display:block;width:100%;margin-bottom:.75rem}qd-datepicker .calendar{padding:1rem}qd-datepicker button.datepicker-toggle{width:1.75rem;height:1.75rem;justify-content:center;padding:.25rem;margin-right:.125rem}qd-datepicker button.datepicker-toggle .qd-icon{display:flex;align-items:center;justify-content:center;font-size:1.125rem;line-height:1}qd-datepicker button.datepicker-toggle:focus-visible{background:#fff0;box-shadow:inset 0 0 0 .125rem #069;outline:none}qd-datepicker:not(.qd-datepicker-calendar-only) qd-input{height:2.25rem;margin-bottom:.375rem!important}qd-datepicker:not(.qd-datepicker-calendar-only) qd-input .qd-form-label,qd-datepicker:not(.qd-datepicker-calendar-only) qd-input .qd-form-hint{display:none}qd-datepicker .qd-form-disabled .datepicker-toggle{color:#979797;cursor:default}qd-datepicker.qd-datepicker-calendar-only{margin-bottom:0}qd-datepicker.qd-datepicker-calendar-only qd-input{margin:0}qd-datepicker.qd-datepicker-calendar-only .qd-form-label,qd-datepicker.qd-datepicker-calendar-only .qd-form-hint,qd-datepicker.qd-datepicker-calendar-only .qd-input-input input{display:none}qd-datepicker.qd-datepicker-calendar-only .qd-input-input{height:initial!important;padding:0!important;border:none!important;margin:0!important}qd-datepicker.qd-datepicker-calendar-only .qd-input-suffix{margin-left:0!important}.timepicker-dropdown{margin:.75rem}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], formControlName: [{
@@ -15086,6 +15214,7 @@ class QdRadioButtonsComponent {
     controlContainer = inject(ControlContainer, { optional: true, host: true, skipSelf: true });
     ngZone = inject(NgZone);
     eventBrokerService = inject(QdEventBrokerService, { optional: true });
+    keyboardDetection = inject(QdKeyboardDetectionService);
     /**
      * The current form item value, if you are working with Model Binding.
      *
@@ -15155,9 +15284,15 @@ class QdRadioButtonsComponent {
     get activeOptionAsList() {
         return this.options.filter(o => o.value === this.value);
     }
+    get tabStopValue() {
+        const enabled = (this.radioButtonsListForView ?? []).filter(option => !(option.disabled || this.disabled));
+        const selected = this.value ? enabled.find(option => option.value === this.value) : undefined;
+        return (selected ?? enabled[0])?.value ?? null;
+    }
     label;
     align;
     filter = false;
+    hasAutofocus = false;
     options;
     isLabelDisabled;
     id;
@@ -15226,6 +15361,7 @@ class QdRadioButtonsComponent {
         this.align = getAlign(this.config);
         this.label = getLabel(this.config);
         this.filter = getFilter$1(this.config);
+        this.hasAutofocus = getHasAutofocus(this.config);
         this.options = getOptions(this.config);
         this.initRadioButtonList();
         this.disabled = getDisabled(this.config) || !!this.control?.disabled;
@@ -15267,7 +15403,7 @@ class QdRadioButtonsComponent {
             },
             QdRadioButtonsService,
             QdFormsActionEmitterService
-        ], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n  [isDisabled]=\"isLabelDisabled\"\n></qd-form-label>\n\n<qd-filter-form-items\n  *ngIf=\"filter\"\n  (filterValueChange)=\"changeValue($event)\"\n  [data-test-id]=\"testId + '-filter-form'\"\n></qd-filter-form-items>\n\n<div class=\"qd-radio-buttons__button-section\" *ngIf=\"!readonly && !viewonly\">\n  <label\n    *ngFor=\"let option of radioButtonsListForView; trackBy: getOptionId\"\n    [for]=\"option.value + id\"\n    [ngClass]=\"\n      'qd-radio-buttons__label' +\n      (option.disabled || disabled ? ' qd-radio-buttons__label--disabled' : '') +\n      (option.value === value ? ' qd-radio-buttons__label--checked' : '')\n    \"\n    [attr.data-test-id]=\"testId + '-label'\"\n  >\n    <input\n      type=\"radio\"\n      qdVisuallyHidden\n      [id]=\"option.value + id\"\n      [ngClass]=\"'qd-radio-buttons__radio-button'\"\n      [name]=\"id\"\n      [value]=\"option.value\"\n      [disabled]=\"option.disabled || disabled\"\n      (click)=\"handleClick(option.value)\"\n      [checked]=\"option.value === value\"\n      [attr.data-test-id]=\"testId + '-input-' + option.i18n\"\n    />\n\n    <qd-icon class=\"qd-radio-buttons__indicator\" *ngIf=\"option.value === value\" [icon]=\"'circleRadio'\"></qd-icon>\n    <qd-icon class=\"qd-radio-buttons__indicator\" *ngIf=\"option.value !== value\" [icon]=\"'circleSolid'\"></qd-icon>\n\n    <span [ngClass]=\"'qd-radio-buttons__caption qd-intersection-target'\">{{ option.i18n | translate }}</span>\n  </label>\n</div>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hasHint || hasError)\"\n  [hint]=\"hasHint ? config.hint.i18n : ''\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"activeOptionAsList\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"activeOptionAsList\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-radio-buttons{display:block;flex-direction:column;margin-bottom:.75rem}.qd-radio-buttons.qd-radio-align--horizontal .qd-radio-buttons__button-section{display:flex;min-height:2.25rem;flex-wrap:wrap;align-items:center;margin-bottom:.375rem}.qd-radio-buttons.qd-radio-align--horizontal .qd-radio-buttons__label:not(:last-child) .qd-radio-buttons__caption{padding-right:1rem}.qd-radio-buttons.qd-radio-align--vertical .qd-radio-buttons__button-section{display:flex;flex-direction:column;margin-bottom:.375rem}.qd-radio-buttons.qd-radio-align--vertical .qd-radio-buttons__button-section .qd-radio-buttons__caption{flex:auto}.qd-radio-buttons .qd-radio-buttons__label{display:flex;max-width:100%;padding:.625rem 0;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400;line-height:1rem}.qd-radio-buttons .qd-radio-buttons__label .qd-radio-buttons__indicator{padding:0 .375rem 0 0;color:#b4b4b4;font-size:1.25rem}.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):hover,.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):focus{color:#171717}.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):hover .qd-radio-buttons__indicator,.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):focus .qd-radio-buttons__indicator{color:#757575}.qd-radio-buttons .qd-radio-buttons__label--checked{color:#171717}.qd-radio-buttons .qd-radio-buttons__label--checked .qd-radio-buttons__indicator{color:#069}.qd-radio-buttons .qd-radio-buttons__label--disabled{color:#d5d5d5;cursor:default}.qd-radio-buttons .qd-radio-buttons__label--disabled .qd-radio-buttons__indicator{color:#d5d5d5}.qd-radio-buttons .qd-radio-buttons__label .qd-radio-buttons__caption{padding:0}.qd-radio-buttons__input-section{margin-bottom:.375rem}@media (max-width: 959.98px){.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__button-section{flex-direction:column}.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label{width:100%;padding-top:.0625rem;padding-bottom:.0625rem;padding-left:.75rem;border:.0625rem solid rgb(180,180,180);margin-bottom:.75rem;background:#fff}.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label .qd-radio-buttons__caption{padding-right:.75rem!important;transform:translateY(.0625rem)}}@media (max-width: 959.98px) and (max-width: 959.98px){.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label .qd-radio-buttons__caption{padding:.375rem .375rem .375rem 0!important;line-height:1.25rem}}@media (max-width: 959.98px){.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label:last-child{margin-bottom:0}.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label .qd-radio-buttons__indicator{display:flex;align-items:center}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: QdVisuallyHiddenDirective, selector: "[qdVisuallyHidden]" }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdFilterFormItemsComponent, selector: "qd-filter-form-items", inputs: ["inputFilterValue", "data-test-id"], outputs: ["filterValueChange"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+        ], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n  [isDisabled]=\"isLabelDisabled\"\n></qd-form-label>\n\n<qd-filter-form-items\n  *ngIf=\"filter\"\n  (filterValueChange)=\"changeValue($event)\"\n  [data-test-id]=\"testId + '-filter-form'\"\n></qd-filter-form-items>\n\n<div class=\"qd-radio-buttons__button-section\" *ngIf=\"!readonly && !viewonly\">\n  <label\n    *ngFor=\"let option of radioButtonsListForView; let i = index; trackBy: getOptionId\"\n    [for]=\"option.value + id\"\n    [ngClass]=\"\n      'qd-radio-buttons__label' +\n      (option.disabled || disabled ? ' qd-radio-buttons__label--disabled' : '') +\n      (option.value === value ? ' qd-radio-buttons__label--checked' : '')\n    \"\n    [attr.data-test-id]=\"testId + '-label'\"\n  >\n    <input\n      type=\"radio\"\n      qdVisuallyHidden\n      [qdAutofocus]=\"hasAutofocus && i === 0\"\n      [id]=\"option.value + id\"\n      [ngClass]=\"'qd-radio-buttons__radio-button'\"\n      [attr.tabindex]=\"option.value === tabStopValue ? 0 : -1\"\n      [name]=\"id\"\n      [value]=\"option.value\"\n      [disabled]=\"option.disabled || disabled\"\n      (change)=\"handleClick(option.value)\"\n      [checked]=\"option.value === value\"\n      [attr.data-test-id]=\"testId + '-input-' + option.i18n\"\n    />\n\n    <qd-icon class=\"qd-radio-buttons__indicator\" *ngIf=\"option.value === value\" [icon]=\"'circleRadio'\"></qd-icon>\n    <qd-icon class=\"qd-radio-buttons__indicator\" *ngIf=\"option.value !== value\" [icon]=\"'circleSolid'\"></qd-icon>\n\n    <span [ngClass]=\"'qd-radio-buttons__caption qd-intersection-target'\">{{ option.i18n | translate }}</span>\n  </label>\n</div>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hasHint || hasError)\"\n  [hint]=\"hasHint ? config.hint.i18n : ''\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"activeOptionAsList\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"activeOptionAsList\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-radio-buttons{display:block;flex-direction:column;margin-bottom:.75rem}.qd-radio-buttons.qd-radio-align--horizontal .qd-radio-buttons__button-section{display:flex;min-height:2.25rem;flex-wrap:wrap;align-items:center;margin-bottom:.375rem}.qd-radio-buttons.qd-radio-align--horizontal .qd-radio-buttons__label:not(:last-child) .qd-radio-buttons__caption{padding-right:1rem}.qd-radio-buttons.qd-radio-align--vertical .qd-radio-buttons__button-section{display:flex;flex-direction:column;margin-bottom:.375rem}.qd-radio-buttons.qd-radio-align--vertical .qd-radio-buttons__button-section .qd-radio-buttons__caption{flex:auto}.qd-radio-buttons .qd-radio-buttons__label{display:flex;max-width:100%;padding:.625rem 0;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400;line-height:1rem}.qd-radio-buttons .qd-radio-buttons__label .qd-radio-buttons__indicator{position:relative;margin:0 .375rem 0 0;color:#b4b4b4;font-size:1.25rem}.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):hover,.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):focus{color:#171717}.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):hover .qd-radio-buttons__indicator,.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):focus .qd-radio-buttons__indicator{color:#757575}.qd-radio-buttons .qd-radio-buttons__label--checked{color:#171717}.qd-radio-buttons .qd-radio-buttons__label--checked .qd-radio-buttons__indicator{color:#069}.qd-radio-buttons .qd-radio-buttons__label--disabled{color:#d5d5d5;cursor:default}.qd-radio-buttons .qd-radio-buttons__label--disabled .qd-radio-buttons__indicator{color:#d5d5d5}.qd-radio-buttons .qd-radio-buttons__label .qd-radio-buttons__caption{padding:0}.qd-radio-buttons__input-section{margin-bottom:.375rem}@media (max-width: 959.98px){.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__button-section{flex-direction:column}.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label{width:100%;padding-top:.0625rem;padding-bottom:.0625rem;padding-left:.75rem;border:.0625rem solid rgb(180,180,180);margin-bottom:.75rem;background:#fff}.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label .qd-radio-buttons__caption{padding-right:.75rem!important;transform:translateY(.0625rem)}}@media (max-width: 959.98px) and (max-width: 959.98px){.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label .qd-radio-buttons__caption{padding:.375rem .375rem .375rem 0!important;line-height:1.25rem}}@media (max-width: 959.98px){.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label:last-child{margin-bottom:0}.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label .qd-radio-buttons__indicator{display:flex;align-items:center}}.qd-keyboard-active .qd-radio-buttons__radio-button:focus~.qd-radio-buttons__indicator:after{position:absolute;top:50%;left:50%;width:1.25rem;height:1.25rem;content:\"\";outline:.125rem solid rgb(23,23,23);outline-offset:0;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: QdAutofocusDirective, selector: "[qdAutofocus]", inputs: ["qdAutofocus"] }, { kind: "directive", type: QdVisuallyHiddenDirective, selector: "[qdVisuallyHidden]" }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdFilterFormItemsComponent, selector: "qd-filter-form-items", inputs: ["inputFilterValue", "data-test-id"], outputs: ["filterValueChange"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdRadioButtonsComponent, decorators: [{
             type: Component,
@@ -15279,7 +15415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         },
                         QdRadioButtonsService,
                         QdFormsActionEmitterService
-                    ], encapsulation: ViewEncapsulation.None, standalone: false, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n  [isDisabled]=\"isLabelDisabled\"\n></qd-form-label>\n\n<qd-filter-form-items\n  *ngIf=\"filter\"\n  (filterValueChange)=\"changeValue($event)\"\n  [data-test-id]=\"testId + '-filter-form'\"\n></qd-filter-form-items>\n\n<div class=\"qd-radio-buttons__button-section\" *ngIf=\"!readonly && !viewonly\">\n  <label\n    *ngFor=\"let option of radioButtonsListForView; trackBy: getOptionId\"\n    [for]=\"option.value + id\"\n    [ngClass]=\"\n      'qd-radio-buttons__label' +\n      (option.disabled || disabled ? ' qd-radio-buttons__label--disabled' : '') +\n      (option.value === value ? ' qd-radio-buttons__label--checked' : '')\n    \"\n    [attr.data-test-id]=\"testId + '-label'\"\n  >\n    <input\n      type=\"radio\"\n      qdVisuallyHidden\n      [id]=\"option.value + id\"\n      [ngClass]=\"'qd-radio-buttons__radio-button'\"\n      [name]=\"id\"\n      [value]=\"option.value\"\n      [disabled]=\"option.disabled || disabled\"\n      (click)=\"handleClick(option.value)\"\n      [checked]=\"option.value === value\"\n      [attr.data-test-id]=\"testId + '-input-' + option.i18n\"\n    />\n\n    <qd-icon class=\"qd-radio-buttons__indicator\" *ngIf=\"option.value === value\" [icon]=\"'circleRadio'\"></qd-icon>\n    <qd-icon class=\"qd-radio-buttons__indicator\" *ngIf=\"option.value !== value\" [icon]=\"'circleSolid'\"></qd-icon>\n\n    <span [ngClass]=\"'qd-radio-buttons__caption qd-intersection-target'\">{{ option.i18n | translate }}</span>\n  </label>\n</div>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hasHint || hasError)\"\n  [hint]=\"hasHint ? config.hint.i18n : ''\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"activeOptionAsList\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"activeOptionAsList\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-radio-buttons{display:block;flex-direction:column;margin-bottom:.75rem}.qd-radio-buttons.qd-radio-align--horizontal .qd-radio-buttons__button-section{display:flex;min-height:2.25rem;flex-wrap:wrap;align-items:center;margin-bottom:.375rem}.qd-radio-buttons.qd-radio-align--horizontal .qd-radio-buttons__label:not(:last-child) .qd-radio-buttons__caption{padding-right:1rem}.qd-radio-buttons.qd-radio-align--vertical .qd-radio-buttons__button-section{display:flex;flex-direction:column;margin-bottom:.375rem}.qd-radio-buttons.qd-radio-align--vertical .qd-radio-buttons__button-section .qd-radio-buttons__caption{flex:auto}.qd-radio-buttons .qd-radio-buttons__label{display:flex;max-width:100%;padding:.625rem 0;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400;line-height:1rem}.qd-radio-buttons .qd-radio-buttons__label .qd-radio-buttons__indicator{padding:0 .375rem 0 0;color:#b4b4b4;font-size:1.25rem}.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):hover,.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):focus{color:#171717}.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):hover .qd-radio-buttons__indicator,.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):focus .qd-radio-buttons__indicator{color:#757575}.qd-radio-buttons .qd-radio-buttons__label--checked{color:#171717}.qd-radio-buttons .qd-radio-buttons__label--checked .qd-radio-buttons__indicator{color:#069}.qd-radio-buttons .qd-radio-buttons__label--disabled{color:#d5d5d5;cursor:default}.qd-radio-buttons .qd-radio-buttons__label--disabled .qd-radio-buttons__indicator{color:#d5d5d5}.qd-radio-buttons .qd-radio-buttons__label .qd-radio-buttons__caption{padding:0}.qd-radio-buttons__input-section{margin-bottom:.375rem}@media (max-width: 959.98px){.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__button-section{flex-direction:column}.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label{width:100%;padding-top:.0625rem;padding-bottom:.0625rem;padding-left:.75rem;border:.0625rem solid rgb(180,180,180);margin-bottom:.75rem;background:#fff}.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label .qd-radio-buttons__caption{padding-right:.75rem!important;transform:translateY(.0625rem)}}@media (max-width: 959.98px) and (max-width: 959.98px){.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label .qd-radio-buttons__caption{padding:.375rem .375rem .375rem 0!important;line-height:1.25rem}}@media (max-width: 959.98px){.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label:last-child{margin-bottom:0}.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label .qd-radio-buttons__indicator{display:flex;align-items:center}}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, standalone: false, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n  [isDisabled]=\"isLabelDisabled\"\n></qd-form-label>\n\n<qd-filter-form-items\n  *ngIf=\"filter\"\n  (filterValueChange)=\"changeValue($event)\"\n  [data-test-id]=\"testId + '-filter-form'\"\n></qd-filter-form-items>\n\n<div class=\"qd-radio-buttons__button-section\" *ngIf=\"!readonly && !viewonly\">\n  <label\n    *ngFor=\"let option of radioButtonsListForView; let i = index; trackBy: getOptionId\"\n    [for]=\"option.value + id\"\n    [ngClass]=\"\n      'qd-radio-buttons__label' +\n      (option.disabled || disabled ? ' qd-radio-buttons__label--disabled' : '') +\n      (option.value === value ? ' qd-radio-buttons__label--checked' : '')\n    \"\n    [attr.data-test-id]=\"testId + '-label'\"\n  >\n    <input\n      type=\"radio\"\n      qdVisuallyHidden\n      [qdAutofocus]=\"hasAutofocus && i === 0\"\n      [id]=\"option.value + id\"\n      [ngClass]=\"'qd-radio-buttons__radio-button'\"\n      [attr.tabindex]=\"option.value === tabStopValue ? 0 : -1\"\n      [name]=\"id\"\n      [value]=\"option.value\"\n      [disabled]=\"option.disabled || disabled\"\n      (change)=\"handleClick(option.value)\"\n      [checked]=\"option.value === value\"\n      [attr.data-test-id]=\"testId + '-input-' + option.i18n\"\n    />\n\n    <qd-icon class=\"qd-radio-buttons__indicator\" *ngIf=\"option.value === value\" [icon]=\"'circleRadio'\"></qd-icon>\n    <qd-icon class=\"qd-radio-buttons__indicator\" *ngIf=\"option.value !== value\" [icon]=\"'circleSolid'\"></qd-icon>\n\n    <span [ngClass]=\"'qd-radio-buttons__caption qd-intersection-target'\">{{ option.i18n | translate }}</span>\n  </label>\n</div>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hasHint || hasError)\"\n  [hint]=\"hasHint ? config.hint.i18n : ''\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"activeOptionAsList\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"activeOptionAsList\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-radio-buttons{display:block;flex-direction:column;margin-bottom:.75rem}.qd-radio-buttons.qd-radio-align--horizontal .qd-radio-buttons__button-section{display:flex;min-height:2.25rem;flex-wrap:wrap;align-items:center;margin-bottom:.375rem}.qd-radio-buttons.qd-radio-align--horizontal .qd-radio-buttons__label:not(:last-child) .qd-radio-buttons__caption{padding-right:1rem}.qd-radio-buttons.qd-radio-align--vertical .qd-radio-buttons__button-section{display:flex;flex-direction:column;margin-bottom:.375rem}.qd-radio-buttons.qd-radio-align--vertical .qd-radio-buttons__button-section .qd-radio-buttons__caption{flex:auto}.qd-radio-buttons .qd-radio-buttons__label{display:flex;max-width:100%;padding:.625rem 0;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400;line-height:1rem}.qd-radio-buttons .qd-radio-buttons__label .qd-radio-buttons__indicator{position:relative;margin:0 .375rem 0 0;color:#b4b4b4;font-size:1.25rem}.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):hover,.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):focus{color:#171717}.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):hover .qd-radio-buttons__indicator,.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):focus .qd-radio-buttons__indicator{color:#757575}.qd-radio-buttons .qd-radio-buttons__label--checked{color:#171717}.qd-radio-buttons .qd-radio-buttons__label--checked .qd-radio-buttons__indicator{color:#069}.qd-radio-buttons .qd-radio-buttons__label--disabled{color:#d5d5d5;cursor:default}.qd-radio-buttons .qd-radio-buttons__label--disabled .qd-radio-buttons__indicator{color:#d5d5d5}.qd-radio-buttons .qd-radio-buttons__label .qd-radio-buttons__caption{padding:0}.qd-radio-buttons__input-section{margin-bottom:.375rem}@media (max-width: 959.98px){.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__button-section{flex-direction:column}.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label{width:100%;padding-top:.0625rem;padding-bottom:.0625rem;padding-left:.75rem;border:.0625rem solid rgb(180,180,180);margin-bottom:.75rem;background:#fff}.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label .qd-radio-buttons__caption{padding-right:.75rem!important;transform:translateY(.0625rem)}}@media (max-width: 959.98px) and (max-width: 959.98px){.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label .qd-radio-buttons__caption{padding:.375rem .375rem .375rem 0!important;line-height:1.25rem}}@media (max-width: 959.98px){.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label:last-child{margin-bottom:0}.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label .qd-radio-buttons__indicator{display:flex;align-items:center}}.qd-keyboard-active .qd-radio-buttons__radio-button:focus~.qd-radio-buttons__indicator:after{position:absolute;top:50%;left:50%;width:1.25rem;height:1.25rem;content:\"\";outline:.125rem solid rgb(23,23,23);outline-offset:0;transform:translate(-50%,-50%)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], config: [{
@@ -16405,6 +16541,7 @@ class QdFormModule {
             QdAutofocusModule,
             QdChipModule,
             QdCoreModule,
+            QdIconButtonModule,
             QdIconModule,
             QdPopoverModule,
             QdTooltipModule,
@@ -16430,6 +16567,7 @@ class QdFormModule {
             QdAutofocusModule,
             QdChipModule,
             QdCoreModule,
+            QdIconButtonModule,
             QdIconModule,
             QdPopoverModule,
             QdTooltipModule,
@@ -16446,6 +16584,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         QdAutofocusModule,
                         QdChipModule,
                         QdCoreModule,
+                        QdIconButtonModule,
                         QdIconModule,
                         QdPopoverModule,
                         QdTooltipModule,
@@ -17409,7 +17548,6 @@ class QdButtonModule {
             QdButtonLinkDirective,
             QdButtonStackButtonComponent,
             QdButtonStackComponent,
-            QdIconButtonComponent,
             QdMenuButtonComponent,
             QdButtonAdditionalInfoComponent,
             QdSanitizeHtmlPipe], imports: [CommonModule,
@@ -17418,7 +17556,8 @@ class QdButtonModule {
             QdTextSectionModule,
             QdPopoverModule,
             QdCoreModule,
-            QdNotificationsModule], exports: [QdButtonComponent,
+            QdNotificationsModule,
+            QdIconButtonModule], exports: [QdButtonComponent,
             QdButtonGhostDirective,
             QdButtonGridComponent,
             QdButtonLinkDirective,
@@ -17432,7 +17571,8 @@ class QdButtonModule {
             QdTextSectionModule,
             QdPopoverModule,
             QdCoreModule,
-            QdNotificationsModule] });
+            QdNotificationsModule,
+            QdIconButtonModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdButtonModule, decorators: [{
             type: NgModule,
@@ -17444,7 +17584,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         QdTextSectionModule,
                         QdPopoverModule,
                         QdCoreModule,
-                        QdNotificationsModule
+                        QdNotificationsModule,
+                        QdIconButtonModule
                     ],
                     declarations: [
                         QdButtonComponent,
@@ -17453,7 +17594,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         QdButtonLinkDirective,
                         QdButtonStackButtonComponent,
                         QdButtonStackComponent,
-                        QdIconButtonComponent,
                         QdMenuButtonComponent,
                         QdButtonAdditionalInfoComponent,
                         QdSanitizeHtmlPipe
@@ -18846,6 +18986,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.
@@ -19108,7 +19267,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,
@@ -19123,7 +19282,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,
@@ -19134,10 +19293,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
@@ -19151,6 +19317,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;
@@ -19170,19 +19337,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 });
@@ -19200,6 +19373,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,
@@ -19229,6 +19403,10 @@ class QdDialogModule {
             {
                 provide: QD_PAGE_DIALOG_WITH_BREADCRUMBS_HOST,
                 useValue: QdPageDialogWithBreadcrumbsComponent
+            },
+            {
+                provide: QD_DISCARD_CONFIRM_DIALOG_COMPONENT_TOKEN,
+                useValue: QdDialogConfirmComponent
             }
         ], imports: [CommonModule,
             TranslateModule,
@@ -19264,6 +19442,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         QdDialogActionComponent,
                         QdDialogAuthSessionEndComponent,
                         QdDialogComponent,
+                        QdDialogConfirmComponent,
                         QdDialogConfirmationComponent,
                         QdDialogConfirmationErrorDirective,
                         QdDialogConfirmationInfoDirective,
@@ -19286,6 +19465,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
                         }
                     ]
                 }]
@@ -19721,7 +19904,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,
@@ -19924,7 +20107,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,
@@ -21900,11 +22083,11 @@ class QdFilterItemSelectCategoryComponent {
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemSelectCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemSelectCategoryComponent, isStandalone: false, selector: "qd-filter-category-select", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-filter__category-select" }, viewQueries: [{ propertyName: "popoverDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }], ngImport: i0, template: "<div\n  *ngIf=\"showSelectButton$ | async\"\n  [class]=\"buttonClassName\"\n  [qdPopoverOnClick]=\"filterLayer\"\n  [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n  [qdPopoverStopPropagation]=\"true\"\n  [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n  qdPopoverPlacement=\"bottom-start\"\n  [qdPopoverOffsetY]=\"-1\"\n  (opened)=\"onLayerOpened()\"\n  (closed)=\"onLayerClosed()\"\n  [attr.data-test-id]=\"testId + '-select-button'\"\n>\n  <qd-icon\n    *ngIf=\"!open\"\n    [icon]=\"'ctrlDown'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--closed'\"\n    [attr.data-test-id]=\"testId + '-closed'\"\n  ></qd-icon>\n  <qd-icon\n    *ngIf=\"open\"\n    [icon]=\"'ctrlTop'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--open'\"\n    [attr.data-test-id]=\"testId + '-opened'\"\n  ></qd-icon>\n\n  <div class=\"qd-filter__category-button-caption\">\n    <span>\n      {{ i18n | translate }}\n    </span>\n  </div>\n\n  <ng-container *ngIf=\"(isMobile$ | async) && type === 'multiSelect'; else desktopChips\">\n    <qd-chip\n      *ngIf=\"activeItemCount > 0\"\n      [state]=\"'filter'\"\n      [close]=\"true\"\n      (closeClickEmitter)=\"clearAll()\"\n      [data-test-id]=\"testId + '-selected-chip-count'\"\n      >{{ activeItemCount }}</qd-chip\n    >\n  </ng-container>\n  <ng-template #desktopChips>\n    <ng-container *ngTemplateOutlet=\"SelectedChip\"></ng-container>\n  </ng-template>\n</div>\n\n<ng-template #filterLayer>\n  <div [class]=\"layerContentClassName\">\n    <qd-icon\n      *ngIf=\"closeButton\"\n      [class]=\"'qd-filter__category-layer-close'\"\n      (click)=\"closeLayer()\"\n      [icon]=\"'ctrlTop'\"\n      [attr.data-test-id]=\"testId + '-layer-close'\"\n    ></qd-icon>\n\n    <ng-container *ngIf=\"itemsLoading$ | async; else categoryContent\" [ngTemplateOutlet]=\"loadingState\"></ng-container>\n\n    <ng-template #categoryContent>\n      <ng-container [ngSwitch]=\"type\">\n        <ng-container *ngSwitchCase=\"'multiSelect'\">\n          <qd-filter-form-items\n            *ngIf=\"filter\"\n            [inputFilterValue]=\"filterCategoryValue$ | async\"\n            (filterValueChange)=\"changeValue($event)\"\n            [data-test-id]=\"testId\"\n          ></qd-filter-form-items>\n\n          <div class=\"qd-filter__category-layer-items\">\n            <ng-container\n              *ngFor=\"let entry of selectedDropdownEntries; trackBy: trackByItem\"\n              [ngTemplateOutlet]=\"multiSelectItem\"\n              [ngTemplateOutletContext]=\"{ item: entry.item, itemIndex: entry.itemIndex }\"\n            ></ng-container>\n\n            <div\n              *ngIf=\"showSelectedSeparator\"\n              class=\"qd-filter__category-layer-separator\"\n              [attr.data-test-id]=\"testId + '-selected-separator'\"\n            ></div>\n\n            <ng-container\n              *ngFor=\"let entry of unselectedDropdownEntries; trackBy: trackByItem\"\n              [ngTemplateOutlet]=\"multiSelectItem\"\n              [ngTemplateOutletContext]=\"{ item: entry.item, itemIndex: entry.itemIndex }\"\n            ></ng-container>\n\n            <ng-container *ngIf=\"hasNoVisibleItems\" [ngTemplateOutlet]=\"emptyState\"></ng-container>\n          </div>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'singleSelect'\">\n          <qd-filter-form-items\n            *ngIf=\"filter\"\n            [inputFilterValue]=\"filterCategoryValue$ | async\"\n            (filterValueChange)=\"changeValue($event)\"\n            [data-test-id]=\"testId\"\n          ></qd-filter-form-items>\n\n          <div class=\"qd-filter__category-layer-items\">\n            <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n              <qd-filter-item-single-select\n                *ngIf=\"!item.hidden\"\n                [categoryIndex]=\"categoryIndex\"\n                [itemIndex]=\"itemIndex\"\n                (closeEventEmitter)=\"closeLayer()\"\n                [filterId]=\"filterId\"\n                [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n              >\n              </qd-filter-item-single-select>\n            </ng-container>\n\n            <ng-container *ngIf=\"hasNoVisibleItems\" [ngTemplateOutlet]=\"emptyState\"></ng-container>\n          </div>\n        </ng-container>\n      </ng-container>\n    </ng-template>\n  </div>\n</ng-template>\n\n<ng-template #emptyState>\n  <p class=\"qd-filter__category-layer-empty\" [attr.data-test-id]=\"testId + '-no-results'\">\n    {{ \"i18n.qd.filter.noResults\" | translate }}\n  </p>\n</ng-template>\n\n<ng-template #loadingState>\n  <p class=\"qd-filter__category-layer-loading\" [attr.data-test-id]=\"testId + '-items-loading'\">\n    {{ \"i18n.qd.filter.loading\" | translate }}\n  </p>\n</ng-template>\n\n<ng-template #multiSelectItem let-item=\"item\" let-itemIndex=\"itemIndex\">\n  <qd-filter-item-multi-select\n    *ngIf=\"!item.hidden\"\n    [categoryIndex]=\"categoryIndex\"\n    [itemIndex]=\"itemIndex\"\n    [filterId]=\"filterId\"\n    [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n  ></qd-filter-item-multi-select>\n</ng-template>\n\n<ng-template #SelectedChip>\n  <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n    <!-- TODO: Add tooltip-->\n    <qd-chip\n      *ngIf=\"item.active\"\n      [state]=\"'filter'\"\n      [close]=\"true\"\n      (closeClickEmitter)=\"close($event)\"\n      [data]=\"itemIndex\"\n      [data-test-id]=\"testId + '-selected-chip-' + item.item\"\n      >{{ item.i18n | translate }}</qd-chip\n    >\n  </ng-container>\n</ng-template>\n", styles: ["::ng-deep .qd-filter__category-layer{position:relative;display:flex;overflow:hidden;min-width:16.25rem;max-width:56.25rem;height:100%;flex-direction:column;padding:0;border:.0625rem solid rgb(151,151,151);background:#fff;box-shadow:#d5d5d5 .125rem .25rem .4375rem}::ng-deep .qd-filter__category-layer .qd-filter-form-items__filter{flex-shrink:0;margin-bottom:0}::ng-deep .qd-filter__category-layer .qd-checkbox__label{display:flex;height:2.5rem}::ng-deep .qd-filter__category-layer .qd-checkbox__indicator,::ng-deep .qd-filter__category-layer .qd-radio-buttons__indicator{transform:translateY(-.0625rem)}::ng-deep .qd-filter__category-layer-items{flex:1;overflow-y:auto}::ng-deep .qd-filter__category-layer-separator{height:.0625rem;flex-shrink:0;background:#d5d5d5}::ng-deep .qd-filter__category-layer-empty,::ng-deep .qd-filter__category-layer-loading{padding:0 .9375rem;margin:0;color:#757575;font-size:.875rem;line-height:2.5rem}::ng-deep .qd-filter__category-layer-container{position:relative}::ng-deep .qd-filter__category-layer-close{position:absolute;z-index:1;top:.5rem;right:1rem;color:#757575;cursor:pointer}::ng-deep .qd-filter__category-layer-close:before{position:absolute;content:\"\";inset:-.5rem}::ng-deep .qd-filter__category-layer-close:hover,::ng-deep .qd-filter__category-layer-close:focus{color:#171717}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdFilterFormItemsComponent, selector: "qd-filter-form-items", inputs: ["inputFilterValue", "data-test-id"], outputs: ["filterValueChange"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdFilterItemMultiSelectComponent, selector: "qd-filter-item-multi-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"] }, { kind: "component", type: QdFilterItemSingleSelectComponent, selector: "qd-filter-item-single-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"], outputs: ["closeEventEmitter"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemSelectCategoryComponent, isStandalone: false, selector: "qd-filter-category-select", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-filter__category-select" }, viewQueries: [{ propertyName: "popoverDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }], ngImport: i0, template: "<div\n  *ngIf=\"showSelectButton$ | async\"\n  [class]=\"buttonClassName\"\n  tabindex=\"0\"\n  role=\"button\"\n  aria-haspopup=\"dialog\"\n  [attr.aria-expanded]=\"open\"\n  [attr.aria-label]=\"i18n | translate\"\n  [qdPopoverOnClick]=\"filterLayer\"\n  [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n  [qdPopoverStopPropagation]=\"true\"\n  [qdPopoverEnableKeyControl]=\"true\"\n  [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n  qdPopoverPlacement=\"bottom-start\"\n  [qdPopoverOffsetY]=\"-1\"\n  (opened)=\"onLayerOpened()\"\n  (closed)=\"onLayerClosed()\"\n  [attr.data-test-id]=\"testId + '-select-button'\"\n>\n  <qd-icon\n    *ngIf=\"!open\"\n    [icon]=\"'ctrlDown'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--closed'\"\n    [attr.data-test-id]=\"testId + '-closed'\"\n  ></qd-icon>\n  <qd-icon\n    *ngIf=\"open\"\n    [icon]=\"'ctrlTop'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--open'\"\n    [attr.data-test-id]=\"testId + '-opened'\"\n  ></qd-icon>\n\n  <div class=\"qd-filter__category-button-caption\">\n    <span>\n      {{ i18n | translate }}\n    </span>\n  </div>\n\n  <ng-container *ngIf=\"(isMobile$ | async) && type === 'multiSelect'; else desktopChips\">\n    <qd-chip\n      *ngIf=\"activeItemCount > 0\"\n      [state]=\"'filter'\"\n      [close]=\"true\"\n      (closeClickEmitter)=\"clearAll()\"\n      [data-test-id]=\"testId + '-selected-chip-count'\"\n      >{{ activeItemCount }}</qd-chip\n    >\n  </ng-container>\n  <ng-template #desktopChips>\n    <ng-container *ngTemplateOutlet=\"SelectedChip\"></ng-container>\n  </ng-template>\n</div>\n\n<ng-template #filterLayer>\n  <div [class]=\"layerContentClassName\">\n    <qd-icon\n      *ngIf=\"closeButton\"\n      [class]=\"'qd-filter__category-layer-close'\"\n      (click)=\"closeLayer()\"\n      [icon]=\"'ctrlTop'\"\n      [attr.data-test-id]=\"testId + '-layer-close'\"\n    ></qd-icon>\n\n    <ng-container *ngIf=\"itemsLoading$ | async; else categoryContent\" [ngTemplateOutlet]=\"loadingState\"></ng-container>\n\n    <ng-template #categoryContent>\n      <ng-container [ngSwitch]=\"type\">\n        <ng-container *ngSwitchCase=\"'multiSelect'\">\n          <qd-filter-form-items\n            *ngIf=\"filter\"\n            [inputFilterValue]=\"filterCategoryValue$ | async\"\n            (filterValueChange)=\"changeValue($event)\"\n            [data-test-id]=\"testId\"\n          ></qd-filter-form-items>\n\n          <div class=\"qd-filter__category-layer-items\">\n            <ng-container\n              *ngFor=\"let entry of selectedDropdownEntries; trackBy: trackByItem\"\n              [ngTemplateOutlet]=\"multiSelectItem\"\n              [ngTemplateOutletContext]=\"{ item: entry.item, itemIndex: entry.itemIndex }\"\n            ></ng-container>\n\n            <div\n              *ngIf=\"showSelectedSeparator\"\n              class=\"qd-filter__category-layer-separator\"\n              [attr.data-test-id]=\"testId + '-selected-separator'\"\n            ></div>\n\n            <ng-container\n              *ngFor=\"let entry of unselectedDropdownEntries; trackBy: trackByItem\"\n              [ngTemplateOutlet]=\"multiSelectItem\"\n              [ngTemplateOutletContext]=\"{ item: entry.item, itemIndex: entry.itemIndex }\"\n            ></ng-container>\n\n            <ng-container *ngIf=\"hasNoVisibleItems\" [ngTemplateOutlet]=\"emptyState\"></ng-container>\n          </div>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'singleSelect'\">\n          <qd-filter-form-items\n            *ngIf=\"filter\"\n            [inputFilterValue]=\"filterCategoryValue$ | async\"\n            (filterValueChange)=\"changeValue($event)\"\n            [data-test-id]=\"testId\"\n          ></qd-filter-form-items>\n\n          <div class=\"qd-filter__category-layer-items\">\n            <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n              <qd-filter-item-single-select\n                *ngIf=\"!item.hidden\"\n                [categoryIndex]=\"categoryIndex\"\n                [itemIndex]=\"itemIndex\"\n                (closeEventEmitter)=\"closeLayer()\"\n                [filterId]=\"filterId\"\n                [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n              >\n              </qd-filter-item-single-select>\n            </ng-container>\n\n            <ng-container *ngIf=\"hasNoVisibleItems\" [ngTemplateOutlet]=\"emptyState\"></ng-container>\n          </div>\n        </ng-container>\n      </ng-container>\n    </ng-template>\n  </div>\n</ng-template>\n\n<ng-template #emptyState>\n  <p class=\"qd-filter__category-layer-empty\" [attr.data-test-id]=\"testId + '-no-results'\">\n    {{ \"i18n.qd.filter.noResults\" | translate }}\n  </p>\n</ng-template>\n\n<ng-template #loadingState>\n  <p class=\"qd-filter__category-layer-loading\" [attr.data-test-id]=\"testId + '-items-loading'\">\n    {{ \"i18n.qd.filter.loading\" | translate }}\n  </p>\n</ng-template>\n\n<ng-template #multiSelectItem let-item=\"item\" let-itemIndex=\"itemIndex\">\n  <qd-filter-item-multi-select\n    *ngIf=\"!item.hidden\"\n    [categoryIndex]=\"categoryIndex\"\n    [itemIndex]=\"itemIndex\"\n    [filterId]=\"filterId\"\n    [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n  ></qd-filter-item-multi-select>\n</ng-template>\n\n<ng-template #SelectedChip>\n  <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n    <!-- TODO: Add tooltip-->\n    <qd-chip\n      *ngIf=\"item.active\"\n      [state]=\"'filter'\"\n      [close]=\"true\"\n      (closeClickEmitter)=\"close($event)\"\n      [data]=\"itemIndex\"\n      [data-test-id]=\"testId + '-selected-chip-' + item.item\"\n      >{{ item.i18n | translate }}</qd-chip\n    >\n  </ng-container>\n</ng-template>\n", styles: ["::ng-deep .qd-filter__category-layer{position:relative;display:flex;overflow:hidden;min-width:16.25rem;max-width:56.25rem;height:100%;flex-direction:column;padding:0;border:.0625rem solid rgb(151,151,151);background:#fff;box-shadow:#d5d5d5 .125rem .25rem .4375rem}::ng-deep .qd-filter__category-layer .qd-filter-form-items__filter{flex-shrink:0;margin-bottom:0}::ng-deep .qd-filter__category-layer .qd-checkbox__label{display:flex;height:2.5rem}::ng-deep .qd-filter__category-layer .qd-checkbox__indicator,::ng-deep .qd-filter__category-layer .qd-radio-buttons__indicator{transform:translateY(-.0625rem)}::ng-deep .qd-filter__category-layer-items{flex:1;overflow-y:auto}::ng-deep .qd-filter__category-layer-separator{height:.0625rem;flex-shrink:0;background:#d5d5d5}::ng-deep .qd-filter__category-layer-empty,::ng-deep .qd-filter__category-layer-loading{padding:0 .9375rem;margin:0;color:#757575;font-size:.875rem;line-height:2.5rem}::ng-deep .qd-filter__category-layer-container{position:relative}::ng-deep .qd-filter__category-layer-close{position:absolute;z-index:1;top:.5rem;right:1rem;color:#757575;cursor:pointer}::ng-deep .qd-filter__category-layer-close:before{position:absolute;content:\"\";inset:-.5rem}::ng-deep .qd-filter__category-layer-close:hover,::ng-deep .qd-filter__category-layer-close:focus{color:#171717}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdFilterFormItemsComponent, selector: "qd-filter-form-items", inputs: ["inputFilterValue", "data-test-id"], outputs: ["filterValueChange"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdFilterItemMultiSelectComponent, selector: "qd-filter-item-multi-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"] }, { kind: "component", type: QdFilterItemSingleSelectComponent, selector: "qd-filter-item-single-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"], outputs: ["closeEventEmitter"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemSelectCategoryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-filter-category-select', host: { class: 'qd-filter__category-select' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  *ngIf=\"showSelectButton$ | async\"\n  [class]=\"buttonClassName\"\n  [qdPopoverOnClick]=\"filterLayer\"\n  [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n  [qdPopoverStopPropagation]=\"true\"\n  [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n  qdPopoverPlacement=\"bottom-start\"\n  [qdPopoverOffsetY]=\"-1\"\n  (opened)=\"onLayerOpened()\"\n  (closed)=\"onLayerClosed()\"\n  [attr.data-test-id]=\"testId + '-select-button'\"\n>\n  <qd-icon\n    *ngIf=\"!open\"\n    [icon]=\"'ctrlDown'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--closed'\"\n    [attr.data-test-id]=\"testId + '-closed'\"\n  ></qd-icon>\n  <qd-icon\n    *ngIf=\"open\"\n    [icon]=\"'ctrlTop'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--open'\"\n    [attr.data-test-id]=\"testId + '-opened'\"\n  ></qd-icon>\n\n  <div class=\"qd-filter__category-button-caption\">\n    <span>\n      {{ i18n | translate }}\n    </span>\n  </div>\n\n  <ng-container *ngIf=\"(isMobile$ | async) && type === 'multiSelect'; else desktopChips\">\n    <qd-chip\n      *ngIf=\"activeItemCount > 0\"\n      [state]=\"'filter'\"\n      [close]=\"true\"\n      (closeClickEmitter)=\"clearAll()\"\n      [data-test-id]=\"testId + '-selected-chip-count'\"\n      >{{ activeItemCount }}</qd-chip\n    >\n  </ng-container>\n  <ng-template #desktopChips>\n    <ng-container *ngTemplateOutlet=\"SelectedChip\"></ng-container>\n  </ng-template>\n</div>\n\n<ng-template #filterLayer>\n  <div [class]=\"layerContentClassName\">\n    <qd-icon\n      *ngIf=\"closeButton\"\n      [class]=\"'qd-filter__category-layer-close'\"\n      (click)=\"closeLayer()\"\n      [icon]=\"'ctrlTop'\"\n      [attr.data-test-id]=\"testId + '-layer-close'\"\n    ></qd-icon>\n\n    <ng-container *ngIf=\"itemsLoading$ | async; else categoryContent\" [ngTemplateOutlet]=\"loadingState\"></ng-container>\n\n    <ng-template #categoryContent>\n      <ng-container [ngSwitch]=\"type\">\n        <ng-container *ngSwitchCase=\"'multiSelect'\">\n          <qd-filter-form-items\n            *ngIf=\"filter\"\n            [inputFilterValue]=\"filterCategoryValue$ | async\"\n            (filterValueChange)=\"changeValue($event)\"\n            [data-test-id]=\"testId\"\n          ></qd-filter-form-items>\n\n          <div class=\"qd-filter__category-layer-items\">\n            <ng-container\n              *ngFor=\"let entry of selectedDropdownEntries; trackBy: trackByItem\"\n              [ngTemplateOutlet]=\"multiSelectItem\"\n              [ngTemplateOutletContext]=\"{ item: entry.item, itemIndex: entry.itemIndex }\"\n            ></ng-container>\n\n            <div\n              *ngIf=\"showSelectedSeparator\"\n              class=\"qd-filter__category-layer-separator\"\n              [attr.data-test-id]=\"testId + '-selected-separator'\"\n            ></div>\n\n            <ng-container\n              *ngFor=\"let entry of unselectedDropdownEntries; trackBy: trackByItem\"\n              [ngTemplateOutlet]=\"multiSelectItem\"\n              [ngTemplateOutletContext]=\"{ item: entry.item, itemIndex: entry.itemIndex }\"\n            ></ng-container>\n\n            <ng-container *ngIf=\"hasNoVisibleItems\" [ngTemplateOutlet]=\"emptyState\"></ng-container>\n          </div>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'singleSelect'\">\n          <qd-filter-form-items\n            *ngIf=\"filter\"\n            [inputFilterValue]=\"filterCategoryValue$ | async\"\n            (filterValueChange)=\"changeValue($event)\"\n            [data-test-id]=\"testId\"\n          ></qd-filter-form-items>\n\n          <div class=\"qd-filter__category-layer-items\">\n            <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n              <qd-filter-item-single-select\n                *ngIf=\"!item.hidden\"\n                [categoryIndex]=\"categoryIndex\"\n                [itemIndex]=\"itemIndex\"\n                (closeEventEmitter)=\"closeLayer()\"\n                [filterId]=\"filterId\"\n                [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n              >\n              </qd-filter-item-single-select>\n            </ng-container>\n\n            <ng-container *ngIf=\"hasNoVisibleItems\" [ngTemplateOutlet]=\"emptyState\"></ng-container>\n          </div>\n        </ng-container>\n      </ng-container>\n    </ng-template>\n  </div>\n</ng-template>\n\n<ng-template #emptyState>\n  <p class=\"qd-filter__category-layer-empty\" [attr.data-test-id]=\"testId + '-no-results'\">\n    {{ \"i18n.qd.filter.noResults\" | translate }}\n  </p>\n</ng-template>\n\n<ng-template #loadingState>\n  <p class=\"qd-filter__category-layer-loading\" [attr.data-test-id]=\"testId + '-items-loading'\">\n    {{ \"i18n.qd.filter.loading\" | translate }}\n  </p>\n</ng-template>\n\n<ng-template #multiSelectItem let-item=\"item\" let-itemIndex=\"itemIndex\">\n  <qd-filter-item-multi-select\n    *ngIf=\"!item.hidden\"\n    [categoryIndex]=\"categoryIndex\"\n    [itemIndex]=\"itemIndex\"\n    [filterId]=\"filterId\"\n    [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n  ></qd-filter-item-multi-select>\n</ng-template>\n\n<ng-template #SelectedChip>\n  <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n    <!-- TODO: Add tooltip-->\n    <qd-chip\n      *ngIf=\"item.active\"\n      [state]=\"'filter'\"\n      [close]=\"true\"\n      (closeClickEmitter)=\"close($event)\"\n      [data]=\"itemIndex\"\n      [data-test-id]=\"testId + '-selected-chip-' + item.item\"\n      >{{ item.i18n | translate }}</qd-chip\n    >\n  </ng-container>\n</ng-template>\n", styles: ["::ng-deep .qd-filter__category-layer{position:relative;display:flex;overflow:hidden;min-width:16.25rem;max-width:56.25rem;height:100%;flex-direction:column;padding:0;border:.0625rem solid rgb(151,151,151);background:#fff;box-shadow:#d5d5d5 .125rem .25rem .4375rem}::ng-deep .qd-filter__category-layer .qd-filter-form-items__filter{flex-shrink:0;margin-bottom:0}::ng-deep .qd-filter__category-layer .qd-checkbox__label{display:flex;height:2.5rem}::ng-deep .qd-filter__category-layer .qd-checkbox__indicator,::ng-deep .qd-filter__category-layer .qd-radio-buttons__indicator{transform:translateY(-.0625rem)}::ng-deep .qd-filter__category-layer-items{flex:1;overflow-y:auto}::ng-deep .qd-filter__category-layer-separator{height:.0625rem;flex-shrink:0;background:#d5d5d5}::ng-deep .qd-filter__category-layer-empty,::ng-deep .qd-filter__category-layer-loading{padding:0 .9375rem;margin:0;color:#757575;font-size:.875rem;line-height:2.5rem}::ng-deep .qd-filter__category-layer-container{position:relative}::ng-deep .qd-filter__category-layer-close{position:absolute;z-index:1;top:.5rem;right:1rem;color:#757575;cursor:pointer}::ng-deep .qd-filter__category-layer-close:before{position:absolute;content:\"\";inset:-.5rem}::ng-deep .qd-filter__category-layer-close:hover,::ng-deep .qd-filter__category-layer-close:focus{color:#171717}\n"] }]
+            args: [{ selector: 'qd-filter-category-select', host: { class: 'qd-filter__category-select' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  *ngIf=\"showSelectButton$ | async\"\n  [class]=\"buttonClassName\"\n  tabindex=\"0\"\n  role=\"button\"\n  aria-haspopup=\"dialog\"\n  [attr.aria-expanded]=\"open\"\n  [attr.aria-label]=\"i18n | translate\"\n  [qdPopoverOnClick]=\"filterLayer\"\n  [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n  [qdPopoverStopPropagation]=\"true\"\n  [qdPopoverEnableKeyControl]=\"true\"\n  [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n  qdPopoverPlacement=\"bottom-start\"\n  [qdPopoverOffsetY]=\"-1\"\n  (opened)=\"onLayerOpened()\"\n  (closed)=\"onLayerClosed()\"\n  [attr.data-test-id]=\"testId + '-select-button'\"\n>\n  <qd-icon\n    *ngIf=\"!open\"\n    [icon]=\"'ctrlDown'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--closed'\"\n    [attr.data-test-id]=\"testId + '-closed'\"\n  ></qd-icon>\n  <qd-icon\n    *ngIf=\"open\"\n    [icon]=\"'ctrlTop'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--open'\"\n    [attr.data-test-id]=\"testId + '-opened'\"\n  ></qd-icon>\n\n  <div class=\"qd-filter__category-button-caption\">\n    <span>\n      {{ i18n | translate }}\n    </span>\n  </div>\n\n  <ng-container *ngIf=\"(isMobile$ | async) && type === 'multiSelect'; else desktopChips\">\n    <qd-chip\n      *ngIf=\"activeItemCount > 0\"\n      [state]=\"'filter'\"\n      [close]=\"true\"\n      (closeClickEmitter)=\"clearAll()\"\n      [data-test-id]=\"testId + '-selected-chip-count'\"\n      >{{ activeItemCount }}</qd-chip\n    >\n  </ng-container>\n  <ng-template #desktopChips>\n    <ng-container *ngTemplateOutlet=\"SelectedChip\"></ng-container>\n  </ng-template>\n</div>\n\n<ng-template #filterLayer>\n  <div [class]=\"layerContentClassName\">\n    <qd-icon\n      *ngIf=\"closeButton\"\n      [class]=\"'qd-filter__category-layer-close'\"\n      (click)=\"closeLayer()\"\n      [icon]=\"'ctrlTop'\"\n      [attr.data-test-id]=\"testId + '-layer-close'\"\n    ></qd-icon>\n\n    <ng-container *ngIf=\"itemsLoading$ | async; else categoryContent\" [ngTemplateOutlet]=\"loadingState\"></ng-container>\n\n    <ng-template #categoryContent>\n      <ng-container [ngSwitch]=\"type\">\n        <ng-container *ngSwitchCase=\"'multiSelect'\">\n          <qd-filter-form-items\n            *ngIf=\"filter\"\n            [inputFilterValue]=\"filterCategoryValue$ | async\"\n            (filterValueChange)=\"changeValue($event)\"\n            [data-test-id]=\"testId\"\n          ></qd-filter-form-items>\n\n          <div class=\"qd-filter__category-layer-items\">\n            <ng-container\n              *ngFor=\"let entry of selectedDropdownEntries; trackBy: trackByItem\"\n              [ngTemplateOutlet]=\"multiSelectItem\"\n              [ngTemplateOutletContext]=\"{ item: entry.item, itemIndex: entry.itemIndex }\"\n            ></ng-container>\n\n            <div\n              *ngIf=\"showSelectedSeparator\"\n              class=\"qd-filter__category-layer-separator\"\n              [attr.data-test-id]=\"testId + '-selected-separator'\"\n            ></div>\n\n            <ng-container\n              *ngFor=\"let entry of unselectedDropdownEntries; trackBy: trackByItem\"\n              [ngTemplateOutlet]=\"multiSelectItem\"\n              [ngTemplateOutletContext]=\"{ item: entry.item, itemIndex: entry.itemIndex }\"\n            ></ng-container>\n\n            <ng-container *ngIf=\"hasNoVisibleItems\" [ngTemplateOutlet]=\"emptyState\"></ng-container>\n          </div>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'singleSelect'\">\n          <qd-filter-form-items\n            *ngIf=\"filter\"\n            [inputFilterValue]=\"filterCategoryValue$ | async\"\n            (filterValueChange)=\"changeValue($event)\"\n            [data-test-id]=\"testId\"\n          ></qd-filter-form-items>\n\n          <div class=\"qd-filter__category-layer-items\">\n            <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n              <qd-filter-item-single-select\n                *ngIf=\"!item.hidden\"\n                [categoryIndex]=\"categoryIndex\"\n                [itemIndex]=\"itemIndex\"\n                (closeEventEmitter)=\"closeLayer()\"\n                [filterId]=\"filterId\"\n                [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n              >\n              </qd-filter-item-single-select>\n            </ng-container>\n\n            <ng-container *ngIf=\"hasNoVisibleItems\" [ngTemplateOutlet]=\"emptyState\"></ng-container>\n          </div>\n        </ng-container>\n      </ng-container>\n    </ng-template>\n  </div>\n</ng-template>\n\n<ng-template #emptyState>\n  <p class=\"qd-filter__category-layer-empty\" [attr.data-test-id]=\"testId + '-no-results'\">\n    {{ \"i18n.qd.filter.noResults\" | translate }}\n  </p>\n</ng-template>\n\n<ng-template #loadingState>\n  <p class=\"qd-filter__category-layer-loading\" [attr.data-test-id]=\"testId + '-items-loading'\">\n    {{ \"i18n.qd.filter.loading\" | translate }}\n  </p>\n</ng-template>\n\n<ng-template #multiSelectItem let-item=\"item\" let-itemIndex=\"itemIndex\">\n  <qd-filter-item-multi-select\n    *ngIf=\"!item.hidden\"\n    [categoryIndex]=\"categoryIndex\"\n    [itemIndex]=\"itemIndex\"\n    [filterId]=\"filterId\"\n    [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n  ></qd-filter-item-multi-select>\n</ng-template>\n\n<ng-template #SelectedChip>\n  <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n    <!-- TODO: Add tooltip-->\n    <qd-chip\n      *ngIf=\"item.active\"\n      [state]=\"'filter'\"\n      [close]=\"true\"\n      (closeClickEmitter)=\"close($event)\"\n      [data]=\"itemIndex\"\n      [data-test-id]=\"testId + '-selected-chip-' + item.item\"\n      >{{ item.i18n | translate }}</qd-chip\n    >\n  </ng-container>\n</ng-template>\n", styles: ["::ng-deep .qd-filter__category-layer{position:relative;display:flex;overflow:hidden;min-width:16.25rem;max-width:56.25rem;height:100%;flex-direction:column;padding:0;border:.0625rem solid rgb(151,151,151);background:#fff;box-shadow:#d5d5d5 .125rem .25rem .4375rem}::ng-deep .qd-filter__category-layer .qd-filter-form-items__filter{flex-shrink:0;margin-bottom:0}::ng-deep .qd-filter__category-layer .qd-checkbox__label{display:flex;height:2.5rem}::ng-deep .qd-filter__category-layer .qd-checkbox__indicator,::ng-deep .qd-filter__category-layer .qd-radio-buttons__indicator{transform:translateY(-.0625rem)}::ng-deep .qd-filter__category-layer-items{flex:1;overflow-y:auto}::ng-deep .qd-filter__category-layer-separator{height:.0625rem;flex-shrink:0;background:#d5d5d5}::ng-deep .qd-filter__category-layer-empty,::ng-deep .qd-filter__category-layer-loading{padding:0 .9375rem;margin:0;color:#757575;font-size:.875rem;line-height:2.5rem}::ng-deep .qd-filter__category-layer-container{position:relative}::ng-deep .qd-filter__category-layer-close{position:absolute;z-index:1;top:.5rem;right:1rem;color:#757575;cursor:pointer}::ng-deep .qd-filter__category-layer-close:before{position:absolute;content:\"\";inset:-.5rem}::ng-deep .qd-filter__category-layer-close:hover,::ng-deep .qd-filter__category-layer-close:focus{color:#171717}\n"] }]
         }], propDecorators: { filterId: [{
                 type: Input
             }], categoryIndex: [{
@@ -23627,7 +23810,7 @@ class QdSearchComponent {
         return this.configData.emitEmptySearch ?? !!this.configData.clearable;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdSearchComponent, isStandalone: false, selector: "qd-search", inputs: { configData: "configData" }, host: { properties: { "class.hidden": "!hasConfig" }, classAttribute: "qd-search" }, providers: [QdSearchService, QdSearchRouterConnectorService], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"hasConfig\">\n  <div class=\"search-field\">\n    <qd-dropdown\n      *ngIf=\"preSelectedEnabled\"\n      class=\"preselect\"\n      [(value)]=\"preSelect\"\n      [config]=\"dropdownConfig\"\n    ></qd-dropdown>\n\n    <qd-input\n      class=\"search-input\"\n      [(value)]=\"search\"\n      [config]=\"inputConfig\"\n      (keydown.enter)=\"startSearch()\"\n      (clickClear)=\"handleDelete()\"\n      data-test-id=\"search-input\"\n    ></qd-input>\n    <button\n      type=\"button\"\n      qdIconButton\n      qdStopPropagation\n      data-test-id=\"search-button\"\n      class=\"search-button\"\n      (click)=\"startSearch()\"\n      [attr.aria-label]=\"'i18n.qd.container.toolbar.search' | translate\"\n    >\n      <qd-icon [icon]=\"'magnifier'\"></qd-icon>\n    </button>\n  </div>\n\n  <qd-icon\n    *ngIf=\"hasAdditionalInfo\"\n    icon=\"circleInfo\"\n    class=\"additional-info\"\n    qdTooltipOnClick\n    [qdTooltipContent]=\"configData.additionalInfo.content\"\n  ></qd-icon>\n</ng-container>\n", styles: [".qd-search{position:relative;display:flex;height:2.25rem}.qd-search.hidden{display:none}.qd-search .search-field{position:relative;display:flex;flex-wrap:nowrap}@media (max-width: 959.98px){.qd-search .search-field,.qd-search .search-field .search-input{width:100%}}.qd-search .preselect{display:flex;height:2.25rem}.qd-search .preselect .qd-dropdown__wrapper{height:2.25rem;margin-bottom:0}.qd-search .preselect .qd-dropdown__wrapper .qd-dropdown__box{background:#e5e5e5;color:#171717;font-size:.8125rem}.qd-search .search-input{display:flex;overflow:hidden;width:16.25rem;margin:0}.qd-search .search-input .qd-form-label,.qd-search .search-input .qd-form-hint{display:none;margin:0}.qd-search .search-input .qd-input-input{padding-right:1.25rem;margin:0!important}.qd-search .search-input .qd-input-input .qd-input-clearable-icon{margin-right:1.75rem!important}.qd-search .search-button{position:absolute;top:0;right:0;width:1.875rem;height:2.25rem;padding:0!important;padding-right:.375rem!important;padding-left:.375rem!important;margin:0!important;background:none}.qd-search .search-button:hover,.qd-search .search-button:focus,.qd-search .search-button:active{background:none}.qd-search .search-button .qd-icon{color:#979797!important;font-size:1.125rem!important;line-height:2.25rem;transform:translate(-.125rem,.0625rem)}.qd-search .search-button .qd-icon:hover,.qd-search .search-button .qd-icon:focus,.qd-search .search-button .qd-icon:active{color:#171717!important}.qd-search .additional-info{align-self:center;padding:0 .375rem 0 0;margin-right:-.375rem;margin-left:.5rem;color:#069;cursor:pointer;font-size:1.3125rem;line-height:2.25rem}.qd-search .additional-info:hover,.qd-search .additional-info:focus,.qd-search .additional-info:active{color:#14516f}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconButtonComponent, selector: "button[qdIconButton], a[qdIconButton], button[qd-icon-button]", inputs: ["color", "data-test-id"] }, { 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: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdTooltipOnClickDirective, selector: "[qdTooltipOnClick]", inputs: ["qdTooltipContent"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdSearchComponent, isStandalone: false, selector: "qd-search", inputs: { configData: "configData" }, host: { properties: { "class.hidden": "!hasConfig" }, classAttribute: "qd-search" }, providers: [QdSearchService, QdSearchRouterConnectorService], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"hasConfig\">\n  <div class=\"search-field\">\n    <qd-dropdown\n      *ngIf=\"preSelectedEnabled\"\n      class=\"preselect\"\n      [(value)]=\"preSelect\"\n      [config]=\"dropdownConfig\"\n    ></qd-dropdown>\n\n    <qd-input\n      class=\"search-input\"\n      [(value)]=\"search\"\n      [config]=\"inputConfig\"\n      (keydown.enter)=\"startSearch()\"\n      (clickClear)=\"handleDelete()\"\n      data-test-id=\"search-input\"\n    ></qd-input>\n    <button\n      type=\"button\"\n      qdIconButton\n      qdStopPropagation\n      data-test-id=\"search-button\"\n      class=\"search-button\"\n      (click)=\"startSearch()\"\n      [attr.aria-label]=\"'i18n.qd.container.toolbar.search' | translate\"\n    >\n      <qd-icon [icon]=\"'magnifier'\"></qd-icon>\n    </button>\n  </div>\n\n  <qd-icon\n    *ngIf=\"hasAdditionalInfo\"\n    icon=\"circleInfo\"\n    class=\"additional-info\"\n    qdTooltipOnClick\n    [qdTooltipContent]=\"configData.additionalInfo.content\"\n  ></qd-icon>\n</ng-container>\n", styles: [".qd-search{position:relative;display:flex;height:2.25rem}.qd-search.hidden{display:none}.qd-search .search-field{position:relative;display:flex;flex-wrap:nowrap}@media (max-width: 959.98px){.qd-search .search-field,.qd-search .search-field .search-input{width:100%}}.qd-search .preselect{display:flex;height:2.25rem}.qd-search .preselect .qd-dropdown__wrapper{height:2.25rem;margin-bottom:0}.qd-search .preselect .qd-dropdown__wrapper .qd-dropdown__box{background:#e5e5e5;color:#171717;font-size:.8125rem}.qd-search .search-input{display:flex;overflow:hidden;width:16.25rem;margin:0}.qd-search .search-input .qd-form-label,.qd-search .search-input .qd-form-hint{display:none;margin:0}.qd-search .search-input .qd-input-input{padding-right:1.25rem;margin:0!important}.qd-search .search-input .qd-input-input .qd-input-clearable-icon{margin-right:1.75rem!important}.qd-search .search-button{position:absolute;top:0;right:0;width:1.875rem;height:2.25rem;padding:0!important;padding-right:.375rem!important;padding-left:.375rem!important;margin:0!important;background:none}.qd-search .search-button:hover,.qd-search .search-button:focus,.qd-search .search-button:active{background:none}.qd-search .search-button .qd-icon{color:#979797!important;font-size:1.125rem!important;line-height:2.25rem;transform:translate(-.125rem,.0625rem)}.qd-search .search-button .qd-icon:hover,.qd-search .search-button .qd-icon:focus,.qd-search .search-button .qd-icon:active{color:#171717!important}.qd-search .additional-info{align-self:center;padding:0 .375rem 0 0;margin-right:-.375rem;margin-left:.5rem;color:#069;cursor:pointer;font-size:1.3125rem;line-height:2.25rem}.qd-search .additional-info:hover,.qd-search .additional-info:focus,.qd-search .additional-info:active{color:#14516f}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconButtonComponent, selector: "button[qdIconButton], a[qdIconButton], button[qd-icon-button]", inputs: ["color", "data-test-id"] }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "dropdownOpened", "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: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdTooltipOnClickDirective, selector: "[qdTooltipOnClick]", inputs: ["qdTooltipContent"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdSearchComponent, decorators: [{
             type: Component,
@@ -28284,6 +28467,7 @@ class QdTableModule {
             TranslateModule, i1$1.StoreFeatureModule, QdButtonModule,
             QdChipModule,
             QdDataFacetsModule,
+            QdDialogModule,
             QdIconModule,
             QdPopoverModule,
             QdStatusIndicatorModule,
@@ -28296,6 +28480,7 @@ class QdTableModule {
             QdButtonModule,
             QdChipModule,
             QdDataFacetsModule,
+            QdDialogModule,
             QdIconModule,
             QdPopoverModule,
             QdStatusIndicatorModule,
@@ -28313,6 +28498,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         QdButtonModule,
                         QdChipModule,
                         QdDataFacetsModule,
+                        QdDialogModule,
                         QdIconModule,
                         QdPopoverModule,
                         QdStatusIndicatorModule,
@@ -28718,7 +28904,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,
@@ -29002,8 +29188,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);
@@ -29011,7 +29197,9 @@ class QdPageCommitActionExecutor {
                 result$ = handlerResult;
         });
         const applySuccess = () => {
-            formGroupManager.setFormGroupsSnapshot(captured);
+            formGroupManager.updateSavedSnapshotFromValues(captured);
+            formGroupManager.startAdoptingFrameworkRebuild();
+            scheduleFrameworkRebuildStop?.();
             navigationInterceptor.executeWithBypass(() => {
                 try {
                     onAfterSnapshot?.();
@@ -29055,136 +29243,173 @@ 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.
+ * - **New keys need no window** — a control added under a key the snapshot does not know yet is
+ *   folded in right away, as long as it is pristine. So a conditionally shown empty field never
+ *   counts as an unsaved change. Only replacements of already known controls need the window.
+ *
+ * #### 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)}`);
             }
@@ -29192,15 +29417,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);
@@ -29211,68 +29448,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) {
@@ -29288,6 +29628,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);
@@ -29305,6 +29651,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 });
 }
@@ -29333,7 +29692,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.
  */
@@ -29483,6 +29842,7 @@ class QdPageObjectHeaderComponent {
     confirmationDialogService = inject(QdConfirmationDialogOpenerService);
     contextService = inject(QdContextService);
     resolverTriggerService = inject(QdResolverTriggerService);
+    injector = inject(Injector);
     pageStoreService = inject(QdPageStoreService);
     config;
     hasNavigation = false;
@@ -29603,7 +29963,7 @@ class QdPageObjectHeaderComponent {
             this.setupResolverTrigger();
         this.updateCustomActions();
         this.subscribeToMetadataStream();
-        this.formGroupManagerService.takeFormGroupsSnapshot();
+        this.formGroupManagerService.updateSavedSnapshotFromCurrentValues();
         this.initContexts();
     }
     ngOnChanges(changes) {
@@ -29628,7 +29988,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();
@@ -29658,7 +30018,8 @@ class QdPageObjectHeaderComponent {
             onAfterSnapshot: () => {
                 this.formGroupManagerService.cancelPendingAsyncValidation();
                 this.pageStoreService.toggleViewonly(true);
-            }
+            },
+            scheduleFrameworkRebuildStop: () => afterNextRender(() => this.formGroupManagerService.stopAdoptingFrameworkRebuild(), { injector: this.injector })
         });
     }
     changeContext(context, selection, event) {
@@ -29686,7 +30047,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() {
@@ -29877,7 +30238,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,
@@ -31464,6 +31825,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,
@@ -31660,7 +32022,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
+                })
             });
         };
     }
@@ -31772,6 +32137,11 @@ 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.
+ * - This only covers fills that happen right after registration, in the same task. Data that arrives later — e.g. an HTTP response — counts as a user change. For async loads, render the form only once the data is there (e.g. with `@if`).
+ *
  * ### **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).
@@ -31784,8 +32154,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>
@@ -31805,36 +32177,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 });
@@ -33767,7 +34139,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", "dropdownOpened", "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,
@@ -35000,7 +35372,7 @@ class QdQuickEditComponent {
         this.controlContainer.control.valueChanges.pipe(tap(() => this.changeDetectorRef.detectChanges())).subscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdQuickEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdQuickEditComponent, isStandalone: false, selector: "qd-quick-edit", inputs: { config: "config", data: "data", testId: ["data-test-id", "testId"] }, outputs: { formGroupChange: "formGroupChange", addNewClicked: "addNewClicked" }, viewQueries: [{ propertyName: "customForDirective", first: true, predicate: QdCustomForDirective, descendants: true }, { propertyName: "focusables", predicate: QdFocusableDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n  <button\n    qdButton\n    qdButtonGhost\n    icon=\"plus\"\n    (click)=\"createRow()\"\n    [data-test-id]=\"testId + '-button-add-new'\"\n    class=\"create-button-standalone\"\n  >\n    {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n  </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n  <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n    <div class=\"table-row\">\n      <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n        {{ header?.i18n | translate }}\n        <qd-tooltip-icon [tooltip]=\"header?.tooltip\"></qd-tooltip-icon>\n      </div>\n      <div class=\"table-cell actions-column\" *ngIf=\"hasVisibleActions$ | async\">\n        <button class=\"menu-button\">\n          <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n        </button>\n      </div>\n    </div>\n  </div>\n  <div class=\"table-body\">\n    <div\n      class=\"table-row\"\n      *qdCustomFor=\"let row of templateData; let rowIndex = index; toggler: togglerDrawing\"\n      [formGroupName]=\"rowIndex\"\n      [attr.data-test-id]=\"testId + '-row-' + rowIndex\"\n    >\n      <ng-container *ngFor=\"let column of visibleColumns; trackBy: trackByColumnName\">\n        <div class=\"table-cell\">\n          <qd-dropdown\n            [config]=\"{\n              filter: column.filter,\n              options: column.options,\n              placeholder: column.placeholder,\n              placeholderPrefix: column.placeholderPrefix,\n              viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n            }\"\n            [data-test-id]=\"column.name + rowIndex\"\n            *ngIf=\"column.type === 'enum'; else otherTypes\"\n            [dense]=\"true\"\n            [formControl]=\"$any(control.controls[rowIndex])?.controls[column.name]\"\n            qdFocusable\n            class=\"dropdown\"\n          >\n          </qd-dropdown>\n\n          <ng-template #otherTypes>\n            <qd-input\n              [data-test-id]=\"column.name + rowIndex\"\n              [formControlName]=\"column.name\"\n              *ngIf=\"column.type !== 'enum' && $any(control.controls[rowIndex])?.controls[column.name]\"\n              [config]=\"{\n                inputType: column.type === 'integer' ? 'number' : 'text',\n                viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n              }\"\n              qdFocusable\n            ></qd-input>\n          </ng-template>\n        </div>\n      </ng-container>\n      <td\n        *ngIf=\"hasVisibleActions$ | async\"\n        class=\"table-cell actions\"\n        [attr.data-test-id]=\"testId + '-cell-inline-actions'\"\n      >\n        <button\n          type=\"button\"\n          [qdPopoverOnClick]=\"menu\"\n          [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n          [qdPopoverStopPropagation]=\"true\"\n          class=\"menu-button\"\n          data-test=\"secondary-actions-toggler\"\n        >\n          <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n        </button>\n\n        <ng-template #menu>\n          <button\n            *ngFor=\"let secondaryAction of actions$ | async\"\n            class=\"secondary-actions\"\n            [ngClass]=\"{ disabled: isActionDisabled(secondaryAction, row) }\"\n            [attr.disabled]=\"isActionDisabled(secondaryAction, row) || null\"\n            (click)=\"handleSecondaryAction(secondaryAction, rowIndex)\"\n          >\n            {{ secondaryAction.label.i18n | translate }}\n          </button>\n          <button\n            *ngIf=\"canAdd && (viewonly$ | async) === false\"\n            class=\"secondary-actions\"\n            (click)=\"removeRow(rowIndex)\"\n          >\n            {{ \"i18n.qd.quick.edit.removeButtonLabel\" | translate }}\n          </button>\n        </ng-template>\n      </td>\n    </div>\n  </div>\n  <div class=\"empty-body\" *ngIf=\"config.emptyStateView && !config.emptyStateView.disabled && templateData.length === 0\">\n    <p>{{ config.emptyStateView.i18n | translate }}</p>\n  </div>\n</div>\n", styles: [".table{display:flex;width:100%;flex-direction:column;margin:1.25rem auto;background-color:#fff;font-size:.875rem}.table ::ng-deep .qd-input-input{margin-bottom:0!important}.table-header .table-row{padding-top:.125rem;padding-bottom:.125rem;background-color:#e5e5e5;font-weight:700}.table-header .table-row .actions-column{border-right:none;visibility:hidden}.table-header,.table-body{display:flex;flex-direction:column}.table-row{display:flex;flex-direction:row;padding:.25rem 1rem;border-bottom:.0625rem solid rgb(213,213,213);gap:1rem}.table-row ::ng-deep qd-form-label{display:none!important}.table-row ::ng-deep qd-input{min-width:0;margin-bottom:0!important}.table-body .table-row:hover{background-color:#f5f5f5}.table-cell{display:flex;min-width:0;height:37px;flex:1;align-items:center;text-align:left}.table-cell:has(.qd-input-error),.table-cell:has(.qd-dropdown-error){height:auto;align-items:flex-start}.table-cell:has(.qd-input-character-counter){height:auto;align-items:flex-start}.table-cell:has(.qd-input-character-counter) ::ng-deep qd-input{position:relative}.table-cell:has(.qd-input-character-counter) ::ng-deep qd-input .qd-input-character-counter{position:absolute;right:.25rem;bottom:.125rem;font-size:.625rem;line-height:1;pointer-events:none}.table-cell.actions,.table-cell.actions-column{min-width:auto;flex:0 0 auto}.table-row:last-child{border-bottom:none}.table-cell:last-child{border-right:none}.editable-actions{display:flex;justify-content:flex-end;margin-right:.625rem;gap:.625rem}.menu-button{display:flex;padding:0 .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem;vertical-align:middle}.menu-button:hover,.menu-button:focus{color:#000;outline:0!important}.secondary-actions{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.secondary-actions:hover{background-color:#f2f7fa}.secondary-actions.disabled{color:#b4b4b4;cursor:not-allowed}.secondary-actions.disabled:hover{background-color:#fff0}.dropdown{width:100%;min-width:0}.empty-body{padding:1.5rem;background:#fff}.empty-body p{margin:0 0 .5rem}\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: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "directive", type: QdFocusableDirective, selector: "[qdFocusable]" }, { kind: "component", type: QdTooltipIconComponent, selector: "qd-tooltip-icon", inputs: ["tooltip"] }, { kind: "directive", type: QdCustomForDirective, selector: "[qdCustomFor]", inputs: ["qdCustomForOf", "qdCustomForToggler"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdQuickEditComponent, isStandalone: false, selector: "qd-quick-edit", inputs: { config: "config", data: "data", testId: ["data-test-id", "testId"] }, outputs: { formGroupChange: "formGroupChange", addNewClicked: "addNewClicked" }, viewQueries: [{ propertyName: "customForDirective", first: true, predicate: QdCustomForDirective, descendants: true }, { propertyName: "focusables", predicate: QdFocusableDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n  <button\n    qdButton\n    qdButtonGhost\n    icon=\"plus\"\n    (click)=\"createRow()\"\n    [data-test-id]=\"testId + '-button-add-new'\"\n    class=\"create-button-standalone\"\n  >\n    {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n  </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n  <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n    <div class=\"table-row\">\n      <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n        {{ header?.i18n | translate }}\n        <qd-tooltip-icon [tooltip]=\"header?.tooltip\"></qd-tooltip-icon>\n      </div>\n      <div class=\"table-cell actions-column\" *ngIf=\"hasVisibleActions$ | async\">\n        <button class=\"menu-button\">\n          <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n        </button>\n      </div>\n    </div>\n  </div>\n  <div class=\"table-body\">\n    <div\n      class=\"table-row\"\n      *qdCustomFor=\"let row of templateData; let rowIndex = index; toggler: togglerDrawing\"\n      [formGroupName]=\"rowIndex\"\n      [attr.data-test-id]=\"testId + '-row-' + rowIndex\"\n    >\n      <ng-container *ngFor=\"let column of visibleColumns; trackBy: trackByColumnName\">\n        <div class=\"table-cell\">\n          <qd-dropdown\n            [config]=\"{\n              filter: column.filter,\n              options: column.options,\n              placeholder: column.placeholder,\n              placeholderPrefix: column.placeholderPrefix,\n              viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n            }\"\n            [data-test-id]=\"column.name + rowIndex\"\n            *ngIf=\"column.type === 'enum'; else otherTypes\"\n            [dense]=\"true\"\n            [formControl]=\"$any(control.controls[rowIndex])?.controls[column.name]\"\n            qdFocusable\n            class=\"dropdown\"\n          >\n          </qd-dropdown>\n\n          <ng-template #otherTypes>\n            <qd-input\n              [data-test-id]=\"column.name + rowIndex\"\n              [formControlName]=\"column.name\"\n              *ngIf=\"column.type !== 'enum' && $any(control.controls[rowIndex])?.controls[column.name]\"\n              [config]=\"{\n                inputType: column.type === 'integer' ? 'number' : 'text',\n                viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n              }\"\n              qdFocusable\n            ></qd-input>\n          </ng-template>\n        </div>\n      </ng-container>\n      <td\n        *ngIf=\"hasVisibleActions$ | async\"\n        class=\"table-cell actions\"\n        [attr.data-test-id]=\"testId + '-cell-inline-actions'\"\n      >\n        <button\n          type=\"button\"\n          [qdPopoverOnClick]=\"menu\"\n          [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n          [qdPopoverStopPropagation]=\"true\"\n          class=\"menu-button\"\n          data-test=\"secondary-actions-toggler\"\n        >\n          <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n        </button>\n\n        <ng-template #menu>\n          <button\n            *ngFor=\"let secondaryAction of actions$ | async\"\n            class=\"secondary-actions\"\n            [ngClass]=\"{ disabled: isActionDisabled(secondaryAction, row) }\"\n            [attr.disabled]=\"isActionDisabled(secondaryAction, row) || null\"\n            (click)=\"handleSecondaryAction(secondaryAction, rowIndex)\"\n          >\n            {{ secondaryAction.label.i18n | translate }}\n          </button>\n          <button\n            *ngIf=\"canAdd && (viewonly$ | async) === false\"\n            class=\"secondary-actions\"\n            (click)=\"removeRow(rowIndex)\"\n          >\n            {{ \"i18n.qd.quick.edit.removeButtonLabel\" | translate }}\n          </button>\n        </ng-template>\n      </td>\n    </div>\n  </div>\n  <div class=\"empty-body\" *ngIf=\"config.emptyStateView && !config.emptyStateView.disabled && templateData.length === 0\">\n    <p>{{ config.emptyStateView.i18n | translate }}</p>\n  </div>\n</div>\n", styles: [".table{display:flex;width:100%;flex-direction:column;margin:1.25rem auto;background-color:#fff;font-size:.875rem}.table ::ng-deep .qd-input-input{margin-bottom:0!important}.table-header .table-row{padding-top:.125rem;padding-bottom:.125rem;background-color:#e5e5e5;font-weight:700}.table-header .table-row .actions-column{border-right:none;visibility:hidden}.table-header,.table-body{display:flex;flex-direction:column}.table-row{display:flex;flex-direction:row;padding:.25rem 1rem;border-bottom:.0625rem solid rgb(213,213,213);gap:1rem}.table-row ::ng-deep qd-form-label{display:none!important}.table-row ::ng-deep qd-input{min-width:0;margin-bottom:0!important}.table-body .table-row:hover{background-color:#f5f5f5}.table-cell{display:flex;min-width:0;height:37px;flex:1;align-items:center;text-align:left}.table-cell:has(.qd-input-error),.table-cell:has(.qd-dropdown-error){height:auto;align-items:flex-start}.table-cell:has(.qd-input-character-counter){height:auto;align-items:flex-start}.table-cell:has(.qd-input-character-counter) ::ng-deep qd-input{position:relative}.table-cell:has(.qd-input-character-counter) ::ng-deep qd-input .qd-input-character-counter{position:absolute;right:.25rem;bottom:.125rem;font-size:.625rem;line-height:1;pointer-events:none}.table-cell.actions,.table-cell.actions-column{min-width:auto;flex:0 0 auto}.table-row:last-child{border-bottom:none}.table-cell:last-child{border-right:none}.editable-actions{display:flex;justify-content:flex-end;margin-right:.625rem;gap:.625rem}.menu-button{display:flex;padding:0 .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem;vertical-align:middle}.menu-button:hover,.menu-button:focus{color:#000;outline:0!important}.secondary-actions{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.secondary-actions:hover{background-color:#f2f7fa}.secondary-actions.disabled{color:#b4b4b4;cursor:not-allowed}.secondary-actions.disabled:hover{background-color:#fff0}.dropdown{width:100%;min-width:0}.empty-body{padding:1.5rem;background:#fff}.empty-body p{margin:0 0 .5rem}\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: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "dropdownOpened", "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: "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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "directive", type: QdFocusableDirective, selector: "[qdFocusable]" }, { kind: "component", type: QdTooltipIconComponent, selector: "qd-tooltip-icon", inputs: ["tooltip"] }, { kind: "directive", type: QdCustomForDirective, selector: "[qdCustomFor]", inputs: ["qdCustomForOf", "qdCustomForToggler"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdQuickEditComponent, decorators: [{
             type: Component,