@acorex/platform 21.0.0-next.70 → 21.0.0-next.71

package/fesm2022/acorex-platform-layout-components.mjs

@@ -10,13 +10,13 @@ import * as i2 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
 import * as i4 from '@acorex/core/format';
 import { AXFormatModule, AXFormatService } from '@acorex/core/format';
-import { getSystemActions, AXPExpressionEvaluatorService, AXPColumnWidthService, compareMultiLanguageStrings, AXPIconLogoConfig, AXPComponentLogoConfig, AXPImageUrlLogoConfig, containsHtmlMarkup, AXPDataGenerator, extractTextFromHtml } from '@acorex/platform/core';
+import { getSystemActions, AXPExpressionEvaluatorService, AXPColumnWidthService, compareMultiLanguageStrings, AXPDeviceService, AXPImageUrlLogoConfig, AXPComponentLogoConfig, AXPIconLogoConfig, containsHtmlMarkup, AXPDataGenerator, extractTextFromHtml } from '@acorex/platform/core';
 import { AXPWorkflowService } from '@acorex/platform/workflow';
 import { AXPLayoutRendererComponent, AXPLayoutBuilderService, AXP_PREVIEW_WIDGET_FIELD_COMMAND_KEY } from '@acorex/platform/layout/builder';
 import * as i1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet, isPlatformBrowser, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, signal, effect, computed, InjectionToken, Injectable, Directive, viewChild, contentChild, ElementRef, output, afterNextRender, model, untracked, DestroyRef, PLATFORM_ID, linkedSignal, HostListener, ViewChildren, EventEmitter, Output, TemplateRef, contentChildren, ChangeDetectorRef, Input } from '@angular/core';
+import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, signal, effect, computed, InjectionToken, Injectable, Directive, viewChild, contentChild, ElementRef, output, afterNextRender, model, untracked, DestroyRef, PLATFORM_ID, linkedSignal, HostListener, ViewChildren, EventEmitter, Output, TemplateRef, contentChildren, Input } from '@angular/core';
 import { AXAccordionCdkModule } from '@acorex/cdk/accordion';
 import { AXTagModule } from '@acorex/components/tag';
 import * as i1$1 from '@acorex/components/avatar';
@@ -80,7 +80,6 @@ import { AXCodeEditorModule } from '@acorex/components/code-editor';
 import * as i8 from '@acorex/components/tabs';
 import { AXTabsModule } from '@acorex/components/tabs';
 import { AXToastService } from '@acorex/components/toast';
-import { AXPlatform } from '@acorex/core/platform';
 import { AXDialogService } from '@acorex/components/dialog';
 import { AXTreeViewComponent } from '@acorex/components/tree-view';
 import * as i2$8 from '@acorex/components/loading';
@@ -3050,7 +3049,8 @@ class AXPQueryFiltersComponent {
             Promise.all(filters.map(async (filter) => {
                 const val = context[filter.field]?.value;
                 const displayText = context[filter.field]?.displayText;
-                const displayValue = displayText ? displayText : await this.getDisplayValue(filter, val);
+                const rawDisplay = displayText != null && displayText !== '' ? displayText : await this.getDisplayValue(filter, val);
+                const displayValue = this.formatFilterDisplayValue(rawDisplay);
                 return {
                     ...filter,
                     query: `${this.translate.translateSync(filter.title)} ${this.translate.translateSync(this.getActiveOperator(filter)) || ''} '${displayValue}'`,
@@ -3383,6 +3383,25 @@ class AXPQueryFiltersComponent {
         }
         return Boolean(this.disabledByField()[field]);
     }
+    /**
+     * Resolves filter chip labels; translates i18n keys stored in select `displayText` or datasource titles.
+     */
+    formatFilterDisplayValue(value) {
+        if (value == null || value === '') {
+            return '';
+        }
+        const parts = Array.isArray(value) ? value : [value];
+        return parts
+            .map((part) => {
+            const text = String(part ?? '').trim();
+            if (!text) {
+                return '';
+            }
+            return text.startsWith('@') ? this.translate.translateSync(text) || text : text;
+        })
+            .filter(Boolean)
+            .join(', ');
+    }
     createExpressionScope(filtersContext) {
         const base = (filtersContext ?? {});
         return {
@@ -3501,7 +3520,7 @@ class AXPQueryFiltersComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPQueryFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPQueryFiltersComponent, isStandalone: true, selector: "axp-query-filters", inputs: { filtersDefinitions: { classPropertyName: "filtersDefinitions", publicName: "filtersDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialFilters: { classPropertyName: "initialFilters", publicName: "initialFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChanged: "onFiltersChanged" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "widgetRenderer", first: true, predicate: ["widgetRenderer"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ["caseItem"], descendants: true }], ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\n    #tagBoxComponent\n    [ngModel]=\"asyncTags()\"\n    (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\"\n    [valueField]=\"'id'\"\n    [readonly]=\"filtersDefinitions().length === 0\"\n    [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\"\n    [tagTemplate]=\"tagTemplate\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \"\n    #tagBox\n  >\n    <ax-suffix class=\"ax-hidden md:ax-block\"><span class=\"ax-text-gray-500\">Ctrl+F</span></ax-suffix>\n  </ax-tag-box>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div\n      class=\"ax-inline-flex ax-items-center ax-gap-1.5 hover:ax-bg-darkest ax-cursor-pointer ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface\"\n      [class.!ax-bg-primary]=\"item.field === 'all'\"\n      [class.!ax-text-white]=\"item.field === 'all'\"\n      (click)=\"handleTagClick(item)\"\n    >\n      <span>{{ item.query }}</span>\n      @if (!item.readOnly) {\n        <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n          <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n        </button>\n      }\n    </div>\n  </ng-template>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div class=\"md:ax-min-w-72 ax-w-full ax-rounded-md md:ax-max-h-96 ax-max-w-80 md:ax-overflow-auto\">\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n          <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n            activeFilter()?.title! | translate | async\n          }}</ax-header>\n          <ax-content class=\"ax-p-4\">\n            <div class=\"ax-mb-2\">\n              <ax-badge [text]=\"(getActiveOperator(activeFilter())! | translate | async) || ''\"></ax-badge>\n            </div>\n            <ng-container\n              #widgetRenderer=\"widgetRenderer\"\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n            <ax-button\n              class=\"ax-xs\"\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApplyFilter()\"\n            ></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n          <!-- @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          } -->\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive() && !isFilterDisabled(field)\"\n              [class.axp-query-filters__advance-item--disabled]=\"isFilterDisabled(field)\"\n              [attr.aria-disabled]=\"isFilterDisabled(field) ? 'true' : null\"\n              [attr.tabindex]=\"isFilterDisabled(field) ? -1 : 0\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n            >\n              <div class=\"ax-flex ax-items-end ax-gap-2\">\n                <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n                {{ field.title | translate | async }}\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["axp-query-filters{width:100%}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}.axp-list-items>div.axp-query-filters__advance-item--disabled{cursor:not-allowed;opacity:.5}.axp-list-items>div.axp-query-filters__advance-item--disabled.axp-state-focused,.axp-list-items>div.axp-query-filters__advance-item--disabled:hover{background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$3.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i5$1.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i7.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i7.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPQueryFiltersComponent, isStandalone: true, selector: "axp-query-filters", inputs: { filtersDefinitions: { classPropertyName: "filtersDefinitions", publicName: "filtersDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialFilters: { classPropertyName: "initialFilters", publicName: "initialFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChanged: "onFiltersChanged" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "widgetRenderer", first: true, predicate: ["widgetRenderer"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ["caseItem"], descendants: true }], ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box #tagBoxComponent [ngModel]=\"asyncTags()\" (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\" [valueField]=\"'id'\" [readonly]=\"filtersDefinitions().length === 0\" [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\" [tagTemplate]=\"tagTemplate\" (onKeyDown)=\"handleKeyDown($event)\" [addOnEnter]=\"false\"\n    [placeholder]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \" #tagBox>\n    <ax-suffix class=\"ax-hidden md:ax-block\"><span class=\"ax-text-gray-500\">Ctrl+F</span></ax-suffix>\n  </ax-tag-box>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div\n      class=\"ax-inline-flex ax-items-center ax-gap-1.5 hover:ax-bg-darkest ax-cursor-pointer ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface\"\n      [class.!ax-bg-primary]=\"item.field === 'all'\" [class.!ax-text-white]=\"item.field === 'all'\"\n      (click)=\"handleTagClick(item)\">\n      <span>{{ item.query }}</span>\n      @if (!item.readOnly) {\n      <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n        <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n      </button>\n      }\n    </div>\n  </ng-template>\n</div>\n\n<ax-popover [offsetY]=\"activeFilter() ? -30 : 0\" [target]=\"tagBoxInput\" [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\" [closeOn]=\"'clickOut'\" (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\" #popover>\n  <div class=\"md:ax-min-w-72 ax-w-full ax-rounded-md md:ax-max-h-96 ax-max-w-80 md:ax-overflow-auto\">\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n      <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n        <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n          activeFilter()?.title! | translate | async\n          }}</ax-header>\n        <ax-content class=\"ax-p-4\">\n          <div class=\"ax-mb-2\">\n            <ax-badge [text]=\"(getActiveOperator(activeFilter())! | translate | async) || ''\"></ax-badge>\n          </div>\n          <ng-container #widgetRenderer=\"widgetRenderer\" axp-widget-renderer [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\" [mode]=\"'edit'\">\n          </ng-container>\n        </ax-content>\n        <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n          <ax-button class=\"ax-xs\" [text]=\"'@general:actions.apply.title' | translate | async\"\n            (onClick)=\"handleApplyFilter()\"></ax-button>\n        </ax-footer>\n      </div>\n      } @else {\n      <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n        <!-- @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          } -->\n        @for (field of filterFields(); track field.field) {\n        <div axListNavigationItem #caseItem=\"axListNavigationItem\"\n          [class.axp-state-focused]=\"caseItem.isActive() && !isFilterDisabled(field)\"\n          [class.axp-query-filters__advance-item--disabled]=\"isFilterDisabled(field)\"\n          [attr.aria-disabled]=\"isFilterDisabled(field) ? 'true' : null\"\n          [attr.tabindex]=\"isFilterDisabled(field) ? -1 : 0\" (click)=\"handleSelectField(field)\"\n          (keydown)=\"handleFieldKeyDown($event, field)\">\n          <div class=\"ax-flex ax-items-end ax-gap-2\">\n            <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n            {{ field.title | translate | async }}\n          </div>\n        </div>\n        }\n      </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>", styles: ["axp-query-filters{width:100%}axp-query-filters ax-tag-box .ax-editor-container{background-color:transparent}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}.axp-list-items>div.axp-query-filters__advance-item--disabled{cursor:not-allowed;opacity:.5}.axp-list-items>div.axp-query-filters__advance-item--disabled.axp-state-focused,.axp-list-items>div.axp-query-filters__advance-item--disabled:hover{background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$3.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i5$1.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i7.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i7.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPQueryFiltersComponent, decorators: [{
             type: Component,
@@ -3517,7 +3536,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         AXPWidgetCoreModule,
                         AXListNavigationModule,
                         AXBadgeModule,
-                    ], template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\n    #tagBoxComponent\n    [ngModel]=\"asyncTags()\"\n    (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\"\n    [valueField]=\"'id'\"\n    [readonly]=\"filtersDefinitions().length === 0\"\n    [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\"\n    [tagTemplate]=\"tagTemplate\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \"\n    #tagBox\n  >\n    <ax-suffix class=\"ax-hidden md:ax-block\"><span class=\"ax-text-gray-500\">Ctrl+F</span></ax-suffix>\n  </ax-tag-box>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div\n      class=\"ax-inline-flex ax-items-center ax-gap-1.5 hover:ax-bg-darkest ax-cursor-pointer ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface\"\n      [class.!ax-bg-primary]=\"item.field === 'all'\"\n      [class.!ax-text-white]=\"item.field === 'all'\"\n      (click)=\"handleTagClick(item)\"\n    >\n      <span>{{ item.query }}</span>\n      @if (!item.readOnly) {\n        <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n          <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n        </button>\n      }\n    </div>\n  </ng-template>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div class=\"md:ax-min-w-72 ax-w-full ax-rounded-md md:ax-max-h-96 ax-max-w-80 md:ax-overflow-auto\">\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n          <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n            activeFilter()?.title! | translate | async\n          }}</ax-header>\n          <ax-content class=\"ax-p-4\">\n            <div class=\"ax-mb-2\">\n              <ax-badge [text]=\"(getActiveOperator(activeFilter())! | translate | async) || ''\"></ax-badge>\n            </div>\n            <ng-container\n              #widgetRenderer=\"widgetRenderer\"\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n            <ax-button\n              class=\"ax-xs\"\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApplyFilter()\"\n            ></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n          <!-- @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          } -->\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive() && !isFilterDisabled(field)\"\n              [class.axp-query-filters__advance-item--disabled]=\"isFilterDisabled(field)\"\n              [attr.aria-disabled]=\"isFilterDisabled(field) ? 'true' : null\"\n              [attr.tabindex]=\"isFilterDisabled(field) ? -1 : 0\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n            >\n              <div class=\"ax-flex ax-items-end ax-gap-2\">\n                <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n                {{ field.title | translate | async }}\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["axp-query-filters{width:100%}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}.axp-list-items>div.axp-query-filters__advance-item--disabled{cursor:not-allowed;opacity:.5}.axp-list-items>div.axp-query-filters__advance-item--disabled.axp-state-focused,.axp-list-items>div.axp-query-filters__advance-item--disabled:hover{background-color:transparent}\n"] }]
+                    ], template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box #tagBoxComponent [ngModel]=\"asyncTags()\" (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\" [valueField]=\"'id'\" [readonly]=\"filtersDefinitions().length === 0\" [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\" [tagTemplate]=\"tagTemplate\" (onKeyDown)=\"handleKeyDown($event)\" [addOnEnter]=\"false\"\n    [placeholder]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \" #tagBox>\n    <ax-suffix class=\"ax-hidden md:ax-block\"><span class=\"ax-text-gray-500\">Ctrl+F</span></ax-suffix>\n  </ax-tag-box>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div\n      class=\"ax-inline-flex ax-items-center ax-gap-1.5 hover:ax-bg-darkest ax-cursor-pointer ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface\"\n      [class.!ax-bg-primary]=\"item.field === 'all'\" [class.!ax-text-white]=\"item.field === 'all'\"\n      (click)=\"handleTagClick(item)\">\n      <span>{{ item.query }}</span>\n      @if (!item.readOnly) {\n      <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n        <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n      </button>\n      }\n    </div>\n  </ng-template>\n</div>\n\n<ax-popover [offsetY]=\"activeFilter() ? -30 : 0\" [target]=\"tagBoxInput\" [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\" [closeOn]=\"'clickOut'\" (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\" #popover>\n  <div class=\"md:ax-min-w-72 ax-w-full ax-rounded-md md:ax-max-h-96 ax-max-w-80 md:ax-overflow-auto\">\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n      <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n        <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n          activeFilter()?.title! | translate | async\n          }}</ax-header>\n        <ax-content class=\"ax-p-4\">\n          <div class=\"ax-mb-2\">\n            <ax-badge [text]=\"(getActiveOperator(activeFilter())! | translate | async) || ''\"></ax-badge>\n          </div>\n          <ng-container #widgetRenderer=\"widgetRenderer\" axp-widget-renderer [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\" [mode]=\"'edit'\">\n          </ng-container>\n        </ax-content>\n        <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n          <ax-button class=\"ax-xs\" [text]=\"'@general:actions.apply.title' | translate | async\"\n            (onClick)=\"handleApplyFilter()\"></ax-button>\n        </ax-footer>\n      </div>\n      } @else {\n      <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n        <!-- @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          } -->\n        @for (field of filterFields(); track field.field) {\n        <div axListNavigationItem #caseItem=\"axListNavigationItem\"\n          [class.axp-state-focused]=\"caseItem.isActive() && !isFilterDisabled(field)\"\n          [class.axp-query-filters__advance-item--disabled]=\"isFilterDisabled(field)\"\n          [attr.aria-disabled]=\"isFilterDisabled(field) ? 'true' : null\"\n          [attr.tabindex]=\"isFilterDisabled(field) ? -1 : 0\" (click)=\"handleSelectField(field)\"\n          (keydown)=\"handleFieldKeyDown($event, field)\">\n          <div class=\"ax-flex ax-items-end ax-gap-2\">\n            <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n            {{ field.title | translate | async }}\n          </div>\n        </div>\n        }\n      </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>", styles: ["axp-query-filters{width:100%}axp-query-filters ax-tag-box .ax-editor-container{background-color:transparent}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}.axp-list-items>div.axp-query-filters__advance-item--disabled{cursor:not-allowed;opacity:.5}.axp-list-items>div.axp-query-filters__advance-item--disabled.axp-state-focused,.axp-list-items>div.axp-query-filters__advance-item--disabled:hover{background-color:transparent}\n"] }]
         }], propDecorators: { filtersDefinitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersDefinitions", required: false }] }], initialFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFilters", required: false }] }], onFiltersChanged: [{ type: i0.Output, args: ["onFiltersChanged"] }], tagBox: [{ type: i0.ViewChild, args: ['tagBox', { isSignal: true }] }], widgetRenderer: [{ type: i0.ViewChild, args: ['widgetRenderer', { isSignal: true }] }], listItems: [{
                 type: ViewChildren,
                 args: ['caseItem']
@@ -4738,7 +4757,7 @@ class AXPItemConfiguratorComponent {
         return action.disabled === true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPItemConfiguratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPItemConfiguratorComponent, isStandalone: true, selector: "axp-item-configurator", inputs: { selectedItemId: { classPropertyName: "selectedItemId", publicName: "selectedItemId", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, headerActions: { classPropertyName: "headerActions", publicName: "headerActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedItemId: "selectedItemIdChange", values: "valuesChange" }, viewQueries: [{ propertyName: "itemSelectBox", first: true, predicate: ["itemSelectBox"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Item selector & info container -->\n<div class=\"__item-container\">\n  @if (isEditMode()) {\n  <div class=\"__item-selector\">\n    <ax-select-box #itemSelectBox [ngModel]=\"selectedItemId()\" [dataSource]=\"availableItems()\"\n      [placeholder]=\"('@general:actions.select.title' | translate | async) ?? ''\" [readonly]=\"readonly()\"\n      (onValueChanged)=\"onSelectionChange($event)\" valueField=\"value\" textField=\"text\" [itemTemplate]=\"itemTemplate\"\n      [selectedTemplate]=\"selectedTemplate\" (onClosed)=\"exitEditMode()\">\n      <ax-search-box></ax-search-box>\n      <ax-clear-button></ax-clear-button>\n    </ax-select-box>\n  </div>\n  }\n\n  @if (!isEditMode()) {\n  @if (selectedItemId() && currentItemConfig(); as config) {\n  <div class=\"__item-info\">\n    <div class=\"__item-header\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\n      <div>\n        @if (config.icon) {\n        <i [class]=\"config.icon\"></i>\n        }\n        <div>\n          <span>\n            {{ config.title | translate | async }}\n          </span>\n          @if (config.description) {\n          <p>\n            {{ (config.description | translate | async) ?? '' }}\n          </p>\n          }\n        </div>\n      </div>\n\n      <div class=\"__action-buttons\" (click)=\"$event.stopPropagation()\">\n        @if (config.hasProperties) {\n        <ax-button [disabled]=\"!canConfigure() || readonly()\"\n          [title]=\"('@general:actions.configure.title' | translate | async) ?? ''\" look=\"blank\"\n          [color]=\"isConfigured() ? 'primary' : 'default'\" size=\"sm\" (onClick)=\"openConfigureDialog()\">\n          <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n        </ax-button>\n        }\n        @for (action of visibleHeaderActions(); track action.name ?? $index) {\n        <ax-button look=\"blank\" size=\"sm\" [color]=\"action.color ?? 'default'\"\n          [disabled]=\"readonly() || isHeaderActionDisabled(action)\" [title]=\"(action.title | translate | async) ?? ''\"\n          [class.ax-icon-only]=\"action.iconOnly === true\" (onClick)=\"onHeaderActionClick(action)\">\n          @if (action.icon) {\n          <ax-icon [icon]=\"action.icon\"></ax-icon>\n          }\n          @if (action.iconOnly !== true) {\n          <span>{{ (action.title | translate | async) ?? '' }}</span>\n          }\n        </ax-button>\n        }\n      </div>\n    </div>\n  </div>\n  } @else {\n  <div class=\"__item-empty\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\n    <i class=\"fa-solid fa-puzzle-piece\"></i>\n    <span>\n      {{ ('@general:widgets.widget-configurator.select-widget-type' | translate | async) ?? 'Select an item type' }}\n    </span>\n  </div>\n  }\n  }\n\n  <ng-template #itemTemplate let-context>\n    @let item = context.data;\n    <div class=\"__item-template ax-flex ax-w-full ax-items-center ax-gap-3 ax-p-2\">\n      @if (item.icon) {\n      <i [class]=\"item.icon + ' ax-text-base ax-w-5 ax-text-center'\"></i>\n      }\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-flex-1 ax-min-w-0\">\n        <div class=\"ax-text-sm ax-font-medium\">\n          {{ item.text | translate | async }}\n        </div>\n        @if (item.description) {\n        <div class=\"ax-text-xs ax-text-neutral-600\">\n          {{ item.description | translate | async }}\n        </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #selectedTemplate let-item>\n    <div class=\"__selected-template\">\n      @if (item?.data?.icon) {\n      <i [class]=\"item.data.icon\"></i>\n      }\n      <span>\n        {{ item?.data?.text | translate | async }}\n      </span>\n    </div>\n  </ng-template>\n</div>", styles: ["axp-item-configurator{display:flex;flex-direction:column}axp-item-configurator .__item-selector{display:flex;flex-direction:column}axp-item-configurator .__item-selector ax-select-box{width:100%}axp-item-configurator .__item-info{display:flex;flex-direction:column;gap:.75rem}axp-item-configurator .__item-info .__item-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.375rem .5rem}axp-item-configurator .__item-info .__item-header.__editable{cursor:pointer}axp-item-configurator .__item-info .__item-header.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}axp-item-configurator .__item-info .__item-header:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-info .__item-header>div:first-child{display:flex;flex:1 1 0%;align-items:center;gap:.5rem}axp-item-configurator .__item-info .__item-header>div:first-child i{font-size:1rem;line-height:1.5rem;flex-shrink:0}axp-item-configurator .__item-info .__item-header>div:first-child>div{display:flex;flex:1 1 0%;flex-direction:column;gap:.125rem}axp-item-configurator .__item-info .__item-header>div:first-child>div>span{font-size:.875rem;line-height:1.25rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__item-info .__item-header>div:first-child>div>p{margin:0;font-size:.75rem;line-height:1rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-info .__action-buttons{display:flex;align-items:center;gap:.25rem;flex-shrink:0}axp-item-configurator .__item-empty{display:flex;align-items:center;gap:.5rem;padding:.5rem}axp-item-configurator .__item-empty.__editable{cursor:pointer}axp-item-configurator .__item-empty.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}axp-item-configurator .__item-empty:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-empty>i{font-size:1rem;line-height:1.5rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-empty>span{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-template>i{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}axp-item-configurator .__item-template>div>div:first-child{flex-shrink:0}axp-item-configurator .__item-template>div>div:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__selected-template{display:flex;align-items:center;gap:.5rem}axp-item-configurator .__selected-template>i{font-size:.875rem;line-height:1.25rem}axp-item-configurator .__selected-template>span{font-size:.875rem;line-height:1.25rem;font-weight:500}axp-item-configurator :host([readonly]){pointer-events:none;opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i2$5.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPItemConfiguratorComponent, isStandalone: true, selector: "axp-item-configurator", inputs: { selectedItemId: { classPropertyName: "selectedItemId", publicName: "selectedItemId", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, headerActions: { classPropertyName: "headerActions", publicName: "headerActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedItemId: "selectedItemIdChange", values: "valuesChange" }, viewQueries: [{ propertyName: "itemSelectBox", first: true, predicate: ["itemSelectBox"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Item selector & info container -->\n<div class=\"__item-container\">\n  @if (isEditMode()) {\n  <div class=\"__item-selector\">\n    <ax-select-box #itemSelectBox [ngModel]=\"selectedItemId()\" [dataSource]=\"availableItems()\"\n      [placeholder]=\"('@general:actions.select.title' | translate | async) ?? ''\" [readonly]=\"readonly()\"\n      (onValueChanged)=\"onSelectionChange($event)\" valueField=\"value\" textField=\"text\" [itemTemplate]=\"itemTemplate\"\n      [itemHeight]=\"72\" [selectedTemplate]=\"selectedTemplate\" (onClosed)=\"exitEditMode()\">\n      <ax-search-box></ax-search-box>\n      <ax-clear-button></ax-clear-button>\n    </ax-select-box>\n  </div>\n  }\n\n  @if (!isEditMode()) {\n  @if (selectedItemId() && currentItemConfig(); as config) {\n  <div class=\"__item-info\">\n    <div class=\"__item-header\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\n      <div>\n        @if (config.icon) {\n        <i [class]=\"config.icon\"></i>\n        }\n        <div>\n          <span>\n            {{ config.title | translate | async }}\n          </span>\n          @if (config.description) {\n          <p>\n            {{ (config.description | translate | async) ?? '' }}\n          </p>\n          }\n        </div>\n      </div>\n\n      <div class=\"__action-buttons\" (click)=\"$event.stopPropagation()\">\n        @if (config.hasProperties) {\n        <ax-button [disabled]=\"!canConfigure() || readonly()\"\n          [title]=\"('@general:actions.configure.title' | translate | async) ?? ''\" look=\"blank\"\n          [color]=\"isConfigured() ? 'primary' : 'default'\" size=\"sm\" (onClick)=\"openConfigureDialog()\">\n          <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n        </ax-button>\n        }\n        @for (action of visibleHeaderActions(); track action.name ?? $index) {\n        <ax-button look=\"blank\" size=\"sm\" [color]=\"action.color ?? 'default'\"\n          [disabled]=\"readonly() || isHeaderActionDisabled(action)\" [title]=\"(action.title | translate | async) ?? ''\"\n          [class.ax-icon-only]=\"action.iconOnly === true\" (onClick)=\"onHeaderActionClick(action)\">\n          @if (action.icon) {\n          <ax-icon [icon]=\"action.icon\"></ax-icon>\n          }\n          @if (action.iconOnly !== true) {\n          <span>{{ (action.title | translate | async) ?? '' }}</span>\n          }\n        </ax-button>\n        }\n      </div>\n    </div>\n  </div>\n  } @else {\n  <div class=\"__item-empty\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\n    <i class=\"fa-solid fa-puzzle-piece\"></i>\n    <span>\n      {{ ('@general:widgets.widget-configurator.select-widget-type' | translate | async) ?? 'Select an item type' }}\n    </span>\n  </div>\n  }\n  }\n\n  <ng-template #itemTemplate let-context>\n    @let item = context.data;\n    <div class=\"__item-template ax-flex ax-w-full ax-items-center ax-gap-3 ax-p-2\">\n      @if (item.icon) {\n      <i [class]=\"item.icon + ' ax-text-base ax-w-5 ax-text-center'\"></i>\n      }\n      <div class=\"ax-flex ax-flex-col ax-gap-1 ax-flex-1 ax-min-w-0\">\n        <div class=\"ax-text-sm ax-font-medium\">\n          {{ item.text | translate | async }}\n        </div>\n        @if (item.description) {\n        <div class=\"ax-text-xs ax-text-neutral-600\">\n          {{ item.description | translate | async }}\n        </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #selectedTemplate let-item>\n    <div class=\"__selected-template\">\n      @if (item?.data?.icon) {\n      <i [class]=\"item.data.icon\"></i>\n      }\n      <span>\n        {{ item?.data?.text | translate | async }}\n      </span>\n    </div>\n  </ng-template>\n</div>", styles: ["axp-item-configurator{display:flex;flex-direction:column}axp-item-configurator .__item-selector{display:flex;flex-direction:column}axp-item-configurator .__item-selector ax-select-box{width:100%}axp-item-configurator .__item-info{display:flex;flex-direction:column;gap:.75rem}axp-item-configurator .__item-info .__item-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.375rem .5rem}axp-item-configurator .__item-info .__item-header.__editable{cursor:pointer}axp-item-configurator .__item-info .__item-header.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}axp-item-configurator .__item-info .__item-header:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-info .__item-header>div:first-child{display:flex;flex:1 1 0%;align-items:center;gap:.5rem}axp-item-configurator .__item-info .__item-header>div:first-child i{font-size:1rem;line-height:1.5rem;flex-shrink:0}axp-item-configurator .__item-info .__item-header>div:first-child>div{display:flex;flex:1 1 0%;flex-direction:column;gap:.125rem}axp-item-configurator .__item-info .__item-header>div:first-child>div>span{font-size:.875rem;line-height:1.25rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__item-info .__item-header>div:first-child>div>p{margin:0;font-size:.75rem;line-height:1rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-info .__action-buttons{display:flex;align-items:center;gap:.25rem;flex-shrink:0}axp-item-configurator .__item-empty{display:flex;align-items:center;gap:.5rem;padding:.5rem}axp-item-configurator .__item-empty.__editable{cursor:pointer}axp-item-configurator .__item-empty.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}axp-item-configurator .__item-empty:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-empty>i{font-size:1rem;line-height:1.5rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-empty>span{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-template>i{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}axp-item-configurator .__item-template>div>div:first-child{flex-shrink:0}axp-item-configurator .__item-template>div>div:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__selected-template{display:flex;align-items:center;gap:.5rem}axp-item-configurator .__selected-template>i{font-size:.875rem;line-height:1.25rem}axp-item-configurator .__selected-template>span{font-size:.875rem;line-height:1.25rem;font-weight:500}axp-item-configurator :host([readonly]){pointer-events:none;opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i2$5.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPItemConfiguratorComponent, decorators: [{
             type: Component,
@@ -4751,7 +4770,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         AXDecoratorModule,
                         AXTranslationModule,
                         AXSearchBoxModule,
-                    ], template: "<!-- Item selector & info container -->\n<div class=\"__item-container\">\n  @if (isEditMode()) {\n  <div class=\"__item-selector\">\n    <ax-select-box #itemSelectBox [ngModel]=\"selectedItemId()\" [dataSource]=\"availableItems()\"\n      [placeholder]=\"('@general:actions.select.title' | translate | async) ?? ''\" [readonly]=\"readonly()\"\n      (onValueChanged)=\"onSelectionChange($event)\" valueField=\"value\" textField=\"text\" [itemTemplate]=\"itemTemplate\"\n      [selectedTemplate]=\"selectedTemplate\" (onClosed)=\"exitEditMode()\">\n      <ax-search-box></ax-search-box>\n      <ax-clear-button></ax-clear-button>\n    </ax-select-box>\n  </div>\n  }\n\n  @if (!isEditMode()) {\n  @if (selectedItemId() && currentItemConfig(); as config) {\n  <div class=\"__item-info\">\n    <div class=\"__item-header\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\n      <div>\n        @if (config.icon) {\n        <i [class]=\"config.icon\"></i>\n        }\n        <div>\n          <span>\n            {{ config.title | translate | async }}\n          </span>\n          @if (config.description) {\n          <p>\n            {{ (config.description | translate | async) ?? '' }}\n          </p>\n          }\n        </div>\n      </div>\n\n      <div class=\"__action-buttons\" (click)=\"$event.stopPropagation()\">\n        @if (config.hasProperties) {\n        <ax-button [disabled]=\"!canConfigure() || readonly()\"\n          [title]=\"('@general:actions.configure.title' | translate | async) ?? ''\" look=\"blank\"\n          [color]=\"isConfigured() ? 'primary' : 'default'\" size=\"sm\" (onClick)=\"openConfigureDialog()\">\n          <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n        </ax-button>\n        }\n        @for (action of visibleHeaderActions(); track action.name ?? $index) {\n        <ax-button look=\"blank\" size=\"sm\" [color]=\"action.color ?? 'default'\"\n          [disabled]=\"readonly() || isHeaderActionDisabled(action)\" [title]=\"(action.title | translate | async) ?? ''\"\n          [class.ax-icon-only]=\"action.iconOnly === true\" (onClick)=\"onHeaderActionClick(action)\">\n          @if (action.icon) {\n          <ax-icon [icon]=\"action.icon\"></ax-icon>\n          }\n          @if (action.iconOnly !== true) {\n          <span>{{ (action.title | translate | async) ?? '' }}</span>\n          }\n        </ax-button>\n        }\n      </div>\n    </div>\n  </div>\n  } @else {\n  <div class=\"__item-empty\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\n    <i class=\"fa-solid fa-puzzle-piece\"></i>\n    <span>\n      {{ ('@general:widgets.widget-configurator.select-widget-type' | translate | async) ?? 'Select an item type' }}\n    </span>\n  </div>\n  }\n  }\n\n  <ng-template #itemTemplate let-context>\n    @let item = context.data;\n    <div class=\"__item-template ax-flex ax-w-full ax-items-center ax-gap-3 ax-p-2\">\n      @if (item.icon) {\n      <i [class]=\"item.icon + ' ax-text-base ax-w-5 ax-text-center'\"></i>\n      }\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-flex-1 ax-min-w-0\">\n        <div class=\"ax-text-sm ax-font-medium\">\n          {{ item.text | translate | async }}\n        </div>\n        @if (item.description) {\n        <div class=\"ax-text-xs ax-text-neutral-600\">\n          {{ item.description | translate | async }}\n        </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #selectedTemplate let-item>\n    <div class=\"__selected-template\">\n      @if (item?.data?.icon) {\n      <i [class]=\"item.data.icon\"></i>\n      }\n      <span>\n        {{ item?.data?.text | translate | async }}\n      </span>\n    </div>\n  </ng-template>\n</div>", styles: ["axp-item-configurator{display:flex;flex-direction:column}axp-item-configurator .__item-selector{display:flex;flex-direction:column}axp-item-configurator .__item-selector ax-select-box{width:100%}axp-item-configurator .__item-info{display:flex;flex-direction:column;gap:.75rem}axp-item-configurator .__item-info .__item-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.375rem .5rem}axp-item-configurator .__item-info .__item-header.__editable{cursor:pointer}axp-item-configurator .__item-info .__item-header.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}axp-item-configurator .__item-info .__item-header:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-info .__item-header>div:first-child{display:flex;flex:1 1 0%;align-items:center;gap:.5rem}axp-item-configurator .__item-info .__item-header>div:first-child i{font-size:1rem;line-height:1.5rem;flex-shrink:0}axp-item-configurator .__item-info .__item-header>div:first-child>div{display:flex;flex:1 1 0%;flex-direction:column;gap:.125rem}axp-item-configurator .__item-info .__item-header>div:first-child>div>span{font-size:.875rem;line-height:1.25rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__item-info .__item-header>div:first-child>div>p{margin:0;font-size:.75rem;line-height:1rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-info .__action-buttons{display:flex;align-items:center;gap:.25rem;flex-shrink:0}axp-item-configurator .__item-empty{display:flex;align-items:center;gap:.5rem;padding:.5rem}axp-item-configurator .__item-empty.__editable{cursor:pointer}axp-item-configurator .__item-empty.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}axp-item-configurator .__item-empty:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-empty>i{font-size:1rem;line-height:1.5rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-empty>span{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-template>i{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}axp-item-configurator .__item-template>div>div:first-child{flex-shrink:0}axp-item-configurator .__item-template>div>div:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__selected-template{display:flex;align-items:center;gap:.5rem}axp-item-configurator .__selected-template>i{font-size:.875rem;line-height:1.25rem}axp-item-configurator .__selected-template>span{font-size:.875rem;line-height:1.25rem;font-weight:500}axp-item-configurator :host([readonly]){pointer-events:none;opacity:.7}\n"] }]
+                    ], template: "<!-- Item selector & info container -->\n<div class=\"__item-container\">\n  @if (isEditMode()) {\n  <div class=\"__item-selector\">\n    <ax-select-box #itemSelectBox [ngModel]=\"selectedItemId()\" [dataSource]=\"availableItems()\"\n      [placeholder]=\"('@general:actions.select.title' | translate | async) ?? ''\" [readonly]=\"readonly()\"\n      (onValueChanged)=\"onSelectionChange($event)\" valueField=\"value\" textField=\"text\" [itemTemplate]=\"itemTemplate\"\n      [itemHeight]=\"72\" [selectedTemplate]=\"selectedTemplate\" (onClosed)=\"exitEditMode()\">\n      <ax-search-box></ax-search-box>\n      <ax-clear-button></ax-clear-button>\n    </ax-select-box>\n  </div>\n  }\n\n  @if (!isEditMode()) {\n  @if (selectedItemId() && currentItemConfig(); as config) {\n  <div class=\"__item-info\">\n    <div class=\"__item-header\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\n      <div>\n        @if (config.icon) {\n        <i [class]=\"config.icon\"></i>\n        }\n        <div>\n          <span>\n            {{ config.title | translate | async }}\n          </span>\n          @if (config.description) {\n          <p>\n            {{ (config.description | translate | async) ?? '' }}\n          </p>\n          }\n        </div>\n      </div>\n\n      <div class=\"__action-buttons\" (click)=\"$event.stopPropagation()\">\n        @if (config.hasProperties) {\n        <ax-button [disabled]=\"!canConfigure() || readonly()\"\n          [title]=\"('@general:actions.configure.title' | translate | async) ?? ''\" look=\"blank\"\n          [color]=\"isConfigured() ? 'primary' : 'default'\" size=\"sm\" (onClick)=\"openConfigureDialog()\">\n          <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n        </ax-button>\n        }\n        @for (action of visibleHeaderActions(); track action.name ?? $index) {\n        <ax-button look=\"blank\" size=\"sm\" [color]=\"action.color ?? 'default'\"\n          [disabled]=\"readonly() || isHeaderActionDisabled(action)\" [title]=\"(action.title | translate | async) ?? ''\"\n          [class.ax-icon-only]=\"action.iconOnly === true\" (onClick)=\"onHeaderActionClick(action)\">\n          @if (action.icon) {\n          <ax-icon [icon]=\"action.icon\"></ax-icon>\n          }\n          @if (action.iconOnly !== true) {\n          <span>{{ (action.title | translate | async) ?? '' }}</span>\n          }\n        </ax-button>\n        }\n      </div>\n    </div>\n  </div>\n  } @else {\n  <div class=\"__item-empty\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\n    <i class=\"fa-solid fa-puzzle-piece\"></i>\n    <span>\n      {{ ('@general:widgets.widget-configurator.select-widget-type' | translate | async) ?? 'Select an item type' }}\n    </span>\n  </div>\n  }\n  }\n\n  <ng-template #itemTemplate let-context>\n    @let item = context.data;\n    <div class=\"__item-template ax-flex ax-w-full ax-items-center ax-gap-3 ax-p-2\">\n      @if (item.icon) {\n      <i [class]=\"item.icon + ' ax-text-base ax-w-5 ax-text-center'\"></i>\n      }\n      <div class=\"ax-flex ax-flex-col ax-gap-1 ax-flex-1 ax-min-w-0\">\n        <div class=\"ax-text-sm ax-font-medium\">\n          {{ item.text | translate | async }}\n        </div>\n        @if (item.description) {\n        <div class=\"ax-text-xs ax-text-neutral-600\">\n          {{ item.description | translate | async }}\n        </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #selectedTemplate let-item>\n    <div class=\"__selected-template\">\n      @if (item?.data?.icon) {\n      <i [class]=\"item.data.icon\"></i>\n      }\n      <span>\n        {{ item?.data?.text | translate | async }}\n      </span>\n    </div>\n  </ng-template>\n</div>", styles: ["axp-item-configurator{display:flex;flex-direction:column}axp-item-configurator .__item-selector{display:flex;flex-direction:column}axp-item-configurator .__item-selector ax-select-box{width:100%}axp-item-configurator .__item-info{display:flex;flex-direction:column;gap:.75rem}axp-item-configurator .__item-info .__item-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.375rem .5rem}axp-item-configurator .__item-info .__item-header.__editable{cursor:pointer}axp-item-configurator .__item-info .__item-header.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}axp-item-configurator .__item-info .__item-header:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-info .__item-header>div:first-child{display:flex;flex:1 1 0%;align-items:center;gap:.5rem}axp-item-configurator .__item-info .__item-header>div:first-child i{font-size:1rem;line-height:1.5rem;flex-shrink:0}axp-item-configurator .__item-info .__item-header>div:first-child>div{display:flex;flex:1 1 0%;flex-direction:column;gap:.125rem}axp-item-configurator .__item-info .__item-header>div:first-child>div>span{font-size:.875rem;line-height:1.25rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__item-info .__item-header>div:first-child>div>p{margin:0;font-size:.75rem;line-height:1rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-info .__action-buttons{display:flex;align-items:center;gap:.25rem;flex-shrink:0}axp-item-configurator .__item-empty{display:flex;align-items:center;gap:.5rem;padding:.5rem}axp-item-configurator .__item-empty.__editable{cursor:pointer}axp-item-configurator .__item-empty.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}axp-item-configurator .__item-empty:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-empty>i{font-size:1rem;line-height:1.5rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-empty>span{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-template>i{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}axp-item-configurator .__item-template>div>div:first-child{flex-shrink:0}axp-item-configurator .__item-template>div>div:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__selected-template{display:flex;align-items:center;gap:.5rem}axp-item-configurator .__selected-template>i{font-size:.875rem;line-height:1.25rem}axp-item-configurator .__selected-template>span{font-size:.875rem;line-height:1.25rem;font-weight:500}axp-item-configurator :host([readonly]){pointer-events:none;opacity:.7}\n"] }]
         }], ctorParameters: () => [], propDecorators: { selectedItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemId", required: false }] }, { type: i0.Output, args: ["selectedItemIdChange"] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], headerActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerActions", required: false }] }], itemSelectBox: [{ type: i0.ViewChild, args: ['itemSelectBox', { isSignal: true }] }] } });
 //#region ----   Helpers   ----
 function isPropertyDefinitionArray(value) {
@@ -4883,71 +4902,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 
 class AXPLogoComponent {
     constructor() {
-        this.isCompactLogo = false;
-        this.compactLogoSize = 32;
-        this.platform = inject(AXPlatform);
+        //#region ---- Inputs ----
+        this.source = input(...(ngDevMode ? [undefined, { debugName: "source" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ---- Services & Dependencies ----
         this.themeStore = inject(AXPLayoutThemeService);
         this.platformConfig = inject(AXP_PLATFORM_CONFIG_TOKEN);
-        this.cdr = inject(ChangeDetectorRef);
-        effect(() => {
-            this.themeStore.menuVerticalMode();
-            this.updateActiveSource();
-        });
-    }
-    ngOnInit() {
-        this.platform.themeMode$.subscribe(() => {
-            this.updateActiveSource();
-        });
-    }
-    ngOnChanges() {
-        this.inputSource = this.source;
-        this.updateActiveSource();
-    }
-    updateActiveSource() {
-        const compactIcon = this.themeStore.menuVerticalMode() === AXPMenuVerticalMode.Compact
-            ? this.platformConfig.logo?.icon
-            : undefined;
-        if (compactIcon?.dark) {
-            this.activeSource = compactIcon.dark;
-        }
-        else if (compactIcon) {
-            this.activeSource = compactIcon.light;
-        }
-        else if (this.inputSource?.dark && this.inputSource?.light) {
-            this.activeSource = this.platform.isDark() ? this.inputSource.dark : this.inputSource.light;
-        }
-        else {
-            this.activeSource = this.inputSource;
-        }
-        this.isCompactLogo =
-            this.themeStore.menuVerticalMode() === AXPMenuVerticalMode.Compact && !!compactIcon;
-        this.setLogoType();
-        this.cdr.markForCheck();
-    }
-    setLogoType() {
-        switch (true) {
-            case this.activeSource instanceof AXPImageUrlLogoConfig:
-                this.logoType = 'url';
-                break;
-            case this.activeSource instanceof AXPComponentLogoConfig:
-                this.logoType = 'component';
-                break;
-            case this.activeSource instanceof AXPIconLogoConfig:
-                this.logoType = 'icon';
-                break;
-            default:
-                break;
-        }
+        this.deviceService = inject(AXPDeviceService);
+        //#endregion
+        //#region ---- Computed Properties ----
+        this.compactLogoSize = 32;
+        /**
+         * Resolves menu mode with mobile overlay viewports forcing full logo display.
+         */
+        this.resolvedMenuMode = computed(() => {
+            this.deviceService.screenSize();
+            if (!this.deviceService.isLarge()) {
+                return AXPMenuVerticalMode.Full;
+            }
+            return this.themeStore.effectiveMenuVerticalMode();
+        }, ...(ngDevMode ? [{ debugName: "resolvedMenuMode" }] : /* istanbul ignore next */ []));
+        this.activeSource = computed(() => {
+            this.themeStore.isDarkMode();
+            const inputSource = this.source();
+            const compactIcon = this.resolvedMenuMode() === AXPMenuVerticalMode.Compact
+                ? this.platformConfig.logo?.icon
+                : undefined;
+            if (compactIcon?.dark) {
+                return compactIcon.dark;
+            }
+            if (compactIcon) {
+                return compactIcon.light;
+            }
+            if (inputSource?.dark && inputSource?.light) {
+                return this.themeStore.isDarkMode() ? inputSource.dark : inputSource.light;
+            }
+            return inputSource;
+        }, ...(ngDevMode ? [{ debugName: "activeSource" }] : /* istanbul ignore next */ []));
+        this.isCompactLogo = computed(() => this.resolvedMenuMode() === AXPMenuVerticalMode.Compact &&
+            !!this.platformConfig.logo?.icon, ...(ngDevMode ? [{ debugName: "isCompactLogo" }] : /* istanbul ignore next */ []));
+        this.logoType = computed(() => {
+            const activeSource = this.activeSource();
+            if (activeSource instanceof AXPImageUrlLogoConfig) {
+                return 'url';
+            }
+            if (activeSource instanceof AXPComponentLogoConfig) {
+                return 'component';
+            }
+            if (activeSource instanceof AXPIconLogoConfig) {
+                return 'icon';
+            }
+            return undefined;
+        }, ...(ngDevMode ? [{ debugName: "logoType" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPLogoComponent, isStandalone: true, selector: "axp-logo", inputs: { source: "source" }, host: { classAttribute: "ax-flex ax-justify-center" }, usesOnChanges: true, ngImport: i0, template: "@switch (logoType) {\n  @case ('url') {\n    <ax-image\n      [width]=\"isCompactLogo ? compactLogoSize : activeSource.width\"\n      [height]=\"isCompactLogo ? compactLogoSize : activeSource.height\"\n      [src]=\"activeSource.url\"\n    ></ax-image>\n  }\n  @case ('component') {\n    <ng-container *ngComponentOutlet=\"activeSource.component\"></ng-container>\n  }\n  @case ('icon') {\n    <i [class]=\"activeSource.icon\" [style.color]=\"activeSource.color\"></i>\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i3$1.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXDecoratorModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPLogoComponent, isStandalone: true, selector: "axp-logo", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ax-flex ax-justify-center" }, ngImport: i0, template: "@switch (logoType()) {\n  @case ('url') {\n    @let logo = activeSource();\n    <ax-image\n      [width]=\"isCompactLogo() ? compactLogoSize : logo?.width\"\n      [height]=\"isCompactLogo() ? compactLogoSize : logo?.height\"\n      [src]=\"logo?.url\"\n    ></ax-image>\n  }\n  @case ('component') {\n    <ng-container *ngComponentOutlet=\"activeSource()?.component\"></ng-container>\n  }\n  @case ('icon') {\n    @let logo = activeSource();\n    <i [class]=\"logo?.icon\" [style.color]=\"logo?.color\"></i>\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i3$1.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXDecoratorModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLogoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-logo', imports: [CommonModule, AXImageModule, AXDecoratorModule], host: { class: 'ax-flex ax-justify-center' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (logoType) {\n  @case ('url') {\n    <ax-image\n      [width]=\"isCompactLogo ? compactLogoSize : activeSource.width\"\n      [height]=\"isCompactLogo ? compactLogoSize : activeSource.height\"\n      [src]=\"activeSource.url\"\n    ></ax-image>\n  }\n  @case ('component') {\n    <ng-container *ngComponentOutlet=\"activeSource.component\"></ng-container>\n  }\n  @case ('icon') {\n    <i [class]=\"activeSource.icon\" [style.color]=\"activeSource.color\"></i>\n  }\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { source: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'axp-logo', imports: [CommonModule, AXImageModule, AXDecoratorModule], host: { class: 'ax-flex ax-justify-center' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (logoType()) {\n  @case ('url') {\n    @let logo = activeSource();\n    <ax-image\n      [width]=\"isCompactLogo() ? compactLogoSize : logo?.width\"\n      [height]=\"isCompactLogo() ? compactLogoSize : logo?.height\"\n      [src]=\"logo?.url\"\n    ></ax-image>\n  }\n  @case ('component') {\n    <ng-container *ngComponentOutlet=\"activeSource()?.component\"></ng-container>\n  }\n  @case ('icon') {\n    @let logo = activeSource();\n    <i [class]=\"logo?.icon\" [style.color]=\"logo?.color\"></i>\n  }\n}\n" }]
+        }], propDecorators: { source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }] } });
 
 //#endregion
 //#region ---- Template Directives ----
@@ -6724,7 +6738,9 @@ class AXPQuerySortsComponent {
         });
     }
     emitActiveSortQueries() {
-        this.sortQueriesChange.emit(this.sortQueries().filter((q) => q.dir !== undefined));
+        this.sortQueriesChange.emit(this.sortQueries()
+            .filter((q) => q.dir !== undefined)
+            .map((q) => ({ name: q.name, dir: q.dir })));
     }
     drop(event) {
         const sq = [...this.sortQueries()];