@quadrel-enterprise-ui/framework 20.27.1 → 20.27.3

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

@@ -2085,7 +2085,9 @@ class QdMockPopoverOnClickDirective {
     qdPopoverHeight;
     qdPopoverMinHeight;
     qdPopoverMaxHeight;
-    positionStrategy;
+    qdPopoverPlacement;
+    qdPopoverOffsetX;
+    qdPopoverOffsetY;
     qdPopoverCloseStrategy;
     qdPopoverDisabled;
     qdPopoverStopPropagation = true;
@@ -2131,7 +2133,7 @@ class QdMockPopoverOnClickDirective {
         return this._embeddedView?.rootNodes?.[0];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMockPopoverOnClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QdMockPopoverOnClickDirective, isStandalone: false, selector: "[qdPopoverOnClick]", inputs: { qdPopoverOnClick: "qdPopoverOnClick", qdPopoverWidth: "qdPopoverWidth", qdPopoverMinWidth: "qdPopoverMinWidth", qdPopoverMaxWidth: "qdPopoverMaxWidth", qdPopoverHeight: "qdPopoverHeight", qdPopoverMinHeight: "qdPopoverMinHeight", qdPopoverMaxHeight: "qdPopoverMaxHeight", positionStrategy: "positionStrategy", qdPopoverCloseStrategy: "qdPopoverCloseStrategy", qdPopoverDisabled: "qdPopoverDisabled", qdPopoverStopPropagation: "qdPopoverStopPropagation" }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "click": "show($event)", "document:click": "clickedOutside($event)" } }, exportAs: ["qdPopoverOnClick"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QdMockPopoverOnClickDirective, isStandalone: false, selector: "[qdPopoverOnClick]", inputs: { qdPopoverOnClick: "qdPopoverOnClick", qdPopoverWidth: "qdPopoverWidth", qdPopoverMinWidth: "qdPopoverMinWidth", qdPopoverMaxWidth: "qdPopoverMaxWidth", qdPopoverHeight: "qdPopoverHeight", qdPopoverMinHeight: "qdPopoverMinHeight", qdPopoverMaxHeight: "qdPopoverMaxHeight", qdPopoverPlacement: "qdPopoverPlacement", qdPopoverOffsetX: "qdPopoverOffsetX", qdPopoverOffsetY: "qdPopoverOffsetY", qdPopoverCloseStrategy: "qdPopoverCloseStrategy", qdPopoverDisabled: "qdPopoverDisabled", qdPopoverStopPropagation: "qdPopoverStopPropagation" }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "click": "show($event)", "document:click": "clickedOutside($event)" } }, exportAs: ["qdPopoverOnClick"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMockPopoverOnClickDirective, decorators: [{
             type: Directive,
@@ -2154,7 +2156,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }], qdPopoverMaxHeight: [{
                 type: Input
-            }], positionStrategy: [{
+            }], qdPopoverPlacement: [{
+                type: Input
+            }], qdPopoverOffsetX: [{
+                type: Input
+            }], qdPopoverOffsetY: [{
                 type: Input
             }], qdPopoverCloseStrategy: [{
                 type: Input
@@ -8076,6 +8082,18 @@ const DEFAULT_POSITION = {
     overlayX: 'end',
     overlayY: 'top'
 };
+const PLACEMENT_POSITIONS = {
+    'bottom-start': { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+    'bottom-end': { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },
+    'top-start': { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+    'top-end': { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }
+};
+const VERTICAL_OPPOSITE = {
+    'bottom-start': 'top-start',
+    'bottom-end': 'top-end',
+    'top-start': 'bottom-start',
+    'top-end': 'bottom-end'
+};
 /**
  * **QdPopoverOnClickDirective**
  *
@@ -8103,19 +8121,108 @@ class QdPopoverOnClickDirective {
     popoverService = inject(QdPopoverService);
     sizingService = inject(QdPopoverSizingService);
     popoverParentService = inject(QdPopoverParentService, { optional: true });
+    _topFirst = inject(QD_POPOVER_TOP_FIRST, { optional: true }) ?? false;
+    /**
+     * The template shown inside the popover.
+     *
+     * Pass the `ng-template` that holds the menu, option list or panel.
+     */
     qdPopoverOnClick;
-    positionStrategy;
+    /**
+     * Which corner of the host the popover opens from.
+     *
+     * One of `bottom-start`, `bottom-end`, `top-start` or `top-end`. When unset,
+     * the popover uses the default end-aligned position below the host.
+     */
+    qdPopoverPlacement;
+    /**
+     * Fine-tunes the horizontal position, in pixels.
+     *
+     * A negative value moves the popover left, a positive value moves it right.
+     */
+    qdPopoverOffsetX = 0;
+    /**
+     * Fine-tunes the vertical gap to the host, in pixels.
+     *
+     * A negative value moves the popover up, a positive value moves it down. The
+     * value is mirrored when the popover flips, so the gap looks the same whether
+     * it opens downward or upward.
+     */
+    qdPopoverOffsetY = 0;
+    /**
+     * Decides when a click closes the popover.
+     *
+     * `onEveryClick` (default) closes it on the next click anywhere, including
+     * inside the popover. `onOutsideClick` keeps it open while you click inside
+     * and only closes on a click outside.
+     */
     qdPopoverCloseStrategy = 'onEveryClick';
+    /**
+     * Turns the popover off.
+     *
+     * While `true`, clicks and keys on the host no longer open it.
+     */
     qdPopoverDisabled = false;
+    /**
+     * Stops the opening click from bubbling to parent elements.
+     *
+     * Keep it `true` so an outer click handler does not fire as well. Set it
+     * `false` when a parent must react to the same click.
+     */
     qdPopoverStopPropagation = true;
+    /**
+     * Background colour of the popover panel.
+     *
+     * When unset, the panel uses its default colour.
+     */
     qdPopoverBackgroundColor;
+    /**
+     * Tallest the popover may get, in pixels.
+     *
+     * Once the content is taller, it scrolls inside the popover. `none` removes
+     * the limit.
+     */
     qdPopoverMaxHeight = 'none';
+    /**
+     * Narrowest the popover may get, in pixels.
+     *
+     * `none` removes the lower limit.
+     */
     qdPopoverMinWidth = 'none';
+    /**
+     * Widest the popover may get, in pixels.
+     *
+     * `none` removes the upper limit. The popover is never wider than the screen,
+     * even if a larger value is set.
+     */
     qdPopoverMaxWidth = 'none';
+    /**
+     * Matches the popover size to the host or its content.
+     *
+     * Set `width` and/or `height` to `true`. An empty object keeps the natural
+     * content size. The min and max limits still apply.
+     */
     qdPopoverAutoSize = {};
+    /**
+     * Turns on keyboard control.
+     *
+     * While `true`, Enter and Space open the popover and Escape and Tab close it.
+     */
     qdPopoverEnableKeyControl = false;
+    /**
+     * Lets the popover flip to the side that has room.
+     *
+     * While `true`, a popover that would open past the screen edge opens to the
+     * opposite side instead. It is opt-in, so popovers that already fit stay put.
+     */
     qdPopoverFlipIntoViewport = false;
+    /**
+     * Emits after the popover has opened.
+     */
     opened = new EventEmitter();
+    /**
+     * Emits after the popover has closed.
+     */
     closed = new EventEmitter();
     handleClick(event) {
         if (this.qdPopoverStopPropagation)
@@ -8205,10 +8312,8 @@ class QdPopoverOnClickDirective {
         return this._popoverRef?.instance ?? null;
     }
     initPositionStrategy() {
-        const positions = this.positionStrategy
-            ? Array.isArray(this.positionStrategy)
-                ? this.positionStrategy
-                : [this.positionStrategy]
+        const positions = this.qdPopoverPlacement
+            ? this.buildPlacementPositions(this.qdPopoverPlacement)
             : [DEFAULT_POSITION];
         this._resolvedPositions = this.qdPopoverFlipIntoViewport ? this.withHorizontalFallbacks(positions) : positions;
         this._positionStrategyInstance = this.overlayPositionBuilder
@@ -8216,6 +8321,20 @@ class QdPopoverOnClickDirective {
             .withPush(true)
             .withPositions(this._resolvedPositions);
     }
+    buildPlacementPositions(placement) {
+        const positions = [
+            this.applyOffsets(PLACEMENT_POSITIONS[placement], this.qdPopoverOffsetY),
+            { ...this.applyOffsets(PLACEMENT_POSITIONS[VERTICAL_OPPOSITE[placement]], -this.qdPopoverOffsetY), weight: 0.8 }
+        ];
+        return this._topFirst ? positions.reverse() : positions;
+    }
+    applyOffsets(position, offsetY) {
+        return {
+            ...position,
+            ...(this.qdPopoverOffsetX !== 0 && { offsetX: this.qdPopoverOffsetX }),
+            ...(offsetY !== 0 && { offsetY })
+        };
+    }
     withHorizontalFallbacks(positions) {
         const flip = (x) => x === 'start' ? 'end' : x === 'end' ? 'start' : 'center';
         const mirrored = positions.map(position => ({
@@ -8309,7 +8428,7 @@ class QdPopoverOnClickDirective {
         this.unsubscribeAll();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPopoverOnClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QdPopoverOnClickDirective, isStandalone: false, selector: "[qdPopoverOnClick]", inputs: { qdPopoverOnClick: "qdPopoverOnClick", positionStrategy: "positionStrategy", qdPopoverCloseStrategy: "qdPopoverCloseStrategy", qdPopoverDisabled: "qdPopoverDisabled", qdPopoverStopPropagation: "qdPopoverStopPropagation", qdPopoverBackgroundColor: "qdPopoverBackgroundColor", qdPopoverMaxHeight: "qdPopoverMaxHeight", qdPopoverMinWidth: "qdPopoverMinWidth", qdPopoverMaxWidth: "qdPopoverMaxWidth", qdPopoverAutoSize: "qdPopoverAutoSize", qdPopoverEnableKeyControl: "qdPopoverEnableKeyControl", qdPopoverFlipIntoViewport: "qdPopoverFlipIntoViewport" }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "click": "handleClick($event)", "document:click": "handleDocumentClick($event)", "keydown.escape": "handleCloseKeys()", "keydown.tab": "handleCloseKeys()", "keydown.enter": "handleOpenKey($event)", "keydown.space": "handleOpenKey($event)" } }, providers: [QdPopoverSizingService], exportAs: ["qdPopoverOnClick"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QdPopoverOnClickDirective, isStandalone: false, selector: "[qdPopoverOnClick]", inputs: { qdPopoverOnClick: "qdPopoverOnClick", qdPopoverPlacement: "qdPopoverPlacement", qdPopoverOffsetX: "qdPopoverOffsetX", qdPopoverOffsetY: "qdPopoverOffsetY", qdPopoverCloseStrategy: "qdPopoverCloseStrategy", qdPopoverDisabled: "qdPopoverDisabled", qdPopoverStopPropagation: "qdPopoverStopPropagation", qdPopoverBackgroundColor: "qdPopoverBackgroundColor", qdPopoverMaxHeight: "qdPopoverMaxHeight", qdPopoverMinWidth: "qdPopoverMinWidth", qdPopoverMaxWidth: "qdPopoverMaxWidth", qdPopoverAutoSize: "qdPopoverAutoSize", qdPopoverEnableKeyControl: "qdPopoverEnableKeyControl", qdPopoverFlipIntoViewport: "qdPopoverFlipIntoViewport" }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "click": "handleClick($event)", "document:click": "handleDocumentClick($event)", "keydown.escape": "handleCloseKeys()", "keydown.tab": "handleCloseKeys()", "keydown.enter": "handleOpenKey($event)", "keydown.space": "handleOpenKey($event)" } }, providers: [QdPopoverSizingService], exportAs: ["qdPopoverOnClick"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPopoverOnClickDirective, decorators: [{
             type: Directive,
@@ -8321,7 +8440,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { qdPopoverOnClick: [{
                 type: Input
-            }], positionStrategy: [{
+            }], qdPopoverPlacement: [{
+                type: Input
+            }], qdPopoverOffsetX: [{
+                type: Input
+            }], qdPopoverOffsetY: [{
                 type: Input
             }], qdPopoverCloseStrategy: [{
                 type: Input
@@ -10794,7 +10917,6 @@ class QdDropdownComponent {
     options;
     filterText;
     control;
-    positionStrategy;
     _value = null;
     _selectedOption = null;
     _subs = new Subscription();
@@ -10838,10 +10960,8 @@ class QdDropdownComponent {
             : this.translateService.instant('i18n.qd.dropdown.defaultValue');
     }
     constructor() {
-        const isPopoverTopFirst = inject(QD_POPOVER_TOP_FIRST, { optional: true });
         if (!this.id)
             this.id = v4();
-        this.getPositionStrategy(isPopoverTopFirst);
         this.optionsService.optionsResolved$
             .pipe(takeUntilDestroyed())
             .subscribe(resolvedEvent => this.optionsResolved.emit(resolvedEvent));
@@ -10920,24 +11040,6 @@ class QdDropdownComponent {
             this._onTouch();
         }
     }
-    getPositionStrategy(isPopoverTopFirst) {
-        const arr = [
-            {
-                originX: 'start',
-                originY: 'bottom',
-                overlayX: 'start',
-                overlayY: 'top'
-            },
-            {
-                originX: 'start',
-                originY: 'top',
-                overlayX: 'start',
-                overlayY: 'bottom',
-                weight: 0.8
-            }
-        ];
-        this.positionStrategy = isPopoverTopFirst ? arr.slice().reverse() : arr;
-    }
     loadOptionsForCurrentConfig() {
         this.optionsService.initialize(this.config);
         this.optionsService.validateOptionsSetup('QdDropdown');
@@ -11006,7 +11108,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    [qdPopoverFlipIntoViewport]=\"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", "qdPopoverFlipIntoViewport"], 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    [qdPopoverFlipIntoViewport]=\"true\"\n    (opened)=\"onOpenDropdown()\"\n    (closed)=\"onDropdownClosed()\"\n    (click)=\"enterClick.emit()\"\n    qdPopoverPlacement=\"bottom-start\"\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", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], 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,
@@ -11024,7 +11126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                             provide: QD_FOCUSABLE_TOKEN,
                             useExisting: QdDropdownComponent
                         }
-                    ], encapsulation: ViewEncapsulation.None, host: { class: 'qd-dropdown' }, 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<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    [qdPopoverFlipIntoViewport]=\"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"] }]
+                    ], encapsulation: ViewEncapsulation.None, host: { class: 'qd-dropdown' }, 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<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    [qdPopoverFlipIntoViewport]=\"true\"\n    (opened)=\"onOpenDropdown()\"\n    (closed)=\"onDropdownClosed()\"\n    (click)=\"enterClick.emit()\"\n    qdPopoverPlacement=\"bottom-start\"\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"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], id: [{
@@ -11162,7 +11264,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", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], 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", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], 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,
@@ -11182,354 +11284,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 
 class QdInputOptionsComponent {
     resolverRegistry = inject(QdFormOptionsResolverRegistry);
-    filteredOptions$;
-    optionsRequestState$;
-    template = new EventEmitter();
-    formInputComponents = new EventEmitter();
+    keyboardService = inject(QdFormKeyboardService);
+    optionsService = inject(QdFormOptionsService);
     optionSelected = new EventEmitter();
-    _template;
-    _formInputComponents;
+    optionComponents;
+    filteredOptions$ = this.optionsService.filteredOptions$;
+    optionsRequestState$ = this.optionsService.delayedRequestState$;
+    QdFormOptionsRequestState = QdFormOptionsRequestState;
+    _optionsResolver = null;
     get requestLoadingHintI18n() {
         return this._optionsResolver?.requestLoadingHint?.i18n || 'i18n.qd.input.options.loading';
     }
     get requestErrorHintI18n() {
         return this._optionsResolver?.requestErrorHint?.i18n || 'i18n.qd.input.options.error';
     }
-    QdFormOptionsRequestState = QdFormOptionsRequestState;
-    _optionsResolver;
+    onKeyDown(event) {
+        switch (event.key) {
+            case 'Enter': {
+                const active = this.keyboardService.getActiveOption();
+                if (!active?.option || active.option.disabled || !active.option.value)
+                    return;
+                this.optionSelected.emit(active.option);
+                break;
+            }
+            case 'ArrowUp':
+            case 'ArrowDown':
+                this.keyboardService.handleKeydown(event);
+        }
+    }
     ngOnInit() {
         this._optionsResolver = this.resolverRegistry.findResolver();
     }
     ngAfterViewInit() {
-        this.template.emit(this._template);
-        this.formInputComponents.emit(this._formInputComponents);
+        this.keyboardService.init(this.optionComponents);
     }
     selectOption(option) {
         this.optionSelected.emit(option);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdInputOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdInputOptionsComponent, isStandalone: false, selector: "qd-input-options", inputs: { filteredOptions$: "filteredOptions$", optionsRequestState$: "optionsRequestState$" }, outputs: { template: "template", formInputComponents: "formInputComponents", optionSelected: "optionSelected" }, viewQueries: [{ propertyName: "_template", first: true, predicate: ["options"], descendants: true }, { propertyName: "_formInputComponents", predicate: QdFormInputComponent, descendants: true }], ngImport: i0, template: "<ng-template #options>\n  <ng-container [ngSwitch]=\"optionsRequestState$ | async\">\n    <div *ngSwitchCase=\"QdFormOptionsRequestState.PENDING\" class=\"options-hint\">\n      {{ requestLoadingHintI18n | translate }}\n    </div>\n    <div *ngSwitchCase=\"QdFormOptionsRequestState.ERROR\" class=\"options-hint error\">\n      {{ requestErrorHintI18n | translate }}\n    </div>\n    <ng-container *ngSwitchDefault>\n      <div\n        class=\"qd-input__option\"\n        *ngFor=\"let option of filteredOptions$ | async\"\n        [ngClass]=\"option.disabled ? 'qd-input__option--disabled' : ''\"\n      >\n        <qd-form-input *ngIf=\"option\" (click)=\"selectOption(option)\" [option]=\"option\" class=\"qd-input__form-input\">\n          <input\n            class=\"qd-input__option-input\"\n            name=\"dropdown\"\n            type=\"radio\"\n            [disabled]=\"option.disabled\"\n            [value]=\"option.value\"\n          />\n\n          <label class=\"qd-input__option-label\">\n            {{ option.i18n | translate }}\n          </label>\n        </qd-form-input>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n", styles: [".qd-input__option{background:#fff}.qd-input__option .qd-input__form-input{display:flex;min-height:2.25rem;align-items:center;padding-top:.5rem;padding-bottom:.5rem;padding-left:.75rem;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400;line-height:1.4}.qd-input__option .qd-input__form-input:focus,.qd-input__option .qd-input__form-input:hover,.qd-input__option .qd-input__form-input.active{background:#f5f5f5;color:#171717}.qd-input__option .qd-input__option-label{cursor:pointer;overflow-wrap:anywhere}.qd-input__option .qd-input__option-input{display:none}.qd-input__option .qd-input__option-input:checked+label{background:#f5f5f5;color:#171717}.qd-input__option .qd-input__option-input:focus+.qd-input__form-input{background:#f5f5f5;color:#171717}.qd-input__option.qd-input__option--disabled>.qd-input__form-input{color:#b4b4b4;cursor:default;pointer-events:none}.options-hint{color:#757575;font-size:.75rem;font-weight:500;line-height:1.125rem;padding-right:.75rem;padding-left:.75rem;line-height:2.25rem}.options-hint.error{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: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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: QdInputOptionsComponent, isStandalone: false, selector: "qd-input-options", outputs: { optionSelected: "optionSelected" }, host: { listeners: { "document:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "optionComponents", predicate: QdFormInputComponent, descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"optionsRequestState$ | async\">\n  <div *ngSwitchCase=\"QdFormOptionsRequestState.PENDING\" class=\"options-hint\">\n    {{ requestLoadingHintI18n | translate }}\n  </div>\n  <div *ngSwitchCase=\"QdFormOptionsRequestState.ERROR\" class=\"options-hint error\">\n    {{ requestErrorHintI18n | translate }}\n  </div>\n  <ng-container *ngSwitchDefault>\n    <div\n      class=\"qd-input__option\"\n      *ngFor=\"let option of filteredOptions$ | async\"\n      [ngClass]=\"option.disabled ? 'qd-input__option--disabled' : ''\"\n    >\n      <qd-form-input *ngIf=\"option\" (click)=\"selectOption(option)\" [option]=\"option\" class=\"qd-input__form-input\">\n        <input\n          class=\"qd-input__option-input\"\n          name=\"dropdown\"\n          type=\"radio\"\n          [disabled]=\"option.disabled\"\n          [value]=\"option.value\"\n        />\n\n        <label class=\"qd-input__option-label\">\n          {{ option.i18n | translate }}\n        </label>\n      </qd-form-input>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [".qd-input__option{background:#fff}.qd-input__option .qd-input__form-input{display:flex;min-height:2.25rem;align-items:center;padding-top:.5rem;padding-bottom:.5rem;padding-left:.75rem;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400;line-height:1.4}.qd-input__option .qd-input__form-input:focus,.qd-input__option .qd-input__form-input:hover,.qd-input__option .qd-input__form-input.active{background:#f5f5f5;color:#171717}.qd-input__option .qd-input__option-label{cursor:pointer;overflow-wrap:anywhere}.qd-input__option .qd-input__option-input{display:none}.qd-input__option .qd-input__option-input:checked+label{background:#f5f5f5;color:#171717}.qd-input__option .qd-input__option-input:focus+.qd-input__form-input{background:#f5f5f5;color:#171717}.qd-input__option.qd-input__option--disabled>.qd-input__form-input{color:#b4b4b4;cursor:default;pointer-events:none}.options-hint{color:#757575;font-size:.75rem;font-weight:500;line-height:1.125rem;padding-right:.75rem;padding-left:.75rem;line-height:2.25rem}.options-hint.error{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: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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: QdInputOptionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-input-options', standalone: false, template: "<ng-template #options>\n  <ng-container [ngSwitch]=\"optionsRequestState$ | async\">\n    <div *ngSwitchCase=\"QdFormOptionsRequestState.PENDING\" class=\"options-hint\">\n      {{ requestLoadingHintI18n | translate }}\n    </div>\n    <div *ngSwitchCase=\"QdFormOptionsRequestState.ERROR\" class=\"options-hint error\">\n      {{ requestErrorHintI18n | translate }}\n    </div>\n    <ng-container *ngSwitchDefault>\n      <div\n        class=\"qd-input__option\"\n        *ngFor=\"let option of filteredOptions$ | async\"\n        [ngClass]=\"option.disabled ? 'qd-input__option--disabled' : ''\"\n      >\n        <qd-form-input *ngIf=\"option\" (click)=\"selectOption(option)\" [option]=\"option\" class=\"qd-input__form-input\">\n          <input\n            class=\"qd-input__option-input\"\n            name=\"dropdown\"\n            type=\"radio\"\n            [disabled]=\"option.disabled\"\n            [value]=\"option.value\"\n          />\n\n          <label class=\"qd-input__option-label\">\n            {{ option.i18n | translate }}\n          </label>\n        </qd-form-input>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n", styles: [".qd-input__option{background:#fff}.qd-input__option .qd-input__form-input{display:flex;min-height:2.25rem;align-items:center;padding-top:.5rem;padding-bottom:.5rem;padding-left:.75rem;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400;line-height:1.4}.qd-input__option .qd-input__form-input:focus,.qd-input__option .qd-input__form-input:hover,.qd-input__option .qd-input__form-input.active{background:#f5f5f5;color:#171717}.qd-input__option .qd-input__option-label{cursor:pointer;overflow-wrap:anywhere}.qd-input__option .qd-input__option-input{display:none}.qd-input__option .qd-input__option-input:checked+label{background:#f5f5f5;color:#171717}.qd-input__option .qd-input__option-input:focus+.qd-input__form-input{background:#f5f5f5;color:#171717}.qd-input__option.qd-input__option--disabled>.qd-input__form-input{color:#b4b4b4;cursor:default;pointer-events:none}.options-hint{color:#757575;font-size:.75rem;font-weight:500;line-height:1.125rem;padding-right:.75rem;padding-left:.75rem;line-height:2.25rem}.options-hint.error{color:#c70023}\n"] }]
-        }], propDecorators: { filteredOptions$: [{
-                type: Input
-            }], optionsRequestState$: [{
-                type: Input
-            }], template: [{
-                type: Output
-            }], formInputComponents: [{
+            args: [{ selector: 'qd-input-options', standalone: false, template: "<ng-container [ngSwitch]=\"optionsRequestState$ | async\">\n  <div *ngSwitchCase=\"QdFormOptionsRequestState.PENDING\" class=\"options-hint\">\n    {{ requestLoadingHintI18n | translate }}\n  </div>\n  <div *ngSwitchCase=\"QdFormOptionsRequestState.ERROR\" class=\"options-hint error\">\n    {{ requestErrorHintI18n | translate }}\n  </div>\n  <ng-container *ngSwitchDefault>\n    <div\n      class=\"qd-input__option\"\n      *ngFor=\"let option of filteredOptions$ | async\"\n      [ngClass]=\"option.disabled ? 'qd-input__option--disabled' : ''\"\n    >\n      <qd-form-input *ngIf=\"option\" (click)=\"selectOption(option)\" [option]=\"option\" class=\"qd-input__form-input\">\n        <input\n          class=\"qd-input__option-input\"\n          name=\"dropdown\"\n          type=\"radio\"\n          [disabled]=\"option.disabled\"\n          [value]=\"option.value\"\n        />\n\n        <label class=\"qd-input__option-label\">\n          {{ option.i18n | translate }}\n        </label>\n      </qd-form-input>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [".qd-input__option{background:#fff}.qd-input__option .qd-input__form-input{display:flex;min-height:2.25rem;align-items:center;padding-top:.5rem;padding-bottom:.5rem;padding-left:.75rem;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400;line-height:1.4}.qd-input__option .qd-input__form-input:focus,.qd-input__option .qd-input__form-input:hover,.qd-input__option .qd-input__form-input.active{background:#f5f5f5;color:#171717}.qd-input__option .qd-input__option-label{cursor:pointer;overflow-wrap:anywhere}.qd-input__option .qd-input__option-input{display:none}.qd-input__option .qd-input__option-input:checked+label{background:#f5f5f5;color:#171717}.qd-input__option .qd-input__option-input:focus+.qd-input__form-input{background:#f5f5f5;color:#171717}.qd-input__option.qd-input__option--disabled>.qd-input__form-input{color:#b4b4b4;cursor:default;pointer-events:none}.options-hint{color:#757575;font-size:.75rem;font-weight:500;line-height:1.125rem;padding-right:.75rem;padding-left:.75rem;line-height:2.25rem}.options-hint.error{color:#c70023}\n"] }]
+        }], propDecorators: { optionSelected: [{
                 type: Output
-            }], optionSelected: [{
-                type: Output
-            }], _template: [{
-                type: ViewChild,
-                args: ['options']
-            }], _formInputComponents: [{
+            }], optionComponents: [{
                 type: ViewChildren,
                 args: [QdFormInputComponent]
-            }] } });
-
-// TODO: Split into smaller units – directive handles too many responsibilities (popover, options, keyboard, state, ...)
-/**
- * Manages the options popover of a form input, including resolver-based options.
- * The resolver trigger rules are defined on {@link QdFormOptionsResolver}.
- *
- * Invariant: the `value` setter resolves options only on actual value changes. Selecting
- * an option assigns the option's i18n key as the new value right away, because the host
- * component writes exactly that key back into the `value` binding for display purposes —
- * the write-back therefore arrives as a no-op instead of resolving with the i18n key.
- */
-class QdInputOptionsDirective extends QdPopoverOnClickDirective {
-    translateService = inject(TranslateService);
-    viewContainerRef = inject(ViewContainerRef);
-    changeDetectorRef = inject(ChangeDetectorRef);
-    resolverRegistry = inject(QdFormOptionsResolverRegistry);
-    controlContainer = inject(ControlContainer, { optional: true });
-    get value() {
-        return this._value;
-    }
-    /**
-     * The value of the form input
-     */
-    set value(value) {
-        if (value === this._value)
-            return;
-        this._value = value;
-        if (this.hasOptions() && !this.config?.readonly && !this.config?.viewonly)
-            this.updateOptions();
-    }
-    /**
-     * The configuration of the form input
-     *
-     * @example
-     * {
-     *   label: { i18n: 'label' },
-     *   placeholder: { i18n: 'placeholder' },
-     *   hint: { i18n: 'hint' }
-     * };
-     */
-    config;
-    /**
-     * Emits event when the value has changed. Note: Emits on keyup (no longer on click, as before)!
-     */
-    enterClick = new EventEmitter();
-    /**
-     * Emits event when an option in the fly out has been selected.
-     */
-    optionSelected = new EventEmitter();
-    /**
-     * Emits the resolved options and the depended-on values they were resolved with,
-     * after every resolver run.
-     *
-     * The resolver fetches the options; this output lets the component react to them —
-     * typically to drop a selection the new options no longer contain (e.g. clear the
-     * chosen city once the country changed).
-     *
-     * @example
-     * onCityOptionsResolved(event: QdFormOptionsResolvedEvent): void {
-     *   const city = this.form.get('city');
-     *   if (city?.value && !event.options.some(o => o.value === city.value)) city.reset();
-     * }
-     */
-    optionsResolved = new EventEmitter();
-    onSpace() {
-        if (this.hasOptions())
-            this.open();
-    }
-    onEscape() {
-        if (this.hasOptions())
-            this.closePopover();
-    }
-    onTab() {
-        if (this.hasOptions())
-            this.closePopover();
-    }
-    _optionsResolver;
-    _optionsRequestStateSubject = new BehaviorSubject(QdFormOptionsRequestState.IDLE);
-    _optionsLoadingHintDelay = 400;
-    _optionsLoadingHintMinTime = 300;
-    _hostElement;
-    _keyManager;
-    _value;
-    _filteredOptionsSubject = new BehaviorSubject([]);
-    _destroyed$ = new Subject();
-    _dependsOnSubscription = null;
-    _resolveRequests$ = new Subject();
-    filteredOptions$ = this._filteredOptionsSubject.asObservable();
-    optionsRequestState$ = this._optionsRequestStateSubject.pipe(startWith(this._optionsRequestStateSubject.value), pairwise(), debounce(([previousRequestState, currentRequestState]) => currentRequestState === QdFormOptionsRequestState.PENDING &&
-        previousRequestState !== QdFormOptionsRequestState.ERROR
-        ? timer(this._optionsLoadingHintDelay)
-        : of(true)), 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    map(([_, currentRequestState]) => currentRequestState), concatMap(requestState => requestState === QdFormOptionsRequestState.PENDING
-        ? timer(this._optionsLoadingHintMinTime).pipe(switchMap(() => EMPTY), startWith(requestState))
-        : of(requestState)));
-    formInputComponents;
-    constructor() {
-        super();
-        this._hostElement = this.hostRef.nativeElement;
-    }
-    ngOnInit() {
-        this.initializeOptionsResolver();
-        this.publishLatestResolvedOptions();
-        if (this.hasOptions() && !this.config?.readonly && !this.config?.viewonly) {
-            this.setPopoverProperties();
-            super.ngOnInit();
-            this.updateOptions();
-            this.updateOptionsWhenDependsOnControlsChange();
-            const options = this.config.options;
-            if (options) {
-                const currentOption = options.find(option => option.value === this.value);
-                if (currentOption)
-                    this.selectOption(currentOption);
-            }
-        }
-        this.logWarningIfBothOptionsAndResolverAreUsed();
-        this.logWarningIfDependsOnWithoutFormGroup();
-    }
-    initializeOptionsResolver() {
-        this.resolverRegistry.initialize(this.config?.optionsResolverName);
-        this._optionsResolver = this.resolverRegistry.findResolver();
-    }
-    ngOnChanges(changes) {
-        if (changes['config'] && !changes['config'].isFirstChange()) {
-            this.updateOptionsWhenDependsOnControlsChange();
-            this.updateOptions();
-        }
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this._destroyed$.next();
-        this._destroyed$.complete();
-    }
-    ngAfterViewInit() {
-        this._hostElement.querySelector('input')?.addEventListener('keydown', this.onKeyDown.bind(this));
-        if (this.hasOptions() && !this.config?.readonly && !this.config?.viewonly)
-            this.createKeyManager();
-    }
-    onKeyDown(event) {
-        if (!this._keyManager) {
-            if (event.key === 'Enter')
-                this.enterClick.emit();
-            return;
-        }
-        if (event.key === 'Enter') {
-            const newOption = this._filteredOptionsSubject.value.length === 0 ? undefined : this._keyManager?.activeItem?.option;
-            if (newOption) {
-                if (newOption.disabled || !newOption.value)
-                    return;
-                this.selectOption(newOption);
-            }
-            this.enterClick.emit();
-            this.closePopover();
-        }
-        else {
-            this.open();
-            this._keyManager.onKeydown(event);
-            this._keyManager.activeItem?.scrollIntoView();
-        }
-    }
-    selectOption(option) {
-        this._value = option.i18n;
-        this.optionSelected.emit(option);
-        this.closePopover();
-    }
-    logWarningIfBothOptionsAndResolverAreUsed() {
-        if (this.config?.options && this.config.options.length > 0 && !!this._optionsResolver) {
-            console.warn('Quadrel Framework | QdInput - If both options and QD_FORM_OPTIONS_RESOLVER are used, ' +
-                'the options will be ignored.');
-        }
-    }
-    logWarningIfDependsOnWithoutFormGroup() {
-        if (this.config?.optionsDependsOn?.length && !this.controlContainer?.control) {
-            console.warn('Quadrel Framework | QdForms - "optionsDependsOn" is set but no parent form group was found. ' +
-                'The depends-on configuration will be ignored.');
-        }
-    }
-    closePopover() {
-        this.close();
-        this.createKeyManager();
-    }
-    createKeyManager() {
-        if (!this.formInputComponents)
-            return;
-        this._keyManager = new ActiveDescendantKeyManager(this.formInputComponents).withWrap().withTypeAhead();
-    }
-    setPopoverProperties() {
-        const optionsComponent = this.viewContainerRef.createComponent(QdInputOptionsComponent).instance;
-        optionsComponent.template
-            .pipe(takeUntil(this._destroyed$))
-            .subscribe(template => (this.qdPopoverOnClick = template));
-        optionsComponent.formInputComponents.pipe(takeUntil(this._destroyed$)).subscribe(formInputComponents => {
-            this.formInputComponents = formInputComponents;
-            this.createKeyManager();
-        });
-        optionsComponent.optionSelected.pipe(takeUntil(this._destroyed$)).subscribe(value => {
-            this.selectOption(value);
-        });
-        optionsComponent.filteredOptions$ = this.filteredOptions$;
-        optionsComponent.optionsRequestState$ = this.optionsRequestState$;
-        this.qdPopoverAutoSize = { width: true };
-        this.qdPopoverCloseStrategy = 'onOutsideClick';
-        this.qdPopoverMaxHeight = 288;
-        this.qdPopoverStopPropagation = false;
-        this.positionStrategy = [
-            {
-                originX: 'start',
-                originY: 'bottom',
-                overlayX: 'start',
-                overlayY: 'top'
-            },
-            {
-                originX: 'start',
-                originY: 'top',
-                overlayX: 'start',
-                overlayY: 'bottom',
-                weight: 0.8
-            }
-        ];
-    }
-    hasOptions() {
-        return (this.config?.options && this.config.options.length > 0) || !!this._optionsResolver;
-    }
-    updateOptions() {
-        if (this._optionsResolver) {
-            this.updateOptionsWithResolver();
-        }
-        else {
-            this.filterOptions();
-        }
-    }
-    updateOptionsWhenDependsOnControlsChange() {
-        this._dependsOnSubscription?.unsubscribe();
-        this._dependsOnSubscription = null;
-        const dependsOnControls = qdGetDependsOnControls(this.controlContainer?.control, this.config?.optionsDependsOn);
-        if (dependsOnControls.length === 0)
-            return;
-        this._dependsOnSubscription = merge(...dependsOnControls.map(control => control.valueChanges.pipe(startWith(control.value), distinctUntilChanged(isEqual$1), skip(1))))
-            .pipe(takeUntil(this._destroyed$))
-            .subscribe(() => {
-            this._filteredOptionsSubject.next([]);
-            this.updateOptions();
-        });
-    }
-    updateOptionsWithResolver() {
-        this._resolveRequests$.next();
-    }
-    publishLatestResolvedOptions() {
-        this._resolveRequests$
-            .pipe(tap(() => this._optionsRequestStateSubject.next(QdFormOptionsRequestState.PENDING)), map(() => ({
-            value: this.value.toString(),
-            dependencies: qdCollectOptionsDependencies(this.controlContainer?.control, this.config?.optionsDependsOn)
-        })), switchMap(({ value, dependencies }) => this._optionsResolver.resolve(value, dependencies).pipe(take(1), map(options => ({ options, dependencies })), catchError(() => {
-            this._optionsRequestStateSubject.next(QdFormOptionsRequestState.ERROR);
-            return EMPTY;
-        }))), takeUntil(this._destroyed$))
-            .subscribe(({ options, dependencies }) => {
-            this._filteredOptionsSubject.next(options);
-            this._optionsRequestStateSubject.next(QdFormOptionsRequestState.SUCCESS);
-            this.optionsResolved.emit({ options, dependencies });
-            const currentOption = options.find(option => option.value === this.value);
-            if (currentOption)
-                this.selectOption(currentOption);
-        });
-    }
-    filterOptions() {
-        const filteredOptions = this.config?.options?.filter(option => this.translateService.instant(option.i18n).toLowerCase().includes(this.value.toString().toLowerCase())) || [];
-        if (filteredOptions.length === 0)
-            this.closePopover();
-        this._filteredOptionsSubject.next(filteredOptions);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdInputOptionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QdInputOptionsDirective, isStandalone: false, selector: "[qdInputOptions]", inputs: { value: "value", config: "config" }, outputs: { enterClick: "enterClick", optionSelected: "optionSelected", optionsResolved: "optionsResolved" }, host: { listeners: { "keydown.Space": "onSpace()", "keydown.escape": "onEscape()", "keydown.tab": "onTab()" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdInputOptionsDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[qdInputOptions]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [], propDecorators: { value: [{
-                type: Input
-            }], config: [{
-                type: Input
-            }], enterClick: [{
-                type: Output
-            }], optionSelected: [{
-                type: Output
-            }], optionsResolved: [{
-                type: Output
-            }], onSpace: [{
-                type: HostListener,
-                args: ['keydown.Space']
-            }], onEscape: [{
-                type: HostListener,
-                args: ['keydown.escape']
-            }], onTab: [{
+            }], onKeyDown: [{
                 type: HostListener,
-                args: ['keydown.tab']
+                args: ['document:keydown', ['$event']]
             }] } });
 
 // @ts-strict-ignore
@@ -11738,7 +11543,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  */
 class QdInputComponent {
     actionEmitterService = inject(QdFormsActionEmitterService);
-    resolverRegistry = inject(QdFormOptionsResolverRegistry);
+    optionsService = inject(QdFormOptionsService);
     controlContainer = inject(ControlContainer, { optional: true, host: true, skipSelf: true });
     eventBrokerService = inject(QdEventBrokerService, { optional: true });
     numberInputService = inject(QdNumberInputService);
@@ -11817,6 +11622,16 @@ class QdInputComponent {
      * }
      */
     optionsResolved = new EventEmitter();
+    closeOptions() {
+        if (this.isOptionsOpen)
+            this.popover?.close();
+    }
+    openOptionsOnArrow(event) {
+        if (!this.hasOptions || this.isOptionsOpen)
+            return;
+        event.preventDefault();
+        this.popover?.open();
+    }
     readonly;
     readonlyAction = false;
     viewonly;
@@ -11835,6 +11650,8 @@ class QdInputComponent {
         return this.isAmbiguousInput;
     }
     inputElement;
+    popover;
+    isOptionsOpen = false;
     inputType;
     inputMode;
     htmlInputType;
@@ -11847,8 +11664,8 @@ class QdInputComponent {
     _value = { value: '' };
     _displayValue = '';
     control;
-    _optionsResolver;
     _subs = new Subscription();
+    _filteredOptions = [];
     _isUserTyped = false;
     _onChange = () => { };
     _onTouch = () => { };
@@ -11889,7 +11706,8 @@ class QdInputComponent {
         return [`${displayValue}${this._value.unit ? ' ' + this._value.unit : ''}`];
     }
     ngOnInit() {
-        this.initializeOptionsResolver();
+        this.subscribeToOptions();
+        this.optionsService.initialize(this.config);
         this.updateConfig();
         if (this.controlContainer) {
             if (this.formControlName) {
@@ -11913,6 +11731,8 @@ class QdInputComponent {
     }
     ngOnChanges(changes) {
         if (changes['config']) {
+            if (!changes['config'].isFirstChange())
+                this.optionsService.initialize(this.config);
             this.updateConfig();
             this.normalizeInitialControlValueIfNeeded();
         }
@@ -11978,15 +11798,23 @@ class QdInputComponent {
         }
         this._isUserTyped = true;
         this._value = { ...this._value, value };
+        this.loadOptionsForTypedValue(value);
         this.emitValue();
         this._onTouch();
     }
     handleOptionSelected(option) {
         this._value = { ...this._value, value: option.i18n };
+        this.popover?.close();
         this.valueChange.emit(option.value);
         this._onChange(option.value);
         this._onTouch();
     }
+    onOptionsOpened() {
+        this.isOptionsOpen = true;
+    }
+    onOptionsClosed() {
+        this.isOptionsOpen = false;
+    }
     handleUnitChange(unit) {
         this._value = { ...this._value, unit };
         this.emitValue();
@@ -12053,11 +11881,27 @@ class QdInputComponent {
         this.disabled = getDisabled(this.config) || !!this.control?.disabled;
         this.clearable = !this.disabled && getClearable(this.config);
         this.hasAutofocus = getHasAutofocus(this.config);
-        this.hasOptions = (this.config.options && this.config.options.length > 0) || !!this._optionsResolver;
+        this.hasOptions = this.optionsService.hasOptions();
     }
-    initializeOptionsResolver() {
-        this.resolverRegistry.initialize(this.config?.optionsResolverName);
-        this._optionsResolver = this.resolverRegistry.findResolver();
+    subscribeToOptions() {
+        this._subs.add(this.optionsService.filteredOptions$.subscribe(options => (this._filteredOptions = options)));
+        this._subs.add(this.optionsService.optionsResolved$.subscribe(event => {
+            this.optionsResolved.emit(event);
+            const currentOption = event.options.find(option => option.value === this._value.value);
+            if (currentOption)
+                this.handleOptionSelected(currentOption);
+        }));
+    }
+    loadOptionsForTypedValue(value) {
+        if (!this.hasOptions)
+            return;
+        this.optionsService.load(value);
+        if (this.optionsService.hasResolver() || this._filteredOptions.length > 0) {
+            this.popover?.open();
+        }
+        else {
+            this.popover?.close();
+        }
     }
     emitValue() {
         const emittable = this.inputType === 'number' ? this.numberInputService.parseValue(this._value.value) : this._value.value;
@@ -12102,7 +11946,7 @@ class QdInputComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdInputComponent, isStandalone: false, selector: "qd-input", inputs: { formControlName: "formControlName", value: "value", config: "config", isError: "isError", testId: ["data-test-id", "testId"] }, outputs: { valueChange: "valueChange", enterClick: "enterClick", clickClear: "clickClear", clickHint: "clickHint", clickReadonly: "clickReadonly", clickViewonly: "clickViewonly", optionsResolved: "optionsResolved" }, host: { properties: { "class.qd-input-readonly": "this.readonly", "class.qd-input--readonly-action": "this.readonlyAction", "class.qd-input-viewonly": "this.viewonly", "class.qd-input--viewonly-action": "this.viewonlyAction", "class.qd-form-hint-action": "this.hintAction", "class.qd-input-hint-action": "this.hintAction", "class.qd-form-disabled": "this.disabled", "class.qd-input-disabled": "this.disabled", "class.qd-input-focus": "this.isInputFocused", "class.qd-form-error": "this.hasError", "class.qd-input-error": "this.hasError", "class.qd-input-error-from-outside": "this.isErrorFromOutside", "class.qd-input-ambiguous": "this.isAmbiguousState" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdInputComponent, isStandalone: false, selector: "qd-input", inputs: { formControlName: "formControlName", value: "value", config: "config", isError: "isError", testId: ["data-test-id", "testId"] }, outputs: { valueChange: "valueChange", enterClick: "enterClick", clickClear: "clickClear", clickHint: "clickHint", clickReadonly: "clickReadonly", clickViewonly: "clickViewonly", optionsResolved: "optionsResolved" }, host: { listeners: { "keydown.escape": "closeOptions()", "keydown.tab": "closeOptions()", "keydown.arrowdown": "openOptionsOnArrow($event)", "keydown.arrowup": "openOptionsOnArrow($event)" }, properties: { "class.qd-input-readonly": "this.readonly", "class.qd-input--readonly-action": "this.readonlyAction", "class.qd-input-viewonly": "this.viewonly", "class.qd-input--viewonly-action": "this.viewonlyAction", "class.qd-form-hint-action": "this.hintAction", "class.qd-input-hint-action": "this.hintAction", "class.qd-form-disabled": "this.disabled", "class.qd-input-disabled": "this.disabled", "class.qd-input-focus": "this.isInputFocused", "class.qd-form-error": "this.hasError", "class.qd-input-error": "this.hasError", "class.qd-input-error-from-outside": "this.isErrorFromOutside", "class.qd-input-ambiguous": "this.isAmbiguousState" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: QdInputComponent,
@@ -12110,14 +11954,14 @@ class QdInputComponent {
             },
             QdFormsActionEmitterService,
             QdFormOptionsResolverRegistry,
+            QdFormOptionsService,
+            QdFormKeyboardService,
             QdNumberInputService,
-            // TODO: Remove when removing derived directive
-            QdPopoverSizingService,
             {
                 provide: QD_FOCUSABLE_TOKEN,
                 useExisting: QdInputComponent
             }
-        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<ng-container *ngIf=\"!readonly && !viewonly && !hasOptions\">\n  <div class=\"qd-input-input\" (keydown.enter)=\"emitEnterClick()\">\n    <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n  </div>\n\n  <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n  <qd-form-hint\n    *ngIf=\"hint || hasError\"\n    [hint]=\"hint\"\n    [control]=\"control\"\n    [hasError]=\"hasError\"\n    [hintAction]=\"hintAction\"\n    [data-test-id]=\"testId\"\n  ></qd-form-hint>\n  <qd-form-hint *ngIf=\"isAmbiguousInput\" [hint]=\"ambiguityHintKey\" [data-test-id]=\"testId\"></qd-form-hint>\n</ng-container>\n\n<div *ngIf=\"!readonly && !viewonly && hasOptions\">\n  <div\n    class=\"qd-input-input\"\n    qdInputOptions\n    [qdPopoverMinWidth]=\"200\"\n    [config]=\"config\"\n    [value]=\"_value.value\"\n    (optionSelected)=\"handleOptionSelected($event)\"\n    (optionsResolved)=\"optionsResolved.emit($event)\"\n    (enterClick)=\"emitEnterClick()\"\n  >\n    <!-- handle (enterClick) by options directive here because event has to be fired after selection -->\n    <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n  </div>\n\n  <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n  <qd-form-hint\n    *ngIf=\"hint || hasError\"\n    [hint]=\"hint\"\n    [control]=\"control\"\n    [hasError]=\"hasError\"\n    [hintAction]=\"hintAction\"\n    [data-test-id]=\"testId\"\n  ></qd-form-hint>\n  <qd-form-hint *ngIf=\"isAmbiguousInput\" [hint]=\"ambiguityHintKey\" [data-test-id]=\"testId\"></qd-form-hint>\n</div>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"valueAsList\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"valueAsList\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n\n<ng-template #inputBox>\n  <input\n    #input\n    [placeholder]=\"placeholder | translate\"\n    [value]=\"hasOptions ? (_value.value.toString() | translate) : _displayValue\"\n    (input)=\"handleInput($event)\"\n    (focus)=\"handleInputFocus()\"\n    (blur)=\"handleInputBlur()\"\n    [disabled]=\"disabled || readonly\"\n    [type]=\"htmlInputType\"\n    [attr.inputmode]=\"inputMode\"\n    [qdAutofocus]=\"hasAutofocus\"\n    [attr.data-test-id]=\"testId + '-input'\"\n    [step]=\"config?.step\"\n    required\n    autocomplete=\"off\"\n  />\n  <div class=\"qd-input-suffix\">\n    <qd-icon *ngIf=\"hasError && !hasOnlyUnitsError\" class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n    <qd-icon *ngIf=\"isAmbiguousInput\" class=\"qd-input-ambiguous-icon\" icon=\"circleInfoSolid\"></qd-icon>\n    <qd-icon *ngIf=\"clearable\" class=\"qd-input-clearable-icon\" icon=\"timesLarge\" (click)=\"clearInput()\"></qd-icon>\n    <ng-content select=\"[qdIconButton]\"></ng-content>\n  </div>\n  <qd-input-units\n    *ngIf=\"hasUnits\"\n    [unit]=\"_value.unit\"\n    [config]=\"config\"\n    (unitChange)=\"handleUnitChange($event)\"\n    (opened)=\"handleUnitsOpened()\"\n    (closed)=\"handleUnitsClosed()\"\n  ></qd-input-units>\n  <div class=\"qd-input-suffix\" *ngIf=\"hasError && hasOnlyUnitsError\">\n    <qd-icon class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:block;width:100%;flex-direction:column;margin-bottom:.75rem}:host .qd-input-input{display:flex;overflow:hidden;height:2.25rem;align-items:center;padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(180,180,180);border-radius:0;margin-bottom:.375rem;background-color:#fff}:host .qd-input-input:hover,:host .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(23,23,23);border-radius:0}:host .qd-input-input input{overflow:hidden;width:100%;flex-grow:1;border:none;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.875rem}:host .qd-input-input input:hover,:host .qd-input-input input:focus,:host .qd-input-input input:active{border:none;outline:none}:host .qd-input-input input::placeholder{color:#b4b4b4}:host .qd-input-input input:focus::placeholder{display:block;color:#b4b4b4}:host .qd-input-input .qd-input-suffix{display:flex;align-items:center;margin-left:.75rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon{padding-right:.5rem;color:#c70023}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon+.qd-input-clearable-icon{margin-left:-.25rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon{margin-right:.5625rem;color:#979797;cursor:pointer;font-size:1.25rem;line-height:2rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:hover,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:focus,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:active{color:#171717}:host .qd-input-input qd-input-units+.qd-input-suffix{margin:0 0 0 -.1875rem}:host .qd-input-input:has(.qd-icon-button){overflow:visible}:host .qd-input-character-counter{padding-left:.125rem;color:#757575;float:right;font-size:.75rem;font-weight:300;line-height:.75rem}:host:after{display:block;height:0;clear:both;content:\".\";visibility:hidden}:host.qd-input-focus .qd-input-input{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153);border-radius:0;outline:none}:host.qd-input-readonly .qd-input-readonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-viewonly .qd-input-viewonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-disabled .qd-input-input{border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled .qd-input-input input{background-color:#f5f5f5;color:#979797}:host.qd-input-disabled .qd-input-input input::placeholder{opacity:0}:host.qd-input-disabled .qd-input-input:hover,:host.qd-input-disabled .qd-input-input:active{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled.qd-input-focus{border-color:#ff9b00}:host.qd-input--readonly-action .qd-input-readonly{color:#069;cursor:pointer}:host.qd-input--readonly-action .qd-input-readonly:hover,:host.qd-input--readonly-action .qd-input-readonly:active,:host.qd-input--readonly-action .qd-input-readonly:focus{text-decoration:underline}:host.qd-input--viewonly-action .qd-input-viewonly{color:#069;cursor:pointer}:host.qd-input--viewonly-action .qd-input-viewonly:hover,:host.qd-input--viewonly-action .qd-input-viewonly:active,:host.qd-input--viewonly-action .qd-input-viewonly:focus{text-decoration:underline}:host.qd-input-ambiguous .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(0,102,153)}:host.qd-input-ambiguous .qd-input-input:hover,:host.qd-input-ambiguous .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153)}:host.qd-input-ambiguous.qd-input-focus .qd-input-input{border-color:#069}:host.qd-input-ambiguous .qd-input-suffix ::ng-deep .qd-input-ambiguous-icon{padding-right:.5rem;color:#069}:host.qd-input-error .qd-input-input,:host.qd-input-error-from-outside .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(199,0,35)}:host.qd-input-error .qd-input-input:hover,:host.qd-input-error .qd-input-input:active,:host.qd-input-error-from-outside .qd-input-input:hover,:host.qd-input-error-from-outside .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(199,0,35)}:host.qd-input-error.qd-input-focus,:host.qd-input-error-from-outside.qd-input-focus{border-color:#c70023}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: QdAutofocusDirective, selector: "[qdAutofocus]", inputs: ["qdAutofocus"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }, { kind: "component", type: QdInputUnitsComponent, selector: "qd-input-units", inputs: ["config", "unit"], outputs: ["unitChange", "opened", "closed"] }, { kind: "directive", type: QdInputOptionsDirective, selector: "[qdInputOptions]", inputs: ["value", "config"], outputs: ["enterClick", "optionSelected", "optionsResolved"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }, { propertyName: "popover", first: true, predicate: QdPopoverOnClickDirective, 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    [qdPopoverOnClick]=\"optionsMenu\"\n    [qdPopoverMinWidth]=\"200\"\n    [qdPopoverAutoSize]=\"{ width: true }\"\n    [qdPopoverMaxHeight]=\"288\"\n    [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n    [qdPopoverStopPropagation]=\"false\"\n    (opened)=\"onOptionsOpened()\"\n    (closed)=\"onOptionsClosed()\"\n    (keydown.enter)=\"emitEnterClick()\"\n  >\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\n<ng-template #optionsMenu>\n  <qd-input-options (optionSelected)=\"handleOptionSelected($event)\"></qd-input-options>\n</ng-template>\n", styles: [":host{position:relative;display:block;width:100%;flex-direction:column;margin-bottom:.75rem}:host .qd-input-input{display:flex;overflow:hidden;height:2.25rem;align-items:center;padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(180,180,180);border-radius:0;margin-bottom:.375rem;background-color:#fff}:host .qd-input-input:hover,:host .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(23,23,23);border-radius:0}:host .qd-input-input input{overflow:hidden;width:100%;flex-grow:1;border:none;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.875rem}:host .qd-input-input input:hover,:host .qd-input-input input:focus,:host .qd-input-input input:active{border:none;outline:none}:host .qd-input-input input::placeholder{color:#b4b4b4}:host .qd-input-input input:focus::placeholder{display:block;color:#b4b4b4}:host .qd-input-input .qd-input-suffix{display:flex;align-items:center;margin-left:.75rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon{padding-right:.5rem;color:#c70023}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon+.qd-input-clearable-icon{margin-left:-.25rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon{margin-right:.5625rem;color:#979797;cursor:pointer;font-size:1.25rem;line-height:2rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:hover,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:focus,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:active{color:#171717}:host .qd-input-input qd-input-units+.qd-input-suffix{margin:0 0 0 -.1875rem}:host .qd-input-input:has(.qd-icon-button){overflow:visible}:host .qd-input-character-counter{padding-left:.125rem;color:#757575;float:right;font-size:.75rem;font-weight:300;line-height:.75rem}:host:after{display:block;height:0;clear:both;content:\".\";visibility:hidden}:host.qd-input-focus .qd-input-input{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153);border-radius:0;outline:none}:host.qd-input-readonly .qd-input-readonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-viewonly .qd-input-viewonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-disabled .qd-input-input{border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled .qd-input-input input{background-color:#f5f5f5;color:#979797}:host.qd-input-disabled .qd-input-input input::placeholder{opacity:0}:host.qd-input-disabled .qd-input-input:hover,:host.qd-input-disabled .qd-input-input:active{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled.qd-input-focus{border-color:#ff9b00}:host.qd-input--readonly-action .qd-input-readonly{color:#069;cursor:pointer}:host.qd-input--readonly-action .qd-input-readonly:hover,:host.qd-input--readonly-action .qd-input-readonly:active,:host.qd-input--readonly-action .qd-input-readonly:focus{text-decoration:underline}:host.qd-input--viewonly-action .qd-input-viewonly{color:#069;cursor:pointer}:host.qd-input--viewonly-action .qd-input-viewonly:hover,:host.qd-input--viewonly-action .qd-input-viewonly:active,:host.qd-input--viewonly-action .qd-input-viewonly:focus{text-decoration:underline}:host.qd-input-ambiguous .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(0,102,153)}:host.qd-input-ambiguous .qd-input-input:hover,:host.qd-input-ambiguous .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153)}:host.qd-input-ambiguous.qd-input-focus .qd-input-input{border-color:#069}:host.qd-input-ambiguous .qd-input-suffix ::ng-deep .qd-input-ambiguous-icon{padding-right:.5rem;color:#069}:host.qd-input-error .qd-input-input,:host.qd-input-error-from-outside .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(199,0,35)}:host.qd-input-error .qd-input-input:hover,:host.qd-input-error .qd-input-input:active,:host.qd-input-error-from-outside .qd-input-input:hover,:host.qd-input-error-from-outside .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(199,0,35)}:host.qd-input-error.qd-input-focus,:host.qd-input-error-from-outside.qd-input-focus{border-color:#c70023}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: QdAutofocusDirective, selector: "[qdAutofocus]", inputs: ["qdAutofocus"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], 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: QdInputUnitsComponent, selector: "qd-input-units", inputs: ["config", "unit"], outputs: ["unitChange", "opened", "closed"] }, { kind: "component", type: QdInputOptionsComponent, selector: "qd-input-options", outputs: ["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,
@@ -12129,14 +11973,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         },
                         QdFormsActionEmitterService,
                         QdFormOptionsResolverRegistry,
+                        QdFormOptionsService,
+                        QdFormKeyboardService,
                         QdNumberInputService,
-                        // TODO: Remove when removing derived directive
-                        QdPopoverSizingService,
                         {
                             provide: QD_FOCUSABLE_TOKEN,
                             useExisting: QdInputComponent
                         }
-                    ], standalone: false, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<ng-container *ngIf=\"!readonly && !viewonly && !hasOptions\">\n  <div class=\"qd-input-input\" (keydown.enter)=\"emitEnterClick()\">\n    <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n  </div>\n\n  <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n  <qd-form-hint\n    *ngIf=\"hint || hasError\"\n    [hint]=\"hint\"\n    [control]=\"control\"\n    [hasError]=\"hasError\"\n    [hintAction]=\"hintAction\"\n    [data-test-id]=\"testId\"\n  ></qd-form-hint>\n  <qd-form-hint *ngIf=\"isAmbiguousInput\" [hint]=\"ambiguityHintKey\" [data-test-id]=\"testId\"></qd-form-hint>\n</ng-container>\n\n<div *ngIf=\"!readonly && !viewonly && hasOptions\">\n  <div\n    class=\"qd-input-input\"\n    qdInputOptions\n    [qdPopoverMinWidth]=\"200\"\n    [config]=\"config\"\n    [value]=\"_value.value\"\n    (optionSelected)=\"handleOptionSelected($event)\"\n    (optionsResolved)=\"optionsResolved.emit($event)\"\n    (enterClick)=\"emitEnterClick()\"\n  >\n    <!-- handle (enterClick) by options directive here because event has to be fired after selection -->\n    <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n  </div>\n\n  <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n  <qd-form-hint\n    *ngIf=\"hint || hasError\"\n    [hint]=\"hint\"\n    [control]=\"control\"\n    [hasError]=\"hasError\"\n    [hintAction]=\"hintAction\"\n    [data-test-id]=\"testId\"\n  ></qd-form-hint>\n  <qd-form-hint *ngIf=\"isAmbiguousInput\" [hint]=\"ambiguityHintKey\" [data-test-id]=\"testId\"></qd-form-hint>\n</div>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"valueAsList\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"valueAsList\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n\n<ng-template #inputBox>\n  <input\n    #input\n    [placeholder]=\"placeholder | translate\"\n    [value]=\"hasOptions ? (_value.value.toString() | translate) : _displayValue\"\n    (input)=\"handleInput($event)\"\n    (focus)=\"handleInputFocus()\"\n    (blur)=\"handleInputBlur()\"\n    [disabled]=\"disabled || readonly\"\n    [type]=\"htmlInputType\"\n    [attr.inputmode]=\"inputMode\"\n    [qdAutofocus]=\"hasAutofocus\"\n    [attr.data-test-id]=\"testId + '-input'\"\n    [step]=\"config?.step\"\n    required\n    autocomplete=\"off\"\n  />\n  <div class=\"qd-input-suffix\">\n    <qd-icon *ngIf=\"hasError && !hasOnlyUnitsError\" class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n    <qd-icon *ngIf=\"isAmbiguousInput\" class=\"qd-input-ambiguous-icon\" icon=\"circleInfoSolid\"></qd-icon>\n    <qd-icon *ngIf=\"clearable\" class=\"qd-input-clearable-icon\" icon=\"timesLarge\" (click)=\"clearInput()\"></qd-icon>\n    <ng-content select=\"[qdIconButton]\"></ng-content>\n  </div>\n  <qd-input-units\n    *ngIf=\"hasUnits\"\n    [unit]=\"_value.unit\"\n    [config]=\"config\"\n    (unitChange)=\"handleUnitChange($event)\"\n    (opened)=\"handleUnitsOpened()\"\n    (closed)=\"handleUnitsClosed()\"\n  ></qd-input-units>\n  <div class=\"qd-input-suffix\" *ngIf=\"hasError && hasOnlyUnitsError\">\n    <qd-icon class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:block;width:100%;flex-direction:column;margin-bottom:.75rem}:host .qd-input-input{display:flex;overflow:hidden;height:2.25rem;align-items:center;padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(180,180,180);border-radius:0;margin-bottom:.375rem;background-color:#fff}:host .qd-input-input:hover,:host .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(23,23,23);border-radius:0}:host .qd-input-input input{overflow:hidden;width:100%;flex-grow:1;border:none;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.875rem}:host .qd-input-input input:hover,:host .qd-input-input input:focus,:host .qd-input-input input:active{border:none;outline:none}:host .qd-input-input input::placeholder{color:#b4b4b4}:host .qd-input-input input:focus::placeholder{display:block;color:#b4b4b4}:host .qd-input-input .qd-input-suffix{display:flex;align-items:center;margin-left:.75rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon{padding-right:.5rem;color:#c70023}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon+.qd-input-clearable-icon{margin-left:-.25rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon{margin-right:.5625rem;color:#979797;cursor:pointer;font-size:1.25rem;line-height:2rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:hover,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:focus,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:active{color:#171717}:host .qd-input-input qd-input-units+.qd-input-suffix{margin:0 0 0 -.1875rem}:host .qd-input-input:has(.qd-icon-button){overflow:visible}:host .qd-input-character-counter{padding-left:.125rem;color:#757575;float:right;font-size:.75rem;font-weight:300;line-height:.75rem}:host:after{display:block;height:0;clear:both;content:\".\";visibility:hidden}:host.qd-input-focus .qd-input-input{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153);border-radius:0;outline:none}:host.qd-input-readonly .qd-input-readonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-viewonly .qd-input-viewonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-disabled .qd-input-input{border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled .qd-input-input input{background-color:#f5f5f5;color:#979797}:host.qd-input-disabled .qd-input-input input::placeholder{opacity:0}:host.qd-input-disabled .qd-input-input:hover,:host.qd-input-disabled .qd-input-input:active{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled.qd-input-focus{border-color:#ff9b00}:host.qd-input--readonly-action .qd-input-readonly{color:#069;cursor:pointer}:host.qd-input--readonly-action .qd-input-readonly:hover,:host.qd-input--readonly-action .qd-input-readonly:active,:host.qd-input--readonly-action .qd-input-readonly:focus{text-decoration:underline}:host.qd-input--viewonly-action .qd-input-viewonly{color:#069;cursor:pointer}:host.qd-input--viewonly-action .qd-input-viewonly:hover,:host.qd-input--viewonly-action .qd-input-viewonly:active,:host.qd-input--viewonly-action .qd-input-viewonly:focus{text-decoration:underline}:host.qd-input-ambiguous .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(0,102,153)}:host.qd-input-ambiguous .qd-input-input:hover,:host.qd-input-ambiguous .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153)}:host.qd-input-ambiguous.qd-input-focus .qd-input-input{border-color:#069}:host.qd-input-ambiguous .qd-input-suffix ::ng-deep .qd-input-ambiguous-icon{padding-right:.5rem;color:#069}:host.qd-input-error .qd-input-input,:host.qd-input-error-from-outside .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(199,0,35)}:host.qd-input-error .qd-input-input:hover,:host.qd-input-error .qd-input-input:active,:host.qd-input-error-from-outside .qd-input-input:hover,:host.qd-input-error-from-outside .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(199,0,35)}:host.qd-input-error.qd-input-focus,:host.qd-input-error-from-outside.qd-input-focus{border-color:#c70023}\n"] }]
+                    ], 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    [qdPopoverOnClick]=\"optionsMenu\"\n    [qdPopoverMinWidth]=\"200\"\n    [qdPopoverAutoSize]=\"{ width: true }\"\n    [qdPopoverMaxHeight]=\"288\"\n    [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n    [qdPopoverStopPropagation]=\"false\"\n    (opened)=\"onOptionsOpened()\"\n    (closed)=\"onOptionsClosed()\"\n    (keydown.enter)=\"emitEnterClick()\"\n  >\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\n<ng-template #optionsMenu>\n  <qd-input-options (optionSelected)=\"handleOptionSelected($event)\"></qd-input-options>\n</ng-template>\n", styles: [":host{position:relative;display:block;width:100%;flex-direction:column;margin-bottom:.75rem}:host .qd-input-input{display:flex;overflow:hidden;height:2.25rem;align-items:center;padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(180,180,180);border-radius:0;margin-bottom:.375rem;background-color:#fff}:host .qd-input-input:hover,:host .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(23,23,23);border-radius:0}:host .qd-input-input input{overflow:hidden;width:100%;flex-grow:1;border:none;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.875rem}:host .qd-input-input input:hover,:host .qd-input-input input:focus,:host .qd-input-input input:active{border:none;outline:none}:host .qd-input-input input::placeholder{color:#b4b4b4}:host .qd-input-input input:focus::placeholder{display:block;color:#b4b4b4}:host .qd-input-input .qd-input-suffix{display:flex;align-items:center;margin-left:.75rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon{padding-right:.5rem;color:#c70023}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon+.qd-input-clearable-icon{margin-left:-.25rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon{margin-right:.5625rem;color:#979797;cursor:pointer;font-size:1.25rem;line-height:2rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:hover,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:focus,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:active{color:#171717}:host .qd-input-input qd-input-units+.qd-input-suffix{margin:0 0 0 -.1875rem}:host .qd-input-input:has(.qd-icon-button){overflow:visible}:host .qd-input-character-counter{padding-left:.125rem;color:#757575;float:right;font-size:.75rem;font-weight:300;line-height:.75rem}:host:after{display:block;height:0;clear:both;content:\".\";visibility:hidden}:host.qd-input-focus .qd-input-input{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153);border-radius:0;outline:none}:host.qd-input-readonly .qd-input-readonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-viewonly .qd-input-viewonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-disabled .qd-input-input{border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled .qd-input-input input{background-color:#f5f5f5;color:#979797}:host.qd-input-disabled .qd-input-input input::placeholder{opacity:0}:host.qd-input-disabled .qd-input-input:hover,:host.qd-input-disabled .qd-input-input:active{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled.qd-input-focus{border-color:#ff9b00}:host.qd-input--readonly-action .qd-input-readonly{color:#069;cursor:pointer}:host.qd-input--readonly-action .qd-input-readonly:hover,:host.qd-input--readonly-action .qd-input-readonly:active,:host.qd-input--readonly-action .qd-input-readonly:focus{text-decoration:underline}:host.qd-input--viewonly-action .qd-input-viewonly{color:#069;cursor:pointer}:host.qd-input--viewonly-action .qd-input-viewonly:hover,:host.qd-input--viewonly-action .qd-input-viewonly:active,:host.qd-input--viewonly-action .qd-input-viewonly:focus{text-decoration:underline}:host.qd-input-ambiguous .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(0,102,153)}:host.qd-input-ambiguous .qd-input-input:hover,:host.qd-input-ambiguous .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153)}:host.qd-input-ambiguous.qd-input-focus .qd-input-input{border-color:#069}:host.qd-input-ambiguous .qd-input-suffix ::ng-deep .qd-input-ambiguous-icon{padding-right:.5rem;color:#069}:host.qd-input-error .qd-input-input,:host.qd-input-error-from-outside .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(199,0,35)}:host.qd-input-error .qd-input-input:hover,:host.qd-input-error .qd-input-input:active,:host.qd-input-error-from-outside .qd-input-input:hover,:host.qd-input-error-from-outside .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(199,0,35)}:host.qd-input-error.qd-input-focus,:host.qd-input-error-from-outside.qd-input-focus{border-color:#c70023}\n"] }]
         }], propDecorators: { formControlName: [{
                 type: Input
             }], value: [{
@@ -12162,6 +12006,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Output
             }], optionsResolved: [{
                 type: Output
+            }], closeOptions: [{
+                type: HostListener,
+                args: ['keydown.escape']
+            }, {
+                type: HostListener,
+                args: ['keydown.tab']
+            }], openOptionsOnArrow: [{
+                type: HostListener,
+                args: ['keydown.arrowdown', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['keydown.arrowup', ['$event']]
             }], readonly: [{
                 type: HostBinding,
                 args: ['class.qd-input-readonly']
@@ -12204,6 +12060,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             }], inputElement: [{
                 type: ViewChild,
                 args: ['input']
+            }], popover: [{
+                type: ViewChild,
+                args: [QdPopoverOnClickDirective]
             }] } });
 
 // @ts-strict-ignore
@@ -12608,7 +12467,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;color:inherit}qd-datepicker:not(.qd-datepicker-calendar-only) qd-input{height:2.25rem;margin-bottom:.375rem!important}qd-datepicker:not(.qd-datepicker-calendar-only) qd-input .qd-form-label,qd-datepicker:not(.qd-datepicker-calendar-only) qd-input .qd-form-hint{display:none}qd-datepicker .qd-form-disabled .datepicker-toggle{color:#979797;cursor:default}qd-datepicker.qd-datepicker-calendar-only{margin-bottom:0}qd-datepicker.qd-datepicker-calendar-only qd-input{margin:0}qd-datepicker.qd-datepicker-calendar-only .qd-form-label,qd-datepicker.qd-datepicker-calendar-only .qd-form-hint,qd-datepicker.qd-datepicker-calendar-only .qd-input-input input{display:none}qd-datepicker.qd-datepicker-calendar-only .qd-input-input{height:initial!important;padding:0!important;border:none!important;margin:0!important}qd-datepicker.qd-datepicker-calendar-only .qd-input-suffix{margin-left:0!important}.timepicker-dropdown{margin:.75rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdCalendarComponent, selector: "qd-calendar", inputs: ["selectedDate", "language", "disabledDates"], outputs: ["selectedChange"] }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }], encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "popover", first: true, predicate: ["qdPopoverOnClick"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<qd-input\n  *ngIf=\"!readonly && !viewonly\"\n  [value]=\"config?.timePicker && displayedDateTime ? displayedDateTime : displayedDate\"\n  (valueChange)=\"config?.timePicker ? handleUpdatedDateTime($event) : handleUpdatedDate($event)\"\n  [config]=\"{ disabled, readonly, viewonly, placeholder: config?.placeholder }\"\n  [isError]=\"hasError\"\n>\n  <button\n    type=\"button\"\n    class=\"datepicker-toggle\"\n    qdIconButton\n    [qdPopoverOnClick]=\"disabled ? null : calendar\"\n    [qdPopoverMaxWidth]=\"332\"\n    qdPopoverCloseStrategy=\"onOutsideClick\"\n    #qdPopoverOnClick=\"qdPopoverOnClick\"\n  >\n    <qd-icon [icon]=\"'calendar'\"></qd-icon>\n  </button>\n</qd-input>\n\n<ng-template #calendar>\n  <qd-calendar\n    [selectedDate]=\"config?.timePicker && displayedDateTime ? displayedDateTime : displayedDate\"\n    [language]=\"language\"\n    [disabledDates]=\"config?.disabledDates\"\n    (selectedChange)=\"handleUpdatedDate($event)\"\n  ></qd-calendar>\n  <qd-dropdown\n    class=\"timepicker-dropdown\"\n    *ngIf=\"timePicker\"\n    [value]=\"displayedTime\"\n    (valueChange)=\"handleUpdatedTime($event)\"\n    [config]=\"timePicker\"\n    [qdPopoverMaxHeight]=\"300\"\n  ></qd-dropdown>\n</ng-template>\n\n<qd-form-hint\n  *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n  [hint]=\"hint\"\n  [control]=\"control\"\n  [hasError]=\"hasError\"\n  [hintAction]=\"hintAction\"\n  [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"[displayedDate]\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"[displayedDate]\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: ["qd-datepicker{position:relative;display:block;width:100%;margin-bottom:.75rem}qd-datepicker .calendar{padding:1rem}qd-datepicker .calendar mat-calendar{display:block}qd-datepicker .datepicker-toggle{background-color:unset;color:inherit}qd-datepicker:not(.qd-datepicker-calendar-only) qd-input{height:2.25rem;margin-bottom:.375rem!important}qd-datepicker:not(.qd-datepicker-calendar-only) qd-input .qd-form-label,qd-datepicker:not(.qd-datepicker-calendar-only) qd-input .qd-form-hint{display:none}qd-datepicker .qd-form-disabled .datepicker-toggle{color:#979797;cursor:default}qd-datepicker.qd-datepicker-calendar-only{margin-bottom:0}qd-datepicker.qd-datepicker-calendar-only qd-input{margin:0}qd-datepicker.qd-datepicker-calendar-only .qd-form-label,qd-datepicker.qd-datepicker-calendar-only .qd-form-hint,qd-datepicker.qd-datepicker-calendar-only .qd-input-input input{display:none}qd-datepicker.qd-datepicker-calendar-only .qd-input-input{height:initial!important;padding:0!important;border:none!important;margin:0!important}qd-datepicker.qd-datepicker-calendar-only .qd-input-suffix{margin-left:0!important}.timepicker-dropdown{margin:.75rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdCalendarComponent, selector: "qd-calendar", inputs: ["selectedDate", "language", "disabledDates"], outputs: ["selectedChange"] }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDatepickerComponent, decorators: [{
             type: Component,
@@ -14539,7 +14398,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      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", "qdPopoverFlipIntoViewport"], 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  qdPopoverPlacement=\"bottom-start\"\n  [qdPopoverOffsetX]=\"-2\"\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", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], 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,
@@ -14551,7 +14410,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      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"] }]
+                    ], 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  qdPopoverPlacement=\"bottom-start\"\n  [qdPopoverOffsetX]=\"-2\"\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: [{
@@ -16523,7 +16382,6 @@ class QdFormModule {
             QdFormViewonlyComponent,
             QdInputComponent,
             QdInputUnitsComponent,
-            QdInputOptionsDirective,
             QdInputOptionsComponent,
             QdMultiInputChipComponent,
             QdMultiInputMenuComponent,
@@ -16622,7 +16480,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         QdFormViewonlyComponent,
                         QdInputComponent,
                         QdInputUnitsComponent,
-                        QdInputOptionsDirective,
                         QdInputOptionsComponent,
                         QdMultiInputChipComponent,
                         QdMultiInputMenuComponent,
@@ -17158,11 +17015,11 @@ 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", "status"] }, { 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;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){z-index:9999!important}: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,
-            args: [{ selector: 'qd-notification', host: { class: 'qd-notification' }, standalone: false, 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"] }]
+            args: [{ selector: 'qd-notification', host: { class: 'qd-notification' }, standalone: false, 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;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){z-index:9999!important}:host:host-context(qd-snackbar) .link{display:block;margin-top:.375rem;margin-left:0}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
             }], notification: [{
@@ -17524,7 +17381,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    [qdPopoverFlipIntoViewport]=\"true\"\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    [qdPopoverFlipIntoViewport]=\"true\"\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;transform:translateY(.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;transform:translateY(.0625rem)}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", "qdPopoverFlipIntoViewport"], 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    [qdPopoverFlipIntoViewport]=\"true\"\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    [qdPopoverFlipIntoViewport]=\"true\"\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;transform:translateY(.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;transform:translateY(.0625rem)}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", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], 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,
@@ -18651,7 +18508,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", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], 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", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], 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,
@@ -21905,10 +21762,6 @@ class QdFilterItemSelectCategoryComponent {
     dependsOn = [];
     showSelectButton$;
     itemsLoading$;
-    positionStrategy = [
-        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: -1 },
-        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', weight: 0.8, offsetY: 1 }
-    ];
     maxFlyoutHeight = 378;
     _destroyRef = inject(DestroyRef);
     frozenSelectedKeys = [];
@@ -22040,11 +21893,11 @@ class QdFilterItemSelectCategoryComponent {
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemSelectCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemSelectCategoryComponent, isStandalone: false, selector: "qd-filter-category-select", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-filter__category-select" }, viewQueries: [{ propertyName: "popoverDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }], ngImport: i0, template: "<div\n  *ngIf=\"showSelectButton$ | async\"\n  [class]=\"buttonClassName\"\n  [qdPopoverOnClick]=\"filterLayer\"\n  [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n  [qdPopoverStopPropagation]=\"true\"\n  [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n  [positionStrategy]=\"positionStrategy\"\n  (opened)=\"onLayerOpened()\"\n  (closed)=\"onLayerClosed()\"\n  [attr.data-test-id]=\"testId + '-select-button'\"\n>\n  <qd-icon\n    *ngIf=\"!open\"\n    [icon]=\"'ctrlDown'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--closed'\"\n    [attr.data-test-id]=\"testId + '-closed'\"\n  ></qd-icon>\n  <qd-icon\n    *ngIf=\"open\"\n    [icon]=\"'ctrlTop'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--open'\"\n    [attr.data-test-id]=\"testId + '-opened'\"\n  ></qd-icon>\n\n  <div class=\"qd-filter__category-button-caption\">\n    <span>\n      {{ i18n | translate }}\n    </span>\n  </div>\n\n  <ng-container *ngIf=\"(isMobile$ | async) && type === 'multiSelect'; else desktopChips\">\n    <qd-chip\n      *ngIf=\"activeItemCount > 0\"\n      [state]=\"'filter'\"\n      [close]=\"true\"\n      (closeClickEmitter)=\"clearAll()\"\n      [data-test-id]=\"testId + '-selected-chip-count'\"\n      >{{ activeItemCount }}</qd-chip\n    >\n  </ng-container>\n  <ng-template #desktopChips>\n    <ng-container *ngTemplateOutlet=\"SelectedChip\"></ng-container>\n  </ng-template>\n</div>\n\n<ng-template #filterLayer>\n  <div [class]=\"layerContentClassName\">\n    <qd-icon\n      *ngIf=\"closeButton\"\n      [class]=\"'qd-filter__category-layer-close'\"\n      (click)=\"closeLayer()\"\n      [icon]=\"'ctrlTop'\"\n      [attr.data-test-id]=\"testId + '-layer-close'\"\n    ></qd-icon>\n\n    <ng-container *ngIf=\"itemsLoading$ | async; else categoryContent\" [ngTemplateOutlet]=\"loadingState\"></ng-container>\n\n    <ng-template #categoryContent>\n      <ng-container [ngSwitch]=\"type\">\n        <ng-container *ngSwitchCase=\"'multiSelect'\">\n          <qd-filter-form-items\n            *ngIf=\"filter\"\n            [inputFilterValue]=\"filterCategoryValue$ | async\"\n            (filterValueChange)=\"changeValue($event)\"\n            [data-test-id]=\"testId\"\n          ></qd-filter-form-items>\n\n          <div class=\"qd-filter__category-layer-items\">\n            <ng-container\n              *ngFor=\"let entry of selectedDropdownEntries; trackBy: trackByItem\"\n              [ngTemplateOutlet]=\"multiSelectItem\"\n              [ngTemplateOutletContext]=\"{ item: entry.item, itemIndex: entry.itemIndex }\"\n            ></ng-container>\n\n            <div\n              *ngIf=\"showSelectedSeparator\"\n              class=\"qd-filter__category-layer-separator\"\n              [attr.data-test-id]=\"testId + '-selected-separator'\"\n            ></div>\n\n            <ng-container\n              *ngFor=\"let entry of unselectedDropdownEntries; trackBy: trackByItem\"\n              [ngTemplateOutlet]=\"multiSelectItem\"\n              [ngTemplateOutletContext]=\"{ item: entry.item, itemIndex: entry.itemIndex }\"\n            ></ng-container>\n\n            <ng-container *ngIf=\"hasNoVisibleItems\" [ngTemplateOutlet]=\"emptyState\"></ng-container>\n          </div>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'singleSelect'\">\n          <qd-filter-form-items\n            *ngIf=\"filter\"\n            [inputFilterValue]=\"filterCategoryValue$ | async\"\n            (filterValueChange)=\"changeValue($event)\"\n            [data-test-id]=\"testId\"\n          ></qd-filter-form-items>\n\n          <div class=\"qd-filter__category-layer-items\">\n            <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n              <qd-filter-item-single-select\n                *ngIf=\"!item.hidden\"\n                [categoryIndex]=\"categoryIndex\"\n                [itemIndex]=\"itemIndex\"\n                (closeEventEmitter)=\"closeLayer()\"\n                [filterId]=\"filterId\"\n                [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n              >\n              </qd-filter-item-single-select>\n            </ng-container>\n\n            <ng-container *ngIf=\"hasNoVisibleItems\" [ngTemplateOutlet]=\"emptyState\"></ng-container>\n          </div>\n        </ng-container>\n      </ng-container>\n    </ng-template>\n  </div>\n</ng-template>\n\n<ng-template #emptyState>\n  <p class=\"qd-filter__category-layer-empty\" [attr.data-test-id]=\"testId + '-no-results'\">\n    {{ \"i18n.qd.filter.noResults\" | translate }}\n  </p>\n</ng-template>\n\n<ng-template #loadingState>\n  <p class=\"qd-filter__category-layer-loading\" [attr.data-test-id]=\"testId + '-items-loading'\">\n    {{ \"i18n.qd.filter.loading\" | translate }}\n  </p>\n</ng-template>\n\n<ng-template #multiSelectItem let-item=\"item\" let-itemIndex=\"itemIndex\">\n  <qd-filter-item-multi-select\n    *ngIf=\"!item.hidden\"\n    [categoryIndex]=\"categoryIndex\"\n    [itemIndex]=\"itemIndex\"\n    [filterId]=\"filterId\"\n    [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n  ></qd-filter-item-multi-select>\n</ng-template>\n\n<ng-template #SelectedChip>\n  <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n    <!-- TODO: Add tooltip-->\n    <qd-chip\n      *ngIf=\"item.active\"\n      [state]=\"'filter'\"\n      [close]=\"true\"\n      (closeClickEmitter)=\"close($event)\"\n      [data]=\"itemIndex\"\n      [data-test-id]=\"testId + '-selected-chip-' + item.item\"\n      >{{ item.i18n | translate }}</qd-chip\n    >\n  </ng-container>\n</ng-template>\n", styles: ["::ng-deep .qd-filter__category-layer{position:relative;display:flex;overflow:hidden;min-width:16.25rem;max-width:56.25rem;height:100%;flex-direction:column;padding:0;border:.0625rem solid rgb(151,151,151);background:#fff;box-shadow:#d5d5d5 .125rem .25rem .4375rem}::ng-deep .qd-filter__category-layer .qd-filter-form-items__filter{flex-shrink:0;margin-bottom:0}::ng-deep .qd-filter__category-layer .qd-checkbox__label{display:flex;height:2.5rem}::ng-deep .qd-filter__category-layer .qd-checkbox__indicator,::ng-deep .qd-filter__category-layer .qd-radio-buttons__indicator{transform:translateY(-.0625rem)}::ng-deep .qd-filter__category-layer-items{flex:1;overflow-y:auto}::ng-deep .qd-filter__category-layer-separator{height:.0625rem;flex-shrink:0;background:#d5d5d5}::ng-deep .qd-filter__category-layer-empty,::ng-deep .qd-filter__category-layer-loading{padding:0 .9375rem;margin:0;color:#757575;font-size:.875rem;line-height:2.5rem}::ng-deep .qd-filter__category-layer-container{position:relative}::ng-deep .qd-filter__category-layer-close{position:absolute;z-index:1;top:.5rem;right:1rem;color:#757575;cursor:pointer}::ng-deep .qd-filter__category-layer-close:before{position:absolute;content:\"\";inset:-.5rem}::ng-deep .qd-filter__category-layer-close:hover,::ng-deep .qd-filter__category-layer-close:focus{color:#171717}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdFilterFormItemsComponent, selector: "qd-filter-form-items", inputs: ["inputFilterValue", "data-test-id"], outputs: ["filterValueChange"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], 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  qdPopoverPlacement=\"bottom-start\"\n  [qdPopoverOffsetY]=\"-1\"\n  (opened)=\"onLayerOpened()\"\n  (closed)=\"onLayerClosed()\"\n  [attr.data-test-id]=\"testId + '-select-button'\"\n>\n  <qd-icon\n    *ngIf=\"!open\"\n    [icon]=\"'ctrlDown'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--closed'\"\n    [attr.data-test-id]=\"testId + '-closed'\"\n  ></qd-icon>\n  <qd-icon\n    *ngIf=\"open\"\n    [icon]=\"'ctrlTop'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--open'\"\n    [attr.data-test-id]=\"testId + '-opened'\"\n  ></qd-icon>\n\n  <div class=\"qd-filter__category-button-caption\">\n    <span>\n      {{ i18n | translate }}\n    </span>\n  </div>\n\n  <ng-container *ngIf=\"(isMobile$ | async) && type === 'multiSelect'; else desktopChips\">\n    <qd-chip\n      *ngIf=\"activeItemCount > 0\"\n      [state]=\"'filter'\"\n      [close]=\"true\"\n      (closeClickEmitter)=\"clearAll()\"\n      [data-test-id]=\"testId + '-selected-chip-count'\"\n      >{{ activeItemCount }}</qd-chip\n    >\n  </ng-container>\n  <ng-template #desktopChips>\n    <ng-container *ngTemplateOutlet=\"SelectedChip\"></ng-container>\n  </ng-template>\n</div>\n\n<ng-template #filterLayer>\n  <div [class]=\"layerContentClassName\">\n    <qd-icon\n      *ngIf=\"closeButton\"\n      [class]=\"'qd-filter__category-layer-close'\"\n      (click)=\"closeLayer()\"\n      [icon]=\"'ctrlTop'\"\n      [attr.data-test-id]=\"testId + '-layer-close'\"\n    ></qd-icon>\n\n    <ng-container *ngIf=\"itemsLoading$ | async; else categoryContent\" [ngTemplateOutlet]=\"loadingState\"></ng-container>\n\n    <ng-template #categoryContent>\n      <ng-container [ngSwitch]=\"type\">\n        <ng-container *ngSwitchCase=\"'multiSelect'\">\n          <qd-filter-form-items\n            *ngIf=\"filter\"\n            [inputFilterValue]=\"filterCategoryValue$ | async\"\n            (filterValueChange)=\"changeValue($event)\"\n            [data-test-id]=\"testId\"\n          ></qd-filter-form-items>\n\n          <div class=\"qd-filter__category-layer-items\">\n            <ng-container\n              *ngFor=\"let entry of selectedDropdownEntries; trackBy: trackByItem\"\n              [ngTemplateOutlet]=\"multiSelectItem\"\n              [ngTemplateOutletContext]=\"{ item: entry.item, itemIndex: entry.itemIndex }\"\n            ></ng-container>\n\n            <div\n              *ngIf=\"showSelectedSeparator\"\n              class=\"qd-filter__category-layer-separator\"\n              [attr.data-test-id]=\"testId + '-selected-separator'\"\n            ></div>\n\n            <ng-container\n              *ngFor=\"let entry of unselectedDropdownEntries; trackBy: trackByItem\"\n              [ngTemplateOutlet]=\"multiSelectItem\"\n              [ngTemplateOutletContext]=\"{ item: entry.item, itemIndex: entry.itemIndex }\"\n            ></ng-container>\n\n            <ng-container *ngIf=\"hasNoVisibleItems\" [ngTemplateOutlet]=\"emptyState\"></ng-container>\n          </div>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'singleSelect'\">\n          <qd-filter-form-items\n            *ngIf=\"filter\"\n            [inputFilterValue]=\"filterCategoryValue$ | async\"\n            (filterValueChange)=\"changeValue($event)\"\n            [data-test-id]=\"testId\"\n          ></qd-filter-form-items>\n\n          <div class=\"qd-filter__category-layer-items\">\n            <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n              <qd-filter-item-single-select\n                *ngIf=\"!item.hidden\"\n                [categoryIndex]=\"categoryIndex\"\n                [itemIndex]=\"itemIndex\"\n                (closeEventEmitter)=\"closeLayer()\"\n                [filterId]=\"filterId\"\n                [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n              >\n              </qd-filter-item-single-select>\n            </ng-container>\n\n            <ng-container *ngIf=\"hasNoVisibleItems\" [ngTemplateOutlet]=\"emptyState\"></ng-container>\n          </div>\n        </ng-container>\n      </ng-container>\n    </ng-template>\n  </div>\n</ng-template>\n\n<ng-template #emptyState>\n  <p class=\"qd-filter__category-layer-empty\" [attr.data-test-id]=\"testId + '-no-results'\">\n    {{ \"i18n.qd.filter.noResults\" | translate }}\n  </p>\n</ng-template>\n\n<ng-template #loadingState>\n  <p class=\"qd-filter__category-layer-loading\" [attr.data-test-id]=\"testId + '-items-loading'\">\n    {{ \"i18n.qd.filter.loading\" | translate }}\n  </p>\n</ng-template>\n\n<ng-template #multiSelectItem let-item=\"item\" let-itemIndex=\"itemIndex\">\n  <qd-filter-item-multi-select\n    *ngIf=\"!item.hidden\"\n    [categoryIndex]=\"categoryIndex\"\n    [itemIndex]=\"itemIndex\"\n    [filterId]=\"filterId\"\n    [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n  ></qd-filter-item-multi-select>\n</ng-template>\n\n<ng-template #SelectedChip>\n  <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n    <!-- TODO: Add tooltip-->\n    <qd-chip\n      *ngIf=\"item.active\"\n      [state]=\"'filter'\"\n      [close]=\"true\"\n      (closeClickEmitter)=\"close($event)\"\n      [data]=\"itemIndex\"\n      [data-test-id]=\"testId + '-selected-chip-' + item.item\"\n      >{{ item.i18n | translate }}</qd-chip\n    >\n  </ng-container>\n</ng-template>\n", styles: ["::ng-deep .qd-filter__category-layer{position:relative;display:flex;overflow:hidden;min-width:16.25rem;max-width:56.25rem;height:100%;flex-direction:column;padding:0;border:.0625rem solid rgb(151,151,151);background:#fff;box-shadow:#d5d5d5 .125rem .25rem .4375rem}::ng-deep .qd-filter__category-layer .qd-filter-form-items__filter{flex-shrink:0;margin-bottom:0}::ng-deep .qd-filter__category-layer .qd-checkbox__label{display:flex;height:2.5rem}::ng-deep .qd-filter__category-layer .qd-checkbox__indicator,::ng-deep .qd-filter__category-layer .qd-radio-buttons__indicator{transform:translateY(-.0625rem)}::ng-deep .qd-filter__category-layer-items{flex:1;overflow-y:auto}::ng-deep .qd-filter__category-layer-separator{height:.0625rem;flex-shrink:0;background:#d5d5d5}::ng-deep .qd-filter__category-layer-empty,::ng-deep .qd-filter__category-layer-loading{padding:0 .9375rem;margin:0;color:#757575;font-size:.875rem;line-height:2.5rem}::ng-deep .qd-filter__category-layer-container{position:relative}::ng-deep .qd-filter__category-layer-close{position:absolute;z-index:1;top:.5rem;right:1rem;color:#757575;cursor:pointer}::ng-deep .qd-filter__category-layer-close:before{position:absolute;content:\"\";inset:-.5rem}::ng-deep .qd-filter__category-layer-close:hover,::ng-deep .qd-filter__category-layer-close:focus{color:#171717}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdFilterFormItemsComponent, selector: "qd-filter-form-items", inputs: ["inputFilterValue", "data-test-id"], outputs: ["filterValueChange"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdFilterItemMultiSelectComponent, selector: "qd-filter-item-multi-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"] }, { kind: "component", type: QdFilterItemSingleSelectComponent, selector: "qd-filter-item-single-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"], outputs: ["closeEventEmitter"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemSelectCategoryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-filter-category-select', host: { class: 'qd-filter__category-select' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  *ngIf=\"showSelectButton$ | async\"\n  [class]=\"buttonClassName\"\n  [qdPopoverOnClick]=\"filterLayer\"\n  [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n  [qdPopoverStopPropagation]=\"true\"\n  [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n  [positionStrategy]=\"positionStrategy\"\n  (opened)=\"onLayerOpened()\"\n  (closed)=\"onLayerClosed()\"\n  [attr.data-test-id]=\"testId + '-select-button'\"\n>\n  <qd-icon\n    *ngIf=\"!open\"\n    [icon]=\"'ctrlDown'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--closed'\"\n    [attr.data-test-id]=\"testId + '-closed'\"\n  ></qd-icon>\n  <qd-icon\n    *ngIf=\"open\"\n    [icon]=\"'ctrlTop'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--open'\"\n    [attr.data-test-id]=\"testId + '-opened'\"\n  ></qd-icon>\n\n  <div class=\"qd-filter__category-button-caption\">\n    <span>\n      {{ i18n | translate }}\n    </span>\n  </div>\n\n  <ng-container *ngIf=\"(isMobile$ | async) && type === 'multiSelect'; else desktopChips\">\n    <qd-chip\n      *ngIf=\"activeItemCount > 0\"\n      [state]=\"'filter'\"\n      [close]=\"true\"\n      (closeClickEmitter)=\"clearAll()\"\n      [data-test-id]=\"testId + '-selected-chip-count'\"\n      >{{ activeItemCount }}</qd-chip\n    >\n  </ng-container>\n  <ng-template #desktopChips>\n    <ng-container *ngTemplateOutlet=\"SelectedChip\"></ng-container>\n  </ng-template>\n</div>\n\n<ng-template #filterLayer>\n  <div [class]=\"layerContentClassName\">\n    <qd-icon\n      *ngIf=\"closeButton\"\n      [class]=\"'qd-filter__category-layer-close'\"\n      (click)=\"closeLayer()\"\n      [icon]=\"'ctrlTop'\"\n      [attr.data-test-id]=\"testId + '-layer-close'\"\n    ></qd-icon>\n\n    <ng-container *ngIf=\"itemsLoading$ | async; else categoryContent\" [ngTemplateOutlet]=\"loadingState\"></ng-container>\n\n    <ng-template #categoryContent>\n      <ng-container [ngSwitch]=\"type\">\n        <ng-container *ngSwitchCase=\"'multiSelect'\">\n          <qd-filter-form-items\n            *ngIf=\"filter\"\n            [inputFilterValue]=\"filterCategoryValue$ | async\"\n            (filterValueChange)=\"changeValue($event)\"\n            [data-test-id]=\"testId\"\n          ></qd-filter-form-items>\n\n          <div class=\"qd-filter__category-layer-items\">\n            <ng-container\n              *ngFor=\"let entry of selectedDropdownEntries; trackBy: trackByItem\"\n              [ngTemplateOutlet]=\"multiSelectItem\"\n              [ngTemplateOutletContext]=\"{ item: entry.item, itemIndex: entry.itemIndex }\"\n            ></ng-container>\n\n            <div\n              *ngIf=\"showSelectedSeparator\"\n              class=\"qd-filter__category-layer-separator\"\n              [attr.data-test-id]=\"testId + '-selected-separator'\"\n            ></div>\n\n            <ng-container\n              *ngFor=\"let entry of unselectedDropdownEntries; trackBy: trackByItem\"\n              [ngTemplateOutlet]=\"multiSelectItem\"\n              [ngTemplateOutletContext]=\"{ item: entry.item, itemIndex: entry.itemIndex }\"\n            ></ng-container>\n\n            <ng-container *ngIf=\"hasNoVisibleItems\" [ngTemplateOutlet]=\"emptyState\"></ng-container>\n          </div>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'singleSelect'\">\n          <qd-filter-form-items\n            *ngIf=\"filter\"\n            [inputFilterValue]=\"filterCategoryValue$ | async\"\n            (filterValueChange)=\"changeValue($event)\"\n            [data-test-id]=\"testId\"\n          ></qd-filter-form-items>\n\n          <div class=\"qd-filter__category-layer-items\">\n            <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n              <qd-filter-item-single-select\n                *ngIf=\"!item.hidden\"\n                [categoryIndex]=\"categoryIndex\"\n                [itemIndex]=\"itemIndex\"\n                (closeEventEmitter)=\"closeLayer()\"\n                [filterId]=\"filterId\"\n                [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n              >\n              </qd-filter-item-single-select>\n            </ng-container>\n\n            <ng-container *ngIf=\"hasNoVisibleItems\" [ngTemplateOutlet]=\"emptyState\"></ng-container>\n          </div>\n        </ng-container>\n      </ng-container>\n    </ng-template>\n  </div>\n</ng-template>\n\n<ng-template #emptyState>\n  <p class=\"qd-filter__category-layer-empty\" [attr.data-test-id]=\"testId + '-no-results'\">\n    {{ \"i18n.qd.filter.noResults\" | translate }}\n  </p>\n</ng-template>\n\n<ng-template #loadingState>\n  <p class=\"qd-filter__category-layer-loading\" [attr.data-test-id]=\"testId + '-items-loading'\">\n    {{ \"i18n.qd.filter.loading\" | translate }}\n  </p>\n</ng-template>\n\n<ng-template #multiSelectItem let-item=\"item\" let-itemIndex=\"itemIndex\">\n  <qd-filter-item-multi-select\n    *ngIf=\"!item.hidden\"\n    [categoryIndex]=\"categoryIndex\"\n    [itemIndex]=\"itemIndex\"\n    [filterId]=\"filterId\"\n    [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n  ></qd-filter-item-multi-select>\n</ng-template>\n\n<ng-template #SelectedChip>\n  <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n    <!-- TODO: Add tooltip-->\n    <qd-chip\n      *ngIf=\"item.active\"\n      [state]=\"'filter'\"\n      [close]=\"true\"\n      (closeClickEmitter)=\"close($event)\"\n      [data]=\"itemIndex\"\n      [data-test-id]=\"testId + '-selected-chip-' + item.item\"\n      >{{ item.i18n | translate }}</qd-chip\n    >\n  </ng-container>\n</ng-template>\n", styles: ["::ng-deep .qd-filter__category-layer{position:relative;display:flex;overflow:hidden;min-width:16.25rem;max-width:56.25rem;height:100%;flex-direction:column;padding:0;border:.0625rem solid rgb(151,151,151);background:#fff;box-shadow:#d5d5d5 .125rem .25rem .4375rem}::ng-deep .qd-filter__category-layer .qd-filter-form-items__filter{flex-shrink:0;margin-bottom:0}::ng-deep .qd-filter__category-layer .qd-checkbox__label{display:flex;height:2.5rem}::ng-deep .qd-filter__category-layer .qd-checkbox__indicator,::ng-deep .qd-filter__category-layer .qd-radio-buttons__indicator{transform:translateY(-.0625rem)}::ng-deep .qd-filter__category-layer-items{flex:1;overflow-y:auto}::ng-deep .qd-filter__category-layer-separator{height:.0625rem;flex-shrink:0;background:#d5d5d5}::ng-deep .qd-filter__category-layer-empty,::ng-deep .qd-filter__category-layer-loading{padding:0 .9375rem;margin:0;color:#757575;font-size:.875rem;line-height:2.5rem}::ng-deep .qd-filter__category-layer-container{position:relative}::ng-deep .qd-filter__category-layer-close{position:absolute;z-index:1;top:.5rem;right:1rem;color:#757575;cursor:pointer}::ng-deep .qd-filter__category-layer-close:before{position:absolute;content:\"\";inset:-.5rem}::ng-deep .qd-filter__category-layer-close:hover,::ng-deep .qd-filter__category-layer-close:focus{color:#171717}\n"] }]
+            args: [{ selector: 'qd-filter-category-select', host: { class: 'qd-filter__category-select' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  *ngIf=\"showSelectButton$ | async\"\n  [class]=\"buttonClassName\"\n  [qdPopoverOnClick]=\"filterLayer\"\n  [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n  [qdPopoverStopPropagation]=\"true\"\n  [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n  qdPopoverPlacement=\"bottom-start\"\n  [qdPopoverOffsetY]=\"-1\"\n  (opened)=\"onLayerOpened()\"\n  (closed)=\"onLayerClosed()\"\n  [attr.data-test-id]=\"testId + '-select-button'\"\n>\n  <qd-icon\n    *ngIf=\"!open\"\n    [icon]=\"'ctrlDown'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--closed'\"\n    [attr.data-test-id]=\"testId + '-closed'\"\n  ></qd-icon>\n  <qd-icon\n    *ngIf=\"open\"\n    [icon]=\"'ctrlTop'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--open'\"\n    [attr.data-test-id]=\"testId + '-opened'\"\n  ></qd-icon>\n\n  <div class=\"qd-filter__category-button-caption\">\n    <span>\n      {{ i18n | translate }}\n    </span>\n  </div>\n\n  <ng-container *ngIf=\"(isMobile$ | async) && type === 'multiSelect'; else desktopChips\">\n    <qd-chip\n      *ngIf=\"activeItemCount > 0\"\n      [state]=\"'filter'\"\n      [close]=\"true\"\n      (closeClickEmitter)=\"clearAll()\"\n      [data-test-id]=\"testId + '-selected-chip-count'\"\n      >{{ activeItemCount }}</qd-chip\n    >\n  </ng-container>\n  <ng-template #desktopChips>\n    <ng-container *ngTemplateOutlet=\"SelectedChip\"></ng-container>\n  </ng-template>\n</div>\n\n<ng-template #filterLayer>\n  <div [class]=\"layerContentClassName\">\n    <qd-icon\n      *ngIf=\"closeButton\"\n      [class]=\"'qd-filter__category-layer-close'\"\n      (click)=\"closeLayer()\"\n      [icon]=\"'ctrlTop'\"\n      [attr.data-test-id]=\"testId + '-layer-close'\"\n    ></qd-icon>\n\n    <ng-container *ngIf=\"itemsLoading$ | async; else categoryContent\" [ngTemplateOutlet]=\"loadingState\"></ng-container>\n\n    <ng-template #categoryContent>\n      <ng-container [ngSwitch]=\"type\">\n        <ng-container *ngSwitchCase=\"'multiSelect'\">\n          <qd-filter-form-items\n            *ngIf=\"filter\"\n            [inputFilterValue]=\"filterCategoryValue$ | async\"\n            (filterValueChange)=\"changeValue($event)\"\n            [data-test-id]=\"testId\"\n          ></qd-filter-form-items>\n\n          <div class=\"qd-filter__category-layer-items\">\n            <ng-container\n              *ngFor=\"let entry of selectedDropdownEntries; trackBy: trackByItem\"\n              [ngTemplateOutlet]=\"multiSelectItem\"\n              [ngTemplateOutletContext]=\"{ item: entry.item, itemIndex: entry.itemIndex }\"\n            ></ng-container>\n\n            <div\n              *ngIf=\"showSelectedSeparator\"\n              class=\"qd-filter__category-layer-separator\"\n              [attr.data-test-id]=\"testId + '-selected-separator'\"\n            ></div>\n\n            <ng-container\n              *ngFor=\"let entry of unselectedDropdownEntries; trackBy: trackByItem\"\n              [ngTemplateOutlet]=\"multiSelectItem\"\n              [ngTemplateOutletContext]=\"{ item: entry.item, itemIndex: entry.itemIndex }\"\n            ></ng-container>\n\n            <ng-container *ngIf=\"hasNoVisibleItems\" [ngTemplateOutlet]=\"emptyState\"></ng-container>\n          </div>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'singleSelect'\">\n          <qd-filter-form-items\n            *ngIf=\"filter\"\n            [inputFilterValue]=\"filterCategoryValue$ | async\"\n            (filterValueChange)=\"changeValue($event)\"\n            [data-test-id]=\"testId\"\n          ></qd-filter-form-items>\n\n          <div class=\"qd-filter__category-layer-items\">\n            <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n              <qd-filter-item-single-select\n                *ngIf=\"!item.hidden\"\n                [categoryIndex]=\"categoryIndex\"\n                [itemIndex]=\"itemIndex\"\n                (closeEventEmitter)=\"closeLayer()\"\n                [filterId]=\"filterId\"\n                [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n              >\n              </qd-filter-item-single-select>\n            </ng-container>\n\n            <ng-container *ngIf=\"hasNoVisibleItems\" [ngTemplateOutlet]=\"emptyState\"></ng-container>\n          </div>\n        </ng-container>\n      </ng-container>\n    </ng-template>\n  </div>\n</ng-template>\n\n<ng-template #emptyState>\n  <p class=\"qd-filter__category-layer-empty\" [attr.data-test-id]=\"testId + '-no-results'\">\n    {{ \"i18n.qd.filter.noResults\" | translate }}\n  </p>\n</ng-template>\n\n<ng-template #loadingState>\n  <p class=\"qd-filter__category-layer-loading\" [attr.data-test-id]=\"testId + '-items-loading'\">\n    {{ \"i18n.qd.filter.loading\" | translate }}\n  </p>\n</ng-template>\n\n<ng-template #multiSelectItem let-item=\"item\" let-itemIndex=\"itemIndex\">\n  <qd-filter-item-multi-select\n    *ngIf=\"!item.hidden\"\n    [categoryIndex]=\"categoryIndex\"\n    [itemIndex]=\"itemIndex\"\n    [filterId]=\"filterId\"\n    [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n  ></qd-filter-item-multi-select>\n</ng-template>\n\n<ng-template #SelectedChip>\n  <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n    <!-- TODO: Add tooltip-->\n    <qd-chip\n      *ngIf=\"item.active\"\n      [state]=\"'filter'\"\n      [close]=\"true\"\n      (closeClickEmitter)=\"close($event)\"\n      [data]=\"itemIndex\"\n      [data-test-id]=\"testId + '-selected-chip-' + item.item\"\n      >{{ item.i18n | translate }}</qd-chip\n    >\n  </ng-container>\n</ng-template>\n", styles: ["::ng-deep .qd-filter__category-layer{position:relative;display:flex;overflow:hidden;min-width:16.25rem;max-width:56.25rem;height:100%;flex-direction:column;padding:0;border:.0625rem solid rgb(151,151,151);background:#fff;box-shadow:#d5d5d5 .125rem .25rem .4375rem}::ng-deep .qd-filter__category-layer .qd-filter-form-items__filter{flex-shrink:0;margin-bottom:0}::ng-deep .qd-filter__category-layer .qd-checkbox__label{display:flex;height:2.5rem}::ng-deep .qd-filter__category-layer .qd-checkbox__indicator,::ng-deep .qd-filter__category-layer .qd-radio-buttons__indicator{transform:translateY(-.0625rem)}::ng-deep .qd-filter__category-layer-items{flex:1;overflow-y:auto}::ng-deep .qd-filter__category-layer-separator{height:.0625rem;flex-shrink:0;background:#d5d5d5}::ng-deep .qd-filter__category-layer-empty,::ng-deep .qd-filter__category-layer-loading{padding:0 .9375rem;margin:0;color:#757575;font-size:.875rem;line-height:2.5rem}::ng-deep .qd-filter__category-layer-container{position:relative}::ng-deep .qd-filter__category-layer-close{position:absolute;z-index:1;top:.5rem;right:1rem;color:#757575;cursor:pointer}::ng-deep .qd-filter__category-layer-close:before{position:absolute;content:\"\";inset:-.5rem}::ng-deep .qd-filter__category-layer-close:hover,::ng-deep .qd-filter__category-layer-close:focus{color:#171717}\n"] }]
         }], propDecorators: { filterId: [{
                 type: Input
             }], categoryIndex: [{
@@ -25497,7 +25350,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", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], 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", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], 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,
@@ -27935,7 +27788,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", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], 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", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], 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,
@@ -29916,7 +29769,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  <ng-container *ngIf=\"contexts$ | async as togglerContexts\">\n    <span class=\"facets-toggler\" *ngIf=\"adaptiveMode && headerFacets?.length + togglerContexts.length > 2\">\n      <span *ngIf=\"facetsCollapsed\">+{{ headerFacets.length + togglerContexts.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  </ng-container>\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", "qdPopoverFlipIntoViewport"], 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  <ng-container *ngIf=\"contexts$ | async as togglerContexts\">\n    <span class=\"facets-toggler\" *ngIf=\"adaptiveMode && headerFacets?.length + togglerContexts.length > 2\">\n      <span *ngIf=\"facetsCollapsed\">+{{ headerFacets.length + togglerContexts.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  </ng-container>\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", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], 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,
@@ -32275,11 +32128,11 @@ class QdPanelSectionComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPanelSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPanelSectionComponent, isStandalone: false, selector: "qd-panel-section", inputs: { config: "config" }, outputs: { actionOutput: "actionOutput" }, providers: [QdPanelSectionActionService], queries: [{ propertyName: "statusList", predicate: QdPanelSectionStatusComponent }, { propertyName: "statusPairsList", predicate: QdStatusPairsComponent }, { propertyName: "tableList", predicate: QdTableComponent }, { propertyName: "paragraphList", predicate: QdPanelSectionTextParagraphComponent }], ngImport: i0, template: "<section>\n  <div class=\"toolbar\" *ngIf=\"config.title || hasActions()\">\n    <div class=\"title\" *ngIf=\"config.title\">\n      {{ config.title.i18n | translate }}\n    </div>\n\n    <qd-panel-section-actions *ngIf=\"hasActions()\" [config]=\"config\"></qd-panel-section-actions>\n  </div>\n\n  <div [ngClass]=\"{ content: true, empty: !hasContent() }\">\n    <ng-content select=\"qd-panel-section-status\"></ng-content>\n    <ng-content select=\"qd-status-pairs\"></ng-content>\n    <ng-content select=\"qd-table\"></ng-content>\n    <ng-content select=\"qd-panel-section-text-paragraph\"></ng-content>\n  </div>\n</section>\n", styles: ["qd-panel-section{display:block;color:#171717;font-size:.875rem;font-weight:300;line-height:1.375rem}qd-panel-section+qd-panel-section{border-top:.0625rem solid rgb(213,213,213)}qd-panel-section section{display:flex;flex-wrap:wrap}qd-panel-section .toolbar{display:flex;width:100%}qd-panel-section .title,qd-panel-section .content{padding:1rem 1rem 0}qd-panel-section .title{flex-grow:99;font-weight:500}qd-panel-section .content{width:100%;margin-bottom:1.5rem}qd-panel-section .content.empty{padding:0;margin:0}qd-panel-section .toolbar+qd-panel-section-status{border-top:rgb(213,213,213) .125rem solid!important;margin-top:1rem}qd-panel-section qd-panel-section-actions{padding-top:.5rem;padding-right:1rem;margin-left:auto}qd-panel-section qd-panel-section-text-paragraph+qd-panel-section-text-paragraph{padding-top:1.5rem}qd-panel-section qd-status-pairs{display:flex;flex-wrap:wrap;column-gap:1rem}qd-panel-section qd-status-pairs qd-status-pairs-item{flex:1 1 0;margin-right:0!important;margin-bottom:.75rem!important}qd-panel-section qd-status-pairs+qd-panel-section-text-paragraph{margin-top:.5rem}qd-panel-section qd-table+qd-panel-section-text-paragraph{margin-top:1rem}\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: QdPanelSectionActionsComponent, selector: "qd-panel-section-actions", inputs: ["config"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPanelSectionComponent, isStandalone: false, selector: "qd-panel-section", inputs: { config: "config" }, outputs: { actionOutput: "actionOutput" }, providers: [QdPanelSectionActionService], queries: [{ propertyName: "statusList", predicate: QdPanelSectionStatusComponent }, { propertyName: "statusPairsList", predicate: QdStatusPairsComponent }, { propertyName: "tableList", predicate: QdTableComponent }, { propertyName: "paragraphList", predicate: QdPanelSectionTextParagraphComponent }], ngImport: i0, template: "<section>\n  <div class=\"toolbar\" *ngIf=\"config.title || hasActions()\">\n    <div class=\"title\" *ngIf=\"config.title\">\n      {{ config.title.i18n | translate }}\n    </div>\n\n    <qd-panel-section-actions *ngIf=\"hasActions()\" [config]=\"config\"></qd-panel-section-actions>\n  </div>\n\n  <div [ngClass]=\"{ content: true, empty: !hasContent() }\">\n    <ng-content select=\"qd-panel-section-status\"></ng-content>\n    <ng-content select=\"qd-status-pairs\"></ng-content>\n    <ng-content select=\"qd-table\"></ng-content>\n    <ng-content select=\"qd-panel-section-text-paragraph\"></ng-content>\n  </div>\n</section>\n", styles: ["qd-panel-section{display:block;color:#171717;font-size:.875rem;font-weight:300;line-height:1.375rem}qd-panel-section+qd-panel-section{border-top:.0625rem solid rgb(213,213,213)}qd-panel-section section{display:flex;flex-wrap:wrap}qd-panel-section .toolbar{display:flex;width:100%}qd-panel-section .title,qd-panel-section .content{padding:1rem 1rem 0}qd-panel-section .title{flex-grow:99;font-weight:500}qd-panel-section .content{width:100%;margin-bottom:.75rem}qd-panel-section .content.empty{padding:0;margin:0}qd-panel-section .toolbar+qd-panel-section-status{border-top:rgb(213,213,213) .125rem solid!important;margin-top:1rem}qd-panel-section qd-panel-section-actions{padding-top:.5rem;padding-right:1rem;margin-left:auto}qd-panel-section qd-panel-section-actions .content{padding-bottom:1rem;margin-bottom:0}qd-panel-section qd-panel-section-text-paragraph+qd-panel-section-text-paragraph{padding-top:1.5rem}qd-panel-section qd-status-pairs{display:flex;flex-wrap:wrap;column-gap:1rem}qd-panel-section qd-status-pairs qd-status-pairs-item{flex:1 1 0;margin-right:0!important;margin-bottom:.75rem!important}qd-panel-section qd-status-pairs+qd-panel-section-text-paragraph{margin-top:.5rem}qd-panel-section qd-table+qd-panel-section-text-paragraph{margin-top:1rem}\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: QdPanelSectionActionsComponent, selector: "qd-panel-section-actions", inputs: ["config"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPanelSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-panel-section', providers: [QdPanelSectionActionService], encapsulation: ViewEncapsulation.None, standalone: false, template: "<section>\n  <div class=\"toolbar\" *ngIf=\"config.title || hasActions()\">\n    <div class=\"title\" *ngIf=\"config.title\">\n      {{ config.title.i18n | translate }}\n    </div>\n\n    <qd-panel-section-actions *ngIf=\"hasActions()\" [config]=\"config\"></qd-panel-section-actions>\n  </div>\n\n  <div [ngClass]=\"{ content: true, empty: !hasContent() }\">\n    <ng-content select=\"qd-panel-section-status\"></ng-content>\n    <ng-content select=\"qd-status-pairs\"></ng-content>\n    <ng-content select=\"qd-table\"></ng-content>\n    <ng-content select=\"qd-panel-section-text-paragraph\"></ng-content>\n  </div>\n</section>\n", styles: ["qd-panel-section{display:block;color:#171717;font-size:.875rem;font-weight:300;line-height:1.375rem}qd-panel-section+qd-panel-section{border-top:.0625rem solid rgb(213,213,213)}qd-panel-section section{display:flex;flex-wrap:wrap}qd-panel-section .toolbar{display:flex;width:100%}qd-panel-section .title,qd-panel-section .content{padding:1rem 1rem 0}qd-panel-section .title{flex-grow:99;font-weight:500}qd-panel-section .content{width:100%;margin-bottom:1.5rem}qd-panel-section .content.empty{padding:0;margin:0}qd-panel-section .toolbar+qd-panel-section-status{border-top:rgb(213,213,213) .125rem solid!important;margin-top:1rem}qd-panel-section qd-panel-section-actions{padding-top:.5rem;padding-right:1rem;margin-left:auto}qd-panel-section qd-panel-section-text-paragraph+qd-panel-section-text-paragraph{padding-top:1.5rem}qd-panel-section qd-status-pairs{display:flex;flex-wrap:wrap;column-gap:1rem}qd-panel-section qd-status-pairs qd-status-pairs-item{flex:1 1 0;margin-right:0!important;margin-bottom:.75rem!important}qd-panel-section qd-status-pairs+qd-panel-section-text-paragraph{margin-top:.5rem}qd-panel-section qd-table+qd-panel-section-text-paragraph{margin-top:1rem}\n"] }]
+            args: [{ selector: 'qd-panel-section', providers: [QdPanelSectionActionService], encapsulation: ViewEncapsulation.None, standalone: false, template: "<section>\n  <div class=\"toolbar\" *ngIf=\"config.title || hasActions()\">\n    <div class=\"title\" *ngIf=\"config.title\">\n      {{ config.title.i18n | translate }}\n    </div>\n\n    <qd-panel-section-actions *ngIf=\"hasActions()\" [config]=\"config\"></qd-panel-section-actions>\n  </div>\n\n  <div [ngClass]=\"{ content: true, empty: !hasContent() }\">\n    <ng-content select=\"qd-panel-section-status\"></ng-content>\n    <ng-content select=\"qd-status-pairs\"></ng-content>\n    <ng-content select=\"qd-table\"></ng-content>\n    <ng-content select=\"qd-panel-section-text-paragraph\"></ng-content>\n  </div>\n</section>\n", styles: ["qd-panel-section{display:block;color:#171717;font-size:.875rem;font-weight:300;line-height:1.375rem}qd-panel-section+qd-panel-section{border-top:.0625rem solid rgb(213,213,213)}qd-panel-section section{display:flex;flex-wrap:wrap}qd-panel-section .toolbar{display:flex;width:100%}qd-panel-section .title,qd-panel-section .content{padding:1rem 1rem 0}qd-panel-section .title{flex-grow:99;font-weight:500}qd-panel-section .content{width:100%;margin-bottom:.75rem}qd-panel-section .content.empty{padding:0;margin:0}qd-panel-section .toolbar+qd-panel-section-status{border-top:rgb(213,213,213) .125rem solid!important;margin-top:1rem}qd-panel-section qd-panel-section-actions{padding-top:.5rem;padding-right:1rem;margin-left:auto}qd-panel-section qd-panel-section-actions .content{padding-bottom:1rem;margin-bottom:0}qd-panel-section qd-panel-section-text-paragraph+qd-panel-section-text-paragraph{padding-top:1.5rem}qd-panel-section qd-status-pairs{display:flex;flex-wrap:wrap;column-gap:1rem}qd-panel-section qd-status-pairs qd-status-pairs-item{flex:1 1 0;margin-right:0!important;margin-bottom:.75rem!important}qd-panel-section qd-status-pairs+qd-panel-section-text-paragraph{margin-top:.5rem}qd-panel-section qd-table+qd-panel-section-text-paragraph{margin-top:1rem}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], actionOutput: [{
@@ -33970,7 +33823,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", "qdPopoverFlipIntoViewport"], 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 });
+    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", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], 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,
@@ -35138,7 +34991,7 @@ 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      [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{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{min-width:0;margin-bottom:0!important}.table-body .table-row:hover{background-color:#f5f5f5}.table-cell{display:flex;min-width:0;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:has(.qd-input-character-counter){height:auto;align-items:flex-start}.table-cell:has(.qd-input-character-counter) ::ng-deep qd-input{position:relative}.table-cell:has(.qd-input-character-counter) ::ng-deep qd-input .qd-input-character-counter{position:absolute;right:.25rem;bottom:.125rem;font-size:.625rem;line-height:1;pointer-events:none}.table-cell.actions,.table-cell.actions-column{min-width:auto;flex:0 0 auto}.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{width:100%;min-width:0}.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", "optionsResolved"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }, { 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", "qdPopoverFlipIntoViewport"], 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{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{min-width:0;margin-bottom:0!important}.table-body .table-row:hover{background-color:#f5f5f5}.table-cell{display:flex;min-width:0;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:has(.qd-input-character-counter){height:auto;align-items:flex-start}.table-cell:has(.qd-input-character-counter) ::ng-deep qd-input{position:relative}.table-cell:has(.qd-input-character-counter) ::ng-deep qd-input .qd-input-character-counter{position:absolute;right:.25rem;bottom:.125rem;font-size:.625rem;line-height:1;pointer-events:none}.table-cell.actions,.table-cell.actions-column{min-width:auto;flex:0 0 auto}.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{width:100%;min-width:0}.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", "optionsResolved"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }, { 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", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], 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,