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

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Directive, InjectionToken, HostBinding, Input, ViewEncapsulation, Component, Injectable, Injector, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, NgModule, EventEmitter, Output, Renderer2, Pipe, ViewContainerRef, NO_ERRORS_SCHEMA, DestroyRef, SecurityContext, NgZone, ViewChildren, forwardRef, ContentChildren, ContentChild, isDevMode, QueryList, TemplateRef, CUSTOM_ELEMENTS_SCHEMA, provideAppInitializer } from '@angular/core';
+import { inject, ElementRef, Directive, InjectionToken, HostBinding, Input, ViewEncapsulation, Component, Injectable, Injector, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, NgModule, EventEmitter, Output, Renderer2, Pipe, ViewContainerRef, NO_ERRORS_SCHEMA, DestroyRef, SecurityContext, NgZone, ViewChildren, forwardRef, ContentChildren, ContentChild, isDevMode, QueryList, CUSTOM_ELEMENTS_SCHEMA, provideAppInitializer, TemplateRef } 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';
@@ -8578,7 +8578,6 @@ 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
  *
@@ -12003,7 +12002,7 @@ class QdInputComponent {
                 provide: QD_FOCUSABLE_TOKEN,
                 useExisting: QdInputComponent
             }
-        ], viewQueries: [{ propertyName: "inputElement", first: true, 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 *ngIf=\"!readonly && !viewonly && !hasOptions\">\n  <div class=\"qd-input-input\" (keydown.enter)=\"emitEnterClick()\">\n    <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n  </div>\n\n  <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n  <qd-form-hint\n    *ngIf=\"hint || hasError\"\n    [hint]=\"hint\"\n    [control]=\"control\"\n    [hasError]=\"hasError\"\n    [hintAction]=\"hintAction\"\n    [data-test-id]=\"testId\"\n  ></qd-form-hint>\n  <qd-form-hint *ngIf=\"isAmbiguousInput\" [hint]=\"ambiguityHintKey\" [data-test-id]=\"testId\"></qd-form-hint>\n</ng-container>\n\n<div *ngIf=\"!readonly && !viewonly && hasOptions\">\n  <div\n    class=\"qd-input-input\"\n    qdInputOptions\n    [qdPopoverMinWidth]=\"200\"\n    [config]=\"config\"\n    [value]=\"_value.value\"\n    (optionSelected)=\"handleOptionSelected($event)\"\n    (optionsResolved)=\"optionsResolved.emit($event)\"\n    (enterClick)=\"emitEnterClick()\"\n  >\n    <!-- handle (enterClick) by options directive here because event has to be fired after selection -->\n    <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n  </div>\n\n  <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n  <qd-form-hint\n    *ngIf=\"hint || hasError\"\n    [hint]=\"hint\"\n    [control]=\"control\"\n    [hasError]=\"hasError\"\n    [hintAction]=\"hintAction\"\n    [data-test-id]=\"testId\"\n  ></qd-form-hint>\n  <qd-form-hint *ngIf=\"isAmbiguousInput\" [hint]=\"ambiguityHintKey\" [data-test-id]=\"testId\"></qd-form-hint>\n</div>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"valueAsList\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"valueAsList\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n\n<ng-template #inputBox>\n  <input\n    #input\n    [placeholder]=\"placeholder | translate\"\n    [value]=\"hasOptions ? (_value.value.toString() | translate) : _displayValue\"\n    (input)=\"handleInput($event)\"\n    (focus)=\"handleInputFocus()\"\n    (blur)=\"handleInputBlur()\"\n    [disabled]=\"disabled || readonly\"\n    [type]=\"htmlInputType\"\n    [attr.inputmode]=\"inputMode\"\n    [qdAutofocus]=\"hasAutofocus\"\n    [attr.data-test-id]=\"testId + '-input'\"\n    [step]=\"config?.step\"\n    required\n    autocomplete=\"off\"\n  />\n  <div class=\"qd-input-suffix\">\n    <qd-icon *ngIf=\"hasError && !hasOnlyUnitsError\" class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n    <qd-icon *ngIf=\"isAmbiguousInput\" class=\"qd-input-ambiguous-icon\" icon=\"circleInfoSolid\"></qd-icon>\n    <qd-icon *ngIf=\"clearable\" class=\"qd-input-clearable-icon\" icon=\"timesLarge\" (click)=\"clearInput()\"></qd-icon>\n    <ng-content select=\"[qdIconButton]\"></ng-content>\n  </div>\n  <qd-input-units\n    *ngIf=\"hasUnits\"\n    [unit]=\"_value.unit\"\n    [config]=\"config\"\n    (unitChange)=\"handleUnitChange($event)\"\n    (opened)=\"handleUnitsOpened()\"\n    (closed)=\"handleUnitsClosed()\"\n  ></qd-input-units>\n  <div class=\"qd-input-suffix\" *ngIf=\"hasError && hasOnlyUnitsError\">\n    <qd-icon class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:block;width:100%;flex-direction:column;margin-bottom:.75rem}:host .qd-input-input{display:flex;overflow:hidden;height:2.25rem;align-items:center;padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(180,180,180);border-radius:0;margin-bottom:.375rem;background-color:#fff}:host .qd-input-input:hover,:host .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(23,23,23);border-radius:0}:host .qd-input-input input{overflow:hidden;width:100%;flex-grow:1;border:none;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.875rem}:host .qd-input-input input:hover,:host .qd-input-input input:focus,:host .qd-input-input input:active{border:none;outline:none}:host .qd-input-input input::placeholder{color:#b4b4b4}:host .qd-input-input input:focus::placeholder{display:block;color:#b4b4b4}:host .qd-input-input .qd-input-suffix{display:flex;align-items:center;margin-left:.75rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon{padding-right:.5rem;color:#c70023}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon+.qd-input-clearable-icon{margin-left:-.25rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon{margin-right:.5625rem;color:#979797;cursor:pointer;font-size:1.25rem;line-height:2rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:hover,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:focus,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:active{color:#171717}:host .qd-input-input qd-input-units+.qd-input-suffix{margin:0 0 0 -.1875rem}:host .qd-input-character-counter{padding-left:.125rem;color:#757575;float:right;font-size:.75rem;font-weight:300;line-height:.75rem}:host:after{display:block;height:0;clear:both;content:\".\";visibility:hidden}:host.qd-input-focus .qd-input-input{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153);border-radius:0;outline:none}:host.qd-input-readonly .qd-input-readonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-viewonly .qd-input-viewonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-disabled .qd-input-input{border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled .qd-input-input input{background-color:#f5f5f5;color:#979797}:host.qd-input-disabled .qd-input-input input::placeholder{opacity:0}:host.qd-input-disabled .qd-input-input:hover,:host.qd-input-disabled .qd-input-input:active{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled.qd-input-focus{border-color:#ff9b00}:host.qd-input--readonly-action .qd-input-readonly{color:#069;cursor:pointer}:host.qd-input--readonly-action .qd-input-readonly:hover,:host.qd-input--readonly-action .qd-input-readonly:active,:host.qd-input--readonly-action .qd-input-readonly:focus{text-decoration:underline}:host.qd-input--viewonly-action .qd-input-viewonly{color:#069;cursor:pointer}:host.qd-input--viewonly-action .qd-input-viewonly:hover,:host.qd-input--viewonly-action .qd-input-viewonly:active,:host.qd-input--viewonly-action .qd-input-viewonly:focus{text-decoration:underline}:host.qd-input-ambiguous .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(0,102,153)}:host.qd-input-ambiguous .qd-input-input:hover,:host.qd-input-ambiguous .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153)}:host.qd-input-ambiguous.qd-input-focus .qd-input-input{border-color:#069}:host.qd-input-ambiguous .qd-input-suffix ::ng-deep .qd-input-ambiguous-icon{padding-right:.5rem;color:#069}:host.qd-input-error .qd-input-input,:host.qd-input-error-from-outside .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(199,0,35)}:host.qd-input-error .qd-input-input:hover,:host.qd-input-error .qd-input-input:active,:host.qd-input-error-from-outside .qd-input-input:hover,:host.qd-input-error-from-outside .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(199,0,35)}:host.qd-input-error.qd-input-focus,:host.qd-input-error-from-outside.qd-input-focus{border-color:#c70023}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: QdAutofocusDirective, selector: "[qdAutofocus]", inputs: ["qdAutofocus"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }, { kind: "component", type: QdInputUnitsComponent, selector: "qd-input-units", inputs: ["config", "unit"], outputs: ["unitChange", "opened", "closed"] }, { kind: "directive", type: QdInputOptionsDirective, selector: "[qdInputOptions]", inputs: ["value", "config"], outputs: ["enterClick", "optionSelected", "optionsResolved"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+        ], viewQueries: [{ propertyName: "inputElement", first: true, 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 *ngIf=\"!readonly && !viewonly && !hasOptions\">\n  <div class=\"qd-input-input\" (keydown.enter)=\"emitEnterClick()\">\n    <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n  </div>\n\n  <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n  <qd-form-hint\n    *ngIf=\"hint || hasError\"\n    [hint]=\"hint\"\n    [control]=\"control\"\n    [hasError]=\"hasError\"\n    [hintAction]=\"hintAction\"\n    [data-test-id]=\"testId\"\n  ></qd-form-hint>\n  <qd-form-hint *ngIf=\"isAmbiguousInput\" [hint]=\"ambiguityHintKey\" [data-test-id]=\"testId\"></qd-form-hint>\n</ng-container>\n\n<div *ngIf=\"!readonly && !viewonly && hasOptions\">\n  <div\n    class=\"qd-input-input\"\n    qdInputOptions\n    [qdPopoverMinWidth]=\"200\"\n    [config]=\"config\"\n    [value]=\"_value.value\"\n    (optionSelected)=\"handleOptionSelected($event)\"\n    (optionsResolved)=\"optionsResolved.emit($event)\"\n    (enterClick)=\"emitEnterClick()\"\n  >\n    <!-- handle (enterClick) by options directive here because event has to be fired after selection -->\n    <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n  </div>\n\n  <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n  <qd-form-hint\n    *ngIf=\"hint || hasError\"\n    [hint]=\"hint\"\n    [control]=\"control\"\n    [hasError]=\"hasError\"\n    [hintAction]=\"hintAction\"\n    [data-test-id]=\"testId\"\n  ></qd-form-hint>\n  <qd-form-hint *ngIf=\"isAmbiguousInput\" [hint]=\"ambiguityHintKey\" [data-test-id]=\"testId\"></qd-form-hint>\n</div>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"valueAsList\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"valueAsList\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n\n<ng-template #inputBox>\n  <input\n    #input\n    [placeholder]=\"placeholder | translate\"\n    [value]=\"hasOptions ? (_value.value.toString() | translate) : _displayValue\"\n    (input)=\"handleInput($event)\"\n    (focus)=\"handleInputFocus()\"\n    (blur)=\"handleInputBlur()\"\n    [disabled]=\"disabled || readonly\"\n    [type]=\"htmlInputType\"\n    [attr.inputmode]=\"inputMode\"\n    [qdAutofocus]=\"hasAutofocus\"\n    [attr.data-test-id]=\"testId + '-input'\"\n    [step]=\"config?.step\"\n    required\n    autocomplete=\"off\"\n  />\n  <div class=\"qd-input-suffix\">\n    <qd-icon *ngIf=\"hasError && !hasOnlyUnitsError\" class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n    <qd-icon *ngIf=\"isAmbiguousInput\" class=\"qd-input-ambiguous-icon\" icon=\"circleInfoSolid\"></qd-icon>\n    <qd-icon *ngIf=\"clearable\" class=\"qd-input-clearable-icon\" icon=\"timesLarge\" (click)=\"clearInput()\"></qd-icon>\n    <ng-content select=\"[qdIconButton]\"></ng-content>\n  </div>\n  <qd-input-units\n    *ngIf=\"hasUnits\"\n    [unit]=\"_value.unit\"\n    [config]=\"config\"\n    (unitChange)=\"handleUnitChange($event)\"\n    (opened)=\"handleUnitsOpened()\"\n    (closed)=\"handleUnitsClosed()\"\n  ></qd-input-units>\n  <div class=\"qd-input-suffix\" *ngIf=\"hasError && hasOnlyUnitsError\">\n    <qd-icon class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:block;width:100%;flex-direction:column;margin-bottom:.75rem}:host .qd-input-input{display:flex;overflow:hidden;height:2.25rem;align-items:center;padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(180,180,180);border-radius:0;margin-bottom:.375rem;background-color:#fff}:host .qd-input-input:hover,:host .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(23,23,23);border-radius:0}:host .qd-input-input input{overflow:hidden;width:100%;flex-grow:1;border:none;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.875rem}:host .qd-input-input input:hover,:host .qd-input-input input:focus,:host .qd-input-input input:active{border:none;outline:none}:host .qd-input-input input::placeholder{color:#b4b4b4}:host .qd-input-input input:focus::placeholder{display:block;color:#b4b4b4}:host .qd-input-input .qd-input-suffix{display:flex;align-items:center;margin-left:.75rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon{padding-right:.5rem;color:#c70023}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon+.qd-input-clearable-icon{margin-left:-.25rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon{margin-right:.5625rem;color:#979797;cursor:pointer;font-size:1.25rem;line-height:2rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:hover,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:focus,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:active{color:#171717}:host .qd-input-input qd-input-units+.qd-input-suffix{margin:0 0 0 -.1875rem}:host .qd-input-input:has(.qd-icon-button){overflow:visible}:host .qd-input-character-counter{padding-left:.125rem;color:#757575;float:right;font-size:.75rem;font-weight:300;line-height:.75rem}:host:after{display:block;height:0;clear:both;content:\".\";visibility:hidden}:host.qd-input-focus .qd-input-input{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153);border-radius:0;outline:none}:host.qd-input-readonly .qd-input-readonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-viewonly .qd-input-viewonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-disabled .qd-input-input{border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled .qd-input-input input{background-color:#f5f5f5;color:#979797}:host.qd-input-disabled .qd-input-input input::placeholder{opacity:0}:host.qd-input-disabled .qd-input-input:hover,:host.qd-input-disabled .qd-input-input:active{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled.qd-input-focus{border-color:#ff9b00}:host.qd-input--readonly-action .qd-input-readonly{color:#069;cursor:pointer}:host.qd-input--readonly-action .qd-input-readonly:hover,:host.qd-input--readonly-action .qd-input-readonly:active,:host.qd-input--readonly-action .qd-input-readonly:focus{text-decoration:underline}:host.qd-input--viewonly-action .qd-input-viewonly{color:#069;cursor:pointer}:host.qd-input--viewonly-action .qd-input-viewonly:hover,:host.qd-input--viewonly-action .qd-input-viewonly:active,:host.qd-input--viewonly-action .qd-input-viewonly:focus{text-decoration:underline}:host.qd-input-ambiguous .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(0,102,153)}:host.qd-input-ambiguous .qd-input-input:hover,:host.qd-input-ambiguous .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153)}:host.qd-input-ambiguous.qd-input-focus .qd-input-input{border-color:#069}:host.qd-input-ambiguous .qd-input-suffix ::ng-deep .qd-input-ambiguous-icon{padding-right:.5rem;color:#069}:host.qd-input-error .qd-input-input,:host.qd-input-error-from-outside .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(199,0,35)}:host.qd-input-error .qd-input-input:hover,:host.qd-input-error .qd-input-input:active,:host.qd-input-error-from-outside .qd-input-input:hover,:host.qd-input-error-from-outside .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(199,0,35)}:host.qd-input-error.qd-input-focus,:host.qd-input-error-from-outside.qd-input-focus{border-color:#c70023}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: QdAutofocusDirective, selector: "[qdAutofocus]", inputs: ["qdAutofocus"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }, { kind: "component", type: QdInputUnitsComponent, selector: "qd-input-units", inputs: ["config", "unit"], outputs: ["unitChange", "opened", "closed"] }, { kind: "directive", type: QdInputOptionsDirective, selector: "[qdInputOptions]", inputs: ["value", "config"], outputs: ["enterClick", "optionSelected", "optionsResolved"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdInputComponent, decorators: [{
             type: Component,
@@ -12022,7 +12021,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                             provide: QD_FOCUSABLE_TOKEN,
                             useExisting: QdInputComponent
                         }
-                    ], 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 *ngIf=\"!readonly && !viewonly && !hasOptions\">\n  <div class=\"qd-input-input\" (keydown.enter)=\"emitEnterClick()\">\n    <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n  </div>\n\n  <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n  <qd-form-hint\n    *ngIf=\"hint || hasError\"\n    [hint]=\"hint\"\n    [control]=\"control\"\n    [hasError]=\"hasError\"\n    [hintAction]=\"hintAction\"\n    [data-test-id]=\"testId\"\n  ></qd-form-hint>\n  <qd-form-hint *ngIf=\"isAmbiguousInput\" [hint]=\"ambiguityHintKey\" [data-test-id]=\"testId\"></qd-form-hint>\n</ng-container>\n\n<div *ngIf=\"!readonly && !viewonly && hasOptions\">\n  <div\n    class=\"qd-input-input\"\n    qdInputOptions\n    [qdPopoverMinWidth]=\"200\"\n    [config]=\"config\"\n    [value]=\"_value.value\"\n    (optionSelected)=\"handleOptionSelected($event)\"\n    (optionsResolved)=\"optionsResolved.emit($event)\"\n    (enterClick)=\"emitEnterClick()\"\n  >\n    <!-- handle (enterClick) by options directive here because event has to be fired after selection -->\n    <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n  </div>\n\n  <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n  <qd-form-hint\n    *ngIf=\"hint || hasError\"\n    [hint]=\"hint\"\n    [control]=\"control\"\n    [hasError]=\"hasError\"\n    [hintAction]=\"hintAction\"\n    [data-test-id]=\"testId\"\n  ></qd-form-hint>\n  <qd-form-hint *ngIf=\"isAmbiguousInput\" [hint]=\"ambiguityHintKey\" [data-test-id]=\"testId\"></qd-form-hint>\n</div>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"valueAsList\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"valueAsList\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n\n<ng-template #inputBox>\n  <input\n    #input\n    [placeholder]=\"placeholder | translate\"\n    [value]=\"hasOptions ? (_value.value.toString() | translate) : _displayValue\"\n    (input)=\"handleInput($event)\"\n    (focus)=\"handleInputFocus()\"\n    (blur)=\"handleInputBlur()\"\n    [disabled]=\"disabled || readonly\"\n    [type]=\"htmlInputType\"\n    [attr.inputmode]=\"inputMode\"\n    [qdAutofocus]=\"hasAutofocus\"\n    [attr.data-test-id]=\"testId + '-input'\"\n    [step]=\"config?.step\"\n    required\n    autocomplete=\"off\"\n  />\n  <div class=\"qd-input-suffix\">\n    <qd-icon *ngIf=\"hasError && !hasOnlyUnitsError\" class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n    <qd-icon *ngIf=\"isAmbiguousInput\" class=\"qd-input-ambiguous-icon\" icon=\"circleInfoSolid\"></qd-icon>\n    <qd-icon *ngIf=\"clearable\" class=\"qd-input-clearable-icon\" icon=\"timesLarge\" (click)=\"clearInput()\"></qd-icon>\n    <ng-content select=\"[qdIconButton]\"></ng-content>\n  </div>\n  <qd-input-units\n    *ngIf=\"hasUnits\"\n    [unit]=\"_value.unit\"\n    [config]=\"config\"\n    (unitChange)=\"handleUnitChange($event)\"\n    (opened)=\"handleUnitsOpened()\"\n    (closed)=\"handleUnitsClosed()\"\n  ></qd-input-units>\n  <div class=\"qd-input-suffix\" *ngIf=\"hasError && hasOnlyUnitsError\">\n    <qd-icon class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:block;width:100%;flex-direction:column;margin-bottom:.75rem}:host .qd-input-input{display:flex;overflow:hidden;height:2.25rem;align-items:center;padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(180,180,180);border-radius:0;margin-bottom:.375rem;background-color:#fff}:host .qd-input-input:hover,:host .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(23,23,23);border-radius:0}:host .qd-input-input input{overflow:hidden;width:100%;flex-grow:1;border:none;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.875rem}:host .qd-input-input input:hover,:host .qd-input-input input:focus,:host .qd-input-input input:active{border:none;outline:none}:host .qd-input-input input::placeholder{color:#b4b4b4}:host .qd-input-input input:focus::placeholder{display:block;color:#b4b4b4}:host .qd-input-input .qd-input-suffix{display:flex;align-items:center;margin-left:.75rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon{padding-right:.5rem;color:#c70023}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon+.qd-input-clearable-icon{margin-left:-.25rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon{margin-right:.5625rem;color:#979797;cursor:pointer;font-size:1.25rem;line-height:2rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:hover,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:focus,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:active{color:#171717}:host .qd-input-input qd-input-units+.qd-input-suffix{margin:0 0 0 -.1875rem}:host .qd-input-character-counter{padding-left:.125rem;color:#757575;float:right;font-size:.75rem;font-weight:300;line-height:.75rem}:host:after{display:block;height:0;clear:both;content:\".\";visibility:hidden}:host.qd-input-focus .qd-input-input{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153);border-radius:0;outline:none}:host.qd-input-readonly .qd-input-readonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-viewonly .qd-input-viewonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-disabled .qd-input-input{border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled .qd-input-input input{background-color:#f5f5f5;color:#979797}:host.qd-input-disabled .qd-input-input input::placeholder{opacity:0}:host.qd-input-disabled .qd-input-input:hover,:host.qd-input-disabled .qd-input-input:active{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled.qd-input-focus{border-color:#ff9b00}:host.qd-input--readonly-action .qd-input-readonly{color:#069;cursor:pointer}:host.qd-input--readonly-action .qd-input-readonly:hover,:host.qd-input--readonly-action .qd-input-readonly:active,:host.qd-input--readonly-action .qd-input-readonly:focus{text-decoration:underline}:host.qd-input--viewonly-action .qd-input-viewonly{color:#069;cursor:pointer}:host.qd-input--viewonly-action .qd-input-viewonly:hover,:host.qd-input--viewonly-action .qd-input-viewonly:active,:host.qd-input--viewonly-action .qd-input-viewonly:focus{text-decoration:underline}:host.qd-input-ambiguous .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(0,102,153)}:host.qd-input-ambiguous .qd-input-input:hover,:host.qd-input-ambiguous .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153)}:host.qd-input-ambiguous.qd-input-focus .qd-input-input{border-color:#069}:host.qd-input-ambiguous .qd-input-suffix ::ng-deep .qd-input-ambiguous-icon{padding-right:.5rem;color:#069}:host.qd-input-error .qd-input-input,:host.qd-input-error-from-outside .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(199,0,35)}:host.qd-input-error .qd-input-input:hover,:host.qd-input-error .qd-input-input:active,:host.qd-input-error-from-outside .qd-input-input:hover,:host.qd-input-error-from-outside .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(199,0,35)}:host.qd-input-error.qd-input-focus,:host.qd-input-error-from-outside.qd-input-focus{border-color:#c70023}\n"] }]
+                    ], standalone: false, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<ng-container *ngIf=\"!readonly && !viewonly && !hasOptions\">\n  <div class=\"qd-input-input\" (keydown.enter)=\"emitEnterClick()\">\n    <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n  </div>\n\n  <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n  <qd-form-hint\n    *ngIf=\"hint || hasError\"\n    [hint]=\"hint\"\n    [control]=\"control\"\n    [hasError]=\"hasError\"\n    [hintAction]=\"hintAction\"\n    [data-test-id]=\"testId\"\n  ></qd-form-hint>\n  <qd-form-hint *ngIf=\"isAmbiguousInput\" [hint]=\"ambiguityHintKey\" [data-test-id]=\"testId\"></qd-form-hint>\n</ng-container>\n\n<div *ngIf=\"!readonly && !viewonly && hasOptions\">\n  <div\n    class=\"qd-input-input\"\n    qdInputOptions\n    [qdPopoverMinWidth]=\"200\"\n    [config]=\"config\"\n    [value]=\"_value.value\"\n    (optionSelected)=\"handleOptionSelected($event)\"\n    (optionsResolved)=\"optionsResolved.emit($event)\"\n    (enterClick)=\"emitEnterClick()\"\n  >\n    <!-- handle (enterClick) by options directive here because event has to be fired after selection -->\n    <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n  </div>\n\n  <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n  <qd-form-hint\n    *ngIf=\"hint || hasError\"\n    [hint]=\"hint\"\n    [control]=\"control\"\n    [hasError]=\"hasError\"\n    [hintAction]=\"hintAction\"\n    [data-test-id]=\"testId\"\n  ></qd-form-hint>\n  <qd-form-hint *ngIf=\"isAmbiguousInput\" [hint]=\"ambiguityHintKey\" [data-test-id]=\"testId\"></qd-form-hint>\n</div>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"valueAsList\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"valueAsList\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n\n<ng-template #inputBox>\n  <input\n    #input\n    [placeholder]=\"placeholder | translate\"\n    [value]=\"hasOptions ? (_value.value.toString() | translate) : _displayValue\"\n    (input)=\"handleInput($event)\"\n    (focus)=\"handleInputFocus()\"\n    (blur)=\"handleInputBlur()\"\n    [disabled]=\"disabled || readonly\"\n    [type]=\"htmlInputType\"\n    [attr.inputmode]=\"inputMode\"\n    [qdAutofocus]=\"hasAutofocus\"\n    [attr.data-test-id]=\"testId + '-input'\"\n    [step]=\"config?.step\"\n    required\n    autocomplete=\"off\"\n  />\n  <div class=\"qd-input-suffix\">\n    <qd-icon *ngIf=\"hasError && !hasOnlyUnitsError\" class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n    <qd-icon *ngIf=\"isAmbiguousInput\" class=\"qd-input-ambiguous-icon\" icon=\"circleInfoSolid\"></qd-icon>\n    <qd-icon *ngIf=\"clearable\" class=\"qd-input-clearable-icon\" icon=\"timesLarge\" (click)=\"clearInput()\"></qd-icon>\n    <ng-content select=\"[qdIconButton]\"></ng-content>\n  </div>\n  <qd-input-units\n    *ngIf=\"hasUnits\"\n    [unit]=\"_value.unit\"\n    [config]=\"config\"\n    (unitChange)=\"handleUnitChange($event)\"\n    (opened)=\"handleUnitsOpened()\"\n    (closed)=\"handleUnitsClosed()\"\n  ></qd-input-units>\n  <div class=\"qd-input-suffix\" *ngIf=\"hasError && hasOnlyUnitsError\">\n    <qd-icon class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:block;width:100%;flex-direction:column;margin-bottom:.75rem}:host .qd-input-input{display:flex;overflow:hidden;height:2.25rem;align-items:center;padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(180,180,180);border-radius:0;margin-bottom:.375rem;background-color:#fff}:host .qd-input-input:hover,:host .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(23,23,23);border-radius:0}:host .qd-input-input input{overflow:hidden;width:100%;flex-grow:1;border:none;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.875rem}:host .qd-input-input input:hover,:host .qd-input-input input:focus,:host .qd-input-input input:active{border:none;outline:none}:host .qd-input-input input::placeholder{color:#b4b4b4}:host .qd-input-input input:focus::placeholder{display:block;color:#b4b4b4}:host .qd-input-input .qd-input-suffix{display:flex;align-items:center;margin-left:.75rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon{padding-right:.5rem;color:#c70023}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon+.qd-input-clearable-icon{margin-left:-.25rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon{margin-right:.5625rem;color:#979797;cursor:pointer;font-size:1.25rem;line-height:2rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:hover,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:focus,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:active{color:#171717}:host .qd-input-input qd-input-units+.qd-input-suffix{margin:0 0 0 -.1875rem}:host .qd-input-input:has(.qd-icon-button){overflow:visible}:host .qd-input-character-counter{padding-left:.125rem;color:#757575;float:right;font-size:.75rem;font-weight:300;line-height:.75rem}:host:after{display:block;height:0;clear:both;content:\".\";visibility:hidden}:host.qd-input-focus .qd-input-input{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153);border-radius:0;outline:none}:host.qd-input-readonly .qd-input-readonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-viewonly .qd-input-viewonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-disabled .qd-input-input{border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled .qd-input-input input{background-color:#f5f5f5;color:#979797}:host.qd-input-disabled .qd-input-input input::placeholder{opacity:0}:host.qd-input-disabled .qd-input-input:hover,:host.qd-input-disabled .qd-input-input:active{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled.qd-input-focus{border-color:#ff9b00}:host.qd-input--readonly-action .qd-input-readonly{color:#069;cursor:pointer}:host.qd-input--readonly-action .qd-input-readonly:hover,:host.qd-input--readonly-action .qd-input-readonly:active,:host.qd-input--readonly-action .qd-input-readonly:focus{text-decoration:underline}:host.qd-input--viewonly-action .qd-input-viewonly{color:#069;cursor:pointer}:host.qd-input--viewonly-action .qd-input-viewonly:hover,:host.qd-input--viewonly-action .qd-input-viewonly:active,:host.qd-input--viewonly-action .qd-input-viewonly:focus{text-decoration:underline}:host.qd-input-ambiguous .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(0,102,153)}:host.qd-input-ambiguous .qd-input-input:hover,:host.qd-input-ambiguous .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153)}:host.qd-input-ambiguous.qd-input-focus .qd-input-input{border-color:#069}:host.qd-input-ambiguous .qd-input-suffix ::ng-deep .qd-input-ambiguous-icon{padding-right:.5rem;color:#069}:host.qd-input-error .qd-input-input,:host.qd-input-error-from-outside .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(199,0,35)}:host.qd-input-error .qd-input-input:hover,:host.qd-input-error .qd-input-input:active,:host.qd-input-error-from-outside .qd-input-input:hover,:host.qd-input-error-from-outside .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(199,0,35)}:host.qd-input-error.qd-input-focus,:host.qd-input-error-from-outside.qd-input-focus{border-color:#c70023}\n"] }]
         }], propDecorators: { formControlName: [{
                 type: Input
             }], value: [{
@@ -30153,7 +30152,8 @@ 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 {
+class QdPageTabHeaderComponent extends CdkStepHeader {
+    STEP_STATE = STEP_STATE;
     /** State of the given tab. */
     state;
     /** Label of the given tab. */
@@ -30170,21 +30170,24 @@ class QdPageTabHeaderComponent {
      * 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: { 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 });
+    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 });
 }
 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 === 'done'",
-                        '[class.qd-tab-edit]': "state === 'edit'",
-                        '[class.qd-tab-error]': "state === 'error'"
+                        '[class.qd-tab-done]': 'state === STEP_STATE.DONE',
+                        '[class.qd-tab-edit]': 'state === STEP_STATE.EDIT',
+                        '[class.qd-tab-error]': 'state === STEP_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"] }]
-        }], propDecorators: { state: [{
+        }], ctorParameters: () => [], propDecorators: { state: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -30201,105 +30204,6 @@ 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' };
@@ -30317,9 +30221,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. `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.
+ * 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.
  */
 class QdPageTabsRouterConnectorService {
     _hub = inject(QdRouterQueryParamHubService);
@@ -30369,7 +30273,7 @@ class QdPageTabsRouterConnectorService {
     subscribeToTabChanges() {
         const component = this._connectedComponent;
         this._writeSubscription = component.selectionChange
-            .pipe(map(event => event.selectedTab?.config?.name), takeUntilDestroyed(this._destroyRef))
+            .pipe(map(event => event.selectedStep?.config?.name), takeUntilDestroyed(this._destroyRef))
             .subscribe(name => this.writeUrl(name));
     }
     writeUrl(name) {
@@ -30605,14 +30509,10 @@ 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 {
+class QdPageTabsComponent extends CdkStepper {
     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;
     }
@@ -30625,46 +30525,23 @@ class QdPageTabsComponent {
      */
     testId = 'page-tabs';
     tabSelection = new EventEmitter();
-    selectionChange = new EventEmitter();
-    _tabs;
-    linear = false;
-    _selectedIndex = 0;
     _viewonly;
+    destroyRef = inject(DestroyRef);
     get tabs() {
-        return this._tabs;
+        return this.steps;
     }
     get selected() {
-        return this._tabs?.get(this._selectedIndex);
-    }
-    set selected(tab) {
-        if (!tab)
-            return;
-        const index = this._tabs?.toArray().indexOf(tab);
-        if (index !== undefined && index >= 0) {
-            this.selectedIndex = index;
-        }
+        return super.selected;
     }
-    get selectedIndex() {
-        return this._selectedIndex;
+    set selected(step) {
+        super.selected = step;
     }
-    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();
+    constructor() {
+        const _dir = inject(Directionality, { optional: true });
+        const _changeDetectorRef = inject(ChangeDetectorRef);
+        const _elementRef = inject(ElementRef);
+        super(_dir, _changeDetectorRef, _elementRef);
+        this.mapSelectionChangeToTabSelectionOutput();
     }
     ngOnInit() {
         this.linear = false;
@@ -30672,19 +30549,30 @@ class QdPageTabsComponent {
             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() {
-        this._tabs.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this._stateChanged());
+        super.ngAfterContentInit();
+        this.tabs.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this._stateChanged());
     }
     ngAfterViewInit() {
+        super.ngAfterViewInit();
         setTimeout(() => {
             if (this.config?.connectWithRouter) {
                 this.configureBookmarkableTabs();
@@ -30693,42 +30581,9 @@ class QdPageTabsComponent {
             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._changeDetectorRef.markForCheck();
+            this.selectedIndex = this.config.selectedIndex;
             return;
         }
         this.selectFirstNotDisabledTab();
@@ -30737,20 +30592,19 @@ class QdPageTabsComponent {
         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._changeDetectorRef.markForCheck();
+                this.selectedIndex = tabIndex;
                 return true;
             }
             else {
@@ -30758,25 +30612,51 @@ class QdPageTabsComponent {
             }
         });
     }
+    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: [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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageTabsComponent, isStandalone: true, selector: "qd-page-tabs", inputs: { config: "config", testId: ["data-test-id", "testId"] }, outputs: { tabSelection: "tabSelection" }, host: { properties: { "class.standalone": "!hasPageFooter" }, classAttribute: "qd-tabs" }, providers: [{ provide: CdkStepper, useExisting: QdPageTabsComponent }, QdPageTabsRouterConnectorService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"qd-tabs-items-container\" [ngClass]=\"{ scrollable: config?.scrollabe }\">\n  <qd-page-tab-header\n    *ngFor=\"let tab of tabs; let i = index\"\n    (click)=\"selectTab(tab)\"\n    [id]=\"_getTabLabelId(i)\"\n    [index]=\"i\"\n    [state]=\"_getIndicatorType(i, tab.state)\"\n    [label]=\"tab.config.label.i18n | translate\"\n    [counters]=\"tab.config.counters\"\n    [isSelected]=\"selectedIndex === i\"\n    [isDisabled]=\"tab.config?.isDisabled\"\n    [data-test-id]=\"testId + '-header' + '-' + i\"\n  >\n  </qd-page-tab-header>\n</div>\n\n<div class=\"tabs-content\">\n  <ng-container *ngIf=\"!selected?.config?.isDisabled\" [ngTemplateOutlet]=\"selected?.content\"></ng-container>\n</div>\n\n<div class=\"qd-tabs-action-area\" *ngIf=\"isSubmitButtonShown()\">\n  <button qdButton (click)=\"save()\" [disabled]=\"isSubmitButtonDisabled()\" [data-test-id]=\"testId + '-submit'\">\n    {{ config?.submitButton?.i18n || \"i18n.qd.tabs.button.submit\" | translate }}\n  </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host.standalone{height:calc(100% - 50px)}:host .qd-tabs-items-container{display:flex;width:100%;flex-direction:row;flex-wrap:wrap;padding:0 1.25rem;border-bottom:.125rem solid rgb(213,213,213);background-color:#fff;gap:0 .9375rem}@media (max-width: 599.98px){:host .qd-tabs-items-container{padding:0 .9375rem}}@media (max-width: 1279.98px){:host .qd-tabs-items-container.scrollable{flex-wrap:nowrap;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none}}:host .tabs-content{flex:1 1 auto}:host .qd-tabs-action-area{display:flex;width:100%;height:50px;justify-content:flex-end}:host .qd-tabs-action-area button{margin-right:1.25rem}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QdPageTabHeaderComponent, selector: "qd-page-tab-header", inputs: ["state", "label", "counters", "index", "isSelected", "isDisabled", "data-test-id"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: QdButtonModule }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabsComponent, decorators: [{
             type: Component,
-            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: [{
+            args: [{ selector: 'qd-page-tabs', providers: [{ provide: CdkStepper, useExisting: QdPageTabsComponent }, QdPageTabsRouterConnectorService], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'qd-tabs', '[class.standalone]': '!hasPageFooter' }, standalone: true, imports: [NgFor, NgIf, NgTemplateOutlet, QdPageTabHeaderComponent, TranslateModule, QdButtonModule, CommonModule], template: "<div class=\"qd-tabs-items-container\" [ngClass]=\"{ scrollable: config?.scrollabe }\">\n  <qd-page-tab-header\n    *ngFor=\"let tab of tabs; let i = index\"\n    (click)=\"selectTab(tab)\"\n    [id]=\"_getTabLabelId(i)\"\n    [index]=\"i\"\n    [state]=\"_getIndicatorType(i, tab.state)\"\n    [label]=\"tab.config.label.i18n | translate\"\n    [counters]=\"tab.config.counters\"\n    [isSelected]=\"selectedIndex === i\"\n    [isDisabled]=\"tab.config?.isDisabled\"\n    [data-test-id]=\"testId + '-header' + '-' + i\"\n  >\n  </qd-page-tab-header>\n</div>\n\n<div class=\"tabs-content\">\n  <ng-container *ngIf=\"!selected?.config?.isDisabled\" [ngTemplateOutlet]=\"selected?.content\"></ng-container>\n</div>\n\n<div class=\"qd-tabs-action-area\" *ngIf=\"isSubmitButtonShown()\">\n  <button qdButton (click)=\"save()\" [disabled]=\"isSubmitButtonDisabled()\" [data-test-id]=\"testId + '-submit'\">\n    {{ config?.submitButton?.i18n || \"i18n.qd.tabs.button.submit\" | translate }}\n  </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host.standalone{height:calc(100% - 50px)}:host .qd-tabs-items-container{display:flex;width:100%;flex-direction:row;flex-wrap:wrap;padding:0 1.25rem;border-bottom:.125rem solid rgb(213,213,213);background-color:#fff;gap:0 .9375rem}@media (max-width: 599.98px){:host .qd-tabs-items-container{padding:0 .9375rem}}@media (max-width: 1279.98px){:host .qd-tabs-items-container.scrollable{flex-wrap:nowrap;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none}}:host .tabs-content{flex:1 1 auto}:host .qd-tabs-action-area{display:flex;width:100%;height:50px;justify-content:flex-end}:host .qd-tabs-action-area button{margin-right:1.25rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], testId: [{
                 type: Input,
                 args: ['data-test-id']
             }], tabSelection: [{
                 type: Output
-            }], _tabs: [{
-                type: ContentChildren,
-                args: [forwardRef(() => QdPageTabComponent)]
             }] } });
 
 class QdPageSubmitActionService {
@@ -34360,12 +34240,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }] });
 
-const QD_TAB_STATE = {
-    NUMBER: 'number',
-    ERROR: 'error',
-    DONE: 'done',
-    EDIT: 'edit'
-};
+// @ts-strict-ignore
+/**
+ * The **QdPageTab** is a single tab inside the **QdPageTabs** within a **QdPage**.
+ */
+class QdPageTabComponent extends CdkStep {
+    translate = inject(TranslateService);
+    /**
+     * Configuration of QdPageTabComponent.
+     *
+     * * @note The use of CDK attributes is not permitted. Please configure this component here.
+     */
+    config;
+    /** Form control for this tab. */
+    set tabControl(tabControl) {
+        this.stepControl = tabControl;
+    }
+    get tabControl() {
+        return this.stepControl;
+    }
+    infoBanners;
+    _destroyed$ = new Subject();
+    constructor() {
+        const tabs = inject(QdPageTabsComponent);
+        const stepperOptions = inject(STEPPER_GLOBAL_OPTIONS, { optional: true });
+        super(tabs, stepperOptions);
+    }
+    ngOnInit() {
+        this.validateLabel();
+        if (this.tabControl)
+            this.initErrorCheck();
+    }
+    ngOnChanges(changes) {
+        super.ngOnChanges();
+        ['label', 'errorMessage', 'state']
+            .filter(inputName => !!changes[inputName])
+            .forEach(inputName => this.blockCdkInput(inputName));
+    }
+    ngOnDestroy() {
+        this._destroyed$.complete();
+    }
+    blockCdkInput(inputName) {
+        throw new Error(`Quadrel Framework | QdPageTab - The use of the "${inputName}" attribute is not permitted. Please use QdPageTabConfig instead.`);
+    }
+    validateLabel() {
+        if (!this.config?.label?.i18n)
+            console.error('Quadrel Framework | QdPageTab - Please provide a label for the tab.');
+    }
+    initErrorCheck() {
+        this.tabControl.statusChanges.pipe(takeUntil$1(this._destroyed$)).subscribe(() => {
+            if (this.hasAnyError(this.tabControl)) {
+                this.interacted = true;
+            }
+        });
+    }
+    hasAnyError(control) {
+        if (control.errors && control.touched)
+            return true;
+        if (control instanceof FormGroup) {
+            return Object.values(control.controls).some(control => this.hasAnyError(control));
+        }
+        if (control instanceof FormArray) {
+            return control.controls.some(control => this.hasAnyError(control));
+        }
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageTabComponent, isStandalone: true, selector: "qd-page-tab", inputs: { config: "config", tabControl: "tabControl" }, providers: [
+            { provide: CdkStep, useExisting: QdPageTabComponent },
+            { provide: STEPPER_GLOBAL_OPTIONS, useValue: { showError: true } }
+        ], queries: [{ propertyName: "infoBanners", predicate: QdPageInfoBannerComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template>\n  <div class=\"page-info-banners\">\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".page-info-banners:has(>qd-page-info-banner:not(.qd-page-info-banner-empty)){padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}.page-info-banners>qd-page-info-banner:last-child{margin-bottom:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'qd-page-tab', providers: [
+                        { provide: CdkStep, useExisting: QdPageTabComponent },
+                        { provide: STEPPER_GLOBAL_OPTIONS, useValue: { showError: true } }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true // inherited by CdkStep
+                    , template: "<ng-template>\n  <div class=\"page-info-banners\">\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".page-info-banners:has(>qd-page-info-banner:not(.qd-page-info-banner-empty)){padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}.page-info-banners>qd-page-info-banner:last-child{margin-bottom:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { config: [{
+                type: Input
+            }], tabControl: [{
+                type: Input
+            }], infoBanners: [{
+                type: ContentChildren,
+                args: [QdPageInfoBannerComponent]
+            }] } });
 
 /**
  * **qdPageTabParameterize** turns the active page tab into the `tab` query parameter
@@ -34397,6 +34357,7 @@ 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,
@@ -34405,6 +34366,7 @@ class QdPageTabsModule {
             QdPageTabHeaderCountersComponent], exports: [QdPageTabsComponent, QdPageTabComponent, QdPageTabsAdapterDirective] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabsModule, imports: [CommonModule,
             TranslateModule,
+            CdkStepperModule,
             QdButtonModule,
             QdIconModule,
             QdPageTabsComponent] });
@@ -34415,6 +34377,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                     imports: [
                         CommonModule,
                         TranslateModule,
+                        CdkStepperModule,
                         QdButtonModule,
                         QdIconModule,
                         QdPageTabsComponent,
@@ -35071,5 +35034,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_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 };
+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 };
 //# sourceMappingURL=quadrel-enterprise-ui-framework.mjs.map