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

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

@@ -528,12 +528,12 @@ class AXPProviderSelectWidgetEditBase extends AXPDataListWidgetComponent {
                         setSmart(itemToExpose, mapping.target, this.singleOrMultiple(values));
                     }
                 });
-                this.contextService.patch(itemToExpose, true);
+                this.contextService.applyObjectPaths(itemToExpose, { origin: 'user' });
             }
             if (this.filterMode()) {
                 const newValue = e.value;
                 const text = this.selectedItems().map((item) => get(item, this.textField()));
-                this.setValue({
+                this.setUserValue({
                     value: newValue,
                     displayText: text,
                     operation: {
@@ -541,14 +541,12 @@ class AXPProviderSelectWidgetEditBase extends AXPDataListWidgetComponent {
                     },
                 });
             }
+            else if (this.multiple()) {
+                const keys = this.selectedItems().map((item) => get(item, this.valueField()));
+                this.setUserValue(keys);
+            }
             else {
-                if (this.multiple()) {
-                    const keys = this.selectedItems().map((item) => get(item, this.valueField()));
-                    this.setValue(keys);
-                }
-                else {
-                    this.setValue(e.value);
-                }
+                this.setUserValue(e.value);
             }
         }
     }
@@ -5176,18 +5174,21 @@ class AXPLargeTextWidgetEditComponent extends AXPValueWidgetComponent {
         super.ngOnInit();
         const v = this.getValue();
         if (this.multiLanguage() && typeof v === 'string') {
-            this.setValue({ [this.currentLanguage()]: v });
+            this.setValue({ [this.currentLanguage()]: v }, { origin: 'system' });
         }
     }
     handleValueChange(e) {
+        if (!e.isUserInteraction) {
+            return;
+        }
         if (this.multiLanguage()) {
             const v = this.getValue();
             const obj = v && typeof v === 'object' && !Array.isArray(v) ? { ...v } : {};
             obj[this.currentLanguage()] = e.value ?? '';
-            this.setValue(obj);
+            this.setUserValue(obj);
         }
         else {
-            this.setValue(e.value ?? '');
+            this.setUserValue(e.value ?? '');
         }
     }
     openMultiLanguagePopup() {
@@ -7149,50 +7150,91 @@ const AXPRichTextWidget = {
     },
 };
 
+//#region ---- Badge styling ----
+const BADGE_BASE_CLASSES = 'ax-inline-flex ax-items-center ax-px-2 ax-py-1 ax-text-xs ax-font-medium ax-rounded-lg ax-border';
+const DEFAULT_BADGE_CSS_CLASS = 'ax-primary-lighter';
+function readSelectItemCssClass(item, cssClassField) {
+    if (!cssClassField) {
+        return undefined;
+    }
+    const raw = item[cssClassField];
+    return typeof raw === 'string' && raw.trim() ? raw.trim() : undefined;
+}
+/**
+ * Resolves badge classes: layout base + scope {@link cssClass} (whole badge) or default fallback.
+ */
+function resolveSelectBadgeClasses(item, options) {
+    const scopeClass = readSelectItemCssClass(item, options.cssClassField);
+    if (scopeClass) {
+        return `${BADGE_BASE_CLASSES} ${scopeClass}`;
+    }
+    const fallback = options.badgeClass?.trim() || DEFAULT_BADGE_CSS_CLASS;
+    return `${BADGE_BASE_CLASSES} ${fallback}`;
+}
+//#endregion
+
 class AXPSelectBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
         super(...arguments);
-        this.valueField = this.options['valueField'] ?? 'id';
-        this.textField = this.options['textField'] ?? 'title';
-        this.badgeClass = this.options['badgeClass'] ?? 'ax-primary-lightest dark:ax-primary-darker';
-        this.dataSource = this.options['dataSource'] ?? [];
+        this.textField = computed(() => this.options['textField'] ?? 'title', ...(ngDevMode ? [{ debugName: "textField" }] : /* istanbul ignore next */ []));
+        this.valueField = computed(() => this.options['valueField'] ?? 'id', ...(ngDevMode ? [{ debugName: "valueField" }] : /* istanbul ignore next */ []));
+        this.cssClassField = computed(() => this.options['cssClassField'], ...(ngDevMode ? [{ debugName: "cssClassField" }] : /* istanbul ignore next */ []));
+        this.badgeClass = computed(() => this.options['badgeClass'], ...(ngDevMode ? [{ debugName: "badgeClass" }] : /* istanbul ignore next */ []));
+        this.dataSource = computed(() => this.options['dataSource'] ?? [], ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
         this.internalValue = computed(() => castArray(this.rawValue)
             .map((item) => this.extractItem(item))
             .filter((c) => c != null), ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
     }
+    resolveBadgeClasses(item) {
+        const row = item;
+        return resolveSelectBadgeClasses(row, {
+            cssClassField: this.cssClassField(),
+            badgeClass: this.badgeClass(),
+        });
+    }
+    getItemLabel(item) {
+        const row = item;
+        const label = row[this.textField()];
+        if (label != null && typeof label === 'object') {
+            return label;
+        }
+        return String(label ?? '');
+    }
     extractItem(item) {
         if (isNil(item)) {
             return null;
         }
-        // Check if dataSource contains objects
-        const isDataSourceObjects = Array.isArray(this.dataSource) && this.dataSource.length > 0 && typeof this.dataSource[0] === 'object';
-        // If item is primitive and dataSource contains objects, lookup the item in dataSource
-        if (typeof item !== 'object' && isDataSourceObjects) {
-            const foundItem = this.dataSource.find((ds) => ds[this.valueField] === item);
-            if (foundItem) {
-                return {
-                    [this.valueField]: foundItem[this.valueField],
-                    [this.textField]: foundItem[this.textField],
-                };
+        const valueField = this.valueField();
+        const textField = this.textField();
+        const cssClassField = this.cssClassField();
+        const dataSource = this.dataSource();
+        const isDataSourceObjects = Array.isArray(dataSource) && dataSource.length > 0 && typeof dataSource[0] === 'object';
+        if (typeof item !== 'object') {
+            if (isDataSourceObjects) {
+                const foundItem = dataSource.find((ds) => ds[valueField] === item);
+                if (foundItem) {
+                    return { ...foundItem };
+                }
             }
-        }
-        // If item is already an object
-        if (typeof item === 'object') {
             return {
-                [this.valueField]: item?.[this.valueField],
-                [this.textField]: item?.[this.textField],
+                [valueField]: item,
+                [textField]: item,
             };
         }
-        // Fallback for primitive values when dataSource is not objects
-        return {
-            [this.valueField]: item,
-            [this.textField]: item,
-        };
+        const row = item;
+        if (!readSelectItemCssClass(row, cssClassField) && isDataSourceObjects && row[valueField] != null) {
+            const foundItem = dataSource.find((ds) => ds[valueField] === row[valueField]);
+            const cssKey = cssClassField ?? 'cssClass';
+            if (foundItem?.[cssKey]) {
+                return { ...row, [cssKey]: foundItem[cssKey] };
+            }
+        }
+        return { ...row };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPSelectBoxWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPSelectBoxWidgetColumnComponent, isStandalone: true, selector: "axp-select-box-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: ` <div class="ax-flex ax-gap-2">
     @for (item of internalValue(); track $index) {
-      <span class="ax-px-2 ax-py-1 ax-text-xs ax-font-medium ax-rounded-lg {{ badgeClass }}">{{ item[this.textField] | translate | async }}</span>
+      <span class="{{ resolveBadgeClasses(item) }}">{{ getItemLabel(item) | translate | async }}</span>
     } @empty {
       <span class="ax-text-muted">---</span>
     }
@@ -7204,7 +7246,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     selector: 'axp-select-box-widget-column',
                     template: ` <div class="ax-flex ax-gap-2">
     @for (item of internalValue(); track $index) {
-      <span class="ax-px-2 ax-py-1 ax-text-xs ax-font-medium ax-rounded-lg {{ badgeClass }}">{{ item[this.textField] | translate | async }}</span>
+      <span class="{{ resolveBadgeClasses(item) }}">{{ getItemLabel(item) | translate | async }}</span>
     } @empty {
       <span class="ax-text-muted">---</span>
     }
@@ -7348,16 +7390,14 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
                         setSmart(itemToExpose, expr.target, this.singleOrMultiple(values));
                     }
                 });
-                this.contextService.patch(itemToExpose, true);
+                this.contextService.applyObjectPaths(itemToExpose, { origin: 'user' });
             }
             //#endregion
             //#region ----   Set Value Based on Mode   ----
-            // Apply strategy even when the value comes from outside (isUserInteraction=false).
             if (this.filterMode()) {
-                // Filter mode: set value with operation structure
                 const newValue = e.value;
                 const text = this.selectedItems().map((item) => get(item, this.textField()));
-                this.setValue({
+                this.setUserValue({
                     value: newValue,
                     displayText: text,
                     operation: {
@@ -7365,19 +7405,27 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
                     },
                 });
             }
+            else if (this.widgetsConfigs.selectValueStrategy === 'valueField') {
+                this.setUserValue(e.value);
+            }
+            else if (this.multiple()) {
+                this.setUserValue(this.selectedItems());
+            }
+            else {
+                this.setUserValue(this.selectedItems()[0]);
+            }
         }
-        if (!this.filterMode()) {
-            // Normal mode: set value directly
+        else if (!this.filterMode()) {
+            // Programmatic sync from the select box (hydration, datasource refresh).
+            const systemOrigin = { origin: 'system' };
             if (this.widgetsConfigs.selectValueStrategy === 'valueField') {
-                this.setValue(e.value);
+                this.setValue(e.value, systemOrigin);
+            }
+            else if (this.multiple()) {
+                this.setValue(this.selectedItems(), systemOrigin);
             }
             else {
-                if (this.multiple()) {
-                    this.setValue(this.selectedItems());
-                }
-                else {
-                    this.setValue(this.selectedItems()[0]);
-                }
+                this.setValue(this.selectedItems()[0], systemOrigin);
             }
         }
         //#endregion
@@ -7553,23 +7601,35 @@ var selectBoxWidgetEdit_component = /*#__PURE__*/Object.freeze({
 });
 
 class AXPSelectBoxWidgetViewComponent extends AXPDataListWidgetComponent {
-    //TODO: why do we need this?
-    //protected badgeClass = computed<string>(() => (this.options()['badgeClass'] as string) ?? 'ax-accent1');
-    get __class() {
-        const cls = {};
-        cls[`ax-flex`] = true;
-        cls[`ax-gap-1`] = true;
-        return cls;
+    constructor() {
+        super(...arguments);
+        this.cssClassField = computed(() => this.options()['cssClassField'], ...(ngDevMode ? [{ debugName: "cssClassField" }] : /* istanbul ignore next */ []));
+        this.badgeClass = computed(() => this.options()['badgeClass'], ...(ngDevMode ? [{ debugName: "badgeClass" }] : /* istanbul ignore next */ []));
+    }
+    resolveBadgeClasses(item) {
+        return resolveSelectBadgeClasses(item, {
+            cssClassField: this.cssClassField(),
+            badgeClass: this.badgeClass(),
+        });
+    }
+    getItemLabel(item) {
+        const row = item;
+        const label = row[this.textField()];
+        if (label != null && typeof label === 'object') {
+            return label;
+        }
+        return String(label ?? '');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPSelectBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPSelectBoxWidgetViewComponent, isStandalone: true, selector: "axp-select-box-widget-view", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPSelectBoxWidgetViewComponent, isStandalone: true, selector: "axp-select-box-widget-view", host: { classAttribute: "ax-flex ax-gap-1 ax-flex-wrap" }, usesInheritance: true, ngImport: i0, template: `
     @for (item of selectedItems(); track $index) {
-    <span >{{item[this.textField()] | translate | async}}</span>
-    }
-    @empty {
+      <span class="{{ resolveBadgeClasses(item) }}">
+        {{ getItemLabel(item) | translate | async }}
+      </span>
+    } @empty {
       <span class="ax-text-muted">---</span>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPSelectBoxWidgetViewComponent, decorators: [{
             type: Component,
@@ -7577,19 +7637,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     selector: 'axp-select-box-widget-view',
                     template: `
     @for (item of selectedItems(); track $index) {
-    <span >{{item[this.textField()] | translate | async}}</span>
-    }
-    @empty {
+      <span class="{{ resolveBadgeClasses(item) }}">
+        {{ getItemLabel(item) | translate | async }}
+      </span>
+    } @empty {
       <span class="ax-text-muted">---</span>
     }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AXBadgeModule, CommonModule, AXTranslationModule],
+                    host: {
+                        class: 'ax-flex ax-gap-1 ax-flex-wrap',
+                    },
+                    imports: [CommonModule, AXTranslationModule],
                 }]
-        }], propDecorators: { __class: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 
 var selectBoxWidgetView_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -8908,7 +8969,7 @@ class AXPTextBoxWidgetEditComponent extends AXPValueWidgetComponent {
         super.ngOnInit();
         const v = this.getValue();
         if (this.multiLanguage() && typeof v === 'string') {
-            this.setValue({ [this.currentLanguage()]: v });
+            this.setValue({ [this.currentLanguage()]: v }, { origin: 'system' });
         }
         this.translationService.langChanges$.subscribe((i) => {
             this.currentLanguage.set(i);
@@ -8922,10 +8983,10 @@ class AXPTextBoxWidgetEditComponent extends AXPValueWidgetComponent {
             const v = this.getValue();
             const obj = v && typeof v === 'object' && !Array.isArray(v) ? { ...v } : {};
             obj[this.currentLanguage()] = e.value ?? '';
-            this.setValue(obj);
+            this.setUserValue(obj);
         }
         else {
-            this.setValue(e.value ?? '');
+            this.setUserValue(e.value ?? '');
         }
     }
     getCurrentText() {
@@ -14974,6 +15035,10 @@ class AXPItemConfiguratorWidgetEditComponent extends AXPValueWidgetComponent {
         //#endregion
         //#region ----   State Signals   ----
         this.isInitialized = signal(false, ...(ngDevMode ? [{ debugName: "isInitialized" }] : /* istanbul ignore next */ []));
+        /** True while syncing models from shared context (discard/load); writes use system origin. */
+        this.hydratingFromContext = signal(false, ...(ngDevMode ? [{ debugName: "hydratingFromContext" }] : /* istanbul ignore next */ []));
+        this.baseline = signal(null, ...(ngDevMode ? [{ debugName: "baseline" }] : /* istanbul ignore next */ []));
+        this.isDirtySignal = signal(false, ...(ngDevMode ? [{ debugName: "isDirtySignal" }] : /* istanbul ignore next */ []));
         //#endregion
         //#region ----   Models   ----
         this.selectedItemIdModel = model('', ...(ngDevMode ? [{ debugName: "selectedItemIdModel" }] : /* istanbul ignore next */ []));
@@ -15027,6 +15092,7 @@ class AXPItemConfiguratorWidgetEditComponent extends AXPValueWidgetComponent {
         }, ...(ngDevMode ? [{ debugName: "loadNamedDataSourceEffect" }] : /* istanbul ignore next */ []));
         this.syncValueToConfigurator = effect(() => {
             const value = this.getValue();
+            this.hydratingFromContext.set(true);
             if (value && value.type) {
                 const sid = untracked(() => this.selectedItemIdModel());
                 const vals = untracked(() => this.valuesModel());
@@ -15048,6 +15114,8 @@ class AXPItemConfiguratorWidgetEditComponent extends AXPValueWidgetComponent {
                     }
                 });
             }
+            untracked(() => this.syncBaselineFromModels());
+            queueMicrotask(() => this.hydratingFromContext.set(false));
         }, ...(ngDevMode ? [{ debugName: "syncValueToConfigurator" }] : /* istanbul ignore next */ []));
         this.syncConfiguratorToValue = effect(() => {
             const sid = this.selectedItemIdModel();
@@ -15056,26 +15124,65 @@ class AXPItemConfiguratorWidgetEditComponent extends AXPValueWidgetComponent {
                 return;
             }
             const currentValue = untracked(() => this.getValue());
-            const empty = { type: '', options: {} };
-            if (!sid) {
-                if (!isEqual(currentValue ?? empty, empty)) {
-                    untracked(() => {
-                        this.setValue(empty);
-                    });
-                }
+            const next = this.buildWidgetNode(sid, vals);
+            if (isEqual(next, currentValue)) {
                 return;
             }
-            const next = {
-                ...(currentValue && typeof currentValue === 'object' ? currentValue : {}),
-                type: sid,
-                options: vals,
-            };
-            if (!isEqual(next, currentValue)) {
-                untracked(() => {
-                    this.setValue(next);
-                });
-            }
+            const origin = this.hydratingFromContext() ? 'system' : 'user';
+            untracked(() => {
+                this.setValue(next, { origin });
+            });
         }, ...(ngDevMode ? [{ debugName: "syncConfiguratorToValue" }] : /* istanbul ignore next */ []));
+        this.evaluateDirty = effect(() => {
+            if (!this.isInitialized()) {
+                return;
+            }
+            const base = this.baseline();
+            if (base == null) {
+                return;
+            }
+            const sid = this.selectedItemIdModel();
+            const vals = this.valuesModel();
+            const current = this.buildWidgetNode(sid, vals);
+            const dirty = !isEqual(current, base);
+            this.setDirtyState(dirty);
+        }, ...(ngDevMode ? [{ debugName: "evaluateDirty" }] : /* istanbul ignore next */ []));
+    }
+    //#endregion
+    //#region ----   Widget API   ----
+    api() {
+        return {
+            isDirty: () => this.isDirtySignal(),
+        };
+    }
+    //#endregion
+    //#region ----   Utility Methods   ----
+    buildWidgetNode(sid, vals) {
+        if (!sid) {
+            return { type: '', options: {} };
+        }
+        const currentValue = untracked(() => this.getValue());
+        return {
+            ...(currentValue && typeof currentValue === 'object' ? currentValue : {}),
+            type: sid,
+            options: vals,
+        };
+    }
+    syncBaselineFromModels() {
+        if (!this.isInitialized()) {
+            return;
+        }
+        const sid = this.selectedItemIdModel();
+        const vals = this.valuesModel();
+        this.baseline.set(cloneDeep(this.buildWidgetNode(sid, vals)));
+        this.setDirtyState(false);
+    }
+    setDirtyState(dirty) {
+        if (this.isDirtySignal() === dirty) {
+            return;
+        }
+        this.isDirtySignal.set(dirty);
+        this.layoutService.notifyWidgetDirtyChanged();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPItemConfiguratorWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPItemConfiguratorWidgetEditComponent, isStandalone: true, selector: "axp-item-configurator-widget-edit", inputs: { selectedItemIdModel: { classPropertyName: "selectedItemIdModel", publicName: "selectedItemIdModel", isSignal: true, isRequired: false, transformFunction: null }, valuesModel: { classPropertyName: "valuesModel", publicName: "valuesModel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedItemIdModel: "selectedItemIdModelChange", valuesModel: "valuesModelChange" }, usesInheritance: true, ngImport: i0, template: `