@quadrel-enterprise-ui/framework 20.22.0 → 20.23.1-beta.196.1

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Directive, InjectionToken, HostBinding, Input, ViewEncapsulation, Component, Injectable, Injector, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, NgModule, EventEmitter, Output, Renderer2, Pipe, ViewContainerRef, NO_ERRORS_SCHEMA, DestroyRef, SecurityContext, NgZone, ViewChildren, forwardRef, ContentChildren, ContentChild, isDevMode, QueryList, 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';
@@ -3126,14 +3126,15 @@ class QdMockCheckboxComponent {
     value;
     disabled = false;
     testId = 'checkbox';
+    valueChange = new EventEmitter();
     get dataTestId() {
         return this.testId;
     }
-    handleClick(value) {
-        return { value };
+    handleClick() {
+        this.valueChange.emit(this.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMockCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdMockCheckboxComponent, isStandalone: false, selector: "qd-checkbox", inputs: { inputData: "inputData", value: "value", disabled: "disabled", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.dataTestId" } }, ngImport: i0, template: 'inputData: {{inputData | json}}, value: {{value}}, disabled: {{disabled | json}}', isInline: true, dependencies: [{ kind: "pipe", type: i1.JsonPipe, name: "json" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdMockCheckboxComponent, isStandalone: false, selector: "qd-checkbox", inputs: { inputData: "inputData", value: "value", disabled: "disabled", testId: ["data-test-id", "testId"] }, outputs: { valueChange: "valueChange" }, host: { listeners: { "click": "handleClick()" }, properties: { "attr.data-test-id": "this.dataTestId" } }, ngImport: i0, template: 'inputData: {{inputData | json}}, value: {{value}}, disabled: {{disabled | json}}', isInline: true, dependencies: [{ kind: "pipe", type: i1.JsonPipe, name: "json" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMockCheckboxComponent, decorators: [{
             type: Component,
@@ -3151,9 +3152,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             }], testId: [{
                 type: Input,
                 args: ['data-test-id']
+            }], valueChange: [{
+                type: Output
             }], dataTestId: [{
                 type: HostBinding,
                 args: ['attr.data-test-id']
+            }], handleClick: [{
+                type: HostListener,
+                args: ['click']
             }] } });
 
 // @ts-strict-ignore
@@ -8081,6 +8087,8 @@ class QdPopoverOnClickDirective {
     handleOpenKey(event) {
         if (!this.qdPopoverEnableKeyControl)
             return;
+        if (this.overlayRef?.hasAttached())
+            return;
         if (this.qdPopoverStopPropagation)
             event.stopPropagation();
         event.preventDefault();
@@ -8225,7 +8233,7 @@ class QdPopoverOnClickDirective {
         this.unsubscribeAll();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPopoverOnClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QdPopoverOnClickDirective, isStandalone: false, selector: "[qdPopoverOnClick]", inputs: { qdPopoverOnClick: "qdPopoverOnClick", positionStrategy: "positionStrategy", qdPopoverCloseStrategy: "qdPopoverCloseStrategy", qdPopoverDisabled: "qdPopoverDisabled", qdPopoverStopPropagation: "qdPopoverStopPropagation", qdPopoverBackgroundColor: "qdPopoverBackgroundColor", qdPopoverMaxHeight: "qdPopoverMaxHeight", qdPopoverMinWidth: "qdPopoverMinWidth", qdPopoverMaxWidth: "qdPopoverMaxWidth", qdPopoverAutoSize: "qdPopoverAutoSize", qdPopoverEnableKeyControl: "qdPopoverEnableKeyControl" }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "click": "handleClick($event)", "document:click": "handleDocumentClick($event)", "keydown.escape": "handleCloseKeys()", "keydown.tab": "handleCloseKeys()", "keydown.space": "handleOpenKey($event)" } }, providers: [QdPopoverSizingService], exportAs: ["qdPopoverOnClick"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QdPopoverOnClickDirective, isStandalone: false, selector: "[qdPopoverOnClick]", inputs: { qdPopoverOnClick: "qdPopoverOnClick", positionStrategy: "positionStrategy", qdPopoverCloseStrategy: "qdPopoverCloseStrategy", qdPopoverDisabled: "qdPopoverDisabled", qdPopoverStopPropagation: "qdPopoverStopPropagation", qdPopoverBackgroundColor: "qdPopoverBackgroundColor", qdPopoverMaxHeight: "qdPopoverMaxHeight", qdPopoverMinWidth: "qdPopoverMinWidth", qdPopoverMaxWidth: "qdPopoverMaxWidth", qdPopoverAutoSize: "qdPopoverAutoSize", qdPopoverEnableKeyControl: "qdPopoverEnableKeyControl" }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "click": "handleClick($event)", "document:click": "handleDocumentClick($event)", "keydown.escape": "handleCloseKeys()", "keydown.tab": "handleCloseKeys()", "keydown.enter": "handleOpenKey($event)", "keydown.space": "handleOpenKey($event)" } }, providers: [QdPopoverSizingService], exportAs: ["qdPopoverOnClick"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPopoverOnClickDirective, decorators: [{
             type: Directive,
@@ -8274,6 +8282,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: HostListener,
                 args: ['keydown.tab']
             }], handleOpenKey: [{
+                type: HostListener,
+                args: ['keydown.enter', ['$event']]
+            }, {
                 type: HostListener,
                 args: ['keydown.space', ['$event']]
             }] } });
@@ -8567,6 +8578,7 @@ const getClearable = (config) => get(config, 'clearable', false);
 const getValue = (config) => get(config, 'value', '');
 const getPlaceholder = (config) => get(config, 'placeholder.i18n', '');
 const getHasAutofocus = (config) => get(config, 'hasAutofocus', false);
+const getHasFocusableSuffix = (config) => get(config, 'hasFocusableSuffix', false);
 /**
  * Textarea form properties
  *
@@ -9669,7 +9681,7 @@ class QdCheckboxesComponent {
             },
             QdCheckboxesService,
             QdFormsActionEmitterService
-        ], viewQueries: [{ propertyName: "checkboxes", predicate: QdCheckboxComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n  [isDisabled]=\"isLabelDisabled\"\n></qd-form-label>\n\n<div class=\"qd-checkboxes__input-section\" *ngIf=\"!readonly && !viewonly\">\n  <qd-filter-form-items\n    *ngIf=\"filter\"\n    (filterValueChange)=\"changeValue($event)\"\n    [data-test-id]=\"testId + '-filter-form'\"\n  ></qd-filter-form-items>\n\n  <div class=\"qd-checkboxes__checkbox-section\">\n    <qd-checkbox\n      *ngFor=\"let checkbox of checkboxesListForView\"\n      [inputData]=\"checkbox\"\n      [(value)]=\"checkboxesValues[checkbox.index]\"\n      [disabled]=\"checkbox.disabled || disabled\"\n      (click)=\"handleClick(checkbox)\"\n      [data-test-id]=\"testId + '-checkbox-' + checkbox.index\"\n    ></qd-checkbox>\n  </div>\n</div>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n  [hint]=\"hint\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"selectedValuesTranslated\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"selectedValuesTranslated\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-checkboxes{display:block;margin-bottom:.75rem}@media (max-width: 959.98px){.qd-checkboxes{height:initial}}.qd-checkboxes .qd-checkboxes__input-section{display:block;flex-direction:column;margin-bottom:.3125rem}.qd-checkboxes .qd-checkboxes__checkbox-section{display:flex;min-height:2.25rem;flex-direction:row}@media (max-width: 959.98px){.qd-checkboxes .qd-checkboxes__checkbox-section{height:initial;flex-direction:column}}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section{display:flex;flex-direction:column}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section .qd-checkbox:not(:last-child){margin-bottom:.5rem}.qd-checkboxes.qd-checkboxes-disabled{pointer-events:none}.qd-checkboxes-readonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--readonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--readonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}.qd-checkboxes-viewonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdCheckboxComponent, selector: "qd-checkbox", inputs: ["inputData", "value", "data-test-id", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: QdFilterFormItemsComponent, selector: "qd-filter-form-items", inputs: ["inputFilterValue", "data-test-id"], outputs: ["filterValueChange"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }], encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "checkboxes", predicate: QdCheckboxComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n  [isDisabled]=\"isLabelDisabled\"\n></qd-form-label>\n\n<div class=\"qd-checkboxes__input-section\" *ngIf=\"!readonly && !viewonly\">\n  <qd-filter-form-items\n    *ngIf=\"filter\"\n    (filterValueChange)=\"changeValue($event)\"\n    [data-test-id]=\"testId + '-filter-form'\"\n  ></qd-filter-form-items>\n\n  <div class=\"qd-checkboxes__checkbox-section\">\n    <qd-checkbox\n      *ngFor=\"let checkbox of checkboxesListForView\"\n      [inputData]=\"checkbox\"\n      [value]=\"checkboxesValues[checkbox.index]\"\n      [disabled]=\"checkbox.disabled || disabled\"\n      (valueChange)=\"handleClick(checkbox)\"\n      [data-test-id]=\"testId + '-checkbox-' + checkbox.index\"\n    ></qd-checkbox>\n  </div>\n</div>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n  [hint]=\"hint\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"selectedValuesTranslated\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"selectedValuesTranslated\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-checkboxes{display:block;margin-bottom:.75rem}@media (max-width: 959.98px){.qd-checkboxes{height:initial}}.qd-checkboxes .qd-checkboxes__input-section{display:block;flex-direction:column;margin-bottom:.3125rem}.qd-checkboxes .qd-checkboxes__checkbox-section{display:flex;min-height:2.25rem;flex-direction:row}@media (max-width: 959.98px){.qd-checkboxes .qd-checkboxes__checkbox-section{height:initial;flex-direction:column}}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section{display:flex;flex-direction:column}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section .qd-checkbox:not(:last-child){margin-bottom:.5rem}.qd-checkboxes.qd-checkboxes-disabled{pointer-events:none}.qd-checkboxes-readonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--readonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--readonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}.qd-checkboxes-viewonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdCheckboxComponent, selector: "qd-checkbox", inputs: ["inputData", "value", "data-test-id", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: QdFilterFormItemsComponent, selector: "qd-filter-form-items", inputs: ["inputFilterValue", "data-test-id"], outputs: ["filterValueChange"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdCheckboxesComponent, decorators: [{
             type: Component,
@@ -9681,7 +9693,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         },
                         QdCheckboxesService,
                         QdFormsActionEmitterService
-                    ], encapsulation: ViewEncapsulation.None, host: { class: 'qd-checkboxes' }, standalone: false, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n  [isDisabled]=\"isLabelDisabled\"\n></qd-form-label>\n\n<div class=\"qd-checkboxes__input-section\" *ngIf=\"!readonly && !viewonly\">\n  <qd-filter-form-items\n    *ngIf=\"filter\"\n    (filterValueChange)=\"changeValue($event)\"\n    [data-test-id]=\"testId + '-filter-form'\"\n  ></qd-filter-form-items>\n\n  <div class=\"qd-checkboxes__checkbox-section\">\n    <qd-checkbox\n      *ngFor=\"let checkbox of checkboxesListForView\"\n      [inputData]=\"checkbox\"\n      [(value)]=\"checkboxesValues[checkbox.index]\"\n      [disabled]=\"checkbox.disabled || disabled\"\n      (click)=\"handleClick(checkbox)\"\n      [data-test-id]=\"testId + '-checkbox-' + checkbox.index\"\n    ></qd-checkbox>\n  </div>\n</div>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n  [hint]=\"hint\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"selectedValuesTranslated\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"selectedValuesTranslated\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-checkboxes{display:block;margin-bottom:.75rem}@media (max-width: 959.98px){.qd-checkboxes{height:initial}}.qd-checkboxes .qd-checkboxes__input-section{display:block;flex-direction:column;margin-bottom:.3125rem}.qd-checkboxes .qd-checkboxes__checkbox-section{display:flex;min-height:2.25rem;flex-direction:row}@media (max-width: 959.98px){.qd-checkboxes .qd-checkboxes__checkbox-section{height:initial;flex-direction:column}}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section{display:flex;flex-direction:column}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section .qd-checkbox:not(:last-child){margin-bottom:.5rem}.qd-checkboxes.qd-checkboxes-disabled{pointer-events:none}.qd-checkboxes-readonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--readonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--readonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}.qd-checkboxes-viewonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, host: { class: 'qd-checkboxes' }, standalone: false, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n  [isDisabled]=\"isLabelDisabled\"\n></qd-form-label>\n\n<div class=\"qd-checkboxes__input-section\" *ngIf=\"!readonly && !viewonly\">\n  <qd-filter-form-items\n    *ngIf=\"filter\"\n    (filterValueChange)=\"changeValue($event)\"\n    [data-test-id]=\"testId + '-filter-form'\"\n  ></qd-filter-form-items>\n\n  <div class=\"qd-checkboxes__checkbox-section\">\n    <qd-checkbox\n      *ngFor=\"let checkbox of checkboxesListForView\"\n      [inputData]=\"checkbox\"\n      [value]=\"checkboxesValues[checkbox.index]\"\n      [disabled]=\"checkbox.disabled || disabled\"\n      (valueChange)=\"handleClick(checkbox)\"\n      [data-test-id]=\"testId + '-checkbox-' + checkbox.index\"\n    ></qd-checkbox>\n  </div>\n</div>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n  [hint]=\"hint\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"selectedValuesTranslated\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"selectedValuesTranslated\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-checkboxes{display:block;margin-bottom:.75rem}@media (max-width: 959.98px){.qd-checkboxes{height:initial}}.qd-checkboxes .qd-checkboxes__input-section{display:block;flex-direction:column;margin-bottom:.3125rem}.qd-checkboxes .qd-checkboxes__checkbox-section{display:flex;min-height:2.25rem;flex-direction:row}@media (max-width: 959.98px){.qd-checkboxes .qd-checkboxes__checkbox-section{height:initial;flex-direction:column}}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section{display:flex;flex-direction:column}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section .qd-checkbox:not(:last-child){margin-bottom:.5rem}.qd-checkboxes.qd-checkboxes-disabled{pointer-events:none}.qd-checkboxes-readonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--readonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--readonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}.qd-checkboxes-viewonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}\n"] }]
         }], ctorParameters: () => [], propDecorators: { formControlName: [{
                 type: Input
             }], values: [{
@@ -12196,7 +12208,6 @@ class QdDatepickerComponent {
     readonlyAction = false;
     viewonlyAction = false;
     language = DEFAULT_LANGUAGE;
-    qdPopoverOnClick;
     control;
     timePicker;
     _disabledDatesValidator;
@@ -14701,6 +14712,12 @@ class QdPinCodeComponent {
     _subs = new Subscription();
     _onChange = () => { };
     _onTouch = () => { };
+    get firstEmptyIndex() {
+        return this.pinCodeService.firstEmpty;
+    }
+    get joinedValues() {
+        return this.pinCodeService.joinedValues;
+    }
     get errors() {
         return this.control ? this.control.errors : [];
     }
@@ -14952,7 +14969,7 @@ class QdPinCodeComponent {
             },
             QdPinCodeService,
             QdFormsActionEmitterService
-        ], viewQueries: [{ propertyName: "inputsList", predicate: ["input"], 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<ng-container *ngFor=\"let i of iterable(codeLength); let index = index; let last = last\">\n  <input\n    #input\n    *ngIf=\"!readonly && !viewonly\"\n    [ngClass]=\"'qd-pin-code__input qd-pin-code--input-' + index + (last ? ' qd-pin-code__input--last' : '')\"\n    [attr.data-test-id]=\"testId + '-input-' + index\"\n    [type]=\"codeHidden ? 'password' : inputType\"\n    [tabindex]=\"pinCodeService.firstEmpty === index ? 0 : -1\"\n    (click)=\"handleCLick($event)\"\n    (keydown.backspace)=\"handleDelete($event)\"\n    (keydown.delete)=\"handleDelete($event)\"\n    (keydown.enter)=\"handleComplete()\"\n    (keypress)=\"handleInput($event)\"\n    (blur)=\"handleBlur(index)\"\n    [disabled]=\"disabled\"\n    autocomplete=\"off\"\n  />\n</ng-container>\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]=\"[pinCodeService.joinedValues]\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"[pinCodeService.joinedValues]\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [":host{display:block;height:4.5rem;margin-bottom:.75rem}:host .qd-pin-code__input{width:1.875rem;height:2.25rem;border:.0625rem solid rgb(180,180,180);margin-right:.75rem;margin-bottom:.375rem;caret-color:#fff0;cursor:default;font-size:1.5rem;font-weight:500;text-align:center}:host .qd-pin-code__input--last{margin-right:0}:host .qd-pin-code__input:focus{border-width:.125rem;border-color:#069}:host .qd-pin-code__input:active{border-width:.0625rem;border-color:#b4b4b4}:host .qd-pin-code__input:focus-visible{outline:none}:host.qd-pin-code--error .qd-pin-code__input{border-color:#c70023}:host.qd-pin-code--error .qd-pin-code__input:focus{border-width:.125rem}:host.qd-pin-code--error .qd-pin-code__input:active{border-width:.0625rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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"] }] });
+        ], viewQueries: [{ propertyName: "inputsList", predicate: ["input"], 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<ng-container *ngFor=\"let i of iterable(codeLength); let index = index; let last = last\">\n  <input\n    #input\n    *ngIf=\"!readonly && !viewonly\"\n    [ngClass]=\"'qd-pin-code__input qd-pin-code--input-' + index + (last ? ' qd-pin-code__input--last' : '')\"\n    [attr.data-test-id]=\"testId + '-input-' + index\"\n    [type]=\"codeHidden ? 'password' : inputType\"\n    [tabindex]=\"firstEmptyIndex === index ? 0 : -1\"\n    (click)=\"handleCLick($event)\"\n    (keydown.backspace)=\"handleDelete($event)\"\n    (keydown.delete)=\"handleDelete($event)\"\n    (keydown.enter)=\"handleComplete()\"\n    (keypress)=\"handleInput($event)\"\n    (blur)=\"handleBlur(index)\"\n    [disabled]=\"disabled\"\n    autocomplete=\"off\"\n  />\n</ng-container>\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]=\"[joinedValues]\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"[joinedValues]\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [":host{display:block;height:4.5rem;margin-bottom:.75rem}:host .qd-pin-code__input{width:1.875rem;height:2.25rem;border:.0625rem solid rgb(180,180,180);margin-right:.75rem;margin-bottom:.375rem;caret-color:#fff0;cursor:default;font-size:1.5rem;font-weight:500;text-align:center}:host .qd-pin-code__input--last{margin-right:0}:host .qd-pin-code__input:focus{border-width:.125rem;border-color:#069}:host .qd-pin-code__input:active{border-width:.0625rem;border-color:#b4b4b4}:host .qd-pin-code__input:focus-visible{outline:none}:host.qd-pin-code--error .qd-pin-code__input{border-color:#c70023}:host.qd-pin-code--error .qd-pin-code__input:focus{border-width:.125rem}:host.qd-pin-code--error .qd-pin-code__input:active{border-width:.0625rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPinCodeComponent, decorators: [{
             type: Component,
@@ -14964,7 +14981,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         },
                         QdPinCodeService,
                         QdFormsActionEmitterService
-                    ], host: { class: 'qd-pin-code' }, 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<ng-container *ngFor=\"let i of iterable(codeLength); let index = index; let last = last\">\n  <input\n    #input\n    *ngIf=\"!readonly && !viewonly\"\n    [ngClass]=\"'qd-pin-code__input qd-pin-code--input-' + index + (last ? ' qd-pin-code__input--last' : '')\"\n    [attr.data-test-id]=\"testId + '-input-' + index\"\n    [type]=\"codeHidden ? 'password' : inputType\"\n    [tabindex]=\"pinCodeService.firstEmpty === index ? 0 : -1\"\n    (click)=\"handleCLick($event)\"\n    (keydown.backspace)=\"handleDelete($event)\"\n    (keydown.delete)=\"handleDelete($event)\"\n    (keydown.enter)=\"handleComplete()\"\n    (keypress)=\"handleInput($event)\"\n    (blur)=\"handleBlur(index)\"\n    [disabled]=\"disabled\"\n    autocomplete=\"off\"\n  />\n</ng-container>\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]=\"[pinCodeService.joinedValues]\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"[pinCodeService.joinedValues]\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [":host{display:block;height:4.5rem;margin-bottom:.75rem}:host .qd-pin-code__input{width:1.875rem;height:2.25rem;border:.0625rem solid rgb(180,180,180);margin-right:.75rem;margin-bottom:.375rem;caret-color:#fff0;cursor:default;font-size:1.5rem;font-weight:500;text-align:center}:host .qd-pin-code__input--last{margin-right:0}:host .qd-pin-code__input:focus{border-width:.125rem;border-color:#069}:host .qd-pin-code__input:active{border-width:.0625rem;border-color:#b4b4b4}:host .qd-pin-code__input:focus-visible{outline:none}:host.qd-pin-code--error .qd-pin-code__input{border-color:#c70023}:host.qd-pin-code--error .qd-pin-code__input:focus{border-width:.125rem}:host.qd-pin-code--error .qd-pin-code__input:active{border-width:.0625rem}\n"] }]
+                    ], host: { class: 'qd-pin-code' }, 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<ng-container *ngFor=\"let i of iterable(codeLength); let index = index; let last = last\">\n  <input\n    #input\n    *ngIf=\"!readonly && !viewonly\"\n    [ngClass]=\"'qd-pin-code__input qd-pin-code--input-' + index + (last ? ' qd-pin-code__input--last' : '')\"\n    [attr.data-test-id]=\"testId + '-input-' + index\"\n    [type]=\"codeHidden ? 'password' : inputType\"\n    [tabindex]=\"firstEmptyIndex === index ? 0 : -1\"\n    (click)=\"handleCLick($event)\"\n    (keydown.backspace)=\"handleDelete($event)\"\n    (keydown.delete)=\"handleDelete($event)\"\n    (keydown.enter)=\"handleComplete()\"\n    (keypress)=\"handleInput($event)\"\n    (blur)=\"handleBlur(index)\"\n    [disabled]=\"disabled\"\n    autocomplete=\"off\"\n  />\n</ng-container>\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]=\"[joinedValues]\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"[joinedValues]\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [":host{display:block;height:4.5rem;margin-bottom:.75rem}:host .qd-pin-code__input{width:1.875rem;height:2.25rem;border:.0625rem solid rgb(180,180,180);margin-right:.75rem;margin-bottom:.375rem;caret-color:#fff0;cursor:default;font-size:1.5rem;font-weight:500;text-align:center}:host .qd-pin-code__input--last{margin-right:0}:host .qd-pin-code__input:focus{border-width:.125rem;border-color:#069}:host .qd-pin-code__input:active{border-width:.0625rem;border-color:#b4b4b4}:host .qd-pin-code__input:focus-visible{outline:none}:host.qd-pin-code--error .qd-pin-code__input{border-color:#c70023}:host.qd-pin-code--error .qd-pin-code__input:focus{border-width:.125rem}:host.qd-pin-code--error .qd-pin-code__input:active{border-width:.0625rem}\n"] }]
         }], propDecorators: { formControlName: [{
                 type: Input
             }], value: [{
@@ -29797,6 +29814,9 @@ class QdPageStepperComponent extends CdkStepper {
     allStepsValid$;
     _destroyed$ = new Subject();
     isGoingToNextStep = false;
+    get hasPageFooter() {
+        return !!this.footerService;
+    }
     constructor() {
         const _dir = inject(Directionality, { optional: true });
         const _changeDetectorRef = inject(ChangeDetectorRef);
@@ -30015,11 +30035,11 @@ class QdPageStepperComponent extends CdkStepper {
         throw new Error(`Quadrel Framework | QdPageStepper - The "${inputName}" attribute is not allowed. Please use QdPageStepperConfig instead.`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageStepperComponent, isStandalone: true, selector: "qd-page-stepper", inputs: { config: "config", testId: ["data-test-id", "testId"] }, outputs: { submitted: "submitted" }, host: { properties: { "class.standalone": "!footerService" }, classAttribute: "qd-stepper" }, providers: [{ provide: CdkStepper, useExisting: QdPageStepperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"qd-stepper-items-container\" *ngIf=\"steps.length > 1\">\n  <qd-page-step-header\n    *ngFor=\"let step of steps; let i = index\"\n    (click)=\"handleClickHeader(step, i)\"\n    [id]=\"_getStepLabelId(i)\"\n    [ngClass]=\"'qd-step'\"\n    [index]=\"i\"\n    [state]=\"_getIndicatorType(i, step.state)\"\n    [label]=\"step.config.label.i18n | translate\"\n    [selected]=\"selectedIndex === i\"\n    [active]=\"step.completed || selectedIndex === i || !linear\"\n    [optional]=\"step.optional\"\n    [locked]=\"!step.editable && i < selectedIndex\"\n  >\n  </qd-page-step-header>\n</div>\n\n<div class=\"stepper-content\">\n  <ng-container [ngTemplateOutlet]=\"selected?.content\"></ng-container>\n</div>\n\n<div class=\"qd-stepper-action-area\" *ngIf=\"!footerService\">\n  <button qdButton qdButtonGhost (click)=\"cancel()\" [data-test-id]=\"testId + '-cancel'\">\n    {{ config?.cancel?.i18n || \"i18n.qd.stepper.cancel\" | translate }}\n  </button>\n\n  <button\n    *ngIf=\"showPreviousButton(selectedIndex)\"\n    qdButton\n    qdButtonGhost\n    (click)=\"previousStep()\"\n    [data-test-id]=\"testId + '-previous'\"\n  >\n    {{ config?.previous?.i18n || \"i18n.qd.stepper.previous\" | translate }}\n  </button>\n\n  <button\n    *ngIf=\"showNextButton(selectedIndex)\"\n    qdButton\n    [disabled]=\"(selectedStepValid$ | async) === false\"\n    (click)=\"nextStep()\"\n    [data-test-id]=\"testId + '-next'\"\n  >\n    {{ config?.next?.i18n || \"i18n.qd.stepper.next\" | translate }}\n  </button>\n\n  <button\n    *ngIf=\"showSubmitButton(selectedIndex)\"\n    qdButton\n    (click)=\"submit()\"\n    [disabled]=\"(allStepsValid$ | async) === false\"\n    [data-test-id]=\"testId + '-submit'\"\n  >\n    {{ config?.submit?.i18n || \"i18n.qd.stepper.submit\" | translate }}\n  </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host.standalone{height:calc(100% - 50px)}:host .qd-stepper-items-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;padding:0 1.25rem;border-bottom:.125rem solid rgb(213,213,213);background-color:#fff;gap:0 .625rem}@media (max-width: 599.98px){:host .qd-stepper-items-container{padding:0 .9375rem}}:host .stepper-content{flex:1 1 auto}:host .qd-stepper-action-area{display:flex;width:100%;height:3.125rem;justify-content:flex-end}:host .qd-stepper-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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QdPageStepHeaderComponent, selector: "qd-page-step-header", inputs: ["state", "label", "index", "selected", "active", "optional", "locked"] }, { 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: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "pipe", type: 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: QdPageStepperComponent, isStandalone: true, selector: "qd-page-stepper", inputs: { config: "config", testId: ["data-test-id", "testId"] }, outputs: { submitted: "submitted" }, host: { properties: { "class.standalone": "!hasPageFooter" }, classAttribute: "qd-stepper" }, providers: [{ provide: CdkStepper, useExisting: QdPageStepperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"qd-stepper-items-container\" *ngIf=\"steps.length > 1\">\n  <qd-page-step-header\n    *ngFor=\"let step of steps; let i = index\"\n    (click)=\"handleClickHeader(step, i)\"\n    [id]=\"_getStepLabelId(i)\"\n    [ngClass]=\"'qd-step'\"\n    [index]=\"i\"\n    [state]=\"_getIndicatorType(i, step.state)\"\n    [label]=\"step.config.label.i18n | translate\"\n    [selected]=\"selectedIndex === i\"\n    [active]=\"step.completed || selectedIndex === i || !linear\"\n    [optional]=\"step.optional\"\n    [locked]=\"!step.editable && i < selectedIndex\"\n  >\n  </qd-page-step-header>\n</div>\n\n<div class=\"stepper-content\">\n  <ng-container [ngTemplateOutlet]=\"selected?.content\"></ng-container>\n</div>\n\n<div class=\"qd-stepper-action-area\" *ngIf=\"!hasPageFooter\">\n  <button qdButton qdButtonGhost (click)=\"cancel()\" [data-test-id]=\"testId + '-cancel'\">\n    {{ config?.cancel?.i18n || \"i18n.qd.stepper.cancel\" | translate }}\n  </button>\n\n  <button\n    *ngIf=\"showPreviousButton(selectedIndex)\"\n    qdButton\n    qdButtonGhost\n    (click)=\"previousStep()\"\n    [data-test-id]=\"testId + '-previous'\"\n  >\n    {{ config?.previous?.i18n || \"i18n.qd.stepper.previous\" | translate }}\n  </button>\n\n  <button\n    *ngIf=\"showNextButton(selectedIndex)\"\n    qdButton\n    [disabled]=\"(selectedStepValid$ | async) === false\"\n    (click)=\"nextStep()\"\n    [data-test-id]=\"testId + '-next'\"\n  >\n    {{ config?.next?.i18n || \"i18n.qd.stepper.next\" | translate }}\n  </button>\n\n  <button\n    *ngIf=\"showSubmitButton(selectedIndex)\"\n    qdButton\n    (click)=\"submit()\"\n    [disabled]=\"(allStepsValid$ | async) === false\"\n    [data-test-id]=\"testId + '-submit'\"\n  >\n    {{ config?.submit?.i18n || \"i18n.qd.stepper.submit\" | translate }}\n  </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host.standalone{height:calc(100% - 50px)}:host .qd-stepper-items-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;padding:0 1.25rem;border-bottom:.125rem solid rgb(213,213,213);background-color:#fff;gap:0 .625rem}@media (max-width: 599.98px){:host .qd-stepper-items-container{padding:0 .9375rem}}:host .stepper-content{flex:1 1 auto}:host .qd-stepper-action-area{display:flex;width:100%;height:3.125rem;justify-content:flex-end}:host .qd-stepper-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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QdPageStepHeaderComponent, selector: "qd-page-step-header", inputs: ["state", "label", "index", "selected", "active", "optional", "locked"] }, { 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: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "pipe", type: 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: QdPageStepperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-page-stepper', providers: [{ provide: CdkStepper, useExisting: QdPageStepperComponent }], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'qd-stepper', '[class.standalone]': '!footerService' }, standalone: true, imports: [
+            args: [{ selector: 'qd-page-stepper', providers: [{ provide: CdkStepper, useExisting: QdPageStepperComponent }], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'qd-stepper', '[class.standalone]': '!hasPageFooter' }, standalone: true, imports: [
                         NgFor,
                         NgIf,
                         NgClass,
@@ -30028,7 +30048,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         QdPageStepHeaderComponent,
                         TranslateModule,
                         QdButtonModule
-                    ], template: "<div class=\"qd-stepper-items-container\" *ngIf=\"steps.length > 1\">\n  <qd-page-step-header\n    *ngFor=\"let step of steps; let i = index\"\n    (click)=\"handleClickHeader(step, i)\"\n    [id]=\"_getStepLabelId(i)\"\n    [ngClass]=\"'qd-step'\"\n    [index]=\"i\"\n    [state]=\"_getIndicatorType(i, step.state)\"\n    [label]=\"step.config.label.i18n | translate\"\n    [selected]=\"selectedIndex === i\"\n    [active]=\"step.completed || selectedIndex === i || !linear\"\n    [optional]=\"step.optional\"\n    [locked]=\"!step.editable && i < selectedIndex\"\n  >\n  </qd-page-step-header>\n</div>\n\n<div class=\"stepper-content\">\n  <ng-container [ngTemplateOutlet]=\"selected?.content\"></ng-container>\n</div>\n\n<div class=\"qd-stepper-action-area\" *ngIf=\"!footerService\">\n  <button qdButton qdButtonGhost (click)=\"cancel()\" [data-test-id]=\"testId + '-cancel'\">\n    {{ config?.cancel?.i18n || \"i18n.qd.stepper.cancel\" | translate }}\n  </button>\n\n  <button\n    *ngIf=\"showPreviousButton(selectedIndex)\"\n    qdButton\n    qdButtonGhost\n    (click)=\"previousStep()\"\n    [data-test-id]=\"testId + '-previous'\"\n  >\n    {{ config?.previous?.i18n || \"i18n.qd.stepper.previous\" | translate }}\n  </button>\n\n  <button\n    *ngIf=\"showNextButton(selectedIndex)\"\n    qdButton\n    [disabled]=\"(selectedStepValid$ | async) === false\"\n    (click)=\"nextStep()\"\n    [data-test-id]=\"testId + '-next'\"\n  >\n    {{ config?.next?.i18n || \"i18n.qd.stepper.next\" | translate }}\n  </button>\n\n  <button\n    *ngIf=\"showSubmitButton(selectedIndex)\"\n    qdButton\n    (click)=\"submit()\"\n    [disabled]=\"(allStepsValid$ | async) === false\"\n    [data-test-id]=\"testId + '-submit'\"\n  >\n    {{ config?.submit?.i18n || \"i18n.qd.stepper.submit\" | translate }}\n  </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host.standalone{height:calc(100% - 50px)}:host .qd-stepper-items-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;padding:0 1.25rem;border-bottom:.125rem solid rgb(213,213,213);background-color:#fff;gap:0 .625rem}@media (max-width: 599.98px){:host .qd-stepper-items-container{padding:0 .9375rem}}:host .stepper-content{flex:1 1 auto}:host .qd-stepper-action-area{display:flex;width:100%;height:3.125rem;justify-content:flex-end}:host .qd-stepper-action-area button{margin-right:1.25rem}\n"] }]
+                    ], template: "<div class=\"qd-stepper-items-container\" *ngIf=\"steps.length > 1\">\n  <qd-page-step-header\n    *ngFor=\"let step of steps; let i = index\"\n    (click)=\"handleClickHeader(step, i)\"\n    [id]=\"_getStepLabelId(i)\"\n    [ngClass]=\"'qd-step'\"\n    [index]=\"i\"\n    [state]=\"_getIndicatorType(i, step.state)\"\n    [label]=\"step.config.label.i18n | translate\"\n    [selected]=\"selectedIndex === i\"\n    [active]=\"step.completed || selectedIndex === i || !linear\"\n    [optional]=\"step.optional\"\n    [locked]=\"!step.editable && i < selectedIndex\"\n  >\n  </qd-page-step-header>\n</div>\n\n<div class=\"stepper-content\">\n  <ng-container [ngTemplateOutlet]=\"selected?.content\"></ng-container>\n</div>\n\n<div class=\"qd-stepper-action-area\" *ngIf=\"!hasPageFooter\">\n  <button qdButton qdButtonGhost (click)=\"cancel()\" [data-test-id]=\"testId + '-cancel'\">\n    {{ config?.cancel?.i18n || \"i18n.qd.stepper.cancel\" | translate }}\n  </button>\n\n  <button\n    *ngIf=\"showPreviousButton(selectedIndex)\"\n    qdButton\n    qdButtonGhost\n    (click)=\"previousStep()\"\n    [data-test-id]=\"testId + '-previous'\"\n  >\n    {{ config?.previous?.i18n || \"i18n.qd.stepper.previous\" | translate }}\n  </button>\n\n  <button\n    *ngIf=\"showNextButton(selectedIndex)\"\n    qdButton\n    [disabled]=\"(selectedStepValid$ | async) === false\"\n    (click)=\"nextStep()\"\n    [data-test-id]=\"testId + '-next'\"\n  >\n    {{ config?.next?.i18n || \"i18n.qd.stepper.next\" | translate }}\n  </button>\n\n  <button\n    *ngIf=\"showSubmitButton(selectedIndex)\"\n    qdButton\n    (click)=\"submit()\"\n    [disabled]=\"(allStepsValid$ | async) === false\"\n    [data-test-id]=\"testId + '-submit'\"\n  >\n    {{ config?.submit?.i18n || \"i18n.qd.stepper.submit\" | translate }}\n  </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host.standalone{height:calc(100% - 50px)}:host .qd-stepper-items-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;padding:0 1.25rem;border-bottom:.125rem solid rgb(213,213,213);background-color:#fff;gap:0 .625rem}@media (max-width: 599.98px){:host .qd-stepper-items-container{padding:0 .9375rem}}:host .stepper-content{flex:1 1 auto}:host .qd-stepper-action-area{display:flex;width:100%;height:3.125rem;justify-content:flex-end}:host .qd-stepper-action-area button{margin-right:1.25rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], testId: [{
@@ -30133,8 +30153,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. */
@@ -30151,24 +30170,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
@@ -30185,6 +30201,105 @@ 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' };
@@ -30202,9 +30317,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. `selectionChange` 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);
@@ -30254,7 +30369,7 @@ class QdPageTabsRouterConnectorService {
     subscribeToTabChanges() {
         const component = this._connectedComponent;
         this._writeSubscription = component.selectionChange
-            .pipe(map(event => event.selectedStep?.config?.name), takeUntilDestroyed(this._destroyRef))
+            .pipe(map(event => event.selectedTab?.config?.name), takeUntilDestroyed(this._destroyRef))
             .subscribe(name => this.writeUrl(name));
     }
     writeUrl(name) {
@@ -30490,10 +30605,17 @@ 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;
+    }
     /**
      * Configuration of QdPageTabs.
      */
@@ -30503,23 +30625,46 @@ class QdPageTabsComponent extends CdkStepper {
      */
     testId = 'page-tabs';
     tabSelection = new EventEmitter();
+    selectionChange = 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.selectionChange.emit({
+                selectedIndex: newIndex,
+                previouslySelectedIndex: prevIndex,
+                selectedTab: this._tabs.get(newIndex),
+                previouslySelectedTab: this._tabs.get(prevIndex)
+            });
+        }
+        this._changeDetectorRef.markForCheck();
     }
     ngOnInit() {
         this.linear = false;
@@ -30527,30 +30672,19 @@ class QdPageTabsComponent extends CdkStepper {
             this._viewonly = v;
             this._stateChanged();
         });
+        this.selectionChange.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(event => {
+            this.tabSelection.emit(event);
+        });
     }
     ngOnChanges(changes) {
         ['linear', 'selectedIndex', 'selected', 'orientation']
             .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();
@@ -30559,9 +30693,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();
@@ -30570,19 +30737,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 {
@@ -30590,51 +30758,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": "!footerService" }, 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]': '!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, 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 {
@@ -33615,6 +33757,9 @@ class QdShellComponent {
      */
     shellHeaderComponent;
     commentsComponent;
+    get isCommentsDisplayed() {
+        return this.shellHeaderComponent?.isCommentsDisplayed ?? false;
+    }
     hasNavigation$;
     isNavigationPinned$;
     isNavigationRolledOver$;
@@ -33687,7 +33832,7 @@ class QdShellComponent {
             QdShellLeftService,
             QdShellRightService,
             { provide: 'rwdLayout', useValue: { hasLegacyLayout: false } }
-        ], queries: [{ propertyName: "commentsComponent", predicate: QdCommentsComponent }], viewQueries: [{ propertyName: "shellHeaderComponent", first: true, predicate: QdShellHeaderComponent, descendants: true }], ngImport: i0, template: "<div\n  [ngClass]=\"{\n    'qd-shell': true,\n    'has-navigation': hasNavigation$ | async,\n    'left-pinned': isNavigationPinned$ | async,\n    'left-rolled-over': isNavigationRolledOver$ | async,\n    'shell-right-open': isShellRightOpen$ | async,\n    'shell-right-pinned': isShellRightPinned$ | async\n  }\"\n>\n  <header\n    qd-shell-header\n    [config]=\"config\"\n    [isMinimized]=\"(isMinimized$ | async) ?? true\"\n    [isCommentsUsed]=\"commentsComponent.length > 0\"\n    [hasComments]=\"commentsComponent.get(0)?.hasComments$ | async\"\n  ></header>\n\n  <aside\n    qd-shell-left\n    *ngIf=\"hasNavigation$ | async\"\n    [ngClass]=\"{ pinned: isNavigationPinned$ | async, 'rolled-over': isNavigationRolledOver$ | async }\"\n  >\n    <qd-shell-navigation [config]=\"config.navigation\"></qd-shell-navigation>\n  </aside>\n\n  <main [ngClass]=\"{ faded: isFaded$ | async }\">\n    <router-outlet (activate)=\"handleRouterOutletActivation($event)\"></router-outlet>\n  </main>\n\n  <aside\n    qd-shell-right\n    *ngIf=\"isShellRightOpen$ | async\"\n    [config]=\"config\"\n    [ngClass]=\"{\n      pinned: isShellRightPinned$ | async\n    }\"\n  >\n    <!-- TODO: Remove in v17! -->\n    <ng-container *ngIf=\"commentsComponent.length > 0 && shellHeaderComponent.isCommentsDisplayed\"\n      ><ng-content select=\"qd-comments\"></ng-content\n    ></ng-container>\n\n    <qd-shell-notifications *ngIf=\"!shellHeaderComponent.isCommentsDisplayed\"></qd-shell-notifications>\n  </aside>\n\n  <footer\n    qd-shell-footer\n    [copyrightInfo]=\"config.copyrightInfo\"\n    [isSticky]=\"config.isFooterSticky\"\n    *ngIf=\"isHome$ | async\"\n  ></footer>\n</div>\n", styles: [":host{display:block}:host .qd-shell{display:grid;min-height:100vh;background-color:#efefef;grid-template-areas:\"header\" \"main\" \"footer\";grid-template-rows:auto 1fr auto}:host .qd-shell.has-navigation{grid-template-areas:\"header header\" \"aside-left main\" \"footer footer\";grid-template-columns:3rem 1fr;transition:grid-template-columns .3s linear}:host .qd-shell.has-navigation.shell-right-open{grid-template-areas:\"header header header\" \"aside-left main aside-right\" \"footer footer footer\";grid-template-columns:3rem 1fr 0}:host .qd-shell.has-navigation.shell-right-open.shell-right-pinned{grid-template-columns:3rem 1fr 0}:host .qd-shell.has-navigation.shell-right-open.shell-right-pinned main{margin-right:18.75rem}:host .qd-shell.has-navigation.left-pinned{grid-template-columns:18.75rem 1fr}:host .qd-shell.has-navigation.left-pinned.shell-right-open{grid-template-columns:18.75rem 1fr 0}:host .qd-shell.has-navigation.left-pinned.shell-right-open.shell-right-pinned{grid-template-columns:18.75rem 1fr 0}:host .qd-shell.has-navigation.left-pinned.shell-right-open.shell-right-pinned main{margin-right:18.75rem}:host .qd-shell:not(.has-navigation).shell-right-open{grid-template-areas:\"header header\" \"main aside-right\" \"footer footer\";grid-template-columns:1fr 0}:host .qd-shell:not(.has-navigation).shell-right-open.shell-right-pinned{grid-template-columns:1fr 0}:host .qd-shell:not(.has-navigation).shell-right-open.shell-right-pinned main{margin-right:18.75rem}:host .qd-shell ::ng-deep qd-container:not(:last-of-type){border-bottom:rgb(213,213,213) solid .0625rem}:host main{position:relative}:host main.faded:after{position:absolute;z-index:1400;background:#000;content:\"\";inset:0;opacity:.5}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: QdShellFooterComponent, selector: "[qd-shell-footer]", inputs: ["copyrightInfo", "isSticky"] }, { kind: "component", type: QdShellHeaderComponent, selector: "[qd-shell-header]", inputs: ["config", "isMinimized", "isCommentsUsed", "hasComments"], outputs: ["menuIconChange"] }, { kind: "component", type: QdShellLeftComponent, selector: "[qd-shell-left]", inputs: ["navigationTemplateRef"] }, { kind: "component", type: QdShellRightComponent, selector: "[qd-shell-right]", inputs: ["config"] }, { kind: "component", type: QdShellNotificationsComponent, selector: "qd-shell-notifications" }, { kind: "component", type: QdShellNavigationComponent, selector: "qd-shell-navigation", inputs: ["config"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+        ], queries: [{ propertyName: "commentsComponent", predicate: QdCommentsComponent }], viewQueries: [{ propertyName: "shellHeaderComponent", first: true, predicate: QdShellHeaderComponent, descendants: true }], ngImport: i0, template: "<div\n  [ngClass]=\"{\n    'qd-shell': true,\n    'has-navigation': hasNavigation$ | async,\n    'left-pinned': isNavigationPinned$ | async,\n    'left-rolled-over': isNavigationRolledOver$ | async,\n    'shell-right-open': isShellRightOpen$ | async,\n    'shell-right-pinned': isShellRightPinned$ | async\n  }\"\n>\n  <header\n    qd-shell-header\n    [config]=\"config\"\n    [isMinimized]=\"(isMinimized$ | async) ?? true\"\n    [isCommentsUsed]=\"commentsComponent.length > 0\"\n    [hasComments]=\"commentsComponent.get(0)?.hasComments$ | async\"\n  ></header>\n\n  <aside\n    qd-shell-left\n    *ngIf=\"hasNavigation$ | async\"\n    [ngClass]=\"{ pinned: isNavigationPinned$ | async, 'rolled-over': isNavigationRolledOver$ | async }\"\n  >\n    <qd-shell-navigation [config]=\"config.navigation\"></qd-shell-navigation>\n  </aside>\n\n  <main [ngClass]=\"{ faded: isFaded$ | async }\">\n    <router-outlet (activate)=\"handleRouterOutletActivation($event)\"></router-outlet>\n  </main>\n\n  <aside\n    qd-shell-right\n    *ngIf=\"isShellRightOpen$ | async\"\n    [config]=\"config\"\n    [ngClass]=\"{\n      pinned: isShellRightPinned$ | async\n    }\"\n  >\n    <!-- TODO: Remove in v17! -->\n    <ng-container *ngIf=\"commentsComponent.length > 0 && isCommentsDisplayed\"\n      ><ng-content select=\"qd-comments\"></ng-content\n    ></ng-container>\n\n    <qd-shell-notifications *ngIf=\"!isCommentsDisplayed\"></qd-shell-notifications>\n  </aside>\n\n  <footer\n    qd-shell-footer\n    [copyrightInfo]=\"config.copyrightInfo\"\n    [isSticky]=\"config.isFooterSticky\"\n    *ngIf=\"isHome$ | async\"\n  ></footer>\n</div>\n", styles: [":host{display:block}:host .qd-shell{display:grid;min-height:100vh;background-color:#efefef;grid-template-areas:\"header\" \"main\" \"footer\";grid-template-rows:auto 1fr auto}:host .qd-shell.has-navigation{grid-template-areas:\"header header\" \"aside-left main\" \"footer footer\";grid-template-columns:3rem 1fr;transition:grid-template-columns .3s linear}:host .qd-shell.has-navigation.shell-right-open{grid-template-areas:\"header header header\" \"aside-left main aside-right\" \"footer footer footer\";grid-template-columns:3rem 1fr 0}:host .qd-shell.has-navigation.shell-right-open.shell-right-pinned{grid-template-columns:3rem 1fr 0}:host .qd-shell.has-navigation.shell-right-open.shell-right-pinned main{margin-right:18.75rem}:host .qd-shell.has-navigation.left-pinned{grid-template-columns:18.75rem 1fr}:host .qd-shell.has-navigation.left-pinned.shell-right-open{grid-template-columns:18.75rem 1fr 0}:host .qd-shell.has-navigation.left-pinned.shell-right-open.shell-right-pinned{grid-template-columns:18.75rem 1fr 0}:host .qd-shell.has-navigation.left-pinned.shell-right-open.shell-right-pinned main{margin-right:18.75rem}:host .qd-shell:not(.has-navigation).shell-right-open{grid-template-areas:\"header header\" \"main aside-right\" \"footer footer\";grid-template-columns:1fr 0}:host .qd-shell:not(.has-navigation).shell-right-open.shell-right-pinned{grid-template-columns:1fr 0}:host .qd-shell:not(.has-navigation).shell-right-open.shell-right-pinned main{margin-right:18.75rem}:host .qd-shell ::ng-deep qd-container:not(:last-of-type){border-bottom:rgb(213,213,213) solid .0625rem}:host main{position:relative}:host main.faded:after{position:absolute;z-index:1400;background:#000;content:\"\";inset:0;opacity:.5}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: QdShellFooterComponent, selector: "[qd-shell-footer]", inputs: ["copyrightInfo", "isSticky"] }, { kind: "component", type: QdShellHeaderComponent, selector: "[qd-shell-header]", inputs: ["config", "isMinimized", "isCommentsUsed", "hasComments"], outputs: ["menuIconChange"] }, { kind: "component", type: QdShellLeftComponent, selector: "[qd-shell-left]", inputs: ["navigationTemplateRef"] }, { kind: "component", type: QdShellRightComponent, selector: "[qd-shell-right]", inputs: ["config"] }, { kind: "component", type: QdShellNotificationsComponent, selector: "qd-shell-notifications" }, { kind: "component", type: QdShellNavigationComponent, selector: "qd-shell-navigation", inputs: ["config"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellComponent, decorators: [{
             type: Component,
@@ -33696,7 +33841,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         QdShellLeftService,
                         QdShellRightService,
                         { provide: 'rwdLayout', useValue: { hasLegacyLayout: false } }
-                    ], standalone: false, template: "<div\n  [ngClass]=\"{\n    'qd-shell': true,\n    'has-navigation': hasNavigation$ | async,\n    'left-pinned': isNavigationPinned$ | async,\n    'left-rolled-over': isNavigationRolledOver$ | async,\n    'shell-right-open': isShellRightOpen$ | async,\n    'shell-right-pinned': isShellRightPinned$ | async\n  }\"\n>\n  <header\n    qd-shell-header\n    [config]=\"config\"\n    [isMinimized]=\"(isMinimized$ | async) ?? true\"\n    [isCommentsUsed]=\"commentsComponent.length > 0\"\n    [hasComments]=\"commentsComponent.get(0)?.hasComments$ | async\"\n  ></header>\n\n  <aside\n    qd-shell-left\n    *ngIf=\"hasNavigation$ | async\"\n    [ngClass]=\"{ pinned: isNavigationPinned$ | async, 'rolled-over': isNavigationRolledOver$ | async }\"\n  >\n    <qd-shell-navigation [config]=\"config.navigation\"></qd-shell-navigation>\n  </aside>\n\n  <main [ngClass]=\"{ faded: isFaded$ | async }\">\n    <router-outlet (activate)=\"handleRouterOutletActivation($event)\"></router-outlet>\n  </main>\n\n  <aside\n    qd-shell-right\n    *ngIf=\"isShellRightOpen$ | async\"\n    [config]=\"config\"\n    [ngClass]=\"{\n      pinned: isShellRightPinned$ | async\n    }\"\n  >\n    <!-- TODO: Remove in v17! -->\n    <ng-container *ngIf=\"commentsComponent.length > 0 && shellHeaderComponent.isCommentsDisplayed\"\n      ><ng-content select=\"qd-comments\"></ng-content\n    ></ng-container>\n\n    <qd-shell-notifications *ngIf=\"!shellHeaderComponent.isCommentsDisplayed\"></qd-shell-notifications>\n  </aside>\n\n  <footer\n    qd-shell-footer\n    [copyrightInfo]=\"config.copyrightInfo\"\n    [isSticky]=\"config.isFooterSticky\"\n    *ngIf=\"isHome$ | async\"\n  ></footer>\n</div>\n", styles: [":host{display:block}:host .qd-shell{display:grid;min-height:100vh;background-color:#efefef;grid-template-areas:\"header\" \"main\" \"footer\";grid-template-rows:auto 1fr auto}:host .qd-shell.has-navigation{grid-template-areas:\"header header\" \"aside-left main\" \"footer footer\";grid-template-columns:3rem 1fr;transition:grid-template-columns .3s linear}:host .qd-shell.has-navigation.shell-right-open{grid-template-areas:\"header header header\" \"aside-left main aside-right\" \"footer footer footer\";grid-template-columns:3rem 1fr 0}:host .qd-shell.has-navigation.shell-right-open.shell-right-pinned{grid-template-columns:3rem 1fr 0}:host .qd-shell.has-navigation.shell-right-open.shell-right-pinned main{margin-right:18.75rem}:host .qd-shell.has-navigation.left-pinned{grid-template-columns:18.75rem 1fr}:host .qd-shell.has-navigation.left-pinned.shell-right-open{grid-template-columns:18.75rem 1fr 0}:host .qd-shell.has-navigation.left-pinned.shell-right-open.shell-right-pinned{grid-template-columns:18.75rem 1fr 0}:host .qd-shell.has-navigation.left-pinned.shell-right-open.shell-right-pinned main{margin-right:18.75rem}:host .qd-shell:not(.has-navigation).shell-right-open{grid-template-areas:\"header header\" \"main aside-right\" \"footer footer\";grid-template-columns:1fr 0}:host .qd-shell:not(.has-navigation).shell-right-open.shell-right-pinned{grid-template-columns:1fr 0}:host .qd-shell:not(.has-navigation).shell-right-open.shell-right-pinned main{margin-right:18.75rem}:host .qd-shell ::ng-deep qd-container:not(:last-of-type){border-bottom:rgb(213,213,213) solid .0625rem}:host main{position:relative}:host main.faded:after{position:absolute;z-index:1400;background:#000;content:\"\";inset:0;opacity:.5}\n"] }]
+                    ], standalone: false, template: "<div\n  [ngClass]=\"{\n    'qd-shell': true,\n    'has-navigation': hasNavigation$ | async,\n    'left-pinned': isNavigationPinned$ | async,\n    'left-rolled-over': isNavigationRolledOver$ | async,\n    'shell-right-open': isShellRightOpen$ | async,\n    'shell-right-pinned': isShellRightPinned$ | async\n  }\"\n>\n  <header\n    qd-shell-header\n    [config]=\"config\"\n    [isMinimized]=\"(isMinimized$ | async) ?? true\"\n    [isCommentsUsed]=\"commentsComponent.length > 0\"\n    [hasComments]=\"commentsComponent.get(0)?.hasComments$ | async\"\n  ></header>\n\n  <aside\n    qd-shell-left\n    *ngIf=\"hasNavigation$ | async\"\n    [ngClass]=\"{ pinned: isNavigationPinned$ | async, 'rolled-over': isNavigationRolledOver$ | async }\"\n  >\n    <qd-shell-navigation [config]=\"config.navigation\"></qd-shell-navigation>\n  </aside>\n\n  <main [ngClass]=\"{ faded: isFaded$ | async }\">\n    <router-outlet (activate)=\"handleRouterOutletActivation($event)\"></router-outlet>\n  </main>\n\n  <aside\n    qd-shell-right\n    *ngIf=\"isShellRightOpen$ | async\"\n    [config]=\"config\"\n    [ngClass]=\"{\n      pinned: isShellRightPinned$ | async\n    }\"\n  >\n    <!-- TODO: Remove in v17! -->\n    <ng-container *ngIf=\"commentsComponent.length > 0 && isCommentsDisplayed\"\n      ><ng-content select=\"qd-comments\"></ng-content\n    ></ng-container>\n\n    <qd-shell-notifications *ngIf=\"!isCommentsDisplayed\"></qd-shell-notifications>\n  </aside>\n\n  <footer\n    qd-shell-footer\n    [copyrightInfo]=\"config.copyrightInfo\"\n    [isSticky]=\"config.isFooterSticky\"\n    *ngIf=\"isHome$ | async\"\n  ></footer>\n</div>\n", styles: [":host{display:block}:host .qd-shell{display:grid;min-height:100vh;background-color:#efefef;grid-template-areas:\"header\" \"main\" \"footer\";grid-template-rows:auto 1fr auto}:host .qd-shell.has-navigation{grid-template-areas:\"header header\" \"aside-left main\" \"footer footer\";grid-template-columns:3rem 1fr;transition:grid-template-columns .3s linear}:host .qd-shell.has-navigation.shell-right-open{grid-template-areas:\"header header header\" \"aside-left main aside-right\" \"footer footer footer\";grid-template-columns:3rem 1fr 0}:host .qd-shell.has-navigation.shell-right-open.shell-right-pinned{grid-template-columns:3rem 1fr 0}:host .qd-shell.has-navigation.shell-right-open.shell-right-pinned main{margin-right:18.75rem}:host .qd-shell.has-navigation.left-pinned{grid-template-columns:18.75rem 1fr}:host .qd-shell.has-navigation.left-pinned.shell-right-open{grid-template-columns:18.75rem 1fr 0}:host .qd-shell.has-navigation.left-pinned.shell-right-open.shell-right-pinned{grid-template-columns:18.75rem 1fr 0}:host .qd-shell.has-navigation.left-pinned.shell-right-open.shell-right-pinned main{margin-right:18.75rem}:host .qd-shell:not(.has-navigation).shell-right-open{grid-template-areas:\"header header\" \"main aside-right\" \"footer footer\";grid-template-columns:1fr 0}:host .qd-shell:not(.has-navigation).shell-right-open.shell-right-pinned{grid-template-columns:1fr 0}:host .qd-shell:not(.has-navigation).shell-right-open.shell-right-pinned main{margin-right:18.75rem}:host .qd-shell ::ng-deep qd-container:not(:last-of-type){border-bottom:rgb(213,213,213) solid .0625rem}:host main{position:relative}:host main.faded:after{position:absolute;z-index:1400;background:#000;content:\"\";inset:0;opacity:.5}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], searchQueryStringOutput: [{
@@ -34215,92 +34360,12 @@ 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]
-            }] } });
+const QD_TAB_STATE = {
+    NUMBER: 'number',
+    ERROR: 'error',
+    DONE: 'done',
+    EDIT: 'edit'
+};
 
 /**
  * **qdPageTabParameterize** turns the active page tab into the `tab` query parameter
@@ -34332,7 +34397,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,
@@ -34341,7 +34405,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] });
@@ -34352,7 +34415,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                     imports: [
                         CommonModule,
                         TranslateModule,
-                        CdkStepperModule,
                         QdButtonModule,
                         QdIconModule,
                         QdPageTabsComponent,
@@ -35009,5 +35071,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, 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_TAB_STATE, 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, updateHtmlLang };
 //# sourceMappingURL=quadrel-enterprise-ui-framework.mjs.map