@quadrel-enterprise-ui/framework 20.17.0 → 20.17.2

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

@@ -16962,11 +16962,11 @@ class QdMenuButtonComponent {
         return this.config?.actions?.some(action => !action.isHidden) ?? false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMenuButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdMenuButtonComponent, isStandalone: false, selector: "button[qdMenuButton], a[qdMenuButton]", inputs: { config: ["qdMenuButton", "config"], dataTestId: ["data-test-id", "dataTestId"], autoSize: "autoSize" }, host: { properties: { "attr.class": "classes" } }, ngImport: i0, template: "<ng-container *ngIf=\"qdButtonGhost\">\n  <button\n    qdButton\n    qdButtonGhost\n    [qdPopoverOnClick]=\"menu\"\n    [qdPopoverAutoSize]=\"{ width: true }\"\n    [qdPopoverMinWidth]=\"200\"\n    [qdPopoverMaxWidth]=\"300\"\n    [disabled]=\"config?.isDisabled || !hasUnhiddenActions()\"\n    (opened)=\"isOpen = true\"\n    (closed)=\"isOpen = false\"\n    [class.open]=\"isOpen\"\n  >\n    <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n  </button>\n</ng-container>\n\n<ng-container *ngIf=\"!qdButtonGhost\">\n  <button\n    qdButton\n    [qdPopoverOnClick]=\"menu\"\n    [qdPopoverAutoSize]=\"{ width: autoSize }\"\n    [qdPopoverMinWidth]=\"200\"\n    [qdPopoverMaxWidth]=\"300\"\n    [disabled]=\"config?.isDisabled || !hasUnhiddenActions()\"\n    (opened)=\"isOpen = true\"\n    (closed)=\"isOpen = false\"\n    [class.open]=\"isOpen\"\n  >\n    <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n  </button>\n</ng-container>\n\n<ng-template #menu>\n  <ng-container *ngFor=\"let action of config?.actions\">\n    <button\n      class=\"entry\"\n      *ngIf=\"!action.isHidden\"\n      (click)=\"action.handler()\"\n      [disabled]=\"action.isDisabled\"\n      [attr.data-test-id]=\"dataTestId + 'menu-action'\"\n      qdTruncatedText\n    >\n      {{ action.label.i18n | translate }}\n    </button>\n  </ng-container>\n</ng-template>\n\n<ng-template #buttonContent>\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n  <qd-icon class=\"open-indicator\" [icon]=\"'ctrlDown'\"></qd-icon>\n</ng-template>\n", styles: [":host{padding:0}@media (max-width: 959.98px){:host.only-icon-on-small-viewport button{padding:.875rem}:host.only-icon-on-small-viewport .qd-icon{margin:0;font-size:1.125rem}:host.only-icon-on-small-viewport .content{display:none}}button[qd-button].open{background-color:#14516f}button.entry{display:block;overflow:hidden;width:100%;min-height:2.25rem;padding:0 1rem;background:#fff0;text-align:left;text-overflow:ellipsis;white-space:nowrap;color:inherit;font-size:.875rem;font-weight:400;line-height:1.3125rem}button.entry:hover{background-color:#f2f7fa}button.entry:hover[disabled]{background:#fff0;cursor:default}button.entry[disabled]{color:#b4b4b4;cursor:default}button.entry[disabled]:hover{background-color:#fff0}.open-indicator{margin-left:.5rem}qd-icon{font-size:.875rem}.content{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdMenuButtonComponent, isStandalone: false, selector: "button[qdMenuButton], a[qdMenuButton]", inputs: { config: ["qdMenuButton", "config"], dataTestId: ["data-test-id", "dataTestId"], autoSize: "autoSize" }, host: { properties: { "attr.class": "classes" } }, ngImport: i0, template: "<ng-container *ngIf=\"qdButtonGhost\">\n  <button\n    qdButton\n    qdButtonGhost\n    [qdPopoverOnClick]=\"menu\"\n    [qdPopoverAutoSize]=\"{ width: true }\"\n    [qdPopoverMinWidth]=\"200\"\n    [qdPopoverMaxWidth]=\"300\"\n    [disabled]=\"config?.isDisabled || !hasUnhiddenActions()\"\n    (opened)=\"isOpen = true\"\n    (closed)=\"isOpen = false\"\n    [class.open]=\"isOpen\"\n  >\n    <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n  </button>\n</ng-container>\n\n<ng-container *ngIf=\"!qdButtonGhost\">\n  <button\n    qdButton\n    [qdPopoverOnClick]=\"menu\"\n    [qdPopoverAutoSize]=\"{ width: autoSize }\"\n    [qdPopoverMinWidth]=\"200\"\n    [qdPopoverMaxWidth]=\"300\"\n    [disabled]=\"config?.isDisabled || !hasUnhiddenActions()\"\n    (opened)=\"isOpen = true\"\n    (closed)=\"isOpen = false\"\n    [class.open]=\"isOpen\"\n  >\n    <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n  </button>\n</ng-container>\n\n<ng-template #menu>\n  <ng-container *ngFor=\"let action of config?.actions\">\n    <button\n      class=\"entry\"\n      *ngIf=\"!action.isHidden\"\n      (click)=\"action.handler()\"\n      [disabled]=\"action.isDisabled\"\n      [attr.data-test-id]=\"dataTestId + 'menu-action'\"\n      qdTruncatedText\n    >\n      {{ action.label.i18n | translate }}\n    </button>\n  </ng-container>\n</ng-template>\n\n<ng-template #buttonContent>\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n  <qd-icon class=\"open-indicator\" [icon]=\"'ctrlDown'\"></qd-icon>\n</ng-template>\n", styles: [":host{padding:0}@media (max-width: 959.98px){:host.only-icon-on-small-viewport button{padding:.875rem}:host.only-icon-on-small-viewport .qd-icon{margin:0;font-size:1.125rem;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"], 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,
-            args: [{ selector: 'button[qdMenuButton], a[qdMenuButton]', host: { '[attr.class]': 'classes' }, standalone: false, template: "<ng-container *ngIf=\"qdButtonGhost\">\n  <button\n    qdButton\n    qdButtonGhost\n    [qdPopoverOnClick]=\"menu\"\n    [qdPopoverAutoSize]=\"{ width: true }\"\n    [qdPopoverMinWidth]=\"200\"\n    [qdPopoverMaxWidth]=\"300\"\n    [disabled]=\"config?.isDisabled || !hasUnhiddenActions()\"\n    (opened)=\"isOpen = true\"\n    (closed)=\"isOpen = false\"\n    [class.open]=\"isOpen\"\n  >\n    <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n  </button>\n</ng-container>\n\n<ng-container *ngIf=\"!qdButtonGhost\">\n  <button\n    qdButton\n    [qdPopoverOnClick]=\"menu\"\n    [qdPopoverAutoSize]=\"{ width: autoSize }\"\n    [qdPopoverMinWidth]=\"200\"\n    [qdPopoverMaxWidth]=\"300\"\n    [disabled]=\"config?.isDisabled || !hasUnhiddenActions()\"\n    (opened)=\"isOpen = true\"\n    (closed)=\"isOpen = false\"\n    [class.open]=\"isOpen\"\n  >\n    <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n  </button>\n</ng-container>\n\n<ng-template #menu>\n  <ng-container *ngFor=\"let action of config?.actions\">\n    <button\n      class=\"entry\"\n      *ngIf=\"!action.isHidden\"\n      (click)=\"action.handler()\"\n      [disabled]=\"action.isDisabled\"\n      [attr.data-test-id]=\"dataTestId + 'menu-action'\"\n      qdTruncatedText\n    >\n      {{ action.label.i18n | translate }}\n    </button>\n  </ng-container>\n</ng-template>\n\n<ng-template #buttonContent>\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n  <qd-icon class=\"open-indicator\" [icon]=\"'ctrlDown'\"></qd-icon>\n</ng-template>\n", styles: [":host{padding:0}@media (max-width: 959.98px){:host.only-icon-on-small-viewport button{padding:.875rem}:host.only-icon-on-small-viewport .qd-icon{margin:0;font-size:1.125rem}:host.only-icon-on-small-viewport .content{display:none}}button[qd-button].open{background-color:#14516f}button.entry{display:block;overflow:hidden;width:100%;min-height:2.25rem;padding:0 1rem;background:#fff0;text-align:left;text-overflow:ellipsis;white-space:nowrap;color:inherit;font-size:.875rem;font-weight:400;line-height:1.3125rem}button.entry:hover{background-color:#f2f7fa}button.entry:hover[disabled]{background:#fff0;cursor:default}button.entry[disabled]{color:#b4b4b4;cursor:default}button.entry[disabled]:hover{background-color:#fff0}.open-indicator{margin-left:.5rem}qd-icon{font-size:.875rem}.content{display:inline-block}\n"] }]
+            args: [{ selector: 'button[qdMenuButton], a[qdMenuButton]', host: { '[attr.class]': 'classes' }, standalone: false, template: "<ng-container *ngIf=\"qdButtonGhost\">\n  <button\n    qdButton\n    qdButtonGhost\n    [qdPopoverOnClick]=\"menu\"\n    [qdPopoverAutoSize]=\"{ width: true }\"\n    [qdPopoverMinWidth]=\"200\"\n    [qdPopoverMaxWidth]=\"300\"\n    [disabled]=\"config?.isDisabled || !hasUnhiddenActions()\"\n    (opened)=\"isOpen = true\"\n    (closed)=\"isOpen = false\"\n    [class.open]=\"isOpen\"\n  >\n    <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n  </button>\n</ng-container>\n\n<ng-container *ngIf=\"!qdButtonGhost\">\n  <button\n    qdButton\n    [qdPopoverOnClick]=\"menu\"\n    [qdPopoverAutoSize]=\"{ width: autoSize }\"\n    [qdPopoverMinWidth]=\"200\"\n    [qdPopoverMaxWidth]=\"300\"\n    [disabled]=\"config?.isDisabled || !hasUnhiddenActions()\"\n    (opened)=\"isOpen = true\"\n    (closed)=\"isOpen = false\"\n    [class.open]=\"isOpen\"\n  >\n    <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n  </button>\n</ng-container>\n\n<ng-template #menu>\n  <ng-container *ngFor=\"let action of config?.actions\">\n    <button\n      class=\"entry\"\n      *ngIf=\"!action.isHidden\"\n      (click)=\"action.handler()\"\n      [disabled]=\"action.isDisabled\"\n      [attr.data-test-id]=\"dataTestId + 'menu-action'\"\n      qdTruncatedText\n    >\n      {{ action.label.i18n | translate }}\n    </button>\n  </ng-container>\n</ng-template>\n\n<ng-template #buttonContent>\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n  <qd-icon class=\"open-indicator\" [icon]=\"'ctrlDown'\"></qd-icon>\n</ng-template>\n", styles: [":host{padding:0}@media (max-width: 959.98px){:host.only-icon-on-small-viewport button{padding:.875rem}:host.only-icon-on-small-viewport .qd-icon{margin:0;font-size:1.125rem;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"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input,
                 args: ['qdMenuButton']
@@ -25954,6 +25954,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }] });
 
+/**
+ * Renders the configured section actions in the toolbar.
+ *
+ * The presentation is viewport-adaptive, expressed through three streams:
+ * - Below `md` (mobile): one action is shown directly (`singleAction$`); if an
+ *   `addNew` action is paired with exactly one other action, that one remaining
+ *   action is shown directly as well (`remainingSingleAction$`); any larger set
+ *   collapses into a dropdown (`groupedActionsMenu$`).
+ * - At or above `md` (desktop): every action is shown directly, and the dropdown
+ *   (`groupedActionsMenu$`) appears only when more than one action exists.
+ */
 class QdSectionToolbarActionComponent {
     actionService = inject(QdSectionToolbarActionService);
     changeDetectorRef = inject(ChangeDetectorRef);
@@ -25965,7 +25976,8 @@ class QdSectionToolbarActionComponent {
         this.initActionStreams();
     }
     singleAction$;
-    multipleActions$;
+    remainingSingleAction$;
+    groupedActionsMenu$;
     _config = {};
     _viewonly$ = new BehaviorSubject(false);
     _destroy$ = new Subject();
@@ -25974,7 +25986,8 @@ class QdSectionToolbarActionComponent {
         // TODO: Remove in v19
         if (this._config.action) {
             this.singleAction$ = new BehaviorSubject(this.mapLegacyAction(this._config.action));
-            this.multipleActions$ = new BehaviorSubject(null);
+            this.remainingSingleAction$ = new BehaviorSubject(null);
+            this.groupedActionsMenu$ = new BehaviorSubject(null);
             return;
         }
         this.initActionStreams();
@@ -25995,7 +26008,8 @@ class QdSectionToolbarActionComponent {
     initActionStreams() {
         const visibleActions$ = this.createVisibleActionsStream();
         this.singleAction$ = this.createSingleActionStream(visibleActions$);
-        this.multipleActions$ = this.createMultipleActionsStream(visibleActions$);
+        this.remainingSingleAction$ = this.createRemainingSingleActionStream(visibleActions$);
+        this.groupedActionsMenu$ = this.createGroupedActionsMenuStream(visibleActions$);
     }
     createVisibleActionsStream() {
         const actions$ = new BehaviorSubject(this._config.actions ?? []);
@@ -26008,14 +26022,15 @@ class QdSectionToolbarActionComponent {
     createSingleActionStream(visibleActions$) {
         return combineLatest([visibleActions$, this.breakpointService.isViewportBelow('md')]).pipe(map(([actions, isVpBelowMd]) => {
             if (isVpBelowMd) {
-                const addNew = actions.find(action => action.type === 'addNew');
-                if (!addNew)
+                const singleAction = actions.find(action => action.type === 'addNew') ?? (actions.length === 1 ? actions[0] : undefined);
+                if (!singleAction)
                     return null;
+                const isAddNew = singleAction.type === 'addNew';
                 return {
-                    label: this.getLabel(addNew, true),
-                    handler: () => this.executeAction(addNew),
-                    icon: 'plus',
-                    isDisabled: this._config.areActionsDisabled ?? addNew.isDisabled ?? false,
+                    label: this.getLabel(singleAction, isAddNew),
+                    handler: () => this.executeAction(singleAction),
+                    icon: singleAction.icon || (isAddNew ? 'plus' : undefined),
+                    isDisabled: this._config.areActionsDisabled ?? singleAction.isDisabled ?? false,
                     isHidden: false
                 };
             }
@@ -26032,11 +26047,29 @@ class QdSectionToolbarActionComponent {
             };
         }));
     }
-    createMultipleActionsStream(visibleActions$) {
+    createRemainingSingleActionStream(visibleActions$) {
         return combineLatest([visibleActions$, this.breakpointService.isViewportBelow('md')]).pipe(map(([actions, isVpBelowMd]) => {
-            if (actions.length <= 1)
+            if (!isVpBelowMd)
+                return null;
+            const hasAddNew = actions.some(action => action.type === 'addNew');
+            const companions = actions.filter(action => action.type !== 'addNew');
+            if (!hasAddNew || companions.length !== 1)
                 return null;
+            const companion = companions[0];
+            return {
+                label: this.getLabel(companion, false),
+                handler: () => this.executeAction(companion),
+                icon: companion.icon,
+                isDisabled: this._config.areActionsDisabled ?? companion.isDisabled ?? false,
+                isHidden: false
+            };
+        }));
+    }
+    createGroupedActionsMenuStream(visibleActions$) {
+        return combineLatest([visibleActions$, this.breakpointService.isViewportBelow('md')]).pipe(map(([actions, isVpBelowMd]) => {
             const filteredActions = isVpBelowMd ? actions.filter(action => action.type !== 'addNew') : actions;
+            if (filteredActions.length <= 1)
+                return null;
             return {
                 isDisabled: this._config.areActionsDisabled ?? false,
                 actions: filteredActions.map(action => {
@@ -26080,11 +26113,11 @@ class QdSectionToolbarActionComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdSectionToolbarActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdSectionToolbarActionComponent, isStandalone: false, selector: "qd-section-toolbar-action", inputs: { config: "config" }, ngImport: i0, template: "<button\n  *ngIf=\"singleAction$ | async as singleAction\"\n  qdStopPropagation\n  qdButton\n  qdButtonGhost\n  color=\"primary\"\n  [icon]=\"singleAction.icon\"\n  [disabled]=\"singleAction.isDisabled\"\n  (click)=\"singleAction.handler()\"\n>\n  {{ singleAction.label.i18n | translate }}\n</button>\n\n<button *ngIf=\"multipleActions$ | async as multipleActions\" qdButtonGhost [qdMenuButton]=\"multipleActions\">\n  {{ \"i18n.qd.section.actions.menuButton.label\" | translate }}\n</button>\n", styles: [":host{margin-left:.75rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: QdMenuButtonComponent, selector: "button[qdMenuButton], a[qdMenuButton]", inputs: ["qdMenuButton", "data-test-id", "autoSize"] }, { 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: QdSectionToolbarActionComponent, isStandalone: false, selector: "qd-section-toolbar-action", inputs: { config: "config" }, ngImport: i0, template: "<button\n  *ngIf=\"singleAction$ | async as singleAction\"\n  qdStopPropagation\n  qdButton\n  qdButtonGhost\n  color=\"primary\"\n  [icon]=\"singleAction.icon\"\n  [disabled]=\"singleAction.isDisabled\"\n  (click)=\"singleAction.handler()\"\n>\n  {{ singleAction.label.i18n | translate }}\n</button>\n\n<button\n  *ngIf=\"remainingSingleAction$ | async as remainingSingleAction\"\n  qdStopPropagation\n  qdButton\n  qdButtonGhost\n  color=\"primary\"\n  [icon]=\"remainingSingleAction.icon\"\n  [disabled]=\"remainingSingleAction.isDisabled\"\n  (click)=\"remainingSingleAction.handler()\"\n>\n  {{ remainingSingleAction.label.i18n | translate }}\n</button>\n\n<button *ngIf=\"groupedActionsMenu$ | async as groupedActionsMenu\" qdButtonGhost [qdMenuButton]=\"groupedActionsMenu\">\n  {{ \"i18n.qd.section.actions.menuButton.label\" | translate }}\n</button>\n", styles: [":host{margin-left:.75rem}:host:not(:has(button)){margin-left:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: QdMenuButtonComponent, selector: "button[qdMenuButton], a[qdMenuButton]", inputs: ["qdMenuButton", "data-test-id", "autoSize"] }, { 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: QdSectionToolbarActionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-section-toolbar-action', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button\n  *ngIf=\"singleAction$ | async as singleAction\"\n  qdStopPropagation\n  qdButton\n  qdButtonGhost\n  color=\"primary\"\n  [icon]=\"singleAction.icon\"\n  [disabled]=\"singleAction.isDisabled\"\n  (click)=\"singleAction.handler()\"\n>\n  {{ singleAction.label.i18n | translate }}\n</button>\n\n<button *ngIf=\"multipleActions$ | async as multipleActions\" qdButtonGhost [qdMenuButton]=\"multipleActions\">\n  {{ \"i18n.qd.section.actions.menuButton.label\" | translate }}\n</button>\n", styles: [":host{margin-left:.75rem}\n"] }]
+            args: [{ selector: 'qd-section-toolbar-action', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button\n  *ngIf=\"singleAction$ | async as singleAction\"\n  qdStopPropagation\n  qdButton\n  qdButtonGhost\n  color=\"primary\"\n  [icon]=\"singleAction.icon\"\n  [disabled]=\"singleAction.isDisabled\"\n  (click)=\"singleAction.handler()\"\n>\n  {{ singleAction.label.i18n | translate }}\n</button>\n\n<button\n  *ngIf=\"remainingSingleAction$ | async as remainingSingleAction\"\n  qdStopPropagation\n  qdButton\n  qdButtonGhost\n  color=\"primary\"\n  [icon]=\"remainingSingleAction.icon\"\n  [disabled]=\"remainingSingleAction.isDisabled\"\n  (click)=\"remainingSingleAction.handler()\"\n>\n  {{ remainingSingleAction.label.i18n | translate }}\n</button>\n\n<button *ngIf=\"groupedActionsMenu$ | async as groupedActionsMenu\" qdButtonGhost [qdMenuButton]=\"groupedActionsMenu\">\n  {{ \"i18n.qd.section.actions.menuButton.label\" | translate }}\n</button>\n", styles: [":host{margin-left:.75rem}:host:not(:has(button)){margin-left:0}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }] } });
@@ -26128,11 +26161,11 @@ class QdSectionToolbarComponent {
         this.isCollapsed = !this.isCollapsed;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdSectionToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdSectionToolbarComponent, isStandalone: false, selector: "qd-section-toolbar", inputs: { config: "config" }, viewQueries: [{ propertyName: "toolbarComponents", predicate: ["filter, search"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"{ toolbarHeader: true, collapsible: config.collapse?.isEnabled }\" (click)=\"toggleCollapse()\">\n  <qd-icon class=\"collapseIcon\" *ngIf=\"config.collapse?.isEnabled\" [icon]=\"isCollapsed ? 'ctrlRight' : 'ctrlDown'\">\n  </qd-icon>\n\n  <span class=\"toolbarTitle\" *ngIf=\"config.title\">{{ config.title.i18n | translate }}</span>\n  <qd-icon\n    *ngIf=\"isTooltipVisible\"\n    class=\"additionalInfo\"\n    icon=\"circleInfo\"\n    qdTooltipOnClick\n    [qdTooltipContent]=\"tooltipContent\"\n  ></qd-icon>\n</div>\n\n<ng-container *ngIf=\"!isCollapsed\">\n  <div class=\"toolbarRight\">\n    <qd-search #search [configData]=\"searchConfigData\"></qd-search>\n    <qd-section-toolbar-action qdViewportAdaptive class=\"toolbarAction\" [config]=\"config\"></qd-section-toolbar-action>\n  </div>\n\n  <qd-filter class=\"toolbarFilter\" #filter [filterData]=\"filterData\"></qd-filter>\n</ng-container>\n", styles: [":host{position:relative;display:flex;flex-wrap:wrap;margin-bottom:.625rem}:host .toolbarHeader{color:#333;font-size:1rem;font-weight:700;line-height:1.5rem;margin-bottom:.625rem}@media (max-width: 599.98px){:host .toolbarHeader{margin-bottom:.3125rem}}:host .collapsible{cursor:pointer}:host .collapsible .toolbarTitle{margin-left:1.5rem}:host .collapseIcon{position:absolute;top:-.09375rem;font-size:1.375rem;font-weight:500}:host .additionalInfo{position:absolute;margin-left:.25rem;color:#069;cursor:pointer;font-size:1rem;font-weight:500}:host .additionalInfo:hover,:host .additionalInfo:focus,:host .additionalInfo:active{color:#14516f}:host .toolbarRight{display:inline-flex;margin-bottom:.625rem;margin-left:auto}@media (max-width: 959.98px){:host .toolbarRight{display:flex;width:100%;flex-basis:100%;margin-left:auto}:host .toolbarRight qd-search{min-width:0;flex-basis:0;flex-grow:1;flex-shrink:1}:host .toolbarRight qd-section-toolbar-action{flex-basis:auto;flex-grow:0;flex-shrink:0}}:host .toolbarAction{display:flex;align-items:center}@media (max-width: 959.98px){:host .toolbarAction{gap:.75rem}}:host .toolbarFilter{flex-basis:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdFilterComponent, selector: "qd-filter", inputs: ["filterData", "data-test-id"], outputs: ["queryStringOutput", "postBodyOutput", "valueChange"] }, { kind: "component", type: QdSearchComponent, selector: "qd-search", inputs: ["configData"] }, { kind: "directive", type: QdViewportAdaptiveDirective, selector: "[qdViewportAdaptive]" }, { kind: "directive", type: QdTooltipOnClickDirective, selector: "[qdTooltipOnClick]", inputs: ["qdTooltipContent"] }, { kind: "component", type: QdSectionToolbarActionComponent, selector: "qd-section-toolbar-action", inputs: ["config"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdSectionToolbarComponent, isStandalone: false, selector: "qd-section-toolbar", inputs: { config: "config" }, viewQueries: [{ propertyName: "toolbarComponents", predicate: ["filter, search"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"{ toolbarHeader: true, collapsible: config.collapse?.isEnabled }\" (click)=\"toggleCollapse()\">\n  <qd-icon class=\"collapseIcon\" *ngIf=\"config.collapse?.isEnabled\" [icon]=\"isCollapsed ? 'ctrlRight' : 'ctrlDown'\">\n  </qd-icon>\n\n  <span class=\"toolbarTitle\" *ngIf=\"config.title\">{{ config.title.i18n | translate }}</span>\n  <qd-icon\n    *ngIf=\"isTooltipVisible\"\n    class=\"additionalInfo\"\n    icon=\"circleInfo\"\n    qdTooltipOnClick\n    [qdTooltipContent]=\"tooltipContent\"\n  ></qd-icon>\n</div>\n\n<ng-container *ngIf=\"!isCollapsed\">\n  <div class=\"toolbarRight\">\n    <qd-search #search [configData]=\"searchConfigData\"></qd-search>\n    <qd-section-toolbar-action qdViewportAdaptive class=\"toolbarAction\" [config]=\"config\"></qd-section-toolbar-action>\n  </div>\n\n  <qd-filter class=\"toolbarFilter\" #filter [filterData]=\"filterData\"></qd-filter>\n</ng-container>\n", styles: [":host{position:relative;display:flex;flex-wrap:wrap;margin-bottom:.625rem}:host .toolbarHeader{color:#333;font-size:1rem;font-weight:700;line-height:1.5rem;margin-bottom:.625rem}@media (max-width: 599.98px){:host .toolbarHeader{margin-bottom:.3125rem}}:host .collapsible{cursor:pointer}:host .collapsible .toolbarTitle{margin-left:1.5rem}:host .collapseIcon{position:absolute;top:-.09375rem;font-size:1.375rem;font-weight:500}:host .additionalInfo{position:absolute;margin-left:.25rem;color:#069;cursor:pointer;font-size:1rem;font-weight:500}:host .additionalInfo:hover,:host .additionalInfo:focus,:host .additionalInfo:active{color:#14516f}:host .toolbarRight{display:inline-flex;margin-bottom:.625rem;margin-left:auto}@media (max-width: 959.98px){:host .toolbarRight{display:flex;width:100%;flex-basis:100%;margin-left:auto}:host .toolbarRight qd-search{min-width:0;flex-basis:0;flex-grow:1;flex-shrink:1}:host .toolbarRight qd-section-toolbar-action{flex-basis:auto;flex-grow:0;flex-shrink:0}:host .toolbarRight qd-search.hidden+qd-section-toolbar-action{margin-left:0}}:host .toolbarAction{display:flex;align-items:center}@media (max-width: 959.98px){:host .toolbarAction{gap:.75rem}}:host .toolbarFilter{flex-basis:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdFilterComponent, selector: "qd-filter", inputs: ["filterData", "data-test-id"], outputs: ["queryStringOutput", "postBodyOutput", "valueChange"] }, { kind: "component", type: QdSearchComponent, selector: "qd-search", inputs: ["configData"] }, { kind: "directive", type: QdViewportAdaptiveDirective, selector: "[qdViewportAdaptive]" }, { kind: "directive", type: QdTooltipOnClickDirective, selector: "[qdTooltipOnClick]", inputs: ["qdTooltipContent"] }, { kind: "component", type: QdSectionToolbarActionComponent, selector: "qd-section-toolbar-action", inputs: ["config"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdSectionToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-section-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div [ngClass]=\"{ toolbarHeader: true, collapsible: config.collapse?.isEnabled }\" (click)=\"toggleCollapse()\">\n  <qd-icon class=\"collapseIcon\" *ngIf=\"config.collapse?.isEnabled\" [icon]=\"isCollapsed ? 'ctrlRight' : 'ctrlDown'\">\n  </qd-icon>\n\n  <span class=\"toolbarTitle\" *ngIf=\"config.title\">{{ config.title.i18n | translate }}</span>\n  <qd-icon\n    *ngIf=\"isTooltipVisible\"\n    class=\"additionalInfo\"\n    icon=\"circleInfo\"\n    qdTooltipOnClick\n    [qdTooltipContent]=\"tooltipContent\"\n  ></qd-icon>\n</div>\n\n<ng-container *ngIf=\"!isCollapsed\">\n  <div class=\"toolbarRight\">\n    <qd-search #search [configData]=\"searchConfigData\"></qd-search>\n    <qd-section-toolbar-action qdViewportAdaptive class=\"toolbarAction\" [config]=\"config\"></qd-section-toolbar-action>\n  </div>\n\n  <qd-filter class=\"toolbarFilter\" #filter [filterData]=\"filterData\"></qd-filter>\n</ng-container>\n", styles: [":host{position:relative;display:flex;flex-wrap:wrap;margin-bottom:.625rem}:host .toolbarHeader{color:#333;font-size:1rem;font-weight:700;line-height:1.5rem;margin-bottom:.625rem}@media (max-width: 599.98px){:host .toolbarHeader{margin-bottom:.3125rem}}:host .collapsible{cursor:pointer}:host .collapsible .toolbarTitle{margin-left:1.5rem}:host .collapseIcon{position:absolute;top:-.09375rem;font-size:1.375rem;font-weight:500}:host .additionalInfo{position:absolute;margin-left:.25rem;color:#069;cursor:pointer;font-size:1rem;font-weight:500}:host .additionalInfo:hover,:host .additionalInfo:focus,:host .additionalInfo:active{color:#14516f}:host .toolbarRight{display:inline-flex;margin-bottom:.625rem;margin-left:auto}@media (max-width: 959.98px){:host .toolbarRight{display:flex;width:100%;flex-basis:100%;margin-left:auto}:host .toolbarRight qd-search{min-width:0;flex-basis:0;flex-grow:1;flex-shrink:1}:host .toolbarRight qd-section-toolbar-action{flex-basis:auto;flex-grow:0;flex-shrink:0}}:host .toolbarAction{display:flex;align-items:center}@media (max-width: 959.98px){:host .toolbarAction{gap:.75rem}}:host .toolbarFilter{flex-basis:100%}\n"] }]
+            args: [{ selector: 'qd-section-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div [ngClass]=\"{ toolbarHeader: true, collapsible: config.collapse?.isEnabled }\" (click)=\"toggleCollapse()\">\n  <qd-icon class=\"collapseIcon\" *ngIf=\"config.collapse?.isEnabled\" [icon]=\"isCollapsed ? 'ctrlRight' : 'ctrlDown'\">\n  </qd-icon>\n\n  <span class=\"toolbarTitle\" *ngIf=\"config.title\">{{ config.title.i18n | translate }}</span>\n  <qd-icon\n    *ngIf=\"isTooltipVisible\"\n    class=\"additionalInfo\"\n    icon=\"circleInfo\"\n    qdTooltipOnClick\n    [qdTooltipContent]=\"tooltipContent\"\n  ></qd-icon>\n</div>\n\n<ng-container *ngIf=\"!isCollapsed\">\n  <div class=\"toolbarRight\">\n    <qd-search #search [configData]=\"searchConfigData\"></qd-search>\n    <qd-section-toolbar-action qdViewportAdaptive class=\"toolbarAction\" [config]=\"config\"></qd-section-toolbar-action>\n  </div>\n\n  <qd-filter class=\"toolbarFilter\" #filter [filterData]=\"filterData\"></qd-filter>\n</ng-container>\n", styles: [":host{position:relative;display:flex;flex-wrap:wrap;margin-bottom:.625rem}:host .toolbarHeader{color:#333;font-size:1rem;font-weight:700;line-height:1.5rem;margin-bottom:.625rem}@media (max-width: 599.98px){:host .toolbarHeader{margin-bottom:.3125rem}}:host .collapsible{cursor:pointer}:host .collapsible .toolbarTitle{margin-left:1.5rem}:host .collapseIcon{position:absolute;top:-.09375rem;font-size:1.375rem;font-weight:500}:host .additionalInfo{position:absolute;margin-left:.25rem;color:#069;cursor:pointer;font-size:1rem;font-weight:500}:host .additionalInfo:hover,:host .additionalInfo:focus,:host .additionalInfo:active{color:#14516f}:host .toolbarRight{display:inline-flex;margin-bottom:.625rem;margin-left:auto}@media (max-width: 959.98px){:host .toolbarRight{display:flex;width:100%;flex-basis:100%;margin-left:auto}:host .toolbarRight qd-search{min-width:0;flex-basis:0;flex-grow:1;flex-shrink:1}:host .toolbarRight qd-section-toolbar-action{flex-basis:auto;flex-grow:0;flex-shrink:0}:host .toolbarRight qd-search.hidden+qd-section-toolbar-action{margin-left:0}}:host .toolbarAction{display:flex;align-items:center}@media (max-width: 959.98px){:host .toolbarAction{gap:.75rem}}:host .toolbarFilter{flex-basis:100%}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], toolbarComponents: [{
@@ -28902,11 +28935,11 @@ class QdPageObjectHeaderComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageObjectHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageObjectHeaderComponent, isStandalone: false, selector: "qd-page-object-header", inputs: { config: "config", hasNavigation: "hasNavigation", testId: ["data-test-id", "testId"] }, host: { listeners: { "click": "toggleFacets()" }, properties: { "style.borderBottom": "borderBottomStyle", "class.in-dialog": "this.isInDialog" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\"><qd-spinner></qd-spinner></div>\n\n<div class=\"object-header-top\">\n  <header class=\"object-header-title\">{{ config.title.i18n | translate }}</header>\n  <div class=\"object-header-toolbar\">\n    <button class=\"button-icon\" data-test-id=\"archive-button\">\n      <qd-icon\n        *ngIf=\"showArchive$ | async\"\n        (click)=\"archiveButton?.handler()\"\n        class=\"header-action-icon\"\n        [icon]=\"'resultNew'\"\n      ></qd-icon>\n    </button>\n\n    <button class=\"button-icon\" data-test-id=\"delete-button\">\n      <qd-icon\n        class=\"header-action-icon\"\n        *ngIf=\"showDelete$ | async\"\n        (click)=\"deleteButton?.handler()\"\n        [icon]=\"'trash'\"\n      ></qd-icon>\n    </button>\n\n    <button *ngIf=\"showEdit$ | async\" qdButton (click)=\"edit()\" data-test-id=\"edit-button\">\n      {{ editButton?.label?.i18n || \"i18n.qd.page.header.edit\" | translate }}\n    </button>\n\n    <button *ngIf=\"showCancel$ | async\" qdButton qdButtonGhost (click)=\"cancel()\" data-test-id=\"cancel-button\">\n      {{ cancelButton.label?.i18n || \"i18n.qd.page.header.cancel\" | translate }}\n    </button>\n\n    <button\n      *ngIf=\"showSave$ | async\"\n      qdButton\n      (click)=\"save()\"\n      data-test-id=\"save-button\"\n      [disabled]=\"($canSave | async) === false\"\n    >\n      {{ saveButton.label?.i18n || \"i18n.qd.page.header.save\" | translate }}\n    </button>\n\n    <ng-container *ngIf=\"customActions$ | async as customActions\">\n      <ng-container *ngIf=\"!adaptiveMode; else adaptive\">\n        <button\n          [qdMenuButton]=\"customActions\"\n          [autoSize]=\"false\"\n          [data-test-id]=\"'page-'\"\n          *ngIf=\"customActions.actions.length > 1; else singleButton\"\n          data-test-id=\"custom-button\"\n        >\n          {{ config?.customActionsLabel?.i18n || \"i18n.qd.page.header.actions\" | translate }}\n        </button>\n\n        <ng-template #singleButton>\n          <ng-container *ngIf=\"(customActions$ | async).actions[0] as singleAction\">\n            <button\n              qdButton\n              *ngIf=\"singleAction.handler && !singleAction.isHidden\"\n              [disabled]=\"singleAction.isDisabled\"\n              (click)=\"singleAction.handler()\"\n              data-test-id=\"custom-button\"\n            >\n              {{ singleAction.label?.i18n | translate }}\n            </button>\n          </ng-container>\n        </ng-template>\n      </ng-container>\n\n      <ng-template #adaptive>\n        <button\n          *ngIf=\"(customActions$ | async)?.actions.length >= 1\"\n          type=\"button\"\n          class=\"adaptive-menu-button\"\n          [qdPopoverOnClick]=\"menu\"\n          [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n          [qdPopoverStopPropagation]=\"true\"\n          [qdPopoverMinWidth]=\"160\"\n        >\n          <qd-icon icon=\"overflowMenuVertical\"></qd-icon>\n        </button>\n\n        <ng-template #menu>\n          <button\n            *ngFor=\"let action of customActions.actions; let i = index\"\n            class=\"adaptive-menu-entry\"\n            type=\"button\"\n            [disabled]=\"action.isDisabled\"\n            (click)=\"action.handler()\"\n          >\n            {{ action.label.i18n | translate }}\n          </button>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </div>\n</div>\n\n<div class=\"object-header-facets\" [ngClass]=\"{ amongThemselves: adaptiveMode && !facetsCollapsed }\">\n  <ng-container *ngIf=\"pageObjectData$ | async as data\">\n    <div\n      class=\"object-header-facet\"\n      *ngFor=\"let facet of headerFacets | slice : 0 : (adaptiveMode && facetsCollapsed ? 2 : headerFacets?.length ?? 0)\"\n      [attr.data-test-id]=\"testId + '-facet-' + facet.name\"\n    >\n      <div class=\"facet-label\">{{ facet.label.i18n | translate }}</div>\n      <qd-dynamic-facet class=\"dynamic-facet\" [facet]=\"facet\" [data]=\"data\"></qd-dynamic-facet>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!config.hideContexts && contexts$ | async as contexts\">\n    <div\n      class=\"object-header-facet\"\n      *ngFor=\"\n        let context of contexts\n          | slice : 0 : (adaptiveMode && facetsCollapsed ? 2 - (headerFacets?.length ?? 0) : contexts?.length);\n        let index = index;\n        let first = first\n      \"\n      [ngClass]=\"{ hasDivider: headerFacets && first, adaptiveFirst: headerFacets && adaptiveMode && first }\"\n    >\n      <div class=\"facet-label\">{{ context.label | translate }}</div>\n\n      <span *ngIf=\"context.value.length === 0\" class=\"no-selected-context\">{{\n        \"i18n.qd.page.context.noSelectionPlaceholder\" | translate\n      }}</span>\n\n      <span *ngIf=\"context.value.length !== 0\">\n        <qd-chip state=\"none\" [close]=\"isContextSelectable\" (closeClickEmitter)=\"clearContext(context.context)\">\n          <ng-container *ngFor=\"let val of context.value; let last = last\">\n            {{ val.label.i18n | translate }}<span *ngIf=\"!last\">, </span>\n          </ng-container>\n        </qd-chip>\n      </span>\n\n      <span *ngIf=\"isContextSelectable && (!facetsCollapsed || !adaptiveMode)\" class=\"select-button\">\n        <button\n          qdButton\n          qdButtonLink\n          type=\"button\"\n          (click)=\"changeContext(context.context, context.selection, $event)\"\n          [data-test-id]=\"'object-header-select-context-' + context.context.id\"\n        >\n          {{\n            context.value.length !== 0\n              ? (\"i18n.qd.page.context.button.change\" | translate)\n              : (\"i18n.qd.page.context.button.select\" | translate)\n          }}\n        </button>\n      </span>\n    </div>\n  </ng-container>\n\n  <span class=\"facets-toggler\" *ngIf=\"adaptiveMode && headerFacets?.length + (contexts$ | async).length > 2\">\n    <span *ngIf=\"facetsCollapsed\">+{{ headerFacets.length + (contexts$ | async).length - 2 }}</span>\n    <button qdIconButton [data-test-id]=\"'toggle-button'\">\n      <qd-icon [icon]=\"facetsCollapsed ? 'ctrlDown' : 'ctrlTop'\"></qd-icon>\n    </button>\n  </span>\n</div>\n", styles: [":host{display:flex;flex-direction:column;justify-content:space-between;padding:1.25rem;border-bottom:.125rem solid rgb(213,213,213);background:#fff;gap:1.25rem}@media (max-width: 599.98px){:host{padding:1.25rem .9375rem}}:host .object-header-top{display:flex;align-items:flex-start;justify-content:space-between}:host .object-header-top .object-header-title{padding:2px;color:#171717;font-size:1.3125rem;font-weight:500}:host .object-header-top .object-header-toolbar{display:flex;align-items:center;column-gap:.5rem}:host .object-header-top .object-header-toolbar .button-icon{background:none}:host .object-header-top .object-header-toolbar .button-icon+.button-icon{margin-left:-.5rem}:host .object-header-top .object-header-toolbar .header-action-icon{color:#14516f;cursor:pointer;font-size:1.5rem}:host.in-dialog .object-header-toolbar{padding-right:2.5rem}:host .object-header-facets{position:relative;display:flex;flex-wrap:wrap;font-size:1.125rem;gap:1.25rem}:host .object-header-facets .object-header-facet{display:flex;min-width:3.75rem;flex-direction:column}:host .object-header-facets .object-header-facet.hasDivider{padding-left:1.25rem;border-left:.0625rem solid rgb(117,117,117)}:host .object-header-facets .object-header-facet.adaptiveFirst{padding-top:1.25rem}:host .object-header-facets .object-header-facet .facet-label{display:block;margin-bottom:0;color:#757575;font-size:.875rem;padding-bottom:.375rem;font-weight:500}:host .object-header-facets .facets-toggler{position:absolute;top:0;right:0;display:flex;align-items:center;padding-right:.3125rem;font-size:.625rem;line-height:.625rem}:host .object-header-facets.amongThemselves{display:grid}:host .object-header-facets.amongThemselves .object-header-facet.hasDivider{padding-left:0;border-top:.0625rem solid rgb(117,117,117);border-left:none}.loading-overlay{position:absolute;z-index:10000;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}.no-selected-context{height:1.625rem;color:#979797;font-size:.875rem;line-height:1.625rem}.select-button{margin-top:.25rem}.adaptive-menu-button{display:flex;background:unset;color:#454545;font-size:2rem}.adaptive-menu-button:hover,.adaptive-menu-button:focus{color:#000}.adaptive-menu-entry{display:block;overflow:hidden;width:100%;min-height:2.25rem;padding:0 1rem;background:#fff0;text-align:left;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "directive", type: QdButtonLinkDirective, selector: "button[qdButtonLink], a[qdButtonLink], button[qd-button-link]" }, { kind: "component", type: QdIconButtonComponent, selector: "button[qdIconButton], a[qdIconButton], button[qd-icon-button]", inputs: ["color", "data-test-id"] }, { kind: "component", type: QdMenuButtonComponent, selector: "button[qdMenuButton], a[qdMenuButton]", inputs: ["qdMenuButton", "data-test-id", "autoSize"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdSpinnerComponent, selector: "qd-spinner" }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdDynamicFacetComponent, selector: "qd-dynamic-facet", inputs: ["facet", "data"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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"], 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,
-            args: [{ selector: 'qd-page-object-header', changeDetection: ChangeDetectionStrategy.OnPush, host: { '[style.borderBottom]': 'borderBottomStyle' }, standalone: false, template: "<div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\"><qd-spinner></qd-spinner></div>\n\n<div class=\"object-header-top\">\n  <header class=\"object-header-title\">{{ config.title.i18n | translate }}</header>\n  <div class=\"object-header-toolbar\">\n    <button class=\"button-icon\" data-test-id=\"archive-button\">\n      <qd-icon\n        *ngIf=\"showArchive$ | async\"\n        (click)=\"archiveButton?.handler()\"\n        class=\"header-action-icon\"\n        [icon]=\"'resultNew'\"\n      ></qd-icon>\n    </button>\n\n    <button class=\"button-icon\" data-test-id=\"delete-button\">\n      <qd-icon\n        class=\"header-action-icon\"\n        *ngIf=\"showDelete$ | async\"\n        (click)=\"deleteButton?.handler()\"\n        [icon]=\"'trash'\"\n      ></qd-icon>\n    </button>\n\n    <button *ngIf=\"showEdit$ | async\" qdButton (click)=\"edit()\" data-test-id=\"edit-button\">\n      {{ editButton?.label?.i18n || \"i18n.qd.page.header.edit\" | translate }}\n    </button>\n\n    <button *ngIf=\"showCancel$ | async\" qdButton qdButtonGhost (click)=\"cancel()\" data-test-id=\"cancel-button\">\n      {{ cancelButton.label?.i18n || \"i18n.qd.page.header.cancel\" | translate }}\n    </button>\n\n    <button\n      *ngIf=\"showSave$ | async\"\n      qdButton\n      (click)=\"save()\"\n      data-test-id=\"save-button\"\n      [disabled]=\"($canSave | async) === false\"\n    >\n      {{ saveButton.label?.i18n || \"i18n.qd.page.header.save\" | translate }}\n    </button>\n\n    <ng-container *ngIf=\"customActions$ | async as customActions\">\n      <ng-container *ngIf=\"!adaptiveMode; else adaptive\">\n        <button\n          [qdMenuButton]=\"customActions\"\n          [autoSize]=\"false\"\n          [data-test-id]=\"'page-'\"\n          *ngIf=\"customActions.actions.length > 1; else singleButton\"\n          data-test-id=\"custom-button\"\n        >\n          {{ config?.customActionsLabel?.i18n || \"i18n.qd.page.header.actions\" | translate }}\n        </button>\n\n        <ng-template #singleButton>\n          <ng-container *ngIf=\"(customActions$ | async).actions[0] as singleAction\">\n            <button\n              qdButton\n              *ngIf=\"singleAction.handler && !singleAction.isHidden\"\n              [disabled]=\"singleAction.isDisabled\"\n              (click)=\"singleAction.handler()\"\n              data-test-id=\"custom-button\"\n            >\n              {{ singleAction.label?.i18n | translate }}\n            </button>\n          </ng-container>\n        </ng-template>\n      </ng-container>\n\n      <ng-template #adaptive>\n        <button\n          *ngIf=\"(customActions$ | async)?.actions.length >= 1\"\n          type=\"button\"\n          class=\"adaptive-menu-button\"\n          [qdPopoverOnClick]=\"menu\"\n          [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n          [qdPopoverStopPropagation]=\"true\"\n          [qdPopoverMinWidth]=\"160\"\n        >\n          <qd-icon icon=\"overflowMenuVertical\"></qd-icon>\n        </button>\n\n        <ng-template #menu>\n          <button\n            *ngFor=\"let action of customActions.actions; let i = index\"\n            class=\"adaptive-menu-entry\"\n            type=\"button\"\n            [disabled]=\"action.isDisabled\"\n            (click)=\"action.handler()\"\n          >\n            {{ action.label.i18n | translate }}\n          </button>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </div>\n</div>\n\n<div class=\"object-header-facets\" [ngClass]=\"{ amongThemselves: adaptiveMode && !facetsCollapsed }\">\n  <ng-container *ngIf=\"pageObjectData$ | async as data\">\n    <div\n      class=\"object-header-facet\"\n      *ngFor=\"let facet of headerFacets | slice : 0 : (adaptiveMode && facetsCollapsed ? 2 : headerFacets?.length ?? 0)\"\n      [attr.data-test-id]=\"testId + '-facet-' + facet.name\"\n    >\n      <div class=\"facet-label\">{{ facet.label.i18n | translate }}</div>\n      <qd-dynamic-facet class=\"dynamic-facet\" [facet]=\"facet\" [data]=\"data\"></qd-dynamic-facet>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!config.hideContexts && contexts$ | async as contexts\">\n    <div\n      class=\"object-header-facet\"\n      *ngFor=\"\n        let context of contexts\n          | slice : 0 : (adaptiveMode && facetsCollapsed ? 2 - (headerFacets?.length ?? 0) : contexts?.length);\n        let index = index;\n        let first = first\n      \"\n      [ngClass]=\"{ hasDivider: headerFacets && first, adaptiveFirst: headerFacets && adaptiveMode && first }\"\n    >\n      <div class=\"facet-label\">{{ context.label | translate }}</div>\n\n      <span *ngIf=\"context.value.length === 0\" class=\"no-selected-context\">{{\n        \"i18n.qd.page.context.noSelectionPlaceholder\" | translate\n      }}</span>\n\n      <span *ngIf=\"context.value.length !== 0\">\n        <qd-chip state=\"none\" [close]=\"isContextSelectable\" (closeClickEmitter)=\"clearContext(context.context)\">\n          <ng-container *ngFor=\"let val of context.value; let last = last\">\n            {{ val.label.i18n | translate }}<span *ngIf=\"!last\">, </span>\n          </ng-container>\n        </qd-chip>\n      </span>\n\n      <span *ngIf=\"isContextSelectable && (!facetsCollapsed || !adaptiveMode)\" class=\"select-button\">\n        <button\n          qdButton\n          qdButtonLink\n          type=\"button\"\n          (click)=\"changeContext(context.context, context.selection, $event)\"\n          [data-test-id]=\"'object-header-select-context-' + context.context.id\"\n        >\n          {{\n            context.value.length !== 0\n              ? (\"i18n.qd.page.context.button.change\" | translate)\n              : (\"i18n.qd.page.context.button.select\" | translate)\n          }}\n        </button>\n      </span>\n    </div>\n  </ng-container>\n\n  <span class=\"facets-toggler\" *ngIf=\"adaptiveMode && headerFacets?.length + (contexts$ | async).length > 2\">\n    <span *ngIf=\"facetsCollapsed\">+{{ headerFacets.length + (contexts$ | async).length - 2 }}</span>\n    <button qdIconButton [data-test-id]=\"'toggle-button'\">\n      <qd-icon [icon]=\"facetsCollapsed ? 'ctrlDown' : 'ctrlTop'\"></qd-icon>\n    </button>\n  </span>\n</div>\n", styles: [":host{display:flex;flex-direction:column;justify-content:space-between;padding:1.25rem;border-bottom:.125rem solid rgb(213,213,213);background:#fff;gap:1.25rem}@media (max-width: 599.98px){:host{padding:1.25rem .9375rem}}:host .object-header-top{display:flex;align-items:flex-start;justify-content:space-between}:host .object-header-top .object-header-title{padding:2px;color:#171717;font-size:1.3125rem;font-weight:500}:host .object-header-top .object-header-toolbar{display:flex;align-items:center;column-gap:.5rem}:host .object-header-top .object-header-toolbar .button-icon{background:none}:host .object-header-top .object-header-toolbar .button-icon+.button-icon{margin-left:-.5rem}:host .object-header-top .object-header-toolbar .header-action-icon{color:#14516f;cursor:pointer;font-size:1.5rem}:host.in-dialog .object-header-toolbar{padding-right:2.5rem}:host .object-header-facets{position:relative;display:flex;flex-wrap:wrap;font-size:1.125rem;gap:1.25rem}:host .object-header-facets .object-header-facet{display:flex;min-width:3.75rem;flex-direction:column}:host .object-header-facets .object-header-facet.hasDivider{padding-left:1.25rem;border-left:.0625rem solid rgb(117,117,117)}:host .object-header-facets .object-header-facet.adaptiveFirst{padding-top:1.25rem}:host .object-header-facets .object-header-facet .facet-label{display:block;margin-bottom:0;color:#757575;font-size:.875rem;padding-bottom:.375rem;font-weight:500}:host .object-header-facets .facets-toggler{position:absolute;top:0;right:0;display:flex;align-items:center;padding-right:.3125rem;font-size:.625rem;line-height:.625rem}:host .object-header-facets.amongThemselves{display:grid}:host .object-header-facets.amongThemselves .object-header-facet.hasDivider{padding-left:0;border-top:.0625rem solid rgb(117,117,117);border-left:none}.loading-overlay{position:absolute;z-index:10000;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}.no-selected-context{height:1.625rem;color:#979797;font-size:.875rem;line-height:1.625rem}.select-button{margin-top:.25rem}.adaptive-menu-button{display:flex;background:unset;color:#454545;font-size:2rem}.adaptive-menu-button:hover,.adaptive-menu-button:focus{color:#000}.adaptive-menu-entry{display:block;overflow:hidden;width:100%;min-height:2.25rem;padding:0 1rem;background:#fff0;text-align:left;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+            args: [{ selector: 'qd-page-object-header', changeDetection: ChangeDetectionStrategy.OnPush, host: { '[style.borderBottom]': 'borderBottomStyle' }, standalone: false, 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"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input,
                 args: [{ required: true }]
@@ -34062,11 +34095,11 @@ class QdQuickEditComponent {
         this.controlContainer.control.valueChanges.pipe(tap(() => this.changeDetectorRef.detectChanges())).subscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdQuickEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdQuickEditComponent, isStandalone: false, selector: "qd-quick-edit", inputs: { config: "config", data: "data", testId: ["data-test-id", "testId"] }, outputs: { formGroupChange: "formGroupChange", addNewClicked: "addNewClicked" }, viewQueries: [{ propertyName: "customForDirective", first: true, predicate: QdCustomForDirective, descendants: true }, { propertyName: "focusables", predicate: QdFocusableDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n  <button\n    qdButton\n    qdButtonGhost\n    icon=\"plus\"\n    (click)=\"createRow()\"\n    [data-test-id]=\"testId + '-button-add-new'\"\n    class=\"create-button-standalone\"\n  >\n    {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n  </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n  <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n    <div class=\"table-row\">\n      <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n        {{ header?.i18n | translate }}\n        <qd-tooltip-icon [tooltip]=\"header?.tooltip\"></qd-tooltip-icon>\n      </div>\n      <div class=\"table-cell actions-column\" *ngIf=\"hasVisibleActions$ | async\">\n        <button class=\"menu-button\">\n          <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n        </button>\n      </div>\n    </div>\n  </div>\n  <div class=\"table-body\">\n    <div\n      class=\"table-row\"\n      *qdCustomFor=\"let row of templateData; let rowIndex = index; toggler: togglerDrawing\"\n      [formGroupName]=\"rowIndex\"\n      [attr.data-test-id]=\"testId + '-row-' + rowIndex\"\n    >\n      <ng-container *ngFor=\"let column of visibleColumns; trackBy: trackByColumnName\">\n        <div class=\"table-cell\">\n          <qd-dropdown\n            [config]=\"{\n              filter: column.filter,\n              options: column.options,\n              placeholder: column.placeholder,\n              placeholderPrefix: column.placeholderPrefix,\n              viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n            }\"\n            [data-test-id]=\"column.name + rowIndex\"\n            *ngIf=\"column.type === 'enum'; else otherTypes\"\n            [dense]=\"true\"\n            [formControl]=\"$any(control.controls[rowIndex])?.controls[column.name]\"\n            qdFocusable\n            class=\"dropdown\"\n          >\n          </qd-dropdown>\n\n          <ng-template #otherTypes>\n            <qd-input\n              [data-test-id]=\"column.name + rowIndex\"\n              [formControlName]=\"column.name\"\n              *ngIf=\"column.type !== 'enum' && $any(control.controls[rowIndex])?.controls[column.name]\"\n              [config]=\"{\n                inputType: column.type === 'integer' ? 'number' : 'text',\n                viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n              }\"\n              qdFocusable\n            ></qd-input>\n          </ng-template>\n        </div>\n      </ng-container>\n      <td\n        *ngIf=\"hasVisibleActions$ | async\"\n        class=\"table-cell actions\"\n        [attr.data-test-id]=\"testId + '-cell-inline-actions'\"\n      >\n        <button\n          type=\"button\"\n          [qdPopoverOnClick]=\"menu\"\n          [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n          [qdPopoverStopPropagation]=\"true\"\n          class=\"menu-button\"\n          data-test=\"secondary-actions-toggler\"\n        >\n          <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n        </button>\n\n        <ng-template #menu>\n          <button\n            *ngFor=\"let secondaryAction of actions$ | async\"\n            class=\"secondary-actions\"\n            [ngClass]=\"{ disabled: isActionDisabled(secondaryAction, row) }\"\n            [attr.disabled]=\"isActionDisabled(secondaryAction, row) || null\"\n            (click)=\"handleSecondaryAction(secondaryAction, rowIndex)\"\n          >\n            {{ secondaryAction.label.i18n | translate }}\n          </button>\n          <button\n            *ngIf=\"canAdd && (viewonly$ | async) === false\"\n            class=\"secondary-actions\"\n            (click)=\"removeRow(rowIndex)\"\n          >\n            {{ \"i18n.qd.quick.edit.removeButtonLabel\" | translate }}\n          </button>\n        </ng-template>\n      </td>\n    </div>\n  </div>\n  <div class=\"empty-body\" *ngIf=\"config.emptyStateView && !config.emptyStateView.disabled && templateData.length === 0\">\n    <p>{{ config.emptyStateView.i18n | translate }}</p>\n  </div>\n</div>\n", styles: [".table{display:flex;width:100%;flex-direction:column;margin:1.25rem auto;background-color:#fff;font-size:.875rem}.table ::ng-deep .qd-input-input{margin-bottom:0!important}.table-header .table-row{padding-top:.125rem;padding-bottom:.125rem;background-color:#e5e5e5;font-weight:700}.table-header .table-row .actions-column{flex:0;border-right:none;visibility:hidden}.table-header,.table-body{display:flex;flex-direction:column}.table-row{display:flex;flex-direction:row;padding:.25rem 1rem;border-bottom:.0625rem solid rgb(213,213,213);gap:1rem}.table-row ::ng-deep qd-form-label{display:none!important}.table-row ::ng-deep qd-input{margin-bottom:0!important}.table-body .table-row:hover{background-color:#f5f5f5}.table-cell{display:flex;height:37px;flex:1;align-items:center;text-align:left}.table-cell:has(.qd-input-error),.table-cell:has(.qd-dropdown-error){height:auto;align-items:flex-start}.table-cell.actions{flex:0}.table-row:last-child{border-bottom:none}.table-cell:last-child{border-right:none}.editable-actions{display:flex;justify-content:flex-end;margin-right:.625rem;gap:.625rem}.menu-button{display:flex;padding:0 .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem;vertical-align:middle}.menu-button:hover,.menu-button:focus{color:#000;outline:0!important}.secondary-actions{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.secondary-actions:hover{background-color:#f2f7fa}.secondary-actions.disabled{color:#b4b4b4;cursor:not-allowed}.secondary-actions.disabled:hover{background-color:#fff0}.dropdown{min-width:160px}.empty-body{padding:1.5rem;background:#fff}.empty-body p{margin:0 0 .5rem}\n"], dependencies: [{ kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "directive", type: QdFocusableDirective, selector: "[qdFocusable]" }, { kind: "component", type: QdTooltipIconComponent, selector: "qd-tooltip-icon", inputs: ["tooltip"] }, { kind: "directive", type: QdCustomForDirective, selector: "[qdCustomFor]", inputs: ["qdCustomForOf", "qdCustomForToggler"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "directive", type: QdFocusableDirective, selector: "[qdFocusable]" }, { kind: "component", type: QdTooltipIconComponent, selector: "qd-tooltip-icon", inputs: ["tooltip"] }, { kind: "directive", type: QdCustomForDirective, selector: "[qdCustomFor]", inputs: ["qdCustomForOf", "qdCustomForToggler"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdQuickEditComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-quick-edit', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n  <button\n    qdButton\n    qdButtonGhost\n    icon=\"plus\"\n    (click)=\"createRow()\"\n    [data-test-id]=\"testId + '-button-add-new'\"\n    class=\"create-button-standalone\"\n  >\n    {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n  </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n  <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n    <div class=\"table-row\">\n      <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n        {{ header?.i18n | translate }}\n        <qd-tooltip-icon [tooltip]=\"header?.tooltip\"></qd-tooltip-icon>\n      </div>\n      <div class=\"table-cell actions-column\" *ngIf=\"hasVisibleActions$ | async\">\n        <button class=\"menu-button\">\n          <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n        </button>\n      </div>\n    </div>\n  </div>\n  <div class=\"table-body\">\n    <div\n      class=\"table-row\"\n      *qdCustomFor=\"let row of templateData; let rowIndex = index; toggler: togglerDrawing\"\n      [formGroupName]=\"rowIndex\"\n      [attr.data-test-id]=\"testId + '-row-' + rowIndex\"\n    >\n      <ng-container *ngFor=\"let column of visibleColumns; trackBy: trackByColumnName\">\n        <div class=\"table-cell\">\n          <qd-dropdown\n            [config]=\"{\n              filter: column.filter,\n              options: column.options,\n              placeholder: column.placeholder,\n              placeholderPrefix: column.placeholderPrefix,\n              viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n            }\"\n            [data-test-id]=\"column.name + rowIndex\"\n            *ngIf=\"column.type === 'enum'; else otherTypes\"\n            [dense]=\"true\"\n            [formControl]=\"$any(control.controls[rowIndex])?.controls[column.name]\"\n            qdFocusable\n            class=\"dropdown\"\n          >\n          </qd-dropdown>\n\n          <ng-template #otherTypes>\n            <qd-input\n              [data-test-id]=\"column.name + rowIndex\"\n              [formControlName]=\"column.name\"\n              *ngIf=\"column.type !== 'enum' && $any(control.controls[rowIndex])?.controls[column.name]\"\n              [config]=\"{\n                inputType: column.type === 'integer' ? 'number' : 'text',\n                viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n              }\"\n              qdFocusable\n            ></qd-input>\n          </ng-template>\n        </div>\n      </ng-container>\n      <td\n        *ngIf=\"hasVisibleActions$ | async\"\n        class=\"table-cell actions\"\n        [attr.data-test-id]=\"testId + '-cell-inline-actions'\"\n      >\n        <button\n          type=\"button\"\n          [qdPopoverOnClick]=\"menu\"\n          [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n          [qdPopoverStopPropagation]=\"true\"\n          class=\"menu-button\"\n          data-test=\"secondary-actions-toggler\"\n        >\n          <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n        </button>\n\n        <ng-template #menu>\n          <button\n            *ngFor=\"let secondaryAction of actions$ | async\"\n            class=\"secondary-actions\"\n            [ngClass]=\"{ disabled: isActionDisabled(secondaryAction, row) }\"\n            [attr.disabled]=\"isActionDisabled(secondaryAction, row) || null\"\n            (click)=\"handleSecondaryAction(secondaryAction, rowIndex)\"\n          >\n            {{ secondaryAction.label.i18n | translate }}\n          </button>\n          <button\n            *ngIf=\"canAdd && (viewonly$ | async) === false\"\n            class=\"secondary-actions\"\n            (click)=\"removeRow(rowIndex)\"\n          >\n            {{ \"i18n.qd.quick.edit.removeButtonLabel\" | translate }}\n          </button>\n        </ng-template>\n      </td>\n    </div>\n  </div>\n  <div class=\"empty-body\" *ngIf=\"config.emptyStateView && !config.emptyStateView.disabled && templateData.length === 0\">\n    <p>{{ config.emptyStateView.i18n | translate }}</p>\n  </div>\n</div>\n", styles: [".table{display:flex;width:100%;flex-direction:column;margin:1.25rem auto;background-color:#fff;font-size:.875rem}.table ::ng-deep .qd-input-input{margin-bottom:0!important}.table-header .table-row{padding-top:.125rem;padding-bottom:.125rem;background-color:#e5e5e5;font-weight:700}.table-header .table-row .actions-column{flex:0;border-right:none;visibility:hidden}.table-header,.table-body{display:flex;flex-direction:column}.table-row{display:flex;flex-direction:row;padding:.25rem 1rem;border-bottom:.0625rem solid rgb(213,213,213);gap:1rem}.table-row ::ng-deep qd-form-label{display:none!important}.table-row ::ng-deep qd-input{margin-bottom:0!important}.table-body .table-row:hover{background-color:#f5f5f5}.table-cell{display:flex;height:37px;flex:1;align-items:center;text-align:left}.table-cell:has(.qd-input-error),.table-cell:has(.qd-dropdown-error){height:auto;align-items:flex-start}.table-cell.actions{flex:0}.table-row:last-child{border-bottom:none}.table-cell:last-child{border-right:none}.editable-actions{display:flex;justify-content:flex-end;margin-right:.625rem;gap:.625rem}.menu-button{display:flex;padding:0 .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem;vertical-align:middle}.menu-button:hover,.menu-button:focus{color:#000;outline:0!important}.secondary-actions{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.secondary-actions:hover{background-color:#f2f7fa}.secondary-actions.disabled{color:#b4b4b4;cursor:not-allowed}.secondary-actions.disabled:hover{background-color:#fff0}.dropdown{min-width:160px}.empty-body{padding:1.5rem;background:#fff}.empty-body p{margin:0 0 .5rem}\n"] }]
+            args: [{ selector: 'qd-quick-edit', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n  <button\n    qdButton\n    qdButtonGhost\n    icon=\"plus\"\n    (click)=\"createRow()\"\n    [data-test-id]=\"testId + '-button-add-new'\"\n    class=\"create-button-standalone\"\n  >\n    {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n  </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n  <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n    <div class=\"table-row\">\n      <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n        {{ header?.i18n | translate }}\n        <qd-tooltip-icon [tooltip]=\"header?.tooltip\"></qd-tooltip-icon>\n      </div>\n      <div class=\"table-cell actions-column\" *ngIf=\"hasVisibleActions$ | async\">\n        <button class=\"menu-button\">\n          <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n        </button>\n      </div>\n    </div>\n  </div>\n  <div class=\"table-body\">\n    <div\n      class=\"table-row\"\n      *qdCustomFor=\"let row of templateData; let rowIndex = index; toggler: togglerDrawing\"\n      [formGroupName]=\"rowIndex\"\n      [attr.data-test-id]=\"testId + '-row-' + rowIndex\"\n    >\n      <ng-container *ngFor=\"let column of visibleColumns; trackBy: trackByColumnName\">\n        <div class=\"table-cell\">\n          <qd-dropdown\n            [config]=\"{\n              filter: column.filter,\n              options: column.options,\n              placeholder: column.placeholder,\n              placeholderPrefix: column.placeholderPrefix,\n              viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n            }\"\n            [data-test-id]=\"column.name + rowIndex\"\n            *ngIf=\"column.type === 'enum'; else otherTypes\"\n            [dense]=\"true\"\n            [formControl]=\"$any(control.controls[rowIndex])?.controls[column.name]\"\n            qdFocusable\n            class=\"dropdown\"\n          >\n          </qd-dropdown>\n\n          <ng-template #otherTypes>\n            <qd-input\n              [data-test-id]=\"column.name + rowIndex\"\n              [formControlName]=\"column.name\"\n              *ngIf=\"column.type !== 'enum' && $any(control.controls[rowIndex])?.controls[column.name]\"\n              [config]=\"{\n                inputType: column.type === 'integer' ? 'number' : 'text',\n                viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n              }\"\n              qdFocusable\n            ></qd-input>\n          </ng-template>\n        </div>\n      </ng-container>\n      <td\n        *ngIf=\"hasVisibleActions$ | async\"\n        class=\"table-cell actions\"\n        [attr.data-test-id]=\"testId + '-cell-inline-actions'\"\n      >\n        <button\n          type=\"button\"\n          [qdPopoverOnClick]=\"menu\"\n          [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n          [qdPopoverStopPropagation]=\"true\"\n          class=\"menu-button\"\n          data-test=\"secondary-actions-toggler\"\n        >\n          <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n        </button>\n\n        <ng-template #menu>\n          <button\n            *ngFor=\"let secondaryAction of actions$ | async\"\n            class=\"secondary-actions\"\n            [ngClass]=\"{ disabled: isActionDisabled(secondaryAction, row) }\"\n            [attr.disabled]=\"isActionDisabled(secondaryAction, row) || null\"\n            (click)=\"handleSecondaryAction(secondaryAction, rowIndex)\"\n          >\n            {{ secondaryAction.label.i18n | translate }}\n          </button>\n          <button\n            *ngIf=\"canAdd && (viewonly$ | async) === false\"\n            class=\"secondary-actions\"\n            (click)=\"removeRow(rowIndex)\"\n          >\n            {{ \"i18n.qd.quick.edit.removeButtonLabel\" | translate }}\n          </button>\n        </ng-template>\n      </td>\n    </div>\n  </div>\n  <div class=\"empty-body\" *ngIf=\"config.emptyStateView && !config.emptyStateView.disabled && templateData.length === 0\">\n    <p>{{ config.emptyStateView.i18n | translate }}</p>\n  </div>\n</div>\n", styles: [".table{display:flex;width:100%;flex-direction:column;margin:1.25rem auto;background-color:#fff;font-size:.875rem}.table ::ng-deep .qd-input-input{margin-bottom:0!important}.table-header .table-row{padding-top:.125rem;padding-bottom:.125rem;background-color:#e5e5e5;font-weight:700}.table-header .table-row .actions-column{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"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input,
                 args: [{ required: true }]