@quadrel-enterprise-ui/framework 20.23.1 → 20.25.0

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

@@ -3125,6 +3125,7 @@ class QdMockCheckboxComponent {
     inputData;
     value;
     disabled = false;
+    hasAutofocus = false;
     testId = 'checkbox';
     valueChange = new EventEmitter();
     get dataTestId() {
@@ -3134,7 +3135,7 @@ class QdMockCheckboxComponent {
         this.valueChange.emit(this.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMockCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdMockCheckboxComponent, isStandalone: false, selector: "qd-checkbox", inputs: { inputData: "inputData", value: "value", disabled: "disabled", testId: ["data-test-id", "testId"] }, outputs: { valueChange: "valueChange" }, host: { listeners: { "click": "handleClick()" }, properties: { "attr.data-test-id": "this.dataTestId" } }, ngImport: i0, template: 'inputData: {{inputData | json}}, value: {{value}}, disabled: {{disabled | json}}', isInline: true, dependencies: [{ kind: "pipe", type: i1.JsonPipe, name: "json" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdMockCheckboxComponent, isStandalone: false, selector: "qd-checkbox", inputs: { inputData: "inputData", value: "value", disabled: "disabled", hasAutofocus: "hasAutofocus", testId: ["data-test-id", "testId"] }, outputs: { valueChange: "valueChange" }, host: { listeners: { "click": "handleClick()" }, properties: { "attr.data-test-id": "this.dataTestId" } }, ngImport: i0, template: 'inputData: {{inputData | json}}, value: {{value}}, disabled: {{disabled | json}}', isInline: true, dependencies: [{ kind: "pipe", type: i1.JsonPipe, name: "json" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMockCheckboxComponent, decorators: [{
             type: Component,
@@ -3149,6 +3150,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }], disabled: [{
                 type: Input
+            }], hasAutofocus: [{
+                type: Input
             }], testId: [{
                 type: Input,
                 args: ['data-test-id']
@@ -8578,7 +8581,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
  *
@@ -9228,6 +9230,14 @@ class QdCheckboxComponent {
     value;
     testId = 'checkbox';
     disabled = false;
+    /**
+     * @description Set to "true", this checkbox's native input will be focused when the application is
+     * initially loaded. Within a checkbox group, the group passes this only to its first checkbox.
+     * Note: hasAutofocus can only be used once per view. No matter in which pattern it is used.
+     *
+     * * @default: false
+     */
+    hasAutofocus = false;
     valueChange = new EventEmitter();
     get checked() {
         return this.inputData.value === this.value;
@@ -9267,13 +9277,13 @@ class QdCheckboxComponent {
         this.valueChange.emit(this.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdCheckboxComponent, isStandalone: false, selector: "qd-checkbox", inputs: { inputData: "inputData", value: "value", testId: ["data-test-id", "testId"], disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.qd-form-disabled": "this.disabled", "class.qd-checkbox-disabled": "this.disabled", "class.qd-checkbox--disabled": "this.isDisabled" }, classAttribute: "qd-checkbox" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdCheckboxComponent, isStandalone: false, selector: "qd-checkbox", inputs: { inputData: "inputData", value: "value", testId: ["data-test-id", "testId"], disabled: "disabled", hasAutofocus: "hasAutofocus" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.qd-form-disabled": "this.disabled", "class.qd-checkbox-disabled": "this.disabled", "class.qd-checkbox--disabled": "this.isDisabled" }, classAttribute: "qd-checkbox" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: QdCheckboxComponent,
                 multi: true
             }
-        ], ngImport: i0, template: "<label\n  [for]=\"inputData.value\"\n  [attr.data-test-id]=\"testId + '-label'\"\n  [ngClass]=\"\n    'qd-checkbox__label' +\n    (inputData.disabled || disabled ? ' qd-checkbox__label--disabled' : '') +\n    (checked ? ' qd-checkbox__label--checked' : '')\n  \"\n>\n  <input\n    type=\"checkbox\"\n    qdVisuallyHidden\n    [id]=\"inputData.value\"\n    [attr.data-test-id]=\"testId + '-input'\"\n    [ngClass]=\"'qd-checkbox__checkbox'\"\n    [name]=\"id\"\n    [value]=\"inputData.value\"\n    [disabled]=\"inputData.disabled || disabled\"\n    (click)=\"handleClick(inputData.value, $event)\"\n    [checked]=\"checked\"\n  />\n\n  <qd-icon\n    [ngClass]=\"'qd-checkbox__indicator'\"\n    *ngIf=\"checked\"\n    [icon]=\"'timesSquareSolid'\"\n    [attr.data-test-id]=\"testId + '-indicator-checked'\"\n  ></qd-icon>\n  <qd-icon\n    [ngClass]=\"'qd-checkbox__indicator'\"\n    *ngIf=\"!checked\"\n    [icon]=\"'squareSolid'\"\n    [attr.data-test-id]=\"testId + '-indicator-unchecked'\"\n  ></qd-icon>\n\n  <span [ngClass]=\"'qd-checkbox__caption qd-intersection-target'\">{{ inputData.i18n | translate }}</span>\n</label>\n", styles: [".qd-checkbox{display:flex;align-items:center;margin-right:1rem}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled){border:.0625rem solid rgb(180,180,180);margin-right:0;margin-bottom:.75rem;background:#fff}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label{width:100%;padding-left:.75rem;line-height:2.25rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label .qd-checkbox__indicator.qd-icon{margin-right:.75rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label--disabled .qd-checkbox__caption{color:#d5d5d5}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{margin-right:.75rem;color:#171717;transform:translateY(.0625rem)}}@media (max-width: 959.98px) and (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{padding:.375rem 0;line-height:1.25rem}}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled):last-child{margin-bottom:0}}.qd-checkbox:last-child{margin-right:0}.qd-checkbox .qd-checkbox__label{position:relative;display:flex;max-width:100%;align-items:center;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400}.qd-checkbox .qd-checkbox__label .qd-checkbox__indicator{margin-right:.375rem;color:#b4b4b4;font-size:1.25rem}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus{color:#171717}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover .qd-checkbox__indicator,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus .qd-checkbox__indicator{color:#757575}.qd-checkbox .qd-checkbox__label--checked{color:#171717}.qd-checkbox .qd-checkbox__label--checked .qd-checkbox__indicator{color:#069}.qd-checkbox .qd-checkbox__label--disabled{color:#d5d5d5;cursor:default}.qd-checkbox .qd-checkbox__label--disabled .qd-checkbox__indicator{color:#d5d5d5}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: QdVisuallyHiddenDirective, selector: "[qdVisuallyHidden]" }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "<label\n  [for]=\"inputData.value\"\n  [attr.data-test-id]=\"testId + '-label'\"\n  [ngClass]=\"\n    'qd-checkbox__label' +\n    (inputData.disabled || disabled ? ' qd-checkbox__label--disabled' : '') +\n    (checked ? ' qd-checkbox__label--checked' : '')\n  \"\n>\n  <input\n    type=\"checkbox\"\n    qdVisuallyHidden\n    [qdAutofocus]=\"hasAutofocus\"\n    [id]=\"inputData.value\"\n    [attr.data-test-id]=\"testId + '-input'\"\n    [ngClass]=\"'qd-checkbox__checkbox'\"\n    [name]=\"id\"\n    [value]=\"inputData.value\"\n    [disabled]=\"inputData.disabled || disabled\"\n    (click)=\"handleClick(inputData.value, $event)\"\n    [checked]=\"checked\"\n  />\n\n  <qd-icon\n    [ngClass]=\"'qd-checkbox__indicator'\"\n    *ngIf=\"checked\"\n    [icon]=\"'timesSquareSolid'\"\n    [attr.data-test-id]=\"testId + '-indicator-checked'\"\n  ></qd-icon>\n  <qd-icon\n    [ngClass]=\"'qd-checkbox__indicator'\"\n    *ngIf=\"!checked\"\n    [icon]=\"'squareSolid'\"\n    [attr.data-test-id]=\"testId + '-indicator-unchecked'\"\n  ></qd-icon>\n\n  <span [ngClass]=\"'qd-checkbox__caption qd-intersection-target'\">{{ inputData.i18n | translate }}</span>\n</label>\n", styles: [".qd-checkbox{display:flex;align-items:center;margin-right:1rem}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled){border:.0625rem solid rgb(180,180,180);margin-right:0;margin-bottom:.75rem;background:#fff}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label{width:100%;padding-left:.75rem;line-height:2.25rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label .qd-checkbox__indicator.qd-icon{margin-right:.75rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label--disabled .qd-checkbox__caption{color:#d5d5d5}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{margin-right:.75rem;color:#171717;transform:translateY(.0625rem)}}@media (max-width: 959.98px) and (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{padding:.375rem 0;line-height:1.25rem}}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled):last-child{margin-bottom:0}}.qd-checkbox:last-child{margin-right:0}.qd-checkbox .qd-checkbox__label{position:relative;display:flex;max-width:100%;align-items:center;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400}.qd-checkbox .qd-checkbox__label .qd-checkbox__indicator{margin-right:.375rem;color:#b4b4b4;font-size:1.25rem}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus{color:#171717}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover .qd-checkbox__indicator,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus .qd-checkbox__indicator{color:#757575}.qd-checkbox .qd-checkbox__label--checked{color:#171717}.qd-checkbox .qd-checkbox__label--checked .qd-checkbox__indicator{color:#069}.qd-checkbox .qd-checkbox__label--disabled{color:#d5d5d5;cursor:default}.qd-checkbox .qd-checkbox__label--disabled .qd-checkbox__indicator{color:#d5d5d5}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: QdAutofocusDirective, selector: "[qdAutofocus]", inputs: ["qdAutofocus"] }, { kind: "directive", type: QdVisuallyHiddenDirective, selector: "[qdVisuallyHidden]" }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdCheckboxComponent, decorators: [{
             type: Component,
@@ -9283,7 +9293,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                             useExisting: QdCheckboxComponent,
                             multi: true
                         }
-                    ], encapsulation: ViewEncapsulation.None, host: { class: 'qd-checkbox' }, standalone: false, template: "<label\n  [for]=\"inputData.value\"\n  [attr.data-test-id]=\"testId + '-label'\"\n  [ngClass]=\"\n    'qd-checkbox__label' +\n    (inputData.disabled || disabled ? ' qd-checkbox__label--disabled' : '') +\n    (checked ? ' qd-checkbox__label--checked' : '')\n  \"\n>\n  <input\n    type=\"checkbox\"\n    qdVisuallyHidden\n    [id]=\"inputData.value\"\n    [attr.data-test-id]=\"testId + '-input'\"\n    [ngClass]=\"'qd-checkbox__checkbox'\"\n    [name]=\"id\"\n    [value]=\"inputData.value\"\n    [disabled]=\"inputData.disabled || disabled\"\n    (click)=\"handleClick(inputData.value, $event)\"\n    [checked]=\"checked\"\n  />\n\n  <qd-icon\n    [ngClass]=\"'qd-checkbox__indicator'\"\n    *ngIf=\"checked\"\n    [icon]=\"'timesSquareSolid'\"\n    [attr.data-test-id]=\"testId + '-indicator-checked'\"\n  ></qd-icon>\n  <qd-icon\n    [ngClass]=\"'qd-checkbox__indicator'\"\n    *ngIf=\"!checked\"\n    [icon]=\"'squareSolid'\"\n    [attr.data-test-id]=\"testId + '-indicator-unchecked'\"\n  ></qd-icon>\n\n  <span [ngClass]=\"'qd-checkbox__caption qd-intersection-target'\">{{ inputData.i18n | translate }}</span>\n</label>\n", styles: [".qd-checkbox{display:flex;align-items:center;margin-right:1rem}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled){border:.0625rem solid rgb(180,180,180);margin-right:0;margin-bottom:.75rem;background:#fff}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label{width:100%;padding-left:.75rem;line-height:2.25rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label .qd-checkbox__indicator.qd-icon{margin-right:.75rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label--disabled .qd-checkbox__caption{color:#d5d5d5}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{margin-right:.75rem;color:#171717;transform:translateY(.0625rem)}}@media (max-width: 959.98px) and (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{padding:.375rem 0;line-height:1.25rem}}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled):last-child{margin-bottom:0}}.qd-checkbox:last-child{margin-right:0}.qd-checkbox .qd-checkbox__label{position:relative;display:flex;max-width:100%;align-items:center;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400}.qd-checkbox .qd-checkbox__label .qd-checkbox__indicator{margin-right:.375rem;color:#b4b4b4;font-size:1.25rem}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus{color:#171717}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover .qd-checkbox__indicator,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus .qd-checkbox__indicator{color:#757575}.qd-checkbox .qd-checkbox__label--checked{color:#171717}.qd-checkbox .qd-checkbox__label--checked .qd-checkbox__indicator{color:#069}.qd-checkbox .qd-checkbox__label--disabled{color:#d5d5d5;cursor:default}.qd-checkbox .qd-checkbox__label--disabled .qd-checkbox__indicator{color:#d5d5d5}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, host: { class: 'qd-checkbox' }, standalone: false, template: "<label\n  [for]=\"inputData.value\"\n  [attr.data-test-id]=\"testId + '-label'\"\n  [ngClass]=\"\n    'qd-checkbox__label' +\n    (inputData.disabled || disabled ? ' qd-checkbox__label--disabled' : '') +\n    (checked ? ' qd-checkbox__label--checked' : '')\n  \"\n>\n  <input\n    type=\"checkbox\"\n    qdVisuallyHidden\n    [qdAutofocus]=\"hasAutofocus\"\n    [id]=\"inputData.value\"\n    [attr.data-test-id]=\"testId + '-input'\"\n    [ngClass]=\"'qd-checkbox__checkbox'\"\n    [name]=\"id\"\n    [value]=\"inputData.value\"\n    [disabled]=\"inputData.disabled || disabled\"\n    (click)=\"handleClick(inputData.value, $event)\"\n    [checked]=\"checked\"\n  />\n\n  <qd-icon\n    [ngClass]=\"'qd-checkbox__indicator'\"\n    *ngIf=\"checked\"\n    [icon]=\"'timesSquareSolid'\"\n    [attr.data-test-id]=\"testId + '-indicator-checked'\"\n  ></qd-icon>\n  <qd-icon\n    [ngClass]=\"'qd-checkbox__indicator'\"\n    *ngIf=\"!checked\"\n    [icon]=\"'squareSolid'\"\n    [attr.data-test-id]=\"testId + '-indicator-unchecked'\"\n  ></qd-icon>\n\n  <span [ngClass]=\"'qd-checkbox__caption qd-intersection-target'\">{{ inputData.i18n | translate }}</span>\n</label>\n", styles: [".qd-checkbox{display:flex;align-items:center;margin-right:1rem}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled){border:.0625rem solid rgb(180,180,180);margin-right:0;margin-bottom:.75rem;background:#fff}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label{width:100%;padding-left:.75rem;line-height:2.25rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label .qd-checkbox__indicator.qd-icon{margin-right:.75rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label--disabled .qd-checkbox__caption{color:#d5d5d5}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{margin-right:.75rem;color:#171717;transform:translateY(.0625rem)}}@media (max-width: 959.98px) and (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{padding:.375rem 0;line-height:1.25rem}}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled):last-child{margin-bottom:0}}.qd-checkbox:last-child{margin-right:0}.qd-checkbox .qd-checkbox__label{position:relative;display:flex;max-width:100%;align-items:center;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400}.qd-checkbox .qd-checkbox__label .qd-checkbox__indicator{margin-right:.375rem;color:#b4b4b4;font-size:1.25rem}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus{color:#171717}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover .qd-checkbox__indicator,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus .qd-checkbox__indicator{color:#757575}.qd-checkbox .qd-checkbox__label--checked{color:#171717}.qd-checkbox .qd-checkbox__label--checked .qd-checkbox__indicator{color:#069}.qd-checkbox .qd-checkbox__label--disabled{color:#d5d5d5;cursor:default}.qd-checkbox .qd-checkbox__label--disabled .qd-checkbox__indicator{color:#d5d5d5}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputData: [{
                 type: Input
             }], value: [{
@@ -9299,6 +9309,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 args: ['class.qd-checkbox-disabled']
             }, {
                 type: Input
+            }], hasAutofocus: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], isDisabled: [{
@@ -9531,6 +9543,7 @@ class QdCheckboxesComponent {
         return this.align === 'horizontal';
     }
     filter = false;
+    hasAutofocus = false;
     label;
     hint;
     align;
@@ -9630,6 +9643,7 @@ class QdCheckboxesComponent {
         this.readonlyAction = getReadonlyAction(this.config);
         this.viewonlyAction = getViewonlyAction(this.config);
         this.filter = getFilter$1(this.config);
+        this.hasAutofocus = getHasAutofocus(this.config);
         this.align = getAlign(this.config);
         this.options = getOptions(this.config);
         this.isLabelDisabled = getIsLabelDisabled(this.config);
@@ -9681,7 +9695,7 @@ class QdCheckboxesComponent {
             },
             QdCheckboxesService,
             QdFormsActionEmitterService
-        ], viewQueries: [{ propertyName: "checkboxes", predicate: QdCheckboxComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n  [isDisabled]=\"isLabelDisabled\"\n></qd-form-label>\n\n<div class=\"qd-checkboxes__input-section\" *ngIf=\"!readonly && !viewonly\">\n  <qd-filter-form-items\n    *ngIf=\"filter\"\n    (filterValueChange)=\"changeValue($event)\"\n    [data-test-id]=\"testId + '-filter-form'\"\n  ></qd-filter-form-items>\n\n  <div class=\"qd-checkboxes__checkbox-section\">\n    <qd-checkbox\n      *ngFor=\"let checkbox of checkboxesListForView\"\n      [inputData]=\"checkbox\"\n      [value]=\"checkboxesValues[checkbox.index]\"\n      [disabled]=\"checkbox.disabled || disabled\"\n      (valueChange)=\"handleClick(checkbox)\"\n      [data-test-id]=\"testId + '-checkbox-' + checkbox.index\"\n    ></qd-checkbox>\n  </div>\n</div>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n  [hint]=\"hint\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"selectedValuesTranslated\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"selectedValuesTranslated\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-checkboxes{display:block;margin-bottom:.75rem}@media (max-width: 959.98px){.qd-checkboxes{height:initial}}.qd-checkboxes .qd-checkboxes__input-section{display:block;flex-direction:column;margin-bottom:.3125rem}.qd-checkboxes .qd-checkboxes__checkbox-section{display:flex;min-height:2.25rem;flex-direction:row}@media (max-width: 959.98px){.qd-checkboxes .qd-checkboxes__checkbox-section{height:initial;flex-direction:column}}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section{display:flex;flex-direction:column}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section .qd-checkbox:not(:last-child){margin-bottom:.5rem}.qd-checkboxes.qd-checkboxes-disabled{pointer-events:none}.qd-checkboxes-readonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--readonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--readonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}.qd-checkboxes-viewonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdCheckboxComponent, selector: "qd-checkbox", inputs: ["inputData", "value", "data-test-id", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: QdFilterFormItemsComponent, selector: "qd-filter-form-items", inputs: ["inputFilterValue", "data-test-id"], outputs: ["filterValueChange"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }], encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "checkboxes", predicate: QdCheckboxComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n  [isDisabled]=\"isLabelDisabled\"\n></qd-form-label>\n\n<div class=\"qd-checkboxes__input-section\" *ngIf=\"!readonly && !viewonly\">\n  <qd-filter-form-items\n    *ngIf=\"filter\"\n    (filterValueChange)=\"changeValue($event)\"\n    [data-test-id]=\"testId + '-filter-form'\"\n  ></qd-filter-form-items>\n\n  <div class=\"qd-checkboxes__checkbox-section\">\n    <qd-checkbox\n      *ngFor=\"let checkbox of checkboxesListForView\"\n      [inputData]=\"checkbox\"\n      [value]=\"checkboxesValues[checkbox.index]\"\n      [disabled]=\"checkbox.disabled || disabled\"\n      [hasAutofocus]=\"hasAutofocus && checkbox.index === 0\"\n      (valueChange)=\"handleClick(checkbox)\"\n      [data-test-id]=\"testId + '-checkbox-' + checkbox.index\"\n    ></qd-checkbox>\n  </div>\n</div>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n  [hint]=\"hint\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"selectedValuesTranslated\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"selectedValuesTranslated\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-checkboxes{display:block;margin-bottom:.75rem}@media (max-width: 959.98px){.qd-checkboxes{height:initial}}.qd-checkboxes .qd-checkboxes__input-section{display:block;flex-direction:column;margin-bottom:.3125rem}.qd-checkboxes .qd-checkboxes__checkbox-section{display:flex;min-height:2.25rem;flex-direction:row}@media (max-width: 959.98px){.qd-checkboxes .qd-checkboxes__checkbox-section{height:initial;flex-direction:column}}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section{display:flex;flex-direction:column}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section .qd-checkbox:not(:last-child){margin-bottom:.5rem}.qd-checkboxes.qd-checkboxes-disabled{pointer-events:none}.qd-checkboxes-readonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--readonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--readonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}.qd-checkboxes-viewonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdCheckboxComponent, selector: "qd-checkbox", inputs: ["inputData", "value", "data-test-id", "disabled", "hasAutofocus"], outputs: ["valueChange"] }, { kind: "component", type: QdFilterFormItemsComponent, selector: "qd-filter-form-items", inputs: ["inputFilterValue", "data-test-id"], outputs: ["filterValueChange"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdCheckboxesComponent, decorators: [{
             type: Component,
@@ -9693,7 +9707,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         },
                         QdCheckboxesService,
                         QdFormsActionEmitterService
-                    ], encapsulation: ViewEncapsulation.None, host: { class: 'qd-checkboxes' }, standalone: false, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n  [isDisabled]=\"isLabelDisabled\"\n></qd-form-label>\n\n<div class=\"qd-checkboxes__input-section\" *ngIf=\"!readonly && !viewonly\">\n  <qd-filter-form-items\n    *ngIf=\"filter\"\n    (filterValueChange)=\"changeValue($event)\"\n    [data-test-id]=\"testId + '-filter-form'\"\n  ></qd-filter-form-items>\n\n  <div class=\"qd-checkboxes__checkbox-section\">\n    <qd-checkbox\n      *ngFor=\"let checkbox of checkboxesListForView\"\n      [inputData]=\"checkbox\"\n      [value]=\"checkboxesValues[checkbox.index]\"\n      [disabled]=\"checkbox.disabled || disabled\"\n      (valueChange)=\"handleClick(checkbox)\"\n      [data-test-id]=\"testId + '-checkbox-' + checkbox.index\"\n    ></qd-checkbox>\n  </div>\n</div>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n  [hint]=\"hint\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"selectedValuesTranslated\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"selectedValuesTranslated\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-checkboxes{display:block;margin-bottom:.75rem}@media (max-width: 959.98px){.qd-checkboxes{height:initial}}.qd-checkboxes .qd-checkboxes__input-section{display:block;flex-direction:column;margin-bottom:.3125rem}.qd-checkboxes .qd-checkboxes__checkbox-section{display:flex;min-height:2.25rem;flex-direction:row}@media (max-width: 959.98px){.qd-checkboxes .qd-checkboxes__checkbox-section{height:initial;flex-direction:column}}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section{display:flex;flex-direction:column}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section .qd-checkbox:not(:last-child){margin-bottom:.5rem}.qd-checkboxes.qd-checkboxes-disabled{pointer-events:none}.qd-checkboxes-readonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--readonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--readonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}.qd-checkboxes-viewonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, host: { class: 'qd-checkboxes' }, standalone: false, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n  [isDisabled]=\"isLabelDisabled\"\n></qd-form-label>\n\n<div class=\"qd-checkboxes__input-section\" *ngIf=\"!readonly && !viewonly\">\n  <qd-filter-form-items\n    *ngIf=\"filter\"\n    (filterValueChange)=\"changeValue($event)\"\n    [data-test-id]=\"testId + '-filter-form'\"\n  ></qd-filter-form-items>\n\n  <div class=\"qd-checkboxes__checkbox-section\">\n    <qd-checkbox\n      *ngFor=\"let checkbox of checkboxesListForView\"\n      [inputData]=\"checkbox\"\n      [value]=\"checkboxesValues[checkbox.index]\"\n      [disabled]=\"checkbox.disabled || disabled\"\n      [hasAutofocus]=\"hasAutofocus && checkbox.index === 0\"\n      (valueChange)=\"handleClick(checkbox)\"\n      [data-test-id]=\"testId + '-checkbox-' + checkbox.index\"\n    ></qd-checkbox>\n  </div>\n</div>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n  [hint]=\"hint\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"selectedValuesTranslated\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"selectedValuesTranslated\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-checkboxes{display:block;margin-bottom:.75rem}@media (max-width: 959.98px){.qd-checkboxes{height:initial}}.qd-checkboxes .qd-checkboxes__input-section{display:block;flex-direction:column;margin-bottom:.3125rem}.qd-checkboxes .qd-checkboxes__checkbox-section{display:flex;min-height:2.25rem;flex-direction:row}@media (max-width: 959.98px){.qd-checkboxes .qd-checkboxes__checkbox-section{height:initial;flex-direction:column}}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section{display:flex;flex-direction:column}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section .qd-checkbox:not(:last-child){margin-bottom:.5rem}.qd-checkboxes.qd-checkboxes-disabled{pointer-events:none}.qd-checkboxes-readonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--readonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--readonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}.qd-checkboxes-viewonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}\n"] }]
         }], ctorParameters: () => [], propDecorators: { formControlName: [{
                 type: Input
             }], values: [{
@@ -12003,7 +12017,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 +12036,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: [{
@@ -12208,7 +12222,6 @@ class QdDatepickerComponent {
     readonlyAction = false;
     viewonlyAction = false;
     language = DEFAULT_LANGUAGE;
-    qdPopoverOnClick;
     control;
     timePicker;
     _disabledDatesValidator;
@@ -14713,6 +14726,12 @@ class QdPinCodeComponent {
     _subs = new Subscription();
     _onChange = () => { };
     _onTouch = () => { };
+    get firstEmptyIndex() {
+        return this.pinCodeService.firstEmpty;
+    }
+    get joinedValues() {
+        return this.pinCodeService.joinedValues;
+    }
     get errors() {
         return this.control ? this.control.errors : [];
     }
@@ -14964,7 +14983,7 @@ class QdPinCodeComponent {
             },
             QdPinCodeService,
             QdFormsActionEmitterService
-        ], viewQueries: [{ propertyName: "inputsList", predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<ng-container *ngFor=\"let i of iterable(codeLength); let index = index; let last = last\">\n  <input\n    #input\n    *ngIf=\"!readonly && !viewonly\"\n    [ngClass]=\"'qd-pin-code__input qd-pin-code--input-' + index + (last ? ' qd-pin-code__input--last' : '')\"\n    [attr.data-test-id]=\"testId + '-input-' + index\"\n    [type]=\"codeHidden ? 'password' : inputType\"\n    [tabindex]=\"pinCodeService.firstEmpty === index ? 0 : -1\"\n    (click)=\"handleCLick($event)\"\n    (keydown.backspace)=\"handleDelete($event)\"\n    (keydown.delete)=\"handleDelete($event)\"\n    (keydown.enter)=\"handleComplete()\"\n    (keypress)=\"handleInput($event)\"\n    (blur)=\"handleBlur(index)\"\n    [disabled]=\"disabled\"\n    autocomplete=\"off\"\n  />\n</ng-container>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n  [hint]=\"hint\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"[pinCodeService.joinedValues]\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"[pinCodeService.joinedValues]\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [":host{display:block;height:4.5rem;margin-bottom:.75rem}:host .qd-pin-code__input{width:1.875rem;height:2.25rem;border:.0625rem solid rgb(180,180,180);margin-right:.75rem;margin-bottom:.375rem;caret-color:#fff0;cursor:default;font-size:1.5rem;font-weight:500;text-align:center}:host .qd-pin-code__input--last{margin-right:0}:host .qd-pin-code__input:focus{border-width:.125rem;border-color:#069}:host .qd-pin-code__input:active{border-width:.0625rem;border-color:#b4b4b4}:host .qd-pin-code__input:focus-visible{outline:none}:host.qd-pin-code--error .qd-pin-code__input{border-color:#c70023}:host.qd-pin-code--error .qd-pin-code__input:focus{border-width:.125rem}:host.qd-pin-code--error .qd-pin-code__input:active{border-width:.0625rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }] });
+        ], viewQueries: [{ propertyName: "inputsList", predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<ng-container *ngFor=\"let i of iterable(codeLength); let index = index; let last = last\">\n  <input\n    #input\n    *ngIf=\"!readonly && !viewonly\"\n    [ngClass]=\"'qd-pin-code__input qd-pin-code--input-' + index + (last ? ' qd-pin-code__input--last' : '')\"\n    [attr.data-test-id]=\"testId + '-input-' + index\"\n    [type]=\"codeHidden ? 'password' : inputType\"\n    [tabindex]=\"firstEmptyIndex === index ? 0 : -1\"\n    (click)=\"handleCLick($event)\"\n    (keydown.backspace)=\"handleDelete($event)\"\n    (keydown.delete)=\"handleDelete($event)\"\n    (keydown.enter)=\"handleComplete()\"\n    (keypress)=\"handleInput($event)\"\n    (blur)=\"handleBlur(index)\"\n    [disabled]=\"disabled\"\n    autocomplete=\"off\"\n  />\n</ng-container>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n  [hint]=\"hint\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"[joinedValues]\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"[joinedValues]\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [":host{display:block;height:4.5rem;margin-bottom:.75rem}:host .qd-pin-code__input{width:1.875rem;height:2.25rem;border:.0625rem solid rgb(180,180,180);margin-right:.75rem;margin-bottom:.375rem;caret-color:#fff0;cursor:default;font-size:1.5rem;font-weight:500;text-align:center}:host .qd-pin-code__input--last{margin-right:0}:host .qd-pin-code__input:focus{border-width:.125rem;border-color:#069}:host .qd-pin-code__input:active{border-width:.0625rem;border-color:#b4b4b4}:host .qd-pin-code__input:focus-visible{outline:none}:host.qd-pin-code--error .qd-pin-code__input{border-color:#c70023}:host.qd-pin-code--error .qd-pin-code__input:focus{border-width:.125rem}:host.qd-pin-code--error .qd-pin-code__input:active{border-width:.0625rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPinCodeComponent, decorators: [{
             type: Component,
@@ -14976,7 +14995,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         },
                         QdPinCodeService,
                         QdFormsActionEmitterService
-                    ], host: { class: 'qd-pin-code' }, standalone: false, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<ng-container *ngFor=\"let i of iterable(codeLength); let index = index; let last = last\">\n  <input\n    #input\n    *ngIf=\"!readonly && !viewonly\"\n    [ngClass]=\"'qd-pin-code__input qd-pin-code--input-' + index + (last ? ' qd-pin-code__input--last' : '')\"\n    [attr.data-test-id]=\"testId + '-input-' + index\"\n    [type]=\"codeHidden ? 'password' : inputType\"\n    [tabindex]=\"pinCodeService.firstEmpty === index ? 0 : -1\"\n    (click)=\"handleCLick($event)\"\n    (keydown.backspace)=\"handleDelete($event)\"\n    (keydown.delete)=\"handleDelete($event)\"\n    (keydown.enter)=\"handleComplete()\"\n    (keypress)=\"handleInput($event)\"\n    (blur)=\"handleBlur(index)\"\n    [disabled]=\"disabled\"\n    autocomplete=\"off\"\n  />\n</ng-container>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n  [hint]=\"hint\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"[pinCodeService.joinedValues]\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"[pinCodeService.joinedValues]\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [":host{display:block;height:4.5rem;margin-bottom:.75rem}:host .qd-pin-code__input{width:1.875rem;height:2.25rem;border:.0625rem solid rgb(180,180,180);margin-right:.75rem;margin-bottom:.375rem;caret-color:#fff0;cursor:default;font-size:1.5rem;font-weight:500;text-align:center}:host .qd-pin-code__input--last{margin-right:0}:host .qd-pin-code__input:focus{border-width:.125rem;border-color:#069}:host .qd-pin-code__input:active{border-width:.0625rem;border-color:#b4b4b4}:host .qd-pin-code__input:focus-visible{outline:none}:host.qd-pin-code--error .qd-pin-code__input{border-color:#c70023}:host.qd-pin-code--error .qd-pin-code__input:focus{border-width:.125rem}:host.qd-pin-code--error .qd-pin-code__input:active{border-width:.0625rem}\n"] }]
+                    ], host: { class: 'qd-pin-code' }, standalone: false, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<ng-container *ngFor=\"let i of iterable(codeLength); let index = index; let last = last\">\n  <input\n    #input\n    *ngIf=\"!readonly && !viewonly\"\n    [ngClass]=\"'qd-pin-code__input qd-pin-code--input-' + index + (last ? ' qd-pin-code__input--last' : '')\"\n    [attr.data-test-id]=\"testId + '-input-' + index\"\n    [type]=\"codeHidden ? 'password' : inputType\"\n    [tabindex]=\"firstEmptyIndex === index ? 0 : -1\"\n    (click)=\"handleCLick($event)\"\n    (keydown.backspace)=\"handleDelete($event)\"\n    (keydown.delete)=\"handleDelete($event)\"\n    (keydown.enter)=\"handleComplete()\"\n    (keypress)=\"handleInput($event)\"\n    (blur)=\"handleBlur(index)\"\n    [disabled]=\"disabled\"\n    autocomplete=\"off\"\n  />\n</ng-container>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n  [hint]=\"hint\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"[joinedValues]\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"[joinedValues]\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [":host{display:block;height:4.5rem;margin-bottom:.75rem}:host .qd-pin-code__input{width:1.875rem;height:2.25rem;border:.0625rem solid rgb(180,180,180);margin-right:.75rem;margin-bottom:.375rem;caret-color:#fff0;cursor:default;font-size:1.5rem;font-weight:500;text-align:center}:host .qd-pin-code__input--last{margin-right:0}:host .qd-pin-code__input:focus{border-width:.125rem;border-color:#069}:host .qd-pin-code__input:active{border-width:.0625rem;border-color:#b4b4b4}:host .qd-pin-code__input:focus-visible{outline:none}:host.qd-pin-code--error .qd-pin-code__input{border-color:#c70023}:host.qd-pin-code--error .qd-pin-code__input:focus{border-width:.125rem}:host.qd-pin-code--error .qd-pin-code__input:active{border-width:.0625rem}\n"] }]
         }], propDecorators: { formControlName: [{
                 type: Input
             }], value: [{
@@ -21165,7 +21184,7 @@ class QdFilterItemBooleanComponent {
         this.filterService.setItemIsActive(this.filterId, this.categoryIndex, this.itemIndex, value === this.itemData);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemBooleanComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemBooleanComponent, isStandalone: false, selector: "qd-filter-item-boolean", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", itemIndex: "itemIndex", i18n: "i18n", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.dataTestId" } }, ngImport: i0, template: "<qd-checkbox\n  [inputData]=\"{ value: itemData, i18n: i18n || '', disabled: false }\"\n  [value]=\"active ? itemData : null\"\n  (valueChange)=\"clickToggle($event)\"\n  qdRwdDisabled\n  [data-test-id]=\"testId\"\n  [attr.data-test-id]=\"testId + '-checkbox'\"\n></qd-checkbox>\n", styles: [":host{position:relative;display:flex;flex-wrap:wrap-reverse;margin:0 .75rem;line-height:2.125rem}:host ::ng-deep .qd-checkbox,:host ::ng-deep .qd-checkbox__label,:host ::ng-deep .qd-checkbox__caption{padding:0!important;border:0;margin:0!important}:host ::ng-deep .qd-form-label{color:#757575!important}:host ::ng-deep .qd-form-label:hover,:host ::ng-deep .qd-form-label:focus,:host ::ng-deep .qd-form-label:active{color:#171717!important}:host ::ng-deep .qd-checkbox__indicator{margin-right:.5rem!important}\n"], dependencies: [{ kind: "directive", type: QdRwdDisabledDirective, selector: "[qdRwdDisabled]" }, { kind: "component", type: QdCheckboxComponent, selector: "qd-checkbox", inputs: ["inputData", "value", "data-test-id", "disabled"], outputs: ["valueChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemBooleanComponent, isStandalone: false, selector: "qd-filter-item-boolean", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", itemIndex: "itemIndex", i18n: "i18n", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.dataTestId" } }, ngImport: i0, template: "<qd-checkbox\n  [inputData]=\"{ value: itemData, i18n: i18n || '', disabled: false }\"\n  [value]=\"active ? itemData : null\"\n  (valueChange)=\"clickToggle($event)\"\n  qdRwdDisabled\n  [data-test-id]=\"testId\"\n  [attr.data-test-id]=\"testId + '-checkbox'\"\n></qd-checkbox>\n", styles: [":host{position:relative;display:flex;flex-wrap:wrap-reverse;margin:0 .75rem;line-height:2.125rem}:host ::ng-deep .qd-checkbox,:host ::ng-deep .qd-checkbox__label,:host ::ng-deep .qd-checkbox__caption{padding:0!important;border:0;margin:0!important}:host ::ng-deep .qd-form-label{color:#757575!important}:host ::ng-deep .qd-form-label:hover,:host ::ng-deep .qd-form-label:focus,:host ::ng-deep .qd-form-label:active{color:#171717!important}:host ::ng-deep .qd-checkbox__indicator{margin-right:.5rem!important}\n"], dependencies: [{ kind: "directive", type: QdRwdDisabledDirective, selector: "[qdRwdDisabled]" }, { kind: "component", type: QdCheckboxComponent, selector: "qd-checkbox", inputs: ["inputData", "value", "data-test-id", "disabled", "hasAutofocus"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemBooleanComponent, decorators: [{
             type: Component,
@@ -21634,7 +21653,7 @@ class QdFilterItemMultiSelectComponent {
         this.filterService.setItemIsActive(this.filterId, this.categoryIndex, this.itemIndex, !!$event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemMultiSelectComponent, isStandalone: false, selector: "qd-filter-item-multi-select", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", itemIndex: "itemIndex", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.dataTestId" } }, ngImport: i0, template: "<qd-checkbox\n  [inputData]=\"{ value: item, i18n: i18n, disabled: false }\"\n  [value]=\"active ? item : null\"\n  (valueChange)=\"clickToggle($event)\"\n  qdRwdDisabled\n  [data-test-id]=\"testId\"\n></qd-checkbox>\n", styles: [":host{position:relative;display:flex;overflow:hidden;flex-wrap:wrap-reverse;padding:0 .75rem;line-height:2.5rem}:host:hover,:host:focus,:host:active{background:#f5f5f5}:host ::ng-deep .qd-checkbox{overflow:hidden}:host ::ng-deep .qd-checkbox__caption{display:block;cursor:pointer!important;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: QdRwdDisabledDirective, selector: "[qdRwdDisabled]" }, { kind: "component", type: QdCheckboxComponent, selector: "qd-checkbox", inputs: ["inputData", "value", "data-test-id", "disabled"], outputs: ["valueChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemMultiSelectComponent, isStandalone: false, selector: "qd-filter-item-multi-select", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", itemIndex: "itemIndex", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.dataTestId" } }, ngImport: i0, template: "<qd-checkbox\n  [inputData]=\"{ value: item, i18n: i18n, disabled: false }\"\n  [value]=\"active ? item : null\"\n  (valueChange)=\"clickToggle($event)\"\n  qdRwdDisabled\n  [data-test-id]=\"testId\"\n></qd-checkbox>\n", styles: [":host{position:relative;display:flex;overflow:hidden;flex-wrap:wrap-reverse;padding:0 .75rem;line-height:2.5rem}:host:hover,:host:focus,:host:active{background:#f5f5f5}:host ::ng-deep .qd-checkbox{overflow:hidden}:host ::ng-deep .qd-checkbox__caption{display:block;cursor:pointer!important;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: QdRwdDisabledDirective, selector: "[qdRwdDisabled]" }, { kind: "component", type: QdCheckboxComponent, selector: "qd-checkbox", inputs: ["inputData", "value", "data-test-id", "disabled", "hasAutofocus"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemMultiSelectComponent, decorators: [{
             type: Component,
@@ -29809,6 +29828,9 @@ class QdPageStepperComponent extends CdkStepper {
     allStepsValid$;
     _destroyed$ = new Subject();
     isGoingToNextStep = false;
+    get hasPageFooter() {
+        return !!this.footerService;
+    }
     constructor() {
         const _dir = inject(Directionality, { optional: true });
         const _changeDetectorRef = inject(ChangeDetectorRef);
@@ -30027,11 +30049,11 @@ class QdPageStepperComponent extends CdkStepper {
         throw new Error(`Quadrel Framework | QdPageStepper - The "${inputName}" attribute is not allowed. Please use QdPageStepperConfig instead.`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageStepperComponent, isStandalone: true, selector: "qd-page-stepper", inputs: { config: "config", testId: ["data-test-id", "testId"] }, outputs: { submitted: "submitted" }, host: { properties: { "class.standalone": "!footerService" }, classAttribute: "qd-stepper" }, providers: [{ provide: CdkStepper, useExisting: QdPageStepperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"qd-stepper-items-container\" *ngIf=\"steps.length > 1\">\n  <qd-page-step-header\n    *ngFor=\"let step of steps; let i = index\"\n    (click)=\"handleClickHeader(step, i)\"\n    [id]=\"_getStepLabelId(i)\"\n    [ngClass]=\"'qd-step'\"\n    [index]=\"i\"\n    [state]=\"_getIndicatorType(i, step.state)\"\n    [label]=\"step.config.label.i18n | translate\"\n    [selected]=\"selectedIndex === i\"\n    [active]=\"step.completed || selectedIndex === i || !linear\"\n    [optional]=\"step.optional\"\n    [locked]=\"!step.editable && i < selectedIndex\"\n  >\n  </qd-page-step-header>\n</div>\n\n<div class=\"stepper-content\">\n  <ng-container [ngTemplateOutlet]=\"selected?.content\"></ng-container>\n</div>\n\n<div class=\"qd-stepper-action-area\" *ngIf=\"!footerService\">\n  <button qdButton qdButtonGhost (click)=\"cancel()\" [data-test-id]=\"testId + '-cancel'\">\n    {{ config?.cancel?.i18n || \"i18n.qd.stepper.cancel\" | translate }}\n  </button>\n\n  <button\n    *ngIf=\"showPreviousButton(selectedIndex)\"\n    qdButton\n    qdButtonGhost\n    (click)=\"previousStep()\"\n    [data-test-id]=\"testId + '-previous'\"\n  >\n    {{ config?.previous?.i18n || \"i18n.qd.stepper.previous\" | translate }}\n  </button>\n\n  <button\n    *ngIf=\"showNextButton(selectedIndex)\"\n    qdButton\n    [disabled]=\"(selectedStepValid$ | async) === false\"\n    (click)=\"nextStep()\"\n    [data-test-id]=\"testId + '-next'\"\n  >\n    {{ config?.next?.i18n || \"i18n.qd.stepper.next\" | translate }}\n  </button>\n\n  <button\n    *ngIf=\"showSubmitButton(selectedIndex)\"\n    qdButton\n    (click)=\"submit()\"\n    [disabled]=\"(allStepsValid$ | async) === false\"\n    [data-test-id]=\"testId + '-submit'\"\n  >\n    {{ config?.submit?.i18n || \"i18n.qd.stepper.submit\" | translate }}\n  </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host.standalone{height:calc(100% - 50px)}:host .qd-stepper-items-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;padding:0 1.25rem;border-bottom:.125rem solid rgb(213,213,213);background-color:#fff;gap:0 .625rem}@media (max-width: 599.98px){:host .qd-stepper-items-container{padding:0 .9375rem}}:host .stepper-content{flex:1 1 auto}:host .qd-stepper-action-area{display:flex;width:100%;height:3.125rem;justify-content:flex-end}:host .qd-stepper-action-area button{margin-right:1.25rem}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QdPageStepHeaderComponent, selector: "qd-page-step-header", inputs: ["state", "label", "index", "selected", "active", "optional", "locked"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: QdButtonModule }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageStepperComponent, isStandalone: true, selector: "qd-page-stepper", inputs: { config: "config", testId: ["data-test-id", "testId"] }, outputs: { submitted: "submitted" }, host: { properties: { "class.standalone": "!hasPageFooter" }, classAttribute: "qd-stepper" }, providers: [{ provide: CdkStepper, useExisting: QdPageStepperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"qd-stepper-items-container\" *ngIf=\"steps.length > 1\">\n  <qd-page-step-header\n    *ngFor=\"let step of steps; let i = index\"\n    (click)=\"handleClickHeader(step, i)\"\n    [id]=\"_getStepLabelId(i)\"\n    [ngClass]=\"'qd-step'\"\n    [index]=\"i\"\n    [state]=\"_getIndicatorType(i, step.state)\"\n    [label]=\"step.config.label.i18n | translate\"\n    [selected]=\"selectedIndex === i\"\n    [active]=\"step.completed || selectedIndex === i || !linear\"\n    [optional]=\"step.optional\"\n    [locked]=\"!step.editable && i < selectedIndex\"\n  >\n  </qd-page-step-header>\n</div>\n\n<div class=\"stepper-content\">\n  <ng-container [ngTemplateOutlet]=\"selected?.content\"></ng-container>\n</div>\n\n<div class=\"qd-stepper-action-area\" *ngIf=\"!hasPageFooter\">\n  <button qdButton qdButtonGhost (click)=\"cancel()\" [data-test-id]=\"testId + '-cancel'\">\n    {{ config?.cancel?.i18n || \"i18n.qd.stepper.cancel\" | translate }}\n  </button>\n\n  <button\n    *ngIf=\"showPreviousButton(selectedIndex)\"\n    qdButton\n    qdButtonGhost\n    (click)=\"previousStep()\"\n    [data-test-id]=\"testId + '-previous'\"\n  >\n    {{ config?.previous?.i18n || \"i18n.qd.stepper.previous\" | translate }}\n  </button>\n\n  <button\n    *ngIf=\"showNextButton(selectedIndex)\"\n    qdButton\n    [disabled]=\"(selectedStepValid$ | async) === false\"\n    (click)=\"nextStep()\"\n    [data-test-id]=\"testId + '-next'\"\n  >\n    {{ config?.next?.i18n || \"i18n.qd.stepper.next\" | translate }}\n  </button>\n\n  <button\n    *ngIf=\"showSubmitButton(selectedIndex)\"\n    qdButton\n    (click)=\"submit()\"\n    [disabled]=\"(allStepsValid$ | async) === false\"\n    [data-test-id]=\"testId + '-submit'\"\n  >\n    {{ config?.submit?.i18n || \"i18n.qd.stepper.submit\" | translate }}\n  </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host.standalone{height:calc(100% - 50px)}:host .qd-stepper-items-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;padding:0 1.25rem;border-bottom:.125rem solid rgb(213,213,213);background-color:#fff;gap:0 .625rem}@media (max-width: 599.98px){:host .qd-stepper-items-container{padding:0 .9375rem}}:host .stepper-content{flex:1 1 auto}:host .qd-stepper-action-area{display:flex;width:100%;height:3.125rem;justify-content:flex-end}:host .qd-stepper-action-area button{margin-right:1.25rem}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QdPageStepHeaderComponent, selector: "qd-page-step-header", inputs: ["state", "label", "index", "selected", "active", "optional", "locked"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: QdButtonModule }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageStepperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-page-stepper', providers: [{ provide: CdkStepper, useExisting: QdPageStepperComponent }], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'qd-stepper', '[class.standalone]': '!footerService' }, standalone: true, imports: [
+            args: [{ selector: 'qd-page-stepper', providers: [{ provide: CdkStepper, useExisting: QdPageStepperComponent }], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'qd-stepper', '[class.standalone]': '!hasPageFooter' }, standalone: true, imports: [
                         NgFor,
                         NgIf,
                         NgClass,
@@ -30040,7 +30062,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         QdPageStepHeaderComponent,
                         TranslateModule,
                         QdButtonModule
-                    ], template: "<div class=\"qd-stepper-items-container\" *ngIf=\"steps.length > 1\">\n  <qd-page-step-header\n    *ngFor=\"let step of steps; let i = index\"\n    (click)=\"handleClickHeader(step, i)\"\n    [id]=\"_getStepLabelId(i)\"\n    [ngClass]=\"'qd-step'\"\n    [index]=\"i\"\n    [state]=\"_getIndicatorType(i, step.state)\"\n    [label]=\"step.config.label.i18n | translate\"\n    [selected]=\"selectedIndex === i\"\n    [active]=\"step.completed || selectedIndex === i || !linear\"\n    [optional]=\"step.optional\"\n    [locked]=\"!step.editable && i < selectedIndex\"\n  >\n  </qd-page-step-header>\n</div>\n\n<div class=\"stepper-content\">\n  <ng-container [ngTemplateOutlet]=\"selected?.content\"></ng-container>\n</div>\n\n<div class=\"qd-stepper-action-area\" *ngIf=\"!footerService\">\n  <button qdButton qdButtonGhost (click)=\"cancel()\" [data-test-id]=\"testId + '-cancel'\">\n    {{ config?.cancel?.i18n || \"i18n.qd.stepper.cancel\" | translate }}\n  </button>\n\n  <button\n    *ngIf=\"showPreviousButton(selectedIndex)\"\n    qdButton\n    qdButtonGhost\n    (click)=\"previousStep()\"\n    [data-test-id]=\"testId + '-previous'\"\n  >\n    {{ config?.previous?.i18n || \"i18n.qd.stepper.previous\" | translate }}\n  </button>\n\n  <button\n    *ngIf=\"showNextButton(selectedIndex)\"\n    qdButton\n    [disabled]=\"(selectedStepValid$ | async) === false\"\n    (click)=\"nextStep()\"\n    [data-test-id]=\"testId + '-next'\"\n  >\n    {{ config?.next?.i18n || \"i18n.qd.stepper.next\" | translate }}\n  </button>\n\n  <button\n    *ngIf=\"showSubmitButton(selectedIndex)\"\n    qdButton\n    (click)=\"submit()\"\n    [disabled]=\"(allStepsValid$ | async) === false\"\n    [data-test-id]=\"testId + '-submit'\"\n  >\n    {{ config?.submit?.i18n || \"i18n.qd.stepper.submit\" | translate }}\n  </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host.standalone{height:calc(100% - 50px)}:host .qd-stepper-items-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;padding:0 1.25rem;border-bottom:.125rem solid rgb(213,213,213);background-color:#fff;gap:0 .625rem}@media (max-width: 599.98px){:host .qd-stepper-items-container{padding:0 .9375rem}}:host .stepper-content{flex:1 1 auto}:host .qd-stepper-action-area{display:flex;width:100%;height:3.125rem;justify-content:flex-end}:host .qd-stepper-action-area button{margin-right:1.25rem}\n"] }]
+                    ], template: "<div class=\"qd-stepper-items-container\" *ngIf=\"steps.length > 1\">\n  <qd-page-step-header\n    *ngFor=\"let step of steps; let i = index\"\n    (click)=\"handleClickHeader(step, i)\"\n    [id]=\"_getStepLabelId(i)\"\n    [ngClass]=\"'qd-step'\"\n    [index]=\"i\"\n    [state]=\"_getIndicatorType(i, step.state)\"\n    [label]=\"step.config.label.i18n | translate\"\n    [selected]=\"selectedIndex === i\"\n    [active]=\"step.completed || selectedIndex === i || !linear\"\n    [optional]=\"step.optional\"\n    [locked]=\"!step.editable && i < selectedIndex\"\n  >\n  </qd-page-step-header>\n</div>\n\n<div class=\"stepper-content\">\n  <ng-container [ngTemplateOutlet]=\"selected?.content\"></ng-container>\n</div>\n\n<div class=\"qd-stepper-action-area\" *ngIf=\"!hasPageFooter\">\n  <button qdButton qdButtonGhost (click)=\"cancel()\" [data-test-id]=\"testId + '-cancel'\">\n    {{ config?.cancel?.i18n || \"i18n.qd.stepper.cancel\" | translate }}\n  </button>\n\n  <button\n    *ngIf=\"showPreviousButton(selectedIndex)\"\n    qdButton\n    qdButtonGhost\n    (click)=\"previousStep()\"\n    [data-test-id]=\"testId + '-previous'\"\n  >\n    {{ config?.previous?.i18n || \"i18n.qd.stepper.previous\" | translate }}\n  </button>\n\n  <button\n    *ngIf=\"showNextButton(selectedIndex)\"\n    qdButton\n    [disabled]=\"(selectedStepValid$ | async) === false\"\n    (click)=\"nextStep()\"\n    [data-test-id]=\"testId + '-next'\"\n  >\n    {{ config?.next?.i18n || \"i18n.qd.stepper.next\" | translate }}\n  </button>\n\n  <button\n    *ngIf=\"showSubmitButton(selectedIndex)\"\n    qdButton\n    (click)=\"submit()\"\n    [disabled]=\"(allStepsValid$ | async) === false\"\n    [data-test-id]=\"testId + '-submit'\"\n  >\n    {{ config?.submit?.i18n || \"i18n.qd.stepper.submit\" | translate }}\n  </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host.standalone{height:calc(100% - 50px)}:host .qd-stepper-items-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;padding:0 1.25rem;border-bottom:.125rem solid rgb(213,213,213);background-color:#fff;gap:0 .625rem}@media (max-width: 599.98px){:host .qd-stepper-items-container{padding:0 .9375rem}}:host .stepper-content{flex:1 1 auto}:host .qd-stepper-action-area{display:flex;width:100%;height:3.125rem;justify-content:flex-end}:host .qd-stepper-action-area button{margin-right:1.25rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], testId: [{
@@ -30506,6 +30528,9 @@ class QdPageTabsComponent extends CdkStepper {
     footerService = inject(QdPageFooterService, { optional: true });
     pageStoreService = inject(QdPageStoreService);
     routerConnector = inject(QdPageTabsRouterConnectorService);
+    get hasPageFooter() {
+        return !!this.footerService;
+    }
     /**
      * Configuration of QdPageTabs.
      */
@@ -30635,11 +30660,11 @@ class QdPageTabsComponent extends CdkStepper {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageTabsComponent, isStandalone: true, selector: "qd-page-tabs", inputs: { config: "config", testId: ["data-test-id", "testId"] }, outputs: { tabSelection: "tabSelection" }, host: { properties: { "class.standalone": "!footerService" }, classAttribute: "qd-tabs" }, providers: [{ provide: CdkStepper, useExisting: QdPageTabsComponent }, QdPageTabsRouterConnectorService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"qd-tabs-items-container\" [ngClass]=\"{ scrollable: config?.scrollabe }\">\n  <qd-page-tab-header\n    *ngFor=\"let tab of tabs; let i = index\"\n    (click)=\"selectTab(tab)\"\n    [id]=\"_getTabLabelId(i)\"\n    [index]=\"i\"\n    [state]=\"_getIndicatorType(i, tab.state)\"\n    [label]=\"tab.config.label.i18n | translate\"\n    [counters]=\"tab.config.counters\"\n    [isSelected]=\"selectedIndex === i\"\n    [isDisabled]=\"tab.config?.isDisabled\"\n    [data-test-id]=\"testId + '-header' + '-' + i\"\n  >\n  </qd-page-tab-header>\n</div>\n\n<div class=\"tabs-content\">\n  <ng-container *ngIf=\"!selected?.config?.isDisabled\" [ngTemplateOutlet]=\"selected?.content\"></ng-container>\n</div>\n\n<div class=\"qd-tabs-action-area\" *ngIf=\"isSubmitButtonShown()\">\n  <button qdButton (click)=\"save()\" [disabled]=\"isSubmitButtonDisabled()\" [data-test-id]=\"testId + '-submit'\">\n    {{ config?.submitButton?.i18n || \"i18n.qd.tabs.button.submit\" | translate }}\n  </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host.standalone{height:calc(100% - 50px)}:host .qd-tabs-items-container{display:flex;width:100%;flex-direction:row;flex-wrap:wrap;padding:0 1.25rem;border-bottom:.125rem solid rgb(213,213,213);background-color:#fff;gap:0 .9375rem}@media (max-width: 599.98px){:host .qd-tabs-items-container{padding:0 .9375rem}}@media (max-width: 1279.98px){:host .qd-tabs-items-container.scrollable{flex-wrap:nowrap;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none}}:host .tabs-content{flex:1 1 auto}:host .qd-tabs-action-area{display:flex;width:100%;height:50px;justify-content:flex-end}:host .qd-tabs-action-area button{margin-right:1.25rem}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QdPageTabHeaderComponent, selector: "qd-page-tab-header", inputs: ["state", "label", "counters", "index", "isSelected", "isDisabled", "data-test-id"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: QdButtonModule }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageTabsComponent, isStandalone: true, selector: "qd-page-tabs", inputs: { config: "config", testId: ["data-test-id", "testId"] }, outputs: { tabSelection: "tabSelection" }, host: { properties: { "class.standalone": "!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: [{ provide: CdkStepper, useExisting: QdPageTabsComponent }, QdPageTabsRouterConnectorService], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'qd-tabs', '[class.standalone]': '!footerService' }, standalone: true, imports: [NgFor, NgIf, NgTemplateOutlet, QdPageTabHeaderComponent, TranslateModule, QdButtonModule, CommonModule], template: "<div class=\"qd-tabs-items-container\" [ngClass]=\"{ scrollable: config?.scrollabe }\">\n  <qd-page-tab-header\n    *ngFor=\"let tab of tabs; let i = index\"\n    (click)=\"selectTab(tab)\"\n    [id]=\"_getTabLabelId(i)\"\n    [index]=\"i\"\n    [state]=\"_getIndicatorType(i, tab.state)\"\n    [label]=\"tab.config.label.i18n | translate\"\n    [counters]=\"tab.config.counters\"\n    [isSelected]=\"selectedIndex === i\"\n    [isDisabled]=\"tab.config?.isDisabled\"\n    [data-test-id]=\"testId + '-header' + '-' + i\"\n  >\n  </qd-page-tab-header>\n</div>\n\n<div class=\"tabs-content\">\n  <ng-container *ngIf=\"!selected?.config?.isDisabled\" [ngTemplateOutlet]=\"selected?.content\"></ng-container>\n</div>\n\n<div class=\"qd-tabs-action-area\" *ngIf=\"isSubmitButtonShown()\">\n  <button qdButton (click)=\"save()\" [disabled]=\"isSubmitButtonDisabled()\" [data-test-id]=\"testId + '-submit'\">\n    {{ config?.submitButton?.i18n || \"i18n.qd.tabs.button.submit\" | translate }}\n  </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host.standalone{height:calc(100% - 50px)}:host .qd-tabs-items-container{display:flex;width:100%;flex-direction:row;flex-wrap:wrap;padding:0 1.25rem;border-bottom:.125rem solid rgb(213,213,213);background-color:#fff;gap:0 .9375rem}@media (max-width: 599.98px){:host .qd-tabs-items-container{padding:0 .9375rem}}@media (max-width: 1279.98px){:host .qd-tabs-items-container.scrollable{flex-wrap:nowrap;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none}}:host .tabs-content{flex:1 1 auto}:host .qd-tabs-action-area{display:flex;width:100%;height:50px;justify-content:flex-end}:host .qd-tabs-action-area button{margin-right:1.25rem}\n"] }]
+            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: [{
@@ -33627,6 +33652,9 @@ class QdShellComponent {
      */
     shellHeaderComponent;
     commentsComponent;
+    get isCommentsDisplayed() {
+        return this.shellHeaderComponent?.isCommentsDisplayed ?? false;
+    }
     hasNavigation$;
     isNavigationPinned$;
     isNavigationRolledOver$;
@@ -33699,7 +33727,7 @@ class QdShellComponent {
             QdShellLeftService,
             QdShellRightService,
             { provide: 'rwdLayout', useValue: { hasLegacyLayout: false } }
-        ], queries: [{ propertyName: "commentsComponent", predicate: QdCommentsComponent }], viewQueries: [{ propertyName: "shellHeaderComponent", first: true, predicate: QdShellHeaderComponent, descendants: true }], ngImport: i0, template: "<div\n  [ngClass]=\"{\n    'qd-shell': true,\n    'has-navigation': hasNavigation$ | async,\n    'left-pinned': isNavigationPinned$ | async,\n    'left-rolled-over': isNavigationRolledOver$ | async,\n    'shell-right-open': isShellRightOpen$ | async,\n    'shell-right-pinned': isShellRightPinned$ | async\n  }\"\n>\n  <header\n    qd-shell-header\n    [config]=\"config\"\n    [isMinimized]=\"(isMinimized$ | async) ?? true\"\n    [isCommentsUsed]=\"commentsComponent.length > 0\"\n    [hasComments]=\"commentsComponent.get(0)?.hasComments$ | async\"\n  ></header>\n\n  <aside\n    qd-shell-left\n    *ngIf=\"hasNavigation$ | async\"\n    [ngClass]=\"{ pinned: isNavigationPinned$ | async, 'rolled-over': isNavigationRolledOver$ | async }\"\n  >\n    <qd-shell-navigation [config]=\"config.navigation\"></qd-shell-navigation>\n  </aside>\n\n  <main [ngClass]=\"{ faded: isFaded$ | async }\">\n    <router-outlet (activate)=\"handleRouterOutletActivation($event)\"></router-outlet>\n  </main>\n\n  <aside\n    qd-shell-right\n    *ngIf=\"isShellRightOpen$ | async\"\n    [config]=\"config\"\n    [ngClass]=\"{\n      pinned: isShellRightPinned$ | async\n    }\"\n  >\n    <!-- TODO: Remove in v17! -->\n    <ng-container *ngIf=\"commentsComponent.length > 0 && shellHeaderComponent.isCommentsDisplayed\"\n      ><ng-content select=\"qd-comments\"></ng-content\n    ></ng-container>\n\n    <qd-shell-notifications *ngIf=\"!shellHeaderComponent.isCommentsDisplayed\"></qd-shell-notifications>\n  </aside>\n\n  <footer\n    qd-shell-footer\n    [copyrightInfo]=\"config.copyrightInfo\"\n    [isSticky]=\"config.isFooterSticky\"\n    *ngIf=\"isHome$ | async\"\n  ></footer>\n</div>\n", styles: [":host{display:block}:host .qd-shell{display:grid;min-height:100vh;background-color:#efefef;grid-template-areas:\"header\" \"main\" \"footer\";grid-template-rows:auto 1fr auto}:host .qd-shell.has-navigation{grid-template-areas:\"header header\" \"aside-left main\" \"footer footer\";grid-template-columns:3rem 1fr;transition:grid-template-columns .3s linear}:host .qd-shell.has-navigation.shell-right-open{grid-template-areas:\"header header header\" \"aside-left main aside-right\" \"footer footer footer\";grid-template-columns:3rem 1fr 0}:host .qd-shell.has-navigation.shell-right-open.shell-right-pinned{grid-template-columns:3rem 1fr 0}:host .qd-shell.has-navigation.shell-right-open.shell-right-pinned main{margin-right:18.75rem}:host .qd-shell.has-navigation.left-pinned{grid-template-columns:18.75rem 1fr}:host .qd-shell.has-navigation.left-pinned.shell-right-open{grid-template-columns:18.75rem 1fr 0}:host .qd-shell.has-navigation.left-pinned.shell-right-open.shell-right-pinned{grid-template-columns:18.75rem 1fr 0}:host .qd-shell.has-navigation.left-pinned.shell-right-open.shell-right-pinned main{margin-right:18.75rem}:host .qd-shell:not(.has-navigation).shell-right-open{grid-template-areas:\"header header\" \"main aside-right\" \"footer footer\";grid-template-columns:1fr 0}:host .qd-shell:not(.has-navigation).shell-right-open.shell-right-pinned{grid-template-columns:1fr 0}:host .qd-shell:not(.has-navigation).shell-right-open.shell-right-pinned main{margin-right:18.75rem}:host .qd-shell ::ng-deep qd-container:not(:last-of-type){border-bottom:rgb(213,213,213) solid .0625rem}:host main{position:relative}:host main.faded:after{position:absolute;z-index:1400;background:#000;content:\"\";inset:0;opacity:.5}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: QdShellFooterComponent, selector: "[qd-shell-footer]", inputs: ["copyrightInfo", "isSticky"] }, { kind: "component", type: QdShellHeaderComponent, selector: "[qd-shell-header]", inputs: ["config", "isMinimized", "isCommentsUsed", "hasComments"], outputs: ["menuIconChange"] }, { kind: "component", type: QdShellLeftComponent, selector: "[qd-shell-left]", inputs: ["navigationTemplateRef"] }, { kind: "component", type: QdShellRightComponent, selector: "[qd-shell-right]", inputs: ["config"] }, { kind: "component", type: QdShellNotificationsComponent, selector: "qd-shell-notifications" }, { kind: "component", type: QdShellNavigationComponent, selector: "qd-shell-navigation", inputs: ["config"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+        ], queries: [{ propertyName: "commentsComponent", predicate: QdCommentsComponent }], viewQueries: [{ propertyName: "shellHeaderComponent", first: true, predicate: QdShellHeaderComponent, descendants: true }], ngImport: i0, template: "<div\n  [ngClass]=\"{\n    'qd-shell': true,\n    'has-navigation': hasNavigation$ | async,\n    'left-pinned': isNavigationPinned$ | async,\n    'left-rolled-over': isNavigationRolledOver$ | async,\n    'shell-right-open': isShellRightOpen$ | async,\n    'shell-right-pinned': isShellRightPinned$ | async\n  }\"\n>\n  <header\n    qd-shell-header\n    [config]=\"config\"\n    [isMinimized]=\"(isMinimized$ | async) ?? true\"\n    [isCommentsUsed]=\"commentsComponent.length > 0\"\n    [hasComments]=\"commentsComponent.get(0)?.hasComments$ | async\"\n  ></header>\n\n  <aside\n    qd-shell-left\n    *ngIf=\"hasNavigation$ | async\"\n    [ngClass]=\"{ pinned: isNavigationPinned$ | async, 'rolled-over': isNavigationRolledOver$ | async }\"\n  >\n    <qd-shell-navigation [config]=\"config.navigation\"></qd-shell-navigation>\n  </aside>\n\n  <main [ngClass]=\"{ faded: isFaded$ | async }\">\n    <router-outlet (activate)=\"handleRouterOutletActivation($event)\"></router-outlet>\n  </main>\n\n  <aside\n    qd-shell-right\n    *ngIf=\"isShellRightOpen$ | async\"\n    [config]=\"config\"\n    [ngClass]=\"{\n      pinned: isShellRightPinned$ | async\n    }\"\n  >\n    <!-- TODO: Remove in v17! -->\n    <ng-container *ngIf=\"commentsComponent.length > 0 && isCommentsDisplayed\"\n      ><ng-content select=\"qd-comments\"></ng-content\n    ></ng-container>\n\n    <qd-shell-notifications *ngIf=\"!isCommentsDisplayed\"></qd-shell-notifications>\n  </aside>\n\n  <footer\n    qd-shell-footer\n    [copyrightInfo]=\"config.copyrightInfo\"\n    [isSticky]=\"config.isFooterSticky\"\n    *ngIf=\"isHome$ | async\"\n  ></footer>\n</div>\n", styles: [":host{display:block}:host .qd-shell{display:grid;min-height:100vh;background-color:#efefef;grid-template-areas:\"header\" \"main\" \"footer\";grid-template-rows:auto 1fr auto}:host .qd-shell.has-navigation{grid-template-areas:\"header header\" \"aside-left main\" \"footer footer\";grid-template-columns:3rem 1fr;transition:grid-template-columns .3s linear}:host .qd-shell.has-navigation.shell-right-open{grid-template-areas:\"header header header\" \"aside-left main aside-right\" \"footer footer footer\";grid-template-columns:3rem 1fr 0}:host .qd-shell.has-navigation.shell-right-open.shell-right-pinned{grid-template-columns:3rem 1fr 0}:host .qd-shell.has-navigation.shell-right-open.shell-right-pinned main{margin-right:18.75rem}:host .qd-shell.has-navigation.left-pinned{grid-template-columns:18.75rem 1fr}:host .qd-shell.has-navigation.left-pinned.shell-right-open{grid-template-columns:18.75rem 1fr 0}:host .qd-shell.has-navigation.left-pinned.shell-right-open.shell-right-pinned{grid-template-columns:18.75rem 1fr 0}:host .qd-shell.has-navigation.left-pinned.shell-right-open.shell-right-pinned main{margin-right:18.75rem}:host .qd-shell:not(.has-navigation).shell-right-open{grid-template-areas:\"header header\" \"main aside-right\" \"footer footer\";grid-template-columns:1fr 0}:host .qd-shell:not(.has-navigation).shell-right-open.shell-right-pinned{grid-template-columns:1fr 0}:host .qd-shell:not(.has-navigation).shell-right-open.shell-right-pinned main{margin-right:18.75rem}:host .qd-shell ::ng-deep qd-container:not(:last-of-type){border-bottom:rgb(213,213,213) solid .0625rem}:host main{position:relative}:host main.faded:after{position:absolute;z-index:1400;background:#000;content:\"\";inset:0;opacity:.5}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: QdShellFooterComponent, selector: "[qd-shell-footer]", inputs: ["copyrightInfo", "isSticky"] }, { kind: "component", type: QdShellHeaderComponent, selector: "[qd-shell-header]", inputs: ["config", "isMinimized", "isCommentsUsed", "hasComments"], outputs: ["menuIconChange"] }, { kind: "component", type: QdShellLeftComponent, selector: "[qd-shell-left]", inputs: ["navigationTemplateRef"] }, { kind: "component", type: QdShellRightComponent, selector: "[qd-shell-right]", inputs: ["config"] }, { kind: "component", type: QdShellNotificationsComponent, selector: "qd-shell-notifications" }, { kind: "component", type: QdShellNavigationComponent, selector: "qd-shell-navigation", inputs: ["config"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellComponent, decorators: [{
             type: Component,
@@ -33708,7 +33736,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         QdShellLeftService,
                         QdShellRightService,
                         { provide: 'rwdLayout', useValue: { hasLegacyLayout: false } }
-                    ], standalone: false, template: "<div\n  [ngClass]=\"{\n    'qd-shell': true,\n    'has-navigation': hasNavigation$ | async,\n    'left-pinned': isNavigationPinned$ | async,\n    'left-rolled-over': isNavigationRolledOver$ | async,\n    'shell-right-open': isShellRightOpen$ | async,\n    'shell-right-pinned': isShellRightPinned$ | async\n  }\"\n>\n  <header\n    qd-shell-header\n    [config]=\"config\"\n    [isMinimized]=\"(isMinimized$ | async) ?? true\"\n    [isCommentsUsed]=\"commentsComponent.length > 0\"\n    [hasComments]=\"commentsComponent.get(0)?.hasComments$ | async\"\n  ></header>\n\n  <aside\n    qd-shell-left\n    *ngIf=\"hasNavigation$ | async\"\n    [ngClass]=\"{ pinned: isNavigationPinned$ | async, 'rolled-over': isNavigationRolledOver$ | async }\"\n  >\n    <qd-shell-navigation [config]=\"config.navigation\"></qd-shell-navigation>\n  </aside>\n\n  <main [ngClass]=\"{ faded: isFaded$ | async }\">\n    <router-outlet (activate)=\"handleRouterOutletActivation($event)\"></router-outlet>\n  </main>\n\n  <aside\n    qd-shell-right\n    *ngIf=\"isShellRightOpen$ | async\"\n    [config]=\"config\"\n    [ngClass]=\"{\n      pinned: isShellRightPinned$ | async\n    }\"\n  >\n    <!-- TODO: Remove in v17! -->\n    <ng-container *ngIf=\"commentsComponent.length > 0 && shellHeaderComponent.isCommentsDisplayed\"\n      ><ng-content select=\"qd-comments\"></ng-content\n    ></ng-container>\n\n    <qd-shell-notifications *ngIf=\"!shellHeaderComponent.isCommentsDisplayed\"></qd-shell-notifications>\n  </aside>\n\n  <footer\n    qd-shell-footer\n    [copyrightInfo]=\"config.copyrightInfo\"\n    [isSticky]=\"config.isFooterSticky\"\n    *ngIf=\"isHome$ | async\"\n  ></footer>\n</div>\n", styles: [":host{display:block}:host .qd-shell{display:grid;min-height:100vh;background-color:#efefef;grid-template-areas:\"header\" \"main\" \"footer\";grid-template-rows:auto 1fr auto}:host .qd-shell.has-navigation{grid-template-areas:\"header header\" \"aside-left main\" \"footer footer\";grid-template-columns:3rem 1fr;transition:grid-template-columns .3s linear}:host .qd-shell.has-navigation.shell-right-open{grid-template-areas:\"header header header\" \"aside-left main aside-right\" \"footer footer footer\";grid-template-columns:3rem 1fr 0}:host .qd-shell.has-navigation.shell-right-open.shell-right-pinned{grid-template-columns:3rem 1fr 0}:host .qd-shell.has-navigation.shell-right-open.shell-right-pinned main{margin-right:18.75rem}:host .qd-shell.has-navigation.left-pinned{grid-template-columns:18.75rem 1fr}:host .qd-shell.has-navigation.left-pinned.shell-right-open{grid-template-columns:18.75rem 1fr 0}:host .qd-shell.has-navigation.left-pinned.shell-right-open.shell-right-pinned{grid-template-columns:18.75rem 1fr 0}:host .qd-shell.has-navigation.left-pinned.shell-right-open.shell-right-pinned main{margin-right:18.75rem}:host .qd-shell:not(.has-navigation).shell-right-open{grid-template-areas:\"header header\" \"main aside-right\" \"footer footer\";grid-template-columns:1fr 0}:host .qd-shell:not(.has-navigation).shell-right-open.shell-right-pinned{grid-template-columns:1fr 0}:host .qd-shell:not(.has-navigation).shell-right-open.shell-right-pinned main{margin-right:18.75rem}:host .qd-shell ::ng-deep qd-container:not(:last-of-type){border-bottom:rgb(213,213,213) solid .0625rem}:host main{position:relative}:host main.faded:after{position:absolute;z-index:1400;background:#000;content:\"\";inset:0;opacity:.5}\n"] }]
+                    ], standalone: false, template: "<div\n  [ngClass]=\"{\n    'qd-shell': true,\n    'has-navigation': hasNavigation$ | async,\n    'left-pinned': isNavigationPinned$ | async,\n    'left-rolled-over': isNavigationRolledOver$ | async,\n    'shell-right-open': isShellRightOpen$ | async,\n    'shell-right-pinned': isShellRightPinned$ | async\n  }\"\n>\n  <header\n    qd-shell-header\n    [config]=\"config\"\n    [isMinimized]=\"(isMinimized$ | async) ?? true\"\n    [isCommentsUsed]=\"commentsComponent.length > 0\"\n    [hasComments]=\"commentsComponent.get(0)?.hasComments$ | async\"\n  ></header>\n\n  <aside\n    qd-shell-left\n    *ngIf=\"hasNavigation$ | async\"\n    [ngClass]=\"{ pinned: isNavigationPinned$ | async, 'rolled-over': isNavigationRolledOver$ | async }\"\n  >\n    <qd-shell-navigation [config]=\"config.navigation\"></qd-shell-navigation>\n  </aside>\n\n  <main [ngClass]=\"{ faded: isFaded$ | async }\">\n    <router-outlet (activate)=\"handleRouterOutletActivation($event)\"></router-outlet>\n  </main>\n\n  <aside\n    qd-shell-right\n    *ngIf=\"isShellRightOpen$ | async\"\n    [config]=\"config\"\n    [ngClass]=\"{\n      pinned: isShellRightPinned$ | async\n    }\"\n  >\n    <!-- TODO: Remove in v17! -->\n    <ng-container *ngIf=\"commentsComponent.length > 0 && isCommentsDisplayed\"\n      ><ng-content select=\"qd-comments\"></ng-content\n    ></ng-container>\n\n    <qd-shell-notifications *ngIf=\"!isCommentsDisplayed\"></qd-shell-notifications>\n  </aside>\n\n  <footer\n    qd-shell-footer\n    [copyrightInfo]=\"config.copyrightInfo\"\n    [isSticky]=\"config.isFooterSticky\"\n    *ngIf=\"isHome$ | async\"\n  ></footer>\n</div>\n", styles: [":host{display:block}:host .qd-shell{display:grid;min-height:100vh;background-color:#efefef;grid-template-areas:\"header\" \"main\" \"footer\";grid-template-rows:auto 1fr auto}:host .qd-shell.has-navigation{grid-template-areas:\"header header\" \"aside-left main\" \"footer footer\";grid-template-columns:3rem 1fr;transition:grid-template-columns .3s linear}:host .qd-shell.has-navigation.shell-right-open{grid-template-areas:\"header header header\" \"aside-left main aside-right\" \"footer footer footer\";grid-template-columns:3rem 1fr 0}:host .qd-shell.has-navigation.shell-right-open.shell-right-pinned{grid-template-columns:3rem 1fr 0}:host .qd-shell.has-navigation.shell-right-open.shell-right-pinned main{margin-right:18.75rem}:host .qd-shell.has-navigation.left-pinned{grid-template-columns:18.75rem 1fr}:host .qd-shell.has-navigation.left-pinned.shell-right-open{grid-template-columns:18.75rem 1fr 0}:host .qd-shell.has-navigation.left-pinned.shell-right-open.shell-right-pinned{grid-template-columns:18.75rem 1fr 0}:host .qd-shell.has-navigation.left-pinned.shell-right-open.shell-right-pinned main{margin-right:18.75rem}:host .qd-shell:not(.has-navigation).shell-right-open{grid-template-areas:\"header header\" \"main aside-right\" \"footer footer\";grid-template-columns:1fr 0}:host .qd-shell:not(.has-navigation).shell-right-open.shell-right-pinned{grid-template-columns:1fr 0}:host .qd-shell:not(.has-navigation).shell-right-open.shell-right-pinned main{margin-right:18.75rem}:host .qd-shell ::ng-deep qd-container:not(:last-of-type){border-bottom:rgb(213,213,213) solid .0625rem}:host main{position:relative}:host main.faded:after{position:absolute;z-index:1400;background:#000;content:\"\";inset:0;opacity:.5}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], searchQueryStringOutput: [{