@acorex-platform/framework-client 2.0.0-next.20 → 2.0.0-next.22

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

@@ -1,4 +1,4 @@
-import { AXPRegionalSetting, resolveActionLook, resolveToSurfaceClass, AXPWidgetsCatalog, createRandomUuid, omitFilterClauseIdentity, AXPPlatformScope, AXPFileStorageStatus, flattenQueryFilterUserGroups, hasQueryFilterGroupId, isCompleteFilterCondition, coerceFilterDisplayText, AXP_QUERY_QUICK_SEARCH_FIELD, wrapQueryFilterRoot, QUERY_FILTER_CHIP_EXPAND_MAX_CONDITIONS, AXPKeyboardShortcutPriority, runtimeQueryCollectionData, isQueryFilterAllNode, resolveQueryFilterGroupId, createQueryFilterGroupId, resolveQueryFilterConditionContextField, createQueryFilterConditionId, QUERY_FILTER_CONDITION_KEY_INFIX, compareMultiLanguageStrings, containsHtmlMarkup, isFormValueEqual, extractTextFromHtml, AXPWidgetsList, coerceUnknownToTrimmedString, AXP_PREVIEW_WIDGET_FIELD_COMMAND_KEY } from '@acorex-platform/framework-shared/core';
+import { AXPRegionalSetting, resolveActionLook, resolveToSurfaceClass, AXPWidgetsCatalog, createRandomUuid, omitFilterClauseIdentity, coerceFilterDisplayText, AXPPlatformScope, AXPFileStorageStatus, flattenQueryFilterUserGroups, hasQueryFilterGroupId, isCompleteFilterCondition, AXP_QUERY_QUICK_SEARCH_FIELD, wrapQueryFilterRoot, QUERY_FILTER_CHIP_EXPAND_MAX_CONDITIONS, AXPKeyboardShortcutPriority, runtimeQueryCollectionData, isQueryFilterAllNode, resolveQueryFilterGroupId, createQueryFilterGroupId, resolveQueryFilterConditionContextField, createQueryFilterConditionId, QUERY_FILTER_CONDITION_KEY_INFIX, compareMultiLanguageStrings, containsHtmlMarkup, isFormValueEqual, extractTextFromHtml, AXPWidgetsList, coerceUnknownToTrimmedString, AXP_PREVIEW_WIDGET_FIELD_COMMAND_KEY } from '@acorex-platform/framework-shared/core';
 import { AXLocaleService } from '@acorex/core/locale';
 import * as i1$2 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
@@ -3324,6 +3324,7 @@ class AXPConditionBuilderConditionComponent {
             operator: it?.operator?.type ?? 'equal',
             value: it?.value ?? undefined,
             isParametric: it?.isParametric ?? false,
+            displayText: coerceFilterDisplayText(it?.displayText),
         });
         this.updateFilterWidgetNode();
         this.updateContext();
@@ -3395,10 +3396,18 @@ class AXPConditionBuilderConditionComponent {
             const it = this.item();
             untracked(() => {
                 const prev = this.selectedField();
-                if (!it ||
-                    (it.field === prev?.field &&
-                        it.value === prev?.value &&
-                        (it.operator?.type ?? 'equal') === (prev?.operator ?? 'equal'))) {
+                if (!it) {
+                    return;
+                }
+                const displayText = coerceFilterDisplayText(it.displayText);
+                const sameLeaf = it.field === prev?.field &&
+                    sameStoredFilterValue(it.value, prev?.value) &&
+                    (it.operator?.type ?? 'equal') === (prev?.operator ?? 'equal');
+                if (sameLeaf && displayText === prev?.displayText) {
+                    return;
+                }
+                if (sameLeaf && prev) {
+                    this.selectedField.set({ ...prev, displayText });
                     return;
                 }
                 this.selectedField.set({
@@ -3407,6 +3416,7 @@ class AXPConditionBuilderConditionComponent {
                     operator: it.operator?.type ?? 'equal',
                     value: it.value ?? undefined,
                     isParametric: it?.isParametric ?? false,
+                    displayText,
                 });
                 this.updateFilterWidgetNode();
                 this.updateContext();
@@ -3476,6 +3486,7 @@ class AXPConditionBuilderConditionComponent {
             field: fieldId,
             operator: filterDef?.operator?.type ?? 'equal',
             value: undefined,
+            displayText: undefined,
             isParametric: prev?.isParametric ?? false,
         }));
         this.updateFilterWidgetNode();
@@ -3489,14 +3500,27 @@ class AXPConditionBuilderConditionComponent {
         if (event.state !== 'changed' || event.origin === 'system' || event.origin === 'hydrate') {
             return;
         }
-        const filterData = event.data?.filter;
-        if (!filterData)
+        const payload = readFilterWidgetPayload(event.data?.['filter']);
+        if (!payload) {
             return;
-        this.selectedField.update((prev) => ({
-            ...prev,
-            operator: filterData.operation?.type ?? prev?.operator ?? 'equal',
-            value: filterData.value,
-        }));
+        }
+        this.selectedField.update((prev) => {
+            const sameValue = sameStoredFilterValue(payload.value, prev?.value);
+            const displayText = payload.hasDisplayText
+                ? (payload.displayText ?? (sameValue ? prev?.displayText : undefined))
+                : sameValue
+                    ? prev?.displayText
+                    : undefined;
+            return {
+                ...prev,
+                id: prev?.id ?? '',
+                field: prev?.field ?? '',
+                operator: payload.operationType ?? prev?.operator ?? 'equal',
+                value: payload.value,
+                isParametric: prev?.isParametric ?? false,
+                displayText,
+            };
+        });
         this.updateContext();
         this.itemChange.emit(this.selectedField());
     }
@@ -3526,8 +3550,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXTranslationModule,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"__condition-row\" [class.__condition-row--comfortable]=\"!compact()\">\n  <div class=\"__item-content\">\n    <!-- Field Selector -->\n    <div class=\"__field-selector\">\n      <ax-lookup\n        mode=\"drop-down-list\"\n        [class.ax-sm]=\"compact()\"\n        [dataSource]=\"availableFields()\"\n        [ngModel]=\"selectedFieldValue()\"\n        (onValueChanged)=\"onFieldChange($event)\"\n        valueField=\"value\"\n        textField=\"text\"\n        [searchable]=\"false\"\n        [placeholder]=\"('@data-management:metadata-definitions.components.query-builder.condition.select-field' | translate | async) || 'Select a field'\"\n        [look]=\"'outline'\">\n      </ax-lookup>\n    </div>\n\n    <!-- Filter Widget (Operator + Value) -->\n    <div class=\"__operator-selector\">\n      @if (filterHostKeys().length) {\n        <!-- ----- Operator and value for the selected field ----- -->\n        @for (hostKey of filterHostKeys(); track hostKey) {\n          <axp-widgets-container\n            class=\"__filter-widget-container\"\n            [context]=\"context()\"\n            (onContextChanged)=\"onContextChange($event)\">\n            <ng-container axp-widget-renderer [node]=\"filterNode()\" [mode]=\"'edit'\">\n            </ng-container>\n          </axp-widgets-container>\n        }\n      }\n      <!-- ----- Prompt until a field is chosen ----- -->\n      @else {\n        <div class=\"__filter-placeholder\">\n          <span class=\"__placeholder-text\">{{\n            ('@data-management:metadata-definitions.components.query-builder.condition.select-field-first' | translate | async) || 'Select a field first'\n          }}</span>\n        </div>\n      }\n    </div>\n\n    <!-- Fill By User (optional) -->\n    @if (showFillByUser()) {\n      <div class=\"__fill-by-user\">\n        <ax-check-box\n          class=\"text-xs\"\n          [ngModel]=\"$safeNavigationMigration(selectedField()?.isParametric)\"\n          (ngModelChange)=\"onFillByUserChange($event)\">\n          <ax-label>\n            {{ '@data-management:metadata-definitions.components.query-builder.condition.fill-by-user' | translate | async }}\n          </ax-label>\n        </ax-check-box>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["@layer properties;.__condition-row{display:flex;width:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.__condition-row .__item-content{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3);display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.__condition-row .__item-content .__field-selector{min-width:0px}.__condition-row .__item-content .__field-selector ax-lookup{width:100%}.__condition-row .__item-content .__operator-selector{min-width:0px}.__condition-row .__item-content .__operator-selector .__filter-widget-container{width:100%}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep .axp-widgets-container{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-lookup{min-width:140px}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep axp-filter-operations.axp-filter-operations--select{min-width:9rem}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-text-box,.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-number-box,.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-date-time-box{flex:1}.__condition-row .__item-content .__operator-selector .__filter-placeholder{display:flex;align-items:center;justify-content:center;border-radius:.25rem;border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:calc(var(--spacing, .25rem) * 3);border-color:rgba(var(--ax-sys-color-border-lighter-surface),1);border-width:1px}.__condition-row .__item-content .__operator-selector .__filter-placeholder .__placeholder-text{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-500, oklch(55.6% 0 none));font-style:italic}.__condition-row .__item-content .__fill-by-user{grid-column:1 / -1}.__condition-row.__condition-row--comfortable .__field-selector ax-lookup,.__condition-row.__condition-row--comfortable .__filter-placeholder{min-height:var(--ax-sys-size-base, 2.5rem)}.__condition-row.__condition-row--comfortable .__filter-placeholder{justify-content:flex-start;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:0px}.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-text-box,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-number-box,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-date-time-box,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-lookup,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep .ax-editor-container{min-height:var(--ax-sys-size-base, 2.5rem)}@media(max-width:768px){.__condition-row{flex-direction:column;align-items:stretch}.__condition-row .__item-content{grid-template-columns:1fr}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], filterDefinitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterDefinitions", required: false }] }], onResolveWidget: [{ type: i0.Input, args: [{ isSignal: true, alias: "onResolveWidget", required: false }] }], showFillByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFillByUser", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], operationsLook: [{ type: i0.Input, args: [{ isSignal: true, alias: "operationsLook", required: false }] }], itemChange: [{ type: i0.Output, args: ["itemChange"] }], removeItem: [{ type: i0.Output, args: ["removeItem"] }] } });
-//#endregion
-//#region ----   Helpers   ----
+function readFilterWidgetPayload(raw) {
+    if (raw == null) {
+        return undefined;
+    }
+    if (typeof raw !== 'object' || Array.isArray(raw)) {
+        return { value: raw, hasDisplayText: false };
+    }
+    const record = raw;
+    if (!('value' in record) && !('operation' in record) && !('displayText' in record)) {
+        return { value: raw, hasDisplayText: false };
+    }
+    const operation = record['operation'];
+    const operationType = operation && typeof operation === 'object' && !Array.isArray(operation)
+        ? readPayloadText(operation['type'])
+        : undefined;
+    return {
+        value: record['value'],
+        operationType,
+        displayText: coerceFilterDisplayText(record['displayText']),
+        hasDisplayText: 'displayText' in record,
+    };
+}
+function readPayloadText(value) {
+    if (typeof value !== 'string') {
+        return undefined;
+    }
+    const trimmed = value.trim();
+    return trimmed || undefined;
+}
+function sameStoredFilterValue(left, right) {
+    if (Object.is(left, right)) {
+        return true;
+    }
+    if (left == null || right == null || typeof left !== 'object' || typeof right !== 'object') {
+        return false;
+    }
+    try {
+        return JSON.stringify(left) === JSON.stringify(right);
+    }
+    catch {
+        return false;
+    }
+}
 function readConditionFieldId(value) {
     if (typeof value === 'string') {
         const trimmed = value.trim();
@@ -3825,13 +3890,18 @@ class AXPConditionBuilderComponent {
         this.queryData.update((data) => {
             const updateFilters = (filters) => filters.map((f) => {
                 if (f.id === condition.id) {
-                    return {
+                    const next = {
                         ...f,
                         field: condition.field,
                         operator: { type: condition.operator },
                         value: condition.value,
                         isParametric: condition.isParametric,
+                        displayText: condition.displayText,
                     };
+                    if (!next.displayText) {
+                        delete next.displayText;
+                    }
+                    return next;
                 }
                 if (f.filters)
                     return { ...f, filters: updateFilters(f.filters) };
@@ -9387,6 +9457,12 @@ class AXPItemConfiguratorComponent {
         /** Values edited in the property viewer (merged from dialog result). */
         this.values = model({}, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
+        /**
+         * Property-viewer fields whose path is the widget node root (`defaultValue`, `triggers`, …),
+         * not `options.*`. The options bag alone drops them on save.
+         */
+        this.nodeFields = model({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nodeFields" }] : /* istanbul ignore next */ []));
         this.label = input('@general:terms.widget', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         this.readonly = input(false, /* @ts-ignore */
@@ -9563,9 +9639,11 @@ class AXPItemConfiguratorComponent {
         if (tabs.length === 0) {
             return;
         }
-        // Property definitions use paths like `options` / `options.*`; viewer context must nest the
-        // widget options bag under `options`, not at the root (same as widget-property-viewer).
+        // Property definitions use paths like `options` / `options.*` and also node-root paths
+        // (`defaultValue`, `triggers`). Viewer context must nest the options bag under `options`
+        // and keep those root fields beside it (same as widget-property-viewer).
         const context = buildPropertyViewerInitialContextFromProperties(defs, {
+            ...cloneDeep(this.nodeFields()),
             options: cloneDeep(this.values()),
         });
         const rawTitle = this.currentItemConfig()?.title?.trim() || this.selectedItemId().trim();
@@ -9577,6 +9655,7 @@ class AXPItemConfiguratorComponent {
             params: { name: nameForDialog || '—' },
         })) || `Configure ${nameForDialog || '—'}`;
         const valuesSnapshot = cloneDeep(this.values());
+        const nodeFieldsSnapshot = cloneDeep(this.nodeFields());
         const result = (await this.propertyViewerService
             .create()
             .dialog((d) => {
@@ -9590,17 +9669,16 @@ class AXPItemConfiguratorComponent {
                 if (event.mode !== 'update' || !event.values || typeof event.values !== 'object') {
                     return;
                 }
-                const optsPatch = extractOptionsPatchFromPropertyViewerValues(event.values);
-                this.values.set(mergeObjectsReplacingArrays(valuesSnapshot, optsPatch));
+                this.applyPropertyViewerValues(valuesSnapshot, event.values);
             });
         })
             .show());
         if (result?.values && typeof result.values === 'object') {
-            const optsPatch = extractOptionsPatchFromPropertyViewerValues(result.values);
-            this.values.set(mergeObjectsReplacingArrays(valuesSnapshot, optsPatch));
+            this.applyPropertyViewerValues(valuesSnapshot, result.values);
             return;
         }
         this.values.set(cloneDeep(valuesSnapshot));
+        this.nodeFields.set(cloneDeep(nodeFieldsSnapshot));
     }
     onHeaderActionClick(action) {
         if (this.readonly() || this.isHeaderActionDisabled(action)) {
@@ -9617,8 +9695,13 @@ class AXPItemConfiguratorComponent {
     isHeaderActionDisabled(action) {
         return action.disabled === true;
     }
+    applyPropertyViewerValues(optionsSnapshot, viewerValues) {
+        const optsPatch = extractOptionsPatchFromPropertyViewerValues(viewerValues);
+        this.values.set(mergeObjectsReplacingArrays(optionsSnapshot, optsPatch));
+        this.nodeFields.set(extractWidgetNodeFields(viewerValues));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPItemConfiguratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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: "itemLookup", first: true, predicate: AXLookupComponent, 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-lookup\n        #itemLookup\n        mode=\"drop-down-list\"\n        [ngModel]=\"selectedItemId()\"\n        [dataSource]=\"itemDataSource\"\n        [placeholder]=\"\n          ('@general:actions.select.title' | translate | async) ?? ''\n        \"\n        [readonly]=\"readonly()\"\n        (onValueChanged)=\"onSelectionChange($event)\"\n        valueField=\"value\"\n        textField=\"text\"\n        [searchable]=\"true\"\n        [itemTemplate]=\"itemTemplate\"\n        [loadingTemplate]=\"loadingTemplate\"\n        [itemHeight]=\"optionRowHeight\"\n        [maxVisibleItems]=\"optionMaxVisibleRows\"\n        [selectedTemplate]=\"selectedTemplate\"\n        (onClosed)=\"exitEditMode()\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-lookup>\n    </div>\n  }\n\n  @if (!isEditMode()) {\n    @if (selectedItemId() && currentItemConfig(); as config) {\n      <div class=\"__item-info\">\n        <div\n          class=\"__item-header\"\n          [class.__editable]=\"!readonly()\"\n          (click)=\"enterEditMode()\"\n        >\n          <div>\n            @if (config.icon) {\n              <ax-icon [icon]=\"config.icon\"></ax-icon>\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\n                [disabled]=\"!canConfigure() || readonly()\"\n                [title]=\"\n                  ('@general:actions.configure.title' | translate | async) ?? ''\n                \"\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 (\n              action of visibleHeaderActions();\n              track action.name ?? $index\n            ) {\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.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      </div>\n    } @else {\n      <div\n        class=\"__item-empty\"\n        [class.__editable]=\"!readonly()\"\n        (click)=\"enterEditMode()\"\n      >\n        <i class=\"fa-solid fa-puzzle-piece\"></i>\n        <span>\n          {{\n            ('@general:widgets.widget-configurator.select-widget-type'\n              | translate\n              | async) ?? 'Select an item type'\n          }}\n        </span>\n      </div>\n    }\n  }\n\n  <ng-template #itemTemplate let-item>\n    @let title = (item.title | translate | async) ?? '';\n    @let description = (item.description | translate | async) ?? '';\n    <div class=\"axp-item-configurator-option\">\n      <ax-icon [icon]=\"item.icon || fallbackIcon\"></ax-icon>\n      <div class=\"axp-item-configurator-option__text\">\n        <span class=\"axp-item-configurator-option__title\">\n          {{ title }}\n        </span>\n        <!-- ----- One-line description under the title ----- -->\n        @if (item.description) {\n          <span class=\"axp-item-configurator-option__description\">\n            {{ description }}\n          </span>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #loadingTemplate>\n    <div class=\"axp-item-configurator-option axp-item-configurator-option--loading\">\n      <span class=\"axp-item-configurator-option__icon-slot\"></span>\n      <span class=\"axp-item-configurator-option__bar\"></span>\n    </div>\n  </ng-template>\n\n  <ng-template #selectedTemplate let-item>\n    <div class=\"__selected-template\">\n      @if (item?.icon) {\n        <ax-icon [icon]=\"item.icon\"></ax-icon>\n      }\n      <span>\n        {{ (item?.title | translate | async) ?? '' }}\n      </span>\n    </div>\n  </ng-template>\n</div>\n", styles: ["@layer properties;axp-item-configurator{display:flex;flex-direction:column}axp-item-configurator .__item-selector{display:flex;flex-direction:column}axp-item-configurator .__item-selector ax-lookup{width:100%}axp-item-configurator .__item-info{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}axp-item-configurator .__item-info .__item-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}axp-item-configurator .__item-info .__item-header.__editable{cursor:pointer}axp-item-configurator .__item-info .__item-header.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}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;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-info .__item-header>div:first-child ax-icon{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));flex-shrink:0}axp-item-configurator .__item-info .__item-header>div:first-child>div{display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}axp-item-configurator .__item-info .__item-header>div:first-child>div>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__item-info .__item-header>div:first-child>div>p{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25);color:var(--color-neutral-600, oklch(43.9% 0 none))}axp-item-configurator .__item-info .__action-buttons{display:flex;align-items:center;gap:var(--spacing, .25rem);flex-shrink:0}axp-item-configurator .__item-empty{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-empty.__editable{cursor:pointer}axp-item-configurator .__item-empty.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}axp-item-configurator .__item-empty:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-empty>i{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:var(--color-neutral-400, oklch(70.8% 0 none))}axp-item-configurator .__item-empty>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-600, oklch(43.9% 0 none))}axp-item-configurator .__selected-template{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__selected-template>ax-icon{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}axp-item-configurator .__selected-template>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}axp-item-configurator :host([readonly]){pointer-events:none;opacity:.7}.ax-lookup-viewport:has(.axp-item-configurator-option){min-height:224px;overflow-y:scroll;scrollbar-gutter:stable}.ax-lookup-option-host:has(.axp-item-configurator-option){overflow:hidden}.axp-item-configurator-option{box-sizing:border-box;display:flex;align-items:center;gap:.625rem;width:100%;height:100%;min-width:0;overflow:hidden;padding-inline:.75rem}.axp-item-configurator-option>ax-icon{flex-shrink:0;width:1.125rem;font-size:1rem;line-height:1;text-align:center}.axp-item-configurator-option__text{display:flex;min-width:0;flex:1;flex-direction:column;justify-content:center;gap:.125rem;line-height:1.25}.axp-item-configurator-option__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;font-weight:500;line-height:1.25}.axp-item-configurator-option__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-neutral-600, oklch(43.9% 0 none));font-size:.75rem;line-height:1.25}.axp-item-configurator-option--loading{gap:.5rem}.axp-item-configurator-option__icon-slot,.axp-item-configurator-option__bar{display:block;border-radius:.25rem;background:currentColor}@supports (color: color-mix(in lab,red,red)){.axp-item-configurator-option__icon-slot,.axp-item-configurator-option__bar{background:color-mix(in srgb,currentColor 12%,transparent)}}.axp-item-configurator-option__icon-slot{width:1rem;height:1rem;flex-shrink:0}.axp-item-configurator-option__bar{height:.5rem;width:40%}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\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", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "allowSelectAll", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems", "prefetch"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { 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: "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: "22.0.8", 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 }, nodeFields: { classPropertyName: "nodeFields", publicName: "nodeFields", 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", nodeFields: "nodeFieldsChange" }, viewQueries: [{ propertyName: "itemLookup", first: true, predicate: AXLookupComponent, 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-lookup\n        #itemLookup\n        mode=\"drop-down-list\"\n        [ngModel]=\"selectedItemId()\"\n        [dataSource]=\"itemDataSource\"\n        [placeholder]=\"\n          ('@general:actions.select.title' | translate | async) ?? ''\n        \"\n        [readonly]=\"readonly()\"\n        (onValueChanged)=\"onSelectionChange($event)\"\n        valueField=\"value\"\n        textField=\"text\"\n        [searchable]=\"true\"\n        [itemTemplate]=\"itemTemplate\"\n        [loadingTemplate]=\"loadingTemplate\"\n        [itemHeight]=\"optionRowHeight\"\n        [maxVisibleItems]=\"optionMaxVisibleRows\"\n        [selectedTemplate]=\"selectedTemplate\"\n        (onClosed)=\"exitEditMode()\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-lookup>\n    </div>\n  }\n\n  @if (!isEditMode()) {\n    @if (selectedItemId() && currentItemConfig(); as config) {\n      <div class=\"__item-info\">\n        <div\n          class=\"__item-header\"\n          [class.__editable]=\"!readonly()\"\n          (click)=\"enterEditMode()\"\n        >\n          <div>\n            @if (config.icon) {\n              <ax-icon [icon]=\"config.icon\"></ax-icon>\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\n                [disabled]=\"!canConfigure() || readonly()\"\n                [title]=\"\n                  ('@general:actions.configure.title' | translate | async) ?? ''\n                \"\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 (\n              action of visibleHeaderActions();\n              track action.name ?? $index\n            ) {\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.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      </div>\n    } @else {\n      <div\n        class=\"__item-empty\"\n        [class.__editable]=\"!readonly()\"\n        (click)=\"enterEditMode()\"\n      >\n        <i class=\"fa-solid fa-puzzle-piece\"></i>\n        <span>\n          {{\n            ('@general:widgets.widget-configurator.select-widget-type'\n              | translate\n              | async) ?? 'Select an item type'\n          }}\n        </span>\n      </div>\n    }\n  }\n\n  <ng-template #itemTemplate let-item>\n    @let title = (item.title | translate | async) ?? '';\n    @let description = (item.description | translate | async) ?? '';\n    <div class=\"axp-item-configurator-option\">\n      <ax-icon [icon]=\"item.icon || fallbackIcon\"></ax-icon>\n      <div class=\"axp-item-configurator-option__text\">\n        <span class=\"axp-item-configurator-option__title\">\n          {{ title }}\n        </span>\n        <!-- ----- One-line description under the title ----- -->\n        @if (item.description) {\n          <span class=\"axp-item-configurator-option__description\">\n            {{ description }}\n          </span>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #loadingTemplate>\n    <div class=\"axp-item-configurator-option axp-item-configurator-option--loading\">\n      <span class=\"axp-item-configurator-option__icon-slot\"></span>\n      <span class=\"axp-item-configurator-option__bar\"></span>\n    </div>\n  </ng-template>\n\n  <ng-template #selectedTemplate let-item>\n    <div class=\"__selected-template\">\n      @if (item?.icon) {\n        <ax-icon [icon]=\"item.icon\"></ax-icon>\n      }\n      <span>\n        {{ (item?.title | translate | async) ?? '' }}\n      </span>\n    </div>\n  </ng-template>\n</div>\n", styles: ["@layer properties;axp-item-configurator{display:flex;flex-direction:column}axp-item-configurator .__item-selector{display:flex;flex-direction:column}axp-item-configurator .__item-selector ax-lookup{width:100%}axp-item-configurator .__item-info{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}axp-item-configurator .__item-info .__item-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}axp-item-configurator .__item-info .__item-header.__editable{cursor:pointer}axp-item-configurator .__item-info .__item-header.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}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;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-info .__item-header>div:first-child ax-icon{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));flex-shrink:0}axp-item-configurator .__item-info .__item-header>div:first-child>div{display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}axp-item-configurator .__item-info .__item-header>div:first-child>div>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__item-info .__item-header>div:first-child>div>p{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25);color:var(--color-neutral-600, oklch(43.9% 0 none))}axp-item-configurator .__item-info .__action-buttons{display:flex;align-items:center;gap:var(--spacing, .25rem);flex-shrink:0}axp-item-configurator .__item-empty{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-empty.__editable{cursor:pointer}axp-item-configurator .__item-empty.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}axp-item-configurator .__item-empty:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-empty>i{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:var(--color-neutral-400, oklch(70.8% 0 none))}axp-item-configurator .__item-empty>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-600, oklch(43.9% 0 none))}axp-item-configurator .__selected-template{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__selected-template>ax-icon{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}axp-item-configurator .__selected-template>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}axp-item-configurator :host([readonly]){pointer-events:none;opacity:.7}.ax-lookup-viewport:has(.axp-item-configurator-option){min-height:224px;overflow-y:scroll;scrollbar-gutter:stable}.ax-lookup-option-host:has(.axp-item-configurator-option){overflow:hidden}.axp-item-configurator-option{box-sizing:border-box;display:flex;align-items:center;gap:.625rem;width:100%;height:100%;min-width:0;overflow:hidden;padding-inline:.75rem}.axp-item-configurator-option>ax-icon{flex-shrink:0;width:1.125rem;font-size:1rem;line-height:1;text-align:center}.axp-item-configurator-option__text{display:flex;min-width:0;flex:1;flex-direction:column;justify-content:center;gap:.125rem;line-height:1.25}.axp-item-configurator-option__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;font-weight:500;line-height:1.25}.axp-item-configurator-option__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-neutral-600, oklch(43.9% 0 none));font-size:.75rem;line-height:1.25}.axp-item-configurator-option--loading{gap:.5rem}.axp-item-configurator-option__icon-slot,.axp-item-configurator-option__bar{display:block;border-radius:.25rem;background:currentColor}@supports (color: color-mix(in lab,red,red)){.axp-item-configurator-option__icon-slot,.axp-item-configurator-option__bar{background:color-mix(in srgb,currentColor 12%,transparent)}}.axp-item-configurator-option__icon-slot{width:1rem;height:1rem;flex-shrink:0}.axp-item-configurator-option__bar{height:.5rem;width:40%}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\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", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "allowSelectAll", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems", "prefetch"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { 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: "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: "22.0.8", ngImport: i0, type: AXPItemConfiguratorComponent, decorators: [{
             type: Component,
@@ -9631,7 +9714,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXDecoratorModule,
                         AXTranslationModule,
                     ], template: "<!-- Item selector & info container -->\n<div class=\"__item-container\">\n  @if (isEditMode()) {\n    <div class=\"__item-selector\">\n      <ax-lookup\n        #itemLookup\n        mode=\"drop-down-list\"\n        [ngModel]=\"selectedItemId()\"\n        [dataSource]=\"itemDataSource\"\n        [placeholder]=\"\n          ('@general:actions.select.title' | translate | async) ?? ''\n        \"\n        [readonly]=\"readonly()\"\n        (onValueChanged)=\"onSelectionChange($event)\"\n        valueField=\"value\"\n        textField=\"text\"\n        [searchable]=\"true\"\n        [itemTemplate]=\"itemTemplate\"\n        [loadingTemplate]=\"loadingTemplate\"\n        [itemHeight]=\"optionRowHeight\"\n        [maxVisibleItems]=\"optionMaxVisibleRows\"\n        [selectedTemplate]=\"selectedTemplate\"\n        (onClosed)=\"exitEditMode()\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-lookup>\n    </div>\n  }\n\n  @if (!isEditMode()) {\n    @if (selectedItemId() && currentItemConfig(); as config) {\n      <div class=\"__item-info\">\n        <div\n          class=\"__item-header\"\n          [class.__editable]=\"!readonly()\"\n          (click)=\"enterEditMode()\"\n        >\n          <div>\n            @if (config.icon) {\n              <ax-icon [icon]=\"config.icon\"></ax-icon>\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\n                [disabled]=\"!canConfigure() || readonly()\"\n                [title]=\"\n                  ('@general:actions.configure.title' | translate | async) ?? ''\n                \"\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 (\n              action of visibleHeaderActions();\n              track action.name ?? $index\n            ) {\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.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      </div>\n    } @else {\n      <div\n        class=\"__item-empty\"\n        [class.__editable]=\"!readonly()\"\n        (click)=\"enterEditMode()\"\n      >\n        <i class=\"fa-solid fa-puzzle-piece\"></i>\n        <span>\n          {{\n            ('@general:widgets.widget-configurator.select-widget-type'\n              | translate\n              | async) ?? 'Select an item type'\n          }}\n        </span>\n      </div>\n    }\n  }\n\n  <ng-template #itemTemplate let-item>\n    @let title = (item.title | translate | async) ?? '';\n    @let description = (item.description | translate | async) ?? '';\n    <div class=\"axp-item-configurator-option\">\n      <ax-icon [icon]=\"item.icon || fallbackIcon\"></ax-icon>\n      <div class=\"axp-item-configurator-option__text\">\n        <span class=\"axp-item-configurator-option__title\">\n          {{ title }}\n        </span>\n        <!-- ----- One-line description under the title ----- -->\n        @if (item.description) {\n          <span class=\"axp-item-configurator-option__description\">\n            {{ description }}\n          </span>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #loadingTemplate>\n    <div class=\"axp-item-configurator-option axp-item-configurator-option--loading\">\n      <span class=\"axp-item-configurator-option__icon-slot\"></span>\n      <span class=\"axp-item-configurator-option__bar\"></span>\n    </div>\n  </ng-template>\n\n  <ng-template #selectedTemplate let-item>\n    <div class=\"__selected-template\">\n      @if (item?.icon) {\n        <ax-icon [icon]=\"item.icon\"></ax-icon>\n      }\n      <span>\n        {{ (item?.title | translate | async) ?? '' }}\n      </span>\n    </div>\n  </ng-template>\n</div>\n", styles: ["@layer properties;axp-item-configurator{display:flex;flex-direction:column}axp-item-configurator .__item-selector{display:flex;flex-direction:column}axp-item-configurator .__item-selector ax-lookup{width:100%}axp-item-configurator .__item-info{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}axp-item-configurator .__item-info .__item-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}axp-item-configurator .__item-info .__item-header.__editable{cursor:pointer}axp-item-configurator .__item-info .__item-header.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}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;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-info .__item-header>div:first-child ax-icon{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));flex-shrink:0}axp-item-configurator .__item-info .__item-header>div:first-child>div{display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}axp-item-configurator .__item-info .__item-header>div:first-child>div>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__item-info .__item-header>div:first-child>div>p{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25);color:var(--color-neutral-600, oklch(43.9% 0 none))}axp-item-configurator .__item-info .__action-buttons{display:flex;align-items:center;gap:var(--spacing, .25rem);flex-shrink:0}axp-item-configurator .__item-empty{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-empty.__editable{cursor:pointer}axp-item-configurator .__item-empty.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}axp-item-configurator .__item-empty:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-empty>i{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:var(--color-neutral-400, oklch(70.8% 0 none))}axp-item-configurator .__item-empty>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-600, oklch(43.9% 0 none))}axp-item-configurator .__selected-template{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__selected-template>ax-icon{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}axp-item-configurator .__selected-template>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}axp-item-configurator :host([readonly]){pointer-events:none;opacity:.7}.ax-lookup-viewport:has(.axp-item-configurator-option){min-height:224px;overflow-y:scroll;scrollbar-gutter:stable}.ax-lookup-option-host:has(.axp-item-configurator-option){overflow:hidden}.axp-item-configurator-option{box-sizing:border-box;display:flex;align-items:center;gap:.625rem;width:100%;height:100%;min-width:0;overflow:hidden;padding-inline:.75rem}.axp-item-configurator-option>ax-icon{flex-shrink:0;width:1.125rem;font-size:1rem;line-height:1;text-align:center}.axp-item-configurator-option__text{display:flex;min-width:0;flex:1;flex-direction:column;justify-content:center;gap:.125rem;line-height:1.25}.axp-item-configurator-option__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;font-weight:500;line-height:1.25}.axp-item-configurator-option__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-neutral-600, oklch(43.9% 0 none));font-size:.75rem;line-height:1.25}.axp-item-configurator-option--loading{gap:.5rem}.axp-item-configurator-option__icon-slot,.axp-item-configurator-option__bar{display:block;border-radius:.25rem;background:currentColor}@supports (color: color-mix(in lab,red,red)){.axp-item-configurator-option__icon-slot,.axp-item-configurator-option__bar{background:color-mix(in srgb,currentColor 12%,transparent)}}.axp-item-configurator-option__icon-slot{width:1rem;height:1rem;flex-shrink:0}.axp-item-configurator-option__bar{height:.5rem;width:40%}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\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 }] }], itemLookup: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXLookupComponent), { isSignal: true }] }] } });
+        }], 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"] }], nodeFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeFields", required: false }] }, { type: i0.Output, args: ["nodeFieldsChange"] }], 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 }] }], itemLookup: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXLookupComponent), { isSignal: true }] }] } });
 //#region ----   Helpers   ----
 function isPropertyDefinitionArray(value) {
     if (!Array.isArray(value) || value.length === 0) {
@@ -9651,6 +9734,17 @@ function extractOptionsPatchFromPropertyViewerValues(values) {
     }
     return values;
 }
+/** Widget-node fields configured beside `options` (path is the node root, not `options.*`). */
+const WIDGET_NODE_FIELD_KEYS$1 = ['defaultValue', 'triggers', 'name', 'path', 'visible', 'mode', 'meta', 'valueTransforms'];
+function extractWidgetNodeFields(values) {
+    const out = {};
+    for (const key of WIDGET_NODE_FIELD_KEYS$1) {
+        if (key in values) {
+            out[key] = values[key];
+        }
+    }
+    return out;
+}
 function readLookupFilterText(filter) {
     if (!filter || typeof filter !== 'object') {
         return '';
@@ -16647,6 +16741,9 @@ class AXPWidgetFieldConfiguratorComponent {
         ...(ngDevMode ? [{ debugName: "selectedItemIdModel" }] : /* istanbul ignore next */ []));
         this.valuesModel = model({}, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "valuesModel" }] : /* istanbul ignore next */ []));
+        /** Node-root fields (`defaultValue`, `triggers`, …) kept beside `options`. */
+        this.nodeFieldsModel = model({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nodeFieldsModel" }] : /* istanbul ignore next */ []));
         /**
          * List entries from {@link AXPWidgetRegistryService} (form editors), with
          * {@link ItemConfiguratorListItem.propertyDefinitions} from each registered config.
@@ -16696,18 +16793,22 @@ class AXPWidgetFieldConfiguratorComponent {
             const w = this.widget();
             const sid = w?.type ?? '';
             const opts = (w?.options ?? {});
+            const nodeFields = readWidgetNodeFields(w);
             const curSid = untracked(() => this.selectedItemIdModel());
             const curVals = untracked(() => this.valuesModel());
-            if (sid !== curSid || !isEqual(opts, curVals)) {
+            const curNodeFields = untracked(() => this.nodeFieldsModel());
+            if (sid !== curSid || !isEqual(opts, curVals) || !isEqual(nodeFields, curNodeFields)) {
                 untracked(() => {
                     this.selectedItemIdModel.set(sid);
                     this.valuesModel.set(opts);
+                    this.nodeFieldsModel.set(nodeFields);
                 });
             }
         });
         effect(() => {
             const sid = this.selectedItemIdModel();
             const vals = this.valuesModel();
+            const nodeFields = this.nodeFieldsModel();
             const current = untracked(() => this.widget());
             const empty = { type: '', options: {} };
             if (!sid) {
@@ -16716,27 +16817,28 @@ class AXPWidgetFieldConfiguratorComponent {
                 }
                 return;
             }
-            const next = {
+            const next = applyWidgetNodeFields({
                 ...(current && typeof current === 'object' ? current : {}),
                 type: sid,
                 options: vals,
-            };
+            }, nodeFields);
             if (!isEqual(next, current)) {
                 untracked(() => this.widget.set(next));
             }
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPWidgetFieldConfiguratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXPWidgetFieldConfiguratorComponent, isStandalone: true, selector: "axp-widget-field-configurator", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, fieldTitle: { classPropertyName: "fieldTitle", publicName: "fieldTitle", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, selectedItemIdModel: { classPropertyName: "selectedItemIdModel", publicName: "selectedItemIdModel", isSignal: true, isRequired: false, transformFunction: null }, valuesModel: { classPropertyName: "valuesModel", publicName: "valuesModel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { widget: "widgetChange", selectedItemIdModel: "selectedItemIdModelChange", valuesModel: "valuesModelChange" }, host: { properties: { "attr.readonly": "readonly() ? \"\" : null" }, classAttribute: "flex flex-col" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXPWidgetFieldConfiguratorComponent, isStandalone: true, selector: "axp-widget-field-configurator", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, fieldTitle: { classPropertyName: "fieldTitle", publicName: "fieldTitle", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, selectedItemIdModel: { classPropertyName: "selectedItemIdModel", publicName: "selectedItemIdModel", isSignal: true, isRequired: false, transformFunction: null }, valuesModel: { classPropertyName: "valuesModel", publicName: "valuesModel", isSignal: true, isRequired: false, transformFunction: null }, nodeFieldsModel: { classPropertyName: "nodeFieldsModel", publicName: "nodeFieldsModel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { widget: "widgetChange", selectedItemIdModel: "selectedItemIdModelChange", valuesModel: "valuesModelChange", nodeFieldsModel: "nodeFieldsModelChange" }, host: { properties: { "attr.readonly": "readonly() ? \"\" : null" }, classAttribute: "flex flex-col" }, ngImport: i0, template: `
         <axp-item-configurator
             [(selectedItemId)]="selectedItemIdModel"
             [(values)]="valuesModel"
+            [(nodeFields)]="nodeFieldsModel"
             [label]="label()"
             [readonly]="readonly()"
             [items]="configuratorItems()"
             [headerActions]="previewHeaderActions()"
         />
-    `, isInline: true, styles: [":host([readonly]){pointer-events:none;opacity:.7}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXPItemConfiguratorComponent, selector: "axp-item-configurator", inputs: ["selectedItemId", "values", "label", "readonly", "items", "headerActions"], outputs: ["selectedItemIdChange", "valuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: [":host([readonly]){pointer-events:none;opacity:.7}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXPItemConfiguratorComponent, selector: "axp-item-configurator", inputs: ["selectedItemId", "values", "nodeFields", "label", "readonly", "items", "headerActions"], outputs: ["selectedItemIdChange", "valuesChange", "nodeFieldsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPWidgetFieldConfiguratorComponent, decorators: [{
             type: Component,
@@ -16744,6 +16846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         <axp-item-configurator
             [(selectedItemId)]="selectedItemIdModel"
             [(values)]="valuesModel"
+            [(nodeFields)]="nodeFieldsModel"
             [label]="label()"
             [readonly]="readonly()"
             [items]="configuratorItems()"
@@ -16753,7 +16856,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         class: 'flex flex-col',
                         '[attr.readonly]': 'readonly() ? "" : null',
                     }, imports: [AXPItemConfiguratorComponent], styles: [":host([readonly]){pointer-events:none;opacity:.7}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
-        }], ctorParameters: () => [], propDecorators: { widget: [{ type: i0.Input, args: [{ isSignal: true, alias: "widget", required: false }] }, { type: i0.Output, args: ["widgetChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], fieldTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldTitle", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], selectedItemIdModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemIdModel", required: false }] }, { type: i0.Output, args: ["selectedItemIdModelChange"] }], valuesModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuesModel", required: false }] }, { type: i0.Output, args: ["valuesModelChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { widget: [{ type: i0.Input, args: [{ isSignal: true, alias: "widget", required: false }] }, { type: i0.Output, args: ["widgetChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], fieldTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldTitle", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], selectedItemIdModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemIdModel", required: false }] }, { type: i0.Output, args: ["selectedItemIdModelChange"] }], valuesModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuesModel", required: false }] }, { type: i0.Output, args: ["valuesModelChange"] }], nodeFieldsModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeFieldsModel", required: false }] }, { type: i0.Output, args: ["nodeFieldsModelChange"] }] } });
+//#endregion
+//#region ----   Node-root fields   ----
+const WIDGET_NODE_FIELD_KEYS = ['defaultValue', 'triggers', 'name', 'path', 'visible', 'mode', 'meta', 'valueTransforms'];
+function readWidgetNodeFields(widget) {
+    const out = {};
+    if (!widget) {
+        return out;
+    }
+    for (const key of WIDGET_NODE_FIELD_KEYS) {
+        const value = widget[key];
+        if (value !== undefined) {
+            out[key] = value;
+        }
+    }
+    return out;
+}
+function applyWidgetNodeFields(widget, fields) {
+    const next = { ...widget };
+    for (const key of WIDGET_NODE_FIELD_KEYS) {
+        if (!(key in fields)) {
+            continue;
+        }
+        const value = fields[key];
+        const cleared = value === undefined || value === null || (key === 'defaultValue' && value === '');
+        if (cleared) {
+            delete next[key];
+            continue;
+        }
+        assignWidgetNodeField(next, key, value);
+    }
+    return next;
+}
+function assignWidgetNodeField(widget, key, value) {
+    switch (key) {
+        case 'defaultValue':
+            widget.defaultValue = value;
+            break;
+        case 'triggers':
+            widget.triggers = value;
+            break;
+        case 'name':
+            widget.name = value;
+            break;
+        case 'path':
+            widget.path = value;
+            break;
+        case 'visible':
+            widget.visible = value;
+            break;
+        case 'mode':
+            widget.mode = value;
+            break;
+        case 'meta':
+            widget.meta = value;
+            break;
+        case 'valueTransforms':
+            widget.valueTransforms = value;
+            break;
+    }
+}
 
 const WIDGET_ITEM_I18N = {
     pin: '@general:widgets.widget-item.pin',