@acorex/platform 21.0.0-next.39 → 21.0.0-next.40

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

@@ -3333,23 +3333,25 @@ class AXPQueryFiltersComponent {
     getFilterEventScope() {
         return {
             context: (...args) => {
-                const path = args[0];
+                const paths = args.filter((arg) => typeof arg === 'string' && arg.trim().length > 0);
                 return this.filterContextPath$.pipe(filter((e) => {
-                    if (path == null || path === '') {
+                    if (paths.length === 0) {
                         return true;
                     }
                     if (!e.path) {
                         return false;
                     }
-                    if (path.endsWith('*')) {
-                        const prefix = path.substring(0, path.length - 1);
-                        return e.path.startsWith(prefix);
-                    }
-                    if (path.startsWith('*')) {
-                        const suffix = path.substring(1);
-                        return e.path.endsWith(suffix);
-                    }
-                    return e.path === path;
+                    return paths.some((path) => {
+                        if (path.endsWith('*')) {
+                            const prefix = path.substring(0, path.length - 1);
+                            return e.path.startsWith(prefix);
+                        }
+                        if (path.startsWith('*')) {
+                            const suffix = path.substring(1);
+                            return e.path.endsWith(suffix);
+                        }
+                        return e.path === path;
+                    });
                 }));
             },
         };
@@ -5337,6 +5339,16 @@ class AXPSpreadsheetComponent {
                 this.internalRows.set(rowsInput);
             }
         });
+        // Columns drive widget cache keys; when the column defs array is rebuilt, stale nodes keep old bindings.
+        let previousColumnsRef;
+        effect(() => {
+            const cols = this.columns();
+            if (previousColumnsRef !== undefined && previousColumnsRef !== cols) {
+                this.widgetNodeCache.clear();
+                this.cellValueCache.clear();
+            }
+            previousColumnsRef = cols;
+        });
     }
     //#endregion
     //#region ----   Cell Value Methods   ----
@@ -7098,7 +7110,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\n        #itemSelectBox\n        [ngModel]=\"selectedItemId()\"\n        [dataSource]=\"availableItems()\"\n        [placeholder]=\"('@general:actions.select.title' | translate | async) ?? ''\"\n        [readonly]=\"readonly()\"\n        (onValueChanged)=\"onSelectionChange($event)\"\n        valueField=\"value\"\n        textField=\"text\"\n        [itemTemplate]=\"itemTemplate\"\n        [selectedTemplate]=\"selectedTemplate\"\n        (onClosed)=\"exitEditMode()\"\n      >\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 }}\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\n                [disabled]=\"!canConfigure() || readonly()\"\n                [title]=\"('@general:actions.configure.title' | translate | async) ?? ''\"\n                look=\"blank\"\n                [color]=\"isConfigured() ? 'primary' : 'default'\"\n                size=\"sm\"\n                (onClick)=\"openConfigureDialog()\"\n              >\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\n                look=\"blank\"\n                size=\"sm\"\n                [color]=\"action.color ?? 'default'\"\n                [disabled]=\"readonly() || isHeaderActionDisabled(action)\"\n                [title]=\"(action.title | translate | async) ?? ''\"\n                [class.ax-icon-only]=\"action.iconOnly === true\"\n                (onClick)=\"onHeaderActionClick(action)\"\n              >\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\n        <!-- @if (!config.hasProperties) {\n    <axp-state-message mode=\"info\" icon=\"fa-solid fa-info-circle\"\n      [description]=\"'@general:widgets.widget-configurator.no-configuration-needed'\" variant=\"compact\">\n    </axp-state-message>\n    } -->\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 }}\n        </div>\n        @if (item.description) {\n          <div class=\"ax-text-xs ax-text-neutral-600\">\n            {{ item.description }}\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 }}\n      </span>\n    </div>\n  </ng-template>\n</div>\n", 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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.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$1.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      [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\n    <!-- @if (!config.hasProperties) {\n    <axp-state-message mode=\"info\" icon=\"fa-solid fa-info-circle\"\n      [description]=\"'@general:widgets.widget-configurator.no-configuration-needed'\" variant=\"compact\">\n    </axp-state-message>\n    } -->\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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.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$1.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,
@@ -7111,7 +7123,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\n        #itemSelectBox\n        [ngModel]=\"selectedItemId()\"\n        [dataSource]=\"availableItems()\"\n        [placeholder]=\"('@general:actions.select.title' | translate | async) ?? ''\"\n        [readonly]=\"readonly()\"\n        (onValueChanged)=\"onSelectionChange($event)\"\n        valueField=\"value\"\n        textField=\"text\"\n        [itemTemplate]=\"itemTemplate\"\n        [selectedTemplate]=\"selectedTemplate\"\n        (onClosed)=\"exitEditMode()\"\n      >\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 }}\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\n                [disabled]=\"!canConfigure() || readonly()\"\n                [title]=\"('@general:actions.configure.title' | translate | async) ?? ''\"\n                look=\"blank\"\n                [color]=\"isConfigured() ? 'primary' : 'default'\"\n                size=\"sm\"\n                (onClick)=\"openConfigureDialog()\"\n              >\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\n                look=\"blank\"\n                size=\"sm\"\n                [color]=\"action.color ?? 'default'\"\n                [disabled]=\"readonly() || isHeaderActionDisabled(action)\"\n                [title]=\"(action.title | translate | async) ?? ''\"\n                [class.ax-icon-only]=\"action.iconOnly === true\"\n                (onClick)=\"onHeaderActionClick(action)\"\n              >\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\n        <!-- @if (!config.hasProperties) {\n    <axp-state-message mode=\"info\" icon=\"fa-solid fa-info-circle\"\n      [description]=\"'@general:widgets.widget-configurator.no-configuration-needed'\" variant=\"compact\">\n    </axp-state-message>\n    } -->\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 }}\n        </div>\n        @if (item.description) {\n          <div class=\"ax-text-xs ax-text-neutral-600\">\n            {{ item.description }}\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 }}\n      </span>\n    </div>\n  </ng-template>\n</div>\n", 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      [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\n    <!-- @if (!config.hasProperties) {\n    <axp-state-message mode=\"info\" icon=\"fa-solid fa-info-circle\"\n      [description]=\"'@general:widgets.widget-configurator.no-configuration-needed'\" variant=\"compact\">\n    </axp-state-message>\n    } -->\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"] }]
         }], 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) {