npm - @quadrel-enterprise-ui/framework - Versions diffs - 20.15.0 → 20.16.0 - Mend

@quadrel-enterprise-ui/framework 20.15.0 → 20.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/fesm2022/quadrel-enterprise-ui-framework.mjs +209 -134
package/fesm2022/quadrel-enterprise-ui-framework.mjs.map +1 -1
package/index.d.ts +48 -17
package/package.json +1 -1
package/src/assets/styles/tools/_tools.all.scss +1 -0
package/src/assets/styles/tools/_tools.statusColors.scss +19 -0

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

@@ -35,6 +35,8 @@ import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import * as i1$1 from '@ngrx/store';
 import { createAction, props, createReducer, on, createSelector, createFeatureSelector, Store, StoreModule } from '@ngrx/store';
 import { diff } from 'deep-object-diff';
+import * as i1$2 from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
 import isObject from 'lodash/isObject';
 import omit from 'lodash/omit';
 import { Directionality } from '@angular/cdk/bidi';
@@ -620,6 +622,13 @@ class QdIconComponent {
      * An icon can be set here.
      */
     icon = 'coatCh';
+    /**
+     * An optional status color can be applied to the icon.
+     */
+    status;
+    get statusClass() {
+        return this.status && !this.isChLogo && !this.isColorLogo ? `qd-icon-status-${this.status}` : '';
+    }
     get isDefaultLogo() {
         return this.icon === 'logo';
     }
@@ -660,13 +669,18 @@ class QdIconComponent {
         this.svgInserted = true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdIconComponent, isStandalone: false, selector: "qd-icon", inputs: { icon: "icon" }, host: { properties: { "class.qd-icon-logo": "this.isDefaultLogo", "class.qd-icon-ch-logo": "this.isChLogo", "class.qd-icon-color-logo": "this.isColorLogo" }, classAttribute: "qd-icon" }, usesOnChanges: true, ngImport: i0, template: '<div [innerHtml]="iconCode"></div>', isInline: true, styles: ["@font-face{font-family:Quadrel-Icon;src:url(data:application/octet-stream;base64,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)}.qd-icon{display:inline-block;font-family:Quadrel-Icon,sans-serif}.qd-icon.qd-icon-ch-logo,.qd-icon.qd-icon-color-logo{color:#dc0018}.qd-icon.qd-icon-logo svg{width:227px;height:auto}.qd-icon:not(.qd-icon-logo) svg{display:none}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdIconComponent, isStandalone: false, selector: "qd-icon", inputs: { icon: "icon", status: "status" }, host: { properties: { "class": "this.statusClass", "class.qd-icon-logo": "this.isDefaultLogo", "class.qd-icon-ch-logo": "this.isChLogo", "class.qd-icon-color-logo": "this.isColorLogo" }, classAttribute: "qd-icon" }, usesOnChanges: true, ngImport: i0, template: '<div [innerHtml]="iconCode"></div>', isInline: true, styles: ["@font-face{font-family:Quadrel-Icon;src:url(data:application/octet-stream;base64,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)}.qd-icon{display:inline-block;font-family:Quadrel-Icon,sans-serif}.qd-icon.qd-icon-logo svg{width:227px;height:auto}.qd-icon:not(.qd-icon-logo) svg{display:none}.qd-icon.qd-icon-ch-logo{color:#dc0018}.qd-icon.qd-icon-status-positive{color:#00813a}.qd-icon.qd-icon-status-warning{color:#ff9b00}.qd-icon.qd-icon-status-critical{color:#c70023}.qd-icon.qd-icon-status-info{color:#069}.qd-icon.qd-icon-status-neutral{color:#757575}.qd-icon.qd-icon-status-inactive{color:#b4b4b4}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-icon', template: '<div [innerHtml]="iconCode"></div>', encapsulation: ViewEncapsulation.None, host: { class: 'qd-icon' }, standalone: false, styles: ["@font-face{font-family:Quadrel-Icon;src:url(data:application/octet-stream;base64,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)}.qd-icon{display:inline-block;font-family:Quadrel-Icon,sans-serif}.qd-icon.qd-icon-ch-logo,.qd-icon.qd-icon-color-logo{color:#dc0018}.qd-icon.qd-icon-logo svg{width:227px;height:auto}.qd-icon:not(.qd-icon-logo) svg{display:none}\n"] }]
+            args: [{ selector: 'qd-icon', template: '<div [innerHtml]="iconCode"></div>', encapsulation: ViewEncapsulation.None, host: { class: 'qd-icon' }, standalone: false, styles: ["@font-face{font-family:Quadrel-Icon;src:url(data:application/octet-stream;base64,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)}.qd-icon{display:inline-block;font-family:Quadrel-Icon,sans-serif}.qd-icon.qd-icon-logo svg{width:227px;height:auto}.qd-icon:not(.qd-icon-logo) svg{display:none}.qd-icon.qd-icon-ch-logo{color:#dc0018}.qd-icon.qd-icon-status-positive{color:#00813a}.qd-icon.qd-icon-status-warning{color:#ff9b00}.qd-icon.qd-icon-status-critical{color:#c70023}.qd-icon.qd-icon-status-info{color:#069}.qd-icon.qd-icon-status-neutral{color:#757575}.qd-icon.qd-icon-status-inactive{color:#b4b4b4}\n"] }]
         }], propDecorators: { icon: [{
                 type: Input
+            }], status: [{
+                type: Input
+            }], statusClass: [{
+                type: HostBinding,
+                args: ['class']
             }], isDefaultLogo: [{
                 type: HostBinding,
                 args: ['class.qd-icon-logo']
@@ -973,13 +987,15 @@ class QdButtonAdditionalInfoComponent {
                 return 'warningHexFilled';
             case 'info':
                 return 'exclamationCircle';
+            default:
+                return '';
         }
     }
     get infoType() {
         return this.buttonAdditionalInfo?.infoType;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdButtonAdditionalInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdButtonAdditionalInfoComponent, isStandalone: false, selector: "qd-button-additional-info", inputs: { buttonAdditionalInfo: "buttonAdditionalInfo" }, host: { listeners: { "click": "showMessage()" }, properties: { "class": "this.infoTypeClass" } }, ngImport: i0, template: "<qd-icon [icon]=\"icon\"></qd-icon>\n", styles: [":host{position:relative;top:0;left:-1.5rem;display:flex;height:100%;box-sizing:content-box;align-items:center;padding:0 .75rem;color:#171717;cursor:pointer;font-size:1rem;white-space:nowrap}:host qd-icon{margin-right:.25rem;font-size:1.3125rem}:host.warning{background-color:#ff9b00}:host.warning:hover{background-color:#e97e00}:host.info{background-color:#069}:host.info:hover{background-color:#14516f}:host.info div{color:#fff}\n"], dependencies: [{ kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdButtonAdditionalInfoComponent, isStandalone: false, selector: "qd-button-additional-info", inputs: { buttonAdditionalInfo: "buttonAdditionalInfo" }, host: { listeners: { "click": "showMessage()" }, properties: { "class": "this.infoTypeClass" } }, ngImport: i0, template: "<qd-icon [icon]=\"icon\"></qd-icon>\n", styles: [":host{position:relative;top:0;left:-1.5rem;display:flex;height:100%;box-sizing:content-box;align-items:center;padding:0 .75rem;color:#171717;cursor:pointer;font-size:1rem;white-space:nowrap}:host qd-icon{margin-right:.25rem;font-size:1.3125rem}:host.warning{background-color:#ff9b00}:host.warning:hover{background-color:#e97e00}:host.info{background-color:#069}:host.info:hover{background-color:#14516f}:host.info div{color:#fff}\n"], dependencies: [{ kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdButtonAdditionalInfoComponent, decorators: [{
             type: Component,
@@ -1050,7 +1066,7 @@ class QdButtonComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdButtonComponent, isStandalone: false, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: { disabled: "disabled", color: "color", icon: "icon", testId: ["data-test-id", "testId"], additionalInfo: "additionalInfo" }, host: { properties: { "attr.class": "classes", "attr.disabled": "isDisabled", "attr.data-test-id": "testId" } }, ngImport: i0, template: "<qd-icon [icon]=\"icon\" *ngIf=\"hasIcon\"></qd-icon>\n<qd-button-additional-info *ngIf=\"additionalInfo\" [buttonAdditionalInfo]=\"additionalInfo\"></qd-button-additional-info>\n<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{color:#fff;font-size:.875rem;font-weight:400;line-height:1.3125rem;display:flex;height:2.25rem;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;padding:0 1.5rem;border:none;border-bottom:.0625rem solid transparent;margin:0;cursor:pointer;outline:none;text-decoration:none;-webkit-user-select:none;user-select:none}@media (max-width: 959.98px){:host.only-icon-on-small-viewport{padding:.875rem}:host.only-icon-on-small-viewport.qd-button-has-icon{padding-right:0;padding-left:0}:host.only-icon-on-small-viewport.qd-button-has-icon .qd-icon{padding:.75rem;margin:0;font-size:1.125rem}:host.only-icon-on-small-viewport .content:not(:has(.content)){display:none}}:host.qd-button-primary{background:#069}:host.qd-button-primary:hover{background:#14516f}:host.qd-button-secondary{background:#757575}:host.qd-button-secondary:hover{background:#454545}:host.qd-button-error{background:#c70023}:host.qd-button-error:hover{background:#a4001e}:host.qd-button-link{height:1.5rem;padding:0;background:transparent}:host.qd-button-link .qd-icon{margin-left:0}:host.qd-button-link:hover{background:transparent}:host.qd-button-link.qd-button-primary{color:#069}:host.qd-button-link.qd-button-primary:hover{border-bottom:.0625rem solid rgb(20,81,111);color:#14516f}:host.qd-button-link.qd-button-secondary{color:#333}:host.qd-button-link.qd-button-secondary:hover{border-bottom:.0625rem solid rgb(23,23,23);color:#171717}:host.qd-button-link.qd-button-error{color:#c70023}:host.qd-button-link.qd-button-error:hover{border-bottom:.0625rem solid rgb(164,0,30);color:#a4001e}:host.qd-button-ghost{color:#171717;font-size:.875rem;font-weight:500;line-height:1.3125rem;border:2px solid;background:transparent}:host.qd-button-ghost:hover{background:transparent}:host.qd-button-ghost.qd-button-primary{border-color:#069;color:#069}:host.qd-button-ghost.qd-button-primary:hover{border-color:#14516f;color:#14516f}:host.qd-button-ghost.qd-button-secondary{border-color:#333;color:#333}:host.qd-button-ghost.qd-button-secondary:hover{border-color:#171717;color:#171717}:host.qd-button-ghost.qd-button-error{border-color:#c70023;color:#c70023}:host.qd-button-ghost.qd-button-error:hover{border-color:#a4001e;color:#a4001e}:host.qd-button-disabled{background:#d5d5d5;color:#979797;cursor:default}:host.qd-button-disabled:hover{background:#d5d5d5}:host.qd-button-disabled.qd-button-link,:host.qd-button-disabled.qd-button-link:hover{border:none;background:#fff0;color:#979797}:host.qd-button-disabled.qd-button-ghost,:host.qd-button-disabled.qd-button-ghost:hover{border-color:#979797;background:#fff0;color:#979797}:host.qd-button-has-icon{padding-left:0}:host.qd-button-has-icon .qd-icon{margin-right:.375rem;margin-left:1.25rem;font-size:1rem}:host.qd-button-has-icon.qd-button-link .qd-icon{margin-left:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "component", type: QdButtonAdditionalInfoComponent, selector: "qd-button-additional-info", inputs: ["buttonAdditionalInfo"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdButtonComponent, isStandalone: false, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: { disabled: "disabled", color: "color", icon: "icon", testId: ["data-test-id", "testId"], additionalInfo: "additionalInfo" }, host: { properties: { "attr.class": "classes", "attr.disabled": "isDisabled", "attr.data-test-id": "testId" } }, ngImport: i0, template: "<qd-icon [icon]=\"icon\" *ngIf=\"hasIcon\"></qd-icon>\n<qd-button-additional-info *ngIf=\"additionalInfo\" [buttonAdditionalInfo]=\"additionalInfo\"></qd-button-additional-info>\n<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{color:#fff;font-size:.875rem;font-weight:400;line-height:1.3125rem;display:flex;height:2.25rem;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;padding:0 1.5rem;border:none;border-bottom:.0625rem solid transparent;margin:0;cursor:pointer;outline:none;text-decoration:none;-webkit-user-select:none;user-select:none}@media (max-width: 959.98px){:host.only-icon-on-small-viewport{padding:.875rem}:host.only-icon-on-small-viewport.qd-button-has-icon{padding-right:0;padding-left:0}:host.only-icon-on-small-viewport.qd-button-has-icon .qd-icon{padding:.75rem;margin:0;font-size:1.125rem}:host.only-icon-on-small-viewport .content:not(:has(.content)){display:none}}:host.qd-button-primary{background:#069}:host.qd-button-primary:hover{background:#14516f}:host.qd-button-secondary{background:#757575}:host.qd-button-secondary:hover{background:#454545}:host.qd-button-error{background:#c70023}:host.qd-button-error:hover{background:#a4001e}:host.qd-button-link{height:1.5rem;padding:0;background:transparent}:host.qd-button-link .qd-icon{margin-left:0}:host.qd-button-link:hover{background:transparent}:host.qd-button-link.qd-button-primary{color:#069}:host.qd-button-link.qd-button-primary:hover{border-bottom:.0625rem solid rgb(20,81,111);color:#14516f}:host.qd-button-link.qd-button-secondary{color:#333}:host.qd-button-link.qd-button-secondary:hover{border-bottom:.0625rem solid rgb(23,23,23);color:#171717}:host.qd-button-link.qd-button-error{color:#c70023}:host.qd-button-link.qd-button-error:hover{border-bottom:.0625rem solid rgb(164,0,30);color:#a4001e}:host.qd-button-ghost{color:#171717;font-size:.875rem;font-weight:500;line-height:1.3125rem;border:2px solid;background:transparent}:host.qd-button-ghost:hover{background:transparent}:host.qd-button-ghost.qd-button-primary{border-color:#069;color:#069}:host.qd-button-ghost.qd-button-primary:hover{border-color:#14516f;color:#14516f}:host.qd-button-ghost.qd-button-secondary{border-color:#333;color:#333}:host.qd-button-ghost.qd-button-secondary:hover{border-color:#171717;color:#171717}:host.qd-button-ghost.qd-button-error{border-color:#c70023;color:#c70023}:host.qd-button-ghost.qd-button-error:hover{border-color:#a4001e;color:#a4001e}:host.qd-button-disabled{background:#d5d5d5;color:#979797;cursor:default}:host.qd-button-disabled:hover{background:#d5d5d5}:host.qd-button-disabled.qd-button-link,:host.qd-button-disabled.qd-button-link:hover{border:none;background:#fff0;color:#979797}:host.qd-button-disabled.qd-button-ghost,:host.qd-button-disabled.qd-button-ghost:hover{border-color:#979797;background:#fff0;color:#979797}:host.qd-button-has-icon{padding-left:0}:host.qd-button-has-icon .qd-icon{margin-right:.375rem;margin-left:1.25rem;font-size:1rem}:host.qd-button-has-icon.qd-button-link .qd-icon{margin-left:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdButtonAdditionalInfoComponent, selector: "qd-button-additional-info", inputs: ["buttonAdditionalInfo"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdButtonComponent, decorators: [{
             type: Component,
@@ -1535,7 +1551,7 @@ class QdDialogComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDialogComponent, isStandalone: false, selector: "qd-dialog", host: { properties: { "class.full-width": "isFullWidth", "class.has-sections": "this.hasSectionsClass" } }, providers: [QdDialogComponent], viewQueries: [{ propertyName: "body", first: true, predicate: ["body"], descendants: true }, { propertyName: "infoBanners", first: true, predicate: ["banners"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"!isFullWidth\" class=\"dialog-header\">\n  <div class=\"title-container\">\n    {{ config?.title?.i18n | translate }}\n  </div>\n  <button\n    *ngIf=\"!config?.hideCloseHeaderButton\"\n    qdIconButton\n    class=\"close\"\n    color=\"secondary\"\n    tabindex=\"-1\"\n    (click)=\"close()\"\n  >\n    <qd-icon icon=\"timesLargeLight\"></qd-icon>\n  </button>\n</div>\n\n<button\n  *ngIf=\"!config?.hideCloseHeaderButton && isFullWidth\"\n  qdIconButton\n  class=\"close\"\n  color=\"secondary\"\n  tabindex=\"-1\"\n  (click)=\"close()\"\n>\n  <qd-icon icon=\"timesLargeLight\"></qd-icon>\n</button>\n\n<div class=\"wrapper-body\">\n  <div [class.has-dialog-info-banners]=\"hasInfoBanner\" #banners>\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n  <div class=\"body\" [class.full-width]=\"isFullWidth\" #body>\n    <ng-content></ng-content>\n  </div>\n</div>\n\n<div class=\"qd-dialog-actions\">\n  <button *ngIf=\"config.cancel\" qdButton qdButtonGhost color=\"secondary\" (click)=\"close()\">\n    {{ config?.cancel?.label?.i18n ?? \"i18n.qd.dialog.action.cancel\" | translate }}\n  </button>\n  <button *ngIf=\"config.primary\" qdButton (click)=\"primaryActionClicked()\">\n    {{ config?.primary?.label?.i18n ?? \"i18n.qd.dialog.action.primary\" | translate }}\n  </button>\n  <ng-content select=\"qd-dialog-action\"></ng-content>\n</div>\n", styles: ["qd-dialog{display:flex;width:100%;height:100%;flex-direction:column;background:#efefef}qd-dialog.full-width{position:relative;width:calc(100% - 3rem)!important;height:calc(100% - 3rem)!important;margin:1.5rem}qd-dialog.full-width .close{position:absolute;z-index:9999;top:1.25rem;right:1rem;color:#454545;cursor:pointer}.dialog-header{display:flex;height:3.125rem;flex-direction:row;align-items:center;justify-content:space-between;padding:.5rem 1.5rem;border-bottom:2px solid rgb(213,213,213);background:#fff}.dialog-header .title-container{display:block;color:#171717;font-weight:500}.dialog-header .close{cursor:pointer}.wrapper-body{overflow:auto;flex:1;background:#efefef}.wrapper-body .has-dialog-info-banners{padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}.wrapper-body .has-dialog-info-banners qd-page-info-banner:last-child{margin-bottom:0}.wrapper-body .body.full-width{height:100%}.wrapper-body .body:not(.full-width){max-height:80vh;padding:1rem 1.5rem}.wrapper-body .body:not(.full-width) qd-section{padding-right:1.5rem;padding-left:1.5rem}.wrapper-body .body:not(.full-width) qd-text-section{margin-right:0;margin-left:0}qd-dialog.has-sections .wrapper-body .body:not(.full-width){padding:0}.qd-dialog-actions{display:flex;justify-content:flex-end;padding:.5rem 1.5rem;border-top:2px solid rgb(213,213,213);background:#efefef;column-gap:.625rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: QdIconButtonComponent, selector: "button[qdIconButton], a[qdIconButton], button[qd-icon-button]", inputs: ["color", "data-test-id"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDialogComponent, isStandalone: false, selector: "qd-dialog", host: { properties: { "class.full-width": "isFullWidth", "class.has-sections": "this.hasSectionsClass" } }, providers: [QdDialogComponent], viewQueries: [{ propertyName: "body", first: true, predicate: ["body"], descendants: true }, { propertyName: "infoBanners", first: true, predicate: ["banners"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"!isFullWidth\" class=\"dialog-header\">\n  <div class=\"title-container\">\n    {{ config?.title?.i18n | translate }}\n  </div>\n  <button\n    *ngIf=\"!config?.hideCloseHeaderButton\"\n    qdIconButton\n    class=\"close\"\n    color=\"secondary\"\n    tabindex=\"-1\"\n    (click)=\"close()\"\n  >\n    <qd-icon icon=\"timesLargeLight\"></qd-icon>\n  </button>\n</div>\n\n<button\n  *ngIf=\"!config?.hideCloseHeaderButton && isFullWidth\"\n  qdIconButton\n  class=\"close\"\n  color=\"secondary\"\n  tabindex=\"-1\"\n  (click)=\"close()\"\n>\n  <qd-icon icon=\"timesLargeLight\"></qd-icon>\n</button>\n\n<div class=\"wrapper-body\">\n  <div [class.has-dialog-info-banners]=\"hasInfoBanner\" #banners>\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n  <div class=\"body\" [class.full-width]=\"isFullWidth\" #body>\n    <ng-content></ng-content>\n  </div>\n</div>\n\n<div class=\"qd-dialog-actions\">\n  <button *ngIf=\"config.cancel\" qdButton qdButtonGhost color=\"secondary\" (click)=\"close()\">\n    {{ config?.cancel?.label?.i18n ?? \"i18n.qd.dialog.action.cancel\" | translate }}\n  </button>\n  <button *ngIf=\"config.primary\" qdButton (click)=\"primaryActionClicked()\">\n    {{ config?.primary?.label?.i18n ?? \"i18n.qd.dialog.action.primary\" | translate }}\n  </button>\n  <ng-content select=\"qd-dialog-action\"></ng-content>\n</div>\n", styles: ["qd-dialog{display:flex;width:100%;height:100%;flex-direction:column;background:#efefef}qd-dialog.full-width{position:relative;width:calc(100% - 3rem)!important;height:calc(100% - 3rem)!important;margin:1.5rem}qd-dialog.full-width .close{position:absolute;z-index:9999;top:1.25rem;right:1rem;color:#454545;cursor:pointer}.dialog-header{display:flex;height:3.125rem;flex-direction:row;align-items:center;justify-content:space-between;padding:.5rem 1.5rem;border-bottom:2px solid rgb(213,213,213);background:#fff}.dialog-header .title-container{display:block;color:#171717;font-weight:500}.dialog-header .close{cursor:pointer}.wrapper-body{overflow:auto;flex:1;background:#efefef}.wrapper-body .has-dialog-info-banners{padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}.wrapper-body .has-dialog-info-banners qd-page-info-banner:last-child{margin-bottom:0}.wrapper-body .body.full-width{height:100%}.wrapper-body .body:not(.full-width){max-height:80vh;padding:1rem 1.5rem}.wrapper-body .body:not(.full-width) qd-section{padding-right:1.5rem;padding-left:1.5rem}.wrapper-body .body:not(.full-width) qd-text-section{margin-right:0;margin-left:0}qd-dialog.has-sections .wrapper-body .body:not(.full-width){padding:0}.qd-dialog-actions{display:flex;justify-content:flex-end;padding:.5rem 1.5rem;border-top:2px solid rgb(213,213,213);background:#efefef;column-gap:.625rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: QdIconButtonComponent, selector: "button[qdIconButton], a[qdIconButton], button[qd-icon-button]", inputs: ["color", "data-test-id"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDialogComponent, decorators: [{
             type: Component,
@@ -2076,8 +2092,6 @@ class QdMockPopoverOnClickDirective {
     closed = new EventEmitter();
     _open = false;
     _embeddedView;
-    ngOnInit() { }
-    ngOnDestroy() { }
     show(event) {
         if (this.qdPopoverStopPropagation)
             event.stopPropagation();
@@ -3874,6 +3888,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 class QdMockIconComponent {
     icon = 'coatCh';
+    status;
     get isDefaultLogo() {
         return this.icon === 'logo';
     }
@@ -3884,7 +3899,7 @@ class QdMockIconComponent {
         return this.icon === 'quadrelLogoColor';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMockIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdMockIconComponent, isStandalone: false, selector: "qd-icon", inputs: { icon: "icon" }, host: { properties: { "class.qd-icon-logo": "this.isDefaultLogo", "class.qd-icon-ch-logo": "this.isChLogo", "class.qd-icon-color-logo": "this.isColorLogo" }, classAttribute: "qd-icon" }, ngImport: i0, template: 'icon: {{icon}}<ng-content></ng-content>', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdMockIconComponent, isStandalone: false, selector: "qd-icon", inputs: { icon: "icon", status: "status" }, host: { properties: { "class.qd-icon-logo": "this.isDefaultLogo", "class.qd-icon-ch-logo": "this.isChLogo", "class.qd-icon-color-logo": "this.isColorLogo" }, classAttribute: "qd-icon" }, ngImport: i0, template: 'icon: {{icon}}<ng-content></ng-content>', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMockIconComponent, decorators: [{
             type: Component,
@@ -3896,6 +3911,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }], propDecorators: { icon: [{
                 type: Input
+            }], status: [{
+                type: Input
             }], isDefaultLogo: [{
                 type: HostBinding,
                 args: ['class.qd-icon-logo']
@@ -5699,7 +5716,7 @@ class QdDataFacetsBooleanComponent {
     data;
     testId;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDataFacetsBooleanComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDataFacetsBooleanComponent, isStandalone: false, selector: "qd-data-facets-boolean", inputs: { data: "data", testId: "testId" }, host: { properties: { "attr.data-test-id": "testId" }, classAttribute: "qd-data-facets" }, ngImport: i0, template: "<qd-icon [icon]=\"data ? 'checkmark' : 'timesLarge'\"></qd-icon>\n", styles: [":host{font-size:1.25rem;text-align:center}\n"], dependencies: [{ kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDataFacetsBooleanComponent, isStandalone: false, selector: "qd-data-facets-boolean", inputs: { data: "data", testId: "testId" }, host: { properties: { "attr.data-test-id": "testId" }, classAttribute: "qd-data-facets" }, ngImport: i0, template: "<qd-icon [icon]=\"data ? 'checkmark' : 'timesLarge'\"></qd-icon>\n", styles: [":host{font-size:1.25rem;text-align:center}\n"], dependencies: [{ kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDataFacetsBooleanComponent, decorators: [{
             type: Component,
@@ -5759,7 +5776,7 @@ class QdChipComponent {
         return this.label?.nativeElement?.innerHTML?.replace(/\s*/g, '') === '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdChipComponent, isStandalone: false, selector: "qd-chip", inputs: { state: "state", close: "close", data: "data", testId: ["data-test-id", "testId"] }, outputs: { closeClickEmitter: "closeClickEmitter" }, viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span #label [class]=\"'qd-chip__label'\" [attr.data-test-id]=\"testId + '-caption'\"><ng-content></ng-content></span>\n<qd-icon\n  *ngIf=\"close\"\n  [icon]=\"'times'\"\n  (click)=\"$event.stopPropagation(); clickClose()\"\n  [attr.data-test-id]=\"testId + '-close'\"\n></qd-icon>\n", styles: [".qd-chip{display:inline-flex;padding:0 .5rem;border-width:.0625rem;border-style:solid;border-radius:1rem;cursor:default;font-size:.8125rem;font-weight:400;line-height:1.5rem;white-space:nowrap}.qd-chip .qd-icon{display:flex;cursor:pointer;font-size:1.25rem}.qd-chip.inProcess{border-color:#069;color:#069}.qd-chip.ready,.qd-chip.success{border-color:#00813a;color:#00813a}.qd-chip.warning{border-color:#ff9b00;color:#ff9b00}.qd-chip.error{border-color:#c70023;color:#c70023}.qd-chip.archive{border-color:#979797;background:#d5d5d5;color:#979797}.qd-chip.filter{border-color:#757575;background:#757575;color:#fff;font-size:.75rem}.qd-chip.filter:hover,.qd-chip.filter:focus{background:#333}.qd-chip.none{border-color:#757575;color:#171717}qd-layout-page-process-header .qd-chip{padding:0 1rem;border-radius:1rem;line-height:1.75rem}.panel-type-control .qd-chip{padding:0 .5rem;border:.0625rem solid;border-radius:1rem;background:none;line-height:1.5rem}.panel-type-control .qd-chip:before{display:inline-block;width:.625rem;height:.625rem;border-radius:50%;margin-right:.625rem;background:red;content:\"\"}.qd-chip.empty{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdChipComponent, isStandalone: false, selector: "qd-chip", inputs: { state: "state", close: "close", data: "data", testId: ["data-test-id", "testId"] }, outputs: { closeClickEmitter: "closeClickEmitter" }, viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span #label [class]=\"'qd-chip__label'\" [attr.data-test-id]=\"testId + '-caption'\"><ng-content></ng-content></span>\n<qd-icon\n  *ngIf=\"close\"\n  [icon]=\"'times'\"\n  (click)=\"$event.stopPropagation(); clickClose()\"\n  [attr.data-test-id]=\"testId + '-close'\"\n></qd-icon>\n", styles: [".qd-chip{display:inline-flex;padding:0 .5rem;border-width:.0625rem;border-style:solid;border-radius:1rem;cursor:default;font-size:.8125rem;font-weight:400;line-height:1.5rem;white-space:nowrap}.qd-chip .qd-icon{display:flex;cursor:pointer;font-size:1.25rem}.qd-chip.inProcess{border-color:#069;color:#069}.qd-chip.ready,.qd-chip.success{border-color:#00813a;color:#00813a}.qd-chip.warning{border-color:#ff9b00;color:#ff9b00}.qd-chip.error{border-color:#c70023;color:#c70023}.qd-chip.archive{border-color:#979797;background:#d5d5d5;color:#979797}.qd-chip.filter{border-color:#757575;background:#757575;color:#fff;font-size:.75rem}.qd-chip.filter:hover,.qd-chip.filter:focus{background:#333}.qd-chip.none{border-color:#757575;color:#171717}qd-layout-page-process-header .qd-chip{padding:0 1rem;border-radius:1rem;line-height:1.75rem}.panel-type-control .qd-chip{padding:0 .5rem;border:.0625rem solid;border-radius:1rem;background:none;line-height:1.5rem}.panel-type-control .qd-chip:before{display:inline-block;width:.625rem;height:.625rem;border-radius:50%;margin-right:.625rem;background:red;content:\"\"}.qd-chip.empty{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdChipComponent, decorators: [{
             type: Component,
@@ -5893,7 +5910,7 @@ class QdDataFacetsChipTruncatedTooltipComponent {
         return tooltipSize / viewPortSize > 0.5;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDataFacetsChipTruncatedTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDataFacetsChipTruncatedTooltipComponent, isStandalone: false, selector: "qd-data-facets-chip-truncated-tooltip", inputs: { truncatedChips: "truncatedChips", i18n: "i18n", columnOptions: "columnOptions", overlayRef: "overlayRef" }, host: { properties: { "style.maxWidth": "this.styleMaxWidth", "style.visibility": "this.styleVisibility" } }, usesOnChanges: true, ngImport: i0, template: "<qd-chip *ngFor=\"let chip of truncatedChips\" [state]=\"chip.level\">\n  {{ columnOptions?.isTranslated ? (i18n + \".\" + chip.label | translate) : chip.label }}\n</qd-chip>\n<qd-icon *ngIf=\"closable\" [icon]=\"'timesLarge'\" class=\"closer\" (click)=\"close()\"></qd-icon>\n", styles: [":host{box-shadow:0 0 .625rem #979797;position:relative;display:flex;overflow:auto;flex-wrap:wrap;padding:1rem;background-color:#fff;gap:.5625rem}:host .closer{position:absolute;top:.3125rem;right:.3125rem;cursor:pointer}\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: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDataFacetsChipTruncatedTooltipComponent, isStandalone: false, selector: "qd-data-facets-chip-truncated-tooltip", inputs: { truncatedChips: "truncatedChips", i18n: "i18n", columnOptions: "columnOptions", overlayRef: "overlayRef" }, host: { properties: { "style.maxWidth": "this.styleMaxWidth", "style.visibility": "this.styleVisibility" } }, usesOnChanges: true, ngImport: i0, template: "<qd-chip *ngFor=\"let chip of truncatedChips\" [state]=\"chip.level\">\n  {{ columnOptions?.isTranslated ? (i18n + \".\" + chip.label | translate) : chip.label }}\n</qd-chip>\n<qd-icon *ngIf=\"closable\" [icon]=\"'timesLarge'\" class=\"closer\" (click)=\"close()\"></qd-icon>\n", styles: [":host{box-shadow:0 0 .625rem #979797;position:relative;display:flex;overflow:auto;flex-wrap:wrap;padding:1rem;background-color:#fff;gap:.5625rem}:host .closer{position:absolute;top:.3125rem;right:.3125rem;cursor:pointer}\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: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDataFacetsChipTruncatedTooltipComponent, decorators: [{
             type: Component,
@@ -6232,7 +6249,7 @@ class QdDataFacetsIconComponent {
     data;
     testId;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDataFacetsIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDataFacetsIconComponent, isStandalone: false, selector: "qd-data-facets-icon", inputs: { data: "data", testId: "testId" }, host: { properties: { "attr.data-test-id": "testId" }, classAttribute: "qd-data-facets" }, ngImport: i0, template: "<qd-icon *ngIf=\"data\" [icon]=\"data\"></qd-icon>\n", styles: [":host{font-size:1.625rem;text-align:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDataFacetsIconComponent, isStandalone: false, selector: "qd-data-facets-icon", inputs: { data: "data", testId: "testId" }, host: { properties: { "attr.data-test-id": "testId" }, classAttribute: "qd-data-facets" }, ngImport: i0, template: "<qd-icon *ngIf=\"data\" [icon]=\"data\"></qd-icon>\n", styles: [":host{font-size:1.625rem;text-align:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDataFacetsIconComponent, decorators: [{
             type: Component,
@@ -6518,14 +6535,14 @@ class QdDataFacetsTextComponent {
         return this.i18n + '.' + text;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDataFacetsTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDataFacetsTextComponent, isStandalone: false, selector: "qd-data-facets-text", inputs: { config: "config", data: "data", i18n: "i18n", testId: "testId" }, host: { properties: { "class": "'qd-data-facets ' + textTransformClassName + (isList ? ' has-list' : '')", "attr.data-test-id": "testId" } }, ngImport: i0, template: "<ng-container *ngIf=\"isList\">\n  <span *ngFor=\"let text of data\" class=\"text text-list\">\n    {{ shouldTranslate ? (getI18n(text) | translate) : text }}\n  </span>\n</ng-container>\n<span *ngIf=\"!isList\" class=\"text text-single\">\n  {{ shouldTranslate ? (getI18n(\"\" + data) | translate) : data }}\n</span>\n", styles: [":host.has-list{display:flex;flex-flow:column;padding-top:.75rem}:host span.text-list{display:block;min-height:1.5625rem;margin-top:.8125rem;line-height:1rem}:host span.text-list:first-of-type{margin-top:0}:host.qd-data-facets-text-capitalize{text-transform:capitalize}:host.qd-data-facets-text-uppercase{text-transform:uppercase}:host.qd-data-facets-text-lowercase{text-transform:lowercase}:host.qd-data-facets-text-full-width{text-transform:full-width}:host.qd-data-facets-text-full-size-kana{text-transform:full-size-kana}:host.qd-data-facets-text-none{text-transform:none}\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: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDataFacetsTextComponent, isStandalone: false, selector: "qd-data-facets-text", inputs: { config: "config", data: "data", i18n: "i18n", testId: "testId" }, host: { properties: { "class": "'qd-data-facets ' + textTransformClassName", "attr.data-test-id": "testId" } }, ngImport: i0, template: "<span *ngIf=\"!isList\" class=\"text text-single\">\n  {{ shouldTranslate ? (getI18n(\"\" + data) | translate) : data }}\n</span>\n\n<ng-container *ngIf=\"isList\">\n  <span *ngFor=\"let text of data\" class=\"text text-list\">\n    {{ shouldTranslate ? (getI18n(text) | translate) : text }}\n  </span>\n</ng-container>\n", styles: [":host{display:block;line-height:1.25rem}:host .text-list{display:block}:host .text-list:not(:last-child){margin-bottom:.625rem}:host.qd-data-facets-text-capitalize{text-transform:capitalize}:host.qd-data-facets-text-uppercase{text-transform:uppercase}:host.qd-data-facets-text-lowercase{text-transform:lowercase}:host.qd-data-facets-text-full-width{text-transform:full-width}:host.qd-data-facets-text-full-size-kana{text-transform:full-size-kana}:host.qd-data-facets-text-none{text-transform:none}\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: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDataFacetsTextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'qd-data-facets-text', host: {
-                        '[class]': `'qd-data-facets ' + textTransformClassName + (isList ? ' has-list' : '')`,
+                        '[class]': `'qd-data-facets ' + textTransformClassName`,
                         '[attr.data-test-id]': 'testId'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container *ngIf=\"isList\">\n  <span *ngFor=\"let text of data\" class=\"text text-list\">\n    {{ shouldTranslate ? (getI18n(text) | translate) : text }}\n  </span>\n</ng-container>\n<span *ngIf=\"!isList\" class=\"text text-single\">\n  {{ shouldTranslate ? (getI18n(\"\" + data) | translate) : data }}\n</span>\n", styles: [":host.has-list{display:flex;flex-flow:column;padding-top:.75rem}:host span.text-list{display:block;min-height:1.5625rem;margin-top:.8125rem;line-height:1rem}:host span.text-list:first-of-type{margin-top:0}:host.qd-data-facets-text-capitalize{text-transform:capitalize}:host.qd-data-facets-text-uppercase{text-transform:uppercase}:host.qd-data-facets-text-lowercase{text-transform:lowercase}:host.qd-data-facets-text-full-width{text-transform:full-width}:host.qd-data-facets-text-full-size-kana{text-transform:full-size-kana}:host.qd-data-facets-text-none{text-transform:none}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<span *ngIf=\"!isList\" class=\"text text-single\">\n  {{ shouldTranslate ? (getI18n(\"\" + data) | translate) : data }}\n</span>\n\n<ng-container *ngIf=\"isList\">\n  <span *ngFor=\"let text of data\" class=\"text text-list\">\n    {{ shouldTranslate ? (getI18n(text) | translate) : text }}\n  </span>\n</ng-container>\n", styles: [":host{display:block;line-height:1.25rem}:host .text-list{display:block}:host .text-list:not(:last-child){margin-bottom:.625rem}:host.qd-data-facets-text-capitalize{text-transform:capitalize}:host.qd-data-facets-text-uppercase{text-transform:uppercase}:host.qd-data-facets-text-lowercase{text-transform:lowercase}:host.qd-data-facets-text-full-width{text-transform:full-width}:host.qd-data-facets-text-full-size-kana{text-transform:full-size-kana}:host.qd-data-facets-text-none{text-transform:none}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], data: [{
@@ -7437,6 +7454,9 @@ const OVERLAY_WIDTH = 280;
 const UNSUBSCRIBE_IMMEDIATELY = true;
 const THRESHOLD = 1;
 /**
+ * @deprecated Will be removed in v21. This directive is no longer used inside
+ * the framework. Use `QdTooltipOnClickDirective` (`[qdTooltipOnClick]`) instead.
+ *
  * QdTooltipAtIntersectionDirective provides a tooltip. This will be triggered if the content is intersected.
  *
  * * Selector: [qdTooltipAtIntersection]
@@ -7496,7 +7516,8 @@ class QdTooltipAtIntersectionDirective {
             positionStrategy: this._positionBuilder
                 .flexibleConnectedTo(this._host)
                 .withPositions([{ originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' }]),
-            width: convertPxToRem(OVERLAY_WIDTH)
+            width: convertPxToRem(OVERLAY_WIDTH),
+            scrollStrategy: this._overlay.scrollStrategies.reposition()
         });
     }
     subscribeShow() {
@@ -7538,12 +7559,18 @@ const TOOLTIP_POSITIONS = [
     { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center' },
     { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center' }
 ];
+/**
+ * **QdTooltipOnClickDirective** attaches a click-toggled tooltip overlay to the host
+ * element and renders {@link QdTooltipContent}.
+ *
+ * Content is capped at 512 characters across headline and paragraphs combined;
+ * an ellipsis is appended only to a paragraph that is actually cut.
+ */
 class QdTooltipOnClickDirective {
-    overlay = inject(Overlay);
-    elementRef = inject(ElementRef);
-    translateService = inject(TranslateService);
+    /**
+     * Tooltip content displayed on click — optional headline plus paragraphs.
+     */
     qdTooltipContent;
-    _overlayRef;
     onClickToggle(event) {
         event.stopPropagation();
         this._overlayRef ? this.close() : this.show();
@@ -7552,9 +7579,16 @@ class QdTooltipOnClickDirective {
         if (!this.elementRef.nativeElement.contains(target))
             this.close();
     }
+    overlay = inject(Overlay);
+    elementRef = inject(ElementRef);
+    translateService = inject(TranslateService);
+    _overlayRef;
     ngOnDestroy() {
         this.close();
     }
+    /**
+     * Opens the tooltip overlay positioned relative to the host element.
+     */
     show() {
         const positionStrategy = this.overlay
             .position()
@@ -7562,10 +7596,16 @@ class QdTooltipOnClickDirective {
             .withFlexibleDimensions(false)
             .withPush(false)
             .withPositions(TOOLTIP_POSITIONS);
-        this._overlayRef = this.overlay.create({ positionStrategy });
+        this._overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition()
+        });
         const tooltipRef = this._overlayRef.attach(new ComponentPortal(QdTooltipComponent));
         tooltipRef.instance.content = this.getContent();
     }
+    /**
+     * Closes and disposes the tooltip overlay if one is attached.
+     */
     close() {
         if (this._overlayRef) {
             this._overlayRef.dispose();
@@ -7573,31 +7613,30 @@ class QdTooltipOnClickDirective {
         }
     }
     getContent() {
-        const content = { paragraphs: [] };
-        let fullText = '';
-        const headline = this.qdTooltipContent?.headline?.i18n;
-        if (headline) {
-            const translatedHeadline = this.translate(headline);
-            content.headline = translatedHeadline;
-            fullText += translatedHeadline;
-        }
-        const paragraphs = this.qdTooltipContent?.paragraphs || [];
-        const translatedParagraphs = paragraphs.map(p => this.translate(p.i18n));
-        if (translatedParagraphs.length) {
-            content.paragraphs.push(...translatedParagraphs);
-            fullText += translatedParagraphs.join('');
-        }
-        const truncatedText = this.truncateText(fullText);
-        return {
-            headline: content.headline,
-            paragraphs: content.paragraphs.map(p => truncatedText.includes(p) ? p : `${p.substring(0, MAX_TOOLTIP_CHARACTER)}...`)
-        };
-    }
-    truncateText(text) {
-        if (text.length <= MAX_TOOLTIP_CHARACTER)
-            return text.trim();
-        console.warn(`Quadrel Framework | QdTooltip - Tooltip content exceeds ${MAX_TOOLTIP_CHARACTER} characters. It will be truncated.`);
-        return `${text.substring(0, MAX_TOOLTIP_CHARACTER).trim()}...`;
+        const headlineKey = this.qdTooltipContent?.headline?.i18n;
+        const headline = headlineKey ? this.translate(headlineKey) : undefined;
+        const paragraphs = (this.qdTooltipContent?.paragraphs ?? []).map(p => this.translate(p.i18n));
+        let remaining = MAX_TOOLTIP_CHARACTER - (headline?.length ?? 0);
+        let exceeded = false;
+        const rendered = [];
+        for (const paragraph of paragraphs) {
+            if (remaining <= 0) {
+                exceeded = true;
+                break;
+            }
+            if (paragraph.length <= remaining) {
+                rendered.push(paragraph);
+                remaining -= paragraph.length;
+                continue;
+            }
+            rendered.push(`${paragraph.substring(0, remaining).trim()}...`);
+            exceeded = true;
+            break;
+        }
+        if (exceeded) {
+            console.warn(`Quadrel Framework | QdTooltip - Tooltip content exceeds ${MAX_TOOLTIP_CHARACTER} characters. It will be truncated.`);
+        }
+        return { headline, paragraphs: rendered };
     }
     translate(key) {
         return this.translateService.instant(key);
@@ -7627,7 +7666,7 @@ class QdTooltipIconComponent {
         return !!this.tooltip && this.tooltip.hidden !== true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTooltipIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTooltipIconComponent, isStandalone: false, selector: "qd-tooltip-icon", inputs: { tooltip: "tooltip" }, ngImport: i0, template: "<qd-icon\n  *ngIf=\"isVisible\"\n  icon=\"circleInfo\"\n  class=\"additional-info\"\n  qdTooltipOnClick\n  [qdTooltipContent]=\"tooltip?.content\"\n></qd-icon>\n", styles: [".additional-info{align-self:center;margin-left:to-rem(4);color:#069;cursor:pointer;font-size:to-rem(16);font-weight:400;transform:translateY(to-rem(1))}.additional-info:hover,.additional-info:focus,.additional-info:active{color:#14516f}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "directive", type: QdTooltipOnClickDirective, selector: "[qdTooltipOnClick]", inputs: ["qdTooltipContent"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTooltipIconComponent, isStandalone: false, selector: "qd-tooltip-icon", inputs: { tooltip: "tooltip" }, ngImport: i0, template: "<qd-icon\n  *ngIf=\"isVisible\"\n  icon=\"circleInfo\"\n  class=\"additional-info\"\n  qdTooltipOnClick\n  [qdTooltipContent]=\"tooltip?.content\"\n></qd-icon>\n", styles: [".additional-info{align-self:center;margin-left:to-rem(4);color:#069;cursor:pointer;font-size:to-rem(16);font-weight:400;transform:translateY(to-rem(1))}.additional-info:hover,.additional-info:focus,.additional-info:active{color:#14516f}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdTooltipOnClickDirective, selector: "[qdTooltipOnClick]", inputs: ["qdTooltipContent"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTooltipIconComponent, decorators: [{
             type: Component,
@@ -8177,6 +8216,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             }] } });
 // @ts-strict-ignore
+/**
+ * @deprecated Will be removed in v21. This directive is no longer used inside
+ * the framework. Use `QdPopoverOnClickDirective` (`[qdPopoverOnClick]`) instead.
+ */
 class QdPopoverOnHoverDirective {
     hostRef = inject(ElementRef);
     overlayPositionBuilder = inject(OverlayPositionBuilder);
@@ -8203,7 +8246,12 @@ class QdPopoverOnHoverDirective {
                 overlayY: 'top'
             }
         ]);
-        this.overlayRef = this.overlay.create({ positionStrategy, width: this.qdPopoverWidth, disposeOnNavigation: true });
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            width: this.qdPopoverWidth,
+            disposeOnNavigation: true,
+            scrollStrategy: this.overlay.scrollStrategies.reposition()
+        });
     }
     ngOnDestroy() {
         this.close();
@@ -8652,7 +8700,7 @@ class QdCheckboxChipsItemComponent {
         return this.data.disabled || false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdCheckboxChipsItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdCheckboxChipsItemComponent, isStandalone: false, selector: "qd-checkbox-chips-item", inputs: { data: "data", testId: ["data-test-id", "testId"] }, host: { properties: { "class.active": "this.active", "class.disabled": "this.disabled" } }, ngImport: i0, template: "<qd-icon\n  class=\"indicator checked\"\n  *ngIf=\"active\"\n  [icon]=\"'checkmark'\"\n  [attr.data-test-id]=\"testId + '-indicator-checked'\"\n></qd-icon>\n\n<qd-icon\n  class=\"indicator unchecked\"\n  *ngIf=\"!active\"\n  [icon]=\"'circle'\"\n  [attr.data-test-id]=\"testId + '-indicator-unchecked'\"\n></qd-icon>\n\n<span class=\"label\">\n  {{ data.i18n | translate }}\n</span>\n", styles: [":host{position:relative;display:inline-flex;height:2.5rem;border:.0625rem solid rgb(213,213,213);border-radius:1.25rem;margin-right:.75rem;margin-bottom:.375rem;background:#fff;color:#171717;cursor:pointer}:host .indicator,:host .label{align-self:center}:host .indicator{margin-right:.375rem;margin-left:.625rem;color:#fff0;font-size:.9375rem;font-weight:900}:host .indicator:before{position:absolute;top:50%;width:1.25rem;height:1.25rem;border:.0625rem solid rgb(213,213,213);border-radius:50%;background:#fff;content:\"\";transform:translate(1px,-50%)}:host .indicator ::ng-deep div{position:relative;width:1.25rem;height:1.25rem;text-align:center;transform:translate(1px,2px)}:host .label{margin-right:1rem;margin-left:.25rem;font-size:.9375rem;transform:translateY(.0625rem)}:host.active{border-color:#fff0;background:#069}:host.active .indicator{color:#069}:host.active .indicator:before{border-color:#fff0}:host.active .label{color:#fff}:host.disabled{border-color:#d5d5d5;color:#d5d5d5;cursor:default;pointer-events:none}:host.disabled.active{background:#d5d5d5}:host.disabled .indicator.checked{color:#d5d5d5!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdCheckboxChipsItemComponent, isStandalone: false, selector: "qd-checkbox-chips-item", inputs: { data: "data", testId: ["data-test-id", "testId"] }, host: { properties: { "class.active": "this.active", "class.disabled": "this.disabled" } }, ngImport: i0, template: "<qd-icon\n  class=\"indicator checked\"\n  *ngIf=\"active\"\n  [icon]=\"'checkmark'\"\n  [attr.data-test-id]=\"testId + '-indicator-checked'\"\n></qd-icon>\n\n<qd-icon\n  class=\"indicator unchecked\"\n  *ngIf=\"!active\"\n  [icon]=\"'circle'\"\n  [attr.data-test-id]=\"testId + '-indicator-unchecked'\"\n></qd-icon>\n\n<span class=\"label\">\n  {{ data.i18n | translate }}\n</span>\n", styles: [":host{position:relative;display:inline-flex;height:2.5rem;border:.0625rem solid rgb(213,213,213);border-radius:1.25rem;margin-right:.75rem;margin-bottom:.375rem;background:#fff;color:#171717;cursor:pointer}:host .indicator,:host .label{align-self:center}:host .indicator{margin-right:.375rem;margin-left:.625rem;color:#fff0;font-size:.9375rem;font-weight:900}:host .indicator:before{position:absolute;top:50%;width:1.25rem;height:1.25rem;border:.0625rem solid rgb(213,213,213);border-radius:50%;background:#fff;content:\"\";transform:translate(1px,-50%)}:host .indicator ::ng-deep div{position:relative;width:1.25rem;height:1.25rem;text-align:center;transform:translate(1px,2px)}:host .label{margin-right:1rem;margin-left:.25rem;font-size:.9375rem;transform:translateY(.0625rem)}:host.active{border-color:#fff0;background:#069}:host.active .indicator{color:#069}:host.active .indicator:before{border-color:#fff0}:host.active .label{color:#fff}:host.disabled{border-color:#d5d5d5;color:#d5d5d5;cursor:default;pointer-events:none}:host.disabled.active{background:#d5d5d5}:host.disabled .indicator.checked{color:#d5d5d5!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdCheckboxChipsItemComponent, decorators: [{
             type: Component,
@@ -9143,7 +9191,7 @@ class QdCheckboxComponent {
                 useExisting: QdCheckboxComponent,
                 multi: true
             }
-        ], ngImport: i0, template: "<label\n  [for]=\"inputData.value\"\n  [attr.data-test-id]=\"testId + '-label'\"\n  [ngClass]=\"\n    'qd-checkbox__label' +\n    (inputData.disabled || disabled ? ' qd-checkbox__label--disabled' : '') +\n    (checked ? ' qd-checkbox__label--checked' : '')\n  \"\n>\n  <input\n    type=\"checkbox\"\n    qdVisuallyHidden\n    [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"] }, { 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    [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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdCheckboxComponent, decorators: [{
             type: Component,
@@ -9290,11 +9338,11 @@ class QdFilterFormItemsComponent {
         this.filterValueChange.emit($event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterFormItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterFormItemsComponent, isStandalone: false, selector: "qd-filter-form-items", inputs: { inputFilterValue: "inputFilterValue", testId: ["data-test-id", "testId"] }, outputs: { filterValueChange: "filterValueChange" }, host: { classAttribute: "qd-filter-form-items" }, ngImport: i0, template: "<qd-icon [icon]=\"'magnifier'\" class=\"qd-filter-form-items__filter-magnifier\"></qd-icon>\n\n<input\n  type=\"text\"\n  class=\"qd-filter-form-items__filter\"\n  [(ngModel)]=\"filterValue\"\n  (ngModelChange)=\"changeValue($event)\"\n  [attr.data-test-id]=\"testId + '-filter-items'\"\n  [qdAutofocus]=\"true\"\n/>\n", styles: [".qd-filter-form-items__filter{width:100%;height:2.25rem;padding:0 .75rem 0 2.375rem;border:none;border-bottom:.0625rem solid rgb(213,213,213);margin-bottom:.5rem;background:#fff;color:#171717}.qd-filter-form-items__filter:focus,.qd-filter-form-items__filter:hover,.qd-filter-form-items__filter:active{border:none;background:#f5f5f5;outline:none}.qd-filter-form-items__filter:hover,.qd-filter-form-items__filter:active{border-bottom:.125rem solid rgb(23,23,23)}.qd-filter-form-items__filter:focus{border-bottom:.125rem solid rgb(0,102,153)}.qd-filter-form-items__filter-magnifier{position:absolute;padding:.625rem 0 .625rem .9375rem}.qd-filter-form-items__filter-magnifier .qd-icon{color:#757575}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: QdAutofocusDirective, selector: "[qdAutofocus]", inputs: ["qdAutofocus"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterFormItemsComponent, isStandalone: false, selector: "qd-filter-form-items", inputs: { inputFilterValue: "inputFilterValue", testId: ["data-test-id", "testId"] }, outputs: { filterValueChange: "filterValueChange" }, host: { classAttribute: "qd-filter-form-items" }, ngImport: i0, template: "<qd-icon [icon]=\"'magnifier'\" class=\"qd-filter-form-items__filter-magnifier\"></qd-icon>\n\n<input\n  type=\"text\"\n  class=\"qd-filter-form-items__filter\"\n  [(ngModel)]=\"filterValue\"\n  (ngModelChange)=\"changeValue($event)\"\n  [attr.data-test-id]=\"testId + '-filter-items'\"\n  [qdAutofocus]=\"true\"\n  autocomplete=\"off\"\n/>\n", styles: [".qd-filter-form-items__filter{width:100%;height:2.25rem;padding:0 .75rem 0 2.375rem;border:none;border-bottom:.0625rem solid rgb(213,213,213);margin-bottom:.5rem;background:#fff;color:#171717}.qd-filter-form-items__filter:focus,.qd-filter-form-items__filter:hover,.qd-filter-form-items__filter:active{border:none;background:#f5f5f5;outline:none}.qd-filter-form-items__filter:hover,.qd-filter-form-items__filter:active{border-bottom:.125rem solid rgb(23,23,23)}.qd-filter-form-items__filter:focus{border-bottom:.125rem solid rgb(0,102,153)}.qd-filter-form-items__filter-magnifier{position:absolute;padding:.625rem 0 .625rem .9375rem}.qd-filter-form-items__filter-magnifier .qd-icon{color:#757575}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: QdAutofocusDirective, selector: "[qdAutofocus]", inputs: ["qdAutofocus"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterFormItemsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-filter-form-items', host: { class: 'qd-filter-form-items' }, standalone: false, template: "<qd-icon [icon]=\"'magnifier'\" class=\"qd-filter-form-items__filter-magnifier\"></qd-icon>\n\n<input\n  type=\"text\"\n  class=\"qd-filter-form-items__filter\"\n  [(ngModel)]=\"filterValue\"\n  (ngModelChange)=\"changeValue($event)\"\n  [attr.data-test-id]=\"testId + '-filter-items'\"\n  [qdAutofocus]=\"true\"\n/>\n", styles: [".qd-filter-form-items__filter{width:100%;height:2.25rem;padding:0 .75rem 0 2.375rem;border:none;border-bottom:.0625rem solid rgb(213,213,213);margin-bottom:.5rem;background:#fff;color:#171717}.qd-filter-form-items__filter:focus,.qd-filter-form-items__filter:hover,.qd-filter-form-items__filter:active{border:none;background:#f5f5f5;outline:none}.qd-filter-form-items__filter:hover,.qd-filter-form-items__filter:active{border-bottom:.125rem solid rgb(23,23,23)}.qd-filter-form-items__filter:focus{border-bottom:.125rem solid rgb(0,102,153)}.qd-filter-form-items__filter-magnifier{position:absolute;padding:.625rem 0 .625rem .9375rem}.qd-filter-form-items__filter-magnifier .qd-icon{color:#757575}\n"] }]
+            args: [{ selector: 'qd-filter-form-items', host: { class: 'qd-filter-form-items' }, standalone: false, template: "<qd-icon [icon]=\"'magnifier'\" class=\"qd-filter-form-items__filter-magnifier\"></qd-icon>\n\n<input\n  type=\"text\"\n  class=\"qd-filter-form-items__filter\"\n  [(ngModel)]=\"filterValue\"\n  (ngModelChange)=\"changeValue($event)\"\n  [attr.data-test-id]=\"testId + '-filter-items'\"\n  [qdAutofocus]=\"true\"\n  autocomplete=\"off\"\n/>\n", styles: [".qd-filter-form-items__filter{width:100%;height:2.25rem;padding:0 .75rem 0 2.375rem;border:none;border-bottom:.0625rem solid rgb(213,213,213);margin-bottom:.5rem;background:#fff;color:#171717}.qd-filter-form-items__filter:focus,.qd-filter-form-items__filter:hover,.qd-filter-form-items__filter:active{border:none;background:#f5f5f5;outline:none}.qd-filter-form-items__filter:hover,.qd-filter-form-items__filter:active{border-bottom:.125rem solid rgb(23,23,23)}.qd-filter-form-items__filter:focus{border-bottom:.125rem solid rgb(0,102,153)}.qd-filter-form-items__filter-magnifier{position:absolute;padding:.625rem 0 .625rem .9375rem}.qd-filter-form-items__filter-magnifier .qd-icon{color:#757575}\n"] }]
         }], propDecorators: { inputFilterValue: [{
                 type: Input
             }], testId: [{
@@ -9907,7 +9955,7 @@ class QdCalendarComponent {
         this.weekdays = w.slice(1).concat(w[0]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdCalendarComponent, isStandalone: false, selector: "qd-calendar", inputs: { selectedDate: "selectedDate", language: "language", disabledDates: "disabledDates" }, outputs: { selectedChange: "selectedChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"nav\">\n  <button (click)=\"prev()\">\n    <qd-icon icon=\"arrowLeft\"></qd-icon>\n  </button>\n\n  <ng-container>\n    <span\n      *ngIf=\"mode === QdCalendarMode.Default\"\n      class=\"current-month-year\"\n      (click)=\"changeMode(QdCalendarMode.YearPicker)\"\n    >\n      {{ currentDate.locale(language).format(\"MMMM\") }} {{ currentDate?.format(\"YYYY\") }}\n    </span>\n    <span\n      *ngIf=\"mode === QdCalendarMode.YearPicker\"\n      class=\"current-years-list\"\n      (click)=\"changeMode(QdCalendarMode.MonthPicker)\"\n    >\n      {{ years[0] }} - {{ years[years.length - 1] }}\n    </span>\n    <span\n      *ngIf=\"mode === QdCalendarMode.MonthPicker\"\n      class=\"current-year\"\n      (click)=\"changeMode(QdCalendarMode.YearPicker)\"\n    >\n      {{ currentDate?.format(\"YYYY\") }}\n    </span>\n  </ng-container>\n\n  <button (click)=\"next()\">\n    <qd-icon icon=\"arrowRight\"></qd-icon>\n  </button>\n</div>\n\n<table *ngIf=\"mode === QdCalendarMode.Default\">\n  <thead></thead>\n  <tbody>\n    <tr>\n      <td class=\"weekday\" *ngFor=\"let name of weekdays\">{{ name }}</td>\n    </tr>\n    <tr *ngFor=\"let week of weeks\">\n      <td\n        class=\"day {{ day.moment.date() }}\"\n        *ngFor=\"let day of week\"\n        (click)=\"selectDate(day)\"\n        [ngClass]=\"{\n          today: day.today,\n          selected: day.selected,\n          hidden: !isSameYearMonth(day.moment),\n          disabled: day.disabled\n        }\"\n      >\n        {{ day.moment.date() }}\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<div class=\"calendar\" *ngIf=\"mode !== QdCalendarMode.Default\">\n  <div class=\"picker\" *ngIf=\"mode === QdCalendarMode.YearPicker\">\n    <div class=\"col {{ year }}\" *ngFor=\"let year of years\">\n      <div class=\"entry\" (click)=\"selectYear(year)\" [ngClass]=\"{ selected: isSameYear(year) }\">\n        {{ year }}\n      </div>\n    </div>\n  </div>\n\n  <div class=\"picker\" *ngIf=\"mode === QdCalendarMode.MonthPicker\">\n    <div class=\"col {{ month }}\" *ngFor=\"let month of months; let i = index\">\n      <div class=\"entry\" (click)=\"selectMonth(i)\" [ngClass]=\"{ selected: isSameMonth(i), month }\">\n        {{ month }}\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".nav{color:#171717;font-size:1rem;font-weight:700;line-height:1.5rem;display:grid;margin:.75rem;grid-template-columns:[next] 2rem [monthyear] auto [prev] 2rem [end];text-transform:capitalize}.nav span{line-height:2.5rem;text-align:center}.nav .current-month-year,.nav .current-years-list,.nav .current-year{cursor:pointer}tbody{display:inherit;margin:.75rem}td{color:#171717;font-size:.875rem;font-weight:400;line-height:1.3125rem;min-width:2.5625rem;padding:.4375rem;text-align:center;text-transform:capitalize}td.disabled{color:#d5d5d5;pointer-events:none}td.hidden{opacity:0;pointer-events:none}td.today{box-shadow:0 0 0 .125rem #d5d5d5 inset}td.selected,td.day:hover{background:#d5d5d5;cursor:pointer}.picker{display:flex;width:100%;flex-wrap:wrap;padding:.75rem}.picker .col{flex:0 0 33.33%;padding:.5rem .25rem}.picker .entry{padding:.4375rem;background:#d5d5d5;cursor:pointer;text-align:center}.picker .entry.selected,.picker .entry:hover{background:gray}\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: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdCalendarComponent, isStandalone: false, selector: "qd-calendar", inputs: { selectedDate: "selectedDate", language: "language", disabledDates: "disabledDates" }, outputs: { selectedChange: "selectedChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"nav\">\n  <button (click)=\"prev()\">\n    <qd-icon icon=\"arrowLeft\"></qd-icon>\n  </button>\n\n  <ng-container>\n    <span\n      *ngIf=\"mode === QdCalendarMode.Default\"\n      class=\"current-month-year\"\n      (click)=\"changeMode(QdCalendarMode.YearPicker)\"\n    >\n      {{ currentDate.locale(language).format(\"MMMM\") }} {{ currentDate?.format(\"YYYY\") }}\n    </span>\n    <span\n      *ngIf=\"mode === QdCalendarMode.YearPicker\"\n      class=\"current-years-list\"\n      (click)=\"changeMode(QdCalendarMode.MonthPicker)\"\n    >\n      {{ years[0] }} - {{ years[years.length - 1] }}\n    </span>\n    <span\n      *ngIf=\"mode === QdCalendarMode.MonthPicker\"\n      class=\"current-year\"\n      (click)=\"changeMode(QdCalendarMode.YearPicker)\"\n    >\n      {{ currentDate?.format(\"YYYY\") }}\n    </span>\n  </ng-container>\n\n  <button (click)=\"next()\">\n    <qd-icon icon=\"arrowRight\"></qd-icon>\n  </button>\n</div>\n\n<table *ngIf=\"mode === QdCalendarMode.Default\">\n  <thead></thead>\n  <tbody>\n    <tr>\n      <td class=\"weekday\" *ngFor=\"let name of weekdays\">{{ name }}</td>\n    </tr>\n    <tr *ngFor=\"let week of weeks\">\n      <td\n        class=\"day {{ day.moment.date() }}\"\n        *ngFor=\"let day of week\"\n        (click)=\"selectDate(day)\"\n        [ngClass]=\"{\n          today: day.today,\n          selected: day.selected,\n          hidden: !isSameYearMonth(day.moment),\n          disabled: day.disabled\n        }\"\n      >\n        {{ day.moment.date() }}\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<div class=\"calendar\" *ngIf=\"mode !== QdCalendarMode.Default\">\n  <div class=\"picker\" *ngIf=\"mode === QdCalendarMode.YearPicker\">\n    <div class=\"col {{ year }}\" *ngFor=\"let year of years\">\n      <div class=\"entry\" (click)=\"selectYear(year)\" [ngClass]=\"{ selected: isSameYear(year) }\">\n        {{ year }}\n      </div>\n    </div>\n  </div>\n\n  <div class=\"picker\" *ngIf=\"mode === QdCalendarMode.MonthPicker\">\n    <div class=\"col {{ month }}\" *ngFor=\"let month of months; let i = index\">\n      <div class=\"entry\" (click)=\"selectMonth(i)\" [ngClass]=\"{ selected: isSameMonth(i), month }\">\n        {{ month }}\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".nav{color:#171717;font-size:1rem;font-weight:700;line-height:1.5rem;display:grid;margin:.75rem;grid-template-columns:[next] 2rem [monthyear] auto [prev] 2rem [end];text-transform:capitalize}.nav span{line-height:2.5rem;text-align:center}.nav .current-month-year,.nav .current-years-list,.nav .current-year{cursor:pointer}tbody{display:inherit;margin:.75rem}td{color:#171717;font-size:.875rem;font-weight:400;line-height:1.3125rem;min-width:2.5625rem;padding:.4375rem;text-align:center;text-transform:capitalize}td.disabled{color:#d5d5d5;pointer-events:none}td.hidden{opacity:0;pointer-events:none}td.today{box-shadow:0 0 0 .125rem #d5d5d5 inset}td.selected,td.day:hover{background:#d5d5d5;cursor:pointer}.picker{display:flex;width:100%;flex-wrap:wrap;padding:.75rem}.picker .col{flex:0 0 33.33%;padding:.5rem .25rem}.picker .entry{padding:.4375rem;background:#d5d5d5;cursor:pointer;text-align:center}.picker .entry.selected,.picker .entry:hover{background:gray}\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: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdCalendarComponent, decorators: [{
             type: Component,
@@ -10309,11 +10357,11 @@ class QdDropdownOptionsComponent {
         this.filterChange.emit(trimmed);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDropdownOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDropdownOptionsComponent, isStandalone: false, selector: "qd-dropdown-options", inputs: { filter: "filter", filterText: "filterText", testId: "testId", id: "id" }, outputs: { filterChange: "filterChange", optionClick: "optionClick" }, host: { listeners: { "document:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "filterElement", first: true, predicate: ["filter"], descendants: true }, { propertyName: "optionComponents", predicate: QdFormInputComponent, descendants: true }], ngImport: i0, template: "<div class=\"filter-wrapper\">\n  <input\n    *ngIf=\"filter\"\n    #filter\n    type=\"text\"\n    class=\"qd-dropdown__filter\"\n    [(ngModel)]=\"filterText\"\n    (ngModelChange)=\"onFilterInputChange($event)\"\n    [attr.data-test-id]=\"testId + '-filter'\"\n  />\n\n  <qd-icon *ngIf=\"filter\" [icon]=\"'filter'\" class=\"qd-dropdown__filter-magnifier\"></qd-icon>\n</div>\n\n<ng-container *ngIf=\"filteredOptions$ | async as options\">\n  <div\n    class=\"qd-dropdown__option\"\n    *ngFor=\"let option of options\"\n    [ngClass]=\"option.disabled ? 'qd-dropdown__option--disabled' : ''\"\n  >\n    <qd-form-input (click)=\"optionClick.emit(option)\" [option]=\"option\" class=\"qd-dropdown__form-input\">\n      <input\n        class=\"qd-dropdown__option-input\"\n        name=\"dropdown\"\n        type=\"radio\"\n        [id]=\"option.value + '-' + id\"\n        [disabled]=\"option.disabled\"\n        [value]=\"option.value\"\n        [attr.data-test-id]=\"testId + '-option-' + (option.value || '-')\"\n      />\n\n      <label class=\"qd-dropdown__option-label\" [for]=\"option.value + '-' + id\">\n        {{ option.i18n | translate }}\n      </label>\n    </qd-form-input>\n  </div>\n</ng-container>\n", styles: [".qd-dropdown__option{background:#fff}.qd-dropdown__option .qd-dropdown__form-input{display:block;height:2.25rem;padding-left:.75rem;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400;line-height:2.25rem}.qd-dropdown__option .qd-dropdown__form-input:focus,.qd-dropdown__option .qd-dropdown__form-input:hover,.qd-dropdown__option .qd-dropdown__form-input.active{background:#f5f5f5;color:#171717}.qd-dropdown__option .qd-dropdown__option-input{display:none}.qd-dropdown__option .qd-dropdown__option-input:checked+label{background:#f5f5f5;color:#171717}.qd-dropdown__option .qd-dropdown__option-input:focus+.qd-dropdown__form-input{background:#f5f5f5;color:#171717}.qd-dropdown__option .qd-dropdown__option-label{padding-right:1.25rem;cursor:pointer;white-space:nowrap}.qd-dropdown__option.qd-dropdown__option--disabled>.qd-dropdown__form-input{color:#b4b4b4;cursor:default;pointer-events:none}.filter-wrapper{position:relative}.qd-dropdown__filter{width:100%;height:2.25rem;padding:0 .75rem 0 2.25rem;border:none;border-bottom:.0625rem solid rgb(213,213,213);background:#fff;color:#171717;overflow-y:auto;scroll-behavior:smooth}.qd-dropdown__filter:focus,.qd-dropdown__filter:hover,.qd-dropdown__filter:active{border:none;border-bottom:.125rem solid rgb(23,23,23);background:#f5f5f5;outline:none}.qd-dropdown-filter-focus .qd-dropdown__filter{border-bottom:.125rem solid rgb(0,102,153)}.qd-dropdown-filter-focus .qd-dropdown__filter:focus,.qd-dropdown-filter-focus .qd-dropdown__filter:hover,.qd-dropdown-filter-focus .qd-dropdown__filter:active{border-bottom:.125rem solid rgb(0,102,153)}.qd-dropdown__filter-magnifier{position:absolute;top:0;left:0;padding:.625rem 0 .625rem .75rem}.qd-dropdown__filter-magnifier .qd-icon{color:#757575}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "component", type: QdFormInputComponent, selector: "qd-form-input", inputs: ["option"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDropdownOptionsComponent, isStandalone: false, selector: "qd-dropdown-options", inputs: { filter: "filter", filterText: "filterText", testId: "testId", id: "id" }, outputs: { filterChange: "filterChange", optionClick: "optionClick" }, host: { listeners: { "document:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "filterElement", first: true, predicate: ["filter"], descendants: true }, { propertyName: "optionComponents", predicate: QdFormInputComponent, descendants: true }], ngImport: i0, template: "<div class=\"filter-wrapper\">\n  <input\n    *ngIf=\"filter\"\n    #filter\n    type=\"text\"\n    class=\"qd-dropdown__filter\"\n    [(ngModel)]=\"filterText\"\n    (ngModelChange)=\"onFilterInputChange($event)\"\n    [attr.data-test-id]=\"testId + '-filter'\"\n    autocomplete=\"off\"\n  />\n\n  <qd-icon *ngIf=\"filter\" [icon]=\"'filter'\" class=\"qd-dropdown__filter-magnifier\"></qd-icon>\n</div>\n\n<ng-container *ngIf=\"filteredOptions$ | async as options\">\n  <div\n    class=\"qd-dropdown__option\"\n    *ngFor=\"let option of options\"\n    [ngClass]=\"option.disabled ? 'qd-dropdown__option--disabled' : ''\"\n  >\n    <qd-form-input (click)=\"optionClick.emit(option)\" [option]=\"option\" class=\"qd-dropdown__form-input\">\n      <input\n        class=\"qd-dropdown__option-input\"\n        name=\"dropdown\"\n        type=\"radio\"\n        [id]=\"option.value + '-' + id\"\n        [disabled]=\"option.disabled\"\n        [value]=\"option.value\"\n        [attr.data-test-id]=\"testId + '-option-' + (option.value || '-')\"\n      />\n\n      <label class=\"qd-dropdown__option-label\" [for]=\"option.value + '-' + id\">\n        {{ option.i18n | translate }}\n      </label>\n    </qd-form-input>\n  </div>\n</ng-container>\n", styles: [".qd-dropdown__option{background:#fff}.qd-dropdown__option .qd-dropdown__form-input{display:block;height:2.25rem;padding-left:.75rem;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400;line-height:2.25rem}.qd-dropdown__option .qd-dropdown__form-input:focus,.qd-dropdown__option .qd-dropdown__form-input:hover,.qd-dropdown__option .qd-dropdown__form-input.active{background:#f5f5f5;color:#171717}.qd-dropdown__option .qd-dropdown__option-input{display:none}.qd-dropdown__option .qd-dropdown__option-input:checked+label{background:#f5f5f5;color:#171717}.qd-dropdown__option .qd-dropdown__option-input:focus+.qd-dropdown__form-input{background:#f5f5f5;color:#171717}.qd-dropdown__option .qd-dropdown__option-label{padding-right:1.25rem;cursor:pointer;white-space:nowrap}.qd-dropdown__option.qd-dropdown__option--disabled>.qd-dropdown__form-input{color:#b4b4b4;cursor:default;pointer-events:none}.filter-wrapper{position:relative}.qd-dropdown__filter{width:100%;height:2.25rem;padding:0 .75rem 0 2.25rem;border:none;border-bottom:.0625rem solid rgb(213,213,213);background:#fff;color:#171717;overflow-y:auto;scroll-behavior:smooth}.qd-dropdown__filter:focus,.qd-dropdown__filter:hover,.qd-dropdown__filter:active{border:none;border-bottom:.125rem solid rgb(23,23,23);background:#f5f5f5;outline:none}.qd-dropdown-filter-focus .qd-dropdown__filter{border-bottom:.125rem solid rgb(0,102,153)}.qd-dropdown-filter-focus .qd-dropdown__filter:focus,.qd-dropdown-filter-focus .qd-dropdown__filter:hover,.qd-dropdown-filter-focus .qd-dropdown__filter:active{border-bottom:.125rem solid rgb(0,102,153)}.qd-dropdown__filter-magnifier{position:absolute;top:0;left:0;padding:.625rem 0 .625rem .75rem}.qd-dropdown__filter-magnifier .qd-icon{color:#757575}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdFormInputComponent, selector: "qd-form-input", inputs: ["option"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDropdownOptionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-dropdown-options', standalone: false, template: "<div class=\"filter-wrapper\">\n  <input\n    *ngIf=\"filter\"\n    #filter\n    type=\"text\"\n    class=\"qd-dropdown__filter\"\n    [(ngModel)]=\"filterText\"\n    (ngModelChange)=\"onFilterInputChange($event)\"\n    [attr.data-test-id]=\"testId + '-filter'\"\n  />\n\n  <qd-icon *ngIf=\"filter\" [icon]=\"'filter'\" class=\"qd-dropdown__filter-magnifier\"></qd-icon>\n</div>\n\n<ng-container *ngIf=\"filteredOptions$ | async as options\">\n  <div\n    class=\"qd-dropdown__option\"\n    *ngFor=\"let option of options\"\n    [ngClass]=\"option.disabled ? 'qd-dropdown__option--disabled' : ''\"\n  >\n    <qd-form-input (click)=\"optionClick.emit(option)\" [option]=\"option\" class=\"qd-dropdown__form-input\">\n      <input\n        class=\"qd-dropdown__option-input\"\n        name=\"dropdown\"\n        type=\"radio\"\n        [id]=\"option.value + '-' + id\"\n        [disabled]=\"option.disabled\"\n        [value]=\"option.value\"\n        [attr.data-test-id]=\"testId + '-option-' + (option.value || '-')\"\n      />\n\n      <label class=\"qd-dropdown__option-label\" [for]=\"option.value + '-' + id\">\n        {{ option.i18n | translate }}\n      </label>\n    </qd-form-input>\n  </div>\n</ng-container>\n", styles: [".qd-dropdown__option{background:#fff}.qd-dropdown__option .qd-dropdown__form-input{display:block;height:2.25rem;padding-left:.75rem;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400;line-height:2.25rem}.qd-dropdown__option .qd-dropdown__form-input:focus,.qd-dropdown__option .qd-dropdown__form-input:hover,.qd-dropdown__option .qd-dropdown__form-input.active{background:#f5f5f5;color:#171717}.qd-dropdown__option .qd-dropdown__option-input{display:none}.qd-dropdown__option .qd-dropdown__option-input:checked+label{background:#f5f5f5;color:#171717}.qd-dropdown__option .qd-dropdown__option-input:focus+.qd-dropdown__form-input{background:#f5f5f5;color:#171717}.qd-dropdown__option .qd-dropdown__option-label{padding-right:1.25rem;cursor:pointer;white-space:nowrap}.qd-dropdown__option.qd-dropdown__option--disabled>.qd-dropdown__form-input{color:#b4b4b4;cursor:default;pointer-events:none}.filter-wrapper{position:relative}.qd-dropdown__filter{width:100%;height:2.25rem;padding:0 .75rem 0 2.25rem;border:none;border-bottom:.0625rem solid rgb(213,213,213);background:#fff;color:#171717;overflow-y:auto;scroll-behavior:smooth}.qd-dropdown__filter:focus,.qd-dropdown__filter:hover,.qd-dropdown__filter:active{border:none;border-bottom:.125rem solid rgb(23,23,23);background:#f5f5f5;outline:none}.qd-dropdown-filter-focus .qd-dropdown__filter{border-bottom:.125rem solid rgb(0,102,153)}.qd-dropdown-filter-focus .qd-dropdown__filter:focus,.qd-dropdown-filter-focus .qd-dropdown__filter:hover,.qd-dropdown-filter-focus .qd-dropdown__filter:active{border-bottom:.125rem solid rgb(0,102,153)}.qd-dropdown__filter-magnifier{position:absolute;top:0;left:0;padding:.625rem 0 .625rem .75rem}.qd-dropdown__filter-magnifier .qd-icon{color:#757575}\n"] }]
+            args: [{ selector: 'qd-dropdown-options', standalone: false, template: "<div class=\"filter-wrapper\">\n  <input\n    *ngIf=\"filter\"\n    #filter\n    type=\"text\"\n    class=\"qd-dropdown__filter\"\n    [(ngModel)]=\"filterText\"\n    (ngModelChange)=\"onFilterInputChange($event)\"\n    [attr.data-test-id]=\"testId + '-filter'\"\n    autocomplete=\"off\"\n  />\n\n  <qd-icon *ngIf=\"filter\" [icon]=\"'filter'\" class=\"qd-dropdown__filter-magnifier\"></qd-icon>\n</div>\n\n<ng-container *ngIf=\"filteredOptions$ | async as options\">\n  <div\n    class=\"qd-dropdown__option\"\n    *ngFor=\"let option of options\"\n    [ngClass]=\"option.disabled ? 'qd-dropdown__option--disabled' : ''\"\n  >\n    <qd-form-input (click)=\"optionClick.emit(option)\" [option]=\"option\" class=\"qd-dropdown__form-input\">\n      <input\n        class=\"qd-dropdown__option-input\"\n        name=\"dropdown\"\n        type=\"radio\"\n        [id]=\"option.value + '-' + id\"\n        [disabled]=\"option.disabled\"\n        [value]=\"option.value\"\n        [attr.data-test-id]=\"testId + '-option-' + (option.value || '-')\"\n      />\n\n      <label class=\"qd-dropdown__option-label\" [for]=\"option.value + '-' + id\">\n        {{ option.i18n | translate }}\n      </label>\n    </qd-form-input>\n  </div>\n</ng-container>\n", styles: [".qd-dropdown__option{background:#fff}.qd-dropdown__option .qd-dropdown__form-input{display:block;height:2.25rem;padding-left:.75rem;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400;line-height:2.25rem}.qd-dropdown__option .qd-dropdown__form-input:focus,.qd-dropdown__option .qd-dropdown__form-input:hover,.qd-dropdown__option .qd-dropdown__form-input.active{background:#f5f5f5;color:#171717}.qd-dropdown__option .qd-dropdown__option-input{display:none}.qd-dropdown__option .qd-dropdown__option-input:checked+label{background:#f5f5f5;color:#171717}.qd-dropdown__option .qd-dropdown__option-input:focus+.qd-dropdown__form-input{background:#f5f5f5;color:#171717}.qd-dropdown__option .qd-dropdown__option-label{padding-right:1.25rem;cursor:pointer;white-space:nowrap}.qd-dropdown__option.qd-dropdown__option--disabled>.qd-dropdown__form-input{color:#b4b4b4;cursor:default;pointer-events:none}.filter-wrapper{position:relative}.qd-dropdown__filter{width:100%;height:2.25rem;padding:0 .75rem 0 2.25rem;border:none;border-bottom:.0625rem solid rgb(213,213,213);background:#fff;color:#171717;overflow-y:auto;scroll-behavior:smooth}.qd-dropdown__filter:focus,.qd-dropdown__filter:hover,.qd-dropdown__filter:active{border:none;border-bottom:.125rem solid rgb(23,23,23);background:#f5f5f5;outline:none}.qd-dropdown-filter-focus .qd-dropdown__filter{border-bottom:.125rem solid rgb(0,102,153)}.qd-dropdown-filter-focus .qd-dropdown__filter:focus,.qd-dropdown-filter-focus .qd-dropdown__filter:hover,.qd-dropdown-filter-focus .qd-dropdown__filter:active{border-bottom:.125rem solid rgb(0,102,153)}.qd-dropdown__filter-magnifier{position:absolute;top:0;left:0;padding:.625rem 0 .625rem .75rem}.qd-dropdown__filter-magnifier .qd-icon{color:#757575}\n"] }]
         }], ctorParameters: () => [], propDecorators: { filter: [{
                 type: Input
             }], filterText: [{
@@ -10682,7 +10730,7 @@ class QdDropdownComponent {
                 provide: QD_FOCUSABLE_TOKEN,
                 useExisting: QdDropdownComponent
             }
-        ], viewQueries: [{ propertyName: "dropdownOptions", first: true, predicate: QdDropdownOptionsComponent, descendants: true }, { propertyName: "dropdownDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }, { propertyName: "box", first: true, predicate: ["box"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<div class=\"qd-dropdown__wrapper\">\n  <div\n    class=\"qd-dropdown__box\"\n    tabindex=\"0\"\n    *ngIf=\"!readonly && !viewonly && hasOptions\"\n    [qdPopoverOnClick]=\"dropdownMenu\"\n    [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n    [qdPopoverStopPropagation]=\"true\"\n    [qdPopoverDisabled]=\"disabled\"\n    [qdPopoverMaxHeight]=\"qdPopoverMaxHeight\"\n    [qdPopoverAutoSize]=\"{ width: true }\"\n    [qdPopoverEnableKeyControl]=\"true\"\n    (opened)=\"onOpenDropdown()\"\n    (closed)=\"onDropdownClosed()\"\n    (click)=\"enterClick.emit()\"\n    [positionStrategy]=\"positionStrategy\"\n  >\n    {{ (selectedOption?.i18n | translate) || placeholder }}\n\n    <div class=\"qd-dropdown-suffix\">\n      <qd-icon *ngIf=\"hasError\" class=\"qd-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n    </div>\n  </div>\n</div>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hasHint || hasError)\"\n  [hint]=\"hasHint ? config.hint.i18n : ''\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"[selectedOption]\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"[selectedOption]\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n\n<ng-template #dropdownMenu>\n  <qd-dropdown-options\n    [filter]=\"filter\"\n    [filterText]=\"filterText\"\n    [testId]=\"testId\"\n    [id]=\"id\"\n    (filterChange)=\"handleFilterChange($event)\"\n    (optionClick)=\"handleClick($event)\"\n  ></qd-dropdown-options>\n</ng-template>\n", styles: [".qd-dropdown__wrapper{position:relative;margin-bottom:.375rem}.qd-dropdown__wrapper.dense{margin-bottom:0}.qd-dropdown__wrapper .qd-dropdown__box{display:flex;overflow:hidden;width:100%;height:2.25rem;justify-content:space-between;padding:0 .75rem;border:.0625rem solid rgb(180,180,180);margin-bottom:.25rem;background:#fff;color:#fff;font-size:.875rem;font-weight:400;line-height:2.25rem;text-overflow:ellipsis;white-space:nowrap}.qd-dropdown__wrapper .qd-dropdown__box.dense{margin-bottom:0}.qd-dropdown-selected .qd-dropdown__wrapper .qd-dropdown__box{color:#171717}.qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown__wrapper .qd-dropdown__box:active,.qd-dropdown__wrapper .qd-dropdown__box:hover{padding:0 .6875rem;border-width:.125rem;border-color:#171717;line-height:2.125rem;outline:0}.qd-dropdown__wrapper .qd-dropdown__box:active{color:#b4b4b4}.qd-dropdown__wrapper .qd-dropdown__box:hover:after{border-top-color:#b4b4b4}.qd-dropdown__wrapper .qd-dropdown__box:after{position:absolute;z-index:5;top:1rem;right:.75rem;width:0;height:0;border-top:.3125rem solid rgb(180,180,180);border-right:.3125rem solid rgba(255,255,255,0);border-left:.3125rem solid rgba(255,255,255,0);content:\"\";pointer-events:none}.qd-dropdown__wrapper .qd-dropdown__box .qd-dropdown-suffix{position:relative;z-index:8;margin-right:1rem;background:#fff}.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box{background:#f5f5f5;color:#979797}.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box:hover,.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box:active{padding:0 .75rem;border:.0625rem solid rgb(180,180,180);line-height:2.25rem}.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box{height:inherit;padding:0;border:none;line-height:2.25rem}.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:hover,.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:active{color:inherit}.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:after{display:none}.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box{height:inherit;padding:0;border:none;line-height:2.25rem}.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:hover,.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:active{color:inherit}.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:after{display:none}.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly{color:#069;cursor:pointer}.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly:hover,.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly:active,.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly:focus{color:#069;text-decoration:underline}.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly{color:#069;cursor:pointer}.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly:hover,.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly:active,.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly:focus{color:#069;text-decoration:underline}.qd-dropdown-error .qd-dropdown__box{padding:0 .75rem;border:.0625rem solid rgb(199,0,35);line-height:2.25rem}.qd-dropdown-error .qd-dropdown__box:focus,.qd-dropdown-error .qd-dropdown__box:hover,.qd-dropdown-error .qd-dropdown__box:active{padding:0 .6875rem;border:.125rem solid rgb(199,0,35);line-height:2.125rem}.qd-dropdown-error .qd-dropdown__box .qd-error-icon{color:#c70023}.qd-dropdown{display:block;height:4.5rem;margin-bottom:.75rem}.qd-dropdown.dense{width:100%;height:auto;margin-bottom:0}.qd-dropdown.dense .qd-dropdown__wrapper,.qd-dropdown.dense .qd-dropdown__box{margin-bottom:0}.qd-dropdown-open .qd-dropdown__wrapper .qd-dropdown__box{padding:0 .6875rem;border-width:.125rem;border-color:#069;line-height:2.125rem}.qd-dropdown-open .qd-dropdown__wrapper .qd-dropdown__box:after{border-top:none;border-bottom:.3125rem solid rgb(23,23,23)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdDropdownOptionsComponent, selector: "qd-dropdown-options", inputs: ["filter", "filterText", "testId", "id"], outputs: ["filterChange", "optionClick"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "dropdownOptions", first: true, predicate: QdDropdownOptionsComponent, descendants: true }, { propertyName: "dropdownDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }, { propertyName: "box", first: true, predicate: ["box"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<div class=\"qd-dropdown__wrapper\">\n  <div\n    class=\"qd-dropdown__box\"\n    tabindex=\"0\"\n    *ngIf=\"!readonly && !viewonly && hasOptions\"\n    [qdPopoverOnClick]=\"dropdownMenu\"\n    [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n    [qdPopoverStopPropagation]=\"true\"\n    [qdPopoverDisabled]=\"disabled\"\n    [qdPopoverMaxHeight]=\"qdPopoverMaxHeight\"\n    [qdPopoverAutoSize]=\"{ width: true }\"\n    [qdPopoverEnableKeyControl]=\"true\"\n    (opened)=\"onOpenDropdown()\"\n    (closed)=\"onDropdownClosed()\"\n    (click)=\"enterClick.emit()\"\n    [positionStrategy]=\"positionStrategy\"\n  >\n    {{ (selectedOption?.i18n | translate) || placeholder }}\n\n    <div class=\"qd-dropdown-suffix\">\n      <qd-icon *ngIf=\"hasError\" class=\"qd-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n    </div>\n  </div>\n</div>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hasHint || hasError)\"\n  [hint]=\"hasHint ? config.hint.i18n : ''\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"[selectedOption]\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"[selectedOption]\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n\n<ng-template #dropdownMenu>\n  <qd-dropdown-options\n    [filter]=\"filter\"\n    [filterText]=\"filterText\"\n    [testId]=\"testId\"\n    [id]=\"id\"\n    (filterChange)=\"handleFilterChange($event)\"\n    (optionClick)=\"handleClick($event)\"\n  ></qd-dropdown-options>\n</ng-template>\n", styles: [".qd-dropdown__wrapper{position:relative;margin-bottom:.375rem}.qd-dropdown__wrapper.dense{margin-bottom:0}.qd-dropdown__wrapper .qd-dropdown__box{display:flex;overflow:hidden;width:100%;height:2.25rem;justify-content:space-between;padding:0 .75rem;border:.0625rem solid rgb(180,180,180);margin-bottom:.25rem;background:#fff;color:#fff;font-size:.875rem;font-weight:400;line-height:2.25rem;text-overflow:ellipsis;white-space:nowrap}.qd-dropdown__wrapper .qd-dropdown__box.dense{margin-bottom:0}.qd-dropdown-selected .qd-dropdown__wrapper .qd-dropdown__box{color:#171717}.qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown__wrapper .qd-dropdown__box:active,.qd-dropdown__wrapper .qd-dropdown__box:hover{padding:0 .6875rem;border-width:.125rem;border-color:#171717;line-height:2.125rem;outline:0}.qd-dropdown__wrapper .qd-dropdown__box:active{color:#b4b4b4}.qd-dropdown__wrapper .qd-dropdown__box:hover:after{border-top-color:#b4b4b4}.qd-dropdown__wrapper .qd-dropdown__box:after{position:absolute;z-index:5;top:1rem;right:.75rem;width:0;height:0;border-top:.3125rem solid rgb(180,180,180);border-right:.3125rem solid rgba(255,255,255,0);border-left:.3125rem solid rgba(255,255,255,0);content:\"\";pointer-events:none}.qd-dropdown__wrapper .qd-dropdown__box .qd-dropdown-suffix{position:relative;z-index:8;margin-right:1rem;background:#fff}.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box{background:#f5f5f5;color:#979797}.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box:hover,.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box:active{padding:0 .75rem;border:.0625rem solid rgb(180,180,180);line-height:2.25rem}.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box{height:inherit;padding:0;border:none;line-height:2.25rem}.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:hover,.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:active{color:inherit}.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:after{display:none}.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box{height:inherit;padding:0;border:none;line-height:2.25rem}.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:hover,.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:active{color:inherit}.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:after{display:none}.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly{color:#069;cursor:pointer}.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly:hover,.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly:active,.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly:focus{color:#069;text-decoration:underline}.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly{color:#069;cursor:pointer}.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly:hover,.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly:active,.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly:focus{color:#069;text-decoration:underline}.qd-dropdown-error .qd-dropdown__box{padding:0 .75rem;border:.0625rem solid rgb(199,0,35);line-height:2.25rem}.qd-dropdown-error .qd-dropdown__box:focus,.qd-dropdown-error .qd-dropdown__box:hover,.qd-dropdown-error .qd-dropdown__box:active{padding:0 .6875rem;border:.125rem solid rgb(199,0,35);line-height:2.125rem}.qd-dropdown-error .qd-dropdown__box .qd-error-icon{color:#c70023}.qd-dropdown{display:block;height:4.5rem;margin-bottom:.75rem}.qd-dropdown.dense{width:100%;height:auto;margin-bottom:0}.qd-dropdown.dense .qd-dropdown__wrapper,.qd-dropdown.dense .qd-dropdown__box{margin-bottom:0}.qd-dropdown-open .qd-dropdown__wrapper .qd-dropdown__box{padding:0 .6875rem;border-width:.125rem;border-color:#069;line-height:2.125rem}.qd-dropdown-open .qd-dropdown__wrapper .qd-dropdown__box:after{border-top:none;border-bottom:.3125rem solid rgb(23,23,23)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdDropdownOptionsComponent, selector: "qd-dropdown-options", inputs: ["filter", "filterText", "testId", "id"], outputs: ["filterChange", "optionClick"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDropdownComponent, decorators: [{
             type: Component,
@@ -10836,7 +10884,7 @@ class QdInputUnitsComponent {
         this.closed.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdInputUnitsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdInputUnitsComponent, isStandalone: false, selector: "qd-input-units", inputs: { config: "config", unitValue: ["unit", "unitValue"] }, outputs: { unitChange: "unitChange", opened: "opened", closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<button\n  *ngIf=\"config.units.length > 1; else singleUnit\"\n  [qdPopoverOnClick]=\"units\"\n  (opened)=\"handleOpened()\"\n  (closed)=\"handleClosed()\"\n  [qdPopoverAutoSize]=\"{ width: true }\"\n  [qdPopoverMaxHeight]=\"500\"\n  class=\"qd-input-unit\"\n  [ngClass]=\"{ 'qd-input-unit--selected': _unit }\"\n>\n  <qd-icon icon=\"ctrlDown\" class=\"qd-input-unit-icon\"></qd-icon>\n  {{ _unit ? (_unit.i18n | translate) : (unitsPlaceholder | translate) }}\n</button>\n\n<ng-template #singleUnit>\n  <div *ngIf=\"!config.units[0].disabled\" class=\"qd-input-single-unit\">\n    {{ config.units[0].i18n | translate }}\n  </div>\n</ng-template>\n\n<ng-template #units>\n  <button\n    *ngFor=\"let unit of config.units\"\n    class=\"qd-input-unit-option\"\n    [ngClass]=\"{ 'qd-input-unit-option--disabled': unit.disabled }\"\n    (click)=\"handleUnitSelection(unit)\"\n  >\n    {{ unit.i18n | translate }}\n  </button>\n</ng-template>\n", styles: [".qd-input-unit{height:2.25rem;padding:0 .5625rem 0 .25rem;border-left:.0625rem solid rgb(180,180,180);margin:0;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.875rem;white-space:nowrap}.qd-input-unit-icon{color:#171717;font-size:1.125rem;font-weight:700;vertical-align:bottom}.qd-input-single-unit{height:2.25rem;padding:0 .4375rem 0 .5rem;border-left:.0625rem solid rgb(180,180,180);background-color:#fff;font-size:.875rem;line-height:2.25rem;white-space:nowrap}.qd-input-unit-option{display:block;width:100%;height:2.25rem;padding:0 .6875rem;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.875rem;text-align:left;white-space:nowrap}.qd-input-unit-option--disabled{color:#b4b4b4;cursor:auto}.qd-input-unit-option:focus,.qd-input-unit-option:hover,.qd-input-unit-option:active{background:#f5f5f5}\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: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdInputUnitsComponent, isStandalone: false, selector: "qd-input-units", inputs: { config: "config", unitValue: ["unit", "unitValue"] }, outputs: { unitChange: "unitChange", opened: "opened", closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<button\n  *ngIf=\"config.units.length > 1; else singleUnit\"\n  [qdPopoverOnClick]=\"units\"\n  (opened)=\"handleOpened()\"\n  (closed)=\"handleClosed()\"\n  [qdPopoverAutoSize]=\"{ width: true }\"\n  [qdPopoverMaxHeight]=\"500\"\n  class=\"qd-input-unit\"\n  [ngClass]=\"{ 'qd-input-unit--selected': _unit }\"\n>\n  <qd-icon icon=\"ctrlDown\" class=\"qd-input-unit-icon\"></qd-icon>\n  {{ _unit ? (_unit.i18n | translate) : (unitsPlaceholder | translate) }}\n</button>\n\n<ng-template #singleUnit>\n  <div *ngIf=\"!config.units[0].disabled\" class=\"qd-input-single-unit\">\n    {{ config.units[0].i18n | translate }}\n  </div>\n</ng-template>\n\n<ng-template #units>\n  <button\n    *ngFor=\"let unit of config.units\"\n    class=\"qd-input-unit-option\"\n    [ngClass]=\"{ 'qd-input-unit-option--disabled': unit.disabled }\"\n    (click)=\"handleUnitSelection(unit)\"\n  >\n    {{ unit.i18n | translate }}\n  </button>\n</ng-template>\n", styles: [".qd-input-unit{height:2.25rem;padding:0 .5625rem 0 .25rem;border-left:.0625rem solid rgb(180,180,180);margin:0;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.875rem;white-space:nowrap}.qd-input-unit-icon{color:#171717;font-size:1.125rem;font-weight:700;vertical-align:bottom}.qd-input-single-unit{height:2.25rem;padding:0 .4375rem 0 .5rem;border-left:.0625rem solid rgb(180,180,180);background-color:#fff;font-size:.875rem;line-height:2.25rem;white-space:nowrap}.qd-input-unit-option{display:block;width:100%;height:2.25rem;padding:0 .6875rem;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.875rem;text-align:left;white-space:nowrap}.qd-input-unit-option--disabled{color:#b4b4b4;cursor:auto}.qd-input-unit-option:focus,.qd-input-unit-option:hover,.qd-input-unit-option:active{background:#f5f5f5}\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: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdInputUnitsComponent, decorators: [{
             type: Component,
@@ -11477,7 +11525,7 @@ class QdInputComponent {
     }
     get maxLength() {
         if (!(this.control instanceof QdFormControl))
-            return;
+            return undefined;
         return this.control.getMaxLengthOrUndefined();
     }
     get valueAsList() {
@@ -11682,8 +11730,10 @@ class QdInputComponent {
         if (!this.control)
             return;
         const modelValue = this.control.value;
-        if (modelValue == null)
-            return void (this._value = getValueWithUnit(modelValue, this.config));
+        if (modelValue == null) {
+            this._value = getValueWithUnit(modelValue, this.config);
+            return;
+        }
         const normalized = getValueWithUnit(modelValue, this.config);
         const target = this.hasUnits ? normalized : normalized.value;
         if (!isEqual(modelValue, target))
@@ -11713,7 +11763,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    (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  />\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"] }, { 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"] }, { 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    (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"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdInputComponent, decorators: [{
             type: Component,
@@ -11732,7 +11782,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    (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  />\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    (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"] }]
         }], propDecorators: { formControlName: [{
                 type: Input
             }], value: [{
@@ -12194,7 +12244,7 @@ class QdDatepickerComponent {
                 useValue: true
             },
             QdFormsActionEmitterService
-        ], viewQueries: [{ propertyName: "popover", first: true, predicate: ["qdPopoverOnClick"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<qd-input\n  *ngIf=\"!readonly && !viewonly\"\n  [value]=\"config?.timePicker && displayedDateTime ? displayedDateTime : displayedDate\"\n  (valueChange)=\"config?.timePicker ? handleUpdatedDateTime($event) : handleUpdatedDate($event)\"\n  [config]=\"{ disabled, readonly, viewonly, placeholder: config?.placeholder }\"\n  [isError]=\"hasError\"\n>\n  <button\n    type=\"button\"\n    class=\"datepicker-toggle\"\n    qdIconButton\n    [qdPopoverOnClick]=\"disabled ? null : calendar\"\n    [qdPopoverMaxWidth]=\"332\"\n    qdPopoverCloseStrategy=\"onOutsideClick\"\n    #qdPopoverOnClick=\"qdPopoverOnClick\"\n  >\n    <qd-icon [icon]=\"'calendar'\"></qd-icon>\n  </button>\n</qd-input>\n\n<ng-template #calendar>\n  <qd-calendar\n    [selectedDate]=\"config?.timePicker && displayedDateTime ? displayedDateTime : displayedDate\"\n    [language]=\"language\"\n    [disabledDates]=\"config?.disabledDates\"\n    (selectedChange)=\"handleUpdatedDate($event)\"\n  ></qd-calendar>\n  <qd-dropdown\n    class=\"timepicker-dropdown\"\n    *ngIf=\"timePicker\"\n    [value]=\"displayedTime\"\n    (valueChange)=\"handleUpdatedTime($event)\"\n    [config]=\"timePicker\"\n    [qdPopoverMaxHeight]=\"300\"\n  ></qd-dropdown>\n</ng-template>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n  [hint]=\"hint\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"[displayedDate]\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"[displayedDate]\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: ["qd-datepicker{position:relative;display:block;width:100%;margin-bottom:.75rem}qd-datepicker .calendar{padding:1rem}qd-datepicker .calendar mat-calendar{display:block}qd-datepicker .datepicker-toggle{background-color:unset}qd-datepicker:not(.qd-datepicker-calendar-only) qd-input{height:2.25rem;margin-bottom:.375rem!important}qd-datepicker:not(.qd-datepicker-calendar-only) qd-input .qd-form-label,qd-datepicker:not(.qd-datepicker-calendar-only) qd-input .qd-form-hint{display:none}qd-datepicker .qd-form-disabled .datepicker-toggle{color:#979797;cursor:default}qd-datepicker.qd-datepicker-calendar-only{margin-bottom:0}qd-datepicker.qd-datepicker-calendar-only qd-input{margin:0}qd-datepicker.qd-datepicker-calendar-only .qd-form-label,qd-datepicker.qd-datepicker-calendar-only .qd-form-hint,qd-datepicker.qd-datepicker-calendar-only .qd-input-input input{display:none}qd-datepicker.qd-datepicker-calendar-only .qd-input-input{height:initial!important;padding:0!important;border:none!important;margin:0!important}qd-datepicker.qd-datepicker-calendar-only .qd-input-suffix{margin-left:0!important}.timepicker-dropdown{margin:.75rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdCalendarComponent, selector: "qd-calendar", inputs: ["selectedDate", "language", "disabledDates"], outputs: ["selectedChange"] }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly"] }], encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "popover", first: true, predicate: ["qdPopoverOnClick"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<qd-input\n  *ngIf=\"!readonly && !viewonly\"\n  [value]=\"config?.timePicker && displayedDateTime ? displayedDateTime : displayedDate\"\n  (valueChange)=\"config?.timePicker ? handleUpdatedDateTime($event) : handleUpdatedDate($event)\"\n  [config]=\"{ disabled, readonly, viewonly, placeholder: config?.placeholder }\"\n  [isError]=\"hasError\"\n>\n  <button\n    type=\"button\"\n    class=\"datepicker-toggle\"\n    qdIconButton\n    [qdPopoverOnClick]=\"disabled ? null : calendar\"\n    [qdPopoverMaxWidth]=\"332\"\n    qdPopoverCloseStrategy=\"onOutsideClick\"\n    #qdPopoverOnClick=\"qdPopoverOnClick\"\n  >\n    <qd-icon [icon]=\"'calendar'\"></qd-icon>\n  </button>\n</qd-input>\n\n<ng-template #calendar>\n  <qd-calendar\n    [selectedDate]=\"config?.timePicker && displayedDateTime ? displayedDateTime : displayedDate\"\n    [language]=\"language\"\n    [disabledDates]=\"config?.disabledDates\"\n    (selectedChange)=\"handleUpdatedDate($event)\"\n  ></qd-calendar>\n  <qd-dropdown\n    class=\"timepicker-dropdown\"\n    *ngIf=\"timePicker\"\n    [value]=\"displayedTime\"\n    (valueChange)=\"handleUpdatedTime($event)\"\n    [config]=\"timePicker\"\n    [qdPopoverMaxHeight]=\"300\"\n  ></qd-dropdown>\n</ng-template>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n  [hint]=\"hint\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"[displayedDate]\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"[displayedDate]\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: ["qd-datepicker{position:relative;display:block;width:100%;margin-bottom:.75rem}qd-datepicker .calendar{padding:1rem}qd-datepicker .calendar mat-calendar{display:block}qd-datepicker .datepicker-toggle{background-color:unset}qd-datepicker:not(.qd-datepicker-calendar-only) qd-input{height:2.25rem;margin-bottom:.375rem!important}qd-datepicker:not(.qd-datepicker-calendar-only) qd-input .qd-form-label,qd-datepicker:not(.qd-datepicker-calendar-only) qd-input .qd-form-hint{display:none}qd-datepicker .qd-form-disabled .datepicker-toggle{color:#979797;cursor:default}qd-datepicker.qd-datepicker-calendar-only{margin-bottom:0}qd-datepicker.qd-datepicker-calendar-only qd-input{margin:0}qd-datepicker.qd-datepicker-calendar-only .qd-form-label,qd-datepicker.qd-datepicker-calendar-only .qd-form-hint,qd-datepicker.qd-datepicker-calendar-only .qd-input-input input{display:none}qd-datepicker.qd-datepicker-calendar-only .qd-input-input{height:initial!important;padding:0!important;border:none!important;margin:0!important}qd-datepicker.qd-datepicker-calendar-only .qd-input-suffix{margin-left:0!important}.timepicker-dropdown{margin:.75rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdCalendarComponent, selector: "qd-calendar", inputs: ["selectedDate", "language", "disabledDates"], outputs: ["selectedChange"] }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDatepickerComponent, decorators: [{
             type: Component,
@@ -12611,7 +12661,7 @@ class QdFileUploadComponent {
             },
             QdFormsActionEmitterService,
             QdFileUploadService
-        ], ngImport: i0, template: "<qd-form-label\n  [label]=\"config?.label?.i18n\"\n  [readonly]=\"config.readonly\"\n  [viewonly]=\"config.viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<ng-container *ngIf=\"!isReadonly && !isViewonly\">\n  <input #fileInput type=\"file\" hidden [disabled]=\"isDisabled\" (change)=\"onFileSelect($event)\" />\n\n  <div class=\"upload-box\" (click)=\"fileInput.click()\">\n    <div class=\"upload-content\">\n      <ng-container *ngIf=\"!file\">\n        <span class=\"placeholder\">\n          {{ (config?.placeholder?.i18n | translate) || (\"i18n.qd.form.placeholder.selectFile\" | translate) }}\n        </span>\n      </ng-container>\n\n      <ng-container *ngIf=\"file\">\n        <div class=\"file-row\">\n          <span class=\"file-name\">{{ file.name }} </span>\n\n          <ng-container *ngIf=\"isUploading\">\n            <div class=\"progress-wrapper\">\n              <div class=\"progress-bar\" [style.width.%]=\"uploadProgress$ | async\"></div>\n              <span class=\"progress-label\">{{ uploadProgress$ | async }}%</span>\n            </div>\n          </ng-container>\n\n          <ng-container *ngIf=\"hasError\">\n            <span class=\"upload-error\">\n              {{ \"i18n.qd.form.error.uploadFailed\" | translate }}\n            </span>\n          </ng-container>\n\n          <ng-container *ngIf=\"!isUploading\">\n            <span class=\"file-size\">{{ file.size | qdFileSize }}</span>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n\n  <div class=\"button-actions\">\n    <button *ngIf=\"file && isUploading\" type=\"button\" (click)=\"cancelUpload()\">\n      <qd-icon icon=\"timesCircleSolid\"></qd-icon>\n    </button>\n\n    <button *ngIf=\"(file && isUploaded) || (file && hasValidationError)\" type=\"button\" (click)=\"removeFile()\">\n      <qd-icon icon=\"trash\"></qd-icon>\n    </button>\n  </div>\n\n  <qd-form-hint\n    *ngIf=\"config?.hint || hasValidationError\"\n    [hint]=\"config?.hint?.i18n\"\n    [hasError]=\"hasValidationError\"\n    [control]=\"control\"\n    [hintAction]=\"config.hintAction\"\n    [data-test-id]=\"testId\"\n  ></qd-form-hint>\n</ng-container>\n\n<qd-form-readonly\n  *ngIf=\"isReadonly\"\n  [values]=\"[file?.name]\"\n  [readonlyAction]=\"config.readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"isViewonly\"\n  [values]=\"[file?.name]\"\n  [viewonlyAction]=\"config.viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [":host{position:relative;display:block;width:100%;margin-bottom:.75rem}:host .upload-box{position:relative;display:block;padding:.5rem;margin-bottom:.375rem;background-color:#fff;box-shadow:inset 0 0 0 .0625rem #069;cursor:pointer;-webkit-user-select:none;user-select:none}:host .upload-box .file-name{color:#069!important}:host .upload-box .placeholder{color:#069!important}:host .upload-box .qd-icon{color:#069!important}:host .upload-box .upload-content{display:flex;flex-direction:column;padding-right:2rem;padding-left:.5rem}:host .upload-box .upload-content .placeholder{color:#171717;font-size:.875rem;font-weight:500;line-height:1.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .upload-box .upload-content .file-row{display:flex;flex-wrap:nowrap;align-items:center;gap:.5rem}:host .upload-box .upload-content .file-row .file-name{color:#171717;font-size:.875rem;font-weight:500;line-height:1.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .upload-box .upload-content .file-row .progress-wrapper{position:relative;display:flex;overflow:hidden;min-width:6.25rem;height:1.25rem;flex:1 1 auto;border-radius:.625rem}:host .upload-box .upload-content .file-row .progress-wrapper .progress-bar{height:100%;border-radius:inherit;background-color:#fee3b5}:host .upload-box .upload-content .file-row .progress-wrapper .progress-label{color:#e97e00;font-size:.875rem;font-weight:500;line-height:1.25rem;position:absolute;z-index:1000;left:.75rem}:host .upload-box .upload-content .file-row .file-size{margin-left:auto;color:#171717;font-size:.875rem;font-weight:500;line-height:1.25rem}:host .button-actions{position:absolute;top:1.625rem;right:.875rem;display:flex}:host .button-actions button{padding:0;border:none;background:none;cursor:pointer}:host .button-actions qd-icon{color:#069}:host.qd-form-disabled .upload-box{cursor:not-allowed;opacity:.6}:host.qd-form-readonly .upload-box,:host.qd-form-viewonly .upload-box{cursor:default}:host(.qd-form-error) .upload-box{box-shadow:inset 0 0 0 .0625rem #c70023!important}:host(.qd-form-error) .upload-box .file-name,:host(.qd-form-error) .upload-box .placeholder,:host(.qd-form-error) .upload-box .file-size,:host(.qd-form-error) .upload-box+.button-actions .qd-icon{color:#c70023!important}:host(.qd-form-error) .upload-box:hover{box-shadow:inset 0 0 0 .0625rem #069!important}:host(.qd-form-error) .upload-box:hover .file-name,:host(.qd-form-error) .upload-box:hover .placeholder,:host(.qd-form-error) .upload-box:hover .file-size,:host(.qd-form-error) .upload-box:hover+.button-actions .qd-icon{color:#069!important}:host(.qd-form-uploaded) .upload-box{box-shadow:inset 0 0 0 .0625rem #b4b4b4!important}:host(.qd-form-uploaded) .upload-box .file-name,:host(.qd-form-uploaded) .upload-box .placeholder,:host(.qd-form-uploaded) .upload-box .file-size{color:#171717!important;font-weight:400!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: QdFileSizePipe$1, name: "qdFileSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<qd-form-label\n  [label]=\"config?.label?.i18n\"\n  [readonly]=\"config.readonly\"\n  [viewonly]=\"config.viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<ng-container *ngIf=\"!isReadonly && !isViewonly\">\n  <input #fileInput type=\"file\" hidden [disabled]=\"isDisabled\" (change)=\"onFileSelect($event)\" />\n\n  <div class=\"upload-box\" (click)=\"fileInput.click()\">\n    <div class=\"upload-content\">\n      <ng-container *ngIf=\"!file\">\n        <span class=\"placeholder\">\n          {{ (config?.placeholder?.i18n | translate) || (\"i18n.qd.form.placeholder.selectFile\" | translate) }}\n        </span>\n      </ng-container>\n\n      <ng-container *ngIf=\"file\">\n        <div class=\"file-row\">\n          <span class=\"file-name\">{{ file.name }} </span>\n\n          <ng-container *ngIf=\"isUploading\">\n            <div class=\"progress-wrapper\">\n              <div class=\"progress-bar\" [style.width.%]=\"uploadProgress$ | async\"></div>\n              <span class=\"progress-label\">{{ uploadProgress$ | async }}%</span>\n            </div>\n          </ng-container>\n\n          <ng-container *ngIf=\"hasError\">\n            <span class=\"upload-error\">\n              {{ \"i18n.qd.form.error.uploadFailed\" | translate }}\n            </span>\n          </ng-container>\n\n          <ng-container *ngIf=\"!isUploading\">\n            <span class=\"file-size\">{{ file.size | qdFileSize }}</span>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n\n  <div class=\"button-actions\">\n    <button *ngIf=\"file && isUploading\" type=\"button\" (click)=\"cancelUpload()\">\n      <qd-icon icon=\"timesCircleSolid\"></qd-icon>\n    </button>\n\n    <button *ngIf=\"(file && isUploaded) || (file && hasValidationError)\" type=\"button\" (click)=\"removeFile()\">\n      <qd-icon icon=\"trash\"></qd-icon>\n    </button>\n  </div>\n\n  <qd-form-hint\n    *ngIf=\"config?.hint || hasValidationError\"\n    [hint]=\"config?.hint?.i18n\"\n    [hasError]=\"hasValidationError\"\n    [control]=\"control\"\n    [hintAction]=\"config.hintAction\"\n    [data-test-id]=\"testId\"\n  ></qd-form-hint>\n</ng-container>\n\n<qd-form-readonly\n  *ngIf=\"isReadonly\"\n  [values]=\"[file?.name]\"\n  [readonlyAction]=\"config.readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"isViewonly\"\n  [values]=\"[file?.name]\"\n  [viewonlyAction]=\"config.viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [":host{position:relative;display:block;width:100%;margin-bottom:.75rem}:host .upload-box{position:relative;display:block;padding:.5rem;margin-bottom:.375rem;background-color:#fff;box-shadow:inset 0 0 0 .0625rem #069;cursor:pointer;-webkit-user-select:none;user-select:none}:host .upload-box .file-name{color:#069!important}:host .upload-box .placeholder{color:#069!important}:host .upload-box .qd-icon{color:#069!important}:host .upload-box .upload-content{display:flex;flex-direction:column;padding-right:2rem;padding-left:.5rem}:host .upload-box .upload-content .placeholder{color:#171717;font-size:.875rem;font-weight:500;line-height:1.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .upload-box .upload-content .file-row{display:flex;flex-wrap:nowrap;align-items:center;gap:.5rem}:host .upload-box .upload-content .file-row .file-name{color:#171717;font-size:.875rem;font-weight:500;line-height:1.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .upload-box .upload-content .file-row .progress-wrapper{position:relative;display:flex;overflow:hidden;min-width:6.25rem;height:1.25rem;flex:1 1 auto;border-radius:.625rem}:host .upload-box .upload-content .file-row .progress-wrapper .progress-bar{height:100%;border-radius:inherit;background-color:#fee3b5}:host .upload-box .upload-content .file-row .progress-wrapper .progress-label{color:#e97e00;font-size:.875rem;font-weight:500;line-height:1.25rem;position:absolute;z-index:1000;left:.75rem}:host .upload-box .upload-content .file-row .file-size{margin-left:auto;color:#171717;font-size:.875rem;font-weight:500;line-height:1.25rem}:host .button-actions{position:absolute;top:1.625rem;right:.875rem;display:flex}:host .button-actions button{padding:0;border:none;background:none;cursor:pointer}:host .button-actions qd-icon{color:#069}:host.qd-form-disabled .upload-box{cursor:not-allowed;opacity:.6}:host.qd-form-readonly .upload-box,:host.qd-form-viewonly .upload-box{cursor:default}:host(.qd-form-error) .upload-box{box-shadow:inset 0 0 0 .0625rem #c70023!important}:host(.qd-form-error) .upload-box .file-name,:host(.qd-form-error) .upload-box .placeholder,:host(.qd-form-error) .upload-box .file-size,:host(.qd-form-error) .upload-box+.button-actions .qd-icon{color:#c70023!important}:host(.qd-form-error) .upload-box:hover{box-shadow:inset 0 0 0 .0625rem #069!important}:host(.qd-form-error) .upload-box:hover .file-name,:host(.qd-form-error) .upload-box:hover .placeholder,:host(.qd-form-error) .upload-box:hover .file-size,:host(.qd-form-error) .upload-box:hover+.button-actions .qd-icon{color:#069!important}:host(.qd-form-uploaded) .upload-box{box-shadow:inset 0 0 0 .0625rem #b4b4b4!important}:host(.qd-form-uploaded) .upload-box .file-name,:host(.qd-form-uploaded) .upload-box .placeholder,:host(.qd-form-uploaded) .upload-box .file-size{color:#171717!important;font-weight:400!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: QdFileSizePipe$1, name: "qdFileSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFileUploadComponent, decorators: [{
             type: Component,
@@ -12851,7 +12901,7 @@ class QdMultiInputChipComponent {
         return 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMultiInputChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdMultiInputChipComponent, isStandalone: false, selector: "qd-multi-input-chip", inputs: { itemControl: "itemControl", value: "value", close: "close", testId: ["data-test-id", "testId"] }, outputs: { closeClickEmitter: "closeClickEmitter" }, host: { listeners: { "mouseover": "showTooltip($event)" }, properties: { "class": "this.themeClass" } }, viewQueries: [{ propertyName: "errorTooltip", first: true, predicate: ["errorTooltip"], descendants: true }], ngImport: i0, template: "<span [attr.data-test-id]=\"testId + '-caption'\" class=\"value qd-multi-input__chip-label\" [title]=\"title\">{{\n  chipText\n}}</span>\n<qd-icon *ngIf=\"close\" [icon]=\"'times'\" (click)=\"clickClose($event)\" [attr.data-test-id]=\"testId + '-close'\"></qd-icon>\n<div *ngIf=\"itemControl && itemControl.errors\" #errorTooltip class=\"errorTooltip\">\n  <div class=\"value\">{{ itemControl.value }}</div>\n  <div *ngFor=\"let errorMessage of errorMessages\">{{ errorMessage | translate }}</div>\n</div>\n", styles: [":host{display:inline-flex;padding:0 .5rem;border:solid .0625rem;border-radius:.75rem;margin:.3125rem 0 0 .3125rem;cursor:default;font-size:.813rem;font-weight:400;line-height:1.5rem;white-space:nowrap}:host .qd-multi-input__chip-label{overflow:hidden;max-width:7.5rem;text-overflow:ellipsis;white-space:nowrap}:host .qd-icon{display:flex;height:1.25rem;border-radius:.75rem;margin:.12rem -.32rem 0 .22rem;aspect-ratio:1;background-color:#454545;color:#fff;cursor:pointer;font-size:1.25rem;line-height:1.27rem}:host.default{border-color:#979797;background:#fff;color:#000}:host.pending{border-color:#979797;background:#fff;color:#979797}:host.error{border-color:#c70023;background:#fff;color:#000}:host.error .qd-icon{background-color:#c70023}:host:hover{background:#e5e5e5}:host .errorTooltip{position:fixed;z-index:99999;padding:0 .3125rem;border:solid 1px;background-color:#fff;box-shadow:0 .3125rem .3125rem .3125rem #b4b4b440;color:#c70023;pointer-events:none;visibility:hidden}:host .errorTooltip .value{color:#000}:host:hover .errorTooltip{animation:show 0s both;animation-delay:.5s;visibility:visible}@keyframes show{0%{visibility:hidden}to{visibility:visible}}\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: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdMultiInputChipComponent, isStandalone: false, selector: "qd-multi-input-chip", inputs: { itemControl: "itemControl", value: "value", close: "close", testId: ["data-test-id", "testId"] }, outputs: { closeClickEmitter: "closeClickEmitter" }, host: { listeners: { "mouseover": "showTooltip($event)" }, properties: { "class": "this.themeClass" } }, viewQueries: [{ propertyName: "errorTooltip", first: true, predicate: ["errorTooltip"], descendants: true }], ngImport: i0, template: "<span [attr.data-test-id]=\"testId + '-caption'\" class=\"value qd-multi-input__chip-label\" [title]=\"title\">{{\n  chipText\n}}</span>\n<qd-icon *ngIf=\"close\" [icon]=\"'times'\" (click)=\"clickClose($event)\" [attr.data-test-id]=\"testId + '-close'\"></qd-icon>\n<div *ngIf=\"itemControl && itemControl.errors\" #errorTooltip class=\"errorTooltip\">\n  <div class=\"value\">{{ itemControl.value }}</div>\n  <div *ngFor=\"let errorMessage of errorMessages\">{{ errorMessage | translate }}</div>\n</div>\n", styles: [":host{display:inline-flex;padding:0 .5rem;border:solid .0625rem;border-radius:.75rem;margin:.3125rem 0 0 .3125rem;cursor:default;font-size:.813rem;font-weight:400;line-height:1.5rem;white-space:nowrap}:host .qd-multi-input__chip-label{overflow:hidden;max-width:7.5rem;text-overflow:ellipsis;white-space:nowrap}:host .qd-icon{display:flex;height:1.25rem;border-radius:.75rem;margin:.12rem -.32rem 0 .22rem;aspect-ratio:1;background-color:#454545;color:#fff;cursor:pointer;font-size:1.25rem;line-height:1.27rem}:host.default{border-color:#979797;background:#fff;color:#000}:host.pending{border-color:#979797;background:#fff;color:#979797}:host.error{border-color:#c70023;background:#fff;color:#000}:host.error .qd-icon{background-color:#c70023}:host:hover{background:#e5e5e5}:host .errorTooltip{position:fixed;z-index:99999;padding:0 .3125rem;border:solid 1px;background-color:#fff;box-shadow:0 .3125rem .3125rem .3125rem #b4b4b440;color:#c70023;pointer-events:none;visibility:hidden}:host .errorTooltip .value{color:#000}:host:hover .errorTooltip{animation:show 0s both;animation-delay:.5s;visibility:visible}@keyframes show{0%{visibility:hidden}to{visibility:visible}}\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: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMultiInputChipComponent, decorators: [{
             type: Component,
@@ -13973,7 +14023,7 @@ class QdMultiInputComponent {
             },
             QdMultiInputService,
             QdFormsActionEmitterService
-        ], viewQueries: [{ propertyName: "inputField", first: true, predicate: ["input"], descendants: true }, { propertyName: "multiInputMenu", first: true, predicate: i0.forwardRef(() => QdMultiInputMenuComponent), descendants: true }, { propertyName: "popoverOnClickDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }, { propertyName: "errorTooltips", predicate: ["errorTooltips"], descendants: true }, { propertyName: "dropdownOptions", predicate: ["dropdownOption"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"formArray\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<div\n  *ngIf=\"!readonly && !viewonly\"\n  class=\"qd-multi-input__input-chip-box\"\n  (click)=\"focus()\"\n  (opened)=\"open = true\"\n  (closed)=\"open = false\"\n  [qdPopoverOnClick]=\"menu\"\n  [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n  [qdPopoverDisabled]=\"options.length === 0\"\n  [qdPopoverAutoSize]=\"{ width: true }\"\n  [qdPopoverBackgroundColor]=\"'transparent'\"\n  [positionStrategy]=\"[\n    {\n      originX: 'start',\n      originY: 'bottom',\n      overlayX: 'start',\n      overlayY: 'top',\n      offsetX: -2\n    },\n    {\n      originX: 'start',\n      originY: 'top',\n      overlayX: 'start',\n      overlayY: 'bottom',\n      weight: 0.8,\n      offsetX: -2\n    }\n  ]\"\n>\n  <div [ngClass]=\"hasItems() ? 'qd-multi-input__chip-margin' : ''\">\n    <qd-multi-input-chip\n      *ngFor=\"let element of getIterableElements(); let index = index\"\n      [close]=\"!disabled && !readonly && !viewonly\"\n      [itemControl]=\"formArray ? element : undefined\"\n      [value]=\"formArray ? undefined : getTranslation(element)\"\n      (closeClickEmitter)=\"close(index)\"\n      (click)=\"handleChipClick($event)\"\n    >\n    </qd-multi-input-chip>\n  </div>\n\n  <div class=\"qd-multi-input__wrapper\">\n    <input\n      #input\n      type=\"text\"\n      class=\"qd-multi-input__box\"\n      *ngIf=\"!readonly && !viewonly\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"filterOptions\"\n      (ngModelChange)=\"changeValue()\"\n      (keydown)=\"onKeyDown($event)\"\n      (focus)=\"hasFocus = true\"\n      (blur)=\"handleBlur()\"\n      [ngClass]=\"open ? 'qd-multi-input__box--open' : ''\"\n      [attr.data-test-id]=\"testId + '-input'\"\n    />\n\n    <div class=\"qd-multi-input__box qd-multi-input__box--readonly\" *ngIf=\"readonly && !hasItems()\">&nbsp;</div>\n\n    <div class=\"qd-multi-input__box qd-multi-input__box--viewonly\" *ngIf=\"viewonly && !hasItems()\">&nbsp;</div>\n\n    <ng-template #menu>\n      <qd-multi-input-menu\n        [optionsListForView]=\"optionsListForView\"\n        [id]=\"id\"\n        [data-test-id]=\"testId\"\n        (itemClick)=\"handleClick($event)\"\n      ></qd-multi-input-menu>\n    </ng-template>\n  </div>\n</div>\n\n<qd-form-hint\n  *ngIf=\"config && !readonly && !viewonly && (hasHint || hasError)\"\n  [hint]=\"hasHint ? config.hint.i18n : ''\"\n  [control]=\"formArray\"\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]=\"getValues()\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"getValues()\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [":host{display:block;margin-bottom:.75rem}.qd-multi-input__input-chip-box{margin-bottom:.5rem;background-color:#fff;outline:solid .0625rem rgb(180,180,180)}:host.qd-multi-input-readonly .qd-multi-input__input-chip-box{background:none!important;color:#979797;outline:none!important}:host.qd-multi-input-viewonly .qd-multi-input__input-chip-box{background:none!important;color:#979797;outline:none!important}:host.qd-multi-input-disabled .qd-multi-input__input-chip-box{background:#f5f5f5;color:#979797;outline:.0625rem solid rgb(180,180,180)}:host.qd-multi-input-focus .qd-multi-input__input-chip-box{outline:.125rem solid rgb(0,102,153)}:host.qd-multi-input-focus .qd-multi-input__input-chip-box:hover,:host.qd-multi-input-focus .qd-multi-input__input-chip-box:active{outline:.125rem solid rgb(0,102,153)}.qd-multi-input__input-chip-box:active,.qd-multi-input__input-chip-box:hover{outline:.125rem solid rgb(23,23,23)}.qd-multi-input__chip-margin{padding:0 .3125rem .3125rem 0}:host.qd-multi-input-readonly .qd-multi-input__chip-margin{padding:0 0 .3125rem}:host.qd-multi-input-viewonly .qd-multi-input__chip-margin{padding:0 0 .3125rem}.qd-multi-input__wrapper{position:relative}.qd-multi-input__wrapper .qd-multi-input__box{display:flex;overflow:hidden;width:100%;height:2.25rem;justify-content:space-between;padding:0 .75rem;border:.0625rem solid rgb(255,255,255);background:#fff;font-size:.875rem;font-weight:400;line-height:2.25rem;text-overflow:ellipsis;white-space:nowrap}.qd-multi-input__wrapper .qd-multi-input__box:focus,.qd-multi-input__wrapper .qd-multi-input__box:active,.qd-multi-input__wrapper .qd-multi-input__box.qd-multi-input__box--open{padding:0 .8125rem;border:none;color:#171717;line-height:2.125rem;outline:none}.qd-multi-input__wrapper .qd-multi-input__box:hover:after{border-top-color:#b4b4b4}.qd-multi-input__wrapper .qd-multi-input__box.qd-multi-input__box--open{border-color:#069}:host.qd-multi-input-disabled .qd-multi-input__wrapper .qd-multi-input__box{border:none;background:#f5f5f5;color:#979797}:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box{height:inherit;padding:0;border:none;line-height:2.25rem}:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:focus,:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:hover,:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:active{color:inherit}:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:after{display:none}:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box{height:inherit;padding:0;border:none;line-height:2.25rem}:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:focus,:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:hover,:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:active{color:inherit}:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:after{display:none}:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly{color:#069;cursor:pointer}:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly:hover,:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly:active,:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly:focus{color:#069;text-decoration:underline}:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly{color:#069;cursor:pointer}:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly:hover,:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly:active,:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly:focus{color:#069;text-decoration:underline}:host.qd-multi-input-error .qd-multi-input__input-chip-box{outline:.0625rem solid rgb(199,0,35)}:host.qd-multi-input-error .qd-multi-input__input-chip-box:focus,:host.qd-multi-input-error .qd-multi-input__input-chip-box:hover,:host.qd-multi-input-error .qd-multi-input__input-chip-box:active,:host.qd-multi-input-error .qd-multi-input__input-chip-box.qd-multi-input__box--open{outline:.125rem solid rgb(199,0,35)}:host.qd-multi-input-error .qd-multi-input__input-chip-box .qd-error-icon{color:#c70023}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { 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: QdMultiInputChipComponent, selector: "qd-multi-input-chip", inputs: ["itemControl", "value", "close", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdMultiInputMenuComponent, selector: "qd-multi-input-menu", inputs: ["id", "optionsListForView", "data-test-id"], outputs: ["itemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputField", first: true, predicate: ["input"], descendants: true }, { propertyName: "multiInputMenu", first: true, predicate: i0.forwardRef(() => QdMultiInputMenuComponent), descendants: true }, { propertyName: "popoverOnClickDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }, { propertyName: "errorTooltips", predicate: ["errorTooltips"], descendants: true }, { propertyName: "dropdownOptions", predicate: ["dropdownOption"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"formArray\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<div\n  *ngIf=\"!readonly && !viewonly\"\n  class=\"qd-multi-input__input-chip-box\"\n  (click)=\"focus()\"\n  (opened)=\"open = true\"\n  (closed)=\"open = false\"\n  [qdPopoverOnClick]=\"menu\"\n  [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n  [qdPopoverDisabled]=\"options.length === 0\"\n  [qdPopoverAutoSize]=\"{ width: true }\"\n  [qdPopoverBackgroundColor]=\"'transparent'\"\n  [positionStrategy]=\"[\n    {\n      originX: 'start',\n      originY: 'bottom',\n      overlayX: 'start',\n      overlayY: 'top',\n      offsetX: -2\n    },\n    {\n      originX: 'start',\n      originY: 'top',\n      overlayX: 'start',\n      overlayY: 'bottom',\n      weight: 0.8,\n      offsetX: -2\n    }\n  ]\"\n>\n  <div [ngClass]=\"hasItems() ? 'qd-multi-input__chip-margin' : ''\">\n    <qd-multi-input-chip\n      *ngFor=\"let element of getIterableElements(); let index = index\"\n      [close]=\"!disabled && !readonly && !viewonly\"\n      [itemControl]=\"formArray ? element : undefined\"\n      [value]=\"formArray ? undefined : getTranslation(element)\"\n      (closeClickEmitter)=\"close(index)\"\n      (click)=\"handleChipClick($event)\"\n    >\n    </qd-multi-input-chip>\n  </div>\n\n  <div class=\"qd-multi-input__wrapper\">\n    <input\n      #input\n      type=\"text\"\n      class=\"qd-multi-input__box\"\n      *ngIf=\"!readonly && !viewonly\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"filterOptions\"\n      (ngModelChange)=\"changeValue()\"\n      (keydown)=\"onKeyDown($event)\"\n      (focus)=\"hasFocus = true\"\n      (blur)=\"handleBlur()\"\n      [ngClass]=\"open ? 'qd-multi-input__box--open' : ''\"\n      [attr.data-test-id]=\"testId + '-input'\"\n      autocomplete=\"off\"\n    />\n\n    <div class=\"qd-multi-input__box qd-multi-input__box--readonly\" *ngIf=\"readonly && !hasItems()\">&nbsp;</div>\n\n    <div class=\"qd-multi-input__box qd-multi-input__box--viewonly\" *ngIf=\"viewonly && !hasItems()\">&nbsp;</div>\n\n    <ng-template #menu>\n      <qd-multi-input-menu\n        [optionsListForView]=\"optionsListForView\"\n        [id]=\"id\"\n        [data-test-id]=\"testId\"\n        (itemClick)=\"handleClick($event)\"\n      ></qd-multi-input-menu>\n    </ng-template>\n  </div>\n</div>\n\n<qd-form-hint\n  *ngIf=\"config && !readonly && !viewonly && (hasHint || hasError)\"\n  [hint]=\"hasHint ? config.hint.i18n : ''\"\n  [control]=\"formArray\"\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]=\"getValues()\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"getValues()\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [":host{display:block;margin-bottom:.75rem}.qd-multi-input__input-chip-box{margin-bottom:.5rem;background-color:#fff;outline:solid .0625rem rgb(180,180,180)}:host.qd-multi-input-readonly .qd-multi-input__input-chip-box{background:none!important;color:#979797;outline:none!important}:host.qd-multi-input-viewonly .qd-multi-input__input-chip-box{background:none!important;color:#979797;outline:none!important}:host.qd-multi-input-disabled .qd-multi-input__input-chip-box{background:#f5f5f5;color:#979797;outline:.0625rem solid rgb(180,180,180)}:host.qd-multi-input-focus .qd-multi-input__input-chip-box{outline:.125rem solid rgb(0,102,153)}:host.qd-multi-input-focus .qd-multi-input__input-chip-box:hover,:host.qd-multi-input-focus .qd-multi-input__input-chip-box:active{outline:.125rem solid rgb(0,102,153)}.qd-multi-input__input-chip-box:active,.qd-multi-input__input-chip-box:hover{outline:.125rem solid rgb(23,23,23)}.qd-multi-input__chip-margin{padding:0 .3125rem .3125rem 0}:host.qd-multi-input-readonly .qd-multi-input__chip-margin{padding:0 0 .3125rem}:host.qd-multi-input-viewonly .qd-multi-input__chip-margin{padding:0 0 .3125rem}.qd-multi-input__wrapper{position:relative}.qd-multi-input__wrapper .qd-multi-input__box{display:flex;overflow:hidden;width:100%;height:2.25rem;justify-content:space-between;padding:0 .75rem;border:.0625rem solid rgb(255,255,255);background:#fff;font-size:.875rem;font-weight:400;line-height:2.25rem;text-overflow:ellipsis;white-space:nowrap}.qd-multi-input__wrapper .qd-multi-input__box:focus,.qd-multi-input__wrapper .qd-multi-input__box:active,.qd-multi-input__wrapper .qd-multi-input__box.qd-multi-input__box--open{padding:0 .8125rem;border:none;color:#171717;line-height:2.125rem;outline:none}.qd-multi-input__wrapper .qd-multi-input__box:hover:after{border-top-color:#b4b4b4}.qd-multi-input__wrapper .qd-multi-input__box.qd-multi-input__box--open{border-color:#069}:host.qd-multi-input-disabled .qd-multi-input__wrapper .qd-multi-input__box{border:none;background:#f5f5f5;color:#979797}:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box{height:inherit;padding:0;border:none;line-height:2.25rem}:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:focus,:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:hover,:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:active{color:inherit}:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:after{display:none}:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box{height:inherit;padding:0;border:none;line-height:2.25rem}:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:focus,:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:hover,:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:active{color:inherit}:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:after{display:none}:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly{color:#069;cursor:pointer}:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly:hover,:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly:active,:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly:focus{color:#069;text-decoration:underline}:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly{color:#069;cursor:pointer}:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly:hover,:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly:active,:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly:focus{color:#069;text-decoration:underline}:host.qd-multi-input-error .qd-multi-input__input-chip-box{outline:.0625rem solid rgb(199,0,35)}:host.qd-multi-input-error .qd-multi-input__input-chip-box:focus,:host.qd-multi-input-error .qd-multi-input__input-chip-box:hover,:host.qd-multi-input-error .qd-multi-input__input-chip-box:active,:host.qd-multi-input-error .qd-multi-input__input-chip-box.qd-multi-input__box--open{outline:.125rem solid rgb(199,0,35)}:host.qd-multi-input-error .qd-multi-input__input-chip-box .qd-error-icon{color:#c70023}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { 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: QdMultiInputChipComponent, selector: "qd-multi-input-chip", inputs: ["itemControl", "value", "close", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdMultiInputMenuComponent, selector: "qd-multi-input-menu", inputs: ["id", "optionsListForView", "data-test-id"], outputs: ["itemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMultiInputComponent, decorators: [{
             type: Component,
@@ -13985,7 +14035,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         },
                         QdMultiInputService,
                         QdFormsActionEmitterService
-                    ], host: { class: 'qd-multi-input' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"formArray\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<div\n  *ngIf=\"!readonly && !viewonly\"\n  class=\"qd-multi-input__input-chip-box\"\n  (click)=\"focus()\"\n  (opened)=\"open = true\"\n  (closed)=\"open = false\"\n  [qdPopoverOnClick]=\"menu\"\n  [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n  [qdPopoverDisabled]=\"options.length === 0\"\n  [qdPopoverAutoSize]=\"{ width: true }\"\n  [qdPopoverBackgroundColor]=\"'transparent'\"\n  [positionStrategy]=\"[\n    {\n      originX: 'start',\n      originY: 'bottom',\n      overlayX: 'start',\n      overlayY: 'top',\n      offsetX: -2\n    },\n    {\n      originX: 'start',\n      originY: 'top',\n      overlayX: 'start',\n      overlayY: 'bottom',\n      weight: 0.8,\n      offsetX: -2\n    }\n  ]\"\n>\n  <div [ngClass]=\"hasItems() ? 'qd-multi-input__chip-margin' : ''\">\n    <qd-multi-input-chip\n      *ngFor=\"let element of getIterableElements(); let index = index\"\n      [close]=\"!disabled && !readonly && !viewonly\"\n      [itemControl]=\"formArray ? element : undefined\"\n      [value]=\"formArray ? undefined : getTranslation(element)\"\n      (closeClickEmitter)=\"close(index)\"\n      (click)=\"handleChipClick($event)\"\n    >\n    </qd-multi-input-chip>\n  </div>\n\n  <div class=\"qd-multi-input__wrapper\">\n    <input\n      #input\n      type=\"text\"\n      class=\"qd-multi-input__box\"\n      *ngIf=\"!readonly && !viewonly\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"filterOptions\"\n      (ngModelChange)=\"changeValue()\"\n      (keydown)=\"onKeyDown($event)\"\n      (focus)=\"hasFocus = true\"\n      (blur)=\"handleBlur()\"\n      [ngClass]=\"open ? 'qd-multi-input__box--open' : ''\"\n      [attr.data-test-id]=\"testId + '-input'\"\n    />\n\n    <div class=\"qd-multi-input__box qd-multi-input__box--readonly\" *ngIf=\"readonly && !hasItems()\">&nbsp;</div>\n\n    <div class=\"qd-multi-input__box qd-multi-input__box--viewonly\" *ngIf=\"viewonly && !hasItems()\">&nbsp;</div>\n\n    <ng-template #menu>\n      <qd-multi-input-menu\n        [optionsListForView]=\"optionsListForView\"\n        [id]=\"id\"\n        [data-test-id]=\"testId\"\n        (itemClick)=\"handleClick($event)\"\n      ></qd-multi-input-menu>\n    </ng-template>\n  </div>\n</div>\n\n<qd-form-hint\n  *ngIf=\"config && !readonly && !viewonly && (hasHint || hasError)\"\n  [hint]=\"hasHint ? config.hint.i18n : ''\"\n  [control]=\"formArray\"\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]=\"getValues()\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"getValues()\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [":host{display:block;margin-bottom:.75rem}.qd-multi-input__input-chip-box{margin-bottom:.5rem;background-color:#fff;outline:solid .0625rem rgb(180,180,180)}:host.qd-multi-input-readonly .qd-multi-input__input-chip-box{background:none!important;color:#979797;outline:none!important}:host.qd-multi-input-viewonly .qd-multi-input__input-chip-box{background:none!important;color:#979797;outline:none!important}:host.qd-multi-input-disabled .qd-multi-input__input-chip-box{background:#f5f5f5;color:#979797;outline:.0625rem solid rgb(180,180,180)}:host.qd-multi-input-focus .qd-multi-input__input-chip-box{outline:.125rem solid rgb(0,102,153)}:host.qd-multi-input-focus .qd-multi-input__input-chip-box:hover,:host.qd-multi-input-focus .qd-multi-input__input-chip-box:active{outline:.125rem solid rgb(0,102,153)}.qd-multi-input__input-chip-box:active,.qd-multi-input__input-chip-box:hover{outline:.125rem solid rgb(23,23,23)}.qd-multi-input__chip-margin{padding:0 .3125rem .3125rem 0}:host.qd-multi-input-readonly .qd-multi-input__chip-margin{padding:0 0 .3125rem}:host.qd-multi-input-viewonly .qd-multi-input__chip-margin{padding:0 0 .3125rem}.qd-multi-input__wrapper{position:relative}.qd-multi-input__wrapper .qd-multi-input__box{display:flex;overflow:hidden;width:100%;height:2.25rem;justify-content:space-between;padding:0 .75rem;border:.0625rem solid rgb(255,255,255);background:#fff;font-size:.875rem;font-weight:400;line-height:2.25rem;text-overflow:ellipsis;white-space:nowrap}.qd-multi-input__wrapper .qd-multi-input__box:focus,.qd-multi-input__wrapper .qd-multi-input__box:active,.qd-multi-input__wrapper .qd-multi-input__box.qd-multi-input__box--open{padding:0 .8125rem;border:none;color:#171717;line-height:2.125rem;outline:none}.qd-multi-input__wrapper .qd-multi-input__box:hover:after{border-top-color:#b4b4b4}.qd-multi-input__wrapper .qd-multi-input__box.qd-multi-input__box--open{border-color:#069}:host.qd-multi-input-disabled .qd-multi-input__wrapper .qd-multi-input__box{border:none;background:#f5f5f5;color:#979797}:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box{height:inherit;padding:0;border:none;line-height:2.25rem}:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:focus,:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:hover,:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:active{color:inherit}:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:after{display:none}:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box{height:inherit;padding:0;border:none;line-height:2.25rem}:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:focus,:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:hover,:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:active{color:inherit}:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:after{display:none}:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly{color:#069;cursor:pointer}:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly:hover,:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly:active,:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly:focus{color:#069;text-decoration:underline}:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly{color:#069;cursor:pointer}:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly:hover,:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly:active,:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly:focus{color:#069;text-decoration:underline}:host.qd-multi-input-error .qd-multi-input__input-chip-box{outline:.0625rem solid rgb(199,0,35)}:host.qd-multi-input-error .qd-multi-input__input-chip-box:focus,:host.qd-multi-input-error .qd-multi-input__input-chip-box:hover,:host.qd-multi-input-error .qd-multi-input__input-chip-box:active,:host.qd-multi-input-error .qd-multi-input__input-chip-box.qd-multi-input__box--open{outline:.125rem solid rgb(199,0,35)}:host.qd-multi-input-error .qd-multi-input__input-chip-box .qd-error-icon{color:#c70023}\n"] }]
+                    ], host: { class: 'qd-multi-input' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"formArray\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<div\n  *ngIf=\"!readonly && !viewonly\"\n  class=\"qd-multi-input__input-chip-box\"\n  (click)=\"focus()\"\n  (opened)=\"open = true\"\n  (closed)=\"open = false\"\n  [qdPopoverOnClick]=\"menu\"\n  [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n  [qdPopoverDisabled]=\"options.length === 0\"\n  [qdPopoverAutoSize]=\"{ width: true }\"\n  [qdPopoverBackgroundColor]=\"'transparent'\"\n  [positionStrategy]=\"[\n    {\n      originX: 'start',\n      originY: 'bottom',\n      overlayX: 'start',\n      overlayY: 'top',\n      offsetX: -2\n    },\n    {\n      originX: 'start',\n      originY: 'top',\n      overlayX: 'start',\n      overlayY: 'bottom',\n      weight: 0.8,\n      offsetX: -2\n    }\n  ]\"\n>\n  <div [ngClass]=\"hasItems() ? 'qd-multi-input__chip-margin' : ''\">\n    <qd-multi-input-chip\n      *ngFor=\"let element of getIterableElements(); let index = index\"\n      [close]=\"!disabled && !readonly && !viewonly\"\n      [itemControl]=\"formArray ? element : undefined\"\n      [value]=\"formArray ? undefined : getTranslation(element)\"\n      (closeClickEmitter)=\"close(index)\"\n      (click)=\"handleChipClick($event)\"\n    >\n    </qd-multi-input-chip>\n  </div>\n\n  <div class=\"qd-multi-input__wrapper\">\n    <input\n      #input\n      type=\"text\"\n      class=\"qd-multi-input__box\"\n      *ngIf=\"!readonly && !viewonly\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"filterOptions\"\n      (ngModelChange)=\"changeValue()\"\n      (keydown)=\"onKeyDown($event)\"\n      (focus)=\"hasFocus = true\"\n      (blur)=\"handleBlur()\"\n      [ngClass]=\"open ? 'qd-multi-input__box--open' : ''\"\n      [attr.data-test-id]=\"testId + '-input'\"\n      autocomplete=\"off\"\n    />\n\n    <div class=\"qd-multi-input__box qd-multi-input__box--readonly\" *ngIf=\"readonly && !hasItems()\">&nbsp;</div>\n\n    <div class=\"qd-multi-input__box qd-multi-input__box--viewonly\" *ngIf=\"viewonly && !hasItems()\">&nbsp;</div>\n\n    <ng-template #menu>\n      <qd-multi-input-menu\n        [optionsListForView]=\"optionsListForView\"\n        [id]=\"id\"\n        [data-test-id]=\"testId\"\n        (itemClick)=\"handleClick($event)\"\n      ></qd-multi-input-menu>\n    </ng-template>\n  </div>\n</div>\n\n<qd-form-hint\n  *ngIf=\"config && !readonly && !viewonly && (hasHint || hasError)\"\n  [hint]=\"hasHint ? config.hint.i18n : ''\"\n  [control]=\"formArray\"\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]=\"getValues()\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"getValues()\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [":host{display:block;margin-bottom:.75rem}.qd-multi-input__input-chip-box{margin-bottom:.5rem;background-color:#fff;outline:solid .0625rem rgb(180,180,180)}:host.qd-multi-input-readonly .qd-multi-input__input-chip-box{background:none!important;color:#979797;outline:none!important}:host.qd-multi-input-viewonly .qd-multi-input__input-chip-box{background:none!important;color:#979797;outline:none!important}:host.qd-multi-input-disabled .qd-multi-input__input-chip-box{background:#f5f5f5;color:#979797;outline:.0625rem solid rgb(180,180,180)}:host.qd-multi-input-focus .qd-multi-input__input-chip-box{outline:.125rem solid rgb(0,102,153)}:host.qd-multi-input-focus .qd-multi-input__input-chip-box:hover,:host.qd-multi-input-focus .qd-multi-input__input-chip-box:active{outline:.125rem solid rgb(0,102,153)}.qd-multi-input__input-chip-box:active,.qd-multi-input__input-chip-box:hover{outline:.125rem solid rgb(23,23,23)}.qd-multi-input__chip-margin{padding:0 .3125rem .3125rem 0}:host.qd-multi-input-readonly .qd-multi-input__chip-margin{padding:0 0 .3125rem}:host.qd-multi-input-viewonly .qd-multi-input__chip-margin{padding:0 0 .3125rem}.qd-multi-input__wrapper{position:relative}.qd-multi-input__wrapper .qd-multi-input__box{display:flex;overflow:hidden;width:100%;height:2.25rem;justify-content:space-between;padding:0 .75rem;border:.0625rem solid rgb(255,255,255);background:#fff;font-size:.875rem;font-weight:400;line-height:2.25rem;text-overflow:ellipsis;white-space:nowrap}.qd-multi-input__wrapper .qd-multi-input__box:focus,.qd-multi-input__wrapper .qd-multi-input__box:active,.qd-multi-input__wrapper .qd-multi-input__box.qd-multi-input__box--open{padding:0 .8125rem;border:none;color:#171717;line-height:2.125rem;outline:none}.qd-multi-input__wrapper .qd-multi-input__box:hover:after{border-top-color:#b4b4b4}.qd-multi-input__wrapper .qd-multi-input__box.qd-multi-input__box--open{border-color:#069}:host.qd-multi-input-disabled .qd-multi-input__wrapper .qd-multi-input__box{border:none;background:#f5f5f5;color:#979797}:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box{height:inherit;padding:0;border:none;line-height:2.25rem}:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:focus,:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:hover,:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:active{color:inherit}:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:after{display:none}:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box{height:inherit;padding:0;border:none;line-height:2.25rem}:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:focus,:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:hover,:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:active{color:inherit}:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:after{display:none}:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly{color:#069;cursor:pointer}:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly:hover,:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly:active,:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly:focus{color:#069;text-decoration:underline}:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly{color:#069;cursor:pointer}:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly:hover,:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly:active,:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly:focus{color:#069;text-decoration:underline}:host.qd-multi-input-error .qd-multi-input__input-chip-box{outline:.0625rem solid rgb(199,0,35)}:host.qd-multi-input-error .qd-multi-input__input-chip-box:focus,:host.qd-multi-input-error .qd-multi-input__input-chip-box:hover,:host.qd-multi-input-error .qd-multi-input__input-chip-box:active,:host.qd-multi-input-error .qd-multi-input__input-chip-box.qd-multi-input__box--open{outline:.125rem solid rgb(199,0,35)}:host.qd-multi-input-error .qd-multi-input__input-chip-box .qd-error-icon{color:#c70023}\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{
                 type: Input
             }], values: [{
@@ -14516,7 +14566,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  />\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]=\"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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPinCodeComponent, decorators: [{
             type: Component,
@@ -14528,7 +14578,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  />\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]=\"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"] }]
         }], propDecorators: { formControlName: [{
                 type: Input
             }], value: [{
@@ -14831,7 +14881,7 @@ class QdRadioButtonsComponent {
             },
             QdRadioButtonsService,
             QdFormsActionEmitterService
-        ], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n  [isDisabled]=\"isLabelDisabled\"\n></qd-form-label>\n\n<qd-filter-form-items\n  *ngIf=\"filter\"\n  (filterValueChange)=\"changeValue($event)\"\n  [data-test-id]=\"testId + '-filter-form'\"\n></qd-filter-form-items>\n\n<div class=\"qd-radio-buttons__button-section\" *ngIf=\"!readonly && !viewonly\">\n  <label\n    *ngFor=\"let option of radioButtonsListForView; trackBy: getOptionId\"\n    [for]=\"option.value + id\"\n    [ngClass]=\"\n      'qd-radio-buttons__label' +\n      (option.disabled || disabled ? ' qd-radio-buttons__label--disabled' : '') +\n      (option.value === value ? ' qd-radio-buttons__label--checked' : '')\n    \"\n    [attr.data-test-id]=\"testId + '-label'\"\n  >\n    <input\n      type=\"radio\"\n      qdVisuallyHidden\n      [id]=\"option.value + id\"\n      [ngClass]=\"'qd-radio-buttons__radio-button'\"\n      [name]=\"id\"\n      [value]=\"option.value\"\n      [disabled]=\"option.disabled || disabled\"\n      (click)=\"handleClick(option.value)\"\n      [checked]=\"option.value === value\"\n      [attr.data-test-id]=\"testId + '-input-' + option.i18n\"\n    />\n\n    <qd-icon class=\"qd-radio-buttons__indicator\" *ngIf=\"option.value === value\" [icon]=\"'circleRadio'\"></qd-icon>\n    <qd-icon class=\"qd-radio-buttons__indicator\" *ngIf=\"option.value !== value\" [icon]=\"'circleSolid'\"></qd-icon>\n\n    <span [ngClass]=\"'qd-radio-buttons__caption qd-intersection-target'\">{{ option.i18n | translate }}</span>\n  </label>\n</div>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hasHint || hasError)\"\n  [hint]=\"hasHint ? config.hint.i18n : ''\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"activeOptionAsList\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"activeOptionAsList\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-radio-buttons{display:block;flex-direction:column;margin-bottom:.75rem}.qd-radio-buttons.qd-radio-align--horizontal .qd-radio-buttons__button-section{display:flex;min-height:2.25rem;flex-wrap:wrap;align-items:center;margin-bottom:.375rem}.qd-radio-buttons.qd-radio-align--horizontal .qd-radio-buttons__label:not(:last-child) .qd-radio-buttons__caption{padding-right:1rem}.qd-radio-buttons.qd-radio-align--vertical .qd-radio-buttons__button-section{display:flex;flex-direction:column;margin-bottom:.375rem}.qd-radio-buttons.qd-radio-align--vertical .qd-radio-buttons__button-section .qd-radio-buttons__caption{flex:auto}.qd-radio-buttons .qd-radio-buttons__label{display:flex;max-width:100%;padding:.625rem 0;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400;line-height:1rem}.qd-radio-buttons .qd-radio-buttons__label .qd-radio-buttons__indicator{padding:0 .375rem 0 0;color:#b4b4b4;font-size:1.25rem}.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):hover,.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):focus{color:#171717}.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):hover .qd-radio-buttons__indicator,.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):focus .qd-radio-buttons__indicator{color:#757575}.qd-radio-buttons .qd-radio-buttons__label--checked{color:#171717}.qd-radio-buttons .qd-radio-buttons__label--checked .qd-radio-buttons__indicator{color:#069}.qd-radio-buttons .qd-radio-buttons__label--disabled{color:#d5d5d5;cursor:default}.qd-radio-buttons .qd-radio-buttons__label--disabled .qd-radio-buttons__indicator{color:#d5d5d5}.qd-radio-buttons .qd-radio-buttons__label .qd-radio-buttons__caption{padding:0}.qd-radio-buttons__input-section{margin-bottom:.375rem}@media (max-width: 959.98px){.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__button-section{flex-direction:column}.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label{width:100%;padding-top:.0625rem;padding-bottom:.0625rem;padding-left:.75rem;border:.0625rem solid rgb(180,180,180);margin-bottom:.75rem;background:#fff}.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label .qd-radio-buttons__caption{padding-right:.75rem!important;transform:translateY(.0625rem)}}@media (max-width: 959.98px) and (max-width: 959.98px){.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label .qd-radio-buttons__caption{padding:.375rem .375rem .375rem 0!important;line-height:1.25rem}}@media (max-width: 959.98px){.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label:last-child{margin-bottom:0}.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label .qd-radio-buttons__indicator{display:flex;align-items:center}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: QdVisuallyHiddenDirective, selector: "[qdVisuallyHidden]" }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "component", type: QdFilterFormItemsComponent, selector: "qd-filter-form-items", inputs: ["inputFilterValue", "data-test-id"], outputs: ["filterValueChange"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+        ], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n  [isDisabled]=\"isLabelDisabled\"\n></qd-form-label>\n\n<qd-filter-form-items\n  *ngIf=\"filter\"\n  (filterValueChange)=\"changeValue($event)\"\n  [data-test-id]=\"testId + '-filter-form'\"\n></qd-filter-form-items>\n\n<div class=\"qd-radio-buttons__button-section\" *ngIf=\"!readonly && !viewonly\">\n  <label\n    *ngFor=\"let option of radioButtonsListForView; trackBy: getOptionId\"\n    [for]=\"option.value + id\"\n    [ngClass]=\"\n      'qd-radio-buttons__label' +\n      (option.disabled || disabled ? ' qd-radio-buttons__label--disabled' : '') +\n      (option.value === value ? ' qd-radio-buttons__label--checked' : '')\n    \"\n    [attr.data-test-id]=\"testId + '-label'\"\n  >\n    <input\n      type=\"radio\"\n      qdVisuallyHidden\n      [id]=\"option.value + id\"\n      [ngClass]=\"'qd-radio-buttons__radio-button'\"\n      [name]=\"id\"\n      [value]=\"option.value\"\n      [disabled]=\"option.disabled || disabled\"\n      (click)=\"handleClick(option.value)\"\n      [checked]=\"option.value === value\"\n      [attr.data-test-id]=\"testId + '-input-' + option.i18n\"\n    />\n\n    <qd-icon class=\"qd-radio-buttons__indicator\" *ngIf=\"option.value === value\" [icon]=\"'circleRadio'\"></qd-icon>\n    <qd-icon class=\"qd-radio-buttons__indicator\" *ngIf=\"option.value !== value\" [icon]=\"'circleSolid'\"></qd-icon>\n\n    <span [ngClass]=\"'qd-radio-buttons__caption qd-intersection-target'\">{{ option.i18n | translate }}</span>\n  </label>\n</div>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hasHint || hasError)\"\n  [hint]=\"hasHint ? config.hint.i18n : ''\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"activeOptionAsList\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"activeOptionAsList\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-radio-buttons{display:block;flex-direction:column;margin-bottom:.75rem}.qd-radio-buttons.qd-radio-align--horizontal .qd-radio-buttons__button-section{display:flex;min-height:2.25rem;flex-wrap:wrap;align-items:center;margin-bottom:.375rem}.qd-radio-buttons.qd-radio-align--horizontal .qd-radio-buttons__label:not(:last-child) .qd-radio-buttons__caption{padding-right:1rem}.qd-radio-buttons.qd-radio-align--vertical .qd-radio-buttons__button-section{display:flex;flex-direction:column;margin-bottom:.375rem}.qd-radio-buttons.qd-radio-align--vertical .qd-radio-buttons__button-section .qd-radio-buttons__caption{flex:auto}.qd-radio-buttons .qd-radio-buttons__label{display:flex;max-width:100%;padding:.625rem 0;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400;line-height:1rem}.qd-radio-buttons .qd-radio-buttons__label .qd-radio-buttons__indicator{padding:0 .375rem 0 0;color:#b4b4b4;font-size:1.25rem}.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):hover,.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):focus{color:#171717}.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):hover .qd-radio-buttons__indicator,.qd-radio-buttons .qd-radio-buttons__label:not(.qd-radio-buttons__label--checked,.qd-radio-buttons__label--disabled):focus .qd-radio-buttons__indicator{color:#757575}.qd-radio-buttons .qd-radio-buttons__label--checked{color:#171717}.qd-radio-buttons .qd-radio-buttons__label--checked .qd-radio-buttons__indicator{color:#069}.qd-radio-buttons .qd-radio-buttons__label--disabled{color:#d5d5d5;cursor:default}.qd-radio-buttons .qd-radio-buttons__label--disabled .qd-radio-buttons__indicator{color:#d5d5d5}.qd-radio-buttons .qd-radio-buttons__label .qd-radio-buttons__caption{padding:0}.qd-radio-buttons__input-section{margin-bottom:.375rem}@media (max-width: 959.98px){.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__button-section{flex-direction:column}.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label{width:100%;padding-top:.0625rem;padding-bottom:.0625rem;padding-left:.75rem;border:.0625rem solid rgb(180,180,180);margin-bottom:.75rem;background:#fff}.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label .qd-radio-buttons__caption{padding-right:.75rem!important;transform:translateY(.0625rem)}}@media (max-width: 959.98px) and (max-width: 959.98px){.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label .qd-radio-buttons__caption{padding:.375rem .375rem .375rem 0!important;line-height:1.25rem}}@media (max-width: 959.98px){.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label:last-child{margin-bottom:0}.qd-radio-buttons:not(.qd-rwd-disabled) .qd-radio-buttons__label .qd-radio-buttons__indicator{display:flex;align-items:center}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: QdVisuallyHiddenDirective, selector: "[qdVisuallyHidden]" }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdFilterFormItemsComponent, selector: "qd-filter-form-items", inputs: ["inputFilterValue", "data-test-id"], outputs: ["filterValueChange"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdRadioButtonsComponent, decorators: [{
             type: Component,
@@ -15730,7 +15780,7 @@ class QdTextareaComponent {
     }
     get maxLength() {
         if (!(this.control instanceof QdFormControl))
-            return;
+            return undefined;
         return this.control.getMaxLengthOrUndefined();
     }
     ngOnInit() {
@@ -15817,7 +15867,7 @@ class QdTextareaComponent {
                 multi: true
             },
             QdFormsActionEmitterService
-        ], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<ng-container *ngIf=\"!readonly && !viewonly\">\n  <div class=\"qd-textarea-input\">\n    <textarea\n      [placeholder]=\"placeholder | translate\"\n      [value]=\"valueForView\"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus()\"\n      (blur)=\"handleBlur()\"\n      [disabled]=\"disabled || readonly\"\n      [attr.data-test-id]=\"testId + '-input'\"\n      [rows]=\"rows\"\n    ></textarea>\n    <div class=\"qd-textarea-suffix\">\n      <qd-icon *ngIf=\"hasError\" class=\"qd-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n    </div>\n  </div>\n\n  <span class=\"qd-textarea-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</ng-container>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"[valueForView]\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"[valueForView]\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [":host{position:relative;display:block;overflow:hidden;width:100%;flex-direction:column;margin-bottom:.75rem}:host .qd-textarea-input{display:flex;align-items:center;padding:.5rem;border:.0625rem solid rgb(180,180,180);border-radius:0;margin-bottom:.375rem;background-color:#fff}:host .qd-textarea-input:hover,:host .qd-textarea-input:focus,:host .qd-textarea-input:active{padding:.4375rem;border:.125rem solid rgb(23,23,23)}:host .qd-textarea-input textarea{height:100%;flex-grow:1;border:none;background-color:#fff;color:#171717;font-size:.875rem;resize:none}:host .qd-textarea-input textarea:hover,:host .qd-textarea-input textarea:focus,:host .qd-textarea-input textarea:active{border:none;outline:none}:host .qd-textarea-input textarea::placeholder{color:#b4b4b4}:host .qd-textarea-input textarea:focus::placeholder{display:block;color:#b4b4b4}:host .qd-textarea-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-textarea-focus .qd-textarea-input{padding:.4375rem;border:.125rem solid rgb(0,102,153);border-radius:0;outline:none}:host.qd-textarea-readonly .qd-textarea-input-readonly{display:flex;min-height:2.25rem;align-items:center;margin-bottom:.375rem;color:#171717;font-size:.875rem}:host.qd-textarea--readonly-action .qd-textarea-input-readonly{color:#069;cursor:pointer}:host.qd-textarea--readonly-action .qd-textarea-input-readonly:hover,:host.qd-textarea--readonly-action .qd-textarea-input-readonly:active,:host.qd-textarea--readonly-action .qd-textarea-input-readonly:focus{text-decoration:underline}:host.qd-textarea-viewonly .qd-textarea-input-viewonly{display:flex;min-height:2.25rem;align-items:center;margin-bottom:.375rem;color:#171717;font-size:.875rem}:host.qd-textarea--viewonly-action .qd-textarea-input-viewonly{color:#069;cursor:pointer}:host.qd-textarea--viewonly-action .qd-textarea-input-viewonly:hover,:host.qd-textarea--viewonly-action .qd-textarea-input-viewonly:active,:host.qd-textarea--viewonly-action .qd-textarea-input-viewonly:focus{text-decoration:underline}:host.qd-textarea-disabled .qd-textarea-input{border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-textarea-disabled .qd-textarea-input textarea{background-color:#f5f5f5;color:#979797}:host.qd-textarea-disabled .qd-textarea-input textarea::placeholder{color:red;opacity:0}:host.qd-textarea-disabled .qd-textarea-input:hover,:host.qd-textarea-disabled .qd-textarea-input:focus,:host.qd-textarea-disabled .qd-textarea-input:active{padding:.5rem;border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-textarea-disabled.qd-textarea-focus{border-color:#ff9b00}:host.qd-textarea-error .qd-textarea-input{padding:.5rem;border:.0625rem solid rgb(199,0,35)}:host.qd-textarea-error .qd-textarea-input .qd-error-icon{color:#c70023}:host.qd-textarea-error .qd-textarea-input:hover,:host.qd-textarea-error .qd-textarea-input:focus,:host.qd-textarea-error .qd-textarea-input:active{padding:.4375rem;border:.125rem solid rgb(199,0,35)}:host.qd-textarea-error.qd-textarea-focus{border-color:#c70023}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+        ], 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\">\n  <div class=\"qd-textarea-input\">\n    <textarea\n      [placeholder]=\"placeholder | translate\"\n      [value]=\"valueForView\"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus()\"\n      (blur)=\"handleBlur()\"\n      [disabled]=\"disabled || readonly\"\n      [attr.data-test-id]=\"testId + '-input'\"\n      [rows]=\"rows\"\n    ></textarea>\n    <div class=\"qd-textarea-suffix\">\n      <qd-icon *ngIf=\"hasError\" class=\"qd-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n    </div>\n  </div>\n\n  <span class=\"qd-textarea-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</ng-container>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"[valueForView]\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"[valueForView]\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [":host{position:relative;display:block;overflow:hidden;width:100%;flex-direction:column;margin-bottom:.75rem}:host .qd-textarea-input{display:flex;align-items:center;padding:.5rem;border:.0625rem solid rgb(180,180,180);border-radius:0;margin-bottom:.375rem;background-color:#fff}:host .qd-textarea-input:hover,:host .qd-textarea-input:focus,:host .qd-textarea-input:active{padding:.4375rem;border:.125rem solid rgb(23,23,23)}:host .qd-textarea-input textarea{height:100%;flex-grow:1;border:none;background-color:#fff;color:#171717;font-size:.875rem;resize:none}:host .qd-textarea-input textarea:hover,:host .qd-textarea-input textarea:focus,:host .qd-textarea-input textarea:active{border:none;outline:none}:host .qd-textarea-input textarea::placeholder{color:#b4b4b4}:host .qd-textarea-input textarea:focus::placeholder{display:block;color:#b4b4b4}:host .qd-textarea-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-textarea-focus .qd-textarea-input{padding:.4375rem;border:.125rem solid rgb(0,102,153);border-radius:0;outline:none}:host.qd-textarea-readonly .qd-textarea-input-readonly{display:flex;min-height:2.25rem;align-items:center;margin-bottom:.375rem;color:#171717;font-size:.875rem}:host.qd-textarea--readonly-action .qd-textarea-input-readonly{color:#069;cursor:pointer}:host.qd-textarea--readonly-action .qd-textarea-input-readonly:hover,:host.qd-textarea--readonly-action .qd-textarea-input-readonly:active,:host.qd-textarea--readonly-action .qd-textarea-input-readonly:focus{text-decoration:underline}:host.qd-textarea-viewonly .qd-textarea-input-viewonly{display:flex;min-height:2.25rem;align-items:center;margin-bottom:.375rem;color:#171717;font-size:.875rem}:host.qd-textarea--viewonly-action .qd-textarea-input-viewonly{color:#069;cursor:pointer}:host.qd-textarea--viewonly-action .qd-textarea-input-viewonly:hover,:host.qd-textarea--viewonly-action .qd-textarea-input-viewonly:active,:host.qd-textarea--viewonly-action .qd-textarea-input-viewonly:focus{text-decoration:underline}:host.qd-textarea-disabled .qd-textarea-input{border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-textarea-disabled .qd-textarea-input textarea{background-color:#f5f5f5;color:#979797}:host.qd-textarea-disabled .qd-textarea-input textarea::placeholder{color:red;opacity:0}:host.qd-textarea-disabled .qd-textarea-input:hover,:host.qd-textarea-disabled .qd-textarea-input:focus,:host.qd-textarea-disabled .qd-textarea-input:active{padding:.5rem;border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-textarea-disabled.qd-textarea-focus{border-color:#ff9b00}:host.qd-textarea-error .qd-textarea-input{padding:.5rem;border:.0625rem solid rgb(199,0,35)}:host.qd-textarea-error .qd-textarea-input .qd-error-icon{color:#c70023}:host.qd-textarea-error .qd-textarea-input:hover,:host.qd-textarea-error .qd-textarea-input:focus,:host.qd-textarea-error .qd-textarea-input:active{padding:.4375rem;border:.125rem solid rgb(199,0,35)}:host.qd-textarea-error.qd-textarea-focus{border-color:#c70023}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTextareaComponent, decorators: [{
             type: Component,
@@ -16534,7 +16584,7 @@ class QdNotificationComponent {
         return !!this.element.nativeElement.closest('qd-snackbar');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdNotificationComponent, isStandalone: false, selector: "qd-notification", inputs: { type: "type", notification: "notification" }, host: { properties: { "attr.class": "this.typeClassName" }, classAttribute: "qd-notification" }, ngImport: i0, template: "<qd-icon *ngIf=\"closeable\" [icon]=\"'timesLarge'\" class=\"closer\" (click)=\"remove()\"></qd-icon>\n<qd-icon [icon]=\"this.getIcon()\" class=\"icon\"></qd-icon>\n\n<ng-content select=\"qd-notification-content\"></ng-content>\n\n<div class=\"title\" *ngIf=\"notification?.title\">{{ notification.title.i18n | translate }}</div>\n<div class=\"message\">\n  <span>{{ notification?.i18n | translate }}</span>\n  <a class=\"link\" *ngIf=\"notification?.link\" (click)=\"handleLinkClick()\">{{ notification.link.i18n | translate }}</a>\n</div>\n", styles: [":host{position:relative;z-index:9999!important;display:block;width:100%;padding:1rem 2rem .5rem 2.75rem;border-width:.0625rem;border-style:solid;border-left-width:.25rem;margin-bottom:.5rem;background:#fff;box-shadow:0 0 .625rem #979797;font-size:.875rem;gap:.5rem;line-height:1rem}:host.qd-notification-info{border-color:#069}:host.qd-notification-info .icon,:host.qd-notification-info .title{color:#069}:host.qd-notification-warning{border-color:#ff9b00}:host.qd-notification-warning .icon,:host.qd-notification-warning .title{color:#ff9b00}:host.qd-notification-critical{border-color:#c70023}:host.qd-notification-critical .icon,:host.qd-notification-critical .title{color:#c70023}:host.qd-notification-success{border-color:#00813a}:host.qd-notification-success .icon,:host.qd-notification-success .title{color:#00813a}:host .icon{position:absolute;top:.9375rem;left:1rem;font-size:1.25rem}:host .closer{position:absolute;top:1rem;right:.75rem;color:#171717;cursor:pointer;font-size:.8125rem;font-weight:600}:host .title{margin-bottom:.375rem;font-weight:500}:host .message{margin-bottom:.25rem;white-space:pre-wrap}:host .link{margin-bottom:.375rem;margin-left:.375rem;color:#069;cursor:pointer}:host .link:hover{text-decoration:underline}:host:host-context(qd-snackbar) .link{display:block;margin-top:.375rem;margin-left:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdNotificationComponent, isStandalone: false, selector: "qd-notification", inputs: { type: "type", notification: "notification" }, host: { properties: { "attr.class": "this.typeClassName" }, classAttribute: "qd-notification" }, ngImport: i0, template: "<qd-icon *ngIf=\"closeable\" [icon]=\"'timesLarge'\" class=\"closer\" (click)=\"remove()\"></qd-icon>\n<qd-icon [icon]=\"this.getIcon()\" class=\"icon\"></qd-icon>\n\n<ng-content select=\"qd-notification-content\"></ng-content>\n\n<div class=\"title\" *ngIf=\"notification?.title\">{{ notification.title.i18n | translate }}</div>\n<div class=\"message\">\n  <span>{{ notification?.i18n | translate }}</span>\n  <a class=\"link\" *ngIf=\"notification?.link\" (click)=\"handleLinkClick()\">{{ notification.link.i18n | translate }}</a>\n</div>\n", styles: [":host{position:relative;z-index:9999!important;display:block;width:100%;padding:1rem 2rem .5rem 2.75rem;border-width:.0625rem;border-style:solid;border-left-width:.25rem;margin-bottom:.5rem;background:#fff;box-shadow:0 0 .625rem #979797;font-size:.875rem;gap:.5rem;line-height:1rem}:host.qd-notification-info{border-color:#069}:host.qd-notification-info .icon,:host.qd-notification-info .title{color:#069}:host.qd-notification-warning{border-color:#ff9b00}:host.qd-notification-warning .icon,:host.qd-notification-warning .title{color:#ff9b00}:host.qd-notification-critical{border-color:#c70023}:host.qd-notification-critical .icon,:host.qd-notification-critical .title{color:#c70023}:host.qd-notification-success{border-color:#00813a}:host.qd-notification-success .icon,:host.qd-notification-success .title{color:#00813a}:host .icon{position:absolute;top:.9375rem;left:1rem;font-size:1.25rem}:host .closer{position:absolute;top:1rem;right:.75rem;color:#171717;cursor:pointer;font-size:.8125rem;font-weight:600}:host .title{margin-bottom:.375rem;font-weight:500}:host .message{margin-bottom:.25rem;white-space:pre-wrap}:host .link{margin-bottom:.375rem;margin-left:.375rem;color:#069;cursor:pointer}:host .link:hover{text-decoration:underline}:host:host-context(qd-snackbar) .link{display:block;margin-top:.375rem;margin-left:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdNotificationComponent, decorators: [{
             type: Component,
@@ -16805,7 +16855,7 @@ class QdButtonStackButtonComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdButtonStackButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdButtonStackButtonComponent, isStandalone: false, selector: "button[qd-button-stack], button[qdButtonStack]", inputs: { disabled: "disabled", completed: "completed" }, host: { properties: { "class.qd-button-stack__button--completed": "this.hasCompleted" }, classAttribute: "qd-button-stack__button" }, ngImport: i0, template: "<ng-content></ng-content>\n\n<span #qdIcon><ng-content select=\"qd-icon\"></ng-content></span>\n\n<ng-container *ngIf=\"!qdIcon.hasChildNodes()\">\n  <span *ngIf=\"!completed\"><qd-icon [icon]=\"'arrowRight'\"></qd-icon></span>\n  <span *ngIf=\"completed\"><qd-icon [icon]=\"'checkmark'\"></qd-icon></span>\n</ng-container>\n", styles: [".qd-button-stack__button{color:#171717;font-size:14px;font-weight:500;line-height:20px;display:flex;width:100%;height:1.75rem;align-items:center;padding:0;margin-bottom:.25rem;background:none;color:#069}.qd-button-stack__button:hover,.qd-button-stack__button:active,.qd-button-stack__button:hover .qd-icon,.qd-button-stack__button:active .qd-icon{color:#14516f}.qd-button-stack__button span{order:-1}.qd-button-stack__button .qd-icon{display:flex;align-items:center;margin-right:.75rem;margin-left:.75rem;color:#069;transform:translateY(-.0625rem)}.qd-button-stack__button[disabled]{color:#979797;cursor:default}.qd-button-stack__button[disabled] .qd-icon{color:#979797}.qd-button-stack__button--completed{background:#f5f5f5;color:#757575}.qd-button-stack__button--completed .qd-icon{color:#00813a}.qd-button-stack__button--completed:hover,.qd-button-stack__button--completed:active{color:#757575}.qd-button-stack__button--completed:hover .qd-icon,.qd-button-stack__button--completed:active .qd-icon{color:#00813a}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdButtonStackButtonComponent, isStandalone: false, selector: "button[qd-button-stack], button[qdButtonStack]", inputs: { disabled: "disabled", completed: "completed" }, host: { properties: { "class.qd-button-stack__button--completed": "this.hasCompleted" }, classAttribute: "qd-button-stack__button" }, ngImport: i0, template: "<ng-content></ng-content>\n\n<span #qdIcon><ng-content select=\"qd-icon\"></ng-content></span>\n\n<ng-container *ngIf=\"!qdIcon.hasChildNodes()\">\n  <span *ngIf=\"!completed\"><qd-icon [icon]=\"'arrowRight'\"></qd-icon></span>\n  <span *ngIf=\"completed\"><qd-icon [icon]=\"'checkmark'\"></qd-icon></span>\n</ng-container>\n", styles: [".qd-button-stack__button{color:#171717;font-size:14px;font-weight:500;line-height:20px;display:flex;width:100%;height:1.75rem;align-items:center;padding:0;margin-bottom:.25rem;background:none;color:#069}.qd-button-stack__button:hover,.qd-button-stack__button:active,.qd-button-stack__button:hover .qd-icon,.qd-button-stack__button:active .qd-icon{color:#14516f}.qd-button-stack__button span{order:-1}.qd-button-stack__button .qd-icon{display:flex;align-items:center;margin-right:.75rem;margin-left:.75rem;color:#069;transform:translateY(-.0625rem)}.qd-button-stack__button[disabled]{color:#979797;cursor:default}.qd-button-stack__button[disabled] .qd-icon{color:#979797}.qd-button-stack__button--completed{background:#f5f5f5;color:#757575}.qd-button-stack__button--completed .qd-icon{color:#00813a}.qd-button-stack__button--completed:hover,.qd-button-stack__button--completed:active{color:#757575}.qd-button-stack__button--completed:hover .qd-icon,.qd-button-stack__button--completed:active .qd-icon{color:#00813a}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdButtonStackButtonComponent, decorators: [{
             type: Component,
@@ -16900,7 +16950,7 @@ class QdMenuButtonComponent {
         return this.config?.actions?.some(action => !action.isHidden) ?? false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMenuButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdMenuButtonComponent, isStandalone: false, selector: "button[qdMenuButton], a[qdMenuButton]", inputs: { config: ["qdMenuButton", "config"], dataTestId: ["data-test-id", "dataTestId"], autoSize: "autoSize" }, host: { properties: { "attr.class": "classes" } }, ngImport: i0, template: "<ng-container *ngIf=\"qdButtonGhost\">\n  <button\n    qdButton\n    qdButtonGhost\n    [qdPopoverOnClick]=\"menu\"\n    [qdPopoverAutoSize]=\"{ width: true }\"\n    [qdPopoverMinWidth]=\"200\"\n    [qdPopoverMaxWidth]=\"300\"\n    [disabled]=\"config?.isDisabled || !hasUnhiddenActions()\"\n    (opened)=\"isOpen = true\"\n    (closed)=\"isOpen = false\"\n    [class.open]=\"isOpen\"\n  >\n    <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n  </button>\n</ng-container>\n\n<ng-container *ngIf=\"!qdButtonGhost\">\n  <button\n    qdButton\n    [qdPopoverOnClick]=\"menu\"\n    [qdPopoverAutoSize]=\"{ width: autoSize }\"\n    [qdPopoverMinWidth]=\"200\"\n    [qdPopoverMaxWidth]=\"300\"\n    [disabled]=\"config?.isDisabled || !hasUnhiddenActions()\"\n    (opened)=\"isOpen = true\"\n    (closed)=\"isOpen = false\"\n    [class.open]=\"isOpen\"\n  >\n    <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n  </button>\n</ng-container>\n\n<ng-template #menu>\n  <ng-container *ngFor=\"let action of config?.actions\">\n    <button\n      class=\"entry\"\n      *ngIf=\"!action.isHidden\"\n      (click)=\"action.handler()\"\n      [disabled]=\"action.isDisabled\"\n      [attr.data-test-id]=\"dataTestId + 'menu-action'\"\n      qdTruncatedText\n    >\n      {{ action.label.i18n | translate }}\n    </button>\n  </ng-container>\n</ng-template>\n\n<ng-template #buttonContent>\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n  <qd-icon class=\"open-indicator\" [icon]=\"'ctrlDown'\"></qd-icon>\n</ng-template>\n", styles: [":host{padding:0}@media (max-width: 959.98px){:host.only-icon-on-small-viewport button{padding:.875rem}:host.only-icon-on-small-viewport .qd-icon{margin:0;font-size:1.125rem}:host.only-icon-on-small-viewport .content{display:none}}button[qd-button].open{background-color:#14516f}button.entry{display:block;overflow:hidden;width:100%;min-height:2.25rem;padding:0 1rem;background:#fff0;text-align:left;text-overflow:ellipsis;white-space:nowrap;color:inherit;font-size:.875rem;font-weight:400;line-height:1.3125rem}button.entry:hover{background-color:#f2f7fa}button.entry:hover[disabled]{background:#fff0;cursor:default}button.entry[disabled]{color:#b4b4b4;cursor:default}button.entry[disabled]:hover{background-color:#fff0}.open-indicator{margin-left:.5rem}qd-icon{font-size:.875rem}.content{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: 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: i3.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdMenuButtonComponent, isStandalone: false, selector: "button[qdMenuButton], a[qdMenuButton]", inputs: { config: ["qdMenuButton", "config"], dataTestId: ["data-test-id", "dataTestId"], autoSize: "autoSize" }, host: { properties: { "attr.class": "classes" } }, ngImport: i0, template: "<ng-container *ngIf=\"qdButtonGhost\">\n  <button\n    qdButton\n    qdButtonGhost\n    [qdPopoverOnClick]=\"menu\"\n    [qdPopoverAutoSize]=\"{ width: true }\"\n    [qdPopoverMinWidth]=\"200\"\n    [qdPopoverMaxWidth]=\"300\"\n    [disabled]=\"config?.isDisabled || !hasUnhiddenActions()\"\n    (opened)=\"isOpen = true\"\n    (closed)=\"isOpen = false\"\n    [class.open]=\"isOpen\"\n  >\n    <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n  </button>\n</ng-container>\n\n<ng-container *ngIf=\"!qdButtonGhost\">\n  <button\n    qdButton\n    [qdPopoverOnClick]=\"menu\"\n    [qdPopoverAutoSize]=\"{ width: autoSize }\"\n    [qdPopoverMinWidth]=\"200\"\n    [qdPopoverMaxWidth]=\"300\"\n    [disabled]=\"config?.isDisabled || !hasUnhiddenActions()\"\n    (opened)=\"isOpen = true\"\n    (closed)=\"isOpen = false\"\n    [class.open]=\"isOpen\"\n  >\n    <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n  </button>\n</ng-container>\n\n<ng-template #menu>\n  <ng-container *ngFor=\"let action of config?.actions\">\n    <button\n      class=\"entry\"\n      *ngIf=\"!action.isHidden\"\n      (click)=\"action.handler()\"\n      [disabled]=\"action.isDisabled\"\n      [attr.data-test-id]=\"dataTestId + 'menu-action'\"\n      qdTruncatedText\n    >\n      {{ action.label.i18n | translate }}\n    </button>\n  </ng-container>\n</ng-template>\n\n<ng-template #buttonContent>\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n  <qd-icon class=\"open-indicator\" [icon]=\"'ctrlDown'\"></qd-icon>\n</ng-template>\n", styles: [":host{padding:0}@media (max-width: 959.98px){:host.only-icon-on-small-viewport button{padding:.875rem}:host.only-icon-on-small-viewport .qd-icon{margin:0;font-size:1.125rem}:host.only-icon-on-small-viewport .content{display:none}}button[qd-button].open{background-color:#14516f}button.entry{display:block;overflow:hidden;width:100%;min-height:2.25rem;padding:0 1rem;background:#fff0;text-align:left;text-overflow:ellipsis;white-space:nowrap;color:inherit;font-size:.875rem;font-weight:400;line-height:1.3125rem}button.entry:hover{background-color:#f2f7fa}button.entry:hover[disabled]{background:#fff0;cursor:default}button.entry[disabled]{color:#b4b4b4;cursor:default}button.entry[disabled]:hover{background-color:#fff0}.open-indicator{margin-left:.5rem}qd-icon{font-size:.875rem}.content{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: 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: i3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMenuButtonComponent, decorators: [{
             type: Component,
@@ -18027,7 +18077,7 @@ class QdContactCardMenuComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdContactCardMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdContactCardMenuComponent, isStandalone: false, selector: "qd-contact-card-menu", inputs: { contactData: "contactData", actions: "actions", testId: ["data-test-id", "testId"] }, ngImport: i0, template: "<ng-container *ngIf=\"actions$ | async as actions\">\n  <qd-icon\n    *ngIf=\"actions.length > 0\"\n    icon=\"overflowMenuVertical\"\n    class=\"menu-opener\"\n    [attr.data-test-id]=\"testId + '-opener'\"\n    [qdPopoverOnClick]=\"menu\"\n    [qdPopoverAutoSize]=\"{ width: true }\"\n    [qdPopoverMinWidth]=\"200\"\n    [qdPopoverMaxWidth]=\"300\"\n  ></qd-icon>\n\n  <ng-template #menu>\n    <ng-container *ngFor=\"let action of actions$ | async\">\n      <button\n        class=\"menu-entry\"\n        (click)=\"action.handler(contactData)\"\n        [disabled]=\"action.isDisabled\"\n        [attr.data-test-id]=\"testId + '-action'\"\n      >\n        {{ action.label.i18n | translate }}\n      </button>\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [":host .menu-opener{position:absolute;top:1.5625rem;right:1.5rem;cursor:pointer;font-size:1.5rem;font-weight:700}button.menu-entry{display:block;overflow:hidden;width:100%;min-height:2.25rem;padding:0 1rem;background:#fff0;text-align:left;text-overflow:ellipsis;white-space:nowrap;color:inherit;font-size:.875rem;font-weight:400;line-height:1.3125rem}button.menu-entry:hover{background-color:#f2f7fa}button.menu-entry:hover[disabled]{background:#fff0;cursor:default}button.menu-entry[disabled]{color:#b4b4b4;cursor:default}button.menu-entry[disabled]:hover{background-color:#fff0}\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: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdContactCardMenuComponent, isStandalone: false, selector: "qd-contact-card-menu", inputs: { contactData: "contactData", actions: "actions", testId: ["data-test-id", "testId"] }, ngImport: i0, template: "<ng-container *ngIf=\"actions$ | async as actions\">\n  <qd-icon\n    *ngIf=\"actions.length > 0\"\n    icon=\"overflowMenuVertical\"\n    class=\"menu-opener\"\n    [attr.data-test-id]=\"testId + '-opener'\"\n    [qdPopoverOnClick]=\"menu\"\n    [qdPopoverAutoSize]=\"{ width: true }\"\n    [qdPopoverMinWidth]=\"200\"\n    [qdPopoverMaxWidth]=\"300\"\n  ></qd-icon>\n\n  <ng-template #menu>\n    <ng-container *ngFor=\"let action of actions$ | async\">\n      <button\n        class=\"menu-entry\"\n        (click)=\"action.handler(contactData)\"\n        [disabled]=\"action.isDisabled\"\n        [attr.data-test-id]=\"testId + '-action'\"\n      >\n        {{ action.label.i18n | translate }}\n      </button>\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [":host .menu-opener{position:absolute;top:1.5625rem;right:1.5rem;cursor:pointer;font-size:1.5rem;font-weight:700}button.menu-entry{display:block;overflow:hidden;width:100%;min-height:2.25rem;padding:0 1rem;background:#fff0;text-align:left;text-overflow:ellipsis;white-space:nowrap;color:inherit;font-size:.875rem;font-weight:400;line-height:1.3125rem}button.menu-entry:hover{background-color:#f2f7fa}button.menu-entry:hover[disabled]{background:#fff0;cursor:default}button.menu-entry[disabled]{color:#b4b4b4;cursor:default}button.menu-entry[disabled]:hover{background-color:#fff0}\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: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdContactCardMenuComponent, decorators: [{
             type: Component,
@@ -18414,7 +18464,7 @@ class QdDialogRecordStepperComponent {
         this.itemsCount = this.data.views?.length || 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDialogRecordStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDialogRecordStepperComponent, isStandalone: false, selector: "qd-dialog-record-stepper", inputs: { data: "data" }, outputs: { changeStep: "changeStep" }, host: { properties: { "class.first-item": "this.firstItem", "class.last-item": "this.lastItem" }, classAttribute: "qd-dialog-record-stepper " }, ngImport: i0, template: "<qd-icon icon=\"arrowLeft\" class=\"previous\" (click)=\"previous()\"></qd-icon>\n<span class=\"range\">{{ currentIndex + 1 }}/{{ itemsCount }}</span>\n<qd-icon icon=\"arrowRight\" class=\"next\" (click)=\"next()\"></qd-icon>\n", styles: [".qd-dialog-record-stepper{display:flex}.qd-dialog-record-stepper .previous,.qd-dialog-record-stepper .next{display:flex;align-items:center;margin-right:.75rem;color:#757575;font-size:1.125rem}.qd-dialog-record-stepper .previous:hover,.qd-dialog-record-stepper .next:hover{color:#171717;cursor:pointer}.qd-dialog-record-stepper .previous .qd-icon,.qd-dialog-record-stepper .next .qd-icon{font-size:1.4rem}.qd-dialog-record-stepper.last-item .next,.qd-dialog-record-stepper.first-item .previous{color:#d5d5d5;cursor:default}.qd-dialog-record-stepper .range{display:flex;align-items:center;margin-right:.75rem;cursor:default}\n"], dependencies: [{ kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDialogRecordStepperComponent, isStandalone: false, selector: "qd-dialog-record-stepper", inputs: { data: "data" }, outputs: { changeStep: "changeStep" }, host: { properties: { "class.first-item": "this.firstItem", "class.last-item": "this.lastItem" }, classAttribute: "qd-dialog-record-stepper " }, ngImport: i0, template: "<qd-icon icon=\"arrowLeft\" class=\"previous\" (click)=\"previous()\"></qd-icon>\n<span class=\"range\">{{ currentIndex + 1 }}/{{ itemsCount }}</span>\n<qd-icon icon=\"arrowRight\" class=\"next\" (click)=\"next()\"></qd-icon>\n", styles: [".qd-dialog-record-stepper{display:flex}.qd-dialog-record-stepper .previous,.qd-dialog-record-stepper .next{display:flex;align-items:center;margin-right:.75rem;color:#757575;font-size:1.125rem}.qd-dialog-record-stepper .previous:hover,.qd-dialog-record-stepper .next:hover{color:#171717;cursor:pointer}.qd-dialog-record-stepper .previous .qd-icon,.qd-dialog-record-stepper .next .qd-icon{font-size:1.4rem}.qd-dialog-record-stepper.last-item .next,.qd-dialog-record-stepper.first-item .previous{color:#d5d5d5;cursor:default}.qd-dialog-record-stepper .range{display:flex;align-items:center;margin-right:.75rem;cursor:default}\n"], dependencies: [{ kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDialogRecordStepperComponent, decorators: [{
             type: Component,
@@ -18622,7 +18672,7 @@ class QdDialogConfirmationComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDialogConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDialogConfirmationComponent, isStandalone: false, selector: "qd-dialog-confirmation", inputs: { config: "config", testId: ["data-test-id", "testId"] }, ngImport: i0, template: "<qd-dialog [attr.data-test-id]=\"testId\">\n  <div class=\"loading-overlay\" *ngIf=\"isLoading\">\n    <qd-spinner></qd-spinner>\n  </div>\n\n  <div class=\"headline\" *ngIf=\"isInfoState\">{{ config.info.headline.i18n | translate }}</div>\n\n  <div class=\"headline\" *ngIf=\"isSuccessState\">\n    {{ (config.success.headline.i18n | translate) || (config.info.headline.i18n | translate) }}\n  </div>\n\n  <div class=\"headline\" *ngIf=\"isErrorState && config.error.headline.i18n\">\n    {{ config.error.headline.i18n | translate }}\n  </div>\n\n  <div class=\"info\">\n    <ng-container *ngIf=\"isInfoState\"> {{ config.info.info.i18n | translate }} </ng-container>\n\n    <ng-container *ngIf=\"isSuccessState\">\n      <qd-icon class=\"success\" [icon]=\"'checkCircleSolid'\"></qd-icon>\n      <span>{{ (config.success.info.i18n | translate) || (config.info.info.i18n | translate) }} </span>\n    </ng-container>\n\n    <ng-container *ngIf=\"isErrorState && config.error?.info?.i18n\">\n      <qd-icon class=\"error\" [icon]=\"'timesCircleSolid'\"></qd-icon>\n      <span>{{ config.error?.info?.i18n | translate }}</span>\n    </ng-container>\n  </div>\n\n  <div class=\"confirm-content\">\n    <ng-container *ngIf=\"isInfoState\">\n      <ng-content select=\"[qdDialogConfirmInfo]\"></ng-content>\n      <qd-checkboxes\n        [attr.data-test-id]=\"testId + '-checkbox'\"\n        *ngIf=\"useCheckbox\"\n        [config]=\"checkboxConfig\"\n        [(values)]=\"confirmChecked\"\n      ></qd-checkboxes>\n    </ng-container>\n\n    <ng-container *ngIf=\"isSuccessState\">\n      <ng-content select=\"[qdDialogConfirmSuccess]\"></ng-content>\n    </ng-container>\n\n    <ng-container *ngIf=\"isErrorState\">\n      <ng-content select=\"[qdDialogConfirmError]\"></ng-content>\n    </ng-container>\n\n    <qd-notifications [context]=\"notificationContext\"></qd-notifications>\n  </div>\n\n  <qd-dialog-action>\n    <ng-container *ngIf=\"isInfoState\">\n      <button qdButton qdButtonGhost (click)=\"close()\" [disabled]=\"isLoading\">\n        {{ config.buttons.cancel.i18n | translate }}\n      </button>\n\n      <button qdButton color=\"primary\" (click)=\"confirm()\" [disabled]=\"(useCheckbox && !isConfirmed) || isLoading\">\n        {{ config.buttons.next.i18n | translate }}\n      </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"isSuccessState\">\n      <button qdButton color=\"primary\" (click)=\"submit()\">\n        {{ (config.buttons.success?.i18n | translate) || (config.buttons.next.i18n | translate) }}\n      </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"isErrorState\">\n      <button qdButton color=\"primary\" (click)=\"submit()\">\n        {{ (config.buttons.error?.i18n | translate) || (config.buttons.next.i18n | translate) }}\n      </button>\n    </ng-container>\n  </qd-dialog-action>\n</qd-dialog>\n", styles: [":host .headline{color:#171717;font-size:1rem;font-weight:700;line-height:1.5rem;margin-bottom:.75rem}:host .info{color:#171717;font-size:1rem;font-weight:400;line-height:1.5rem;display:flex}:host .info ::ng-deep .qd-icon{width:.875rem;margin-right:.75rem;font-size:1.25rem;font-weight:300}:host .info ::ng-deep .qd-icon.success{color:#00813a}:host .info ::ng-deep .qd-icon.error{color:#c70023}:host .loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: QdCheckboxesComponent, selector: "qd-checkboxes", inputs: ["formControlName", "values", "config", "data-test-id"], outputs: ["valuesChange", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "component", type: QdNotificationsComponent, selector: "qd-notifications", inputs: ["context"] }, { kind: "component", type: QdSpinnerComponent, selector: "qd-spinner" }, { kind: "component", type: QdDialogActionComponent, selector: "qd-dialog-action" }, { kind: "component", type: QdDialogComponent, selector: "qd-dialog" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDialogConfirmationComponent, isStandalone: false, selector: "qd-dialog-confirmation", inputs: { config: "config", testId: ["data-test-id", "testId"] }, ngImport: i0, template: "<qd-dialog [attr.data-test-id]=\"testId\">\n  <div class=\"loading-overlay\" *ngIf=\"isLoading\">\n    <qd-spinner></qd-spinner>\n  </div>\n\n  <div class=\"headline\" *ngIf=\"isInfoState\">{{ config.info.headline.i18n | translate }}</div>\n\n  <div class=\"headline\" *ngIf=\"isSuccessState\">\n    {{ (config.success.headline.i18n | translate) || (config.info.headline.i18n | translate) }}\n  </div>\n\n  <div class=\"headline\" *ngIf=\"isErrorState && config.error.headline.i18n\">\n    {{ config.error.headline.i18n | translate }}\n  </div>\n\n  <div class=\"info\">\n    <ng-container *ngIf=\"isInfoState\"> {{ config.info.info.i18n | translate }} </ng-container>\n\n    <ng-container *ngIf=\"isSuccessState\">\n      <qd-icon class=\"success\" [icon]=\"'checkCircleSolid'\"></qd-icon>\n      <span>{{ (config.success.info.i18n | translate) || (config.info.info.i18n | translate) }} </span>\n    </ng-container>\n\n    <ng-container *ngIf=\"isErrorState && config.error?.info?.i18n\">\n      <qd-icon class=\"error\" [icon]=\"'timesCircleSolid'\"></qd-icon>\n      <span>{{ config.error?.info?.i18n | translate }}</span>\n    </ng-container>\n  </div>\n\n  <div class=\"confirm-content\">\n    <ng-container *ngIf=\"isInfoState\">\n      <ng-content select=\"[qdDialogConfirmInfo]\"></ng-content>\n      <qd-checkboxes\n        [attr.data-test-id]=\"testId + '-checkbox'\"\n        *ngIf=\"useCheckbox\"\n        [config]=\"checkboxConfig\"\n        [(values)]=\"confirmChecked\"\n      ></qd-checkboxes>\n    </ng-container>\n\n    <ng-container *ngIf=\"isSuccessState\">\n      <ng-content select=\"[qdDialogConfirmSuccess]\"></ng-content>\n    </ng-container>\n\n    <ng-container *ngIf=\"isErrorState\">\n      <ng-content select=\"[qdDialogConfirmError]\"></ng-content>\n    </ng-container>\n\n    <qd-notifications [context]=\"notificationContext\"></qd-notifications>\n  </div>\n\n  <qd-dialog-action>\n    <ng-container *ngIf=\"isInfoState\">\n      <button qdButton qdButtonGhost (click)=\"close()\" [disabled]=\"isLoading\">\n        {{ config.buttons.cancel.i18n | translate }}\n      </button>\n\n      <button qdButton color=\"primary\" (click)=\"confirm()\" [disabled]=\"(useCheckbox && !isConfirmed) || isLoading\">\n        {{ config.buttons.next.i18n | translate }}\n      </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"isSuccessState\">\n      <button qdButton color=\"primary\" (click)=\"submit()\">\n        {{ (config.buttons.success?.i18n | translate) || (config.buttons.next.i18n | translate) }}\n      </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"isErrorState\">\n      <button qdButton color=\"primary\" (click)=\"submit()\">\n        {{ (config.buttons.error?.i18n | translate) || (config.buttons.next.i18n | translate) }}\n      </button>\n    </ng-container>\n  </qd-dialog-action>\n</qd-dialog>\n", styles: [":host .headline{color:#171717;font-size:1rem;font-weight:700;line-height:1.5rem;margin-bottom:.75rem}:host .info{color:#171717;font-size:1rem;font-weight:400;line-height:1.5rem;display:flex}:host .info ::ng-deep .qd-icon{width:.875rem;margin-right:.75rem;font-size:1.25rem;font-weight:300}:host .info ::ng-deep .qd-icon.success{color:#00813a}:host .info ::ng-deep .qd-icon.error{color:#c70023}:host .loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: QdCheckboxesComponent, selector: "qd-checkboxes", inputs: ["formControlName", "values", "config", "data-test-id"], outputs: ["valuesChange", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdNotificationsComponent, selector: "qd-notifications", inputs: ["context"] }, { kind: "component", type: QdSpinnerComponent, selector: "qd-spinner" }, { kind: "component", type: QdDialogActionComponent, selector: "qd-dialog-action" }, { kind: "component", type: QdDialogComponent, selector: "qd-dialog" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDialogConfirmationComponent, decorators: [{
             type: Component,
@@ -19486,7 +19536,7 @@ class QdFileCollectorItemToolsComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFileCollectorItemToolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFileCollectorItemToolsComponent, isStandalone: false, selector: "qd-file-collector-item-tools", inputs: { progress: "progress", collectedFile: "collectedFile", error: "error", readonly: "readonly", viewonly: "viewonly", downloadFilesWithHttpClient: "downloadFilesWithHttpClient", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.dataTestId" } }, ngImport: i0, template: "<a\n  (click)=\"downloadFile($event)\"\n  [href]=\"collectedFile.downloadUrl\"\n  target=\"_blank\"\n  [ngClass]=\"{ hidden: !collectedFile.downloadUrl }\"\n  [attr.data-test-id]=\"testId + '-download'\"\n>\n  <qd-icon icon=\"dataDownload\"></qd-icon>\n</a>\n\n<qd-icon\n  icon=\"trash\"\n  (click)=\"deleteFile()\"\n  *ngIf=\"!readonly && !viewonly\"\n  [attr.data-test-id]=\"testId + '-delete'\"\n></qd-icon>\n", styles: [":host qd-icon{color:#454545;cursor:pointer;font-size:1rem}:host qd-icon:hover,:host qd-icon:focus{color:#171717}:host *+*{margin-left:.5rem}:host .hidden{cursor:none;pointer-events:none;visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFileCollectorItemToolsComponent, isStandalone: false, selector: "qd-file-collector-item-tools", inputs: { progress: "progress", collectedFile: "collectedFile", error: "error", readonly: "readonly", viewonly: "viewonly", downloadFilesWithHttpClient: "downloadFilesWithHttpClient", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.dataTestId" } }, ngImport: i0, template: "<a\n  (click)=\"downloadFile($event)\"\n  [href]=\"collectedFile.downloadUrl\"\n  target=\"_blank\"\n  [ngClass]=\"{ hidden: !collectedFile.downloadUrl }\"\n  [attr.data-test-id]=\"testId + '-download'\"\n>\n  <qd-icon icon=\"dataDownload\"></qd-icon>\n</a>\n\n<qd-icon\n  icon=\"trash\"\n  (click)=\"deleteFile()\"\n  *ngIf=\"!readonly && !viewonly\"\n  [attr.data-test-id]=\"testId + '-delete'\"\n></qd-icon>\n", styles: [":host qd-icon{color:#454545;cursor:pointer;font-size:1rem}:host qd-icon:hover,:host qd-icon:focus{color:#171717}:host *+*{margin-left:.5rem}:host .hidden{cursor:none;pointer-events:none;visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFileCollectorItemToolsComponent, decorators: [{
             type: Component,
@@ -20756,11 +20806,11 @@ class QdFilterItemFreeTextComponent {
         this.filterService.updateItem(this.filterId, this.categoryIndex, this.itemIndex, '');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemFreeTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemFreeTextComponent, isStandalone: false, selector: "qd-filter-item-free-text", inputs: { filterId: "filterId", isInstantFiltering: "isInstantFiltering", categoryIndex: "categoryIndex", itemIndex: "itemIndex", testId: ["data-test-id", "testId"] }, outputs: { enterClick: "enterClick" }, host: { properties: { "attr.data-test-id": "this.dataTestId" }, classAttribute: "qd-filter__item-free-text" }, ngImport: i0, template: "<qd-input\n  [value]=\"item.item\"\n  (valueChange)=\"!isInstantFiltering ? handleValueChange($event) : null\"\n  (enterClick)=\"handleEnter($event)\"\n  [config]=\"{ placeholder: { i18n: i18n } }\"\n  [data-test-id]=\"testId\"\n></qd-input>\n", styles: [":host ::ng-deep qd-input{width:10.25rem;max-width:12.5rem;height:2.125rem;margin-bottom:0!important}:host ::ng-deep qd-input .qd-form-label,:host ::ng-deep qd-input .qd-form-hint{display:none}:host ::ng-deep qd-input .qd-form-label,:host ::ng-deep qd-input .qd-input-input,:host ::ng-deep qd-input .qd-form-hint{margin-bottom:0!important}:host ::ng-deep qd-input .qd-input-input{height:2.125rem!important;border-color:transparent!important}:host ::ng-deep qd-input .qd-input-input input::placeholder{color:#757575!important}\n"], dependencies: [{ kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemFreeTextComponent, isStandalone: false, selector: "qd-filter-item-free-text", inputs: { filterId: "filterId", isInstantFiltering: "isInstantFiltering", categoryIndex: "categoryIndex", itemIndex: "itemIndex", testId: ["data-test-id", "testId"] }, outputs: { enterClick: "enterClick" }, host: { properties: { "attr.data-test-id": "this.dataTestId" }, classAttribute: "qd-filter__item-free-text" }, ngImport: i0, template: "<qd-input\n  [value]=\"item.item\"\n  (valueChange)=\"!isInstantFiltering ? handleValueChange($event) : null\"\n  (enterClick)=\"handleEnter($event)\"\n  [config]=\"{ placeholder: { i18n: i18n }, viewonly: false }\"\n  [data-test-id]=\"testId\"\n></qd-input>\n", styles: [":host ::ng-deep qd-input{width:10.25rem;max-width:12.5rem;height:2.125rem;margin-bottom:0!important}:host ::ng-deep qd-input .qd-form-label,:host ::ng-deep qd-input .qd-form-hint{display:none}:host ::ng-deep qd-input .qd-form-label,:host ::ng-deep qd-input .qd-input-input,:host ::ng-deep qd-input .qd-form-hint{margin-bottom:0!important}:host ::ng-deep qd-input .qd-input-input{height:2.125rem!important;border-color:transparent!important}:host ::ng-deep qd-input .qd-input-input input::placeholder{color:#757575!important}\n"], dependencies: [{ kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemFreeTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-filter-item-free-text', host: { class: 'qd-filter__item-free-text' }, standalone: false, template: "<qd-input\n  [value]=\"item.item\"\n  (valueChange)=\"!isInstantFiltering ? handleValueChange($event) : null\"\n  (enterClick)=\"handleEnter($event)\"\n  [config]=\"{ placeholder: { i18n: i18n } }\"\n  [data-test-id]=\"testId\"\n></qd-input>\n", styles: [":host ::ng-deep qd-input{width:10.25rem;max-width:12.5rem;height:2.125rem;margin-bottom:0!important}:host ::ng-deep qd-input .qd-form-label,:host ::ng-deep qd-input .qd-form-hint{display:none}:host ::ng-deep qd-input .qd-form-label,:host ::ng-deep qd-input .qd-input-input,:host ::ng-deep qd-input .qd-form-hint{margin-bottom:0!important}:host ::ng-deep qd-input .qd-input-input{height:2.125rem!important;border-color:transparent!important}:host ::ng-deep qd-input .qd-input-input input::placeholder{color:#757575!important}\n"] }]
+            args: [{ selector: 'qd-filter-item-free-text', host: { class: 'qd-filter__item-free-text' }, standalone: false, template: "<qd-input\n  [value]=\"item.item\"\n  (valueChange)=\"!isInstantFiltering ? handleValueChange($event) : null\"\n  (enterClick)=\"handleEnter($event)\"\n  [config]=\"{ placeholder: { i18n: i18n }, viewonly: false }\"\n  [data-test-id]=\"testId\"\n></qd-input>\n", styles: [":host ::ng-deep qd-input{width:10.25rem;max-width:12.5rem;height:2.125rem;margin-bottom:0!important}:host ::ng-deep qd-input .qd-form-label,:host ::ng-deep qd-input .qd-form-hint{display:none}:host ::ng-deep qd-input .qd-form-label,:host ::ng-deep qd-input .qd-input-input,:host ::ng-deep qd-input .qd-form-hint{margin-bottom:0!important}:host ::ng-deep qd-input .qd-input-input{height:2.125rem!important;border-color:transparent!important}:host ::ng-deep qd-input .qd-input-input input::placeholder{color:#757575!important}\n"] }]
         }], propDecorators: { filterId: [{
                 type: Input
             }], isInstantFiltering: [{
@@ -21301,7 +21351,7 @@ class QdFilterItemSelectCategoryComponent {
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemSelectCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemSelectCategoryComponent, isStandalone: false, selector: "qd-filter-category-select", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-filter__category-select" }, viewQueries: [{ propertyName: "popoverDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }], ngImport: i0, template: "<div\n  *ngIf=\"showSelectButton$ | async\"\n  [class]=\"buttonClassName\"\n  [qdPopoverOnClick]=\"filterLayer\"\n  [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n  [qdPopoverStopPropagation]=\"true\"\n  [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n  [positionStrategy]=\"positionStrategy\"\n  (opened)=\"onLayerOpened()\"\n  (closed)=\"onLayerClosed()\"\n  [attr.data-test-id]=\"testId + '-select-button'\"\n>\n  <qd-icon\n    *ngIf=\"!open\"\n    [icon]=\"'ctrlDown'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--closed'\"\n    [attr.data-test-id]=\"testId + '-closed'\"\n  ></qd-icon>\n  <qd-icon\n    *ngIf=\"open\"\n    [icon]=\"'ctrlTop'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--open'\"\n    [attr.data-test-id]=\"testId + '-opened'\"\n  ></qd-icon>\n\n  <div class=\"qd-filter__category-button-caption\">\n    <span>\n      {{ i18n | translate }}\n    </span>\n  </div>\n\n  <ng-container *ngTemplateOutlet=\"SelectedChip\"></ng-container>\n</div>\n\n<ng-template #filterLayer>\n  <div [class]=\"layerContentClassName\">\n    <qd-icon\n      *ngIf=\"closeButton\"\n      [class]=\"'qd-filter__category-layer-close'\"\n      (click)=\"closeLayer()\"\n      [icon]=\"'timesLargeLight'\"\n      [attr.data-test-id]=\"testId + '-layer-close'\"\n    ></qd-icon>\n\n    <ng-container [ngSwitch]=\"type\">\n      <ng-container *ngSwitchCase=\"'multiSelect'\">\n        <qd-filter-form-items\n          *ngIf=\"filter\"\n          [inputFilterValue]=\"filterCategoryValue$ | async\"\n          (filterValueChange)=\"changeValue($event)\"\n          [data-test-id]=\"testId\"\n        ></qd-filter-form-items>\n\n        <div class=\"qd-filter__category-layer-items\">\n          <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n            <qd-filter-item-multi-select\n              *ngIf=\"!item.hidden\"\n              [categoryIndex]=\"categoryIndex\"\n              [itemIndex]=\"itemIndex\"\n              [filterId]=\"filterId\"\n              [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n            >\n            </qd-filter-item-multi-select>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'singleSelect'\">\n        <qd-filter-form-items\n          *ngIf=\"filter\"\n          [inputFilterValue]=\"filterCategoryValue$ | async\"\n          (filterValueChange)=\"changeValue($event)\"\n          [data-test-id]=\"testId\"\n        ></qd-filter-form-items>\n\n        <div class=\"qd-filter__category-layer-items\">\n          <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n            <qd-filter-item-single-select\n              *ngIf=\"!item.hidden\"\n              [categoryIndex]=\"categoryIndex\"\n              [itemIndex]=\"itemIndex\"\n              (closeEventEmitter)=\"closeLayer()\"\n              [filterId]=\"filterId\"\n              [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n            >\n            </qd-filter-item-single-select>\n          </ng-container>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #SelectedChip>\n  <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n    <!-- TODO: Add tooltip-->\n    <qd-chip\n      *ngIf=\"item.active\"\n      [state]=\"'filter'\"\n      [close]=\"true\"\n      (closeClickEmitter)=\"close($event)\"\n      [data]=\"itemIndex\"\n      [data-test-id]=\"testId + '-selected-chip-' + item.item\"\n      >{{ item.i18n | translate }}</qd-chip\n    >\n  </ng-container>\n</ng-template>\n", styles: ["::ng-deep .qd-filter__category-layer{display:flex;overflow:hidden;min-width:16.25rem;max-width:56.25rem;height:100%;flex-direction:column;padding:1rem 0 0;border:.0625rem solid rgb(151,151,151);background:#fff;box-shadow:#d5d5d5 .125rem .25rem .4375rem}::ng-deep .qd-filter__category-layer .qd-filter-form-items__filter{flex-shrink:0;margin-bottom:0}::ng-deep .qd-filter__category-layer .qd-checkbox__label{display:flex;height:2.5rem}::ng-deep .qd-filter__category-layer .qd-checkbox__indicator,::ng-deep .qd-filter__category-layer .qd-radio-buttons__indicator{transform:translateY(-.0625rem)}::ng-deep .qd-filter__category-layer-items{flex:1;overflow-y:auto}::ng-deep .qd-filter__category-layer-container{position:relative}::ng-deep .qd-filter__category-layer-close{position:absolute;z-index:1;top:1rem;right:1rem;color:#757575;cursor:pointer}::ng-deep .qd-filter__category-layer-close:before{position:absolute;content:\"\";inset:-.5rem}::ng-deep .qd-filter__category-layer-close:hover,::ng-deep .qd-filter__category-layer-close:focus{color:#171717}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdFilterFormItemsComponent, selector: "qd-filter-form-items", inputs: ["inputFilterValue", "data-test-id"], outputs: ["filterValueChange"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdFilterItemMultiSelectComponent, selector: "qd-filter-item-multi-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"] }, { kind: "component", type: QdFilterItemSingleSelectComponent, selector: "qd-filter-item-single-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"], outputs: ["closeEventEmitter"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemSelectCategoryComponent, isStandalone: false, selector: "qd-filter-category-select", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-filter__category-select" }, viewQueries: [{ propertyName: "popoverDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }], ngImport: i0, template: "<div\n  *ngIf=\"showSelectButton$ | async\"\n  [class]=\"buttonClassName\"\n  [qdPopoverOnClick]=\"filterLayer\"\n  [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n  [qdPopoverStopPropagation]=\"true\"\n  [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n  [positionStrategy]=\"positionStrategy\"\n  (opened)=\"onLayerOpened()\"\n  (closed)=\"onLayerClosed()\"\n  [attr.data-test-id]=\"testId + '-select-button'\"\n>\n  <qd-icon\n    *ngIf=\"!open\"\n    [icon]=\"'ctrlDown'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--closed'\"\n    [attr.data-test-id]=\"testId + '-closed'\"\n  ></qd-icon>\n  <qd-icon\n    *ngIf=\"open\"\n    [icon]=\"'ctrlTop'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--open'\"\n    [attr.data-test-id]=\"testId + '-opened'\"\n  ></qd-icon>\n\n  <div class=\"qd-filter__category-button-caption\">\n    <span>\n      {{ i18n | translate }}\n    </span>\n  </div>\n\n  <ng-container *ngTemplateOutlet=\"SelectedChip\"></ng-container>\n</div>\n\n<ng-template #filterLayer>\n  <div [class]=\"layerContentClassName\">\n    <qd-icon\n      *ngIf=\"closeButton\"\n      [class]=\"'qd-filter__category-layer-close'\"\n      (click)=\"closeLayer()\"\n      [icon]=\"'timesLargeLight'\"\n      [attr.data-test-id]=\"testId + '-layer-close'\"\n    ></qd-icon>\n\n    <ng-container [ngSwitch]=\"type\">\n      <ng-container *ngSwitchCase=\"'multiSelect'\">\n        <qd-filter-form-items\n          *ngIf=\"filter\"\n          [inputFilterValue]=\"filterCategoryValue$ | async\"\n          (filterValueChange)=\"changeValue($event)\"\n          [data-test-id]=\"testId\"\n        ></qd-filter-form-items>\n\n        <div class=\"qd-filter__category-layer-items\">\n          <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n            <qd-filter-item-multi-select\n              *ngIf=\"!item.hidden\"\n              [categoryIndex]=\"categoryIndex\"\n              [itemIndex]=\"itemIndex\"\n              [filterId]=\"filterId\"\n              [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n            >\n            </qd-filter-item-multi-select>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'singleSelect'\">\n        <qd-filter-form-items\n          *ngIf=\"filter\"\n          [inputFilterValue]=\"filterCategoryValue$ | async\"\n          (filterValueChange)=\"changeValue($event)\"\n          [data-test-id]=\"testId\"\n        ></qd-filter-form-items>\n\n        <div class=\"qd-filter__category-layer-items\">\n          <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n            <qd-filter-item-single-select\n              *ngIf=\"!item.hidden\"\n              [categoryIndex]=\"categoryIndex\"\n              [itemIndex]=\"itemIndex\"\n              (closeEventEmitter)=\"closeLayer()\"\n              [filterId]=\"filterId\"\n              [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n            >\n            </qd-filter-item-single-select>\n          </ng-container>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #SelectedChip>\n  <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n    <!-- TODO: Add tooltip-->\n    <qd-chip\n      *ngIf=\"item.active\"\n      [state]=\"'filter'\"\n      [close]=\"true\"\n      (closeClickEmitter)=\"close($event)\"\n      [data]=\"itemIndex\"\n      [data-test-id]=\"testId + '-selected-chip-' + item.item\"\n      >{{ item.i18n | translate }}</qd-chip\n    >\n  </ng-container>\n</ng-template>\n", styles: ["::ng-deep .qd-filter__category-layer{display:flex;overflow:hidden;min-width:16.25rem;max-width:56.25rem;height:100%;flex-direction:column;padding:1rem 0 0;border:.0625rem solid rgb(151,151,151);background:#fff;box-shadow:#d5d5d5 .125rem .25rem .4375rem}::ng-deep .qd-filter__category-layer .qd-filter-form-items__filter{flex-shrink:0;margin-bottom:0}::ng-deep .qd-filter__category-layer .qd-checkbox__label{display:flex;height:2.5rem}::ng-deep .qd-filter__category-layer .qd-checkbox__indicator,::ng-deep .qd-filter__category-layer .qd-radio-buttons__indicator{transform:translateY(-.0625rem)}::ng-deep .qd-filter__category-layer-items{flex:1;overflow-y:auto}::ng-deep .qd-filter__category-layer-container{position:relative}::ng-deep .qd-filter__category-layer-close{position:absolute;z-index:1;top:1rem;right:1rem;color:#757575;cursor:pointer}::ng-deep .qd-filter__category-layer-close:before{position:absolute;content:\"\";inset:-.5rem}::ng-deep .qd-filter__category-layer-close:hover,::ng-deep .qd-filter__category-layer-close:focus{color:#171717}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdFilterFormItemsComponent, selector: "qd-filter-form-items", inputs: ["inputFilterValue", "data-test-id"], outputs: ["filterValueChange"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdFilterItemMultiSelectComponent, selector: "qd-filter-item-multi-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"] }, { kind: "component", type: QdFilterItemSingleSelectComponent, selector: "qd-filter-item-single-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"], outputs: ["closeEventEmitter"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemSelectCategoryComponent, decorators: [{
             type: Component,
@@ -22226,7 +22276,7 @@ class QdStatusPairsErrorComponent {
         this.ref.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdStatusPairsErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdStatusPairsErrorComponent, isStandalone: false, selector: "qd-status-pairs-error", host: { classAttribute: "qd-status-pairs__error" }, ngImport: i0, template: "<ng-container *ngIf=\"error\">\n  <qd-icon class=\"qd-status-pairs__error-icon\" [icon]=\"'exclamationCircleSolid'\"></qd-icon>\n  <span class=\"qd-status-pairs__error-text\"><ng-content></ng-content></span>\n</ng-container>\n", styles: [".qd-status-pairs__error{display:flex;align-items:center;margin-bottom:1rem}.qd-status-pairs__error-icon{margin-right:.5rem;color:#c70023;line-height:16px}.qd-status-pairs__error-text{color:#171717;font-size:14px;font-weight:400;line-height:20px;color:#c70023;font-weight:500;line-height:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdStatusPairsErrorComponent, isStandalone: false, selector: "qd-status-pairs-error", host: { classAttribute: "qd-status-pairs__error" }, ngImport: i0, template: "<ng-container *ngIf=\"error\">\n  <qd-icon class=\"qd-status-pairs__error-icon\" [icon]=\"'exclamationCircleSolid'\"></qd-icon>\n  <span class=\"qd-status-pairs__error-text\"><ng-content></ng-content></span>\n</ng-container>\n", styles: [".qd-status-pairs__error{display:flex;align-items:center;margin-bottom:1rem}.qd-status-pairs__error-icon{margin-right:.5rem;color:#c70023;line-height:16px}.qd-status-pairs__error-text{color:#171717;font-size:14px;font-weight:400;line-height:20px;color:#c70023;font-weight:500;line-height:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdStatusPairsErrorComponent, decorators: [{
             type: Component,
@@ -22439,7 +22489,7 @@ class NavigationTileComponent {
             console.error('Quadrel Framework | QdNavigationTile - You should provide an icon.');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NavigationTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: NavigationTileComponent, isStandalone: false, selector: "a[qd-navigation-tile]", inputs: { title: "title", icon: "icon" }, ngImport: i0, template: "<qd-icon *ngIf=\"icon\" [icon]=\"icon\"></qd-icon>\n<small>{{ title | translate }}</small>\n", styles: [":host{display:block;height:10rem;align-items:unset;padding:.75rem;border:1px solid rgb(213,213,213);background-color:#fff;color:unset;line-height:unset;text-align:unset;text-decoration:unset}qd-icon{display:block;margin-bottom:2.8125rem;font-size:2rem}small{color:#171717;font-size:14px;font-weight:500;line-height:20px;text-wrap:normal}@media (min-width: 1280px){small{font-size:1rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: NavigationTileComponent, isStandalone: false, selector: "a[qd-navigation-tile]", inputs: { title: "title", icon: "icon" }, ngImport: i0, template: "<qd-icon *ngIf=\"icon\" [icon]=\"icon\"></qd-icon>\n<small>{{ title | translate }}</small>\n", styles: [":host{display:block;height:10rem;align-items:unset;padding:.75rem;border:1px solid rgb(213,213,213);background-color:#fff;color:unset;line-height:unset;text-align:unset;text-decoration:unset}qd-icon{display:block;margin-bottom:2.8125rem;font-size:2rem}small{color:#171717;font-size:14px;font-weight:500;line-height:20px;text-wrap:normal}@media (min-width: 1280px){small{font-size:1rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NavigationTileComponent, decorators: [{
             type: Component,
@@ -22898,7 +22948,7 @@ class QdSearchComponent {
         return this.configData.emitEmptySearch ?? !!this.configData.clearable;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdSearchComponent, isStandalone: false, selector: "qd-search", inputs: { configData: "configData" }, host: { properties: { "class.hidden": "!hasConfig" }, classAttribute: "qd-search" }, providers: [QdSearchService, QdSearchRouterConnectorService], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"hasConfig\">\n  <div class=\"search-field\">\n    <qd-dropdown\n      *ngIf=\"preSelectedEnabled\"\n      class=\"preselect\"\n      [(value)]=\"preSelect\"\n      [config]=\"dropdownConfig\"\n    ></qd-dropdown>\n\n    <qd-input\n      class=\"search-input\"\n      [(value)]=\"search\"\n      [config]=\"inputConfig\"\n      (keydown.enter)=\"startSearch()\"\n      (clickClear)=\"handleDelete()\"\n      data-test-id=\"search-input\"\n    ></qd-input>\n    <button\n      type=\"button\"\n      qdIconButton\n      qdStopPropagation\n      data-test-id=\"search-button\"\n      class=\"search-button\"\n      (click)=\"startSearch()\"\n      [attr.aria-label]=\"'i18n.qd.container.toolbar.search' | translate\"\n    >\n      <qd-icon [icon]=\"'magnifier'\"></qd-icon>\n    </button>\n  </div>\n\n  <qd-icon\n    *ngIf=\"hasAdditionalInfo\"\n    icon=\"circleInfo\"\n    class=\"additional-info\"\n    qdTooltipOnClick\n    [qdTooltipContent]=\"configData.additionalInfo.content\"\n  ></qd-icon>\n</ng-container>\n", styles: [".qd-search{position:relative;display:flex;height:2.25rem}.qd-search.hidden{display:none}.qd-search .search-field{position:relative;display:flex;flex-wrap:nowrap}@media (max-width: 959.98px){.qd-search .search-field,.qd-search .search-field .search-input{width:100%}}.qd-search .preselect{display:flex;height:2.25rem}.qd-search .preselect .qd-dropdown__wrapper{height:2.25rem;margin-bottom:0}.qd-search .preselect .qd-dropdown__wrapper .qd-dropdown__box{background:#e5e5e5;color:#171717;font-size:.8125rem}.qd-search .search-input{display:flex;overflow:hidden;width:16.25rem;margin:0}.qd-search .search-input .qd-form-label,.qd-search .search-input .qd-form-hint{display:none;margin:0}.qd-search .search-input .qd-input-input{padding-right:1.25rem;margin:0!important}.qd-search .search-input .qd-input-input .qd-input-clearable-icon{margin-right:1.75rem!important}.qd-search .search-button{position:absolute;top:0;right:0;width:1.875rem;height:2.25rem;padding:0!important;padding-right:.375rem!important;padding-left:.375rem!important;margin:0!important;background:none}.qd-search .search-button:hover,.qd-search .search-button:focus,.qd-search .search-button:active{background:none}.qd-search .search-button .qd-icon{color:#979797!important;font-size:1.125rem!important;line-height:2.25rem;transform:translate(-.125rem,.0625rem)}.qd-search .search-button .qd-icon:hover,.qd-search .search-button .qd-icon:focus,.qd-search .search-button .qd-icon:active{color:#171717!important}.qd-search .additional-info{align-self:center;padding:0 .375rem 0 0;margin-right:-.375rem;margin-left:.5rem;color:#069;cursor:pointer;font-size:1.3125rem;line-height:2.25rem}.qd-search .additional-info:hover,.qd-search .additional-info:focus,.qd-search .additional-info:active{color:#14516f}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconButtonComponent, selector: "button[qdIconButton], a[qdIconButton], button[qd-icon-button]", inputs: ["color", "data-test-id"] }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "directive", type: QdTooltipOnClickDirective, selector: "[qdTooltipOnClick]", inputs: ["qdTooltipContent"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdSearchComponent, isStandalone: false, selector: "qd-search", inputs: { configData: "configData" }, host: { properties: { "class.hidden": "!hasConfig" }, classAttribute: "qd-search" }, providers: [QdSearchService, QdSearchRouterConnectorService], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"hasConfig\">\n  <div class=\"search-field\">\n    <qd-dropdown\n      *ngIf=\"preSelectedEnabled\"\n      class=\"preselect\"\n      [(value)]=\"preSelect\"\n      [config]=\"dropdownConfig\"\n    ></qd-dropdown>\n\n    <qd-input\n      class=\"search-input\"\n      [(value)]=\"search\"\n      [config]=\"inputConfig\"\n      (keydown.enter)=\"startSearch()\"\n      (clickClear)=\"handleDelete()\"\n      data-test-id=\"search-input\"\n    ></qd-input>\n    <button\n      type=\"button\"\n      qdIconButton\n      qdStopPropagation\n      data-test-id=\"search-button\"\n      class=\"search-button\"\n      (click)=\"startSearch()\"\n      [attr.aria-label]=\"'i18n.qd.container.toolbar.search' | translate\"\n    >\n      <qd-icon [icon]=\"'magnifier'\"></qd-icon>\n    </button>\n  </div>\n\n  <qd-icon\n    *ngIf=\"hasAdditionalInfo\"\n    icon=\"circleInfo\"\n    class=\"additional-info\"\n    qdTooltipOnClick\n    [qdTooltipContent]=\"configData.additionalInfo.content\"\n  ></qd-icon>\n</ng-container>\n", styles: [".qd-search{position:relative;display:flex;height:2.25rem}.qd-search.hidden{display:none}.qd-search .search-field{position:relative;display:flex;flex-wrap:nowrap}@media (max-width: 959.98px){.qd-search .search-field,.qd-search .search-field .search-input{width:100%}}.qd-search .preselect{display:flex;height:2.25rem}.qd-search .preselect .qd-dropdown__wrapper{height:2.25rem;margin-bottom:0}.qd-search .preselect .qd-dropdown__wrapper .qd-dropdown__box{background:#e5e5e5;color:#171717;font-size:.8125rem}.qd-search .search-input{display:flex;overflow:hidden;width:16.25rem;margin:0}.qd-search .search-input .qd-form-label,.qd-search .search-input .qd-form-hint{display:none;margin:0}.qd-search .search-input .qd-input-input{padding-right:1.25rem;margin:0!important}.qd-search .search-input .qd-input-input .qd-input-clearable-icon{margin-right:1.75rem!important}.qd-search .search-button{position:absolute;top:0;right:0;width:1.875rem;height:2.25rem;padding:0!important;padding-right:.375rem!important;padding-left:.375rem!important;margin:0!important;background:none}.qd-search .search-button:hover,.qd-search .search-button:focus,.qd-search .search-button:active{background:none}.qd-search .search-button .qd-icon{color:#979797!important;font-size:1.125rem!important;line-height:2.25rem;transform:translate(-.125rem,.0625rem)}.qd-search .search-button .qd-icon:hover,.qd-search .search-button .qd-icon:focus,.qd-search .search-button .qd-icon:active{color:#171717!important}.qd-search .additional-info{align-self:center;padding:0 .375rem 0 0;margin-right:-.375rem;margin-left:.5rem;color:#069;cursor:pointer;font-size:1.3125rem;line-height:2.25rem}.qd-search .additional-info:hover,.qd-search .additional-info:focus,.qd-search .additional-info:active{color:#14516f}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconButtonComponent, selector: "button[qdIconButton], a[qdIconButton], button[qd-icon-button]", inputs: ["color", "data-test-id"] }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdTooltipOnClickDirective, selector: "[qdTooltipOnClick]", inputs: ["qdTooltipContent"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdSearchComponent, decorators: [{
             type: Component,
@@ -24372,7 +24422,7 @@ class QdTablePaginatorComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTablePaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTablePaginatorComponent, isStandalone: false, selector: "qd-table-paginator", inputs: { config: "config", testId: ["data-test-id", "testId"] }, providers: [QdTablePaginationRouterConnectorService], viewQueries: [{ propertyName: "paginatorButtons", first: true, predicate: ["paginatorButtons"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"hasData$ | async\">\n  <qd-table-paginator-page-size [pageSizes]=\"pageSizes\" *ngIf=\"pageSizes.length > 0\"></qd-table-paginator-page-size>\n  <span class=\"paginator-current-page\" *ngIf=\"currentPage$ | async as page\">\n    {{ page.start }}\u2014{{ page.end }}\n    {{ \"i18n.qd.table.pagination.of\" | translate }}\n    {{ page.totalCount }}\n    {{\n      page.totalCount === 1\n        ? (\"i18n.qd.table.pagination.entry\" | translate)\n        : (\"i18n.qd.table.pagination.entries\" | translate)\n    }}\n  </span>\n  <span\n    *ngIf=\"{ count: (selectedRowsCount$ | async) ?? 0 } as ctx\"\n    [hidden]=\"ctx.count === 0 || config?.selection?.type !== 'multiSelect'\"\n    class=\"paginator-selection-count\"\n    [attr.data-test-id]=\"testId + '-paginator-selection-count'\"\n  >\n    {{\n      ctx.count === 1\n        ? (\"i18n.qd.table.pagination.selectedSingular\" | translate)\n        : (\"i18n.qd.table.pagination.selectedPlural\" | translate : { count: ctx.count })\n    }}\n  </span>\n  <span class=\"paginator-buttons\" data-test=\"paginator-buttons\" #paginatorButtons qdScrollToPagination>\n    <button\n      *ngIf=\"config?.pagination['hasFirstLastPageNavigation']\"\n      class=\"paginator-button\"\n      [attr.data-test-id]=\"testId + '-paginator-first-page'\"\n      (click)=\"navigateToPage(pageNav.FirstPage)\"\n      [disabled]=\"(canPageBackward$ | async) === false\"\n    >\n      <qd-icon [icon]=\"'pageFirst1'\"></qd-icon>\n    </button>\n    <button\n      class=\"paginator-button\"\n      [attr.data-test-id]=\"testId + '-paginator-backward'\"\n      (click)=\"navigateToPage(pageNav.PreviousPage)\"\n      [disabled]=\"(canPageBackward$ | async) === false\"\n    >\n      <qd-icon [icon]=\"'triangleLeftSolid'\"></qd-icon>\n    </button>\n    <button\n      class=\"paginator-button forward\"\n      [attr.data-test-id]=\"testId + '-paginator-forward'\"\n      (click)=\"navigateToPage(pageNav.NextPage)\"\n      [disabled]=\"(canPageForward$ | async) === false\"\n    >\n      <qd-icon [icon]=\"'triangleRightSolid'\"></qd-icon>\n    </button>\n    <button\n      *ngIf=\"config?.pagination['hasFirstLastPageNavigation']\"\n      class=\"paginator-button\"\n      [attr.data-test-id]=\"testId + '-paginator-last-page'\"\n      (click)=\"navigateToPage(pageNav.LastPage)\"\n      [disabled]=\"(canPageForward$ | async) === false\"\n    >\n      <qd-icon [icon]=\"'pageLast'\"></qd-icon>\n    </button>\n  </span>\n</ng-container>\n", styles: [":host{color:#454545;font-size:.875rem;font-weight:400;line-height:1.3125rem;display:flex;flex-direction:row;align-items:center;justify-content:space-between;background-color:#fff}.paginator-current-page{margin-left:1rem}.paginator-selection-count{margin-right:1rem;margin-left:1rem}.paginator-buttons{margin-left:auto;text-align:right;white-space:nowrap}button.paginator-button{width:2.75rem;height:2.75rem;border-left:.0625rem solid rgb(229,229,229);background-color:unset;color:#454545;font-size:1.5rem}button.paginator-button:disabled{color:#b4b4b4;cursor:default}button.paginator-button:not(:disabled):hover{background-color:#e5e5e5;color:#171717}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "directive", type: QdScrollToPaginationDirective, selector: "[qdScrollToPagination]" }, { kind: "component", type: QdTablePaginatorPageSizeComponent, selector: "qd-table-paginator-page-size", inputs: ["pageSizes"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTablePaginatorComponent, isStandalone: false, selector: "qd-table-paginator", inputs: { config: "config", testId: ["data-test-id", "testId"] }, providers: [QdTablePaginationRouterConnectorService], viewQueries: [{ propertyName: "paginatorButtons", first: true, predicate: ["paginatorButtons"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"hasData$ | async\">\n  <qd-table-paginator-page-size [pageSizes]=\"pageSizes\" *ngIf=\"pageSizes.length > 0\"></qd-table-paginator-page-size>\n  <span class=\"paginator-current-page\" *ngIf=\"currentPage$ | async as page\">\n    {{ page.start }}\u2014{{ page.end }}\n    {{ \"i18n.qd.table.pagination.of\" | translate }}\n    {{ page.totalCount }}\n    {{\n      page.totalCount === 1\n        ? (\"i18n.qd.table.pagination.entry\" | translate)\n        : (\"i18n.qd.table.pagination.entries\" | translate)\n    }}\n  </span>\n  <span\n    *ngIf=\"{ count: (selectedRowsCount$ | async) ?? 0 } as ctx\"\n    [hidden]=\"ctx.count === 0 || config?.selection?.type !== 'multiSelect'\"\n    class=\"paginator-selection-count\"\n    [attr.data-test-id]=\"testId + '-paginator-selection-count'\"\n  >\n    {{\n      ctx.count === 1\n        ? (\"i18n.qd.table.pagination.selectedSingular\" | translate)\n        : (\"i18n.qd.table.pagination.selectedPlural\" | translate : { count: ctx.count })\n    }}\n  </span>\n  <span class=\"paginator-buttons\" data-test=\"paginator-buttons\" #paginatorButtons qdScrollToPagination>\n    <button\n      *ngIf=\"config?.pagination['hasFirstLastPageNavigation']\"\n      class=\"paginator-button\"\n      [attr.data-test-id]=\"testId + '-paginator-first-page'\"\n      (click)=\"navigateToPage(pageNav.FirstPage)\"\n      [disabled]=\"(canPageBackward$ | async) === false\"\n    >\n      <qd-icon [icon]=\"'pageFirst1'\"></qd-icon>\n    </button>\n    <button\n      class=\"paginator-button\"\n      [attr.data-test-id]=\"testId + '-paginator-backward'\"\n      (click)=\"navigateToPage(pageNav.PreviousPage)\"\n      [disabled]=\"(canPageBackward$ | async) === false\"\n    >\n      <qd-icon [icon]=\"'triangleLeftSolid'\"></qd-icon>\n    </button>\n    <button\n      class=\"paginator-button forward\"\n      [attr.data-test-id]=\"testId + '-paginator-forward'\"\n      (click)=\"navigateToPage(pageNav.NextPage)\"\n      [disabled]=\"(canPageForward$ | async) === false\"\n    >\n      <qd-icon [icon]=\"'triangleRightSolid'\"></qd-icon>\n    </button>\n    <button\n      *ngIf=\"config?.pagination['hasFirstLastPageNavigation']\"\n      class=\"paginator-button\"\n      [attr.data-test-id]=\"testId + '-paginator-last-page'\"\n      (click)=\"navigateToPage(pageNav.LastPage)\"\n      [disabled]=\"(canPageForward$ | async) === false\"\n    >\n      <qd-icon [icon]=\"'pageLast'\"></qd-icon>\n    </button>\n  </span>\n</ng-container>\n", styles: [":host{color:#454545;font-size:.875rem;font-weight:400;line-height:1.3125rem;display:flex;flex-direction:row;align-items:center;justify-content:space-between;background-color:#fff}.paginator-current-page{margin-left:1rem}.paginator-selection-count{margin-right:1rem;margin-left:1rem}.paginator-buttons{margin-left:auto;text-align:right;white-space:nowrap}button.paginator-button{width:2.75rem;height:2.75rem;border-left:.0625rem solid rgb(229,229,229);background-color:unset;color:#454545;font-size:1.5rem}button.paginator-button:disabled{color:#b4b4b4;cursor:default}button.paginator-button:not(:disabled):hover{background-color:#e5e5e5;color:#171717}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdScrollToPaginationDirective, selector: "[qdScrollToPagination]" }, { kind: "component", type: QdTablePaginatorPageSizeComponent, selector: "qd-table-paginator-page-size", inputs: ["pageSizes"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTablePaginatorComponent, decorators: [{
             type: Component,
@@ -24594,7 +24644,7 @@ class QdTableRowActionsSecondaryMenuComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableRowActionsSecondaryMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTableRowActionsSecondaryMenuComponent, isStandalone: false, selector: "[qd-table-row-actions-secondary-menu]", inputs: { rowIndex: "rowIndex", rowData: "rowData", i18ns: "i18ns", testId: "testId", viewonly: "viewonly" }, ngImport: i0, template: "<ng-container *ngIf=\"actions$ | async as actions\">\n  <button\n    *ngIf=\"actions.length > 0\"\n    type=\"button\"\n    class=\"menu-button\"\n    [qdPopoverOnClick]=\"menu\"\n    [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n    [qdPopoverStopPropagation]=\"true\"\n    [qdPopoverMinWidth]=\"160\"\n    [attr.data-test-id]=\"testId + '-toggler'\"\n  >\n    <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n  </button>\n\n  <ng-template #menu>\n    <button\n      *ngFor=\"let action of actions; let i = index\"\n      class=\"action-button\"\n      type=\"button\"\n      [disabled]=\"action.isDisabled\"\n      (click)=\"onActionClick(action.type)\"\n      [attr.data-test-id]=\"testId + '-' + i\"\n    >\n      {{ action.i18n | translate }}\n    </button>\n  </ng-template>\n</ng-container>\n", styles: [".menu-button{display:flex;padding:.1875rem .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem}.menu-button:hover,.menu-button:focus{color:#000}.action-button{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.action-button:hover{background-color:#f2f7fa}.action-button.disabled{color:#b4b4b4;cursor:not-allowed}.action-button.disabled:hover{background-color:#fff0}\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: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTableRowActionsSecondaryMenuComponent, isStandalone: false, selector: "[qd-table-row-actions-secondary-menu]", inputs: { rowIndex: "rowIndex", rowData: "rowData", i18ns: "i18ns", testId: "testId", viewonly: "viewonly" }, ngImport: i0, template: "<ng-container *ngIf=\"actions$ | async as actions\">\n  <button\n    *ngIf=\"actions.length > 0\"\n    type=\"button\"\n    class=\"menu-button\"\n    [qdPopoverOnClick]=\"menu\"\n    [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n    [qdPopoverStopPropagation]=\"true\"\n    [qdPopoverMinWidth]=\"160\"\n    [attr.data-test-id]=\"testId + '-toggler'\"\n  >\n    <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n  </button>\n\n  <ng-template #menu>\n    <button\n      *ngFor=\"let action of actions; let i = index\"\n      class=\"action-button\"\n      type=\"button\"\n      [disabled]=\"action.isDisabled\"\n      (click)=\"onActionClick(action.type)\"\n      [attr.data-test-id]=\"testId + '-' + i\"\n    >\n      {{ action.i18n | translate }}\n    </button>\n  </ng-template>\n</ng-container>\n", styles: [".menu-button{display:flex;padding:.1875rem .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem}.menu-button:hover,.menu-button:focus{color:#000}.action-button{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.action-button:hover{background-color:#f2f7fa}.action-button.disabled{color:#b4b4b4;cursor:not-allowed}.action-button.disabled:hover{background-color:#fff0}\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: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableRowActionsSecondaryMenuComponent, decorators: [{
             type: Component,
@@ -24739,11 +24789,11 @@ class QdTableRowComponent {
         return this.config.columns.find(column => column.column === item)?.tooltip;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTableRowComponent, isStandalone: false, selector: "[qd-table-row]", inputs: { config: "config", rowData: "rowData", rowIndex: "rowIndex", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.hostTestId" } }, providers: [QdDataFacetsContextService], ngImport: i0, template: "<td\n  qd-table-row-selection\n  *ngIf=\"config.selection\"\n  class=\"qd-table__body-cell--selection\"\n  [rowIndex]=\"rowIndex\"\n  [rowData]=\"rowData\"\n  [data-test-id]=\"testId + '-cell-selection'\"\n></td>\n\n<ng-container *ngFor=\"let item of columnsDefinitions$ | async\">\n  <td\n    *ngIf=\"hasMergedColumns(item)\"\n    [class]=\"'qd-table__body-cell--merged ' + getCellClass(item)\"\n    [attr.data-test-id]=\"testId + '-cell-merged'\"\n  >\n    <div *ngFor=\"let item of item; let first = first\">\n      <ng-container *ngTemplateOutlet=\"headings; context: { item, translations, first }\"></ng-container>\n      <span class=\"qd-table__body-cell\">\n        <ng-container *ngComponentOutlet=\"getComponentType(item); inputs: getComponentInputs(item)\"></ng-container>\n      </span>\n    </div>\n  </td>\n\n  <td\n    *ngIf=\"!hasMergedColumns(item)\"\n    [class]=\"'qd-table__body-cell ' + getCellClass(item)\"\n    [attr.data-test-id]=\"testId + '-cell-' + item\"\n  >\n    <ng-container *ngComponentOutlet=\"getComponentType(item); inputs: getComponentInputs(item)\"></ng-container>\n  </td>\n</ng-container>\n\n<td\n  *ngIf=\"config.secondaryActions?.length > 0\"\n  qd-table-row-actions-secondary-menu\n  class=\"qd-table__body-cell--actions-secondary-actions-menu\"\n  [rowIndex]=\"rowIndex\"\n  [rowData]=\"rowData\"\n  [i18ns]=\"config.i18ns\"\n  [testId]=\"testId + '-secondary-actions'\"\n  [viewonly]=\"config.viewonly\"\n  [attr.data-test-id]=\"testId + '-cell-secondary-actions'\"\n></td>\n\n<ng-template #headings let-item=\"item\" let-translations=\"translations\" let-first=\"first\">\n  <ng-container *ngIf=\"!first && findColumnType(item) !== 'blank'\">\n    <span class=\"qd-table__body-cell--merged-headings\">\n      {{ translations ? (getI18n(item) | translate) : capitalize(item) }}\n      <qd-tooltip-icon [tooltip]=\"getTooltip(item)\"></qd-tooltip-icon>\n    </span>\n  </ng-container>\n</ng-template>\n", styles: ["[qd-table-row] .qd-table__body-cell--actions-secondary-actions-menu{vertical-align:top}[qd-table-row] .qd-data-facets{display:block}[qd-table-row] qd-data-facets-progress.qd-data-facets{transform:translateY(.1875rem)}[qd-table-row] qd-data-facets-chip.qd-data-facets{display:contents}[qd-table-row] .qd-table__body-cell--merged qd-data-facets-text{padding-top:0}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QdTooltipIconComponent, selector: "qd-tooltip-icon", inputs: ["tooltip"] }, { kind: "component", type: QdTableRowActionsSecondaryMenuComponent, selector: "[qd-table-row-actions-secondary-menu]", inputs: ["rowIndex", "rowData", "i18ns", "testId", "viewonly"] }, { kind: "component", type: QdTableRowSelectionComponent, selector: "[qd-table-row-selection]", inputs: ["rowIndex", "rowData", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTableRowComponent, isStandalone: false, selector: "[qd-table-row]", inputs: { config: "config", rowData: "rowData", rowIndex: "rowIndex", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.hostTestId" } }, providers: [QdDataFacetsContextService], ngImport: i0, template: "<td\n  qd-table-row-selection\n  *ngIf=\"config.selection\"\n  class=\"qd-table__body-cell--selection\"\n  [rowIndex]=\"rowIndex\"\n  [rowData]=\"rowData\"\n  [data-test-id]=\"testId + '-cell-selection'\"\n></td>\n\n<ng-container *ngFor=\"let item of columnsDefinitions$ | async\">\n  <td\n    *ngIf=\"hasMergedColumns(item)\"\n    [class]=\"'qd-table__body-cell--merged ' + getCellClass(item)\"\n    [attr.data-test-id]=\"testId + '-cell-merged'\"\n  >\n    <div *ngFor=\"let item of item; let first = first\">\n      <ng-container *ngTemplateOutlet=\"headings; context: { item, translations, first }\"></ng-container>\n      <span class=\"qd-table__body-cell\">\n        <ng-container *ngComponentOutlet=\"getComponentType(item); inputs: getComponentInputs(item)\"></ng-container>\n      </span>\n    </div>\n  </td>\n\n  <td\n    *ngIf=\"!hasMergedColumns(item)\"\n    [class]=\"'qd-table__body-cell ' + getCellClass(item)\"\n    [attr.data-test-id]=\"testId + '-cell-' + item\"\n  >\n    <ng-container *ngComponentOutlet=\"getComponentType(item); inputs: getComponentInputs(item)\"></ng-container>\n  </td>\n</ng-container>\n\n<td\n  *ngIf=\"config.secondaryActions?.length > 0\"\n  qd-table-row-actions-secondary-menu\n  class=\"qd-table__body-cell--actions-secondary-actions-menu\"\n  [rowIndex]=\"rowIndex\"\n  [rowData]=\"rowData\"\n  [i18ns]=\"config.i18ns\"\n  [testId]=\"testId + '-secondary-actions'\"\n  [viewonly]=\"config.viewonly\"\n  [attr.data-test-id]=\"testId + '-cell-secondary-actions'\"\n></td>\n\n<ng-template #headings let-item=\"item\" let-translations=\"translations\" let-first=\"first\">\n  <ng-container *ngIf=\"!first && findColumnType(item) !== 'blank'\">\n    <span class=\"qd-table__body-cell--merged-headings\">\n      {{ translations ? (getI18n(item) | translate) : capitalize(item) }}\n      <qd-tooltip-icon [tooltip]=\"getTooltip(item)\"></qd-tooltip-icon>\n    </span>\n  </ng-container>\n</ng-template>\n", styles: ["[qd-table-row] .qd-table__body-cell--actions-secondary-actions-menu{vertical-align:top}[qd-table-row] .qd-data-facets{display:block}[qd-table-row] qd-data-facets-progress.qd-data-facets{transform:translateY(.1875rem)}[qd-table-row] qd-data-facets-chip.qd-data-facets{display:contents}[qd-table-row] .qd-table__body-cell qd-data-facets-text.qd-data-facets{margin:.625rem 0}[qd-table-row] .qd-table__body-cell--merged qd-data-facets-text.qd-data-facets{margin:0;line-height:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QdTooltipIconComponent, selector: "qd-tooltip-icon", inputs: ["tooltip"] }, { kind: "component", type: QdTableRowActionsSecondaryMenuComponent, selector: "[qd-table-row-actions-secondary-menu]", inputs: ["rowIndex", "rowData", "i18ns", "testId", "viewonly"] }, { kind: "component", type: QdTableRowSelectionComponent, selector: "[qd-table-row-selection]", inputs: ["rowIndex", "rowData", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[qd-table-row]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [QdDataFacetsContextService], standalone: false, template: "<td\n  qd-table-row-selection\n  *ngIf=\"config.selection\"\n  class=\"qd-table__body-cell--selection\"\n  [rowIndex]=\"rowIndex\"\n  [rowData]=\"rowData\"\n  [data-test-id]=\"testId + '-cell-selection'\"\n></td>\n\n<ng-container *ngFor=\"let item of columnsDefinitions$ | async\">\n  <td\n    *ngIf=\"hasMergedColumns(item)\"\n    [class]=\"'qd-table__body-cell--merged ' + getCellClass(item)\"\n    [attr.data-test-id]=\"testId + '-cell-merged'\"\n  >\n    <div *ngFor=\"let item of item; let first = first\">\n      <ng-container *ngTemplateOutlet=\"headings; context: { item, translations, first }\"></ng-container>\n      <span class=\"qd-table__body-cell\">\n        <ng-container *ngComponentOutlet=\"getComponentType(item); inputs: getComponentInputs(item)\"></ng-container>\n      </span>\n    </div>\n  </td>\n\n  <td\n    *ngIf=\"!hasMergedColumns(item)\"\n    [class]=\"'qd-table__body-cell ' + getCellClass(item)\"\n    [attr.data-test-id]=\"testId + '-cell-' + item\"\n  >\n    <ng-container *ngComponentOutlet=\"getComponentType(item); inputs: getComponentInputs(item)\"></ng-container>\n  </td>\n</ng-container>\n\n<td\n  *ngIf=\"config.secondaryActions?.length > 0\"\n  qd-table-row-actions-secondary-menu\n  class=\"qd-table__body-cell--actions-secondary-actions-menu\"\n  [rowIndex]=\"rowIndex\"\n  [rowData]=\"rowData\"\n  [i18ns]=\"config.i18ns\"\n  [testId]=\"testId + '-secondary-actions'\"\n  [viewonly]=\"config.viewonly\"\n  [attr.data-test-id]=\"testId + '-cell-secondary-actions'\"\n></td>\n\n<ng-template #headings let-item=\"item\" let-translations=\"translations\" let-first=\"first\">\n  <ng-container *ngIf=\"!first && findColumnType(item) !== 'blank'\">\n    <span class=\"qd-table__body-cell--merged-headings\">\n      {{ translations ? (getI18n(item) | translate) : capitalize(item) }}\n      <qd-tooltip-icon [tooltip]=\"getTooltip(item)\"></qd-tooltip-icon>\n    </span>\n  </ng-container>\n</ng-template>\n", styles: ["[qd-table-row] .qd-table__body-cell--actions-secondary-actions-menu{vertical-align:top}[qd-table-row] .qd-data-facets{display:block}[qd-table-row] qd-data-facets-progress.qd-data-facets{transform:translateY(.1875rem)}[qd-table-row] qd-data-facets-chip.qd-data-facets{display:contents}[qd-table-row] .qd-table__body-cell--merged qd-data-facets-text{padding-top:0}\n"] }]
+            args: [{ selector: '[qd-table-row]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [QdDataFacetsContextService], standalone: false, template: "<td\n  qd-table-row-selection\n  *ngIf=\"config.selection\"\n  class=\"qd-table__body-cell--selection\"\n  [rowIndex]=\"rowIndex\"\n  [rowData]=\"rowData\"\n  [data-test-id]=\"testId + '-cell-selection'\"\n></td>\n\n<ng-container *ngFor=\"let item of columnsDefinitions$ | async\">\n  <td\n    *ngIf=\"hasMergedColumns(item)\"\n    [class]=\"'qd-table__body-cell--merged ' + getCellClass(item)\"\n    [attr.data-test-id]=\"testId + '-cell-merged'\"\n  >\n    <div *ngFor=\"let item of item; let first = first\">\n      <ng-container *ngTemplateOutlet=\"headings; context: { item, translations, first }\"></ng-container>\n      <span class=\"qd-table__body-cell\">\n        <ng-container *ngComponentOutlet=\"getComponentType(item); inputs: getComponentInputs(item)\"></ng-container>\n      </span>\n    </div>\n  </td>\n\n  <td\n    *ngIf=\"!hasMergedColumns(item)\"\n    [class]=\"'qd-table__body-cell ' + getCellClass(item)\"\n    [attr.data-test-id]=\"testId + '-cell-' + item\"\n  >\n    <ng-container *ngComponentOutlet=\"getComponentType(item); inputs: getComponentInputs(item)\"></ng-container>\n  </td>\n</ng-container>\n\n<td\n  *ngIf=\"config.secondaryActions?.length > 0\"\n  qd-table-row-actions-secondary-menu\n  class=\"qd-table__body-cell--actions-secondary-actions-menu\"\n  [rowIndex]=\"rowIndex\"\n  [rowData]=\"rowData\"\n  [i18ns]=\"config.i18ns\"\n  [testId]=\"testId + '-secondary-actions'\"\n  [viewonly]=\"config.viewonly\"\n  [attr.data-test-id]=\"testId + '-cell-secondary-actions'\"\n></td>\n\n<ng-template #headings let-item=\"item\" let-translations=\"translations\" let-first=\"first\">\n  <ng-container *ngIf=\"!first && findColumnType(item) !== 'blank'\">\n    <span class=\"qd-table__body-cell--merged-headings\">\n      {{ translations ? (getI18n(item) | translate) : capitalize(item) }}\n      <qd-tooltip-icon [tooltip]=\"getTooltip(item)\"></qd-tooltip-icon>\n    </span>\n  </ng-container>\n</ng-template>\n", styles: ["[qd-table-row] .qd-table__body-cell--actions-secondary-actions-menu{vertical-align:top}[qd-table-row] .qd-data-facets{display:block}[qd-table-row] qd-data-facets-progress.qd-data-facets{transform:translateY(.1875rem)}[qd-table-row] qd-data-facets-chip.qd-data-facets{display:contents}[qd-table-row] .qd-table__body-cell qd-data-facets-text.qd-data-facets{margin:.625rem 0}[qd-table-row] .qd-table__body-cell--merged qd-data-facets-text.qd-data-facets{margin:0;line-height:inherit}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], rowData: [{
@@ -24818,11 +24868,11 @@ class QdTableBodyComponent {
         this.resolverService.refresh(pageIndex !== undefined ? { pageIndex } : undefined);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTableBodyComponent, isStandalone: false, selector: "[qd-table-body]", inputs: { config: "config", data: "data", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-table__body qd-table__body--plain" }, ngImport: i0, template: "<div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\">\n  <qd-spinner></qd-spinner>\n</div>\n<ng-container *ngFor=\"let rowData of data; index as rowIndex; trackBy: trackByRowIdentifier\">\n  <tr\n    qd-table-row\n    [rowData]=\"rowData\"\n    [rowIndex]=\"rowIndex\"\n    [config]=\"config\"\n    [class]=\"'qd-table__body-row'\"\n    [data-test-id]=\"testId + '-row-' + rowIndex\"\n    (click)=\"config.primaryAction && primaryAction(rowData, rowIndex)\"\n    [class.hasAction]=\"config.primaryAction\"\n    [class.qd-table__body-row--last-visited]=\"isLastVisitedRow(rowData, rowIndex)\"\n  ></tr>\n</ng-container>\n", styles: [".qd-table__body--plain{position:relative}.qd-table__body--plain td{border-bottom:.0625rem solid rgb(213,213,213)}.qd-table__body--plain td.qd-table__body-cell--selection{padding-left:1rem;vertical-align:top}.qd-table__body--plain td>div{display:flex;align-items:stretch;line-height:1.5rem}.qd-table__body--plain td>div:first-child{font-weight:500;line-height:1.5rem}.qd-table__body--plain td>div:not(:first-child) .qd-table__body-cell{padding:0 .5rem}.qd-table__body--plain td.qd-table__body-cell--merged{padding:.5rem 0;vertical-align:top}.qd-table__body--plain td .qd-table__body-cell--merged-headings{width:33%;padding-left:1rem;color:#757575;overflow-wrap:break-word}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell{width:66%}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell>*{overflow-wrap:break-word;text-align:left}@media (max-width: 959.98px){.qd-table__body--plain td.qd-table__body-cell--merged{display:grid;max-width:100%;grid-template-columns:fit-content(66%) 1fr}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child{display:block;font-weight:500;grid-column:1/-1;line-height:1.5rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child>span.qd-table__body-cell{display:block;width:auto;padding-left:1rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child){display:grid;grid-column:1/-1;grid-template-columns:subgrid}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell--merged-headings{display:block;overflow:hidden;width:auto;min-width:0;padding-right:0;padding-left:1rem;color:#757575;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell{display:block;overflow:hidden;width:auto;min-width:0;padding:0 .5rem;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell>*{display:block;overflow:hidden;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}}.qd-table__body--plain td span.qd-table__body-cell--boolean{display:flex;align-items:center}.qd-table__body--plain td span.qd-table__body-cell--progress{flex-grow:1;align-self:center;padding-top:0}.qd-table__body--plain td span.qd-table__body-cell--status{margin-top:-.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text{min-height:auto;padding-top:0;line-height:1.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text+.text{margin-top:.1875rem}.qd-table__body--plain tr.hasAction{cursor:pointer}.qd-table__body--plain tr.hasAction:hover{background-color:#f2f7fa}.qd-table__body--plain tr.qd-table__body-row--last-visited{animation:last-visited-fade 1.5s linear forwards}@keyframes last-visited-fade{0%,33%{background-color:#c3e8cd}to{background-color:transparent}}.loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}\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: QdSpinnerComponent, selector: "qd-spinner" }, { kind: "component", type: QdTableRowComponent, selector: "[qd-table-row]", inputs: ["config", "rowData", "rowIndex", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTableBodyComponent, isStandalone: false, selector: "[qd-table-body]", inputs: { config: "config", data: "data", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-table__body qd-table__body--plain" }, ngImport: i0, template: "<div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\">\n  <qd-spinner></qd-spinner>\n</div>\n<ng-container *ngFor=\"let rowData of data; index as rowIndex; trackBy: trackByRowIdentifier\">\n  <tr\n    qd-table-row\n    [rowData]=\"rowData\"\n    [rowIndex]=\"rowIndex\"\n    [config]=\"config\"\n    [class]=\"'qd-table__body-row'\"\n    [data-test-id]=\"testId + '-row-' + rowIndex\"\n    (click)=\"config.primaryAction && primaryAction(rowData, rowIndex)\"\n    [class.hasAction]=\"config.primaryAction\"\n    [class.qd-table__body-row--last-visited]=\"isLastVisitedRow(rowData, rowIndex)\"\n  ></tr>\n</ng-container>\n", styles: [".qd-table__body--plain{position:relative}.qd-table__body--plain td{border-bottom:.0625rem solid rgb(213,213,213)}.qd-table__body--plain td.qd-table__body-cell--selection{padding-left:1rem;vertical-align:top}.qd-table__body--plain td>div{display:flex;align-items:stretch;line-height:1.5rem}.qd-table__body--plain td>div:first-child{font-weight:500;line-height:1.5rem}.qd-table__body--plain td>div:not(:first-child) .qd-table__body-cell{padding:0 .5rem}.qd-table__body--plain td.qd-table__body-cell--merged{padding:.5rem 0;vertical-align:top}.qd-table__body--plain td .qd-table__body-cell--merged-headings{width:33%;padding-left:1rem;color:#757575;overflow-wrap:break-word}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell{width:66%}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell>*{overflow-wrap:break-word;text-align:left}@media (max-width: 959.98px){.qd-table__body--plain td.qd-table__body-cell--merged{display:grid;max-width:100%;grid-template-columns:fit-content(66%) 1fr}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child{display:block;font-weight:500;grid-column:1/-1;line-height:1.5rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child>span.qd-table__body-cell{display:block;width:auto;padding-left:1rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child){display:grid;grid-column:1/-1;grid-template-columns:subgrid}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell--merged-headings{display:block;overflow:hidden;width:auto;min-width:0;padding-right:0;padding-left:1rem;color:#757575;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell{display:block;overflow:hidden;width:auto;min-width:0;padding:0 .5rem;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell>*{display:block;overflow:hidden;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}}.qd-table__body--plain td span.qd-table__body-cell--boolean{display:flex;align-items:center}.qd-table__body--plain td span.qd-table__body-cell--progress{flex-grow:1;align-self:center;padding-top:0}.qd-table__body--plain td span.qd-table__body-cell--status{margin-top:-.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text{min-height:auto;padding-top:0;line-height:1.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text+.text{margin-top:.1875rem}.qd-table__body--plain tr:hover{background-color:#f5f5f5}.qd-table__body--plain tr.hasAction{cursor:pointer}.qd-table__body--plain tr.hasAction:hover{background-color:#f2f7fa}.qd-table__body--plain tr.qd-table__body-row--last-visited{animation:last-visited-fade 1.5s linear}@keyframes last-visited-fade{0%,33%{background-color:#c3e8cd}to{background-color:transparent}}.loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}\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: QdSpinnerComponent, selector: "qd-spinner" }, { kind: "component", type: QdTableRowComponent, selector: "[qd-table-row]", inputs: ["config", "rowData", "rowIndex", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[qd-table-body]', host: { class: 'qd-table__body qd-table__body--plain' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\">\n  <qd-spinner></qd-spinner>\n</div>\n<ng-container *ngFor=\"let rowData of data; index as rowIndex; trackBy: trackByRowIdentifier\">\n  <tr\n    qd-table-row\n    [rowData]=\"rowData\"\n    [rowIndex]=\"rowIndex\"\n    [config]=\"config\"\n    [class]=\"'qd-table__body-row'\"\n    [data-test-id]=\"testId + '-row-' + rowIndex\"\n    (click)=\"config.primaryAction && primaryAction(rowData, rowIndex)\"\n    [class.hasAction]=\"config.primaryAction\"\n    [class.qd-table__body-row--last-visited]=\"isLastVisitedRow(rowData, rowIndex)\"\n  ></tr>\n</ng-container>\n", styles: [".qd-table__body--plain{position:relative}.qd-table__body--plain td{border-bottom:.0625rem solid rgb(213,213,213)}.qd-table__body--plain td.qd-table__body-cell--selection{padding-left:1rem;vertical-align:top}.qd-table__body--plain td>div{display:flex;align-items:stretch;line-height:1.5rem}.qd-table__body--plain td>div:first-child{font-weight:500;line-height:1.5rem}.qd-table__body--plain td>div:not(:first-child) .qd-table__body-cell{padding:0 .5rem}.qd-table__body--plain td.qd-table__body-cell--merged{padding:.5rem 0;vertical-align:top}.qd-table__body--plain td .qd-table__body-cell--merged-headings{width:33%;padding-left:1rem;color:#757575;overflow-wrap:break-word}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell{width:66%}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell>*{overflow-wrap:break-word;text-align:left}@media (max-width: 959.98px){.qd-table__body--plain td.qd-table__body-cell--merged{display:grid;max-width:100%;grid-template-columns:fit-content(66%) 1fr}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child{display:block;font-weight:500;grid-column:1/-1;line-height:1.5rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child>span.qd-table__body-cell{display:block;width:auto;padding-left:1rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child){display:grid;grid-column:1/-1;grid-template-columns:subgrid}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell--merged-headings{display:block;overflow:hidden;width:auto;min-width:0;padding-right:0;padding-left:1rem;color:#757575;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell{display:block;overflow:hidden;width:auto;min-width:0;padding:0 .5rem;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell>*{display:block;overflow:hidden;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}}.qd-table__body--plain td span.qd-table__body-cell--boolean{display:flex;align-items:center}.qd-table__body--plain td span.qd-table__body-cell--progress{flex-grow:1;align-self:center;padding-top:0}.qd-table__body--plain td span.qd-table__body-cell--status{margin-top:-.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text{min-height:auto;padding-top:0;line-height:1.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text+.text{margin-top:.1875rem}.qd-table__body--plain tr.hasAction{cursor:pointer}.qd-table__body--plain tr.hasAction:hover{background-color:#f2f7fa}.qd-table__body--plain tr.qd-table__body-row--last-visited{animation:last-visited-fade 1.5s linear forwards}@keyframes last-visited-fade{0%,33%{background-color:#c3e8cd}to{background-color:transparent}}.loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}\n"] }]
+            args: [{ selector: '[qd-table-body]', host: { class: 'qd-table__body qd-table__body--plain' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\">\n  <qd-spinner></qd-spinner>\n</div>\n<ng-container *ngFor=\"let rowData of data; index as rowIndex; trackBy: trackByRowIdentifier\">\n  <tr\n    qd-table-row\n    [rowData]=\"rowData\"\n    [rowIndex]=\"rowIndex\"\n    [config]=\"config\"\n    [class]=\"'qd-table__body-row'\"\n    [data-test-id]=\"testId + '-row-' + rowIndex\"\n    (click)=\"config.primaryAction && primaryAction(rowData, rowIndex)\"\n    [class.hasAction]=\"config.primaryAction\"\n    [class.qd-table__body-row--last-visited]=\"isLastVisitedRow(rowData, rowIndex)\"\n  ></tr>\n</ng-container>\n", styles: [".qd-table__body--plain{position:relative}.qd-table__body--plain td{border-bottom:.0625rem solid rgb(213,213,213)}.qd-table__body--plain td.qd-table__body-cell--selection{padding-left:1rem;vertical-align:top}.qd-table__body--plain td>div{display:flex;align-items:stretch;line-height:1.5rem}.qd-table__body--plain td>div:first-child{font-weight:500;line-height:1.5rem}.qd-table__body--plain td>div:not(:first-child) .qd-table__body-cell{padding:0 .5rem}.qd-table__body--plain td.qd-table__body-cell--merged{padding:.5rem 0;vertical-align:top}.qd-table__body--plain td .qd-table__body-cell--merged-headings{width:33%;padding-left:1rem;color:#757575;overflow-wrap:break-word}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell{width:66%}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell>*{overflow-wrap:break-word;text-align:left}@media (max-width: 959.98px){.qd-table__body--plain td.qd-table__body-cell--merged{display:grid;max-width:100%;grid-template-columns:fit-content(66%) 1fr}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child{display:block;font-weight:500;grid-column:1/-1;line-height:1.5rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child>span.qd-table__body-cell{display:block;width:auto;padding-left:1rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child){display:grid;grid-column:1/-1;grid-template-columns:subgrid}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell--merged-headings{display:block;overflow:hidden;width:auto;min-width:0;padding-right:0;padding-left:1rem;color:#757575;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell{display:block;overflow:hidden;width:auto;min-width:0;padding:0 .5rem;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell>*{display:block;overflow:hidden;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}}.qd-table__body--plain td span.qd-table__body-cell--boolean{display:flex;align-items:center}.qd-table__body--plain td span.qd-table__body-cell--progress{flex-grow:1;align-self:center;padding-top:0}.qd-table__body--plain td span.qd-table__body-cell--status{margin-top:-.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text{min-height:auto;padding-top:0;line-height:1.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text+.text{margin-top:.1875rem}.qd-table__body--plain tr:hover{background-color:#f5f5f5}.qd-table__body--plain tr.hasAction{cursor:pointer}.qd-table__body--plain tr.hasAction:hover{background-color:#f2f7fa}.qd-table__body--plain tr.qd-table__body-row--last-visited{animation:last-visited-fade 1.5s linear}@keyframes last-visited-fade{0%,33%{background-color:#c3e8cd}to{background-color:transparent}}.loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], data: [{
@@ -24958,7 +25008,7 @@ class QdTableSortComponent {
         return (!this.isActive && direction !== targetDirection) || direction === targetDirection;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableSortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTableSortComponent, isStandalone: false, selector: "qd-table-sort", inputs: { isSortable: "isSortable", config: "config", column: "column", testId: ["data-test-id", "testId"] }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()", "click": "handleClick()" }, properties: { "class.sortable": "isSortable", "class.active": "isActive", "class.hovered": "isHovered" } }, ngImport: i0, template: "<div class=\"heading\">\n  <ng-content></ng-content>\n</div>\n\n<div *ngIf=\"isSortable\" class=\"buttons\" [style.opacity]=\"getOpacity()\" [attr.data-test-id]=\"testId + '-buttons'\">\n  <qd-icon *ngIf=\"showDesc$ | async\" icon=\"arrowDown\" [attr.data-test-id]=\"testId + '-button-arrow-down'\"></qd-icon>\n  <qd-icon *ngIf=\"showAsc$ | async\" icon=\"arrowTop\" [attr.data-test-id]=\"testId + '-button-arrow-top'\"></qd-icon>\n</div>\n", styles: [":host.sortable{display:flex;width:100%;height:2.625rem;box-sizing:content-box;justify-content:flex-end;border:solid rgb(229,229,229);border-width:0 1rem;margin-top:-.125rem;margin-left:-1rem;cursor:pointer}:host.active,:host.hovered{border-color:#d5d5d5;background:#d5d5d5}:host.active .buttons,:host.hovered .buttons{opacity:1!important}:host .heading{flex-grow:1}:host .buttons{width:1.75rem;margin-left:-1.875rem;transform:translate(1.75rem)}.qd-icon{display:inline-flex;width:.5rem;font-size:1rem;font-weight:400;transform:translate(-.625rem)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTableSortComponent, isStandalone: false, selector: "qd-table-sort", inputs: { isSortable: "isSortable", config: "config", column: "column", testId: ["data-test-id", "testId"] }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()", "click": "handleClick()" }, properties: { "class.sortable": "isSortable", "class.active": "isActive", "class.hovered": "isHovered" } }, ngImport: i0, template: "<div class=\"heading\">\n  <ng-content></ng-content>\n</div>\n\n<div *ngIf=\"isSortable\" class=\"buttons\" [style.opacity]=\"getOpacity()\" [attr.data-test-id]=\"testId + '-buttons'\">\n  <qd-icon *ngIf=\"showDesc$ | async\" icon=\"arrowDown\" [attr.data-test-id]=\"testId + '-button-arrow-down'\"></qd-icon>\n  <qd-icon *ngIf=\"showAsc$ | async\" icon=\"arrowTop\" [attr.data-test-id]=\"testId + '-button-arrow-top'\"></qd-icon>\n</div>\n", styles: [":host.sortable{display:flex;width:100%;height:2.625rem;box-sizing:content-box;justify-content:flex-end;border:solid rgb(229,229,229);border-width:0 1rem;margin-top:-.125rem;margin-left:-1rem;cursor:pointer}:host.active,:host.hovered{border-color:#d5d5d5;background:#d5d5d5}:host.active .buttons,:host.hovered .buttons{opacity:1!important}:host .heading{flex-grow:1}:host .buttons{width:1.75rem;margin-left:-1.875rem;transform:translate(1.75rem)}.qd-icon{display:inline-flex;width:.5rem;font-size:1rem;font-weight:400;transform:translate(-.625rem)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableSortComponent, decorators: [{
             type: Component,
@@ -26034,7 +26084,7 @@ class QdSectionToolbarComponent {
     toolbarComponents;
     get searchConfigData() {
         if (this.config.search === false)
-            return;
+            return undefined;
         return this.config.search;
     }
     get filterData() {
@@ -26066,7 +26116,7 @@ class QdSectionToolbarComponent {
         this.isCollapsed = !this.isCollapsed;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdSectionToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdSectionToolbarComponent, isStandalone: false, selector: "qd-section-toolbar", inputs: { config: "config" }, viewQueries: [{ propertyName: "toolbarComponents", predicate: ["filter, search"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"{ toolbarHeader: true, collapsible: config.collapse?.isEnabled }\" (click)=\"toggleCollapse()\">\n  <qd-icon class=\"collapseIcon\" *ngIf=\"config.collapse?.isEnabled\" [icon]=\"isCollapsed ? 'ctrlRight' : 'ctrlDown'\">\n  </qd-icon>\n\n  <span class=\"toolbarTitle\" *ngIf=\"config.title\">{{ config.title.i18n | translate }}</span>\n  <qd-icon\n    *ngIf=\"isTooltipVisible\"\n    class=\"additionalInfo\"\n    icon=\"circleInfo\"\n    qdTooltipOnClick\n    [qdTooltipContent]=\"tooltipContent\"\n  ></qd-icon>\n</div>\n\n<ng-container *ngIf=\"!isCollapsed\">\n  <div class=\"toolbarRight\">\n    <qd-search #search [configData]=\"searchConfigData\"></qd-search>\n    <qd-section-toolbar-action qdViewportAdaptive class=\"toolbarAction\" [config]=\"config\"></qd-section-toolbar-action>\n  </div>\n\n  <qd-filter class=\"toolbarFilter\" #filter [filterData]=\"filterData\"></qd-filter>\n</ng-container>\n", styles: [":host{position:relative;display:flex;flex-wrap:wrap;margin-bottom:.625rem}:host .toolbarHeader{color:#333;font-size:1rem;font-weight:700;line-height:1.5rem;margin-bottom:.625rem}@media (max-width: 599.98px){:host .toolbarHeader{margin-bottom:.3125rem}}:host .collapsible{cursor:pointer}:host .collapsible .toolbarTitle{margin-left:1.5rem}:host .collapseIcon{position:absolute;top:-.09375rem;font-size:1.375rem;font-weight:500}:host .additionalInfo{position:absolute;margin-left:.25rem;color:#069;cursor:pointer;font-size:1rem;font-weight:500}:host .additionalInfo:hover,:host .additionalInfo:focus,:host .additionalInfo:active{color:#14516f}:host .toolbarRight{display:inline-flex;margin-bottom:.625rem;margin-left:auto}@media (max-width: 959.98px){:host .toolbarRight{display:flex;width:100%;flex-basis:100%;margin-left:auto}:host .toolbarRight qd-search{min-width:0;flex-basis:0;flex-grow:1;flex-shrink:1}:host .toolbarRight qd-section-toolbar-action{flex-basis:auto;flex-grow:0;flex-shrink:0}}:host .toolbarAction{display:flex;align-items:center}@media (max-width: 959.98px){:host .toolbarAction{gap:.75rem}}:host .toolbarFilter{flex-basis:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "component", type: QdFilterComponent, selector: "qd-filter", inputs: ["filterData", "data-test-id"], outputs: ["queryStringOutput", "postBodyOutput", "valueChange"] }, { kind: "component", type: QdSearchComponent, selector: "qd-search", inputs: ["configData"] }, { kind: "directive", type: QdViewportAdaptiveDirective, selector: "[qdViewportAdaptive]" }, { kind: "directive", type: QdTooltipOnClickDirective, selector: "[qdTooltipOnClick]", inputs: ["qdTooltipContent"] }, { kind: "component", type: QdSectionToolbarActionComponent, selector: "qd-section-toolbar-action", inputs: ["config"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdSectionToolbarComponent, isStandalone: false, selector: "qd-section-toolbar", inputs: { config: "config" }, viewQueries: [{ propertyName: "toolbarComponents", predicate: ["filter, search"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"{ toolbarHeader: true, collapsible: config.collapse?.isEnabled }\" (click)=\"toggleCollapse()\">\n  <qd-icon class=\"collapseIcon\" *ngIf=\"config.collapse?.isEnabled\" [icon]=\"isCollapsed ? 'ctrlRight' : 'ctrlDown'\">\n  </qd-icon>\n\n  <span class=\"toolbarTitle\" *ngIf=\"config.title\">{{ config.title.i18n | translate }}</span>\n  <qd-icon\n    *ngIf=\"isTooltipVisible\"\n    class=\"additionalInfo\"\n    icon=\"circleInfo\"\n    qdTooltipOnClick\n    [qdTooltipContent]=\"tooltipContent\"\n  ></qd-icon>\n</div>\n\n<ng-container *ngIf=\"!isCollapsed\">\n  <div class=\"toolbarRight\">\n    <qd-search #search [configData]=\"searchConfigData\"></qd-search>\n    <qd-section-toolbar-action qdViewportAdaptive class=\"toolbarAction\" [config]=\"config\"></qd-section-toolbar-action>\n  </div>\n\n  <qd-filter class=\"toolbarFilter\" #filter [filterData]=\"filterData\"></qd-filter>\n</ng-container>\n", styles: [":host{position:relative;display:flex;flex-wrap:wrap;margin-bottom:.625rem}:host .toolbarHeader{color:#333;font-size:1rem;font-weight:700;line-height:1.5rem;margin-bottom:.625rem}@media (max-width: 599.98px){:host .toolbarHeader{margin-bottom:.3125rem}}:host .collapsible{cursor:pointer}:host .collapsible .toolbarTitle{margin-left:1.5rem}:host .collapseIcon{position:absolute;top:-.09375rem;font-size:1.375rem;font-weight:500}:host .additionalInfo{position:absolute;margin-left:.25rem;color:#069;cursor:pointer;font-size:1rem;font-weight:500}:host .additionalInfo:hover,:host .additionalInfo:focus,:host .additionalInfo:active{color:#14516f}:host .toolbarRight{display:inline-flex;margin-bottom:.625rem;margin-left:auto}@media (max-width: 959.98px){:host .toolbarRight{display:flex;width:100%;flex-basis:100%;margin-left:auto}:host .toolbarRight qd-search{min-width:0;flex-basis:0;flex-grow:1;flex-shrink:1}:host .toolbarRight qd-section-toolbar-action{flex-basis:auto;flex-grow:0;flex-shrink:0}}:host .toolbarAction{display:flex;align-items:center}@media (max-width: 959.98px){:host .toolbarAction{gap:.75rem}}:host .toolbarFilter{flex-basis:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdFilterComponent, selector: "qd-filter", inputs: ["filterData", "data-test-id"], outputs: ["queryStringOutput", "postBodyOutput", "valueChange"] }, { kind: "component", type: QdSearchComponent, selector: "qd-search", inputs: ["configData"] }, { kind: "directive", type: QdViewportAdaptiveDirective, selector: "[qdViewportAdaptive]" }, { kind: "directive", type: QdTooltipOnClickDirective, selector: "[qdTooltipOnClick]", inputs: ["qdTooltipContent"] }, { kind: "component", type: QdSectionToolbarActionComponent, selector: "qd-section-toolbar-action", inputs: ["config"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdSectionToolbarComponent, decorators: [{
             type: Component,
@@ -26887,7 +26937,7 @@ class QdTreeRowActionsSecondaryMenuComponent {
             .subscribe(({ payload }) => this._viewonly$.next(payload.isViewonly));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTreeRowActionsSecondaryMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTreeRowActionsSecondaryMenuComponent, isStandalone: false, selector: "[qd-tree-row-actions-secondary-menu]", inputs: { rowIndex: "rowIndex", rowData: "rowData", config: "config", testId: "testId" }, ngImport: i0, template: "<ng-container *ngIf=\"hasVisibleActions$ | async\">\n  <button\n    type=\"button\"\n    [qdPopoverOnClick]=\"menu\"\n    [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n    [qdPopoverStopPropagation]=\"true\"\n    [qdPopoverMinWidth]=\"200\"\n    class=\"menu-button\"\n    [attr.data-test-id]=\"testId + '-toggler'\"\n  >\n    <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n  </button>\n\n  <ng-template #menu>\n    <ng-container *ngFor=\"let action of actions$ | async; let i = index\">\n      <button\n        *ngIf=\"!action.isHidden\"\n        class=\"action-button\"\n        (click)=\"handleSecondaryAction(action.type, rowIndex, action.isHidden)\"\n        [attr.data-test-id]=\"testId + '-' + i\"\n      >\n        {{ action.i18n | translate }}\n      </button>\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [".menu-button{display:flex;padding:0 .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem;vertical-align:middle}.menu-button:hover,.menu-button:focus{color:#000}.action-button{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.action-button:hover{background-color:#f2f7fa}\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: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTreeRowActionsSecondaryMenuComponent, isStandalone: false, selector: "[qd-tree-row-actions-secondary-menu]", inputs: { rowIndex: "rowIndex", rowData: "rowData", config: "config", testId: "testId" }, ngImport: i0, template: "<ng-container *ngIf=\"hasVisibleActions$ | async\">\n  <button\n    type=\"button\"\n    [qdPopoverOnClick]=\"menu\"\n    [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n    [qdPopoverStopPropagation]=\"true\"\n    [qdPopoverMinWidth]=\"200\"\n    class=\"menu-button\"\n    [attr.data-test-id]=\"testId + '-toggler'\"\n  >\n    <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n  </button>\n\n  <ng-template #menu>\n    <ng-container *ngFor=\"let action of actions$ | async; let i = index\">\n      <button\n        *ngIf=\"!action.isHidden\"\n        class=\"action-button\"\n        (click)=\"handleSecondaryAction(action.type, rowIndex, action.isHidden)\"\n        [attr.data-test-id]=\"testId + '-' + i\"\n      >\n        {{ action.i18n | translate }}\n      </button>\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [".menu-button{display:flex;padding:0 .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem;vertical-align:middle}.menu-button:hover,.menu-button:focus{color:#000}.action-button{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.action-button:hover{background-color:#f2f7fa}\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: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTreeRowActionsSecondaryMenuComponent, decorators: [{
             type: Component,
@@ -26906,9 +26956,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 args: [{ required: true }]
             }] } });
-// @ts-strict-ignore
 class QdTreeRowComponent {
-    contextService = inject(QdDataFacetsContextService);
     columnsDetails;
     indentation = 0;
     config;
@@ -26929,6 +26977,7 @@ class QdTreeRowComponent {
         return this._rowIndex;
     }
     expanded = false;
+    contextService = inject(QdDataFacetsContextService);
     _rowData;
     _rowIndex;
     onExpanderClick() {
@@ -26948,7 +26997,7 @@ class QdTreeRowComponent {
     getComponentInputs(item) {
         const i18n = item.i18n;
         const config = item.options;
-        const data = this.rowData[item.column];
+        const data = item.column ? this.rowData[item.column] : undefined;
         const testId = this.testId + '-cell-' + item.index;
         const isTranslated = item.options && item.options.isTranslated !== undefined;
         return {
@@ -26959,11 +27008,11 @@ class QdTreeRowComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTreeRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTreeRowComponent, isStandalone: false, selector: "[qd-tree-row]", inputs: { columnsDetails: "columnsDetails", indentation: "indentation", config: "config", testId: ["data-test-id", "testId"], rowData: "rowData", rowIndex: "rowIndex" }, providers: [QdDataFacetsContextService], ngImport: i0, template: "<ng-container *ngFor=\"let column of columnsDetails\">\n  <ng-container [ngSwitch]=\"column.type\">\n    <ng-container *ngSwitchCase=\"'group'\">\n      <td\n        (click)=\"onExpanderClick()\"\n        [class]=\"\n          [\n            'qd-tree-body-cell',\n            'qd-tree-body-cell-group',\n            'qd-tree-body-cell-group-index-' + indentation,\n            getCellClass(column),\n            rowData?.nestedRows ? ' expandable' : ''\n          ].join(' ')\n        \"\n        [attr.data-test-id]=\"testId + '-cell-' + indentation\"\n      >\n        <ng-container *ngIf=\"rowData?.nestedRows\">\n          <qd-icon\n            *ngIf=\"!expanded\"\n            class=\"expander\"\n            [attr.data-test-id]=\"testId + '-opening-expander'\"\n            [icon]=\"'ctrlRight'\"\n          ></qd-icon>\n          <qd-icon *ngIf=\"expanded\" class=\"expander\" [icon]=\"'ctrlDown'\"></qd-icon>\n        </ng-container>\n\n        <ng-container *ngFor=\"let groupedColumn of $any(column).groupedColumns; let itemIndex = index\">\n          <span *ngIf=\"rowData[groupedColumn.column]\">{{ rowData[groupedColumn.column] }}</span>\n        </ng-container>\n      </td>\n    </ng-container>\n\n    <ng-container *ngIf=\"column.type !== 'group'\">\n      <td [class]=\"'qd-tree-body-cell ' + getCellClass(column)\">\n        <ng-container *ngComponentOutlet=\"getComponentType(column); inputs: getComponentInputs(column)\"></ng-container>\n      </td>\n    </ng-container>\n  </ng-container>\n</ng-container>\n\n<td\n  *ngIf=\"config.secondaryActions?.length > 0\"\n  class=\"qd-tree-body-cell\"\n  [attr.data-test-id]=\"testId + '-cell-inline-actions'\"\n  qd-tree-row-actions-secondary-menu\n  [config]=\"config\"\n  [rowIndex]=\"columnsDetails[0].index\"\n  [rowData]=\"rowData\"\n  [testId]=\"testId + '-secondary-actions'\"\n></td>\n", styles: ["[qd-tree-row] .qd-data-facets{display:block}[qd-tree-row] qd-data-facets-progress.qd-data-facets{transform:translateY(.1875rem)}[qd-tree-row] qd-data-facets-chip.qd-data-facets{display:contents}[qd-tree-row] .qd-table__body-cell--merged qd-data-facets-text{padding-top:0}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "component", type: QdTreeRowActionsSecondaryMenuComponent, selector: "[qd-tree-row-actions-secondary-menu]", inputs: ["rowIndex", "rowData", "config", "testId"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTreeRowComponent, isStandalone: false, selector: "[qd-tree-row]", inputs: { columnsDetails: "columnsDetails", indentation: "indentation", config: "config", testId: ["data-test-id", "testId"], rowData: "rowData", rowIndex: "rowIndex" }, host: { properties: { "attr.data-test-id": "this.testId" } }, providers: [QdDataFacetsContextService], ngImport: i0, template: "<ng-container *ngFor=\"let column of columnsDetails\">\n  <ng-container [ngSwitch]=\"column.type\">\n    <ng-container *ngSwitchCase=\"'group'\">\n      <td\n        (click)=\"onExpanderClick()\"\n        [class]=\"\n          [\n            'qd-tree-body-cell',\n            'qd-tree-body-cell-group',\n            'qd-tree-body-cell-group-index-' + indentation,\n            getCellClass(column),\n            rowData?.nestedRows ? ' expandable' : ''\n          ].join(' ')\n        \"\n        [attr.data-test-id]=\"testId + '-cell-' + indentation\"\n      >\n        <ng-container *ngIf=\"rowData?.nestedRows\">\n          <qd-icon\n            *ngIf=\"!expanded\"\n            class=\"expander\"\n            [attr.data-test-id]=\"testId + '-opening-expander'\"\n            [icon]=\"'ctrlRight'\"\n          ></qd-icon>\n          <qd-icon *ngIf=\"expanded\" class=\"expander\" [icon]=\"'ctrlDown'\"></qd-icon>\n        </ng-container>\n\n        <ng-container *ngFor=\"let groupedColumn of $any(column).groupedColumns; let itemIndex = index\">\n          <span *ngIf=\"rowData[groupedColumn.column]\">{{ rowData[groupedColumn.column] }}</span>\n        </ng-container>\n      </td>\n    </ng-container>\n\n    <ng-container *ngIf=\"column.type !== 'group'\">\n      <td [class]=\"'qd-tree-body-cell ' + getCellClass(column)\">\n        <ng-container *ngComponentOutlet=\"getComponentType(column); inputs: getComponentInputs(column)\"></ng-container>\n      </td>\n    </ng-container>\n  </ng-container>\n</ng-container>\n\n<td\n  *ngIf=\"config.secondaryActions?.length > 0\"\n  class=\"qd-tree-body-cell\"\n  [attr.data-test-id]=\"testId + '-cell-inline-actions'\"\n  qd-tree-row-actions-secondary-menu\n  [config]=\"config\"\n  [rowIndex]=\"columnsDetails[0].index\"\n  [rowData]=\"rowData\"\n  [testId]=\"testId + '-secondary-actions'\"\n></td>\n", styles: ["[qd-tree-row] .qd-data-facets{display:block}[qd-tree-row] qd-data-facets-progress.qd-data-facets{transform:translateY(.1875rem)}[qd-tree-row] qd-data-facets-chip.qd-data-facets{display:contents}[qd-tree-row] qd-data-facets-text.qd-data-facets{margin:.625rem 0}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdTreeRowActionsSecondaryMenuComponent, selector: "[qd-tree-row-actions-secondary-menu]", inputs: ["rowIndex", "rowData", "config", "testId"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTreeRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[qd-tree-row]', encapsulation: ViewEncapsulation.None, providers: [QdDataFacetsContextService], standalone: false, template: "<ng-container *ngFor=\"let column of columnsDetails\">\n  <ng-container [ngSwitch]=\"column.type\">\n    <ng-container *ngSwitchCase=\"'group'\">\n      <td\n        (click)=\"onExpanderClick()\"\n        [class]=\"\n          [\n            'qd-tree-body-cell',\n            'qd-tree-body-cell-group',\n            'qd-tree-body-cell-group-index-' + indentation,\n            getCellClass(column),\n            rowData?.nestedRows ? ' expandable' : ''\n          ].join(' ')\n        \"\n        [attr.data-test-id]=\"testId + '-cell-' + indentation\"\n      >\n        <ng-container *ngIf=\"rowData?.nestedRows\">\n          <qd-icon\n            *ngIf=\"!expanded\"\n            class=\"expander\"\n            [attr.data-test-id]=\"testId + '-opening-expander'\"\n            [icon]=\"'ctrlRight'\"\n          ></qd-icon>\n          <qd-icon *ngIf=\"expanded\" class=\"expander\" [icon]=\"'ctrlDown'\"></qd-icon>\n        </ng-container>\n\n        <ng-container *ngFor=\"let groupedColumn of $any(column).groupedColumns; let itemIndex = index\">\n          <span *ngIf=\"rowData[groupedColumn.column]\">{{ rowData[groupedColumn.column] }}</span>\n        </ng-container>\n      </td>\n    </ng-container>\n\n    <ng-container *ngIf=\"column.type !== 'group'\">\n      <td [class]=\"'qd-tree-body-cell ' + getCellClass(column)\">\n        <ng-container *ngComponentOutlet=\"getComponentType(column); inputs: getComponentInputs(column)\"></ng-container>\n      </td>\n    </ng-container>\n  </ng-container>\n</ng-container>\n\n<td\n  *ngIf=\"config.secondaryActions?.length > 0\"\n  class=\"qd-tree-body-cell\"\n  [attr.data-test-id]=\"testId + '-cell-inline-actions'\"\n  qd-tree-row-actions-secondary-menu\n  [config]=\"config\"\n  [rowIndex]=\"columnsDetails[0].index\"\n  [rowData]=\"rowData\"\n  [testId]=\"testId + '-secondary-actions'\"\n></td>\n", styles: ["[qd-tree-row] .qd-data-facets{display:block}[qd-tree-row] qd-data-facets-progress.qd-data-facets{transform:translateY(.1875rem)}[qd-tree-row] qd-data-facets-chip.qd-data-facets{display:contents}[qd-tree-row] .qd-table__body-cell--merged qd-data-facets-text{padding-top:0}\n"] }]
+            args: [{ selector: '[qd-tree-row]', encapsulation: ViewEncapsulation.None, providers: [QdDataFacetsContextService], standalone: false, template: "<ng-container *ngFor=\"let column of columnsDetails\">\n  <ng-container [ngSwitch]=\"column.type\">\n    <ng-container *ngSwitchCase=\"'group'\">\n      <td\n        (click)=\"onExpanderClick()\"\n        [class]=\"\n          [\n            'qd-tree-body-cell',\n            'qd-tree-body-cell-group',\n            'qd-tree-body-cell-group-index-' + indentation,\n            getCellClass(column),\n            rowData?.nestedRows ? ' expandable' : ''\n          ].join(' ')\n        \"\n        [attr.data-test-id]=\"testId + '-cell-' + indentation\"\n      >\n        <ng-container *ngIf=\"rowData?.nestedRows\">\n          <qd-icon\n            *ngIf=\"!expanded\"\n            class=\"expander\"\n            [attr.data-test-id]=\"testId + '-opening-expander'\"\n            [icon]=\"'ctrlRight'\"\n          ></qd-icon>\n          <qd-icon *ngIf=\"expanded\" class=\"expander\" [icon]=\"'ctrlDown'\"></qd-icon>\n        </ng-container>\n\n        <ng-container *ngFor=\"let groupedColumn of $any(column).groupedColumns; let itemIndex = index\">\n          <span *ngIf=\"rowData[groupedColumn.column]\">{{ rowData[groupedColumn.column] }}</span>\n        </ng-container>\n      </td>\n    </ng-container>\n\n    <ng-container *ngIf=\"column.type !== 'group'\">\n      <td [class]=\"'qd-tree-body-cell ' + getCellClass(column)\">\n        <ng-container *ngComponentOutlet=\"getComponentType(column); inputs: getComponentInputs(column)\"></ng-container>\n      </td>\n    </ng-container>\n  </ng-container>\n</ng-container>\n\n<td\n  *ngIf=\"config.secondaryActions?.length > 0\"\n  class=\"qd-tree-body-cell\"\n  [attr.data-test-id]=\"testId + '-cell-inline-actions'\"\n  qd-tree-row-actions-secondary-menu\n  [config]=\"config\"\n  [rowIndex]=\"columnsDetails[0].index\"\n  [rowData]=\"rowData\"\n  [testId]=\"testId + '-secondary-actions'\"\n></td>\n", styles: ["[qd-tree-row] .qd-data-facets{display:block}[qd-tree-row] qd-data-facets-progress.qd-data-facets{transform:translateY(.1875rem)}[qd-tree-row] qd-data-facets-chip.qd-data-facets{display:contents}[qd-tree-row] qd-data-facets-text.qd-data-facets{margin:.625rem 0}\n"] }]
         }], propDecorators: { columnsDetails: [{
                 type: Input
             }], indentation: [{
@@ -26972,6 +27021,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input,
                 args: [{ required: true }]
             }], testId: [{
+                type: HostBinding,
+                args: ['attr.data-test-id']
+            }, {
                 type: Input,
                 args: ['data-test-id']
             }], rowData: [{
@@ -27002,11 +27054,11 @@ class QdTreeBodyComponent {
             this.treeRowsService.updateRows(this.data);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTreeBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTreeBodyComponent, isStandalone: false, selector: "[qd-tree-body]", inputs: { config: "config", data: "data", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-tree-body" }, usesOnChanges: true, ngImport: i0, template: "<ng-container\n  *ngFor=\"let rowData of tree$ | async; index as rowIndex\"\n  [ngTemplateOutlet]=\"rowTemplate\"\n  [ngTemplateOutletContext]=\"{ rowData, rowIndex, indentation: 0 }\"\n></ng-container>\n\n<ng-template #rowTemplate let-rowData=\"rowData\" let-rowIndex=\"rowIndex\" let-indentation=\"indentation\">\n  <tr\n    #row\n    qd-tree-row\n    [class]=\"'qd-tree-body-row'\"\n    [columnsDetails]=\"columnsDetails\"\n    [rowData]=\"rowData\"\n    [rowIndex]=\"rowIndex\"\n    [config]=\"config\"\n    [indentation]=\"indentation\"\n    [data-test-id]=\"testId + '-row-' + rowIndex\"\n  ></tr>\n  <ng-container *ngIf=\"row.expanded && rowData.nestedRows\">\n    <ng-container\n      *ngFor=\"let rowData of rowData.nestedRows; index as rowIndex\"\n      [ngTemplateOutlet]=\"rowTemplate\"\n      [ngTemplateOutletContext]=\"{ rowData, rowIndex, indentation: indentation + 1 }\"\n    ></ng-container>\n  </ng-container>\n</ng-template>\n", styles: [".qd-tree-body .qd-tree-body-row{border:0 solid rgb(229,229,229);border-left-width:.0625rem}.qd-tree-body .qd-tree-body-cell{border:0 solid rgb(229,229,229);border-right-width:.0625rem;border-bottom-width:.0625rem}.qd-tree-body .qd-tree-body-cell:first-child{border-left-width:.0625rem}.qd-tree-body .qd-tree-body-cell-group span{margin-left:.25rem}.qd-tree-body .qd-tree-body-cell-group span+span:before{content:\"\\e002\";font-family:Quadrel-Icon,sans-serif}.qd-tree-body .qd-tree-body-cell-group.expandable{cursor:pointer}.qd-tree-body .qd-tree-body-cell-group-index-0{padding-left:1rem!important}.qd-tree-body .qd-tree-body-cell-group-index-1{padding-left:2rem!important}.qd-tree-body .qd-tree-body-cell-group-index-2{padding-left:3rem!important}.qd-tree-body .qd-tree-body-cell-group-index-3{padding-left:4rem!important}.qd-tree-body .qd-tree-body-cell-group-index-4{padding-left:5rem!important}.qd-tree-body .qd-tree-body-cell-group-index-5{padding-left:6rem!important}.qd-tree-body .qd-tree-body-cell-group-index-6{padding-left:7rem!important}.qd-tree-body .qd-tree-body-cell-group-index-7{padding-left:8rem!important}.qd-tree-body .qd-tree-body-cell-group-index-8{padding-left:9rem!important}.qd-tree-body .qd-tree-body-cell-group-index-9{padding-left:10rem!important}.qd-tree-body .expander{width:0;cursor:pointer;transform:translate(-.75rem)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QdTreeRowComponent, selector: "[qd-tree-row]", inputs: ["columnsDetails", "indentation", "config", "data-test-id", "rowData", "rowIndex"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTreeBodyComponent, isStandalone: false, selector: "[qd-tree-body]", inputs: { config: "config", data: "data", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-tree-body" }, usesOnChanges: true, ngImport: i0, template: "<ng-container\n  *ngFor=\"let rowData of tree$ | async; index as rowIndex\"\n  [ngTemplateOutlet]=\"rowTemplate\"\n  [ngTemplateOutletContext]=\"{ rowData, rowIndex, indentation: 0 }\"\n></ng-container>\n\n<ng-template #rowTemplate let-rowData=\"rowData\" let-rowIndex=\"rowIndex\" let-indentation=\"indentation\">\n  <tr\n    #row\n    qd-tree-row\n    [class]=\"'qd-tree-body-row'\"\n    [columnsDetails]=\"columnsDetails\"\n    [rowData]=\"rowData\"\n    [rowIndex]=\"rowIndex\"\n    [config]=\"config\"\n    [indentation]=\"indentation\"\n    [data-test-id]=\"testId + '-row-' + rowIndex\"\n  ></tr>\n  <ng-container *ngIf=\"row.expanded && rowData.nestedRows\">\n    <ng-container\n      *ngFor=\"let rowData of rowData.nestedRows; index as rowIndex\"\n      [ngTemplateOutlet]=\"rowTemplate\"\n      [ngTemplateOutletContext]=\"{ rowData, rowIndex, indentation: indentation + 1 }\"\n    ></ng-container>\n  </ng-container>\n</ng-template>\n", styles: [".qd-tree-body .qd-tree-body-row{border:0 solid rgb(229,229,229);border-left-width:.0625rem}.qd-tree-body .qd-tree-body-row:hover{background-color:#f5f5f5}.qd-tree-body .qd-tree-body-cell{border:0 solid rgb(229,229,229);border-right-width:.0625rem;border-bottom-width:.0625rem}.qd-tree-body .qd-tree-body-cell:first-child{border-left-width:.0625rem}.qd-tree-body .qd-tree-body-cell-group span{margin-left:.25rem}.qd-tree-body .qd-tree-body-cell-group span+span:before{content:\"\\e002\";font-family:Quadrel-Icon,sans-serif}.qd-tree-body .qd-tree-body-cell-group.expandable{cursor:pointer}.qd-tree-body .qd-tree-body-cell-group-index-0{padding-left:1rem!important}.qd-tree-body .qd-tree-body-cell-group-index-1{padding-left:2rem!important}.qd-tree-body .qd-tree-body-cell-group-index-2{padding-left:3rem!important}.qd-tree-body .qd-tree-body-cell-group-index-3{padding-left:4rem!important}.qd-tree-body .qd-tree-body-cell-group-index-4{padding-left:5rem!important}.qd-tree-body .qd-tree-body-cell-group-index-5{padding-left:6rem!important}.qd-tree-body .qd-tree-body-cell-group-index-6{padding-left:7rem!important}.qd-tree-body .qd-tree-body-cell-group-index-7{padding-left:8rem!important}.qd-tree-body .qd-tree-body-cell-group-index-8{padding-left:9rem!important}.qd-tree-body .qd-tree-body-cell-group-index-9{padding-left:10rem!important}.qd-tree-body .expander{width:0;cursor:pointer;transform:translate(-.75rem)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QdTreeRowComponent, selector: "[qd-tree-row]", inputs: ["columnsDetails", "indentation", "config", "data-test-id", "rowData", "rowIndex"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTreeBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[qd-tree-body]', encapsulation: ViewEncapsulation.None, host: { class: 'qd-tree-body' }, standalone: false, template: "<ng-container\n  *ngFor=\"let rowData of tree$ | async; index as rowIndex\"\n  [ngTemplateOutlet]=\"rowTemplate\"\n  [ngTemplateOutletContext]=\"{ rowData, rowIndex, indentation: 0 }\"\n></ng-container>\n\n<ng-template #rowTemplate let-rowData=\"rowData\" let-rowIndex=\"rowIndex\" let-indentation=\"indentation\">\n  <tr\n    #row\n    qd-tree-row\n    [class]=\"'qd-tree-body-row'\"\n    [columnsDetails]=\"columnsDetails\"\n    [rowData]=\"rowData\"\n    [rowIndex]=\"rowIndex\"\n    [config]=\"config\"\n    [indentation]=\"indentation\"\n    [data-test-id]=\"testId + '-row-' + rowIndex\"\n  ></tr>\n  <ng-container *ngIf=\"row.expanded && rowData.nestedRows\">\n    <ng-container\n      *ngFor=\"let rowData of rowData.nestedRows; index as rowIndex\"\n      [ngTemplateOutlet]=\"rowTemplate\"\n      [ngTemplateOutletContext]=\"{ rowData, rowIndex, indentation: indentation + 1 }\"\n    ></ng-container>\n  </ng-container>\n</ng-template>\n", styles: [".qd-tree-body .qd-tree-body-row{border:0 solid rgb(229,229,229);border-left-width:.0625rem}.qd-tree-body .qd-tree-body-cell{border:0 solid rgb(229,229,229);border-right-width:.0625rem;border-bottom-width:.0625rem}.qd-tree-body .qd-tree-body-cell:first-child{border-left-width:.0625rem}.qd-tree-body .qd-tree-body-cell-group span{margin-left:.25rem}.qd-tree-body .qd-tree-body-cell-group span+span:before{content:\"\\e002\";font-family:Quadrel-Icon,sans-serif}.qd-tree-body .qd-tree-body-cell-group.expandable{cursor:pointer}.qd-tree-body .qd-tree-body-cell-group-index-0{padding-left:1rem!important}.qd-tree-body .qd-tree-body-cell-group-index-1{padding-left:2rem!important}.qd-tree-body .qd-tree-body-cell-group-index-2{padding-left:3rem!important}.qd-tree-body .qd-tree-body-cell-group-index-3{padding-left:4rem!important}.qd-tree-body .qd-tree-body-cell-group-index-4{padding-left:5rem!important}.qd-tree-body .qd-tree-body-cell-group-index-5{padding-left:6rem!important}.qd-tree-body .qd-tree-body-cell-group-index-6{padding-left:7rem!important}.qd-tree-body .qd-tree-body-cell-group-index-7{padding-left:8rem!important}.qd-tree-body .qd-tree-body-cell-group-index-8{padding-left:9rem!important}.qd-tree-body .qd-tree-body-cell-group-index-9{padding-left:10rem!important}.qd-tree-body .expander{width:0;cursor:pointer;transform:translate(-.75rem)}\n"] }]
+            args: [{ selector: '[qd-tree-body]', encapsulation: ViewEncapsulation.None, host: { class: 'qd-tree-body' }, standalone: false, template: "<ng-container\n  *ngFor=\"let rowData of tree$ | async; index as rowIndex\"\n  [ngTemplateOutlet]=\"rowTemplate\"\n  [ngTemplateOutletContext]=\"{ rowData, rowIndex, indentation: 0 }\"\n></ng-container>\n\n<ng-template #rowTemplate let-rowData=\"rowData\" let-rowIndex=\"rowIndex\" let-indentation=\"indentation\">\n  <tr\n    #row\n    qd-tree-row\n    [class]=\"'qd-tree-body-row'\"\n    [columnsDetails]=\"columnsDetails\"\n    [rowData]=\"rowData\"\n    [rowIndex]=\"rowIndex\"\n    [config]=\"config\"\n    [indentation]=\"indentation\"\n    [data-test-id]=\"testId + '-row-' + rowIndex\"\n  ></tr>\n  <ng-container *ngIf=\"row.expanded && rowData.nestedRows\">\n    <ng-container\n      *ngFor=\"let rowData of rowData.nestedRows; index as rowIndex\"\n      [ngTemplateOutlet]=\"rowTemplate\"\n      [ngTemplateOutletContext]=\"{ rowData, rowIndex, indentation: indentation + 1 }\"\n    ></ng-container>\n  </ng-container>\n</ng-template>\n", styles: [".qd-tree-body .qd-tree-body-row{border:0 solid rgb(229,229,229);border-left-width:.0625rem}.qd-tree-body .qd-tree-body-row:hover{background-color:#f5f5f5}.qd-tree-body .qd-tree-body-cell{border:0 solid rgb(229,229,229);border-right-width:.0625rem;border-bottom-width:.0625rem}.qd-tree-body .qd-tree-body-cell:first-child{border-left-width:.0625rem}.qd-tree-body .qd-tree-body-cell-group span{margin-left:.25rem}.qd-tree-body .qd-tree-body-cell-group span+span:before{content:\"\\e002\";font-family:Quadrel-Icon,sans-serif}.qd-tree-body .qd-tree-body-cell-group.expandable{cursor:pointer}.qd-tree-body .qd-tree-body-cell-group-index-0{padding-left:1rem!important}.qd-tree-body .qd-tree-body-cell-group-index-1{padding-left:2rem!important}.qd-tree-body .qd-tree-body-cell-group-index-2{padding-left:3rem!important}.qd-tree-body .qd-tree-body-cell-group-index-3{padding-left:4rem!important}.qd-tree-body .qd-tree-body-cell-group-index-4{padding-left:5rem!important}.qd-tree-body .qd-tree-body-cell-group-index-5{padding-left:6rem!important}.qd-tree-body .qd-tree-body-cell-group-index-6{padding-left:7rem!important}.qd-tree-body .qd-tree-body-cell-group-index-7{padding-left:8rem!important}.qd-tree-body .qd-tree-body-cell-group-index-8{padding-left:9rem!important}.qd-tree-body .qd-tree-body-cell-group-index-9{padding-left:10rem!important}.qd-tree-body .expander{width:0;cursor:pointer;transform:translate(-.75rem)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], data: [{
@@ -27470,11 +27522,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 class QdPageControlPanelComponent {
     config;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageControlPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageControlPanelComponent, isStandalone: false, selector: "qd-page-control-panel", inputs: { config: "config" }, ngImport: i0, template: "<header>\n  {{ config.title.i18n | translate }}\n</header>\n\n<main>\n  <ng-content select=\"qd-text-section\"></ng-content>\n  <ng-content select=\"qd-panel-section\"></ng-content>\n  <ng-content select=\"qd-section\"></ng-content>\n</main>\n", styles: ["qd-page-control-panel{position:relative;display:flex;height:100%;flex-direction:column;background:#fff}qd-page-control-panel header{padding:.75rem 1rem .5rem;border-bottom:.125rem solid rgb(213,213,213);color:#171717;font-size:.875rem;font-weight:700;line-height:1.25rem}qd-page-control-panel main{flex-grow:99;overflow-y:auto}qd-page-control-panel qd-panel-section:last-child{margin-bottom:.75rem}qd-page-control-panel qd-section{margin:0 1rem}qd-page-control-panel qd-section:first-child{margin-top:1rem}qd-page-control-panel qd-section:last-child{margin-bottom:1rem}\n"], dependencies: [{ kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageControlPanelComponent, isStandalone: false, selector: "qd-page-control-panel", inputs: { config: "config" }, ngImport: i0, template: "<header>\n  {{ config.title.i18n | translate }}\n</header>\n\n<main cdkScrollable>\n  <ng-content select=\"qd-text-section\"></ng-content>\n  <ng-content select=\"qd-panel-section\"></ng-content>\n  <ng-content select=\"qd-section\"></ng-content>\n</main>\n", styles: ["qd-page-control-panel{position:relative;display:flex;height:100%;flex-direction:column;background:#fff}qd-page-control-panel header{padding:.75rem 1rem .5rem;border-bottom:.125rem solid rgb(213,213,213);color:#171717;font-size:.875rem;font-weight:700;line-height:1.25rem}qd-page-control-panel main{flex-grow:99;overflow-y:auto}qd-page-control-panel qd-panel-section:last-child{margin-bottom:.75rem}qd-page-control-panel qd-section{margin:0 1rem}qd-page-control-panel qd-section:first-child{margin-top:1rem}qd-page-control-panel qd-section:last-child{margin-bottom:1rem}\n"], dependencies: [{ kind: "directive", type: i1$2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageControlPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-page-control-panel', encapsulation: ViewEncapsulation.None, standalone: false, template: "<header>\n  {{ config.title.i18n | translate }}\n</header>\n\n<main>\n  <ng-content select=\"qd-text-section\"></ng-content>\n  <ng-content select=\"qd-panel-section\"></ng-content>\n  <ng-content select=\"qd-section\"></ng-content>\n</main>\n", styles: ["qd-page-control-panel{position:relative;display:flex;height:100%;flex-direction:column;background:#fff}qd-page-control-panel header{padding:.75rem 1rem .5rem;border-bottom:.125rem solid rgb(213,213,213);color:#171717;font-size:.875rem;font-weight:700;line-height:1.25rem}qd-page-control-panel main{flex-grow:99;overflow-y:auto}qd-page-control-panel qd-panel-section:last-child{margin-bottom:.75rem}qd-page-control-panel qd-section{margin:0 1rem}qd-page-control-panel qd-section:first-child{margin-top:1rem}qd-page-control-panel qd-section:last-child{margin-bottom:1rem}\n"] }]
+            args: [{ selector: 'qd-page-control-panel', encapsulation: ViewEncapsulation.None, standalone: false, template: "<header>\n  {{ config.title.i18n | translate }}\n</header>\n\n<main cdkScrollable>\n  <ng-content select=\"qd-text-section\"></ng-content>\n  <ng-content select=\"qd-panel-section\"></ng-content>\n  <ng-content select=\"qd-section\"></ng-content>\n</main>\n", styles: ["qd-page-control-panel{position:relative;display:flex;height:100%;flex-direction:column;background:#fff}qd-page-control-panel header{padding:.75rem 1rem .5rem;border-bottom:.125rem solid rgb(213,213,213);color:#171717;font-size:.875rem;font-weight:700;line-height:1.25rem}qd-page-control-panel main{flex-grow:99;overflow-y:auto}qd-page-control-panel qd-panel-section:last-child{margin-bottom:.75rem}qd-page-control-panel qd-section{margin:0 1rem}qd-page-control-panel qd-section:first-child{margin-top:1rem}qd-page-control-panel qd-section:last-child{margin-bottom:1rem}\n"] }]
         }], propDecorators: { config: [{
                 type: Input,
                 args: [{ required: true }]
@@ -27662,8 +27714,13 @@ class QdPageInfoBannerComponent {
      */
     config;
     get typeClassName() {
+        if (this.isEmpty)
+            return 'qd-page-info-banner qd-page-info-banner-empty';
         return `qd-page-info-banner qd-page-info-banner-${this.config.type}`;
     }
+    get isEmpty() {
+        return !this.config?.type || !this.config?.i18n;
+    }
     getType() {
         return this.config?.type;
     }
@@ -27683,11 +27740,11 @@ class QdPageInfoBannerComponent {
         this.config?.link?.handler();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageInfoBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageInfoBannerComponent, isStandalone: false, selector: "qd-page-info-banner", inputs: { config: "config" }, host: { properties: { "attr.class": "this.typeClassName" } }, ngImport: i0, template: "<qd-icon [icon]=\"this.getIcon()\" class=\"icon\"></qd-icon>\n\n<div class=\"title\" *ngIf=\"config?.title\">{{ config.title.i18n | translate }}</div>\n<div class=\"message\">\n  <span>{{ config?.i18n | translate }}</span>\n  <a class=\"link\" *ngIf=\"config?.link\" (click)=\"handleLinkClick()\">{{ config.link.i18n | translate }}</a>\n</div>\n", styles: [":host{position:relative;display:block;width:100%;padding:1rem 2rem .5rem 2.75rem;border-width:.0625rem;border-style:solid;border-left-width:.25rem;margin-bottom:.5rem;background:#fff;box-shadow:0 0 .625rem #979797;font-size:.875rem;gap:.5rem;line-height:1rem}:host.qd-page-info-banner-info{border-color:#069}:host.qd-page-info-banner-info .icon,:host.qd-page-info-banner-info .title{color:#069}:host.qd-page-info-banner-warning{border-color:#ff9b00}:host.qd-page-info-banner-warning .icon,:host.qd-page-info-banner-warning .title{color:#ff9b00}:host.qd-page-info-banner-critical{border-color:#c70023}:host.qd-page-info-banner-critical .icon,:host.qd-page-info-banner-critical .title{color:#c70023}:host.qd-page-info-banner-positive{border-color:#00813a}:host.qd-page-info-banner-positive .icon,:host.qd-page-info-banner-positive .title{color:#00813a}:host .icon{position:absolute;top:.9375rem;left:1rem;font-size:1.25rem}:host .title{margin-bottom:.375rem;font-weight:500}:host .message{margin-bottom:.25rem;white-space:pre-wrap}:host .link{margin-bottom:.375rem;margin-left:.375rem;color:#069;cursor:pointer}:host .link:hover{text-decoration:underline}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageInfoBannerComponent, isStandalone: false, selector: "qd-page-info-banner", inputs: { config: "config" }, host: { properties: { "attr.class": "this.typeClassName" } }, ngImport: i0, template: "<qd-icon [icon]=\"this.getIcon()\" class=\"icon\"></qd-icon>\n\n<div class=\"title\" *ngIf=\"config?.title\">{{ config.title.i18n | translate }}</div>\n<div class=\"message\">\n  <span>{{ config?.i18n | translate }}</span>\n  <a class=\"link\" *ngIf=\"config?.link\" (click)=\"handleLinkClick()\">{{ config.link.i18n | translate }}</a>\n</div>\n", styles: [":host{position:relative;display:block;width:100%;padding:1rem 2rem .5rem 2.75rem;border-width:.0625rem;border-style:solid;border-left-width:.25rem;margin-bottom:.5rem;background:#fff;box-shadow:0 0 .625rem #979797;font-size:.875rem;gap:.5rem;line-height:1rem}:host.qd-page-info-banner-info{border-color:#069}:host.qd-page-info-banner-info .icon,:host.qd-page-info-banner-info .title{color:#069}:host.qd-page-info-banner-warning{border-color:#ff9b00}:host.qd-page-info-banner-warning .icon,:host.qd-page-info-banner-warning .title{color:#ff9b00}:host.qd-page-info-banner-critical{border-color:#c70023}:host.qd-page-info-banner-critical .icon,:host.qd-page-info-banner-critical .title{color:#c70023}:host.qd-page-info-banner-positive{border-color:#00813a}:host.qd-page-info-banner-positive .icon,:host.qd-page-info-banner-positive .title{color:#00813a}:host.qd-page-info-banner-empty{display:none}:host .icon{position:absolute;top:.9375rem;left:1rem;font-size:1.25rem}:host .title{margin-bottom:.375rem;font-weight:500}:host .message{margin-bottom:.25rem;white-space:pre-wrap}:host .link{margin-bottom:.375rem;margin-left:.375rem;color:#069;cursor:pointer}:host .link:hover{text-decoration:underline}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageInfoBannerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-page-info-banner', standalone: false, template: "<qd-icon [icon]=\"this.getIcon()\" class=\"icon\"></qd-icon>\n\n<div class=\"title\" *ngIf=\"config?.title\">{{ config.title.i18n | translate }}</div>\n<div class=\"message\">\n  <span>{{ config?.i18n | translate }}</span>\n  <a class=\"link\" *ngIf=\"config?.link\" (click)=\"handleLinkClick()\">{{ config.link.i18n | translate }}</a>\n</div>\n", styles: [":host{position:relative;display:block;width:100%;padding:1rem 2rem .5rem 2.75rem;border-width:.0625rem;border-style:solid;border-left-width:.25rem;margin-bottom:.5rem;background:#fff;box-shadow:0 0 .625rem #979797;font-size:.875rem;gap:.5rem;line-height:1rem}:host.qd-page-info-banner-info{border-color:#069}:host.qd-page-info-banner-info .icon,:host.qd-page-info-banner-info .title{color:#069}:host.qd-page-info-banner-warning{border-color:#ff9b00}:host.qd-page-info-banner-warning .icon,:host.qd-page-info-banner-warning .title{color:#ff9b00}:host.qd-page-info-banner-critical{border-color:#c70023}:host.qd-page-info-banner-critical .icon,:host.qd-page-info-banner-critical .title{color:#c70023}:host.qd-page-info-banner-positive{border-color:#00813a}:host.qd-page-info-banner-positive .icon,:host.qd-page-info-banner-positive .title{color:#00813a}:host .icon{position:absolute;top:.9375rem;left:1rem;font-size:1.25rem}:host .title{margin-bottom:.375rem;font-weight:500}:host .message{margin-bottom:.25rem;white-space:pre-wrap}:host .link{margin-bottom:.375rem;margin-left:.375rem;color:#069;cursor:pointer}:host .link:hover{text-decoration:underline}\n"] }]
+            args: [{ selector: 'qd-page-info-banner', standalone: false, template: "<qd-icon [icon]=\"this.getIcon()\" class=\"icon\"></qd-icon>\n\n<div class=\"title\" *ngIf=\"config?.title\">{{ config.title.i18n | translate }}</div>\n<div class=\"message\">\n  <span>{{ config?.i18n | translate }}</span>\n  <a class=\"link\" *ngIf=\"config?.link\" (click)=\"handleLinkClick()\">{{ config.link.i18n | translate }}</a>\n</div>\n", styles: [":host{position:relative;display:block;width:100%;padding:1rem 2rem .5rem 2.75rem;border-width:.0625rem;border-style:solid;border-left-width:.25rem;margin-bottom:.5rem;background:#fff;box-shadow:0 0 .625rem #979797;font-size:.875rem;gap:.5rem;line-height:1rem}:host.qd-page-info-banner-info{border-color:#069}:host.qd-page-info-banner-info .icon,:host.qd-page-info-banner-info .title{color:#069}:host.qd-page-info-banner-warning{border-color:#ff9b00}:host.qd-page-info-banner-warning .icon,:host.qd-page-info-banner-warning .title{color:#ff9b00}:host.qd-page-info-banner-critical{border-color:#c70023}:host.qd-page-info-banner-critical .icon,:host.qd-page-info-banner-critical .title{color:#c70023}:host.qd-page-info-banner-positive{border-color:#00813a}:host.qd-page-info-banner-positive .icon,:host.qd-page-info-banner-positive .title{color:#00813a}:host.qd-page-info-banner-empty{display:none}:host .icon{position:absolute;top:.9375rem;left:1rem;font-size:1.25rem}:host .title{margin-bottom:.375rem;font-weight:500}:host .message{margin-bottom:.25rem;white-space:pre-wrap}:host .link{margin-bottom:.375rem;margin-left:.375rem;color:#069;cursor:pointer}:host .link:hover{text-decoration:underline}\n"] }]
         }], propDecorators: { config: [{
                 type: Input,
                 args: [{ required: true }]
@@ -27842,7 +27899,7 @@ class QdDateFacetComponent {
         return this.facet.options;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDateFacetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDateFacetComponent, isStandalone: false, selector: "qd-date-facet", inputs: { facet: "facet", data: "data" }, ngImport: i0, template: "<qd-icon *ngIf=\"options.showIcon\" [icon]=\"'calendar'\"></qd-icon>\n{{ $any(data[facet.name]) | date }}\n", styles: [":host{display:block;margin-top:-.4375rem;font-weight:500}:host qd-icon{position:relative;top:.1875rem;font-size:1.3125rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDateFacetComponent, isStandalone: false, selector: "qd-date-facet", inputs: { facet: "facet", data: "data" }, ngImport: i0, template: "<qd-icon *ngIf=\"options.showIcon\" [icon]=\"'calendar'\"></qd-icon>\n{{ $any(data[facet.name]) | date }}\n", styles: [":host{display:block;margin-top:-.4375rem;font-weight:500}:host qd-icon{position:relative;top:.1875rem;font-size:1.3125rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDateFacetComponent, decorators: [{
             type: Component,
@@ -27900,7 +27957,7 @@ class QdReferencesFacetComponent {
         return this.data[this.facet.name];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdReferencesFacetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdReferencesFacetComponent, isStandalone: false, selector: "qd-references-facet", inputs: { facet: "facet", data: "data" }, ngImport: i0, template: "<ul>\n  <li *ngFor=\"let reference of references\">\n    <a [href]=\"reference.url\" type=\"button\" (click)=\"$event.stopPropagation()\">\n      <qd-icon icon=\"link\"></qd-icon>\n      {{ reference.label }}\n    </a>\n  </li>\n</ul>\n", styles: [":host ul{padding:0;margin:0;list-style:none}:host li{margin-bottom:.5rem;font-size:.875rem;line-height:.875rem}:host li:last-child{margin-bottom:0}:host a{border-bottom:.0625rem solid transparent;color:#069;outline:0;text-decoration:none}:host a:visited{color:#069}:host a:hover{border-bottom-color:#14516f;color:#14516f}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdReferencesFacetComponent, isStandalone: false, selector: "qd-references-facet", inputs: { facet: "facet", data: "data" }, ngImport: i0, template: "<ul>\n  <li *ngFor=\"let reference of references\">\n    <a [href]=\"reference.url\" type=\"button\" (click)=\"$event.stopPropagation()\">\n      <qd-icon icon=\"link\"></qd-icon>\n      {{ reference.label }}\n    </a>\n  </li>\n</ul>\n", styles: [":host ul{padding:0;margin:0;list-style:none}:host li{margin-bottom:.5rem;font-size:.875rem;line-height:.875rem}:host li:last-child{margin-bottom:0}:host a{border-bottom:.0625rem solid transparent;color:#069;outline:0;text-decoration:none}:host a:visited{color:#069}:host a:hover{border-bottom-color:#14516f;color:#14516f}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdReferencesFacetComponent, decorators: [{
             type: Component,
@@ -28596,6 +28653,7 @@ class QdPageObjectHeaderComponent {
     get headerFacets() {
         if (this.hasHeaderFacets(this.config))
             return this.config.headerFacets;
+        return undefined;
     }
     get isInspectAndViewMode$() {
         return this.pageStoreService.isViewonly$.pipe(takeUntil(this._destroyed$), map(isView => this.config.pageType === 'inspect' && isView));
@@ -28832,7 +28890,7 @@ class QdPageObjectHeaderComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageObjectHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageObjectHeaderComponent, isStandalone: false, selector: "qd-page-object-header", inputs: { config: "config", hasNavigation: "hasNavigation", testId: ["data-test-id", "testId"] }, host: { listeners: { "click": "toggleFacets()" }, properties: { "style.borderBottom": "borderBottomStyle", "class.in-dialog": "this.isInDialog" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\"><qd-spinner></qd-spinner></div>\n\n<div class=\"object-header-top\">\n  <header class=\"object-header-title\">{{ config.title.i18n | translate }}</header>\n  <div class=\"object-header-toolbar\">\n    <button class=\"button-icon\" data-test-id=\"archive-button\">\n      <qd-icon\n        *ngIf=\"showArchive$ | async\"\n        (click)=\"archiveButton?.handler()\"\n        class=\"header-action-icon\"\n        [icon]=\"'resultNew'\"\n      ></qd-icon>\n    </button>\n\n    <button class=\"button-icon\" data-test-id=\"delete-button\">\n      <qd-icon\n        class=\"header-action-icon\"\n        *ngIf=\"showDelete$ | async\"\n        (click)=\"deleteButton?.handler()\"\n        [icon]=\"'trash'\"\n      ></qd-icon>\n    </button>\n\n    <button *ngIf=\"showEdit$ | async\" qdButton (click)=\"edit()\" data-test-id=\"edit-button\">\n      {{ editButton?.label?.i18n || \"i18n.qd.page.header.edit\" | translate }}\n    </button>\n\n    <button *ngIf=\"showCancel$ | async\" qdButton qdButtonGhost (click)=\"cancel()\" data-test-id=\"cancel-button\">\n      {{ cancelButton.label?.i18n || \"i18n.qd.page.header.cancel\" | translate }}\n    </button>\n\n    <button\n      *ngIf=\"showSave$ | async\"\n      qdButton\n      (click)=\"save()\"\n      data-test-id=\"save-button\"\n      [disabled]=\"($canSave | async) === false\"\n    >\n      {{ saveButton.label?.i18n || \"i18n.qd.page.header.save\" | translate }}\n    </button>\n\n    <ng-container *ngIf=\"customActions$ | async as customActions\">\n      <ng-container *ngIf=\"!adaptiveMode; else adaptive\">\n        <button\n          [qdMenuButton]=\"customActions\"\n          [autoSize]=\"false\"\n          [data-test-id]=\"'page-'\"\n          *ngIf=\"customActions.actions.length > 1; else singleButton\"\n          data-test-id=\"custom-button\"\n        >\n          {{ config?.customActionsLabel?.i18n || \"i18n.qd.page.header.actions\" | translate }}\n        </button>\n\n        <ng-template #singleButton>\n          <ng-container *ngIf=\"(customActions$ | async).actions[0] as singleAction\">\n            <button\n              qdButton\n              *ngIf=\"singleAction.handler && !singleAction.isHidden\"\n              [disabled]=\"singleAction.isDisabled\"\n              (click)=\"singleAction.handler()\"\n              data-test-id=\"custom-button\"\n            >\n              {{ singleAction.label?.i18n | translate }}\n            </button>\n          </ng-container>\n        </ng-template>\n      </ng-container>\n\n      <ng-template #adaptive>\n        <button\n          *ngIf=\"(customActions$ | async)?.actions.length >= 1\"\n          type=\"button\"\n          class=\"adaptive-menu-button\"\n          [qdPopoverOnClick]=\"menu\"\n          [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n          [qdPopoverStopPropagation]=\"true\"\n          [qdPopoverMinWidth]=\"160\"\n        >\n          <qd-icon icon=\"overflowMenuVertical\"></qd-icon>\n        </button>\n\n        <ng-template #menu>\n          <button\n            *ngFor=\"let action of customActions.actions; let i = index\"\n            class=\"adaptive-menu-entry\"\n            type=\"button\"\n            [disabled]=\"action.isDisabled\"\n            (click)=\"action.handler()\"\n          >\n            {{ action.label.i18n | translate }}\n          </button>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </div>\n</div>\n\n<div class=\"object-header-facets\" [ngClass]=\"{ amongThemselves: adaptiveMode && !facetsCollapsed }\">\n  <ng-container *ngIf=\"pageObjectData$ | async as data\">\n    <div\n      class=\"object-header-facet\"\n      *ngFor=\"let facet of headerFacets | slice : 0 : (adaptiveMode && facetsCollapsed ? 2 : headerFacets?.length ?? 0)\"\n      [attr.data-test-id]=\"testId + '-facet-' + facet.name\"\n    >\n      <div class=\"facet-label\">{{ facet.label.i18n | translate }}</div>\n      <qd-dynamic-facet class=\"dynamic-facet\" [facet]=\"facet\" [data]=\"data\"></qd-dynamic-facet>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!config.hideContexts && contexts$ | async as contexts\">\n    <div\n      class=\"object-header-facet\"\n      *ngFor=\"\n        let context of contexts\n          | slice : 0 : (adaptiveMode && facetsCollapsed ? 2 - (headerFacets?.length ?? 0) : contexts?.length);\n        let index = index;\n        let first = first\n      \"\n      [ngClass]=\"{ hasDivider: headerFacets && first, adaptiveFirst: headerFacets && adaptiveMode && first }\"\n    >\n      <div class=\"facet-label\">{{ context.label | translate }}</div>\n\n      <span *ngIf=\"context.value.length === 0\" class=\"no-selected-context\">{{\n        \"i18n.qd.page.context.noSelectionPlaceholder\" | translate\n      }}</span>\n\n      <span *ngIf=\"context.value.length !== 0\">\n        <qd-chip state=\"none\" [close]=\"isContextSelectable\" (closeClickEmitter)=\"clearContext(context.context)\">\n          <ng-container *ngFor=\"let val of context.value; let last = last\">\n            {{ val.label.i18n | translate }}<span *ngIf=\"!last\">, </span>\n          </ng-container>\n        </qd-chip>\n      </span>\n\n      <span *ngIf=\"isContextSelectable && (!facetsCollapsed || !adaptiveMode)\" class=\"select-button\">\n        <button\n          qdButton\n          qdButtonLink\n          type=\"button\"\n          (click)=\"changeContext(context.context, context.selection, $event)\"\n          [data-test-id]=\"'object-header-select-context-' + context.context.id\"\n        >\n          {{\n            context.value.length !== 0\n              ? (\"i18n.qd.page.context.button.change\" | translate)\n              : (\"i18n.qd.page.context.button.select\" | translate)\n          }}\n        </button>\n      </span>\n    </div>\n  </ng-container>\n\n  <span class=\"facets-toggler\" *ngIf=\"adaptiveMode && headerFacets?.length + (contexts$ | async).length > 2\">\n    <span *ngIf=\"facetsCollapsed\">+{{ headerFacets.length + (contexts$ | async).length - 2 }}</span>\n    <button qdIconButton [data-test-id]=\"'toggle-button'\">\n      <qd-icon [icon]=\"facetsCollapsed ? 'ctrlDown' : 'ctrlTop'\"></qd-icon>\n    </button>\n  </span>\n</div>\n", styles: [":host{display:flex;flex-direction:column;justify-content:space-between;padding:1.25rem;border-bottom:.125rem solid rgb(213,213,213);background:#fff;gap:1.25rem}@media (max-width: 599.98px){:host{padding:1.25rem .9375rem}}:host .object-header-top{display:flex;align-items:flex-start;justify-content:space-between}:host .object-header-top .object-header-title{padding:2px;color:#171717;font-size:1.3125rem;font-weight:500}:host .object-header-top .object-header-toolbar{display:flex;align-items:center;column-gap:.5rem}:host .object-header-top .object-header-toolbar .button-icon{background:none}:host .object-header-top .object-header-toolbar .button-icon+.button-icon{margin-left:-.5rem}:host .object-header-top .object-header-toolbar .header-action-icon{color:#14516f;cursor:pointer;font-size:1.5rem}:host.in-dialog .object-header-toolbar{padding-right:2.5rem}:host .object-header-facets{position:relative;display:flex;flex-wrap:wrap;font-size:1.125rem;gap:1.25rem}:host .object-header-facets .object-header-facet{display:flex;min-width:3.75rem;flex-direction:column}:host .object-header-facets .object-header-facet.hasDivider{padding-left:1.25rem;border-left:.0625rem solid rgb(117,117,117)}:host .object-header-facets .object-header-facet.adaptiveFirst{padding-top:1.25rem}:host .object-header-facets .object-header-facet .facet-label{display:block;margin-bottom:0;color:#757575;font-size:.875rem;padding-bottom:.375rem;font-weight:500}:host .object-header-facets .facets-toggler{position:absolute;top:0;right:0;display:flex;align-items:center;padding-right:.3125rem;font-size:.625rem;line-height:.625rem}:host .object-header-facets.amongThemselves{display:grid}:host .object-header-facets.amongThemselves .object-header-facet.hasDivider{padding-left:0;border-top:.0625rem solid rgb(117,117,117);border-left:none}.loading-overlay{position:absolute;z-index:10000;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}.no-selected-context{height:1.625rem;color:#979797;font-size:.875rem;line-height:1.625rem}.select-button{margin-top:.25rem}.adaptive-menu-button{display:flex;background:unset;color:#454545;font-size:2rem}.adaptive-menu-button:hover,.adaptive-menu-button:focus{color:#000}.adaptive-menu-entry{display:block;overflow:hidden;width:100%;min-height:2.25rem;padding:0 1rem;background:#fff0;text-align:left;text-overflow:ellipsis;white-space:nowrap}\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: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "directive", type: QdButtonLinkDirective, selector: "button[qdButtonLink], a[qdButtonLink], button[qd-button-link]" }, { kind: "component", type: QdIconButtonComponent, selector: "button[qdIconButton], a[qdIconButton], button[qd-icon-button]", inputs: ["color", "data-test-id"] }, { kind: "component", type: QdMenuButtonComponent, selector: "button[qdMenuButton], a[qdMenuButton]", inputs: ["qdMenuButton", "data-test-id", "autoSize"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "component", type: QdSpinnerComponent, selector: "qd-spinner" }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdDynamicFacetComponent, selector: "qd-dynamic-facet", inputs: ["facet", "data"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageObjectHeaderComponent, isStandalone: false, selector: "qd-page-object-header", inputs: { config: "config", hasNavigation: "hasNavigation", testId: ["data-test-id", "testId"] }, host: { listeners: { "click": "toggleFacets()" }, properties: { "style.borderBottom": "borderBottomStyle", "class.in-dialog": "this.isInDialog" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\"><qd-spinner></qd-spinner></div>\n\n<div class=\"object-header-top\">\n  <header class=\"object-header-title\">{{ config.title.i18n | translate }}</header>\n  <div class=\"object-header-toolbar\">\n    <button class=\"button-icon\" data-test-id=\"archive-button\">\n      <qd-icon\n        *ngIf=\"showArchive$ | async\"\n        (click)=\"archiveButton?.handler()\"\n        class=\"header-action-icon\"\n        [icon]=\"'resultNew'\"\n      ></qd-icon>\n    </button>\n\n    <button class=\"button-icon\" data-test-id=\"delete-button\">\n      <qd-icon\n        class=\"header-action-icon\"\n        *ngIf=\"showDelete$ | async\"\n        (click)=\"deleteButton?.handler()\"\n        [icon]=\"'trash'\"\n      ></qd-icon>\n    </button>\n\n    <button *ngIf=\"showEdit$ | async\" qdButton (click)=\"edit()\" data-test-id=\"edit-button\">\n      {{ editButton?.label?.i18n || \"i18n.qd.page.header.edit\" | translate }}\n    </button>\n\n    <button *ngIf=\"showCancel$ | async\" qdButton qdButtonGhost (click)=\"cancel()\" data-test-id=\"cancel-button\">\n      {{ cancelButton.label?.i18n || \"i18n.qd.page.header.cancel\" | translate }}\n    </button>\n\n    <button\n      *ngIf=\"showSave$ | async\"\n      qdButton\n      (click)=\"save()\"\n      data-test-id=\"save-button\"\n      [disabled]=\"($canSave | async) === false\"\n    >\n      {{ saveButton.label?.i18n || \"i18n.qd.page.header.save\" | translate }}\n    </button>\n\n    <ng-container *ngIf=\"customActions$ | async as customActions\">\n      <ng-container *ngIf=\"!adaptiveMode; else adaptive\">\n        <button\n          [qdMenuButton]=\"customActions\"\n          [autoSize]=\"false\"\n          [data-test-id]=\"'page-'\"\n          *ngIf=\"customActions.actions.length > 1; else singleButton\"\n          data-test-id=\"custom-button\"\n        >\n          {{ config?.customActionsLabel?.i18n || \"i18n.qd.page.header.actions\" | translate }}\n        </button>\n\n        <ng-template #singleButton>\n          <ng-container *ngIf=\"(customActions$ | async).actions[0] as singleAction\">\n            <button\n              qdButton\n              *ngIf=\"singleAction.handler && !singleAction.isHidden\"\n              [disabled]=\"singleAction.isDisabled\"\n              (click)=\"singleAction.handler()\"\n              data-test-id=\"custom-button\"\n            >\n              {{ singleAction.label?.i18n | translate }}\n            </button>\n          </ng-container>\n        </ng-template>\n      </ng-container>\n\n      <ng-template #adaptive>\n        <button\n          *ngIf=\"(customActions$ | async)?.actions.length >= 1\"\n          type=\"button\"\n          class=\"adaptive-menu-button\"\n          [qdPopoverOnClick]=\"menu\"\n          [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n          [qdPopoverStopPropagation]=\"true\"\n          [qdPopoverMinWidth]=\"160\"\n        >\n          <qd-icon icon=\"overflowMenuVertical\"></qd-icon>\n        </button>\n\n        <ng-template #menu>\n          <button\n            *ngFor=\"let action of customActions.actions; let i = index\"\n            class=\"adaptive-menu-entry\"\n            type=\"button\"\n            [disabled]=\"action.isDisabled\"\n            (click)=\"action.handler()\"\n          >\n            {{ action.label.i18n | translate }}\n          </button>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </div>\n</div>\n\n<div class=\"object-header-facets\" [ngClass]=\"{ amongThemselves: adaptiveMode && !facetsCollapsed }\">\n  <ng-container *ngIf=\"pageObjectData$ | async as data\">\n    <div\n      class=\"object-header-facet\"\n      *ngFor=\"let facet of headerFacets | slice : 0 : (adaptiveMode && facetsCollapsed ? 2 : headerFacets?.length ?? 0)\"\n      [attr.data-test-id]=\"testId + '-facet-' + facet.name\"\n    >\n      <div class=\"facet-label\">{{ facet.label.i18n | translate }}</div>\n      <qd-dynamic-facet class=\"dynamic-facet\" [facet]=\"facet\" [data]=\"data\"></qd-dynamic-facet>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!config.hideContexts && contexts$ | async as contexts\">\n    <div\n      class=\"object-header-facet\"\n      *ngFor=\"\n        let context of contexts\n          | slice : 0 : (adaptiveMode && facetsCollapsed ? 2 - (headerFacets?.length ?? 0) : contexts?.length);\n        let index = index;\n        let first = first\n      \"\n      [ngClass]=\"{ hasDivider: headerFacets && first, adaptiveFirst: headerFacets && adaptiveMode && first }\"\n    >\n      <div class=\"facet-label\">{{ context.label | translate }}</div>\n\n      <span *ngIf=\"context.value.length === 0\" class=\"no-selected-context\">{{\n        \"i18n.qd.page.context.noSelectionPlaceholder\" | translate\n      }}</span>\n\n      <span *ngIf=\"context.value.length !== 0\">\n        <qd-chip state=\"none\" [close]=\"isContextSelectable\" (closeClickEmitter)=\"clearContext(context.context)\">\n          <ng-container *ngFor=\"let val of context.value; let last = last\">\n            {{ val.label.i18n | translate }}<span *ngIf=\"!last\">, </span>\n          </ng-container>\n        </qd-chip>\n      </span>\n\n      <span *ngIf=\"isContextSelectable && (!facetsCollapsed || !adaptiveMode)\" class=\"select-button\">\n        <button\n          qdButton\n          qdButtonLink\n          type=\"button\"\n          (click)=\"changeContext(context.context, context.selection, $event)\"\n          [data-test-id]=\"'object-header-select-context-' + context.context.id\"\n        >\n          {{\n            context.value.length !== 0\n              ? (\"i18n.qd.page.context.button.change\" | translate)\n              : (\"i18n.qd.page.context.button.select\" | translate)\n          }}\n        </button>\n      </span>\n    </div>\n  </ng-container>\n\n  <span class=\"facets-toggler\" *ngIf=\"adaptiveMode && headerFacets?.length + (contexts$ | async).length > 2\">\n    <span *ngIf=\"facetsCollapsed\">+{{ headerFacets.length + (contexts$ | async).length - 2 }}</span>\n    <button qdIconButton [data-test-id]=\"'toggle-button'\">\n      <qd-icon [icon]=\"facetsCollapsed ? 'ctrlDown' : 'ctrlTop'\"></qd-icon>\n    </button>\n  </span>\n</div>\n", styles: [":host{display:flex;flex-direction:column;justify-content:space-between;padding:1.25rem;border-bottom:.125rem solid rgb(213,213,213);background:#fff;gap:1.25rem}@media (max-width: 599.98px){:host{padding:1.25rem .9375rem}}:host .object-header-top{display:flex;align-items:flex-start;justify-content:space-between}:host .object-header-top .object-header-title{padding:2px;color:#171717;font-size:1.3125rem;font-weight:500}:host .object-header-top .object-header-toolbar{display:flex;align-items:center;column-gap:.5rem}:host .object-header-top .object-header-toolbar .button-icon{background:none}:host .object-header-top .object-header-toolbar .button-icon+.button-icon{margin-left:-.5rem}:host .object-header-top .object-header-toolbar .header-action-icon{color:#14516f;cursor:pointer;font-size:1.5rem}:host.in-dialog .object-header-toolbar{padding-right:2.5rem}:host .object-header-facets{position:relative;display:flex;flex-wrap:wrap;font-size:1.125rem;gap:1.25rem}:host .object-header-facets .object-header-facet{display:flex;min-width:3.75rem;flex-direction:column}:host .object-header-facets .object-header-facet.hasDivider{padding-left:1.25rem;border-left:.0625rem solid rgb(117,117,117)}:host .object-header-facets .object-header-facet.adaptiveFirst{padding-top:1.25rem}:host .object-header-facets .object-header-facet .facet-label{display:block;margin-bottom:0;color:#757575;font-size:.875rem;padding-bottom:.375rem;font-weight:500}:host .object-header-facets .facets-toggler{position:absolute;top:0;right:0;display:flex;align-items:center;padding-right:.3125rem;font-size:.625rem;line-height:.625rem}:host .object-header-facets.amongThemselves{display:grid}:host .object-header-facets.amongThemselves .object-header-facet.hasDivider{padding-left:0;border-top:.0625rem solid rgb(117,117,117);border-left:none}.loading-overlay{position:absolute;z-index:10000;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}.no-selected-context{height:1.625rem;color:#979797;font-size:.875rem;line-height:1.625rem}.select-button{margin-top:.25rem}.adaptive-menu-button{display:flex;background:unset;color:#454545;font-size:2rem}.adaptive-menu-button:hover,.adaptive-menu-button:focus{color:#000}.adaptive-menu-entry{display:block;overflow:hidden;width:100%;min-height:2.25rem;padding:0 1rem;background:#fff0;text-align:left;text-overflow:ellipsis;white-space:nowrap}\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: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "directive", type: QdButtonLinkDirective, selector: "button[qdButtonLink], a[qdButtonLink], button[qd-button-link]" }, { kind: "component", type: QdIconButtonComponent, selector: "button[qdIconButton], a[qdIconButton], button[qd-icon-button]", inputs: ["color", "data-test-id"] }, { kind: "component", type: QdMenuButtonComponent, selector: "button[qdMenuButton], a[qdMenuButton]", inputs: ["qdMenuButton", "data-test-id", "autoSize"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdSpinnerComponent, selector: "qd-spinner" }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdDynamicFacetComponent, selector: "qd-dynamic-facet", inputs: ["facet", "data"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageObjectHeaderComponent, decorators: [{
             type: Component,
@@ -29401,7 +29459,7 @@ class QdPageTabHeaderComponent extends CdkStepHeader {
         super(elementRef);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageTabHeaderComponent, isStandalone: true, selector: "qd-page-tab-header", inputs: { state: "state", label: "label", counters: "counters", index: "index", isSelected: "isSelected", isDisabled: "isDisabled", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "testId", "class.qd-tab-current": "isSelected && !isDisabled", "class.qd-tab-disabled": "isDisabled", "class.qd-tab-done": "state === STEP_STATE.DONE", "class.qd-tab-edit": "state === STEP_STATE.EDIT", "class.qd-tab-error": "state === STEP_STATE.ERROR" } }, usesInheritance: true, ngImport: i0, template: "<span class=\"qd-tab-caption\">\n  {{ label }}\n  <qd-page-tab-header-counters [counters]=\"counters\" [data-test-id]=\"testId + '-counters'\" />\n</span>\n", styles: [":host{position:relative;display:inline-flex;height:2.5rem;padding:.625rem 0;cursor:pointer;color:#757575;font-size:14px;font-weight:400;line-height:18px}:host .qd-tab-caption{font-weight:500}:host:hover,:host.qd-tab-current{color:#069}:host.qd-tab-current .qd-tab-caption{position:relative}:host.qd-tab-current .qd-tab-caption:after{position:absolute;bottom:-.6875rem;left:0;display:inline-block;width:100%;height:.25rem;background-color:#069;content:\"\"}:host.qd-tab-done,:host.qd-tab-edit{color:#171717}:host.qd-tab-error{color:#c70023}:host.qd-tab-disabled{color:#b4b4b4;cursor:default}:host.qd-tab-disabled:hover{color:#b4b4b4}\n"], dependencies: [{ kind: "component", type: QdPageTabHeaderCountersComponent, selector: "qd-page-tab-header-counters", inputs: ["counters", "data-test-id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageTabHeaderComponent, isStandalone: true, selector: "qd-page-tab-header", inputs: { state: "state", label: "label", counters: "counters", index: "index", isSelected: "isSelected", isDisabled: "isDisabled", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "testId", "class.qd-tab-current": "isSelected && !isDisabled", "class.qd-tab-disabled": "isDisabled", "class.qd-tab-done": "state === STEP_STATE.DONE", "class.qd-tab-edit": "state === STEP_STATE.EDIT", "class.qd-tab-error": "state === STEP_STATE.ERROR" } }, usesInheritance: true, ngImport: i0, template: "<span class=\"qd-tab-caption\">\n  {{ label }}\n  <qd-page-tab-header-counters [counters]=\"counters\" [data-test-id]=\"testId + '-counters'\" />\n</span>\n", styles: [":host{position:relative;display:inline-flex;height:2.5rem;padding:.625rem 0;cursor:pointer;color:#757575;font-size:14px;font-weight:400;line-height:18px}:host .qd-tab-caption{font-weight:500;white-space:nowrap}:host:hover,:host.qd-tab-current{color:#069}:host.qd-tab-current .qd-tab-caption{position:relative}:host.qd-tab-current .qd-tab-caption:after{position:absolute;bottom:-.6875rem;left:0;display:inline-block;width:100%;height:.25rem;background-color:#069;content:\"\"}:host.qd-tab-done,:host.qd-tab-edit{color:#171717}:host.qd-tab-error{color:#c70023}:host.qd-tab-disabled{color:#b4b4b4;cursor:default}:host.qd-tab-disabled:hover{color:#b4b4b4}\n"], dependencies: [{ kind: "component", type: QdPageTabHeaderCountersComponent, selector: "qd-page-tab-header-counters", inputs: ["counters", "data-test-id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabHeaderComponent, decorators: [{
             type: Component,
@@ -29412,7 +29470,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         '[class.qd-tab-done]': 'state === STEP_STATE.DONE',
                         '[class.qd-tab-edit]': 'state === STEP_STATE.EDIT',
                         '[class.qd-tab-error]': 'state === STEP_STATE.ERROR'
-                    }, standalone: true, imports: [QdPageTabHeaderCountersComponent], template: "<span class=\"qd-tab-caption\">\n  {{ label }}\n  <qd-page-tab-header-counters [counters]=\"counters\" [data-test-id]=\"testId + '-counters'\" />\n</span>\n", styles: [":host{position:relative;display:inline-flex;height:2.5rem;padding:.625rem 0;cursor:pointer;color:#757575;font-size:14px;font-weight:400;line-height:18px}:host .qd-tab-caption{font-weight:500}:host:hover,:host.qd-tab-current{color:#069}:host.qd-tab-current .qd-tab-caption{position:relative}:host.qd-tab-current .qd-tab-caption:after{position:absolute;bottom:-.6875rem;left:0;display:inline-block;width:100%;height:.25rem;background-color:#069;content:\"\"}:host.qd-tab-done,:host.qd-tab-edit{color:#171717}:host.qd-tab-error{color:#c70023}:host.qd-tab-disabled{color:#b4b4b4;cursor:default}:host.qd-tab-disabled:hover{color:#b4b4b4}\n"] }]
+                    }, standalone: true, imports: [QdPageTabHeaderCountersComponent], template: "<span class=\"qd-tab-caption\">\n  {{ label }}\n  <qd-page-tab-header-counters [counters]=\"counters\" [data-test-id]=\"testId + '-counters'\" />\n</span>\n", styles: [":host{position:relative;display:inline-flex;height:2.5rem;padding:.625rem 0;cursor:pointer;color:#757575;font-size:14px;font-weight:400;line-height:18px}:host .qd-tab-caption{font-weight:500;white-space:nowrap}:host:hover,:host.qd-tab-current{color:#069}:host.qd-tab-current .qd-tab-caption{position:relative}:host.qd-tab-current .qd-tab-caption:after{position:absolute;bottom:-.6875rem;left:0;display:inline-block;width:100%;height:.25rem;background-color:#069;content:\"\"}:host.qd-tab-done,:host.qd-tab-edit{color:#171717}:host.qd-tab-error{color:#c70023}:host.qd-tab-disabled{color:#b4b4b4;cursor:default}:host.qd-tab-disabled:hover{color:#b4b4b4}\n"] }]
         }], ctorParameters: () => [], propDecorators: { state: [{
                 type: Input
             }], label: [{
@@ -30437,9 +30495,6 @@ class QdPageComponent {
     get footerVisible() {
         return this.isFooterVisible;
     }
-    get hasInfoBanners() {
-        return this.infoBanners.length > 0;
-    }
     constructor() {
         this.footerHasContent$ = this.footerService.footerHasContent$;
         this.footerHasContent$.pipe(takeUntil(this._destroyed$)).subscribe(isVisible => {
@@ -30645,13 +30700,13 @@ class QdPageComponent {
         }))), this.dialogRef);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageComponent, isStandalone: false, selector: "qd-page", inputs: { config: "config", testId: ["data-test-id", "testId"] }, outputs: { operationModeChanged: "operationModeChanged" }, host: { properties: { "class.has-control-panel": "isControlPanelVisible", "class.control-panel-broad": "isControlPanelBroad", "class.has-footer": "this.footerVisible", "class.has-info-banners": "this.hasInfoBanners" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageComponent, isStandalone: false, selector: "qd-page", inputs: { config: "config", testId: ["data-test-id", "testId"] }, outputs: { operationModeChanged: "operationModeChanged" }, host: { properties: { "class.has-control-panel": "isControlPanelVisible", "class.control-panel-broad": "isControlPanelBroad", "class.has-footer": "this.footerVisible" } }, providers: [
             QdPageFooterService,
             QdFormGroupManagerService,
             QdPageSubmitActionService,
             QdResolverTriggerService,
             QdPageNavigationInterceptorService
-        ], queries: [{ propertyName: "controlPanel", first: true, predicate: QdPageControlPanelComponent, descendants: true }, { propertyName: "stepperComponent", first: true, predicate: QdPageStepperComponent, descendants: true }, { propertyName: "tabsComponent", first: true, predicate: QdPageTabsComponent, descendants: true }, { propertyName: "stepperAdapterDirective", first: true, predicate: QdPageStepperAdapterDirective, descendants: true }, { propertyName: "tabsAdapterDirective", first: true, predicate: QdPageTabsAdapterDirective, descendants: true }, { propertyName: "sections", predicate: QdSectionComponent }, { propertyName: "infoBanners", predicate: QdPageInfoBannerComponent }], usesOnChanges: true, ngImport: i0, template: "<main qdSnackbarListener>\n  <qd-page-object-header\n    [data-test-id]=\"testId\"\n    [attr.data-test-id]=\"testId + 'object-header'\"\n    [config]=\"config\"\n    [hasNavigation]=\"hasNavigation\"\n  ></qd-page-object-header>\n\n  <div class=\"page-info-banners\">\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n\n  <ng-container *ngIf=\"config.pageType === 'create' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-stepper\"></ng-content>\n    <ng-content select=\"[qdPageStepperAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'overview' || config.pageType === 'inspect' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-tabs\"></ng-content>\n    <ng-content select=\"[qdPageTabsAdapter]\"></ng-content>\n    <ng-content select=\"qd-section\"></ng-content>\n    <ng-content select=\"[qdSectionAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'custom'\">\n    <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n  </ng-container>\n</main>\n\n<footer *ngIf=\"footerHasContent$ | async\">\n  <qd-page-footer [attr.data-test-id]=\"testId + '-footer'\">\n    <ng-content select=\"[qdPageFooter]\"></ng-content>\n  </qd-page-footer>\n</footer>\n\n<aside *ngIf=\"isControlPanelVisible\">\n  <ng-content select=\"qd-page-control-panel\"></ng-content>\n</aside>\n\n<qd-projection-guard *ngIf=\"config.pageType !== 'custom'\" [warningMessage]=\"projectionGuardMessage\">\n  <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n</qd-projection-guard>\n\n<ng-template #projectedContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{position:absolute;display:grid;overflow:hidden;width:100%;height:100%;background:#efefef;grid-template-areas:\"main\";grid-template-columns:1fr;grid-template-rows:1fr}:host.has-control-panel{grid-template-areas:\"main aside\";grid-template-columns:1fr 18.75rem}:host.control-panel-broad{grid-template-columns:1fr 27rem}:host.has-info-banners .page-info-banners{padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}@media (max-width: 599.98px){:host.has-info-banners .page-info-banners{padding-right:.9375rem;padding-left:.9375rem}}:host.has-info-banners qd-page-info-banner:last-child{margin-bottom:0}:host.has-footer{grid-template-areas:\"main\" \"footer\";grid-template-rows:calc(100% - 4rem) 4rem}:host.has-control-panel.has-footer{grid-template-areas:\"main aside\" \"footer aside\"}:host main{position:relative;grid-area:main;overflow-y:auto}:host aside{border-left:rgb(213,213,213) solid .0625rem;background:#fff;grid-area:aside}:host footer{grid-area:footer}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success{position:relative;top:-.5rem;padding-top:0rem;padding-bottom:0rem;border-top-width:0;margin-bottom:0rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .icon,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .icon,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .icon,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .icon{display:none}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .title,:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .message,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .title,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .message,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .title,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .message,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .title,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .message{position:relative;top:-.625rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info:before,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning:before,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical:before,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success:before{position:relative;top:-.625rem;left:-2.75rem;display:block;width:calc(100% + 4.75rem);height:.625rem;background-color:#fff;content:\"\"}\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: "component", type: QdProjectionGuardComponent, selector: "qd-projection-guard", inputs: ["isDisabled", "warningMessage"] }, { kind: "component", type: QdPageFooterComponent, selector: "qd-page-footer" }, { kind: "component", type: QdPageObjectHeaderComponent, selector: "qd-page-object-header", inputs: ["config", "hasNavigation", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+        ], queries: [{ propertyName: "controlPanel", first: true, predicate: QdPageControlPanelComponent, descendants: true }, { propertyName: "stepperComponent", first: true, predicate: QdPageStepperComponent, descendants: true }, { propertyName: "tabsComponent", first: true, predicate: QdPageTabsComponent, descendants: true }, { propertyName: "stepperAdapterDirective", first: true, predicate: QdPageStepperAdapterDirective, descendants: true }, { propertyName: "tabsAdapterDirective", first: true, predicate: QdPageTabsAdapterDirective, descendants: true }, { propertyName: "sections", predicate: QdSectionComponent }, { propertyName: "infoBanners", predicate: QdPageInfoBannerComponent }], usesOnChanges: true, ngImport: i0, template: "<main qdSnackbarListener cdkScrollable>\n  <qd-page-object-header\n    [data-test-id]=\"testId\"\n    [attr.data-test-id]=\"testId + 'object-header'\"\n    [config]=\"config\"\n    [hasNavigation]=\"hasNavigation\"\n  ></qd-page-object-header>\n\n  <div class=\"page-info-banners\">\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n\n  <ng-container *ngIf=\"config.pageType === 'create' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-stepper\"></ng-content>\n    <ng-content select=\"[qdPageStepperAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'overview' || config.pageType === 'inspect' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-tabs\"></ng-content>\n    <ng-content select=\"[qdPageTabsAdapter]\"></ng-content>\n    <ng-content select=\"qd-section\"></ng-content>\n    <ng-content select=\"[qdSectionAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'custom'\">\n    <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n  </ng-container>\n</main>\n\n<footer *ngIf=\"footerHasContent$ | async\">\n  <qd-page-footer [attr.data-test-id]=\"testId + '-footer'\">\n    <ng-content select=\"[qdPageFooter]\"></ng-content>\n  </qd-page-footer>\n</footer>\n\n<aside *ngIf=\"isControlPanelVisible\">\n  <ng-content select=\"qd-page-control-panel\"></ng-content>\n</aside>\n\n<qd-projection-guard *ngIf=\"config.pageType !== 'custom'\" [warningMessage]=\"projectionGuardMessage\">\n  <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n</qd-projection-guard>\n\n<ng-template #projectedContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{position:absolute;display:grid;overflow:hidden;width:100%;height:100%;background:#efefef;grid-template-areas:\"main\";grid-template-columns:1fr;grid-template-rows:1fr}:host.has-control-panel{grid-template-areas:\"main aside\";grid-template-columns:1fr 18.75rem}:host.control-panel-broad{grid-template-columns:1fr 27rem}:host .page-info-banners:has(>qd-page-info-banner:not(.qd-page-info-banner-empty)){padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}@media (max-width: 599.98px){:host .page-info-banners:has(>qd-page-info-banner:not(.qd-page-info-banner-empty)){padding-right:.9375rem;padding-left:.9375rem}}:host .page-info-banners>qd-page-info-banner:last-child{margin-bottom:0}:host.has-footer{grid-template-areas:\"main\" \"footer\";grid-template-rows:calc(100% - 4rem) 4rem}:host.has-control-panel.has-footer{grid-template-areas:\"main aside\" \"footer aside\"}:host main{position:relative;grid-area:main;overflow-y:auto}:host aside{border-left:rgb(213,213,213) solid .0625rem;background:#fff;grid-area:aside}:host footer{grid-area:footer}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success{position:relative;top:-.5rem;padding-top:0rem;padding-bottom:0rem;border-top-width:0;margin-bottom:0rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .icon,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .icon,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .icon,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .icon{display:none}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .title,:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .message,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .title,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .message,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .title,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .message,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .title,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .message{position:relative;top:-.625rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info:before,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning:before,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical:before,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success:before{position:relative;top:-.625rem;left:-2.75rem;display:block;width:calc(100% + 4.75rem);height:.625rem;background-color:#fff;content:\"\"}\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: i1$2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: QdProjectionGuardComponent, selector: "qd-projection-guard", inputs: ["isDisabled", "warningMessage"] }, { kind: "component", type: QdPageFooterComponent, selector: "qd-page-footer" }, { kind: "component", type: QdPageObjectHeaderComponent, selector: "qd-page-object-header", inputs: ["config", "hasNavigation", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageComponent, decorators: [{
             type: Component,
@@ -30661,7 +30716,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         QdPageSubmitActionService,
                         QdResolverTriggerService,
                         QdPageNavigationInterceptorService
-                    ], host: { '[class.has-control-panel]': 'isControlPanelVisible', '[class.control-panel-broad]': 'isControlPanelBroad' }, standalone: false, template: "<main qdSnackbarListener>\n  <qd-page-object-header\n    [data-test-id]=\"testId\"\n    [attr.data-test-id]=\"testId + 'object-header'\"\n    [config]=\"config\"\n    [hasNavigation]=\"hasNavigation\"\n  ></qd-page-object-header>\n\n  <div class=\"page-info-banners\">\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n\n  <ng-container *ngIf=\"config.pageType === 'create' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-stepper\"></ng-content>\n    <ng-content select=\"[qdPageStepperAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'overview' || config.pageType === 'inspect' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-tabs\"></ng-content>\n    <ng-content select=\"[qdPageTabsAdapter]\"></ng-content>\n    <ng-content select=\"qd-section\"></ng-content>\n    <ng-content select=\"[qdSectionAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'custom'\">\n    <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n  </ng-container>\n</main>\n\n<footer *ngIf=\"footerHasContent$ | async\">\n  <qd-page-footer [attr.data-test-id]=\"testId + '-footer'\">\n    <ng-content select=\"[qdPageFooter]\"></ng-content>\n  </qd-page-footer>\n</footer>\n\n<aside *ngIf=\"isControlPanelVisible\">\n  <ng-content select=\"qd-page-control-panel\"></ng-content>\n</aside>\n\n<qd-projection-guard *ngIf=\"config.pageType !== 'custom'\" [warningMessage]=\"projectionGuardMessage\">\n  <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n</qd-projection-guard>\n\n<ng-template #projectedContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{position:absolute;display:grid;overflow:hidden;width:100%;height:100%;background:#efefef;grid-template-areas:\"main\";grid-template-columns:1fr;grid-template-rows:1fr}:host.has-control-panel{grid-template-areas:\"main aside\";grid-template-columns:1fr 18.75rem}:host.control-panel-broad{grid-template-columns:1fr 27rem}:host.has-info-banners .page-info-banners{padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}@media (max-width: 599.98px){:host.has-info-banners .page-info-banners{padding-right:.9375rem;padding-left:.9375rem}}:host.has-info-banners qd-page-info-banner:last-child{margin-bottom:0}:host.has-footer{grid-template-areas:\"main\" \"footer\";grid-template-rows:calc(100% - 4rem) 4rem}:host.has-control-panel.has-footer{grid-template-areas:\"main aside\" \"footer aside\"}:host main{position:relative;grid-area:main;overflow-y:auto}:host aside{border-left:rgb(213,213,213) solid .0625rem;background:#fff;grid-area:aside}:host footer{grid-area:footer}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success{position:relative;top:-.5rem;padding-top:0rem;padding-bottom:0rem;border-top-width:0;margin-bottom:0rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .icon,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .icon,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .icon,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .icon{display:none}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .title,:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .message,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .title,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .message,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .title,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .message,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .title,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .message{position:relative;top:-.625rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info:before,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning:before,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical:before,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success:before{position:relative;top:-.625rem;left:-2.75rem;display:block;width:calc(100% + 4.75rem);height:.625rem;background-color:#fff;content:\"\"}\n"] }]
+                    ], host: { '[class.has-control-panel]': 'isControlPanelVisible', '[class.control-panel-broad]': 'isControlPanelBroad' }, standalone: false, template: "<main qdSnackbarListener cdkScrollable>\n  <qd-page-object-header\n    [data-test-id]=\"testId\"\n    [attr.data-test-id]=\"testId + 'object-header'\"\n    [config]=\"config\"\n    [hasNavigation]=\"hasNavigation\"\n  ></qd-page-object-header>\n\n  <div class=\"page-info-banners\">\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n\n  <ng-container *ngIf=\"config.pageType === 'create' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-stepper\"></ng-content>\n    <ng-content select=\"[qdPageStepperAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'overview' || config.pageType === 'inspect' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-tabs\"></ng-content>\n    <ng-content select=\"[qdPageTabsAdapter]\"></ng-content>\n    <ng-content select=\"qd-section\"></ng-content>\n    <ng-content select=\"[qdSectionAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'custom'\">\n    <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n  </ng-container>\n</main>\n\n<footer *ngIf=\"footerHasContent$ | async\">\n  <qd-page-footer [attr.data-test-id]=\"testId + '-footer'\">\n    <ng-content select=\"[qdPageFooter]\"></ng-content>\n  </qd-page-footer>\n</footer>\n\n<aside *ngIf=\"isControlPanelVisible\">\n  <ng-content select=\"qd-page-control-panel\"></ng-content>\n</aside>\n\n<qd-projection-guard *ngIf=\"config.pageType !== 'custom'\" [warningMessage]=\"projectionGuardMessage\">\n  <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n</qd-projection-guard>\n\n<ng-template #projectedContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{position:absolute;display:grid;overflow:hidden;width:100%;height:100%;background:#efefef;grid-template-areas:\"main\";grid-template-columns:1fr;grid-template-rows:1fr}:host.has-control-panel{grid-template-areas:\"main aside\";grid-template-columns:1fr 18.75rem}:host.control-panel-broad{grid-template-columns:1fr 27rem}:host .page-info-banners:has(>qd-page-info-banner:not(.qd-page-info-banner-empty)){padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}@media (max-width: 599.98px){:host .page-info-banners:has(>qd-page-info-banner:not(.qd-page-info-banner-empty)){padding-right:.9375rem;padding-left:.9375rem}}:host .page-info-banners>qd-page-info-banner:last-child{margin-bottom:0}:host.has-footer{grid-template-areas:\"main\" \"footer\";grid-template-rows:calc(100% - 4rem) 4rem}:host.has-control-panel.has-footer{grid-template-areas:\"main aside\" \"footer aside\"}:host main{position:relative;grid-area:main;overflow-y:auto}:host aside{border-left:rgb(213,213,213) solid .0625rem;background:#fff;grid-area:aside}:host footer{grid-area:footer}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success{position:relative;top:-.5rem;padding-top:0rem;padding-bottom:0rem;border-top-width:0;margin-bottom:0rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .icon,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .icon,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .icon,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .icon{display:none}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .title,:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .message,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .title,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .message,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .title,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .message,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .title,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .message{position:relative;top:-.625rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info:before,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning:before,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical:before,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success:before{position:relative;top:-.625rem;left:-2.75rem;display:block;width:calc(100% + 4.75rem);height:.625rem;background-color:#fff;content:\"\"}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input,
                 args: [{ required: true }]
@@ -30694,9 +30749,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             }], footerVisible: [{
                 type: HostBinding,
                 args: ['class.has-footer']
-            }], hasInfoBanners: [{
-                type: HostBinding,
-                args: ['class.has-info-banners']
             }] } });
 /**
@@ -30808,6 +30860,7 @@ class QdPageModule {
             QdPageFooterCustomContentDirective,
             QdContextSelectDialogComponent,
             QdPageInfoBannerComponent], imports: [CommonModule,
+            ScrollingModule,
             TranslateModule,
             QdButtonModule,
             QdButtonModule,
@@ -30836,6 +30889,7 @@ class QdPageModule {
                 useValue: DynamicFacetsServiceInstance
             }
         ], imports: [CommonModule,
+            ScrollingModule,
             TranslateModule,
             QdButtonModule,
             QdButtonModule,
@@ -30857,6 +30911,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             args: [{
                     imports: [
                         CommonModule,
+                        ScrollingModule,
                         TranslateModule,
                         QdButtonModule,
                         QdButtonModule,
@@ -30948,7 +31003,7 @@ class QdPanelSectionStatusComponent {
         return this.config.status;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPanelSectionStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPanelSectionStatusComponent, isStandalone: false, selector: "qd-panel-section-status", inputs: { config: "config" }, host: { properties: { "attr.class": "this.getStatusClass" } }, ngImport: i0, template: "<qd-icon icon=\"circleSolid\"></qd-icon>\n<h3>{{ config.title.i18n | translate }}</h3>\n", styles: [":host{display:flex;width:100%;align-items:flex-start;padding:1rem .75rem;border:rgb(213,213,213) .125rem solid;margin-bottom:1rem;font-size:.875rem}:host:last-child{margin-bottom:0rem}:host qd-icon{margin-right:.3125rem;font-size:1.625rem}:host h3{margin:0!important;font-size:.875rem}:host.positive{border-left:rgb(0,129,58) .25rem solid;color:#00813a}:host.warning{border-left:rgb(255,155,0) .25rem solid;color:#ff9b00}:host.info{border-left:rgb(0,102,153) .25rem solid;color:#069}:host.critical{border-left:rgb(199,0,35) .25rem solid;color:#c70023}\n"], dependencies: [{ kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPanelSectionStatusComponent, isStandalone: false, selector: "qd-panel-section-status", inputs: { config: "config" }, host: { properties: { "attr.class": "this.getStatusClass" } }, ngImport: i0, template: "<qd-icon icon=\"circleSolid\"></qd-icon>\n<h3>{{ config.title.i18n | translate }}</h3>\n", styles: [":host{display:flex;width:100%;align-items:flex-start;padding:1rem .75rem;border:rgb(213,213,213) .125rem solid;margin-bottom:1rem;font-size:.875rem}:host:last-child{margin-bottom:0rem}:host qd-icon{margin-right:.3125rem;font-size:1.625rem}:host h3{margin:0!important;font-size:.875rem}:host.positive{border-left:rgb(0,129,58) .25rem solid;color:#00813a}:host.warning{border-left:rgb(255,155,0) .25rem solid;color:#ff9b00}:host.info{border-left:rgb(0,102,153) .25rem solid;color:#069}:host.critical{border-left:rgb(199,0,35) .25rem solid;color:#c70023}\n"], dependencies: [{ kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPanelSectionStatusComponent, decorators: [{
             type: Component,
@@ -31213,7 +31268,7 @@ class QdShellHeaderBannerComponent {
     bannerService = inject(QdShellBannerService);
     get colorClassName() {
         if (this.bannerService.isProduction || this.bannerService.bannerText === '')
-            return;
+            return '';
         return 'qd-shell__banner qd-shell__banner--' + this.bannerService.bannerText.toLowerCase();
     }
     get shouldRender() {
@@ -32185,7 +32240,7 @@ class QdShellToolbarItemComponent {
             this.item.handler();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellToolbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdShellToolbarItemComponent, isStandalone: false, selector: "button[qd-shell-toolbar-item]", inputs: { item: "item" }, ngImport: i0, template: "<div class=\"toolbar-item\" (click)=\"onItemClick()\">\n  <qd-icon [icon]=\"item?.qdIcon\"></qd-icon>\n  <qd-counter-badge *ngIf=\"item?.count\" [count]=\"item.count\" class=\"badge\"></qd-counter-badge>\n</div>\n", styles: [":host{padding:0;background-color:unset}.toolbar-item{position:relative;display:flex;width:3rem;height:3rem;align-items:center;justify-content:center;border-radius:50%;font-size:2rem}.toolbar-item:hover{background-color:#f5f5f5}.badge{position:absolute;top:0;right:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "component", type: QdCounterBadgeComponent, selector: "qd-counter-badge", inputs: ["count"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdShellToolbarItemComponent, isStandalone: false, selector: "button[qd-shell-toolbar-item]", inputs: { item: "item" }, ngImport: i0, template: "<div class=\"toolbar-item\" (click)=\"onItemClick()\">\n  <qd-icon [icon]=\"item?.qdIcon\"></qd-icon>\n  <qd-counter-badge *ngIf=\"item?.count\" [count]=\"item.count\" class=\"badge\"></qd-counter-badge>\n</div>\n", styles: [":host{padding:0;background-color:unset}.toolbar-item{position:relative;display:flex;width:3rem;height:3rem;align-items:center;justify-content:center;border-radius:50%;font-size:2rem}.toolbar-item:hover{background-color:#f5f5f5}.badge{position:absolute;top:0;right:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdCounterBadgeComponent, selector: "qd-counter-badge", inputs: ["count"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellToolbarItemComponent, decorators: [{
             type: Component,
@@ -32352,7 +32407,7 @@ class QdShellHeaderComponent {
     }
     async = async;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdShellHeaderComponent, isStandalone: false, selector: "[qd-shell-header]", inputs: { config: "config", isMinimized: "isMinimized", isCommentsUsed: "isCommentsUsed", hasComments: "hasComments" }, outputs: { menuIconChange: "menuIconChange" }, host: { properties: { "class.minimized": "this.minimized", "class.sticky": "this.sticky", "class.expanded": "this.expanded" }, classAttribute: "qd-shell-header" }, ngImport: i0, template: "<qd-shell-header-banner cdkDrag cdkDragLockAxis=\"x\" cdkDragBoundary=\"header\"></qd-shell-header-banner>\n\n<qd-icon\n  *ngIf=\"hasNavigation$ | async\"\n  [icon]=\"(isNavigationPinned$ | async) ? 'timesLarge' : 'menu'\"\n  class=\"toggle-navigation\"\n  data-test-id=\"navigation-toggle\"\n  (click)=\"togglePinnedNavigation()\"\n></qd-icon>\n\n<button *ngIf=\"backLinkDisplayed$ | async\" class=\"back-link\" (click)=\"handleBackClick()\" tabindex=\"0\">\n  <qd-icon class=\"back-link-icon\" icon=\"arrowLeft\"></qd-icon>\n</button>\n\n<qd-icon *ngIf=\"logoIconDisplayed$ | async\" class=\"logo-icon\" [icon]=\"isMinimized ? 'coatCh' : 'logo'\"></qd-icon>\n\n<span class=\"illustration\" *ngIf=\"config?.illustration\" [class.minimized]=\"isMinimized\">\n  <img [src]=\"config.illustration.url\" />\n</span>\n\n<span class=\"title\" *ngIf=\"config.title\">\n  {{ isPlainTitle(config.title) ? config.title : (extractI18nTitle(config.title) | translate) }}\n</span>\n\n<qd-shell-header-search *ngIf=\"config.hasSearch\"></qd-shell-header-search>\n\n<qd-shell-toolbar *ngIf=\"config.toolbar\" [config]=\"config.toolbar\"></qd-shell-toolbar>\n\n<qd-shell-header-widget\n  *ngIf=\"config.headerWidget && !config.headerWidget.isDisabled\"\n  [config]=\"config.headerWidget\"\n></qd-shell-header-widget>\n\n<qd-icon\n  *ngIf=\"!config.serviceNavigation?.isDisabled && config.serviceNavigation\"\n  [icon]=\"isServiceNavigationOpened ? 'timesLarge' : 'menu'\"\n  data-test-id=\"service-navigation-toggle\"\n  [ngClass]=\"{\n    'toggle-service-navigation': true,\n    expanded: true\n  }\"\n  (click)=\"toggleServiceNavigation()\"\n></qd-icon>\n\n<qd-shell-service-navigation\n  *ngIf=\"!config.serviceNavigation?.isDisabled && config.serviceNavigation\"\n  [config]=\"config.serviceNavigation\"\n  [ngClass]=\"{ expanded: !isServiceNavigationOpened }\"\n></qd-shell-service-navigation>\n\n<!-- TODO: Remove in v17! -->\n<qd-icon\n  *ngIf=\"isCommentsUsed\"\n  icon=\"chat\"\n  data-test-id=\"comments-toggle\"\n  [ngClass]=\"{\n    'toggle-comments': true,\n    'has-comments': hasComments,\n    'is-opened': isCommentsOpened$ | async\n  }\"\n  (click)=\"toggleComments()\"\n></qd-icon>\n\n<qd-icon\n  *ngIf=\"hasNotificationsToggle$ | async\"\n  icon=\"notification\"\n  data-test-id=\"notification-toggle\"\n  [ngClass]=\"{\n    'toggle-notification': true,\n    'has-notifications': hasNotifications$ | async,\n    'is-opened': isNotificationsOpened$ | async\n  }\"\n  (click)=\"toggleNotifications()\"\n></qd-icon>\n", styles: [":host{display:flex;flex-wrap:wrap;align-content:center;align-items:center;align-self:start;justify-content:space-between;padding:.5rem 1rem .5rem 0;border-bottom:.3125rem solid rgb(220,0,24);background-color:#fff;grid-area:header}:host.sticky{position:sticky;z-index:998;top:0}@media (max-width: 599.98px){:host{height:3.75rem;align-content:flex-start}:host.expanded{height:auto}}@media (min-width: 960px){:host{height:5.9375rem;padding:0 .75rem 0 0}:host.minimized{height:4.0625rem}}:host .toggle-navigation{padding:1.9375rem .625rem 1.9375rem .8125rem;margin-right:0;cursor:pointer;font-size:1.5rem}@media (min-width: 960px){:host .toggle-navigation{border-right:.0625rem solid rgb(213,213,213)}}:host.minimized .toggle-navigation{padding:1rem .625rem 1rem .8125rem}@media (min-width: 960px){:host .logo-icon{border-right:.0625rem solid rgb(213,213,213)}}:host .logo-icon.qd-icon-logo{padding-right:1.5rem;margin:1rem 1.5rem 1rem 0}@media (min-width: 960px){:host .logo-icon.qd-icon-logo{padding:.9375rem .8125rem;margin-right:1.5rem}}:host .logo-icon.qd-icon-logo svg{overflow:visible}:host .logo-icon.qd-icon-ch-logo{margin-left:1rem;font-size:2rem}@media (min-width: 960px){:host .logo-icon.qd-icon-ch-logo{padding:.75rem .8125rem;margin-right:1.5rem;margin-left:0}}:host .logo-icon:not(.qd-icon-logo) svg{display:none}:host .back-link{padding:0;border-right:.0625rem solid rgb(213,213,213);background-color:transparent;color:#979797;font-size:1.625rem}@media (min-width: 960px){:host .back-link{padding:.875rem .8125rem;margin-right:1.5rem}}:host .back-link-icon{width:2rem;opacity:.8}:host .back-link:hover{color:#757575;opacity:1}:host .back-link:hover .back-link-icon{opacity:1}:host .illustration{width:4rem;height:4rem;margin-right:.625rem}:host .illustration img{max-width:100%}:host .illustration.minimized{width:2rem;height:2rem;margin-right:.3125rem}:host .title{overflow:hidden;flex-grow:1;font-size:1.25rem;font-weight:500;text-align:center;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 960px){:host .title{text-align:start}}:host .toggle-notification,:host .toggle-comments,:host .toggle-service-navigation{position:relative;margin-left:.625rem;cursor:pointer;font-size:1.25rem}:host .toggle-notification.has-notifications:after,:host .toggle-notification.has-comments:after,:host .toggle-comments.has-notifications:after,:host .toggle-comments.has-comments:after,:host .toggle-service-navigation.has-notifications:after,:host .toggle-service-navigation.has-comments:after{position:absolute;top:.125rem;right:0;display:inline-block;width:.5625rem;height:.5625rem;border:rgb(255,255,255) .125rem solid;border-radius:100%;background-color:red;content:\"\"}:host .toggle-notification.is-opened:before,:host .toggle-comments.is-opened:before,:host .toggle-service-navigation.is-opened:before{position:absolute;z-index:-10;display:block;width:2rem;height:2rem;border-radius:50%;background:#e5e5e5;content:\"\";transform:translate(-.4375rem,-.3125rem)}:host .toggle-notification.expanded,:host .toggle-comments.expanded,:host .toggle-service-navigation.expanded{visibility:collapse}@media (max-width: 599.98px){:host .toggle-notification.expanded,:host .toggle-comments.expanded,:host .toggle-service-navigation.expanded{visibility:visible}}\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$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "component", type: QdShellServiceNavigationComponent, selector: "qd-shell-service-navigation", inputs: ["config"] }, { kind: "component", type: QdShellHeaderBannerComponent, selector: "qd-shell-header-banner" }, { kind: "component", type: QdShellHeaderSearchComponent, selector: "qd-shell-header-search" }, { kind: "component", type: QdShellHeaderWidgetComponent, selector: "qd-shell-header-widget", inputs: ["config"] }, { kind: "component", type: QdShellToolbarComponent, selector: "qd-shell-toolbar", inputs: ["config"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdShellHeaderComponent, isStandalone: false, selector: "[qd-shell-header]", inputs: { config: "config", isMinimized: "isMinimized", isCommentsUsed: "isCommentsUsed", hasComments: "hasComments" }, outputs: { menuIconChange: "menuIconChange" }, host: { properties: { "class.minimized": "this.minimized", "class.sticky": "this.sticky", "class.expanded": "this.expanded" }, classAttribute: "qd-shell-header" }, ngImport: i0, template: "<qd-shell-header-banner cdkDrag cdkDragLockAxis=\"x\" cdkDragBoundary=\"header\"></qd-shell-header-banner>\n\n<qd-icon\n  *ngIf=\"hasNavigation$ | async\"\n  [icon]=\"(isNavigationPinned$ | async) ? 'timesLarge' : 'menu'\"\n  class=\"toggle-navigation\"\n  data-test-id=\"navigation-toggle\"\n  (click)=\"togglePinnedNavigation()\"\n></qd-icon>\n\n<button *ngIf=\"backLinkDisplayed$ | async\" class=\"back-link\" (click)=\"handleBackClick()\" tabindex=\"0\">\n  <qd-icon class=\"back-link-icon\" icon=\"arrowLeft\"></qd-icon>\n</button>\n\n<qd-icon *ngIf=\"logoIconDisplayed$ | async\" class=\"logo-icon\" [icon]=\"isMinimized ? 'coatCh' : 'logo'\"></qd-icon>\n\n<span class=\"illustration\" *ngIf=\"config?.illustration\" [class.minimized]=\"isMinimized\">\n  <img [src]=\"config.illustration.url\" />\n</span>\n\n<span class=\"title\" *ngIf=\"config.title\">\n  {{ isPlainTitle(config.title) ? config.title : (extractI18nTitle(config.title) | translate) }}\n</span>\n\n<qd-shell-header-search *ngIf=\"config.hasSearch\"></qd-shell-header-search>\n\n<qd-shell-toolbar *ngIf=\"config.toolbar\" [config]=\"config.toolbar\"></qd-shell-toolbar>\n\n<qd-shell-header-widget\n  *ngIf=\"config.headerWidget && !config.headerWidget.isDisabled\"\n  [config]=\"config.headerWidget\"\n></qd-shell-header-widget>\n\n<qd-icon\n  *ngIf=\"!config.serviceNavigation?.isDisabled && config.serviceNavigation\"\n  [icon]=\"isServiceNavigationOpened ? 'timesLarge' : 'menu'\"\n  data-test-id=\"service-navigation-toggle\"\n  [ngClass]=\"{\n    'toggle-service-navigation': true,\n    expanded: true\n  }\"\n  (click)=\"toggleServiceNavigation()\"\n></qd-icon>\n\n<qd-shell-service-navigation\n  *ngIf=\"!config.serviceNavigation?.isDisabled && config.serviceNavigation\"\n  [config]=\"config.serviceNavigation\"\n  [ngClass]=\"{ expanded: !isServiceNavigationOpened }\"\n></qd-shell-service-navigation>\n\n<!-- TODO: Remove in v17! -->\n<qd-icon\n  *ngIf=\"isCommentsUsed\"\n  icon=\"chat\"\n  data-test-id=\"comments-toggle\"\n  [ngClass]=\"{\n    'toggle-comments': true,\n    'has-comments': hasComments,\n    'is-opened': isCommentsOpened$ | async\n  }\"\n  (click)=\"toggleComments()\"\n></qd-icon>\n\n<qd-icon\n  *ngIf=\"hasNotificationsToggle$ | async\"\n  icon=\"notification\"\n  data-test-id=\"notification-toggle\"\n  [ngClass]=\"{\n    'toggle-notification': true,\n    'has-notifications': hasNotifications$ | async,\n    'is-opened': isNotificationsOpened$ | async\n  }\"\n  (click)=\"toggleNotifications()\"\n></qd-icon>\n", styles: [":host{display:flex;flex-wrap:wrap;align-content:center;align-items:center;align-self:start;justify-content:space-between;padding:.5rem 1rem .5rem 0;border-bottom:.3125rem solid rgb(220,0,24);background-color:#fff;grid-area:header}:host.sticky{position:sticky;z-index:998;top:0}@media (max-width: 599.98px){:host{height:3.75rem;align-content:flex-start}:host.expanded{height:auto}}@media (min-width: 960px){:host{height:5.9375rem;padding:0 .75rem 0 0}:host.minimized{height:4.0625rem}}:host .toggle-navigation{padding:1.9375rem .625rem 1.9375rem .8125rem;margin-right:0;cursor:pointer;font-size:1.5rem}@media (min-width: 960px){:host .toggle-navigation{border-right:.0625rem solid rgb(213,213,213)}}:host.minimized .toggle-navigation{padding:1rem .625rem 1rem .8125rem}@media (min-width: 960px){:host .logo-icon{border-right:.0625rem solid rgb(213,213,213)}}:host .logo-icon.qd-icon-logo{padding-right:1.5rem;margin:1rem 1.5rem 1rem 0}@media (min-width: 960px){:host .logo-icon.qd-icon-logo{padding:.9375rem .8125rem;margin-right:1.5rem}}:host .logo-icon.qd-icon-logo svg{overflow:visible}:host .logo-icon.qd-icon-ch-logo{margin-left:1rem;font-size:2rem}@media (min-width: 960px){:host .logo-icon.qd-icon-ch-logo{padding:.75rem .8125rem;margin-right:1.5rem;margin-left:0}}:host .logo-icon:not(.qd-icon-logo) svg{display:none}:host .back-link{padding:0;border-right:.0625rem solid rgb(213,213,213);background-color:transparent;color:#979797;font-size:1.625rem}@media (min-width: 960px){:host .back-link{padding:.875rem .8125rem;margin-right:1.5rem}}:host .back-link-icon{width:2rem;opacity:.8}:host .back-link:hover{color:#757575;opacity:1}:host .back-link:hover .back-link-icon{opacity:1}:host .illustration{width:4rem;height:4rem;margin-right:.625rem}:host .illustration img{max-width:100%}:host .illustration.minimized{width:2rem;height:2rem;margin-right:.3125rem}:host .title{overflow:hidden;flex-grow:1;font-size:1.25rem;font-weight:500;text-align:center;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 960px){:host .title{text-align:start}}:host .toggle-notification,:host .toggle-comments,:host .toggle-service-navigation{position:relative;margin-left:.625rem;cursor:pointer;font-size:1.25rem}:host .toggle-notification.has-notifications:after,:host .toggle-notification.has-comments:after,:host .toggle-comments.has-notifications:after,:host .toggle-comments.has-comments:after,:host .toggle-service-navigation.has-notifications:after,:host .toggle-service-navigation.has-comments:after{position:absolute;top:.125rem;right:0;display:inline-block;width:.5625rem;height:.5625rem;border:rgb(255,255,255) .125rem solid;border-radius:100%;background-color:red;content:\"\"}:host .toggle-notification.is-opened:before,:host .toggle-comments.is-opened:before,:host .toggle-service-navigation.is-opened:before{position:absolute;z-index:-10;display:block;width:2rem;height:2rem;border-radius:50%;background:#e5e5e5;content:\"\";transform:translate(-.4375rem,-.3125rem)}:host .toggle-notification.expanded,:host .toggle-comments.expanded,:host .toggle-service-navigation.expanded{visibility:collapse}@media (max-width: 599.98px){:host .toggle-notification.expanded,:host .toggle-comments.expanded,:host .toggle-service-navigation.expanded{visibility:visible}}\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$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdShellServiceNavigationComponent, selector: "qd-shell-service-navigation", inputs: ["config"] }, { kind: "component", type: QdShellHeaderBannerComponent, selector: "qd-shell-header-banner" }, { kind: "component", type: QdShellHeaderSearchComponent, selector: "qd-shell-header-search" }, { kind: "component", type: QdShellHeaderWidgetComponent, selector: "qd-shell-header-widget", inputs: ["config"] }, { kind: "component", type: QdShellToolbarComponent, selector: "qd-shell-toolbar", inputs: ["config"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellHeaderComponent, decorators: [{
             type: Component,
@@ -32390,7 +32445,7 @@ class QdShellNavigationLinkComponent {
             this.config.handler();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellNavigationLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdShellNavigationLinkComponent, isStandalone: false, selector: "[qd-shell-navigation-link]", inputs: { config: "config" }, host: { properties: { "class.current": "config.isCurrent " } }, ngImport: i0, template: "<span (click)=\"handleClick()\">\n  <qd-icon [icon]=\"config.icon ?? 'linkWeb'\"></qd-icon>\n  {{ config.i18n | translate }}\n</span>\n", styles: [":host{cursor:pointer}:host.current{background:#e5e5e5;cursor:default}:host:hover{background:#efefef}:host qd-icon{padding:0 .8125rem 0 .875rem;font-size:1.25rem;line-height:2rem;text-align:center;vertical-align:middle}:host span{display:block}\n"], dependencies: [{ kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdShellNavigationLinkComponent, isStandalone: false, selector: "[qd-shell-navigation-link]", inputs: { config: "config" }, host: { properties: { "class.current": "config.isCurrent " } }, ngImport: i0, template: "<span (click)=\"handleClick()\">\n  <qd-icon [icon]=\"config.icon ?? 'linkWeb'\"></qd-icon>\n  {{ config.i18n | translate }}\n</span>\n", styles: [":host{cursor:pointer}:host.current{background:#e5e5e5;cursor:default}:host:hover{background:#efefef}:host qd-icon{padding:0 .8125rem 0 .875rem;font-size:1.25rem;line-height:2rem;text-align:center;vertical-align:middle}:host span{display:block}\n"], dependencies: [{ kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellNavigationLinkComponent, decorators: [{
             type: Component,
@@ -32505,7 +32560,7 @@ class QdShellNotificationComponent {
         this.notificationService.remove('shell', this.notification.uuid);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdShellNotificationComponent, isStandalone: false, selector: "qd-shell-notification", inputs: { notification: "notification" }, host: { properties: { "attr.class": "this.typeClassName" }, classAttribute: "qd-shell-notification" }, usesOnChanges: true, ngImport: i0, template: "<qd-icon *ngIf=\"closeable\" [icon]=\"'timesLarge'\" class=\"closer\" (click)=\"remove()\"></qd-icon>\n<qd-icon [icon]=\"this.getIcon()\" class=\"icon\"></qd-icon>\n\n<h3 class=\"title\" *ngIf=\"notification?.title\">{{ notification.title.i18n | translate }}</h3>\n<span class=\"message\">{{ notification?.i18n | translate }}</span>\n\n<span class=\"date\" *ngIf=\"displayedDate\">{{ displayedDate }}</span>\n", styles: [":host{position:relative;display:grid;width:100%;padding:.5rem 1.5rem .5rem .75rem;border:rgb(213,213,213) solid .0625rem;margin-bottom:.75rem;background:#fff;font-size:.875rem;gap:.125rem .625rem;grid-template-columns:23px 1fr;line-height:1rem}:host .icon{font-size:1.5rem;grid-row:1/span 3;line-height:1.5rem}:host .title{margin:0!important;color:#171717;font-size:.875rem}:host .message{margin-top:.1875rem;color:#333;font-size:.875rem;white-space:pre-wrap}:host .title+.message{margin-top:0}:host .date{margin-top:.875rem;color:#333;font-size:.875rem}:host.qd-notification-info{border-left:.25rem solid rgb(0,102,153)}:host.qd-notification-info .icon{color:#069}:host.qd-notification-warning{border-left:.25rem solid rgb(255,155,0)}:host.qd-notification-warning .icon{color:#ff9b00}:host.qd-notification-critical{border-left:.25rem solid rgb(199,0,35)}:host.qd-notification-critical .icon{color:#c70023}:host.qd-notification-success{border-left:.25rem solid rgb(0,129,58)}:host.qd-notification-success .icon{color:#00813a}:host .closer{position:absolute;top:.5rem;right:.75rem;color:#333;cursor:pointer;font-size:.75rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdShellNotificationComponent, isStandalone: false, selector: "qd-shell-notification", inputs: { notification: "notification" }, host: { properties: { "attr.class": "this.typeClassName" }, classAttribute: "qd-shell-notification" }, usesOnChanges: true, ngImport: i0, template: "<qd-icon *ngIf=\"closeable\" [icon]=\"'timesLarge'\" class=\"closer\" (click)=\"remove()\"></qd-icon>\n<qd-icon [icon]=\"this.getIcon()\" class=\"icon\"></qd-icon>\n\n<h3 class=\"title\" *ngIf=\"notification?.title\">{{ notification.title.i18n | translate }}</h3>\n<span class=\"message\">{{ notification?.i18n | translate }}</span>\n\n<span class=\"date\" *ngIf=\"displayedDate\">{{ displayedDate }}</span>\n", styles: [":host{position:relative;display:grid;width:100%;padding:.5rem 1.5rem .5rem .75rem;border:rgb(213,213,213) solid .0625rem;margin-bottom:.75rem;background:#fff;font-size:.875rem;gap:.125rem .625rem;grid-template-columns:23px 1fr;line-height:1rem}:host .icon{font-size:1.5rem;grid-row:1/span 3;line-height:1.5rem}:host .title{margin:0!important;color:#171717;font-size:.875rem}:host .message{margin-top:.1875rem;color:#333;font-size:.875rem;white-space:pre-wrap}:host .title+.message{margin-top:0}:host .date{margin-top:.875rem;color:#333;font-size:.875rem}:host.qd-notification-info{border-left:.25rem solid rgb(0,102,153)}:host.qd-notification-info .icon{color:#069}:host.qd-notification-warning{border-left:.25rem solid rgb(255,155,0)}:host.qd-notification-warning .icon{color:#ff9b00}:host.qd-notification-critical{border-left:.25rem solid rgb(199,0,35)}:host.qd-notification-critical .icon{color:#c70023}:host.qd-notification-success{border-left:.25rem solid rgb(0,129,58)}:host.qd-notification-success .icon{color:#00813a}:host .closer{position:absolute;top:.5rem;right:.75rem;color:#333;cursor:pointer;font-size:.75rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellNotificationComponent, decorators: [{
             type: Component,
@@ -32542,7 +32597,7 @@ class QdShellRightToolbarComponent {
         this.shellRightService.togglePinned();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellRightToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdShellRightToolbarComponent, isStandalone: false, selector: "qd-shell-right-toolbar", inputs: { config: "config" }, ngImport: i0, template: "<span>{{ config?.shellRightTitle?.i18n | translate }}</span>\n<a class=\"pinner\" (click)=\"togglePinned()\"></a>\n<qd-icon class=\"closer\" icon=\"timesLarge\" (click)=\"close()\"></qd-icon>\n", styles: [":host{display:flex;align-items:flex-start;padding:.6875rem 1rem;border-bottom:.125rem solid rgb(213,213,213)}:host span{flex-grow:99;margin-right:.625rem;color:#171717;font-size:.875rem;font-weight:700;line-height:1.25rem}:host .pinner{display:inline-block;width:1rem;height:1rem;flex-shrink:0;margin-top:.125rem;background-image:url(data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxkZWZzPjxzdHlsZT5wYXRoe2ZpbGw6IzQ1NDU0NTt9LmNscy0xe2ZpbGw6bm9uZX08L3N0eWxlPjwvZGVmcz48dGl0bGU+cGluPC90aXRsZT48cGF0aCBkPSJNMjguNTksMTMuMzEsMzAsMTEuOSwyMCwyLDE4LjY5LDMuNDIsMTkuODcsNC42LDguMzgsMTQuMzIsNi42NiwxMi42MSw1LjI1LDE0bDUuNjYsNS42OEwyLDI4LjU4LDMuNDEsMzBsOC45MS04LjkxTDE4LDI2Ljc1bDEuMzktMS40Mi0xLjcxLTEuNzFMMjcuNCwxMi4xM1pNMTYuMjYsMjIuMiw5LjgsMTUuNzQsMjEuMjksNiwyNiwxMC43MVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDApIi8+PHJlY3QgaWQ9Il9UcmFuc3BhcmVudF9SZWN0YW5nbGVfIiBkYXRhLW5hbWU9IiZsdDtUcmFuc3BhcmVudCBSZWN0YW5nbGUmZ3Q7IiBjbGFzcz0iY2xzLTEiIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIvPjwvc3ZnPg==);cursor:pointer}:host .pinner:hover{background-image:url(data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxkZWZzPjxzdHlsZT5wYXRoe2ZpbGw6IzE3MTcxNzt9LmNscy0xe2ZpbGw6bm9uZX08L3N0eWxlPjwvZGVmcz48dGl0bGU+cGluPC90aXRsZT48cGF0aCBkPSJNMjguNTksMTMuMzEsMzAsMTEuOSwyMCwyLDE4LjY5LDMuNDIsMTkuODcsNC42LDguMzgsMTQuMzIsNi42NiwxMi42MSw1LjI1LDE0bDUuNjYsNS42OEwyLDI4LjU4LDMuNDEsMzBsOC45MS04LjkxTDE4LDI2Ljc1bDEuMzktMS40Mi0xLjcxLTEuNzFMMjcuNCwxMi4xM1pNMTYuMjYsMjIuMiw5LjgsMTUuNzQsMjEuMjksNiwyNiwxMC43MVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDApIi8+PHJlY3QgaWQ9Il9UcmFuc3BhcmVudF9SZWN0YW5nbGVfIiBkYXRhLW5hbWU9IiZsdDtUcmFuc3BhcmVudCBSZWN0YW5nbGUmZ3Q7IiBjbGFzcz0iY2xzLTEiIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIvPjwvc3ZnPg==)}:host .closer{margin-top:.125rem;margin-left:.5rem;color:#454545;cursor:pointer;font-size:.875rem}:host .closer:hover{color:#171717}\n"], dependencies: [{ kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdShellRightToolbarComponent, isStandalone: false, selector: "qd-shell-right-toolbar", inputs: { config: "config" }, ngImport: i0, template: "<span>{{ config?.shellRightTitle?.i18n | translate }}</span>\n<a class=\"pinner\" (click)=\"togglePinned()\"></a>\n<qd-icon class=\"closer\" icon=\"timesLarge\" (click)=\"close()\"></qd-icon>\n", styles: [":host{display:flex;align-items:flex-start;padding:.6875rem 1rem;border-bottom:.125rem solid rgb(213,213,213)}:host span{flex-grow:99;margin-right:.625rem;color:#171717;font-size:.875rem;font-weight:700;line-height:1.25rem}:host .pinner{display:inline-block;width:1rem;height:1rem;flex-shrink:0;margin-top:.125rem;background-image:url(data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxkZWZzPjxzdHlsZT5wYXRoe2ZpbGw6IzQ1NDU0NTt9LmNscy0xe2ZpbGw6bm9uZX08L3N0eWxlPjwvZGVmcz48dGl0bGU+cGluPC90aXRsZT48cGF0aCBkPSJNMjguNTksMTMuMzEsMzAsMTEuOSwyMCwyLDE4LjY5LDMuNDIsMTkuODcsNC42LDguMzgsMTQuMzIsNi42NiwxMi42MSw1LjI1LDE0bDUuNjYsNS42OEwyLDI4LjU4LDMuNDEsMzBsOC45MS04LjkxTDE4LDI2Ljc1bDEuMzktMS40Mi0xLjcxLTEuNzFMMjcuNCwxMi4xM1pNMTYuMjYsMjIuMiw5LjgsMTUuNzQsMjEuMjksNiwyNiwxMC43MVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDApIi8+PHJlY3QgaWQ9Il9UcmFuc3BhcmVudF9SZWN0YW5nbGVfIiBkYXRhLW5hbWU9IiZsdDtUcmFuc3BhcmVudCBSZWN0YW5nbGUmZ3Q7IiBjbGFzcz0iY2xzLTEiIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIvPjwvc3ZnPg==);cursor:pointer}:host .pinner:hover{background-image:url(data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxkZWZzPjxzdHlsZT5wYXRoe2ZpbGw6IzE3MTcxNzt9LmNscy0xe2ZpbGw6bm9uZX08L3N0eWxlPjwvZGVmcz48dGl0bGU+cGluPC90aXRsZT48cGF0aCBkPSJNMjguNTksMTMuMzEsMzAsMTEuOSwyMCwyLDE4LjY5LDMuNDIsMTkuODcsNC42LDguMzgsMTQuMzIsNi42NiwxMi42MSw1LjI1LDE0bDUuNjYsNS42OEwyLDI4LjU4LDMuNDEsMzBsOC45MS04LjkxTDE4LDI2Ljc1bDEuMzktMS40Mi0xLjcxLTEuNzFMMjcuNCwxMi4xM1pNMTYuMjYsMjIuMiw5LjgsMTUuNzQsMjEuMjksNiwyNiwxMC43MVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDApIi8+PHJlY3QgaWQ9Il9UcmFuc3BhcmVudF9SZWN0YW5nbGVfIiBkYXRhLW5hbWU9IiZsdDtUcmFuc3BhcmVudCBSZWN0YW5nbGUmZ3Q7IiBjbGFzcz0iY2xzLTEiIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIvPjwvc3ZnPg==)}:host .closer{margin-top:.125rem;margin-left:.5rem;color:#454545;cursor:pointer;font-size:.875rem}:host .closer:hover{color:#171717}\n"], dependencies: [{ kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellRightToolbarComponent, decorators: [{
             type: Component,
@@ -32766,7 +32821,7 @@ class QdCommentsComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdCommentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdCommentsComponent, isStandalone: false, selector: "qd-comments", inputs: { config: "config", comments: "comments" }, ngImport: i0, template: "<div class=\"comments-list\">\n  <div class=\"add-button-area\">\n    <button\n      qdButton\n      qdButtonGhost\n      color=\"primary\"\n      (click)=\"addNew()\"\n      [disabled]=\"config.addConfig?.addButton?.disabled ?? false\"\n    >\n      <qd-icon icon=\"plusLarge\" class=\"plus-icon\"></qd-icon>\n      {{ config.addConfig?.addButton?.i18n | translate }}\n    </button>\n  </div>\n\n  <ng-container *ngFor=\"let comment of commentList\">\n    <div\n      class=\"comment\"\n      (click)=\"clickComment(comment)\"\n      [class.hasAction]=\"this.config.primaryActionHandler !== undefined\"\n    >\n      <div class=\"comment-header\">\n        <div>\n          <span class=\"comment-author\"\n            ><b> {{ comment.author }} </b></span\n          >\n          <span class=\"comment-custom\">\n            {{ comment.custom?.listDisplayName?.i18n ? \" - \" + (comment.custom.listDisplayName.i18n | translate) : \"\" }}\n          </span>\n          <span class=\"comment-date\"> {{ \" - \" + formatDate(comment.date) }} </span>\n        </div>\n        <button\n          *ngIf=\"config.secondaryActions?.length > 0\"\n          type=\"button\"\n          [qdPopoverOnClick]=\"menu\"\n          [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n          [qdPopoverStopPropagation]=\"true\"\n          class=\"menu-button\"\n        >\n          <qd-icon icon=\"overflowMenuVertical\"></qd-icon>\n        </button>\n      </div>\n      <div class=\"deleted-meta\" *ngIf=\"comment?.deletedMeta\">\n        <b>{{ comment.deletedMeta.deletedBy }}</b> -\n        {{\n          comment.deletedMeta.custom?.listDisplayName.i18n\n            ? (comment.deletedMeta.custom.listDisplayName.i18n | translate) + \" -\"\n            : \"\"\n        }}\n        {{\n          \"i18n.qd.comments.delete.deleted\"\n            | translate\n            | placeholder : \"deleteDate\" : formatDate(comment.deletedMeta.date)\n        }}\n      </div>\n      <div\n        class=\"comment-content\"\n        [style.text-decoration]=\"comment.deletedMeta ? 'line-through' : ''\"\n        [style.-webkit-line-clamp]=\"config.numberOfDisplayedRows || 10\"\n      >\n        <span [innerHTML]=\"comment.comment\"></span>\n      </div>\n    </div>\n\n    <ng-template #menu>\n      <qd-comment-menu [menuActions]=\"config.secondaryActions\" [comment]=\"comment\"></qd-comment-menu>\n    </ng-template>\n  </ng-container>\n</div>\n", styles: [".comments-list{font-size:.875rem}.comments-list .add-button-area{display:flex;justify-content:flex-end;padding:.5rem 1rem;border-bottom:.0625rem solid rgb(213,213,213);margin-bottom:.5rem}.comments-list .add-button-area .qd-button-primary{padding:0 .5625rem;white-space:nowrap}.comments-list .add-button-area .qd-button-primary .plus-icon{padding-right:.5rem}.comments-list .comment{padding:.5rem .4375rem .5rem 1rem}.comments-list .comment.hasAction{cursor:pointer}.comments-list .comment.hasAction:hover{background-color:#f2f7fa}.comments-list .comment .comment-header{display:flex;justify-content:space-between;padding-bottom:.1875rem}.comments-list .comment .comment-header div{align-self:center}.comments-list .comment .comment-header .menu-button{background:unset;color:#454545;font-size:1rem}.comments-list .comment .comment-header .menu-button:hover,.comments-list .comment .comment-header .menu-button:focus{color:#000}.comments-list .comment .deleted-meta{margin-bottom:.5rem;color:#c70023}.comments-list .comment .comment-content{display:-webkit-box;overflow:hidden;padding-right:.5rem;-webkit-box-orient:vertical;color:#757575;-webkit-line-clamp:10}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: QdCommentMenuComponent, selector: "qd-comment-menu", inputs: ["menuActions", "comment"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: QdPlaceholderPipe, name: "placeholder" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdCommentsComponent, isStandalone: false, selector: "qd-comments", inputs: { config: "config", comments: "comments" }, ngImport: i0, template: "<div class=\"comments-list\">\n  <div class=\"add-button-area\">\n    <button\n      qdButton\n      qdButtonGhost\n      color=\"primary\"\n      (click)=\"addNew()\"\n      [disabled]=\"config.addConfig?.addButton?.disabled ?? false\"\n    >\n      <qd-icon icon=\"plusLarge\" class=\"plus-icon\"></qd-icon>\n      {{ config.addConfig?.addButton?.i18n | translate }}\n    </button>\n  </div>\n\n  <ng-container *ngFor=\"let comment of commentList\">\n    <div\n      class=\"comment\"\n      (click)=\"clickComment(comment)\"\n      [class.hasAction]=\"this.config.primaryActionHandler !== undefined\"\n    >\n      <div class=\"comment-header\">\n        <div>\n          <span class=\"comment-author\"\n            ><b> {{ comment.author }} </b></span\n          >\n          <span class=\"comment-custom\">\n            {{ comment.custom?.listDisplayName?.i18n ? \" - \" + (comment.custom.listDisplayName.i18n | translate) : \"\" }}\n          </span>\n          <span class=\"comment-date\"> {{ \" - \" + formatDate(comment.date) }} </span>\n        </div>\n        <button\n          *ngIf=\"config.secondaryActions?.length > 0\"\n          type=\"button\"\n          [qdPopoverOnClick]=\"menu\"\n          [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n          [qdPopoverStopPropagation]=\"true\"\n          class=\"menu-button\"\n        >\n          <qd-icon icon=\"overflowMenuVertical\"></qd-icon>\n        </button>\n      </div>\n      <div class=\"deleted-meta\" *ngIf=\"comment?.deletedMeta\">\n        <b>{{ comment.deletedMeta.deletedBy }}</b> -\n        {{\n          comment.deletedMeta.custom?.listDisplayName.i18n\n            ? (comment.deletedMeta.custom.listDisplayName.i18n | translate) + \" -\"\n            : \"\"\n        }}\n        {{\n          \"i18n.qd.comments.delete.deleted\"\n            | translate\n            | placeholder : \"deleteDate\" : formatDate(comment.deletedMeta.date)\n        }}\n      </div>\n      <div\n        class=\"comment-content\"\n        [style.text-decoration]=\"comment.deletedMeta ? 'line-through' : ''\"\n        [style.-webkit-line-clamp]=\"config.numberOfDisplayedRows || 10\"\n      >\n        <span [innerHTML]=\"comment.comment\"></span>\n      </div>\n    </div>\n\n    <ng-template #menu>\n      <qd-comment-menu [menuActions]=\"config.secondaryActions\" [comment]=\"comment\"></qd-comment-menu>\n    </ng-template>\n  </ng-container>\n</div>\n", styles: [".comments-list{font-size:.875rem}.comments-list .add-button-area{display:flex;justify-content:flex-end;padding:.5rem 1rem;border-bottom:.0625rem solid rgb(213,213,213);margin-bottom:.5rem}.comments-list .add-button-area .qd-button-primary{padding:0 .5625rem;white-space:nowrap}.comments-list .add-button-area .qd-button-primary .plus-icon{padding-right:.5rem}.comments-list .comment{padding:.5rem .4375rem .5rem 1rem}.comments-list .comment.hasAction{cursor:pointer}.comments-list .comment.hasAction:hover{background-color:#f2f7fa}.comments-list .comment .comment-header{display:flex;justify-content:space-between;padding-bottom:.1875rem}.comments-list .comment .comment-header div{align-self:center}.comments-list .comment .comment-header .menu-button{background:unset;color:#454545;font-size:1rem}.comments-list .comment .comment-header .menu-button:hover,.comments-list .comment .comment-header .menu-button:focus{color:#000}.comments-list .comment .deleted-meta{margin-bottom:.5rem;color:#c70023}.comments-list .comment .comment-content{display:-webkit-box;overflow:hidden;padding-right:.5rem;-webkit-box-orient:vertical;color:#757575;-webkit-line-clamp:10}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: QdCommentMenuComponent, selector: "qd-comment-menu", inputs: ["menuActions", "comment"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: QdPlaceholderPipe, name: "placeholder" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdCommentsComponent, decorators: [{
             type: Component,
@@ -33400,14 +33455,14 @@ class QdPageStepComponent extends CdkStep {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageStepComponent, isStandalone: true, selector: "qd-page-step", inputs: { config: "config", control: "control" }, host: { classAttribute: "qd-stepper" }, providers: [
             { provide: CdkStep, useExisting: QdPageStepComponent },
             { provide: STEPPER_GLOBAL_OPTIONS, useValue: { showError: true } }
-        ], queries: [{ propertyName: "infoBanners", predicate: QdPageInfoBannerComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template>\n  <div [class.has-info-banners]=\"infoBanners.length > 0\">\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".has-info-banners{padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}.has-info-banners qd-page-info-banner:last-child{margin-bottom:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "infoBanners", predicate: QdPageInfoBannerComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template>\n  <div class=\"page-info-banners\">\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".page-info-banners:has(>qd-page-info-banner:not(.qd-page-info-banner-empty)){padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}.page-info-banners>qd-page-info-banner:last-child{margin-bottom:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageStepComponent, decorators: [{
             type: Component,
             args: [{ selector: 'qd-page-step', providers: [
                         { provide: CdkStep, useExisting: QdPageStepComponent },
                         { provide: STEPPER_GLOBAL_OPTIONS, useValue: { showError: true } }
-                    ], host: { class: 'qd-stepper' }, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template>\n  <div [class.has-info-banners]=\"infoBanners.length > 0\">\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".has-info-banners{padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}.has-info-banners qd-page-info-banner:last-child{margin-bottom:0}\n"] }]
+                    ], host: { class: 'qd-stepper' }, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template>\n  <div class=\"page-info-banners\">\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".page-info-banners:has(>qd-page-info-banner:not(.qd-page-info-banner-empty)){padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}.page-info-banners>qd-page-info-banner:last-child{margin-bottom:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], control: [{
@@ -33489,6 +33544,8 @@ class QdPageTabComponent extends CdkStep {
     }
     ngOnInit() {
         this.validateLabel();
+        if (this.tabControl)
+            this.initErrorCheck();
     }
     ngOnChanges(changes) {
         super.ngOnChanges();
@@ -33506,11 +33563,29 @@ class QdPageTabComponent extends CdkStep {
         if (!this.config?.label?.i18n)
             console.error('Quadrel Framework | QdPageTab - Please provide a label for the tab.');
     }
+    initErrorCheck() {
+        this.tabControl.statusChanges.pipe(takeUntil$1(this._destroyed$)).subscribe(() => {
+            if (this.hasAnyError(this.tabControl)) {
+                this.interacted = true;
+            }
+        });
+    }
+    hasAnyError(control) {
+        if (control.errors && control.touched)
+            return true;
+        if (control instanceof FormGroup) {
+            return Object.values(control.controls).some(this.hasAnyError);
+        }
+        if (control instanceof FormArray) {
+            return control.controls.some(this.hasAnyError);
+        }
+        return false;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageTabComponent, isStandalone: true, selector: "qd-page-tab", inputs: { config: "config", tabControl: "tabControl" }, providers: [
             { provide: CdkStep, useExisting: QdPageTabComponent },
             { provide: STEPPER_GLOBAL_OPTIONS, useValue: { showError: true } }
-        ], queries: [{ propertyName: "infoBanners", predicate: QdPageInfoBannerComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template>\n  <div [class.has-info-banners]=\"infoBanners.length > 0\">\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".has-info-banners{padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}.has-info-banners qd-page-info-banner:last-child{margin-bottom:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "infoBanners", predicate: QdPageInfoBannerComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template>\n  <div class=\"page-info-banners\">\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".page-info-banners:has(>qd-page-info-banner:not(.qd-page-info-banner-empty)){padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}.page-info-banners>qd-page-info-banner:last-child{margin-bottom:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabComponent, decorators: [{
             type: Component,
@@ -33518,7 +33593,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         { provide: CdkStep, useExisting: QdPageTabComponent },
                         { provide: STEPPER_GLOBAL_OPTIONS, useValue: { showError: true } }
                     ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true // inherited by CdkStep
-                    , template: "<ng-template>\n  <div [class.has-info-banners]=\"infoBanners.length > 0\">\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".has-info-banners{padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}.has-info-banners qd-page-info-banner:last-child{margin-bottom:0}\n"] }]
+                    , template: "<ng-template>\n  <div class=\"page-info-banners\">\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".page-info-banners:has(>qd-page-info-banner:not(.qd-page-info-banner-empty)){padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}.page-info-banners>qd-page-info-banner:last-child{margin-bottom:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], tabControl: [{
@@ -33975,11 +34050,11 @@ class QdQuickEditComponent {
         this.controlContainer.control.valueChanges.pipe(tap(() => this.changeDetectorRef.detectChanges())).subscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdQuickEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdQuickEditComponent, isStandalone: false, selector: "qd-quick-edit", inputs: { config: "config", data: "data", testId: ["data-test-id", "testId"] }, outputs: { formGroupChange: "formGroupChange", addNewClicked: "addNewClicked" }, viewQueries: [{ propertyName: "customForDirective", first: true, predicate: QdCustomForDirective, descendants: true }, { propertyName: "focusables", predicate: QdFocusableDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n  <button\n    qdButton\n    qdButtonGhost\n    icon=\"plus\"\n    (click)=\"createRow()\"\n    [data-test-id]=\"testId + '-button-add-new'\"\n    class=\"create-button-standalone\"\n  >\n    {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n  </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n  <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n    <div class=\"table-row\">\n      <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n        {{ header?.i18n | translate }}\n        <qd-tooltip-icon [tooltip]=\"header?.tooltip\"></qd-tooltip-icon>\n      </div>\n      <div class=\"table-cell actions-column\" *ngIf=\"hasVisibleActions$ | async\">\n        <button class=\"menu-button\">\n          <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n        </button>\n      </div>\n    </div>\n  </div>\n  <div class=\"table-body\">\n    <div\n      class=\"table-row\"\n      *qdCustomFor=\"let row of templateData; let rowIndex = index; toggler: togglerDrawing\"\n      [formGroupName]=\"rowIndex\"\n    >\n      <ng-container *ngFor=\"let column of visibleColumns; trackBy: trackByColumnName\">\n        <div class=\"table-cell\">\n          <qd-dropdown\n            [config]=\"{\n              filter: column.filter,\n              options: column.options,\n              placeholder: column.placeholder,\n              placeholderPrefix: column.placeholderPrefix,\n              viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n            }\"\n            [data-test-id]=\"column.name + rowIndex\"\n            *ngIf=\"column.type === 'enum'; else otherTypes\"\n            [dense]=\"true\"\n            [formControl]=\"$any(control.controls[rowIndex])?.controls[column.name]\"\n            qdFocusable\n            class=\"dropdown\"\n          >\n          </qd-dropdown>\n\n          <ng-template #otherTypes>\n            <qd-input\n              [data-test-id]=\"column.name + rowIndex\"\n              [formControlName]=\"column.name\"\n              *ngIf=\"column.type !== 'enum' && $any(control.controls[rowIndex])?.controls[column.name]\"\n              [config]=\"{\n                inputType: column.type === 'integer' ? 'number' : 'text',\n                viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n              }\"\n              qdFocusable\n            ></qd-input>\n          </ng-template>\n        </div>\n      </ng-container>\n      <td\n        *ngIf=\"hasVisibleActions$ | async\"\n        class=\"table-cell actions\"\n        [attr.data-test-id]=\"testId + '-cell-inline-actions'\"\n      >\n        <button\n          type=\"button\"\n          [qdPopoverOnClick]=\"menu\"\n          [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n          [qdPopoverStopPropagation]=\"true\"\n          class=\"menu-button\"\n          data-test=\"secondary-actions-toggler\"\n        >\n          <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n        </button>\n\n        <ng-template #menu>\n          <button\n            *ngFor=\"let secondaryAction of actions$ | async\"\n            class=\"secondary-actions\"\n            [ngClass]=\"{ disabled: isActionDisabled(secondaryAction, row) }\"\n            [attr.disabled]=\"isActionDisabled(secondaryAction, row) || null\"\n            (click)=\"handleSecondaryAction(secondaryAction, rowIndex)\"\n          >\n            {{ secondaryAction.label.i18n | translate }}\n          </button>\n          <button\n            *ngIf=\"canAdd && (viewonly$ | async) === false\"\n            class=\"secondary-actions\"\n            (click)=\"removeRow(rowIndex)\"\n          >\n            {{ \"i18n.qd.quick.edit.removeButtonLabel\" | translate }}\n          </button>\n        </ng-template>\n      </td>\n    </div>\n  </div>\n  <div class=\"empty-body\" *ngIf=\"config.emptyStateView && !config.emptyStateView.disabled && templateData.length === 0\">\n    <p>{{ config.emptyStateView.i18n | translate }}</p>\n  </div>\n</div>\n", styles: [".table{display:flex;width:100%;flex-direction:column;margin:1.25rem auto;background-color:#fff;font-size:.875rem}.table ::ng-deep .qd-input-input{margin-bottom:0!important}.table-header .table-row{padding-top:.125rem;padding-bottom:.125rem;background-color:#e5e5e5;font-weight:700}.table-header .table-row .actions-column{flex:0;border-right:none;visibility:hidden}.table-header,.table-body{display:flex;flex-direction:column}.table-row{display:flex;flex-direction:row;padding:.25rem 1rem;border-bottom:.0625rem solid rgb(213,213,213);gap:1rem}.table-row ::ng-deep qd-form-label{display:none!important}.table-row ::ng-deep qd-input{margin-bottom:0!important}.table-cell{display:flex;height:37px;flex:1;align-items:center;text-align:left}.table-cell:has(.qd-input-error),.table-cell:has(.qd-dropdown-error){height:auto;align-items:flex-start}.table-cell.actions{flex:0}.table-row:last-child{border-bottom:none}.table-cell:last-child{border-right:none}.editable-actions{display:flex;justify-content:flex-end;margin-right:.625rem;gap:.625rem}.menu-button{display:flex;padding:0 .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem;vertical-align:middle}.menu-button:hover,.menu-button:focus{color:#000;outline:0!important}.secondary-actions{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.secondary-actions:hover{background-color:#f2f7fa}.secondary-actions.disabled{color:#b4b4b4;cursor:not-allowed}.secondary-actions.disabled:hover{background-color:#fff0}.dropdown{min-width:160px}.empty-body{padding:1.5rem;background:#fff}.empty-body p{margin:0 0 .5rem}\n"], dependencies: [{ kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "directive", type: QdFocusableDirective, selector: "[qdFocusable]" }, { kind: "component", type: QdTooltipIconComponent, selector: "qd-tooltip-icon", inputs: ["tooltip"] }, { kind: "directive", type: QdCustomForDirective, selector: "[qdCustomFor]", inputs: ["qdCustomForOf", "qdCustomForToggler"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdQuickEditComponent, isStandalone: false, selector: "qd-quick-edit", inputs: { config: "config", data: "data", testId: ["data-test-id", "testId"] }, outputs: { formGroupChange: "formGroupChange", addNewClicked: "addNewClicked" }, viewQueries: [{ propertyName: "customForDirective", first: true, predicate: QdCustomForDirective, descendants: true }, { propertyName: "focusables", predicate: QdFocusableDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n  <button\n    qdButton\n    qdButtonGhost\n    icon=\"plus\"\n    (click)=\"createRow()\"\n    [data-test-id]=\"testId + '-button-add-new'\"\n    class=\"create-button-standalone\"\n  >\n    {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n  </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n  <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n    <div class=\"table-row\">\n      <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n        {{ header?.i18n | translate }}\n        <qd-tooltip-icon [tooltip]=\"header?.tooltip\"></qd-tooltip-icon>\n      </div>\n      <div class=\"table-cell actions-column\" *ngIf=\"hasVisibleActions$ | async\">\n        <button class=\"menu-button\">\n          <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n        </button>\n      </div>\n    </div>\n  </div>\n  <div class=\"table-body\">\n    <div\n      class=\"table-row\"\n      *qdCustomFor=\"let row of templateData; let rowIndex = index; toggler: togglerDrawing\"\n      [formGroupName]=\"rowIndex\"\n      [attr.data-test-id]=\"testId + '-row-' + rowIndex\"\n    >\n      <ng-container *ngFor=\"let column of visibleColumns; trackBy: trackByColumnName\">\n        <div class=\"table-cell\">\n          <qd-dropdown\n            [config]=\"{\n              filter: column.filter,\n              options: column.options,\n              placeholder: column.placeholder,\n              placeholderPrefix: column.placeholderPrefix,\n              viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n            }\"\n            [data-test-id]=\"column.name + rowIndex\"\n            *ngIf=\"column.type === 'enum'; else otherTypes\"\n            [dense]=\"true\"\n            [formControl]=\"$any(control.controls[rowIndex])?.controls[column.name]\"\n            qdFocusable\n            class=\"dropdown\"\n          >\n          </qd-dropdown>\n\n          <ng-template #otherTypes>\n            <qd-input\n              [data-test-id]=\"column.name + rowIndex\"\n              [formControlName]=\"column.name\"\n              *ngIf=\"column.type !== 'enum' && $any(control.controls[rowIndex])?.controls[column.name]\"\n              [config]=\"{\n                inputType: column.type === 'integer' ? 'number' : 'text',\n                viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n              }\"\n              qdFocusable\n            ></qd-input>\n          </ng-template>\n        </div>\n      </ng-container>\n      <td\n        *ngIf=\"hasVisibleActions$ | async\"\n        class=\"table-cell actions\"\n        [attr.data-test-id]=\"testId + '-cell-inline-actions'\"\n      >\n        <button\n          type=\"button\"\n          [qdPopoverOnClick]=\"menu\"\n          [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n          [qdPopoverStopPropagation]=\"true\"\n          class=\"menu-button\"\n          data-test=\"secondary-actions-toggler\"\n        >\n          <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n        </button>\n\n        <ng-template #menu>\n          <button\n            *ngFor=\"let secondaryAction of actions$ | async\"\n            class=\"secondary-actions\"\n            [ngClass]=\"{ disabled: isActionDisabled(secondaryAction, row) }\"\n            [attr.disabled]=\"isActionDisabled(secondaryAction, row) || null\"\n            (click)=\"handleSecondaryAction(secondaryAction, rowIndex)\"\n          >\n            {{ secondaryAction.label.i18n | translate }}\n          </button>\n          <button\n            *ngIf=\"canAdd && (viewonly$ | async) === false\"\n            class=\"secondary-actions\"\n            (click)=\"removeRow(rowIndex)\"\n          >\n            {{ \"i18n.qd.quick.edit.removeButtonLabel\" | translate }}\n          </button>\n        </ng-template>\n      </td>\n    </div>\n  </div>\n  <div class=\"empty-body\" *ngIf=\"config.emptyStateView && !config.emptyStateView.disabled && templateData.length === 0\">\n    <p>{{ config.emptyStateView.i18n | translate }}</p>\n  </div>\n</div>\n", styles: [".table{display:flex;width:100%;flex-direction:column;margin:1.25rem auto;background-color:#fff;font-size:.875rem}.table ::ng-deep .qd-input-input{margin-bottom:0!important}.table-header .table-row{padding-top:.125rem;padding-bottom:.125rem;background-color:#e5e5e5;font-weight:700}.table-header .table-row .actions-column{flex:0;border-right:none;visibility:hidden}.table-header,.table-body{display:flex;flex-direction:column}.table-row{display:flex;flex-direction:row;padding:.25rem 1rem;border-bottom:.0625rem solid rgb(213,213,213);gap:1rem}.table-row ::ng-deep qd-form-label{display:none!important}.table-row ::ng-deep qd-input{margin-bottom:0!important}.table-body .table-row:hover{background-color:#f5f5f5}.table-cell{display:flex;height:37px;flex:1;align-items:center;text-align:left}.table-cell:has(.qd-input-error),.table-cell:has(.qd-dropdown-error){height:auto;align-items:flex-start}.table-cell.actions{flex:0}.table-row:last-child{border-bottom:none}.table-cell:last-child{border-right:none}.editable-actions{display:flex;justify-content:flex-end;margin-right:.625rem;gap:.625rem}.menu-button{display:flex;padding:0 .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem;vertical-align:middle}.menu-button:hover,.menu-button:focus{color:#000;outline:0!important}.secondary-actions{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.secondary-actions:hover{background-color:#f2f7fa}.secondary-actions.disabled{color:#b4b4b4;cursor:not-allowed}.secondary-actions.disabled:hover{background-color:#fff0}.dropdown{min-width:160px}.empty-body{padding:1.5rem;background:#fff}.empty-body p{margin:0 0 .5rem}\n"], dependencies: [{ kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "directive", type: QdFocusableDirective, selector: "[qdFocusable]" }, { kind: "component", type: QdTooltipIconComponent, selector: "qd-tooltip-icon", inputs: ["tooltip"] }, { kind: "directive", type: QdCustomForDirective, selector: "[qdCustomFor]", inputs: ["qdCustomForOf", "qdCustomForToggler"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdQuickEditComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-quick-edit', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n  <button\n    qdButton\n    qdButtonGhost\n    icon=\"plus\"\n    (click)=\"createRow()\"\n    [data-test-id]=\"testId + '-button-add-new'\"\n    class=\"create-button-standalone\"\n  >\n    {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n  </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n  <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n    <div class=\"table-row\">\n      <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n        {{ header?.i18n | translate }}\n        <qd-tooltip-icon [tooltip]=\"header?.tooltip\"></qd-tooltip-icon>\n      </div>\n      <div class=\"table-cell actions-column\" *ngIf=\"hasVisibleActions$ | async\">\n        <button class=\"menu-button\">\n          <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n        </button>\n      </div>\n    </div>\n  </div>\n  <div class=\"table-body\">\n    <div\n      class=\"table-row\"\n      *qdCustomFor=\"let row of templateData; let rowIndex = index; toggler: togglerDrawing\"\n      [formGroupName]=\"rowIndex\"\n    >\n      <ng-container *ngFor=\"let column of visibleColumns; trackBy: trackByColumnName\">\n        <div class=\"table-cell\">\n          <qd-dropdown\n            [config]=\"{\n              filter: column.filter,\n              options: column.options,\n              placeholder: column.placeholder,\n              placeholderPrefix: column.placeholderPrefix,\n              viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n            }\"\n            [data-test-id]=\"column.name + rowIndex\"\n            *ngIf=\"column.type === 'enum'; else otherTypes\"\n            [dense]=\"true\"\n            [formControl]=\"$any(control.controls[rowIndex])?.controls[column.name]\"\n            qdFocusable\n            class=\"dropdown\"\n          >\n          </qd-dropdown>\n\n          <ng-template #otherTypes>\n            <qd-input\n              [data-test-id]=\"column.name + rowIndex\"\n              [formControlName]=\"column.name\"\n              *ngIf=\"column.type !== 'enum' && $any(control.controls[rowIndex])?.controls[column.name]\"\n              [config]=\"{\n                inputType: column.type === 'integer' ? 'number' : 'text',\n                viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n              }\"\n              qdFocusable\n            ></qd-input>\n          </ng-template>\n        </div>\n      </ng-container>\n      <td\n        *ngIf=\"hasVisibleActions$ | async\"\n        class=\"table-cell actions\"\n        [attr.data-test-id]=\"testId + '-cell-inline-actions'\"\n      >\n        <button\n          type=\"button\"\n          [qdPopoverOnClick]=\"menu\"\n          [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n          [qdPopoverStopPropagation]=\"true\"\n          class=\"menu-button\"\n          data-test=\"secondary-actions-toggler\"\n        >\n          <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n        </button>\n\n        <ng-template #menu>\n          <button\n            *ngFor=\"let secondaryAction of actions$ | async\"\n            class=\"secondary-actions\"\n            [ngClass]=\"{ disabled: isActionDisabled(secondaryAction, row) }\"\n            [attr.disabled]=\"isActionDisabled(secondaryAction, row) || null\"\n            (click)=\"handleSecondaryAction(secondaryAction, rowIndex)\"\n          >\n            {{ secondaryAction.label.i18n | translate }}\n          </button>\n          <button\n            *ngIf=\"canAdd && (viewonly$ | async) === false\"\n            class=\"secondary-actions\"\n            (click)=\"removeRow(rowIndex)\"\n          >\n            {{ \"i18n.qd.quick.edit.removeButtonLabel\" | translate }}\n          </button>\n        </ng-template>\n      </td>\n    </div>\n  </div>\n  <div class=\"empty-body\" *ngIf=\"config.emptyStateView && !config.emptyStateView.disabled && templateData.length === 0\">\n    <p>{{ config.emptyStateView.i18n | translate }}</p>\n  </div>\n</div>\n", styles: [".table{display:flex;width:100%;flex-direction:column;margin:1.25rem auto;background-color:#fff;font-size:.875rem}.table ::ng-deep .qd-input-input{margin-bottom:0!important}.table-header .table-row{padding-top:.125rem;padding-bottom:.125rem;background-color:#e5e5e5;font-weight:700}.table-header .table-row .actions-column{flex:0;border-right:none;visibility:hidden}.table-header,.table-body{display:flex;flex-direction:column}.table-row{display:flex;flex-direction:row;padding:.25rem 1rem;border-bottom:.0625rem solid rgb(213,213,213);gap:1rem}.table-row ::ng-deep qd-form-label{display:none!important}.table-row ::ng-deep qd-input{margin-bottom:0!important}.table-cell{display:flex;height:37px;flex:1;align-items:center;text-align:left}.table-cell:has(.qd-input-error),.table-cell:has(.qd-dropdown-error){height:auto;align-items:flex-start}.table-cell.actions{flex:0}.table-row:last-child{border-bottom:none}.table-cell:last-child{border-right:none}.editable-actions{display:flex;justify-content:flex-end;margin-right:.625rem;gap:.625rem}.menu-button{display:flex;padding:0 .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem;vertical-align:middle}.menu-button:hover,.menu-button:focus{color:#000;outline:0!important}.secondary-actions{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.secondary-actions:hover{background-color:#f2f7fa}.secondary-actions.disabled{color:#b4b4b4;cursor:not-allowed}.secondary-actions.disabled:hover{background-color:#fff0}.dropdown{min-width:160px}.empty-body{padding:1.5rem;background:#fff}.empty-body p{margin:0 0 .5rem}\n"] }]
+            args: [{ selector: 'qd-quick-edit', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n  <button\n    qdButton\n    qdButtonGhost\n    icon=\"plus\"\n    (click)=\"createRow()\"\n    [data-test-id]=\"testId + '-button-add-new'\"\n    class=\"create-button-standalone\"\n  >\n    {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n  </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n  <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n    <div class=\"table-row\">\n      <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n        {{ header?.i18n | translate }}\n        <qd-tooltip-icon [tooltip]=\"header?.tooltip\"></qd-tooltip-icon>\n      </div>\n      <div class=\"table-cell actions-column\" *ngIf=\"hasVisibleActions$ | async\">\n        <button class=\"menu-button\">\n          <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n        </button>\n      </div>\n    </div>\n  </div>\n  <div class=\"table-body\">\n    <div\n      class=\"table-row\"\n      *qdCustomFor=\"let row of templateData; let rowIndex = index; toggler: togglerDrawing\"\n      [formGroupName]=\"rowIndex\"\n      [attr.data-test-id]=\"testId + '-row-' + rowIndex\"\n    >\n      <ng-container *ngFor=\"let column of visibleColumns; trackBy: trackByColumnName\">\n        <div class=\"table-cell\">\n          <qd-dropdown\n            [config]=\"{\n              filter: column.filter,\n              options: column.options,\n              placeholder: column.placeholder,\n              placeholderPrefix: column.placeholderPrefix,\n              viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n            }\"\n            [data-test-id]=\"column.name + rowIndex\"\n            *ngIf=\"column.type === 'enum'; else otherTypes\"\n            [dense]=\"true\"\n            [formControl]=\"$any(control.controls[rowIndex])?.controls[column.name]\"\n            qdFocusable\n            class=\"dropdown\"\n          >\n          </qd-dropdown>\n\n          <ng-template #otherTypes>\n            <qd-input\n              [data-test-id]=\"column.name + rowIndex\"\n              [formControlName]=\"column.name\"\n              *ngIf=\"column.type !== 'enum' && $any(control.controls[rowIndex])?.controls[column.name]\"\n              [config]=\"{\n                inputType: column.type === 'integer' ? 'number' : 'text',\n                viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n              }\"\n              qdFocusable\n            ></qd-input>\n          </ng-template>\n        </div>\n      </ng-container>\n      <td\n        *ngIf=\"hasVisibleActions$ | async\"\n        class=\"table-cell actions\"\n        [attr.data-test-id]=\"testId + '-cell-inline-actions'\"\n      >\n        <button\n          type=\"button\"\n          [qdPopoverOnClick]=\"menu\"\n          [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n          [qdPopoverStopPropagation]=\"true\"\n          class=\"menu-button\"\n          data-test=\"secondary-actions-toggler\"\n        >\n          <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n        </button>\n\n        <ng-template #menu>\n          <button\n            *ngFor=\"let secondaryAction of actions$ | async\"\n            class=\"secondary-actions\"\n            [ngClass]=\"{ disabled: isActionDisabled(secondaryAction, row) }\"\n            [attr.disabled]=\"isActionDisabled(secondaryAction, row) || null\"\n            (click)=\"handleSecondaryAction(secondaryAction, rowIndex)\"\n          >\n            {{ secondaryAction.label.i18n | translate }}\n          </button>\n          <button\n            *ngIf=\"canAdd && (viewonly$ | async) === false\"\n            class=\"secondary-actions\"\n            (click)=\"removeRow(rowIndex)\"\n          >\n            {{ \"i18n.qd.quick.edit.removeButtonLabel\" | translate }}\n          </button>\n        </ng-template>\n      </td>\n    </div>\n  </div>\n  <div class=\"empty-body\" *ngIf=\"config.emptyStateView && !config.emptyStateView.disabled && templateData.length === 0\">\n    <p>{{ config.emptyStateView.i18n | translate }}</p>\n  </div>\n</div>\n", styles: [".table{display:flex;width:100%;flex-direction:column;margin:1.25rem auto;background-color:#fff;font-size:.875rem}.table ::ng-deep .qd-input-input{margin-bottom:0!important}.table-header .table-row{padding-top:.125rem;padding-bottom:.125rem;background-color:#e5e5e5;font-weight:700}.table-header .table-row .actions-column{flex:0;border-right:none;visibility:hidden}.table-header,.table-body{display:flex;flex-direction:column}.table-row{display:flex;flex-direction:row;padding:.25rem 1rem;border-bottom:.0625rem solid rgb(213,213,213);gap:1rem}.table-row ::ng-deep qd-form-label{display:none!important}.table-row ::ng-deep qd-input{margin-bottom:0!important}.table-body .table-row:hover{background-color:#f5f5f5}.table-cell{display:flex;height:37px;flex:1;align-items:center;text-align:left}.table-cell:has(.qd-input-error),.table-cell:has(.qd-dropdown-error){height:auto;align-items:flex-start}.table-cell.actions{flex:0}.table-row:last-child{border-bottom:none}.table-cell:last-child{border-right:none}.editable-actions{display:flex;justify-content:flex-end;margin-right:.625rem;gap:.625rem}.menu-button{display:flex;padding:0 .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem;vertical-align:middle}.menu-button:hover,.menu-button:focus{color:#000;outline:0!important}.secondary-actions{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.secondary-actions:hover{background-color:#f2f7fa}.secondary-actions.disabled{color:#b4b4b4;cursor:not-allowed}.secondary-actions.disabled:hover{background-color:#fff0}.dropdown{min-width:160px}.empty-body{padding:1.5rem;background:#fff}.empty-body p{margin:0 0 .5rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input,
                 args: [{ required: true }]