@quadrel-enterprise-ui/framework 20.26.1 → 20.27.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, CUSTOM_ELEMENTS_SCHEMA, provideAppInitializer, TemplateRef } 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 * as i1 from '@angular/common';
 import { CommonModule, NgFor, NgIf, NgClass, NgTemplateOutlet, AsyncPipe } from '@angular/common';
-import { BehaviorSubject, pairwise, from, switchMap, map as map$1, Subject, throwError, of, ReplaySubject, merge, fromEvent, isObservable, NEVER, Observable, EMPTY, shareReplay, Subscription, distinctUntilChanged as distinctUntilChanged$1, debounce, timer, startWith as startWith$1, debounceTime as debounceTime$1, takeUntil as takeUntil$1, firstValueFrom, combineLatest, concat, take as take$1, delay, tap as tap$1, first, scan, queueScheduler, filter as filter$1, concatMap as concatMap$1, exhaustMap, finalize, forkJoin, delayWhen, combineLatestWith, withLatestFrom as withLatestFrom$1, async } from 'rxjs';
+import { BehaviorSubject, pairwise, from, switchMap, map as map$1, Subject, throwError, of, ReplaySubject, merge, fromEvent, isObservable, NEVER, Observable, EMPTY, shareReplay, Subscription, distinctUntilChanged as distinctUntilChanged$1, debounce, timer, startWith as startWith$1, debounceTime as debounceTime$1, takeUntil as takeUntil$1, firstValueFrom, combineLatest, concat, take as take$1, 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 { 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';
@@ -2739,6 +2739,7 @@ class QdMockFilterItemDateRangeComponent {
     get dataTestId() {
         return this.testId;
     }
+    open() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMockFilterItemDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdMockFilterItemDateRangeComponent, isStandalone: false, selector: "qd-filter-item-date-range", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", itemIndex: "itemIndex", timePickerConfig: "timePickerConfig", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.dataTestId" } }, ngImport: i0, template: 'filterId: {{filterId}}, categoryIndex: {{categoryIndex}}, itemIndex: {{itemIndex}}, timePickerConfig: {{timePickerConfig | json}}', isInline: true, dependencies: [{ kind: "pipe", type: i1.JsonPipe, name: "json" }] });
 }
@@ -2891,6 +2892,7 @@ class QdMockFilterService {
     postBodyWithEmptyDefaultSubjects = [];
     categoryByIdSubject = [];
     itemByIdSubject = [];
+    loadingSubject = [];
     initializeFilterState() {
         return;
     }
@@ -2903,6 +2905,8 @@ class QdMockFilterService {
     setFilterSelection = jest.fn();
     updateItem = jest.fn();
     setItemIsActive = jest.fn();
+    clearCategorySelection = jest.fn();
+    setItemsLoading = jest.fn();
     selectFilterDataById$ = jest.fn();
     getQueryString$(filterId) {
         return this.getQueryStringSubject(filterId).asObservable();
@@ -2925,6 +2929,11 @@ class QdMockFilterService {
     getItemById$(filterId) {
         return this.itemByIdSubject[filterId].asObservable();
     }
+    getItemsLoading$(filterId) {
+        if (!this.loadingSubject[filterId])
+            this.loadingSubject[filterId] = new BehaviorSubject(false);
+        return this.loadingSubject[filterId].asObservable();
+    }
     getQueryStringSubject(filterId) {
         if (!this.queryStringSubjects[filterId])
             this.queryStringSubjects[filterId] = new Subject();
@@ -2960,6 +2969,11 @@ class QdMockFilterService {
             this.itemByIdSubject[filterId] = new BehaviorSubject(null);
         this.itemByIdSubject[filterId].next(value);
     }
+    emitLoading(value, filterId) {
+        if (!this.loadingSubject[filterId])
+            this.loadingSubject[filterId] = new BehaviorSubject(false);
+        this.loadingSubject[filterId].next(value);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMockFilterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMockFilterService });
 }
@@ -8128,6 +8142,20 @@ class QdPopoverOnClickDirective {
             this.runSizingAndOpen(popover);
         }));
     }
+    /**
+     * Re-aligns an open overlay with its origin element.
+     *
+     * The connected position is only recomputed on scroll/resize, not when a
+     * layout reflow moves the origin (e.g. a chip or action buttons appearing in
+     * the host). Call this after such a reflow to keep the overlay attached to the
+     * host. Deferred by one frame so the new layout is measured, and a no-op while
+     * the overlay is detached, so it stays cheap to call on discrete events.
+     */
+    updatePosition() {
+        if (!this.overlayRef?.hasAttached())
+            return;
+        requestAnimationFrame(() => this.overlayRef.updatePosition());
+    }
     close() {
         if (!this.overlayRef?.hasAttached())
             return;
@@ -8445,7 +8473,9 @@ class QdAutofocusDirective {
                 return;
             }
             element.focus();
-            this._blurHandler = () => void (this.autofocusService.isAutofocusActivated = false);
+            this._blurHandler = () => {
+                this.autofocusService.isAutofocusActivated = false;
+            };
             element.addEventListener('blur', this._blurHandler, { once: true });
         }, 0);
     }
@@ -9453,11 +9483,11 @@ class QdFilterFormItemsComponent {
         this.filterValueChange.emit($event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterFormItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterFormItemsComponent, isStandalone: false, selector: "qd-filter-form-items", inputs: { inputFilterValue: "inputFilterValue", testId: ["data-test-id", "testId"] }, outputs: { filterValueChange: "filterValueChange" }, host: { classAttribute: "qd-filter-form-items" }, ngImport: i0, template: "<qd-icon [icon]=\"'magnifier'\" class=\"qd-filter-form-items__filter-magnifier\"></qd-icon>\n\n<input\n  type=\"text\"\n  class=\"qd-filter-form-items__filter\"\n  [(ngModel)]=\"filterValue\"\n  (ngModelChange)=\"changeValue($event)\"\n  [attr.data-test-id]=\"testId + '-filter-items'\"\n  [qdAutofocus]=\"true\"\n  autocomplete=\"off\"\n/>\n", styles: [".qd-filter-form-items__filter{width:100%;height:2.25rem;padding:0 .75rem 0 2.375rem;border:none;border-bottom:.0625rem solid rgb(213,213,213);margin-bottom:.5rem;background:#fff;color:#171717}.qd-filter-form-items__filter:focus,.qd-filter-form-items__filter:hover,.qd-filter-form-items__filter:active{border:none;background:#f5f5f5;outline:none}.qd-filter-form-items__filter:hover,.qd-filter-form-items__filter:active{border-bottom:.125rem solid rgb(23,23,23)}.qd-filter-form-items__filter:focus{border-bottom:.125rem solid rgb(0,102,153)}.qd-filter-form-items__filter-magnifier{position:absolute;padding:.625rem 0 .625rem .9375rem}.qd-filter-form-items__filter-magnifier .qd-icon{color:#757575}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: QdAutofocusDirective, selector: "[qdAutofocus]", inputs: ["qdAutofocus"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterFormItemsComponent, isStandalone: false, selector: "qd-filter-form-items", inputs: { inputFilterValue: "inputFilterValue", testId: ["data-test-id", "testId"] }, outputs: { filterValueChange: "filterValueChange" }, host: { classAttribute: "qd-filter-form-items" }, ngImport: i0, template: "<qd-icon [icon]=\"'filter'\" class=\"qd-filter-form-items__filter-magnifier\"></qd-icon>\n\n<input\n  type=\"text\"\n  class=\"qd-filter-form-items__filter\"\n  [(ngModel)]=\"filterValue\"\n  (ngModelChange)=\"changeValue($event)\"\n  [attr.data-test-id]=\"testId + '-filter-items'\"\n  [qdAutofocus]=\"true\"\n  autocomplete=\"off\"\n/>\n", styles: [".qd-filter-form-items__filter{width:100%;height:2.25rem;padding:0 .75rem 0 2.375rem;border:none;border-bottom:.0625rem solid rgb(213,213,213);margin-bottom:.5rem;background:#fff;color:#171717}.qd-filter-form-items__filter:focus,.qd-filter-form-items__filter:hover,.qd-filter-form-items__filter:active{border:none;background:#f5f5f5;outline:none}.qd-filter-form-items__filter:hover,.qd-filter-form-items__filter:active{border-bottom:.125rem solid rgb(23,23,23)}.qd-filter-form-items__filter:focus{border-bottom:.125rem solid rgb(0,102,153)}.qd-filter-form-items__filter-magnifier{position:absolute;padding:.625rem 0 .625rem .9375rem}.qd-filter-form-items__filter-magnifier .qd-icon{color:#757575}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: QdAutofocusDirective, selector: "[qdAutofocus]", inputs: ["qdAutofocus"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterFormItemsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-filter-form-items', host: { class: 'qd-filter-form-items' }, standalone: false, template: "<qd-icon [icon]=\"'magnifier'\" class=\"qd-filter-form-items__filter-magnifier\"></qd-icon>\n\n<input\n  type=\"text\"\n  class=\"qd-filter-form-items__filter\"\n  [(ngModel)]=\"filterValue\"\n  (ngModelChange)=\"changeValue($event)\"\n  [attr.data-test-id]=\"testId + '-filter-items'\"\n  [qdAutofocus]=\"true\"\n  autocomplete=\"off\"\n/>\n", styles: [".qd-filter-form-items__filter{width:100%;height:2.25rem;padding:0 .75rem 0 2.375rem;border:none;border-bottom:.0625rem solid rgb(213,213,213);margin-bottom:.5rem;background:#fff;color:#171717}.qd-filter-form-items__filter:focus,.qd-filter-form-items__filter:hover,.qd-filter-form-items__filter:active{border:none;background:#f5f5f5;outline:none}.qd-filter-form-items__filter:hover,.qd-filter-form-items__filter:active{border-bottom:.125rem solid rgb(23,23,23)}.qd-filter-form-items__filter:focus{border-bottom:.125rem solid rgb(0,102,153)}.qd-filter-form-items__filter-magnifier{position:absolute;padding:.625rem 0 .625rem .9375rem}.qd-filter-form-items__filter-magnifier .qd-icon{color:#757575}\n"] }]
+            args: [{ selector: 'qd-filter-form-items', host: { class: 'qd-filter-form-items' }, standalone: false, template: "<qd-icon [icon]=\"'filter'\" class=\"qd-filter-form-items__filter-magnifier\"></qd-icon>\n\n<input\n  type=\"text\"\n  class=\"qd-filter-form-items__filter\"\n  [(ngModel)]=\"filterValue\"\n  (ngModelChange)=\"changeValue($event)\"\n  [attr.data-test-id]=\"testId + '-filter-items'\"\n  [qdAutofocus]=\"true\"\n  autocomplete=\"off\"\n/>\n", styles: [".qd-filter-form-items__filter{width:100%;height:2.25rem;padding:0 .75rem 0 2.375rem;border:none;border-bottom:.0625rem solid rgb(213,213,213);margin-bottom:.5rem;background:#fff;color:#171717}.qd-filter-form-items__filter:focus,.qd-filter-form-items__filter:hover,.qd-filter-form-items__filter:active{border:none;background:#f5f5f5;outline:none}.qd-filter-form-items__filter:hover,.qd-filter-form-items__filter:active{border-bottom:.125rem solid rgb(23,23,23)}.qd-filter-form-items__filter:focus{border-bottom:.125rem solid rgb(0,102,153)}.qd-filter-form-items__filter-magnifier{position:absolute;padding:.625rem 0 .625rem .9375rem}.qd-filter-form-items__filter-magnifier .qd-icon{color:#757575}\n"] }]
         }], propDecorators: { inputFilterValue: [{
                 type: Input
             }], testId: [{
@@ -12289,6 +12319,11 @@ class QdDatepickerComponent {
     setDisabledState(disabled) {
         this.disabled = disabled;
     }
+    open() {
+        if (this.disabled)
+            return;
+        this.popover?.open();
+    }
     handleUpdatedDate($rawValue) {
         const $event = this.extractInputStringValue($rawValue);
         if ($event === '') {
@@ -12524,7 +12559,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}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", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], 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]=\"{ 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", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDatepickerComponent, decorators: [{
             type: Component,
@@ -12539,7 +12574,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}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]=\"{ 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"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], formControlName: [{
@@ -20727,6 +20762,7 @@ const updateCategoryTranslation = createAction('[QdUi Filter] updateCategoryTran
 const setFilterSelection = createAction('[QdUi Filter] setFilterSelection', props());
 const setCategoryFilter = createAction('[QdUi Filter] setCategoryFilter', props());
 const resetCategoryFilter = createAction('[QdUi Filter] resetCategoryFilter', props());
+const clearCategorySelection = createAction('[QdUi Filter] clearCategorySelection', props());
 const QdFilterActions = {
     initFilterState,
     updateItem,
@@ -20737,7 +20773,8 @@ const QdFilterActions = {
     updateCategoryTranslation,
     setFilterSelection,
     setCategoryFilter,
-    resetCategoryFilter
+    resetCategoryFilter,
+    clearCategorySelection
 };
 
 function validateFilterSelection(filterSelection, filterCategories, selectionSource) {
@@ -20859,6 +20896,12 @@ const _filterReducer = createReducer(initialState$2, on(QdFilterActions.initFilt
         ...state,
         [filterId]: resetCategoryFilter$1(state[filterId], categoryIndex)
     };
+}), on(QdFilterActions.clearCategorySelection, (state, { filterId, categoryIndex }) => {
+    const newCategory = getNewCategory(state, filterId, categoryIndex);
+    newCategory.items.forEach((item) => {
+        item.active = false;
+    });
+    return updateStateWithNewCategory(state, filterId, categoryIndex, newCategory);
 }));
 function filterReducer(state, action) {
     return _filterReducer(state, action);
@@ -20988,6 +21031,7 @@ class QdFilterService {
     queryStringSubjects = [];
     filterUrlParameterSubjects = [];
     postBodySubjects = [];
+    itemsLoadingSubjects = {};
     getItems$(filterId, categoryIndex) {
         return this.store.select(QdFilterSelector.selectItems, {
             filterId,
@@ -21069,6 +21113,9 @@ class QdFilterService {
             categoryIndex
         });
     }
+    getItemsLoading$(filterId, categoryIndex) {
+        return this.getItemsLoadingSubject(filterId, categoryIndex).asObservable();
+    }
     getFilterCategoryValue$(filterId, categoryIndex) {
         return this.store.select(QdFilterSelector.selectFilterCategoryValue, {
             filterId,
@@ -21149,6 +21196,21 @@ class QdFilterService {
             categoryIndex
         }));
     }
+    clearCategorySelection(filterId, categoryIndex) {
+        this.store.dispatch(QdFilterActions.clearCategorySelection({
+            filterId,
+            categoryIndex
+        }));
+    }
+    setItemsLoading(filterId, categoryIndex, loading) {
+        this.getItemsLoadingSubject(filterId, categoryIndex).next(loading);
+    }
+    getItemsLoadingSubject(filterId, categoryIndex) {
+        const key = `${filterId}-${categoryIndex}`;
+        if (!this.itemsLoadingSubjects[key])
+            this.itemsLoadingSubjects[key] = new BehaviorSubject(false);
+        return this.itemsLoadingSubjects[key];
+    }
     getQueryStringSubject(filterId) {
         if (!this.queryStringSubjects[filterId])
             this.queryStringSubjects[filterId] = new ReplaySubject(1);
@@ -21205,11 +21267,11 @@ class QdFilterItemBooleanComponent {
         this.filterService.setItemIsActive(this.filterId, this.categoryIndex, this.itemIndex, value === this.itemData);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemBooleanComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemBooleanComponent, isStandalone: false, selector: "qd-filter-item-boolean", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", itemIndex: "itemIndex", i18n: "i18n", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.dataTestId" } }, ngImport: i0, template: "<qd-checkbox\n  [inputData]=\"{ value: itemData, i18n: i18n || '', disabled: false }\"\n  [value]=\"active ? itemData : null\"\n  (valueChange)=\"clickToggle($event)\"\n  qdRwdDisabled\n  [data-test-id]=\"testId\"\n  [attr.data-test-id]=\"testId + '-checkbox'\"\n></qd-checkbox>\n", styles: [":host{position:relative;display:flex;flex-wrap:wrap-reverse;margin:0 .75rem;line-height:2.125rem}:host ::ng-deep .qd-checkbox,:host ::ng-deep .qd-checkbox__label,:host ::ng-deep .qd-checkbox__caption{padding:0!important;border:0;margin:0!important}:host ::ng-deep .qd-form-label{color:#757575!important}:host ::ng-deep .qd-form-label:hover,:host ::ng-deep .qd-form-label:focus,:host ::ng-deep .qd-form-label:active{color:#171717!important}:host ::ng-deep .qd-checkbox__indicator{margin-right:.5rem!important}\n"], dependencies: [{ kind: "directive", type: QdRwdDisabledDirective, selector: "[qdRwdDisabled]" }, { kind: "component", type: QdCheckboxComponent, selector: "qd-checkbox", inputs: ["inputData", "value", "data-test-id", "disabled", "hasAutofocus"], outputs: ["valueChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemBooleanComponent, isStandalone: false, selector: "qd-filter-item-boolean", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", itemIndex: "itemIndex", i18n: "i18n", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.dataTestId" } }, ngImport: i0, template: "<qd-checkbox\n  [inputData]=\"{ value: itemData, i18n: i18n || '', disabled: false }\"\n  [value]=\"active ? itemData : null\"\n  (valueChange)=\"clickToggle($event)\"\n  qdRwdDisabled\n  [data-test-id]=\"testId\"\n  [attr.data-test-id]=\"testId + '-checkbox'\"\n></qd-checkbox>\n", styles: [":host{position:relative;display:flex;flex-wrap:wrap-reverse;margin:0 .75rem;line-height:2.125rem}:host ::ng-deep .qd-checkbox,:host ::ng-deep .qd-checkbox__label,:host ::ng-deep .qd-checkbox__caption{padding:0!important;border:0;margin:0!important}:host ::ng-deep .qd-checkbox__label{color:#757575!important}:host ::ng-deep .qd-checkbox__label:hover,:host ::ng-deep .qd-checkbox__label:focus,:host ::ng-deep .qd-checkbox__label:active{color:#171717!important}:host ::ng-deep .qd-checkbox__indicator{margin-right:.5rem!important}\n"], dependencies: [{ kind: "directive", type: QdRwdDisabledDirective, selector: "[qdRwdDisabled]" }, { kind: "component", type: QdCheckboxComponent, selector: "qd-checkbox", inputs: ["inputData", "value", "data-test-id", "disabled", "hasAutofocus"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemBooleanComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-filter-item-boolean', standalone: false, template: "<qd-checkbox\n  [inputData]=\"{ value: itemData, i18n: i18n || '', disabled: false }\"\n  [value]=\"active ? itemData : null\"\n  (valueChange)=\"clickToggle($event)\"\n  qdRwdDisabled\n  [data-test-id]=\"testId\"\n  [attr.data-test-id]=\"testId + '-checkbox'\"\n></qd-checkbox>\n", styles: [":host{position:relative;display:flex;flex-wrap:wrap-reverse;margin:0 .75rem;line-height:2.125rem}:host ::ng-deep .qd-checkbox,:host ::ng-deep .qd-checkbox__label,:host ::ng-deep .qd-checkbox__caption{padding:0!important;border:0;margin:0!important}:host ::ng-deep .qd-form-label{color:#757575!important}:host ::ng-deep .qd-form-label:hover,:host ::ng-deep .qd-form-label:focus,:host ::ng-deep .qd-form-label:active{color:#171717!important}:host ::ng-deep .qd-checkbox__indicator{margin-right:.5rem!important}\n"] }]
+            args: [{ selector: 'qd-filter-item-boolean', standalone: false, template: "<qd-checkbox\n  [inputData]=\"{ value: itemData, i18n: i18n || '', disabled: false }\"\n  [value]=\"active ? itemData : null\"\n  (valueChange)=\"clickToggle($event)\"\n  qdRwdDisabled\n  [data-test-id]=\"testId\"\n  [attr.data-test-id]=\"testId + '-checkbox'\"\n></qd-checkbox>\n", styles: [":host{position:relative;display:flex;flex-wrap:wrap-reverse;margin:0 .75rem;line-height:2.125rem}:host ::ng-deep .qd-checkbox,:host ::ng-deep .qd-checkbox__label,:host ::ng-deep .qd-checkbox__caption{padding:0!important;border:0;margin:0!important}:host ::ng-deep .qd-checkbox__label{color:#757575!important}:host ::ng-deep .qd-checkbox__label:hover,:host ::ng-deep .qd-checkbox__label:focus,:host ::ng-deep .qd-checkbox__label:active{color:#171717!important}:host ::ng-deep .qd-checkbox__indicator{margin-right:.5rem!important}\n"] }]
         }], propDecorators: { filterId: [{
                 type: Input
             }], categoryIndex: [{
@@ -21271,6 +21333,7 @@ class QdFilterItemFreeTextComponent {
     get value() {
         return (this.item && this.item.item) || '';
     }
+    inputValue = '';
     _destroyed$ = new Subject();
     ngOnInit() {
         this.filterService
@@ -21291,24 +21354,27 @@ class QdFilterItemFreeTextComponent {
         this._destroyed$.complete();
     }
     handleValueChange(value) {
-        if (value !== '') {
+        this.inputValue = value;
+        if (!this.isInstantFiltering && value !== '') {
             this.filterService.updateItem(this.filterId, this.categoryIndex, this.itemIndex, value);
         }
     }
     handleEnter($event) {
-        if (this.isInstantFiltering)
-            this.handleValueChange($event);
+        if (this.isInstantFiltering && $event !== '') {
+            this.filterService.updateItem(this.filterId, this.categoryIndex, this.itemIndex, $event);
+        }
         this.enterClick.emit();
+        this.inputValue = '';
     }
     handleReset() {
         this.filterService.updateItem(this.filterId, this.categoryIndex, this.itemIndex, '');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemFreeTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemFreeTextComponent, isStandalone: false, selector: "qd-filter-item-free-text", inputs: { filterId: "filterId", isInstantFiltering: "isInstantFiltering", categoryIndex: "categoryIndex", itemIndex: "itemIndex", testId: ["data-test-id", "testId"] }, outputs: { enterClick: "enterClick" }, host: { properties: { "attr.data-test-id": "this.dataTestId" }, classAttribute: "qd-filter__item-free-text" }, ngImport: i0, template: "<qd-input\n  [value]=\"item.item\"\n  (valueChange)=\"!isInstantFiltering ? handleValueChange($event) : null\"\n  (enterClick)=\"handleEnter($event)\"\n  [config]=\"{ placeholder: { i18n: i18n }, viewonly: false }\"\n  [data-test-id]=\"testId\"\n></qd-input>\n", styles: [":host ::ng-deep qd-input{width:10.25rem;max-width:12.5rem;height:2.125rem;margin-bottom:0!important}:host ::ng-deep qd-input .qd-form-label,:host ::ng-deep qd-input .qd-form-hint{display:none}:host ::ng-deep qd-input .qd-form-label,:host ::ng-deep qd-input .qd-input-input,:host ::ng-deep qd-input .qd-form-hint{margin-bottom:0!important}:host ::ng-deep qd-input .qd-input-input{height:2.125rem!important;border-color:transparent!important}:host ::ng-deep qd-input .qd-input-input input::placeholder{color:#757575!important}\n"], dependencies: [{ kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemFreeTextComponent, isStandalone: false, selector: "qd-filter-item-free-text", inputs: { filterId: "filterId", isInstantFiltering: "isInstantFiltering", categoryIndex: "categoryIndex", itemIndex: "itemIndex", testId: ["data-test-id", "testId"] }, outputs: { enterClick: "enterClick" }, host: { properties: { "attr.data-test-id": "this.dataTestId" }, classAttribute: "qd-filter__item-free-text" }, ngImport: i0, template: "<qd-input\n  [value]=\"inputValue\"\n  (valueChange)=\"handleValueChange($event)\"\n  (enterClick)=\"handleEnter($event)\"\n  [config]=\"{ placeholder: { i18n: i18n }, viewonly: false }\"\n  [data-test-id]=\"testId\"\n></qd-input>\n", styles: [":host ::ng-deep qd-input{width:10.25rem;max-width:12.5rem;height:2.125rem;margin-bottom:0!important}:host ::ng-deep qd-input .qd-form-label,:host ::ng-deep qd-input .qd-form-hint{display:none}:host ::ng-deep qd-input .qd-form-label,:host ::ng-deep qd-input .qd-input-input,:host ::ng-deep qd-input .qd-form-hint{margin-bottom:0!important}:host ::ng-deep qd-input .qd-input-input{height:2.125rem!important;border-color:transparent!important}:host ::ng-deep qd-input .qd-input-input input::placeholder{color:#757575!important}:host:hover ::ng-deep qd-input .qd-input-input input::placeholder{color:#171717!important}\n"], dependencies: [{ kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemFreeTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-filter-item-free-text', host: { class: 'qd-filter__item-free-text' }, standalone: false, template: "<qd-input\n  [value]=\"item.item\"\n  (valueChange)=\"!isInstantFiltering ? handleValueChange($event) : null\"\n  (enterClick)=\"handleEnter($event)\"\n  [config]=\"{ placeholder: { i18n: i18n }, viewonly: false }\"\n  [data-test-id]=\"testId\"\n></qd-input>\n", styles: [":host ::ng-deep qd-input{width:10.25rem;max-width:12.5rem;height:2.125rem;margin-bottom:0!important}:host ::ng-deep qd-input .qd-form-label,:host ::ng-deep qd-input .qd-form-hint{display:none}:host ::ng-deep qd-input .qd-form-label,:host ::ng-deep qd-input .qd-input-input,:host ::ng-deep qd-input .qd-form-hint{margin-bottom:0!important}:host ::ng-deep qd-input .qd-input-input{height:2.125rem!important;border-color:transparent!important}:host ::ng-deep qd-input .qd-input-input input::placeholder{color:#757575!important}\n"] }]
+            args: [{ selector: 'qd-filter-item-free-text', host: { class: 'qd-filter__item-free-text' }, standalone: false, template: "<qd-input\n  [value]=\"inputValue\"\n  (valueChange)=\"handleValueChange($event)\"\n  (enterClick)=\"handleEnter($event)\"\n  [config]=\"{ placeholder: { i18n: i18n }, viewonly: false }\"\n  [data-test-id]=\"testId\"\n></qd-input>\n", styles: [":host ::ng-deep qd-input{width:10.25rem;max-width:12.5rem;height:2.125rem;margin-bottom:0!important}:host ::ng-deep qd-input .qd-form-label,:host ::ng-deep qd-input .qd-form-hint{display:none}:host ::ng-deep qd-input .qd-form-label,:host ::ng-deep qd-input .qd-input-input,:host ::ng-deep qd-input .qd-form-hint{margin-bottom:0!important}:host ::ng-deep qd-input .qd-input-input{height:2.125rem!important;border-color:transparent!important}:host ::ng-deep qd-input .qd-input-input input::placeholder{color:#757575!important}:host:hover ::ng-deep qd-input .qd-input-input input::placeholder{color:#171717!important}\n"] }]
         }], propDecorators: { filterId: [{
                 type: Input
             }], isInstantFiltering: [{
@@ -21389,6 +21455,7 @@ class QdFilterItemDateComponent {
     get dataTestId() {
         return this.testId;
     }
+    datepicker;
     datepickerConfig = { viewonly: false };
     item;
     _destroyed$ = new Subject();
@@ -21407,6 +21474,9 @@ class QdFilterItemDateComponent {
     handleClickTimePlaceholder($event) {
         this.clickTimePlaceholder.emit($event);
     }
+    open() {
+        this.datepicker?.open();
+    }
     subscribeGetItem() {
         this.filterService
             .getItemById$(this.filterId, this.categoryIndex, this.itemIndex)
@@ -21414,7 +21484,7 @@ class QdFilterItemDateComponent {
             .subscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemDateComponent, isStandalone: false, selector: "qd-filter-item-date", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", itemIndex: "itemIndex", timePickerConfig: "timePickerConfig", testId: ["data-test-id", "testId"] }, outputs: { clickTimePlaceholder: "clickTimePlaceholder" }, host: { properties: { "attr.data-test-id": "this.dataTestId" }, classAttribute: "qd-filter__item-date" }, ngImport: i0, template: "<qd-datepicker\n  [(value)]=\"item\"\n  (valueChange)=\"handleDateChange($event)\"\n  (clickTimePlaceholder)=\"handleClickTimePlaceholder($event)\"\n  [hasCalendarOnly]=\"true\"\n  [config]=\"datepickerConfig\"\n></qd-datepicker>\n", styles: [":host qd-datepicker{padding-top:.125rem;margin-left:.25rem}:host ::ng-deep+.qd-chip.filter{margin-left:.1875rem!important}\n"], dependencies: [{ kind: "component", type: QdDatepickerComponent, selector: "qd-datepicker", inputs: ["config", "formControlName", "value", "hasCalendarOnly", "data-test-id"], outputs: ["valueChange", "clickTimePlaceholder", "clickHint", "clickReadonly", "clickViewonly"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemDateComponent, isStandalone: false, selector: "qd-filter-item-date", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", itemIndex: "itemIndex", timePickerConfig: "timePickerConfig", testId: ["data-test-id", "testId"] }, outputs: { clickTimePlaceholder: "clickTimePlaceholder" }, host: { properties: { "attr.data-test-id": "this.dataTestId" }, classAttribute: "qd-filter__item-date" }, viewQueries: [{ propertyName: "datepicker", first: true, predicate: QdDatepickerComponent, descendants: true }], ngImport: i0, template: "<qd-datepicker\n  [(value)]=\"item\"\n  (valueChange)=\"handleDateChange($event)\"\n  (clickTimePlaceholder)=\"handleClickTimePlaceholder($event)\"\n  [hasCalendarOnly]=\"true\"\n  [config]=\"datepickerConfig\"\n></qd-datepicker>\n", styles: [":host qd-datepicker{padding-top:.125rem;margin-left:.25rem}:host ::ng-deep+.qd-chip.filter{margin-left:.1875rem!important}\n"], dependencies: [{ kind: "component", type: QdDatepickerComponent, selector: "qd-datepicker", inputs: ["config", "formControlName", "value", "hasCalendarOnly", "data-test-id"], outputs: ["valueChange", "clickTimePlaceholder", "clickHint", "clickReadonly", "clickViewonly"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemDateComponent, decorators: [{
             type: Component,
@@ -21435,6 +21505,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             }], dataTestId: [{
                 type: HostBinding,
                 args: ['attr.data-test-id']
+            }], datepicker: [{
+                type: ViewChild,
+                args: [QdDatepickerComponent]
             }] } });
 
 // @ts-strict-ignore
@@ -21469,11 +21542,11 @@ class QdFilterItemDateCategoryComponent {
         this.item$ = this.filterService.getItemById$(this.filterId, this.categoryIndex, this.itemIndex);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemDateCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemDateCategoryComponent, isStandalone: false, selector: "qd-filter-category-date", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", timePickerConfig: "timePickerConfig", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-filter__category-date" }, ngImport: i0, template: "{{ this.i18n$ | async | translate }}\n{{ \"i18n.qd.filter.date.on\" | translate }}\n\n<qd-filter-item-date\n  [filterId]=\"filterId\"\n  [categoryIndex]=\"categoryIndex\"\n  [itemIndex]=\"itemIndex\"\n  [data-test-id]=\"testId + '-item'\"\n  [timePickerConfig]=\"timePickerConfig\"\n  (clickTimePlaceholder)=\"handleClickTimePlaceholder($event)\"\n></qd-filter-item-date>\n\n<qd-chip\n  *ngIf=\"(item$ | async)?.active && (item$ | async)?.item\"\n  [state]=\"'filter'\"\n  [close]=\"true\"\n  (closeClickEmitter)=\"removeItem($event)\"\n  [data]=\"itemIndex\"\n  [data-test-id]=\"testId + '-selected-chip-' + (item$ | async).item\"\n>\n  {{ (item$ | async).item | localeDate : !!timePickerConfig : timePlaceholderSelected | async }}\n</qd-chip>\n", styles: [":host{display:flex;align-items:center;padding-right:.75rem;padding-left:.75rem;color:#757575;line-height:2.125rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdFilterItemDateComponent, selector: "qd-filter-item-date", inputs: ["filterId", "categoryIndex", "itemIndex", "timePickerConfig", "data-test-id"], outputs: ["clickTimePlaceholder"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemDateCategoryComponent, isStandalone: false, selector: "qd-filter-category-date", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", timePickerConfig: "timePickerConfig", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-filter__category-date" }, ngImport: i0, template: "<span\n  class=\"qd-filter__date-label\"\n  (click)=\"dateItem.open(); $event.stopPropagation()\"\n  [attr.data-test-id]=\"testId + '-label'\"\n>\n  {{ this.i18n$ | async | translate }} {{ \"i18n.qd.filter.date.on\" | translate }}\n</span>\n\n<qd-filter-item-date\n  #dateItem\n  [filterId]=\"filterId\"\n  [categoryIndex]=\"categoryIndex\"\n  [itemIndex]=\"itemIndex\"\n  [data-test-id]=\"testId + '-item'\"\n  [timePickerConfig]=\"timePickerConfig\"\n  (clickTimePlaceholder)=\"handleClickTimePlaceholder($event)\"\n></qd-filter-item-date>\n\n<qd-chip\n  *ngIf=\"(item$ | async)?.active && (item$ | async)?.item\"\n  [state]=\"'filter'\"\n  [close]=\"true\"\n  (closeClickEmitter)=\"removeItem($event)\"\n  [data]=\"itemIndex\"\n  [data-test-id]=\"testId + '-selected-chip-' + (item$ | async).item\"\n>\n  {{ (item$ | async).item | localeDate : !!timePickerConfig : timePlaceholderSelected | async }}\n</qd-chip>\n", styles: [":host{display:flex;align-items:center;padding-right:.75rem;padding-left:.75rem;color:#757575;cursor:default;line-height:2.125rem}:host:hover{color:#171717}:host .qd-filter__date-label{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdFilterItemDateComponent, selector: "qd-filter-item-date", inputs: ["filterId", "categoryIndex", "itemIndex", "timePickerConfig", "data-test-id"], outputs: ["clickTimePlaceholder"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemDateCategoryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-filter-category-date', host: { class: 'qd-filter__category-date' }, standalone: false, template: "{{ this.i18n$ | async | translate }}\n{{ \"i18n.qd.filter.date.on\" | translate }}\n\n<qd-filter-item-date\n  [filterId]=\"filterId\"\n  [categoryIndex]=\"categoryIndex\"\n  [itemIndex]=\"itemIndex\"\n  [data-test-id]=\"testId + '-item'\"\n  [timePickerConfig]=\"timePickerConfig\"\n  (clickTimePlaceholder)=\"handleClickTimePlaceholder($event)\"\n></qd-filter-item-date>\n\n<qd-chip\n  *ngIf=\"(item$ | async)?.active && (item$ | async)?.item\"\n  [state]=\"'filter'\"\n  [close]=\"true\"\n  (closeClickEmitter)=\"removeItem($event)\"\n  [data]=\"itemIndex\"\n  [data-test-id]=\"testId + '-selected-chip-' + (item$ | async).item\"\n>\n  {{ (item$ | async).item | localeDate : !!timePickerConfig : timePlaceholderSelected | async }}\n</qd-chip>\n", styles: [":host{display:flex;align-items:center;padding-right:.75rem;padding-left:.75rem;color:#757575;line-height:2.125rem}\n"] }]
+            args: [{ selector: 'qd-filter-category-date', host: { class: 'qd-filter__category-date' }, standalone: false, template: "<span\n  class=\"qd-filter__date-label\"\n  (click)=\"dateItem.open(); $event.stopPropagation()\"\n  [attr.data-test-id]=\"testId + '-label'\"\n>\n  {{ this.i18n$ | async | translate }} {{ \"i18n.qd.filter.date.on\" | translate }}\n</span>\n\n<qd-filter-item-date\n  #dateItem\n  [filterId]=\"filterId\"\n  [categoryIndex]=\"categoryIndex\"\n  [itemIndex]=\"itemIndex\"\n  [data-test-id]=\"testId + '-item'\"\n  [timePickerConfig]=\"timePickerConfig\"\n  (clickTimePlaceholder)=\"handleClickTimePlaceholder($event)\"\n></qd-filter-item-date>\n\n<qd-chip\n  *ngIf=\"(item$ | async)?.active && (item$ | async)?.item\"\n  [state]=\"'filter'\"\n  [close]=\"true\"\n  (closeClickEmitter)=\"removeItem($event)\"\n  [data]=\"itemIndex\"\n  [data-test-id]=\"testId + '-selected-chip-' + (item$ | async).item\"\n>\n  {{ (item$ | async).item | localeDate : !!timePickerConfig : timePlaceholderSelected | async }}\n</qd-chip>\n", styles: [":host{display:flex;align-items:center;padding-right:.75rem;padding-left:.75rem;color:#757575;cursor:default;line-height:2.125rem}:host:hover{color:#171717}:host .qd-filter__date-label{cursor:pointer}\n"] }]
         }], propDecorators: { filterId: [{
                 type: Input
             }], categoryIndex: [{
@@ -21503,6 +21576,10 @@ class QdFilterItemDateRangeComponent {
     get dataTestId() {
         return this.testId;
     }
+    datepicker;
+    open() {
+        this.datepicker?.open();
+    }
     get minDate$() {
         return this.filterService.getMinDate$(this.filterId, this.categoryIndex, this.itemIndex);
     }
@@ -21556,7 +21633,7 @@ class QdFilterItemDateRangeComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemDateRangeComponent, isStandalone: false, selector: "qd-filter-item-date-range", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", itemIndex: "itemIndex", timePickerConfig: "timePickerConfig", testId: ["data-test-id", "testId"] }, outputs: { clickTimePlaceholder: "clickTimePlaceholder" }, host: { properties: { "attr.class": "this.itemClassName", "attr.data-test-id": "this.dataTestId" } }, ngImport: i0, template: "<qd-datepicker\n  [config]=\"config\"\n  [(value)]=\"item\"\n  (valueChange)=\"handleDateChange($event)\"\n  (clickTimePlaceholder)=\"handleClickTimePlaceholder($event)\"\n  [hasCalendarOnly]=\"true\"\n></qd-datepicker>\n", styles: [":host input{width:0!important;height:0!important;border:none!important}:host.qd-filter__item-date-range--0 ::ng-deep+.qd-chip.filter{margin-right:.25rem;margin-left:.1875rem!important}:host.qd-filter__item-date-range--1 ::ng-deep+.qd-chip.filter{margin-left:.1875rem!important}\n"], dependencies: [{ kind: "component", type: QdDatepickerComponent, selector: "qd-datepicker", inputs: ["config", "formControlName", "value", "hasCalendarOnly", "data-test-id"], outputs: ["valueChange", "clickTimePlaceholder", "clickHint", "clickReadonly", "clickViewonly"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemDateRangeComponent, isStandalone: false, selector: "qd-filter-item-date-range", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", itemIndex: "itemIndex", timePickerConfig: "timePickerConfig", testId: ["data-test-id", "testId"] }, outputs: { clickTimePlaceholder: "clickTimePlaceholder" }, host: { properties: { "attr.class": "this.itemClassName", "attr.data-test-id": "this.dataTestId" } }, viewQueries: [{ propertyName: "datepicker", first: true, predicate: QdDatepickerComponent, descendants: true }], ngImport: i0, template: "<qd-datepicker\n  [config]=\"config\"\n  [(value)]=\"item\"\n  (valueChange)=\"handleDateChange($event)\"\n  (clickTimePlaceholder)=\"handleClickTimePlaceholder($event)\"\n  [hasCalendarOnly]=\"true\"\n></qd-datepicker>\n", styles: [":host input{width:0!important;height:0!important;border:none!important}:host.qd-filter__item-date-range--0 ::ng-deep+.qd-chip.filter{margin-right:.25rem;margin-left:.1875rem!important}:host.qd-filter__item-date-range--1 ::ng-deep+.qd-chip.filter{margin-left:.1875rem!important}\n"], dependencies: [{ kind: "component", type: QdDatepickerComponent, selector: "qd-datepicker", inputs: ["config", "formControlName", "value", "hasCalendarOnly", "data-test-id"], outputs: ["valueChange", "clickTimePlaceholder", "clickHint", "clickReadonly", "clickViewonly"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemDateRangeComponent, decorators: [{
             type: Component,
@@ -21580,6 +21657,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             }], dataTestId: [{
                 type: HostBinding,
                 args: ['attr.data-test-id']
+            }], datepicker: [{
+                type: ViewChild,
+                args: [QdDatepickerComponent]
             }] } });
 
 // @ts-strict-ignore
@@ -21609,6 +21689,10 @@ class QdFilterItemDateRangeCategoryComponent {
             ? { ...this.timePickerConfig, label: { i18n: 'i18n.qd.filter.dateRange.end' } }
             : undefined;
     }
+    openItem(itemRef, event) {
+        itemRef.open();
+        event.stopPropagation();
+    }
     removeItem(itemIndex) {
         this.filterService.updateItem(this.filterId, this.categoryIndex, itemIndex, '');
         this.filterService.setItemIsActive(this.filterId, this.categoryIndex, itemIndex, false);
@@ -21628,11 +21712,11 @@ class QdFilterItemDateRangeCategoryComponent {
         this[targetMember] = this.filterService.getItemById$(this.filterId, this.categoryIndex, index);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemDateRangeCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemDateRangeCategoryComponent, isStandalone: false, selector: "qd-filter-category-date-range", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", testId: ["data-test-id", "testId"], timePickerConfig: "timePickerConfig" }, host: { classAttribute: "qd-filter__category-date-range" }, ngImport: i0, template: "{{ this.i18n$ | async | translate }}\n\n<span class=\"qd-filter__date-range__group\">\n  <span class=\"qd-filter__item-date-range__label\">{{ \"i18n.qd.filter.dateRange.from\" | translate }}</span>\n\n  <qd-filter-item-date-range\n    [filterId]=\"filterId\"\n    [categoryIndex]=\"categoryIndex\"\n    [itemIndex]=\"fromItemIndex\"\n    [data-test-id]=\"testId + '-item-date-from'\"\n    [timePickerConfig]=\"fromItemTimePickerConfig\"\n    (clickTimePlaceholder)=\"handleFromTimePlaceholderClicked($event)\"\n  ></qd-filter-item-date-range>\n\n  <qd-chip\n    *ngIf=\"(fromItem$ | async)?.active && (fromItem$ | async)?.item\"\n    [state]=\"'filter'\"\n    [close]=\"true\"\n    (closeClickEmitter)=\"removeItem($event)\"\n    [data]=\"fromItemIndex\"\n    [data-test-id]=\"testId + '-selected-chip-' + (fromItem$ | async).item\"\n  >\n    {{ (fromItem$ | async).item | localeDate : !!timePickerConfig : fromItemTimePlaceholderClicked | async }}\n  </qd-chip>\n</span>\n\n<span class=\"qd-filter__date-range__group\">\n  <span class=\"qd-filter__item-date-range__label\">{{ \"i18n.qd.filter.dateRange.until\" | translate }}</span>\n\n  <qd-filter-item-date-range\n    [filterId]=\"filterId\"\n    [categoryIndex]=\"categoryIndex\"\n    [itemIndex]=\"untilItemIndex\"\n    [data-test-id]=\"testId + '-item-date-until'\"\n    [timePickerConfig]=\"untilItemTimePickerConfig\"\n    (clickTimePlaceholder)=\"handleUntilTimePlaceholderClicked($event)\"\n  ></qd-filter-item-date-range>\n\n  <qd-chip\n    *ngIf=\"(untilItem$ | async)?.active && (untilItem$ | async)?.item\"\n    [state]=\"'filter'\"\n    [close]=\"true\"\n    (closeClickEmitter)=\"removeItem($event)\"\n    [data]=\"untilItemIndex\"\n    [data-test-id]=\"testId + '-selected-chip-' + (untilItem$ | async).item\"\n  >\n    {{ (untilItem$ | async).item | localeDate : !!timePickerConfig : untilItemTimePlaceholderClicked | async }}\n  </qd-chip>\n</span>\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;padding-right:.75rem;padding-left:.75rem;color:#757575;line-height:2.125rem}:host .qd-filter__item-date-range__label{margin-left:.25rem}:host .qd-filter__date-range__group{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdFilterItemDateRangeComponent, selector: "qd-filter-item-date-range", inputs: ["filterId", "categoryIndex", "itemIndex", "timePickerConfig", "data-test-id"], outputs: ["clickTimePlaceholder"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemDateRangeCategoryComponent, isStandalone: false, selector: "qd-filter-category-date-range", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", testId: ["data-test-id", "testId"], timePickerConfig: "timePickerConfig" }, host: { classAttribute: "qd-filter__category-date-range" }, ngImport: i0, template: "{{ this.i18n$ | async | translate }}\n\n<span class=\"qd-filter__date-range__group\">\n  <span class=\"qd-filter__item-date-range__label\" (click)=\"openItem(fromItemRef, $event)\">{{\n    \"i18n.qd.filter.dateRange.from\" | translate\n  }}</span>\n\n  <qd-filter-item-date-range\n    #fromItemRef\n    [filterId]=\"filterId\"\n    [categoryIndex]=\"categoryIndex\"\n    [itemIndex]=\"fromItemIndex\"\n    [data-test-id]=\"testId + '-item-date-from'\"\n    [timePickerConfig]=\"fromItemTimePickerConfig\"\n    (clickTimePlaceholder)=\"handleFromTimePlaceholderClicked($event)\"\n  ></qd-filter-item-date-range>\n\n  <qd-chip\n    *ngIf=\"(fromItem$ | async)?.active && (fromItem$ | async)?.item\"\n    [state]=\"'filter'\"\n    [close]=\"true\"\n    (closeClickEmitter)=\"removeItem($event)\"\n    [data]=\"fromItemIndex\"\n    [data-test-id]=\"testId + '-selected-chip-' + (fromItem$ | async).item\"\n  >\n    {{ (fromItem$ | async).item | localeDate : !!timePickerConfig : fromItemTimePlaceholderClicked | async }}\n  </qd-chip>\n</span>\n\n<span class=\"qd-filter__date-range__group\">\n  <span class=\"qd-filter__item-date-range__label\" (click)=\"openItem(untilItemRef, $event)\">{{\n    \"i18n.qd.filter.dateRange.until\" | translate\n  }}</span>\n\n  <qd-filter-item-date-range\n    #untilItemRef\n    [filterId]=\"filterId\"\n    [categoryIndex]=\"categoryIndex\"\n    [itemIndex]=\"untilItemIndex\"\n    [data-test-id]=\"testId + '-item-date-until'\"\n    [timePickerConfig]=\"untilItemTimePickerConfig\"\n    (clickTimePlaceholder)=\"handleUntilTimePlaceholderClicked($event)\"\n  ></qd-filter-item-date-range>\n\n  <qd-chip\n    *ngIf=\"(untilItem$ | async)?.active && (untilItem$ | async)?.item\"\n    [state]=\"'filter'\"\n    [close]=\"true\"\n    (closeClickEmitter)=\"removeItem($event)\"\n    [data]=\"untilItemIndex\"\n    [data-test-id]=\"testId + '-selected-chip-' + (untilItem$ | async).item\"\n  >\n    {{ (untilItem$ | async).item | localeDate : !!timePickerConfig : untilItemTimePlaceholderClicked | async }}\n  </qd-chip>\n</span>\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;padding-right:.75rem;padding-left:.75rem;color:#757575;cursor:default;line-height:2.125rem}:host:hover{color:#171717}:host .qd-filter__item-date-range__label{margin-left:.25rem;cursor:pointer}:host .qd-filter__date-range__group{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdFilterItemDateRangeComponent, selector: "qd-filter-item-date-range", inputs: ["filterId", "categoryIndex", "itemIndex", "timePickerConfig", "data-test-id"], outputs: ["clickTimePlaceholder"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemDateRangeCategoryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-filter-category-date-range', host: { class: 'qd-filter__category-date-range' }, standalone: false, template: "{{ this.i18n$ | async | translate }}\n\n<span class=\"qd-filter__date-range__group\">\n  <span class=\"qd-filter__item-date-range__label\">{{ \"i18n.qd.filter.dateRange.from\" | translate }}</span>\n\n  <qd-filter-item-date-range\n    [filterId]=\"filterId\"\n    [categoryIndex]=\"categoryIndex\"\n    [itemIndex]=\"fromItemIndex\"\n    [data-test-id]=\"testId + '-item-date-from'\"\n    [timePickerConfig]=\"fromItemTimePickerConfig\"\n    (clickTimePlaceholder)=\"handleFromTimePlaceholderClicked($event)\"\n  ></qd-filter-item-date-range>\n\n  <qd-chip\n    *ngIf=\"(fromItem$ | async)?.active && (fromItem$ | async)?.item\"\n    [state]=\"'filter'\"\n    [close]=\"true\"\n    (closeClickEmitter)=\"removeItem($event)\"\n    [data]=\"fromItemIndex\"\n    [data-test-id]=\"testId + '-selected-chip-' + (fromItem$ | async).item\"\n  >\n    {{ (fromItem$ | async).item | localeDate : !!timePickerConfig : fromItemTimePlaceholderClicked | async }}\n  </qd-chip>\n</span>\n\n<span class=\"qd-filter__date-range__group\">\n  <span class=\"qd-filter__item-date-range__label\">{{ \"i18n.qd.filter.dateRange.until\" | translate }}</span>\n\n  <qd-filter-item-date-range\n    [filterId]=\"filterId\"\n    [categoryIndex]=\"categoryIndex\"\n    [itemIndex]=\"untilItemIndex\"\n    [data-test-id]=\"testId + '-item-date-until'\"\n    [timePickerConfig]=\"untilItemTimePickerConfig\"\n    (clickTimePlaceholder)=\"handleUntilTimePlaceholderClicked($event)\"\n  ></qd-filter-item-date-range>\n\n  <qd-chip\n    *ngIf=\"(untilItem$ | async)?.active && (untilItem$ | async)?.item\"\n    [state]=\"'filter'\"\n    [close]=\"true\"\n    (closeClickEmitter)=\"removeItem($event)\"\n    [data]=\"untilItemIndex\"\n    [data-test-id]=\"testId + '-selected-chip-' + (untilItem$ | async).item\"\n  >\n    {{ (untilItem$ | async).item | localeDate : !!timePickerConfig : untilItemTimePlaceholderClicked | async }}\n  </qd-chip>\n</span>\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;padding-right:.75rem;padding-left:.75rem;color:#757575;line-height:2.125rem}:host .qd-filter__item-date-range__label{margin-left:.25rem}:host .qd-filter__date-range__group{display:flex;align-items:center}\n"] }]
+            args: [{ selector: 'qd-filter-category-date-range', host: { class: 'qd-filter__category-date-range' }, standalone: false, template: "{{ this.i18n$ | async | translate }}\n\n<span class=\"qd-filter__date-range__group\">\n  <span class=\"qd-filter__item-date-range__label\" (click)=\"openItem(fromItemRef, $event)\">{{\n    \"i18n.qd.filter.dateRange.from\" | translate\n  }}</span>\n\n  <qd-filter-item-date-range\n    #fromItemRef\n    [filterId]=\"filterId\"\n    [categoryIndex]=\"categoryIndex\"\n    [itemIndex]=\"fromItemIndex\"\n    [data-test-id]=\"testId + '-item-date-from'\"\n    [timePickerConfig]=\"fromItemTimePickerConfig\"\n    (clickTimePlaceholder)=\"handleFromTimePlaceholderClicked($event)\"\n  ></qd-filter-item-date-range>\n\n  <qd-chip\n    *ngIf=\"(fromItem$ | async)?.active && (fromItem$ | async)?.item\"\n    [state]=\"'filter'\"\n    [close]=\"true\"\n    (closeClickEmitter)=\"removeItem($event)\"\n    [data]=\"fromItemIndex\"\n    [data-test-id]=\"testId + '-selected-chip-' + (fromItem$ | async).item\"\n  >\n    {{ (fromItem$ | async).item | localeDate : !!timePickerConfig : fromItemTimePlaceholderClicked | async }}\n  </qd-chip>\n</span>\n\n<span class=\"qd-filter__date-range__group\">\n  <span class=\"qd-filter__item-date-range__label\" (click)=\"openItem(untilItemRef, $event)\">{{\n    \"i18n.qd.filter.dateRange.until\" | translate\n  }}</span>\n\n  <qd-filter-item-date-range\n    #untilItemRef\n    [filterId]=\"filterId\"\n    [categoryIndex]=\"categoryIndex\"\n    [itemIndex]=\"untilItemIndex\"\n    [data-test-id]=\"testId + '-item-date-until'\"\n    [timePickerConfig]=\"untilItemTimePickerConfig\"\n    (clickTimePlaceholder)=\"handleUntilTimePlaceholderClicked($event)\"\n  ></qd-filter-item-date-range>\n\n  <qd-chip\n    *ngIf=\"(untilItem$ | async)?.active && (untilItem$ | async)?.item\"\n    [state]=\"'filter'\"\n    [close]=\"true\"\n    (closeClickEmitter)=\"removeItem($event)\"\n    [data]=\"untilItemIndex\"\n    [data-test-id]=\"testId + '-selected-chip-' + (untilItem$ | async).item\"\n  >\n    {{ (untilItem$ | async).item | localeDate : !!timePickerConfig : untilItemTimePlaceholderClicked | async }}\n  </qd-chip>\n</span>\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;padding-right:.75rem;padding-left:.75rem;color:#757575;cursor:default;line-height:2.125rem}:host:hover{color:#171717}:host .qd-filter__item-date-range__label{margin-left:.25rem;cursor:pointer}:host .qd-filter__date-range__group{display:flex;align-items:center}\n"] }]
         }], propDecorators: { filterId: [{
                 type: Input
             }], categoryIndex: [{
@@ -21758,6 +21842,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 
 class QdFilterItemSelectCategoryComponent {
     filterService = inject(QdFilterService);
+    breakpointService = inject(QdBreakpointService);
+    isMobile$ = this.breakpointService.isViewportBelow('md');
     filterId;
     categoryIndex;
     testId;
@@ -21769,15 +21855,34 @@ class QdFilterItemSelectCategoryComponent {
     items;
     dependsOn = [];
     showSelectButton$;
+    itemsLoading$;
     positionStrategy = [
         { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: -1 },
         { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', weight: 0.8, offsetY: 1 }
     ];
     maxFlyoutHeight = 378;
     _destroyRef = inject(DestroyRef);
+    frozenSelectedKeys = [];
+    frozenUnselectedKeys = [];
     get closeButton() {
         return this.type === 'multiSelect';
     }
+    get activeItemCount() {
+        return this.items?.filter(item => item.active).length ?? 0;
+    }
+    get selectedDropdownEntries() {
+        return this.toEntries(this.frozenSelectedKeys);
+    }
+    get unselectedDropdownEntries() {
+        return this.toEntries(this.frozenUnselectedKeys);
+    }
+    get showSelectedSeparator() {
+        return (this.selectedDropdownEntries.some(entry => !entry.item.hidden) &&
+            this.unselectedDropdownEntries.some(entry => !entry.item.hidden));
+    }
+    get hasNoVisibleItems() {
+        return (this.items ?? []).every(item => item.hidden);
+    }
     get buttonClassName() {
         return `
       qd-filter__category-button
@@ -21796,9 +21901,11 @@ class QdFilterItemSelectCategoryComponent {
         this.initCategorySubscription();
         this.initItemsSubscription();
         this.initShowSelectButton();
+        this.itemsLoading$ = this.filterService.getItemsLoading$(this.filterId, this.categoryIndex);
     }
     onLayerOpened() {
         this.open = true;
+        this.freezeDropdownOrder();
     }
     onLayerClosed() {
         this.open = false;
@@ -21810,6 +21917,27 @@ class QdFilterItemSelectCategoryComponent {
         this.filterService.setItemIsActive(this.filterId, this.categoryIndex, itemIndex, false);
         this.filterService.resetCategoryFilter(this.filterId, this.categoryIndex);
     }
+    clearAll() {
+        this.filterService.clearCategorySelection(this.filterId, this.categoryIndex);
+        this.filterService.resetCategoryFilter(this.filterId, this.categoryIndex);
+    }
+    trackByItem(_index, entry) {
+        return entry.item.item;
+    }
+    freezeDropdownOrder() {
+        const items = this.items ?? [];
+        this.frozenSelectedKeys = items.filter(item => item.active).map(item => item.item);
+        this.frozenUnselectedKeys = items.filter(item => !item.active).map(item => item.item);
+    }
+    toEntries(keys) {
+        const items = this.items ?? [];
+        return keys
+            .map(key => {
+            const itemIndex = items.findIndex(item => item.item === key);
+            return { item: items[itemIndex], itemIndex };
+        })
+            .filter(entry => !!entry.item);
+    }
     changeValue($event) {
         this.filterService.hideShowItems(this.filterId, this.categoryIndex, $event);
         this.filterService.setCategoryFilter(this.filterId, this.categoryIndex, $event);
@@ -21829,7 +21957,19 @@ class QdFilterItemSelectCategoryComponent {
         this.filterService
             .getItems$(this.filterId, this.categoryIndex)
             .pipe(takeUntilDestroyed(this._destroyRef))
-            .subscribe(items => (this.items = items));
+            .subscribe(items => {
+            const itemSetChanged = !this.haveSameItemKeys(this.items, items);
+            this.items = items;
+            if (this.open && itemSetChanged)
+                this.freezeDropdownOrder();
+            this.popoverDirective?.updatePosition();
+        });
+    }
+    haveSameItemKeys(previous, next) {
+        const previousItems = previous ?? [];
+        const nextItems = next ?? [];
+        return (previousItems.length === nextItems.length &&
+            previousItems.every((item, index) => item.item === nextItems[index].item));
     }
     initShowSelectButton() {
         const category$ = this.filterService
@@ -21851,11 +21991,11 @@ class QdFilterItemSelectCategoryComponent {
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemSelectCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemSelectCategoryComponent, isStandalone: false, selector: "qd-filter-category-select", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-filter__category-select" }, viewQueries: [{ propertyName: "popoverDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }], ngImport: i0, template: "<div\n  *ngIf=\"showSelectButton$ | async\"\n  [class]=\"buttonClassName\"\n  [qdPopoverOnClick]=\"filterLayer\"\n  [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n  [qdPopoverStopPropagation]=\"true\"\n  [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n  [positionStrategy]=\"positionStrategy\"\n  (opened)=\"onLayerOpened()\"\n  (closed)=\"onLayerClosed()\"\n  [attr.data-test-id]=\"testId + '-select-button'\"\n>\n  <qd-icon\n    *ngIf=\"!open\"\n    [icon]=\"'ctrlDown'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--closed'\"\n    [attr.data-test-id]=\"testId + '-closed'\"\n  ></qd-icon>\n  <qd-icon\n    *ngIf=\"open\"\n    [icon]=\"'ctrlTop'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--open'\"\n    [attr.data-test-id]=\"testId + '-opened'\"\n  ></qd-icon>\n\n  <div class=\"qd-filter__category-button-caption\">\n    <span>\n      {{ i18n | translate }}\n    </span>\n  </div>\n\n  <ng-container *ngTemplateOutlet=\"SelectedChip\"></ng-container>\n</div>\n\n<ng-template #filterLayer>\n  <div [class]=\"layerContentClassName\">\n    <qd-icon\n      *ngIf=\"closeButton\"\n      [class]=\"'qd-filter__category-layer-close'\"\n      (click)=\"closeLayer()\"\n      [icon]=\"'timesLargeLight'\"\n      [attr.data-test-id]=\"testId + '-layer-close'\"\n    ></qd-icon>\n\n    <ng-container [ngSwitch]=\"type\">\n      <ng-container *ngSwitchCase=\"'multiSelect'\">\n        <qd-filter-form-items\n          *ngIf=\"filter\"\n          [inputFilterValue]=\"filterCategoryValue$ | async\"\n          (filterValueChange)=\"changeValue($event)\"\n          [data-test-id]=\"testId\"\n        ></qd-filter-form-items>\n\n        <div class=\"qd-filter__category-layer-items\">\n          <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n            <qd-filter-item-multi-select\n              *ngIf=\"!item.hidden\"\n              [categoryIndex]=\"categoryIndex\"\n              [itemIndex]=\"itemIndex\"\n              [filterId]=\"filterId\"\n              [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n            >\n            </qd-filter-item-multi-select>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'singleSelect'\">\n        <qd-filter-form-items\n          *ngIf=\"filter\"\n          [inputFilterValue]=\"filterCategoryValue$ | async\"\n          (filterValueChange)=\"changeValue($event)\"\n          [data-test-id]=\"testId\"\n        ></qd-filter-form-items>\n\n        <div class=\"qd-filter__category-layer-items\">\n          <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n            <qd-filter-item-single-select\n              *ngIf=\"!item.hidden\"\n              [categoryIndex]=\"categoryIndex\"\n              [itemIndex]=\"itemIndex\"\n              (closeEventEmitter)=\"closeLayer()\"\n              [filterId]=\"filterId\"\n              [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n            >\n            </qd-filter-item-single-select>\n          </ng-container>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #SelectedChip>\n  <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n    <!-- TODO: Add tooltip-->\n    <qd-chip\n      *ngIf=\"item.active\"\n      [state]=\"'filter'\"\n      [close]=\"true\"\n      (closeClickEmitter)=\"close($event)\"\n      [data]=\"itemIndex\"\n      [data-test-id]=\"testId + '-selected-chip-' + item.item\"\n      >{{ item.i18n | translate }}</qd-chip\n    >\n  </ng-container>\n</ng-template>\n", styles: ["::ng-deep .qd-filter__category-layer{display:flex;overflow:hidden;min-width:16.25rem;max-width:56.25rem;height:100%;flex-direction:column;padding:1rem 0 0;border:.0625rem solid rgb(151,151,151);background:#fff;box-shadow:#d5d5d5 .125rem .25rem .4375rem}::ng-deep .qd-filter__category-layer .qd-filter-form-items__filter{flex-shrink:0;margin-bottom:0}::ng-deep .qd-filter__category-layer .qd-checkbox__label{display:flex;height:2.5rem}::ng-deep .qd-filter__category-layer .qd-checkbox__indicator,::ng-deep .qd-filter__category-layer .qd-radio-buttons__indicator{transform:translateY(-.0625rem)}::ng-deep .qd-filter__category-layer-items{flex:1;overflow-y:auto}::ng-deep .qd-filter__category-layer-container{position:relative}::ng-deep .qd-filter__category-layer-close{position:absolute;z-index:1;top:1rem;right:1rem;color:#757575;cursor:pointer}::ng-deep .qd-filter__category-layer-close:before{position:absolute;content:\"\";inset:-.5rem}::ng-deep .qd-filter__category-layer-close:hover,::ng-deep .qd-filter__category-layer-close:focus{color:#171717}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdFilterFormItemsComponent, selector: "qd-filter-form-items", inputs: ["inputFilterValue", "data-test-id"], outputs: ["filterValueChange"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdFilterItemMultiSelectComponent, selector: "qd-filter-item-multi-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"] }, { kind: "component", type: QdFilterItemSingleSelectComponent, selector: "qd-filter-item-single-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"], outputs: ["closeEventEmitter"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemSelectCategoryComponent, isStandalone: false, selector: "qd-filter-category-select", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-filter__category-select" }, viewQueries: [{ propertyName: "popoverDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }], ngImport: i0, template: "<div\n  *ngIf=\"showSelectButton$ | async\"\n  [class]=\"buttonClassName\"\n  [qdPopoverOnClick]=\"filterLayer\"\n  [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n  [qdPopoverStopPropagation]=\"true\"\n  [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n  [positionStrategy]=\"positionStrategy\"\n  (opened)=\"onLayerOpened()\"\n  (closed)=\"onLayerClosed()\"\n  [attr.data-test-id]=\"testId + '-select-button'\"\n>\n  <qd-icon\n    *ngIf=\"!open\"\n    [icon]=\"'ctrlDown'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--closed'\"\n    [attr.data-test-id]=\"testId + '-closed'\"\n  ></qd-icon>\n  <qd-icon\n    *ngIf=\"open\"\n    [icon]=\"'ctrlTop'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--open'\"\n    [attr.data-test-id]=\"testId + '-opened'\"\n  ></qd-icon>\n\n  <div class=\"qd-filter__category-button-caption\">\n    <span>\n      {{ i18n | translate }}\n    </span>\n  </div>\n\n  <ng-container *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", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdFilterItemMultiSelectComponent, selector: "qd-filter-item-multi-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"] }, { kind: "component", type: QdFilterItemSingleSelectComponent, selector: "qd-filter-item-single-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"], outputs: ["closeEventEmitter"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemSelectCategoryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-filter-category-select', host: { class: 'qd-filter__category-select' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  *ngIf=\"showSelectButton$ | async\"\n  [class]=\"buttonClassName\"\n  [qdPopoverOnClick]=\"filterLayer\"\n  [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n  [qdPopoverStopPropagation]=\"true\"\n  [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n  [positionStrategy]=\"positionStrategy\"\n  (opened)=\"onLayerOpened()\"\n  (closed)=\"onLayerClosed()\"\n  [attr.data-test-id]=\"testId + '-select-button'\"\n>\n  <qd-icon\n    *ngIf=\"!open\"\n    [icon]=\"'ctrlDown'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--closed'\"\n    [attr.data-test-id]=\"testId + '-closed'\"\n  ></qd-icon>\n  <qd-icon\n    *ngIf=\"open\"\n    [icon]=\"'ctrlTop'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--open'\"\n    [attr.data-test-id]=\"testId + '-opened'\"\n  ></qd-icon>\n\n  <div class=\"qd-filter__category-button-caption\">\n    <span>\n      {{ i18n | translate }}\n    </span>\n  </div>\n\n  <ng-container *ngTemplateOutlet=\"SelectedChip\"></ng-container>\n</div>\n\n<ng-template #filterLayer>\n  <div [class]=\"layerContentClassName\">\n    <qd-icon\n      *ngIf=\"closeButton\"\n      [class]=\"'qd-filter__category-layer-close'\"\n      (click)=\"closeLayer()\"\n      [icon]=\"'timesLargeLight'\"\n      [attr.data-test-id]=\"testId + '-layer-close'\"\n    ></qd-icon>\n\n    <ng-container [ngSwitch]=\"type\">\n      <ng-container *ngSwitchCase=\"'multiSelect'\">\n        <qd-filter-form-items\n          *ngIf=\"filter\"\n          [inputFilterValue]=\"filterCategoryValue$ | async\"\n          (filterValueChange)=\"changeValue($event)\"\n          [data-test-id]=\"testId\"\n        ></qd-filter-form-items>\n\n        <div class=\"qd-filter__category-layer-items\">\n          <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n            <qd-filter-item-multi-select\n              *ngIf=\"!item.hidden\"\n              [categoryIndex]=\"categoryIndex\"\n              [itemIndex]=\"itemIndex\"\n              [filterId]=\"filterId\"\n              [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n            >\n            </qd-filter-item-multi-select>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'singleSelect'\">\n        <qd-filter-form-items\n          *ngIf=\"filter\"\n          [inputFilterValue]=\"filterCategoryValue$ | async\"\n          (filterValueChange)=\"changeValue($event)\"\n          [data-test-id]=\"testId\"\n        ></qd-filter-form-items>\n\n        <div class=\"qd-filter__category-layer-items\">\n          <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n            <qd-filter-item-single-select\n              *ngIf=\"!item.hidden\"\n              [categoryIndex]=\"categoryIndex\"\n              [itemIndex]=\"itemIndex\"\n              (closeEventEmitter)=\"closeLayer()\"\n              [filterId]=\"filterId\"\n              [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n            >\n            </qd-filter-item-single-select>\n          </ng-container>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #SelectedChip>\n  <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n    <!-- TODO: Add tooltip-->\n    <qd-chip\n      *ngIf=\"item.active\"\n      [state]=\"'filter'\"\n      [close]=\"true\"\n      (closeClickEmitter)=\"close($event)\"\n      [data]=\"itemIndex\"\n      [data-test-id]=\"testId + '-selected-chip-' + item.item\"\n      >{{ item.i18n | translate }}</qd-chip\n    >\n  </ng-container>\n</ng-template>\n", styles: ["::ng-deep .qd-filter__category-layer{display:flex;overflow:hidden;min-width:16.25rem;max-width:56.25rem;height:100%;flex-direction:column;padding:1rem 0 0;border:.0625rem solid rgb(151,151,151);background:#fff;box-shadow:#d5d5d5 .125rem .25rem .4375rem}::ng-deep .qd-filter__category-layer .qd-filter-form-items__filter{flex-shrink:0;margin-bottom:0}::ng-deep .qd-filter__category-layer .qd-checkbox__label{display:flex;height:2.5rem}::ng-deep .qd-filter__category-layer .qd-checkbox__indicator,::ng-deep .qd-filter__category-layer .qd-radio-buttons__indicator{transform:translateY(-.0625rem)}::ng-deep .qd-filter__category-layer-items{flex:1;overflow-y:auto}::ng-deep .qd-filter__category-layer-container{position:relative}::ng-deep .qd-filter__category-layer-close{position:absolute;z-index:1;top:1rem;right:1rem;color:#757575;cursor:pointer}::ng-deep .qd-filter__category-layer-close:before{position:absolute;content:\"\";inset:-.5rem}::ng-deep .qd-filter__category-layer-close:hover,::ng-deep .qd-filter__category-layer-close:focus{color:#171717}\n"] }]
+            args: [{ selector: 'qd-filter-category-select', host: { class: 'qd-filter__category-select' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  *ngIf=\"showSelectButton$ | async\"\n  [class]=\"buttonClassName\"\n  [qdPopoverOnClick]=\"filterLayer\"\n  [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n  [qdPopoverStopPropagation]=\"true\"\n  [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n  [positionStrategy]=\"positionStrategy\"\n  (opened)=\"onLayerOpened()\"\n  (closed)=\"onLayerClosed()\"\n  [attr.data-test-id]=\"testId + '-select-button'\"\n>\n  <qd-icon\n    *ngIf=\"!open\"\n    [icon]=\"'ctrlDown'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--closed'\"\n    [attr.data-test-id]=\"testId + '-closed'\"\n  ></qd-icon>\n  <qd-icon\n    *ngIf=\"open\"\n    [icon]=\"'ctrlTop'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--open'\"\n    [attr.data-test-id]=\"testId + '-opened'\"\n  ></qd-icon>\n\n  <div class=\"qd-filter__category-button-caption\">\n    <span>\n      {{ i18n | translate }}\n    </span>\n  </div>\n\n  <ng-container *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: [{
@@ -22106,11 +22246,17 @@ class QdDependentFiltersService {
         return this.categories.filter(category => category.hasOwnProperty('dependsOn'));
     }
     resolveItemsWhenDependsOnCategoriesChange(dependentCategory) {
+        const dependentCategoryIndex = this.categories.indexOf(dependentCategory);
         return combineLatest(dependentCategory.dependsOn.map(dependsOnCategory => this.filterService.getCategoryById$(this.filterId, this.categories.findIndex(({ category }) => category === dependsOnCategory)))).pipe(distinctUntilChanged(isEqual), switchMap(parentCategories => {
             const allParentsActive = parentCategories.every((parent) => Array.isArray(parent.items) && parent.items.some(item => item.active));
-            if (!allParentsActive)
+            if (!allParentsActive) {
+                this.filterService.setItemsLoading(this.filterId, dependentCategoryIndex, false);
                 return of([]);
-            return dependentCategory.itemsResolver(parentCategories);
+            }
+            this.filterService.setItemsLoading(this.filterId, dependentCategoryIndex, true);
+            return dependentCategory
+                .itemsResolver(parentCategories)
+                .pipe(tap$1(() => this.filterService.setItemsLoading(this.filterId, dependentCategoryIndex, false)));
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDependentFiltersService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -22122,43 +22268,123 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 
 // @ts-strict-ignore
 /**
- * The **QdFilter** is responsible for the filtering of data.
+ * **QdFilterComponent** lets users build and apply a filter with several categories over a data set.
+ *
+ * #### **Features**
+ *
+ * - **Category types**: single and multi select dropdowns, a boolean toggle, date and date-time pickers, date and date-time ranges, and free text. A select dropdown can also show a filter field that narrows the item list.
+ * - **Outputs**: react to the applied selection through the query-string and post-body outputs, or read the current selection at any time.
+ * - **Multi-staging**: chain categories so one stage loads its items from the selection of another.
+ * - **URL sync**: the selection is kept in the URL, so a view can be shared, bookmarked, and reopened.
+ *
+ * #### **Quick start**
+ *
+ * **1. Add the filter to the template**
+ *
+ * ```html
+ * <qd-filter
+ *   [filterData]="myFilterConfig"
+ *   (queryStringOutput)="callBackendWithQueryString($event)"
+ *   (postBodyOutput)="callBackendWithResultObject($event)"
+ * ></qd-filter>
+ * ```
+ *
+ * **2. Define the config in your component**
+ *
+ * ```typescript
+ * myFilterConfig: QdFilterConfigData = {
+ *   categories: [
+ *     {
+ *       type: 'singleSelect',
+ *       category: 'controlObject',
+ *       i18n: 'i18n.my.category.controlObject',
+ *       items: [
+ *         { item: 'vehicle', i18n: 'i18n.my.item.vehicle', active: true },
+ *         { item: 'article', i18n: 'i18n.my.item.article' }
+ *       ],
+ *       filter: true
+ *     },
+ *     {
+ *       type: 'multiSelect',
+ *       category: 'enrollmentCountry',
+ *       i18n: 'i18n.my.category.enrollmentCountry',
+ *       items: [
+ *         { item: 'de', i18n: 'i18n.my.item.de' },
+ *         { item: 'ch', i18n: 'i18n.my.item.ch' }
+ *       ]
+ *     }
+ *   ],
+ *   uid: 'overview-filter'
+ * };
+ * ```
+ *
+ * The `filterData` input is the only configuration. It holds the categories and the behavior flags.
  *
- * Hirarchical structure::
- * - **Filter**: Name of the component.
- * - **Categories**: A list of one or more different categories.
- * - **Items**: A list with one or more items belongs to a parent category.
+ * #### **Category types**
  *
- * ### Filter selection ###
+ * A category sets its type to one of: singleSelect, multiSelect, boolean, date, dateTime,
+ * dateRange, dateTimeRange or freeText. Single and multi select show a dropdown, boolean is a
+ * toggle, the date types open a picker (the date-time variants add a time picker), and free text
+ * is a text field applied on enter.
  *
- * To get the applied filters you can listen to the outputs `(queryStringOutput)` and `(postBodyOutput)`.
- * These outputs will be emitted when the filter is triggered. The `(queryStringOutput)` returns
- * the applied filters as an url string with an encoded *filter* parameter. The `(postBodyOutput)`
- * yields an object containing the categories and active items.
+ * On a single or multi select you can add a filter field above the items with `filter: true` to
+ * narrow the item list. It has no effect on the other types.
  *
- * In addition to the outputs, you also can query the current filter selection with the
- * filter component methods `getCurrentQueryString`, `getCurrentFilterUrlParameterString` and `getCurrentPostBody`.
+ * #### **Filter selection**
  *
- * ### Preserve filter state ###
+ * Listen to the outputs to react when the user applies the filter. The query-string output gives
+ * the selection as a URL string (for example filter=...); the post-body output gives it as an
+ * object with the active categories and their values.
  *
- * To preserve the filter state when navigating, for example between detail and overview page, you just have to define
- * a uid in the filter data config.
+ * The outputs fire when the user applies the filter, on reset (only when a preselection exists),
+ * when the last active item is removed, and on load if a category starts active.
  *
- * ### Multi Staging Filters
+ * To read the selection without waiting for an apply, call `getCurrentQueryString` or
+ * `getCurrentPostBody`, or subscribe to `getFilterChanges$` for a continuous stream.
  *
- * To build a dependency chain of filters you can use the `dependsOn` property of a filter that depends on
- * other filters. In the `dependsOn` property you set the names of the filter categories the category depends on.
- * Always when one of these categories change the `itemsResolver` will be called with the list
- * of categories given in `dependsOn`. The `itemsResolver` can also be defined in the config where `dependsOn`
- * is also defined.
+ * #### **Multi-staging filters**
  *
- * If the items resolver has not been called yet or when it returns an empty array of items,
- * the corresponding filter stage won't be rendered.
+ * To chain categories, give one a `dependsOn` list and an `itemsResolver`. In `dependsOn` you
+ * name the parent categories. The resolver receives the active parents and returns the items for
+ * this stage.
  *
- * #### Support
+ * ```typescript
+ * const cityCategory: QdDependentFilterCategory = {
+ *   type: 'multiSelect',
+ *   category: 'city',
+ *   i18n: 'i18n.my.category.city',
+ *   dependsOn: ['country'],
+ *   itemsResolver: ([country]) =>
+ *     loadCitiesFor(country.items.filter(item => item.active)),
+ *   filter: true
+ * };
+ * ```
+ *
+ * The stage appears once every parent has an active item. While its items load, the open
+ * dropdown shows a loading text instead of the list. If the resolver returns nothing, the list
+ * stays empty. Multi-staging works only for single and multi select categories.
+ *
+ * #### **URL synchronization**
  *
- * Multi Staging Filters only work for `singleSelect` and `multiSelect` filters.
+ * The filter keeps its selection in the URL filter parameter: it is saved when the selection
+ * changes and read back when the page opens, so a user can share or bookmark the URL and return
+ * to the same filter.
  *
+ * This is on by default. With more than one filter in a view, only one may own the URL, so set
+ * `connectWithRouter` to false on every other filter.
+ *
+ * #### **Preserve filter state**
+ *
+ * Give the config a stable `uid` to keep the selection while the user moves around the app, for
+ * example from an overview to a detail page and back. The selection is restored the next time a
+ * filter with the same `uid` is shown.
+ *
+ * #### **Reset behavior**
+ *
+ * An item set to active is a preselection. The reset button reads "Reset" when there is no
+ * preselection, and "Back to preselection" when the config starts with active items. It restores
+ * the initial state. With instant filtering (`isInstantFiltering`) the apply and reset buttons
+ * are hidden and the filter applies on every change.
  */
 class QdFilterComponent {
     filterService = inject(QdFilterService);
@@ -30190,8 +30416,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 /**
  * **QdPageTabHeader* renders the header of a single tab. It is used quadrel-internally.
  */
-class QdPageTabHeaderComponent extends CdkStepHeader {
-    STEP_STATE = STEP_STATE;
+class QdPageTabHeaderComponent {
     /** State of the given tab. */
     state;
     /** Label of the given tab. */
@@ -30208,24 +30433,21 @@ class QdPageTabHeaderComponent extends CdkStepHeader {
      * A static test ID for integration tests can be set.
      */
     testId;
-    constructor() {
-        const elementRef = inject(ElementRef);
-        super(elementRef);
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageTabHeaderComponent, isStandalone: true, selector: "qd-page-tab-header", inputs: { state: "state", label: "label", counters: "counters", index: "index", isSelected: "isSelected", isDisabled: "isDisabled", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "testId", "class.qd-tab-current": "isSelected && !isDisabled", "class.qd-tab-disabled": "isDisabled", "class.qd-tab-done": "state === STEP_STATE.DONE", "class.qd-tab-edit": "state === STEP_STATE.EDIT", "class.qd-tab-error": "state === STEP_STATE.ERROR" } }, usesInheritance: true, ngImport: i0, template: "<span class=\"qd-tab-caption\">\n  {{ label }}\n  <qd-page-tab-header-counters [counters]=\"counters\" [data-test-id]=\"testId + '-counters'\" />\n</span>\n", styles: [":host{position:relative;display:inline-flex;height:2.5rem;padding:.625rem 0;cursor:pointer;color:#757575;font-size:14px;font-weight:400;line-height:18px}:host .qd-tab-caption{font-weight:500;white-space:nowrap}:host:hover,:host.qd-tab-current{color:#069}:host.qd-tab-current .qd-tab-caption{position:relative}:host.qd-tab-current .qd-tab-caption:after{position:absolute;bottom:-.6875rem;left:0;display:inline-block;width:100%;height:.25rem;background-color:#069;content:\"\"}:host.qd-tab-done,:host.qd-tab-edit{color:#171717}:host.qd-tab-error{color:#c70023}:host.qd-tab-disabled{color:#b4b4b4;cursor:default}:host.qd-tab-disabled:hover{color:#b4b4b4}\n"], dependencies: [{ kind: "component", type: QdPageTabHeaderCountersComponent, selector: "qd-page-tab-header-counters", inputs: ["counters", "data-test-id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageTabHeaderComponent, isStandalone: true, selector: "qd-page-tab-header", inputs: { state: "state", label: "label", counters: "counters", index: "index", isSelected: "isSelected", isDisabled: "isDisabled", testId: ["data-test-id", "testId"] }, host: { attributes: { "role": "tab" }, properties: { "attr.data-test-id": "testId", "class.qd-tab-current": "isSelected && !isDisabled", "class.qd-tab-disabled": "isDisabled", "class.qd-tab-done": "state === 'done'", "class.qd-tab-edit": "state === 'edit'", "class.qd-tab-error": "state === 'error'" } }, ngImport: i0, template: "<span class=\"qd-tab-caption\">\n  {{ label }}\n  <qd-page-tab-header-counters [counters]=\"counters\" [data-test-id]=\"testId + '-counters'\" />\n</span>\n", styles: [":host{position:relative;display:inline-flex;height:2.5rem;padding:.625rem 0;cursor:pointer;color:#757575;font-size:14px;font-weight:400;line-height:18px}:host .qd-tab-caption{font-weight:500;white-space:nowrap}:host:hover,:host.qd-tab-current{color:#069}:host.qd-tab-current .qd-tab-caption{position:relative}:host.qd-tab-current .qd-tab-caption:after{position:absolute;bottom:-.6875rem;left:0;display:inline-block;width:100%;height:.25rem;background-color:#069;content:\"\"}:host.qd-tab-done,:host.qd-tab-edit{color:#171717}:host.qd-tab-error{color:#c70023}:host.qd-tab-disabled{color:#b4b4b4;cursor:default}:host.qd-tab-disabled:hover{color:#b4b4b4}\n"], dependencies: [{ kind: "component", type: QdPageTabHeaderCountersComponent, selector: "qd-page-tab-header-counters", inputs: ["counters", "data-test-id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'qd-page-tab-header', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.data-test-id]': 'testId',
+                        role: 'tab',
                         '[class.qd-tab-current]': 'isSelected && !isDisabled',
                         '[class.qd-tab-disabled]': 'isDisabled',
-                        '[class.qd-tab-done]': 'state === STEP_STATE.DONE',
-                        '[class.qd-tab-edit]': 'state === STEP_STATE.EDIT',
-                        '[class.qd-tab-error]': 'state === STEP_STATE.ERROR'
+                        '[class.qd-tab-done]': "state === 'done'",
+                        '[class.qd-tab-edit]': "state === 'edit'",
+                        '[class.qd-tab-error]': "state === 'error'"
                     }, standalone: true, imports: [QdPageTabHeaderCountersComponent], template: "<span class=\"qd-tab-caption\">\n  {{ label }}\n  <qd-page-tab-header-counters [counters]=\"counters\" [data-test-id]=\"testId + '-counters'\" />\n</span>\n", styles: [":host{position:relative;display:inline-flex;height:2.5rem;padding:.625rem 0;cursor:pointer;color:#757575;font-size:14px;font-weight:400;line-height:18px}:host .qd-tab-caption{font-weight:500;white-space:nowrap}:host:hover,:host.qd-tab-current{color:#069}:host.qd-tab-current .qd-tab-caption{position:relative}:host.qd-tab-current .qd-tab-caption:after{position:absolute;bottom:-.6875rem;left:0;display:inline-block;width:100%;height:.25rem;background-color:#069;content:\"\"}:host.qd-tab-done,:host.qd-tab-edit{color:#171717}:host.qd-tab-error{color:#c70023}:host.qd-tab-disabled{color:#b4b4b4;cursor:default}:host.qd-tab-disabled:hover{color:#b4b4b4}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { state: [{
+        }], propDecorators: { state: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -30242,13 +30464,112 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 args: ['data-test-id']
             }] } });
 
+// @ts-strict-ignore
+/**
+ * The **QdPageTab** is a single tab inside the **QdPageTabs** within a **QdPage**.
+ */
+class QdPageTabComponent {
+    _pageTabs = inject(forwardRef(() => QdPageTabsComponent));
+    translate = inject(TranslateService);
+    /**
+     * Configuration of QdPageTabComponent.
+     *
+     * * @note The use of CDK attributes is not permitted. Please configure this component here.
+     */
+    config;
+    /** Form control for this tab. */
+    set tabControl(tabControl) {
+        this.stepControl = tabControl;
+    }
+    get tabControl() {
+        return this.stepControl;
+    }
+    infoBanners;
+    content;
+    stepControl;
+    interacted = false;
+    editable = true;
+    get completed() {
+        if (!this.interacted)
+            return false;
+        const control = this.tabControl;
+        if (!control)
+            return true;
+        return !control.invalid && !control.pending;
+    }
+    get hasError() {
+        return this.interacted && !!this.tabControl?.invalid;
+    }
+    _destroyed$ = new Subject();
+    select() {
+        const index = this._pageTabs.tabs.toArray().indexOf(this);
+        if (index >= 0)
+            this._pageTabs.selectedIndex = index;
+    }
+    ngOnInit() {
+        this.validateLabel();
+        if (this.tabControl)
+            this.initErrorCheck();
+    }
+    ngOnChanges(changes) {
+        ['label', 'errorMessage', 'state']
+            .filter(inputName => !!changes[inputName])
+            .forEach(inputName => this.blockCdkInput(inputName));
+    }
+    ngOnDestroy() {
+        this._destroyed$.complete();
+    }
+    blockCdkInput(inputName) {
+        throw new Error(`Quadrel Framework | QdPageTab - The use of the "${inputName}" attribute is not permitted. Please use QdPageTabConfig instead.`);
+    }
+    validateLabel() {
+        if (!this.config?.label?.i18n)
+            console.error('Quadrel Framework | QdPageTab - Please provide a label for the tab.');
+    }
+    initErrorCheck() {
+        this.tabControl.statusChanges.pipe(takeUntil$1(this._destroyed$)).subscribe(() => {
+            if (this.hasAnyError(this.tabControl)) {
+                this.interacted = true;
+            }
+            this._pageTabs._stateChanged();
+        });
+    }
+    hasAnyError(control) {
+        if (control.errors && control.touched)
+            return true;
+        if (control instanceof FormGroup) {
+            return Object.values(control.controls).some(control => this.hasAnyError(control));
+        }
+        if (control instanceof FormArray) {
+            return control.controls.some(control => this.hasAnyError(control));
+        }
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageTabComponent, isStandalone: true, selector: "qd-page-tab", inputs: { config: "config", tabControl: "tabControl" }, queries: [{ propertyName: "infoBanners", predicate: QdPageInfoBannerComponent }], viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template>\n  <div class=\"page-info-banners\">\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".page-info-banners:has(>qd-page-info-banner:not(.qd-page-info-banner-empty)){padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}.page-info-banners>qd-page-info-banner:last-child{margin-bottom:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'qd-page-tab', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<ng-template>\n  <div class=\"page-info-banners\">\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".page-info-banners:has(>qd-page-info-banner:not(.qd-page-info-banner-empty)){padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}.page-info-banners>qd-page-info-banner:last-child{margin-bottom:0}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], tabControl: [{
+                type: Input
+            }], infoBanners: [{
+                type: ContentChildren,
+                args: [QdPageInfoBannerComponent]
+            }], content: [{
+                type: ViewChild,
+                args: [TemplateRef, { static: true }]
+            }] } });
+
 const TAB_PARAM_NAME = 'tab';
 const OWNED_PARAMS = [TAB_PARAM_NAME];
 const FEATURE_LABEL = { name: 'Page Tabs', plural: 'page tabs' };
 /**
  * Per-view adapter that syncs `QdPageTabsComponent` selection with the URL `?tab=` query
  * param via `QdRouterQueryParamHubService`. Reads on activation and selects the matching
- * tab (with fallback for unknown/disabled names), writes on `selectionChange`. Coordination,
+ * tab (with fallback for unknown/disabled names), writes on `tabSelection`. Coordination,
  * ownership, and write batching are delegated to the hub — see its JSDoc for details.
  * Behavior contracts live in `page-tabs-router-connector.service.spec.ts` and
  * `router-query-param-hub.integration.cy.ts`.
@@ -30259,9 +30580,9 @@ const FEATURE_LABEL = { name: 'Page Tabs', plural: 'page tabs' };
  * write pipeline (see commit 57f0a271a).
  *
  * Internal invariant: when the requested tab is unknown or disabled, `selectFallbackTab()`
- * writes the URL explicitly. CdkStepper does not emit `selectionChange` if the fallback is
- * already the selected step, so without the explicit write deep-links like `?tab=phantom`
- * would leave a stale param in the URL.
+ * writes the URL explicitly. `tabSelection` is not emitted if the fallback is already
+ * the selected tab, so without the explicit write deep-links like `?tab=phantom` would
+ * leave a stale param in the URL.
  */
 class QdPageTabsRouterConnectorService {
     _hub = inject(QdRouterQueryParamHubService);
@@ -30310,8 +30631,8 @@ class QdPageTabsRouterConnectorService {
     }
     subscribeToTabChanges() {
         const component = this._connectedComponent;
-        this._writeSubscription = component.selectionChange
-            .pipe(map(event => event.selectedStep?.config?.name), takeUntilDestroyed(this._destroyRef))
+        this._writeSubscription = component.tabSelection
+            .pipe(map(event => event.selectedTab?.config?.name), takeUntilDestroyed(this._destroyRef))
             .subscribe(name => this.writeUrl(name));
     }
     writeUrl(name) {
@@ -30547,10 +30868,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  * - If an invalid tab name is provided in URL, the first available tab is selected
  * - If no tab parameter is present, the `selectedIndex` or first non-disabled tab is selected
  */
-class QdPageTabsComponent extends CdkStepper {
+class QdPageTabsComponent {
     footerService = inject(QdPageFooterService, { optional: true });
     pageStoreService = inject(QdPageStoreService);
     routerConnector = inject(QdPageTabsRouterConnectorService);
+    _changeDetectorRef = inject(ChangeDetectorRef);
+    destroyRef = inject(DestroyRef);
+    static _idCounter = 0;
+    _id = QdPageTabsComponent._idCounter++;
     get hasPageFooter() {
         return !!this.footerService;
     }
@@ -30563,23 +30888,45 @@ class QdPageTabsComponent extends CdkStepper {
      */
     testId = 'page-tabs';
     tabSelection = new EventEmitter();
+    _tabs;
+    linear = false;
+    _selectedIndex = 0;
     _viewonly;
-    destroyRef = inject(DestroyRef);
     get tabs() {
-        return this.steps;
+        return this._tabs;
     }
     get selected() {
-        return super.selected;
+        return this._tabs?.get(this._selectedIndex);
     }
-    set selected(step) {
-        super.selected = step;
+    set selected(tab) {
+        if (!tab)
+            return;
+        const index = this._tabs?.toArray().indexOf(tab);
+        if (index !== undefined && index >= 0) {
+            this.selectedIndex = index;
+        }
     }
-    constructor() {
-        const _dir = inject(Directionality, { optional: true });
-        const _changeDetectorRef = inject(ChangeDetectorRef);
-        const _elementRef = inject(ElementRef);
-        super(_dir, _changeDetectorRef, _elementRef);
-        this.mapSelectionChangeToTabSelectionOutput();
+    get selectedIndex() {
+        return this._selectedIndex;
+    }
+    set selectedIndex(newIndex) {
+        if (newIndex === this._selectedIndex)
+            return;
+        const prevIndex = this._selectedIndex;
+        const prevTab = this._tabs?.get(prevIndex);
+        if (prevTab?.tabControl) {
+            prevTab.interacted = true;
+        }
+        this._selectedIndex = newIndex;
+        if (this._tabs) {
+            this.tabSelection.emit({
+                selectedIndex: newIndex,
+                previouslySelectedIndex: prevIndex,
+                selectedTab: this._tabs.get(newIndex),
+                previouslySelectedTab: this._tabs.get(prevIndex)
+            });
+        }
+        this._changeDetectorRef.markForCheck();
     }
     ngOnInit() {
         this.linear = false;
@@ -30593,24 +30940,10 @@ class QdPageTabsComponent extends CdkStepper {
             .filter(inputName => !!changes[inputName])
             .forEach(inputName => this.blockCdkInput(inputName));
     }
-    _getIndicatorType(index, state) {
-        if (state)
-            return state;
-        const step = this.steps.get(index);
-        if (!step)
-            return 'number';
-        if (step.hasError)
-            return 'error';
-        if (step.completed)
-            return step.editable ? 'edit' : 'done';
-        return 'number';
-    }
     ngAfterContentInit() {
-        super.ngAfterContentInit();
-        this.tabs.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this._stateChanged());
+        this._tabs.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this._stateChanged());
     }
     ngAfterViewInit() {
-        super.ngAfterViewInit();
         setTimeout(() => {
             if (this.config?.connectWithRouter) {
                 this.configureBookmarkableTabs();
@@ -30619,9 +30952,42 @@ class QdPageTabsComponent extends CdkStepper {
             this.initializeTabSelection();
         });
     }
+    _stateChanged() {
+        this._changeDetectorRef.markForCheck();
+    }
+    _getIndicatorType(index) {
+        const tab = this._tabs.get(index);
+        if (!tab)
+            return 'number';
+        if (tab.hasError && !this._viewonly)
+            return 'error';
+        if (tab.completed)
+            return tab.editable ? 'edit' : 'done';
+        return 'number';
+    }
+    _getTabLabelId(i) {
+        return `qd-tabs-${this._id}-label-${i}`;
+    }
+    save() {
+        this.selected?.tabControl?.markAllAsTouched();
+        const tabControlValues = this._tabs.map(tab => tab.tabControl?.value);
+        this.config?.submitButton?.handler?.(tabControlValues);
+    }
+    selectTab(tab) {
+        if (tab.config?.isDisabled)
+            return;
+        tab.select();
+    }
+    isSubmitButtonShown() {
+        return this.config?.submitButton?.isHidden !== true && !this.footerService;
+    }
+    isSubmitButtonDisabled() {
+        return this.config?.submitButton?.isDisabled;
+    }
     initializeTabSelection() {
         if (this.config?.selectedIndex && this.isTabSelectable(this.config.selectedIndex)) {
-            this.selectedIndex = this.config.selectedIndex;
+            this._selectedIndex = this.config.selectedIndex;
+            this._changeDetectorRef.markForCheck();
             return;
         }
         this.selectFirstNotDisabledTab();
@@ -30630,19 +30996,20 @@ class QdPageTabsComponent extends CdkStepper {
         this.routerConnector.connectTabsWithRouter(this).pipe(takeUntilDestroyed(this.destroyRef)).subscribe();
     }
     isTabSelectable(index) {
-        const tab = this.tabs.get(index);
+        const tab = this._tabs.get(index);
         return !!tab && !tab.config.isDisabled;
     }
     /**
      * Selects the first tab that is not disabled.
      */
     selectFirstNotDisabledTab() {
-        this.tabs.some((tab, tabIndex) => {
+        this._tabs.some((tab, tabIndex) => {
             if (!tab.config.isDisabled) {
                 if (this.config) {
                     this.config.selectedIndex = tabIndex;
                 }
-                this.selectedIndex = tabIndex;
+                this._selectedIndex = tabIndex;
+                this._changeDetectorRef.markForCheck();
                 return true;
             }
             else {
@@ -30650,51 +31017,25 @@ class QdPageTabsComponent extends CdkStepper {
             }
         });
     }
-    save() {
-        this.selected?.tabControl?.markAllAsTouched();
-        const tabControlValues = this.tabs.map(tab => tab.tabControl?.value);
-        this.config?.submitButton?.handler?.(tabControlValues);
-    }
-    selectTab(tab) {
-        if (tab.config?.isDisabled)
-            return;
-        tab.select();
-    }
-    isSubmitButtonShown() {
-        return this.config?.submitButton?.isHidden !== true && !this.footerService;
-    }
-    isSubmitButtonDisabled() {
-        return this.config?.submitButton?.isDisabled;
-    }
-    _getTabLabelId(i) {
-        return this._getStepLabelId(i);
-    }
     blockCdkInput(inputName) {
         throw new Error(`Quadrel Framework | QdPageTabs - The use of the "${inputName}" attribute is not permitted. Please use QdPageTabsConfig instead.`);
     }
-    mapSelectionChangeToTabSelectionOutput() {
-        this.selectionChange.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(selectionEvent => {
-            this.tabSelection.emit({
-                selectedIndex: selectionEvent.selectedIndex,
-                previouslySelectedIndex: selectionEvent.previouslySelectedIndex,
-                selectedTab: selectionEvent.selectedStep,
-                previouslySelectedTab: selectionEvent.previouslySelectedStep
-            });
-        });
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageTabsComponent, isStandalone: true, selector: "qd-page-tabs", inputs: { config: "config", testId: ["data-test-id", "testId"] }, outputs: { tabSelection: "tabSelection" }, host: { properties: { "class.standalone": "!hasPageFooter" }, classAttribute: "qd-tabs" }, providers: [{ provide: CdkStepper, useExisting: QdPageTabsComponent }, QdPageTabsRouterConnectorService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"qd-tabs-items-container\" [ngClass]=\"{ scrollable: config?.scrollabe }\">\n  <qd-page-tab-header\n    *ngFor=\"let tab of tabs; let i = index\"\n    (click)=\"selectTab(tab)\"\n    [id]=\"_getTabLabelId(i)\"\n    [index]=\"i\"\n    [state]=\"_getIndicatorType(i, tab.state)\"\n    [label]=\"tab.config.label.i18n | translate\"\n    [counters]=\"tab.config.counters\"\n    [isSelected]=\"selectedIndex === i\"\n    [isDisabled]=\"tab.config?.isDisabled\"\n    [data-test-id]=\"testId + '-header' + '-' + i\"\n  >\n  </qd-page-tab-header>\n</div>\n\n<div class=\"tabs-content\">\n  <ng-container *ngIf=\"!selected?.config?.isDisabled\" [ngTemplateOutlet]=\"selected?.content\"></ng-container>\n</div>\n\n<div class=\"qd-tabs-action-area\" *ngIf=\"isSubmitButtonShown()\">\n  <button qdButton (click)=\"save()\" [disabled]=\"isSubmitButtonDisabled()\" [data-test-id]=\"testId + '-submit'\">\n    {{ config?.submitButton?.i18n || \"i18n.qd.tabs.button.submit\" | translate }}\n  </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host.standalone{height:calc(100% - 50px)}:host .qd-tabs-items-container{display:flex;width:100%;flex-direction:row;flex-wrap:wrap;padding:0 1.25rem;border-bottom:.125rem solid rgb(213,213,213);background-color:#fff;gap:0 .9375rem}@media (max-width: 599.98px){:host .qd-tabs-items-container{padding:0 .9375rem}}@media (max-width: 1279.98px){:host .qd-tabs-items-container.scrollable{flex-wrap:nowrap;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none}}:host .tabs-content{flex:1 1 auto}:host .qd-tabs-action-area{display:flex;width:100%;height:50px;justify-content:flex-end}:host .qd-tabs-action-area button{margin-right:1.25rem}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QdPageTabHeaderComponent, selector: "qd-page-tab-header", inputs: ["state", "label", "counters", "index", "isSelected", "isDisabled", "data-test-id"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: QdButtonModule }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageTabsComponent, isStandalone: true, selector: "qd-page-tabs", inputs: { config: "config", testId: ["data-test-id", "testId"] }, outputs: { tabSelection: "tabSelection" }, host: { properties: { "class.standalone": "!footerService" }, classAttribute: "qd-tabs" }, providers: [QdPageTabsRouterConnectorService], queries: [{ propertyName: "_tabs", predicate: i0.forwardRef(() => QdPageTabComponent) }], usesOnChanges: true, ngImport: i0, template: "<div class=\"qd-tabs-items-container\" [ngClass]=\"{ scrollable: config?.scrollabe }\">\n  <qd-page-tab-header\n    *ngFor=\"let tab of tabs; let i = index\"\n    (click)=\"selectTab(tab)\"\n    [id]=\"_getTabLabelId(i)\"\n    [index]=\"i\"\n    [state]=\"_getIndicatorType(i)\"\n    [label]=\"tab.config.label.i18n | translate\"\n    [counters]=\"tab.config.counters\"\n    [isSelected]=\"selectedIndex === i\"\n    [isDisabled]=\"tab.config?.isDisabled\"\n    [data-test-id]=\"testId + '-header' + '-' + i\"\n  >\n  </qd-page-tab-header>\n</div>\n\n<div class=\"tabs-content\">\n  <ng-container *ngIf=\"!selected?.config?.isDisabled\" [ngTemplateOutlet]=\"selected?.content\"></ng-container>\n</div>\n\n<div class=\"qd-tabs-action-area\" *ngIf=\"isSubmitButtonShown()\">\n  <button qdButton (click)=\"save()\" [disabled]=\"isSubmitButtonDisabled()\" [data-test-id]=\"testId + '-submit'\">\n    {{ config?.submitButton?.i18n || \"i18n.qd.tabs.button.submit\" | translate }}\n  </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host.standalone{height:calc(100% - 50px)}:host .qd-tabs-items-container{display:flex;width:100%;flex-direction:row;flex-wrap:wrap;padding:0 1.25rem;border-bottom:.125rem solid rgb(213,213,213);background-color:#fff;gap:0 .9375rem}@media (max-width: 599.98px){:host .qd-tabs-items-container{padding:0 .9375rem}}@media (max-width: 1279.98px){:host .qd-tabs-items-container.scrollable{flex-wrap:nowrap;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none}}:host .tabs-content{flex:1 1 auto}:host .qd-tabs-action-area{display:flex;width:100%;height:50px;justify-content:flex-end}:host .qd-tabs-action-area button{margin-right:1.25rem}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QdPageTabHeaderComponent, selector: "qd-page-tab-header", inputs: ["state", "label", "counters", "index", "isSelected", "isDisabled", "data-test-id"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: QdButtonModule }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-page-tabs', providers: [{ provide: CdkStepper, useExisting: QdPageTabsComponent }, QdPageTabsRouterConnectorService], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'qd-tabs', '[class.standalone]': '!hasPageFooter' }, standalone: true, imports: [NgFor, NgIf, NgTemplateOutlet, QdPageTabHeaderComponent, TranslateModule, QdButtonModule, CommonModule], template: "<div class=\"qd-tabs-items-container\" [ngClass]=\"{ scrollable: config?.scrollabe }\">\n  <qd-page-tab-header\n    *ngFor=\"let tab of tabs; let i = index\"\n    (click)=\"selectTab(tab)\"\n    [id]=\"_getTabLabelId(i)\"\n    [index]=\"i\"\n    [state]=\"_getIndicatorType(i, tab.state)\"\n    [label]=\"tab.config.label.i18n | translate\"\n    [counters]=\"tab.config.counters\"\n    [isSelected]=\"selectedIndex === i\"\n    [isDisabled]=\"tab.config?.isDisabled\"\n    [data-test-id]=\"testId + '-header' + '-' + i\"\n  >\n  </qd-page-tab-header>\n</div>\n\n<div class=\"tabs-content\">\n  <ng-container *ngIf=\"!selected?.config?.isDisabled\" [ngTemplateOutlet]=\"selected?.content\"></ng-container>\n</div>\n\n<div class=\"qd-tabs-action-area\" *ngIf=\"isSubmitButtonShown()\">\n  <button qdButton (click)=\"save()\" [disabled]=\"isSubmitButtonDisabled()\" [data-test-id]=\"testId + '-submit'\">\n    {{ config?.submitButton?.i18n || \"i18n.qd.tabs.button.submit\" | translate }}\n  </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host.standalone{height:calc(100% - 50px)}:host .qd-tabs-items-container{display:flex;width:100%;flex-direction:row;flex-wrap:wrap;padding:0 1.25rem;border-bottom:.125rem solid rgb(213,213,213);background-color:#fff;gap:0 .9375rem}@media (max-width: 599.98px){:host .qd-tabs-items-container{padding:0 .9375rem}}@media (max-width: 1279.98px){:host .qd-tabs-items-container.scrollable{flex-wrap:nowrap;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none}}:host .tabs-content{flex:1 1 auto}:host .qd-tabs-action-area{display:flex;width:100%;height:50px;justify-content:flex-end}:host .qd-tabs-action-area button{margin-right:1.25rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { config: [{
+            args: [{ selector: 'qd-page-tabs', providers: [QdPageTabsRouterConnectorService], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'qd-tabs', '[class.standalone]': '!footerService' }, standalone: true, imports: [NgFor, NgIf, NgTemplateOutlet, QdPageTabHeaderComponent, TranslateModule, QdButtonModule, CommonModule], template: "<div class=\"qd-tabs-items-container\" [ngClass]=\"{ scrollable: config?.scrollabe }\">\n  <qd-page-tab-header\n    *ngFor=\"let tab of tabs; let i = index\"\n    (click)=\"selectTab(tab)\"\n    [id]=\"_getTabLabelId(i)\"\n    [index]=\"i\"\n    [state]=\"_getIndicatorType(i)\"\n    [label]=\"tab.config.label.i18n | translate\"\n    [counters]=\"tab.config.counters\"\n    [isSelected]=\"selectedIndex === i\"\n    [isDisabled]=\"tab.config?.isDisabled\"\n    [data-test-id]=\"testId + '-header' + '-' + i\"\n  >\n  </qd-page-tab-header>\n</div>\n\n<div class=\"tabs-content\">\n  <ng-container *ngIf=\"!selected?.config?.isDisabled\" [ngTemplateOutlet]=\"selected?.content\"></ng-container>\n</div>\n\n<div class=\"qd-tabs-action-area\" *ngIf=\"isSubmitButtonShown()\">\n  <button qdButton (click)=\"save()\" [disabled]=\"isSubmitButtonDisabled()\" [data-test-id]=\"testId + '-submit'\">\n    {{ config?.submitButton?.i18n || \"i18n.qd.tabs.button.submit\" | translate }}\n  </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host.standalone{height:calc(100% - 50px)}:host .qd-tabs-items-container{display:flex;width:100%;flex-direction:row;flex-wrap:wrap;padding:0 1.25rem;border-bottom:.125rem solid rgb(213,213,213);background-color:#fff;gap:0 .9375rem}@media (max-width: 599.98px){:host .qd-tabs-items-container{padding:0 .9375rem}}@media (max-width: 1279.98px){:host .qd-tabs-items-container.scrollable{flex-wrap:nowrap;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none}}:host .tabs-content{flex:1 1 auto}:host .qd-tabs-action-area{display:flex;width:100%;height:50px;justify-content:flex-end}:host .qd-tabs-action-area button{margin-right:1.25rem}\n"] }]
+        }], propDecorators: { config: [{
                 type: Input
             }], testId: [{
                 type: Input,
                 args: ['data-test-id']
             }], tabSelection: [{
                 type: Output
+            }], _tabs: [{
+                type: ContentChildren,
+                args: [forwardRef(() => QdPageTabComponent)]
             }] } });
 
 class QdPageSubmitActionService {
@@ -34278,93 +34619,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }] });
 
-// @ts-strict-ignore
-/**
- * The **QdPageTab** is a single tab inside the **QdPageTabs** within a **QdPage**.
- */
-class QdPageTabComponent extends CdkStep {
-    translate = inject(TranslateService);
-    /**
-     * Configuration of QdPageTabComponent.
-     *
-     * * @note The use of CDK attributes is not permitted. Please configure this component here.
-     */
-    config;
-    /** Form control for this tab. */
-    set tabControl(tabControl) {
-        this.stepControl = tabControl;
-    }
-    get tabControl() {
-        return this.stepControl;
-    }
-    infoBanners;
-    _destroyed$ = new Subject();
-    constructor() {
-        const tabs = inject(QdPageTabsComponent);
-        const stepperOptions = inject(STEPPER_GLOBAL_OPTIONS, { optional: true });
-        super(tabs, stepperOptions);
-    }
-    ngOnInit() {
-        this.validateLabel();
-        if (this.tabControl)
-            this.initErrorCheck();
-    }
-    ngOnChanges(changes) {
-        super.ngOnChanges();
-        ['label', 'errorMessage', 'state']
-            .filter(inputName => !!changes[inputName])
-            .forEach(inputName => this.blockCdkInput(inputName));
-    }
-    ngOnDestroy() {
-        this._destroyed$.complete();
-    }
-    blockCdkInput(inputName) {
-        throw new Error(`Quadrel Framework | QdPageTab - The use of the "${inputName}" attribute is not permitted. Please use QdPageTabConfig instead.`);
-    }
-    validateLabel() {
-        if (!this.config?.label?.i18n)
-            console.error('Quadrel Framework | QdPageTab - Please provide a label for the tab.');
-    }
-    initErrorCheck() {
-        this.tabControl.statusChanges.pipe(takeUntil$1(this._destroyed$)).subscribe(() => {
-            if (this.hasAnyError(this.tabControl)) {
-                this.interacted = true;
-            }
-        });
-    }
-    hasAnyError(control) {
-        if (control.errors && control.touched)
-            return true;
-        if (control instanceof FormGroup) {
-            return Object.values(control.controls).some(control => this.hasAnyError(control));
-        }
-        if (control instanceof FormArray) {
-            return control.controls.some(control => this.hasAnyError(control));
-        }
-        return false;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageTabComponent, isStandalone: true, selector: "qd-page-tab", inputs: { config: "config", tabControl: "tabControl" }, providers: [
-            { provide: CdkStep, useExisting: QdPageTabComponent },
-            { provide: STEPPER_GLOBAL_OPTIONS, useValue: { showError: true } }
-        ], queries: [{ propertyName: "infoBanners", predicate: QdPageInfoBannerComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template>\n  <div class=\"page-info-banners\">\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".page-info-banners:has(>qd-page-info-banner:not(.qd-page-info-banner-empty)){padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}.page-info-banners>qd-page-info-banner:last-child{margin-bottom:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'qd-page-tab', providers: [
-                        { provide: CdkStep, useExisting: QdPageTabComponent },
-                        { provide: STEPPER_GLOBAL_OPTIONS, useValue: { showError: true } }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true // inherited by CdkStep
-                    , template: "<ng-template>\n  <div class=\"page-info-banners\">\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".page-info-banners:has(>qd-page-info-banner:not(.qd-page-info-banner-empty)){padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}.page-info-banners>qd-page-info-banner:last-child{margin-bottom:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { config: [{
-                type: Input
-            }], tabControl: [{
-                type: Input
-            }], infoBanners: [{
-                type: ContentChildren,
-                args: [QdPageInfoBannerComponent]
-            }] } });
-
 /**
  * **qdPageTabParameterize** turns the active page tab into the `tab` query parameter
  * (`?tab=<name>`).
@@ -34395,7 +34649,6 @@ class QdPageTabsModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabsModule, declarations: [QdPageTabsAdapterDirective], imports: [CommonModule,
             TranslateModule,
-            CdkStepperModule,
             QdButtonModule,
             QdIconModule,
             QdPageTabsComponent,
@@ -34404,7 +34657,6 @@ class QdPageTabsModule {
             QdPageTabHeaderCountersComponent], exports: [QdPageTabsComponent, QdPageTabComponent, QdPageTabsAdapterDirective] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabsModule, imports: [CommonModule,
             TranslateModule,
-            CdkStepperModule,
             QdButtonModule,
             QdIconModule,
             QdPageTabsComponent] });
@@ -34415,7 +34667,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                     imports: [
                         CommonModule,
                         TranslateModule,
-                        CdkStepperModule,
                         QdButtonModule,
                         QdIconModule,
                         QdPageTabsComponent,
@@ -35072,5 +35323,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { APP_ENVIRONMENT, AVAILABLE_ICONS, BACKEND_ERROR_CODES, MockLocaleDatePipe, NavigationTileComponent, NavigationTilesComponent, QD_DIALOG_CONFIRMATION_RESOLVER_TOKEN, QD_FILE_MANAGER_TOKEN, QD_FILE_UPLOAD_MANAGER_TOKEN, QD_FORM_OPTIONS_RESOLVER, QD_PAGE_OBJECT_RESOLVER_TOKEN, QD_PAGE_STEP_RESOLVER_TOKEN, QD_POPOVER_TOP_FIRST, QD_SAFE_BOTTOM_OFFSET, QD_TABLE_DATA_RESOLVER_TOKEN, QD_UPLOAD_HTTP_OPTIONS, QdButtonComponent, QdButtonGhostDirective, QdButtonGridComponent, QdButtonLinkDirective, QdButtonModule, QdButtonStackButtonComponent, QdButtonStackComponent, QdCheckboxChipsComponent, QdCheckboxComponent, QdCheckboxesComponent, QdChipComponent, QdChipModule, QdColumnAutoFillDirective, QdColumnBreakBeforeDirective, QdColumnDirective, QdColumnDisableResponsiveColspansDirective, QdColumnFullGridWidthDirective, QdColumnNextInSameRowDirective, QdColumnsDirective, QdColumnsDisableAutoFillDirective, QdColumnsDisableResponsiveColspansDirective, QdColumnsMaxDirective, QdCommentsComponent, QdCommentsModule, QdConnectFormStateToPageDirective, QdConnectorTableContextDirective, QdConnectorTableFilterDirective, QdConnectorTableSearchDirective, QdContactCardComponent, QdContactCardModule, QdContainerPairsCaptionComponent, QdContainerPairsContainerComponent, QdContainerPairsHeaderComponent, QdContainerPairsItemComponent, QdContainerPairsValueComponent, QdContextService, QdCoreModule, QdDatepickerComponent, QdDialogActionComponent, QdDialogAuthSessionEndComponent, QdDialogAuthSessionEndService, QdDialogComponent, QdDialogConfirmationComponent, QdDialogConfirmationErrorDirective, QdDialogConfirmationInfoDirective, QdDialogConfirmationSuccessDirective, QdDialogModule, QdDialogRecordStepperComponent, QdDialogService, QdDialogSize, QdDisabledDirective, QdDropdownComponent, QdFileCollectorComponent, QdFileCollectorModule, QdFileSizePipe$1 as QdFileSizePipe, QdFileUploadComponent, QdFileUploadService, QdFilterComponent, QdFilterFormItemsComponent, QdFilterModule, QdFilterRestParamBuilder, QdFilterService, QdFooterActionType, QdFormArray, QdFormBuilder, QdFormControl, QdFormGroup, QdFormModule, QdGridComponent, QdGridModule, QdHorizontalPairsCaptionComponent, QdHorizontalPairsComponent, QdHorizontalPairsItemComponent, QdHorizontalPairsValueComponent, QdIconButtonComponent, QdIconComponent, QdIconModule, QdImageComponent, QdImageModule, QdIndeterminateProgressBarComponent, QdInputComponent, QdListModule, QdMenuButtonComponent, QdMockBreakpointService, QdMockButtonComponent, QdMockButtonGhostDirective, QdMockButtonGridComponent, QdMockButtonLinkDirective, QdMockButtonModule, QdMockButtonStackButtonComponent, QdMockButtonStackComponent, QdMockCalendarComponent, QdMockCheckboxChipsComponent, QdMockCheckboxComponent, QdMockCheckboxesComponent, QdMockChipComponent, QdMockChipModule, QdMockColumnDirective, QdMockColumnsDirective, QdMockContactCardComponent, QdMockContactCardModule, QdMockContainerPairsCaptionComponent, QdMockContainerPairsContainerComponent, QdMockContainerPairsHeaderComponent, QdMockContainerPairsItemComponent, QdMockContainerPairsValueComponent, QdMockCoreModule, QdMockCounterBadgeComponent, QdMockDatepickerComponent, QdMockDisabledDirective, QdMockDropdownComponent, QdMockFileCollectorComponent, QdMockFileCollectorModule, QdMockFilterCategoryBooleanComponent, QdMockFilterCategoryComponent, QdMockFilterCategoryDateComponent, QdMockFilterCategoryDateRangeComponent, QdMockFilterCategoryFreeTextComponent, QdMockFilterCategorySelectComponent, QdMockFilterComponent, QdMockFilterFormItemsComponent, QdMockFilterItemBooleanComponent, QdMockFilterItemDateComponent, QdMockFilterItemDateRangeComponent, QdMockFilterItemFreeTextComponent, QdMockFilterItemMultiSelectComponent, QdMockFilterItemSingleSelectComponent, QdMockFilterModule, QdMockFilterService, QdMockFormErrorComponent, QdMockFormGroupErrorComponent, QdMockFormHintComponent, QdMockFormLabelComponent, QdMockFormReadonlyComponent, QdMockFormViewonlyComponent, QdMockFormsModule, QdMockGridModule, QdMockIconButtonComponent, QdMockIconComponent, QdMockIconModule, QdMockImageComponent, QdMockImageModule, QdMockIndeterminateProgressBarComponent, QdMockInputComponent, QdMockListModule, QdMockNavigationTileComponent, QdMockNavigationTilesComponent, QdMockNavigationTilesModule, QdMockNotificationComponent, QdMockNotificationContentComponent, QdMockNotificationsComponent, QdMockNotificationsModule, QdMockNotificationsService, QdMockPageComponent, QdMockPageModule, QdMockPercentageProgressBarComponent, QdMockPinCodeComponent, QdMockPlaceHolderModule, QdMockPopoverOnClickDirective, QdMockProgressBarModule, QdMockQdPlaceHolderComponent, QdMockRadioButtonsComponent, QdMockRwdDisabledDirective, QdMockSearchComponent, QdMockSearchModule, QdMockSectionComponent, QdMockSectionModule, QdMockShellComponent, QdMockShellFooterComponent, QdMockShellHeaderBannerComponent, QdMockShellHeaderComponent, QdMockShellHeaderSearchComponent, QdMockShellHeaderWidgetComponent, QdMockShellModule, QdMockShellToolbarComponent, QdMockShellToolbarItemComponent, QdMockStatusIndicatorCaptionComponent, QdMockStatusIndicatorComponent, QdMockStatusIndicatorItemComponent, QdMockStatusIndicatorModule, QdMockStatusPairsCaptionComponent, QdMockStatusPairsComponent, QdMockStatusPairsErrorComponent, QdMockStatusPairsItemComponent, QdMockStatusPairsValueComponent, QdMockSwitchComponent, QdMockSwitchesComponent, QdMockTableComponent, QdMockTableModule, QdMockTextSectionComponent, QdMockTextSectionHeadlineComponent, QdMockTextSectionModule, QdMockTextSectionParagraphComponent, QdMockTextareaComponent, QdMockTileButtonListComponent, QdMockTileComponent, QdMockTileTextListComponent, QdMockTileTextListItemComponent, QdMockTileTitleComponent, QdMockTilesContainerComponent, QdMockTilesContainerTitleComponent, QdMockTilesModule, QdMockTranslatePipe, QdMockVisuallyHiddenDirective, QdMultiInputComponent, QdNavigationTilesModule, QdNotificationComponent, QdNotificationContentComponent, QdNotificationsComponent, QdNotificationsHttpInterceptorService, QdNotificationsModule, QdNotificationsService, QdNotificationsSnackbarListenerDirective, QdNumberInputService, QdPageComponent, QdPageControlPanelComponent, QdPageFooterComponent, QdPageFooterCustomContentDirective, QdPageInfoBannerComponent, QdPageModule, QdPageStepComponent, QdPageStepperAdapterDirective, QdPageStepperComponent, QdPageStepperModule, QdPageStoreService, QdPageTabComponent, QdPageTabsAdapterDirective, QdPageTabsComponent, QdPageTabsModule, QdPanelSectionActionsComponent, QdPanelSectionComponent, QdPanelSectionModule, QdPanelSectionStatusComponent, QdPanelSectionTextParagraphComponent, QdPendingChangesGuardDirective, QdPercentageProgressBarComponent, QdPinCodeComponent, QdPlaceHolderComponent, QdPlaceHolderModule, QdPlaceholderPipe, QdProgressBarModule, QdProjectionGuardComponent, QdPushEventsService, QdQuickEditComponent, QdQuickEditModule, QdRadioButtonsComponent, QdRichtextComponent, QdRouterQueryParamHubService, QdRwdDisabledDirective, QdSearchComponent, QdSearchModule, QdSearchService, QdSectionAdapterDirective, QdSectionComponent, QdSectionModule, QdSectionToolbarComponent, QdShellComponent, QdShellModule, QdSortDirection, QdSpinnerComponent, QdSpinnerModule, QdStatusIndicatorComponent, QdStatusIndicatorModule, QdStatusPairsCaptionComponent, QdStatusPairsComponent, QdStatusPairsErrorComponent, QdStatusPairsItemComponent, QdStatusPairsValueComponent, QdSubgridComponent, QdSwitchComponent, QdSwitchesComponent, QdTableComponent, QdTableModule, QdTableSpringTools, QdTextSectionComponent, QdTextSectionHeadlineComponent, QdTextSectionModule, QdTextSectionParagraphComponent, QdTextareaComponent, QdTileButtonListComponent, QdTileComponent, QdTileTextListComponent, QdTileTextListItemComponent, QdTileTitleComponent, QdTilesComponent, QdTilesModule, QdTilesTitleComponent, QdTooltipAtIntersectionDirective, QdTooltipIconComponent, QdTreeComponent, QdTreeModule, QdTreeRowExpanderService, QdUiMockModule, QdUiModule, QdUploadErrorType, QdValidators, QdViewportAdaptiveDirective, QdVisuallyHiddenDirective, chipColorDefault, createMetadataStream, qdFilterParameterize, qdMergeParams, qdPageTabParameterize, qdPaginationParameterize, qdSearchParameterize, qdSortParameterize, qdTableQueryParameterize, qdWrapParams, quadrelIconNames, updateHtmlLang };
+export { APP_ENVIRONMENT, AVAILABLE_ICONS, BACKEND_ERROR_CODES, MockLocaleDatePipe, NavigationTileComponent, NavigationTilesComponent, QD_DIALOG_CONFIRMATION_RESOLVER_TOKEN, QD_FILE_MANAGER_TOKEN, QD_FILE_UPLOAD_MANAGER_TOKEN, QD_FORM_OPTIONS_RESOLVER, QD_PAGE_OBJECT_RESOLVER_TOKEN, QD_PAGE_STEP_RESOLVER_TOKEN, QD_POPOVER_TOP_FIRST, QD_SAFE_BOTTOM_OFFSET, QD_TABLE_DATA_RESOLVER_TOKEN, QD_UPLOAD_HTTP_OPTIONS, QdButtonComponent, QdButtonGhostDirective, QdButtonGridComponent, QdButtonLinkDirective, QdButtonModule, QdButtonStackButtonComponent, QdButtonStackComponent, QdCheckboxChipsComponent, QdCheckboxComponent, QdCheckboxesComponent, QdChipComponent, QdChipModule, QdColumnAutoFillDirective, QdColumnBreakBeforeDirective, QdColumnDirective, QdColumnDisableResponsiveColspansDirective, QdColumnFullGridWidthDirective, QdColumnNextInSameRowDirective, QdColumnsDirective, QdColumnsDisableAutoFillDirective, QdColumnsDisableResponsiveColspansDirective, QdColumnsMaxDirective, QdCommentsComponent, QdCommentsModule, QdConnectFormStateToPageDirective, QdConnectorTableContextDirective, QdConnectorTableFilterDirective, QdConnectorTableSearchDirective, QdContactCardComponent, QdContactCardModule, QdContainerPairsCaptionComponent, QdContainerPairsContainerComponent, QdContainerPairsHeaderComponent, QdContainerPairsItemComponent, QdContainerPairsValueComponent, QdContextService, QdCoreModule, QdDatepickerComponent, QdDialogActionComponent, QdDialogAuthSessionEndComponent, QdDialogAuthSessionEndService, QdDialogComponent, QdDialogConfirmationComponent, QdDialogConfirmationErrorDirective, QdDialogConfirmationInfoDirective, QdDialogConfirmationSuccessDirective, QdDialogModule, QdDialogRecordStepperComponent, QdDialogService, QdDialogSize, QdDisabledDirective, QdDropdownComponent, QdFileCollectorComponent, QdFileCollectorModule, QdFileSizePipe$1 as QdFileSizePipe, QdFileUploadComponent, QdFileUploadService, QdFilterComponent, QdFilterFormItemsComponent, QdFilterModule, QdFilterRestParamBuilder, QdFilterService, QdFooterActionType, QdFormArray, QdFormBuilder, QdFormControl, QdFormGroup, QdFormModule, QdGridComponent, QdGridModule, QdHorizontalPairsCaptionComponent, QdHorizontalPairsComponent, QdHorizontalPairsItemComponent, QdHorizontalPairsValueComponent, QdIconButtonComponent, QdIconComponent, QdIconModule, QdImageComponent, QdImageModule, QdIndeterminateProgressBarComponent, QdInputComponent, QdListModule, QdMenuButtonComponent, QdMockBreakpointService, QdMockButtonComponent, QdMockButtonGhostDirective, QdMockButtonGridComponent, QdMockButtonLinkDirective, QdMockButtonModule, QdMockButtonStackButtonComponent, QdMockButtonStackComponent, QdMockCalendarComponent, QdMockCheckboxChipsComponent, QdMockCheckboxComponent, QdMockCheckboxesComponent, QdMockChipComponent, QdMockChipModule, QdMockColumnDirective, QdMockColumnsDirective, QdMockContactCardComponent, QdMockContactCardModule, QdMockContainerPairsCaptionComponent, QdMockContainerPairsContainerComponent, QdMockContainerPairsHeaderComponent, QdMockContainerPairsItemComponent, QdMockContainerPairsValueComponent, QdMockCoreModule, QdMockCounterBadgeComponent, QdMockDatepickerComponent, QdMockDisabledDirective, QdMockDropdownComponent, QdMockFileCollectorComponent, QdMockFileCollectorModule, QdMockFilterCategoryBooleanComponent, QdMockFilterCategoryComponent, QdMockFilterCategoryDateComponent, QdMockFilterCategoryDateRangeComponent, QdMockFilterCategoryFreeTextComponent, QdMockFilterCategorySelectComponent, QdMockFilterComponent, QdMockFilterFormItemsComponent, QdMockFilterItemBooleanComponent, QdMockFilterItemDateComponent, QdMockFilterItemDateRangeComponent, QdMockFilterItemFreeTextComponent, QdMockFilterItemMultiSelectComponent, QdMockFilterItemSingleSelectComponent, QdMockFilterModule, QdMockFilterService, QdMockFormErrorComponent, QdMockFormGroupErrorComponent, QdMockFormHintComponent, QdMockFormLabelComponent, QdMockFormReadonlyComponent, QdMockFormViewonlyComponent, QdMockFormsModule, QdMockGridModule, QdMockIconButtonComponent, QdMockIconComponent, QdMockIconModule, QdMockImageComponent, QdMockImageModule, QdMockIndeterminateProgressBarComponent, QdMockInputComponent, QdMockListModule, QdMockNavigationTileComponent, QdMockNavigationTilesComponent, QdMockNavigationTilesModule, QdMockNotificationComponent, QdMockNotificationContentComponent, QdMockNotificationsComponent, QdMockNotificationsModule, QdMockNotificationsService, QdMockPageComponent, QdMockPageModule, QdMockPercentageProgressBarComponent, QdMockPinCodeComponent, QdMockPlaceHolderModule, QdMockPopoverOnClickDirective, QdMockProgressBarModule, QdMockQdPlaceHolderComponent, QdMockRadioButtonsComponent, QdMockRwdDisabledDirective, QdMockSearchComponent, QdMockSearchModule, QdMockSectionComponent, QdMockSectionModule, QdMockShellComponent, QdMockShellFooterComponent, QdMockShellHeaderBannerComponent, QdMockShellHeaderComponent, QdMockShellHeaderSearchComponent, QdMockShellHeaderWidgetComponent, QdMockShellModule, QdMockShellToolbarComponent, QdMockShellToolbarItemComponent, QdMockStatusIndicatorCaptionComponent, QdMockStatusIndicatorComponent, QdMockStatusIndicatorItemComponent, QdMockStatusIndicatorModule, QdMockStatusPairsCaptionComponent, QdMockStatusPairsComponent, QdMockStatusPairsErrorComponent, QdMockStatusPairsItemComponent, QdMockStatusPairsValueComponent, QdMockSwitchComponent, QdMockSwitchesComponent, QdMockTableComponent, QdMockTableModule, QdMockTextSectionComponent, QdMockTextSectionHeadlineComponent, QdMockTextSectionModule, QdMockTextSectionParagraphComponent, QdMockTextareaComponent, QdMockTileButtonListComponent, QdMockTileComponent, QdMockTileTextListComponent, QdMockTileTextListItemComponent, QdMockTileTitleComponent, QdMockTilesContainerComponent, QdMockTilesContainerTitleComponent, QdMockTilesModule, QdMockTranslatePipe, QdMockVisuallyHiddenDirective, QdMultiInputComponent, QdNavigationTilesModule, QdNotificationComponent, QdNotificationContentComponent, QdNotificationsComponent, QdNotificationsHttpInterceptorService, QdNotificationsModule, QdNotificationsService, QdNotificationsSnackbarListenerDirective, QdNumberInputService, QdPageComponent, QdPageControlPanelComponent, QdPageFooterComponent, QdPageFooterCustomContentDirective, QdPageInfoBannerComponent, QdPageModule, QdPageStepComponent, QdPageStepperAdapterDirective, QdPageStepperComponent, QdPageStepperModule, QdPageStoreService, QdPageTabComponent, QdPageTabsAdapterDirective, QdPageTabsComponent, QdPageTabsModule, QdPanelSectionActionsComponent, QdPanelSectionComponent, QdPanelSectionModule, QdPanelSectionStatusComponent, QdPanelSectionTextParagraphComponent, QdPendingChangesGuardDirective, QdPercentageProgressBarComponent, QdPinCodeComponent, QdPlaceHolderComponent, QdPlaceHolderModule, QdPlaceholderPipe, QdProgressBarModule, QdProjectionGuardComponent, QdPushEventsService, QdQuickEditComponent, QdQuickEditModule, QdRadioButtonsComponent, QdRichtextComponent, QdRouterQueryParamHubService, QdRwdDisabledDirective, QdSearchComponent, QdSearchModule, QdSearchService, QdSectionAdapterDirective, QdSectionComponent, QdSectionModule, QdSectionToolbarComponent, QdShellComponent, QdShellModule, QdSortDirection, QdSpinnerComponent, QdSpinnerModule, QdStatusIndicatorComponent, QdStatusIndicatorModule, QdStatusPairsCaptionComponent, QdStatusPairsComponent, QdStatusPairsErrorComponent, QdStatusPairsItemComponent, QdStatusPairsValueComponent, QdSubgridComponent, QdSwitchComponent, QdSwitchesComponent, QdTableComponent, QdTableModule, QdTableSpringTools, QdTextSectionComponent, QdTextSectionHeadlineComponent, QdTextSectionModule, QdTextSectionParagraphComponent, QdTextareaComponent, QdTileButtonListComponent, QdTileComponent, QdTileTextListComponent, QdTileTextListItemComponent, QdTileTitleComponent, QdTilesComponent, QdTilesModule, QdTilesTitleComponent, QdTooltipAtIntersectionDirective, QdTooltipIconComponent, QdTreeComponent, QdTreeModule, QdTreeRowExpanderService, QdUiMockModule, QdUiModule, QdUploadErrorType, QdValidators, QdViewportAdaptiveDirective, QdVisuallyHiddenDirective, WHITELIST_ERROR_CODES, chipColorDefault, createMetadataStream, qdFilterParameterize, qdMergeParams, qdPageTabParameterize, qdPaginationParameterize, qdSearchParameterize, qdSortParameterize, qdTableQueryParameterize, qdWrapParams, quadrelIconNames, updateHtmlLang };
 //# sourceMappingURL=quadrel-enterprise-ui-framework.mjs.map