@acorex/platform 21.0.0-next.24 → 21.0.0-next.33

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

@@ -2,9 +2,10 @@ import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Injectable, inject, input, model, signal, effect, output, viewChild, ChangeDetectionStrategy, Component, NgModule, EventEmitter, Output } from '@angular/core';
+import { provideCommandSetups } from '@acorex/platform/runtime';
 import { AXPopupService } from '@acorex/components/popup';
 import * as i1 from '@acorex/platform/layout/widget-core';
-import { AXPWidgetSerializationHelper, AXPWidgetContainerComponent, AXPPageStatus, AXPWidgetCoreModule } from '@acorex/platform/layout/widget-core';
+import { AXPWidgetSerializationHelper, AXPWidgetContainerComponent, AXPPageStatus, AXPWidgetCoreModule, AXPWidgetRegistryService } from '@acorex/platform/layout/widget-core';
 import { cloneDeep, isNil, set, isEqual } from 'lodash-es';
 import * as i2 from '@acorex/components/form';
 import { AXFormComponent, AXFormModule } from '@acorex/components/form';
@@ -17,9 +18,10 @@ import * as i3 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import { AXBasePageComponent } from '@acorex/components/page';
 import * as i6 from '@acorex/core/translation';
-import { AXTranslationModule } from '@acorex/core/translation';
+import { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';
 import * as i4 from '@acorex/platform/core';
-import { AXPExpressionEvaluatorService, AXPComponentSlotModule } from '@acorex/platform/core';
+import { AXPExpressionEvaluatorService, AXPComponentSlotModule, AXPContextStore, AXPMultiLanguageStringResolverService } from '@acorex/platform/core';
+import { AXP_ENTITY_DEFINITION_CRUD_SERVICE } from '@acorex/platform/domain';
 
 class AXPLayoutConversionService {
     constructor() {
@@ -223,9 +225,16 @@ class AXPLayoutConversionService {
         const keyParts = [];
         keyParts.push(`groups:${formDefinition.groups.length}`);
         formDefinition.groups.forEach((group, groupIndex) => {
-            keyParts.push(`g${groupIndex}:${group.name}:${group.parameters.length}`);
+            // Include group.mode so view vs edit (or mixed) layouts do not share a cached widget tree.
+            const groupModePart = group.mode ?? '_';
+            keyParts.push(`g${groupIndex}:${group.name}:${group.parameters.length}:${groupModePart}`);
+            keyParts.push(`gL${groupIndex}:${JSON.stringify(group.title ?? null)}:${JSON.stringify(group.description ?? null)}`);
             group.parameters.forEach((param, paramIndex) => {
-                keyParts.push(`p${groupIndex}.${paramIndex}:${param.path}:${param.widget.type}`);
+                // Field mode must be part of the key; otherwise metadata forms that only differ by
+                // view/edit (same paths and widget types) incorrectly reuse the first cached tree.
+                const fieldModePart = param.mode ?? '_';
+                keyParts.push(`p${groupIndex}.${paramIndex}:${param.path}:${param.widget.type}:${fieldModePart}`);
+                keyParts.push(`pL${groupIndex}.${paramIndex}:${JSON.stringify(param.title ?? null)}:${JSON.stringify(param.description ?? null)}:${JSON.stringify(param.badge ?? null)}`);
             });
         });
         if (formDefinition.mode) {
@@ -286,10 +295,10 @@ class AXPLayoutConversionService {
         }
         return Math.abs(hash).toString(36); // Convert to base36 for shorter string
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPLayoutConversionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPLayoutConversionService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutConversionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutConversionService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPLayoutConversionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutConversionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -406,10 +415,10 @@ class AXPLayoutBuilderService {
     create() {
         return new LayoutBuilder(this.popupService);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPLayoutBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPLayoutBuilderService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutBuilderService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPLayoutBuilderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutBuilderService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -591,6 +600,7 @@ class BaseContainerBuilder {
             'number-editor',
             'select-editor',
             'lookup-editor',
+            'entity-definition-provider-editor',
             'selection-list-editor',
             'date-time-editor',
             'toggle-editor',
@@ -693,24 +703,30 @@ class BaseContainerMixin extends BaseContainerBuilder {
 class LayoutContainerMixin extends BaseContainerMixin {
     layout(value) {
         // Map layout intent to grid item sizing so containers like `form-field`
-        // can span multiple columns inside grid/fieldset layouts.
+        // can span multiple columns/rows inside grid/fieldset layouts.
         if (!this.containerState.options)
             this.containerState.options = {};
         if (typeof value === 'number') {
-            // Direct numeric shorthand → colSpan
             this.containerState.options.colSpan = value;
         }
         else if (value) {
-            // Try to extract a reasonable colSpan from breakpoint positions
             const positions = value.positions;
             if (positions) {
-                const colSpan = positions?.lg?.colSpan ??
-                    positions?.xl?.colSpan ??
-                    positions?.xxl?.colSpan ??
-                    positions?.md?.colSpan ??
-                    positions?.sm?.colSpan;
-                if (colSpan != null) {
-                    this.containerState.options.colSpan = colSpan;
+                const placement = positions?.lg ?? positions?.xl ?? positions?.xxl ?? positions?.md ?? positions?.sm;
+                if (placement) {
+                    const opts = this.containerState.options;
+                    if (placement.colSpan != null)
+                        opts.colSpan = placement.colSpan;
+                    if (placement.colStart != null)
+                        opts.colStart = placement.colStart;
+                    if (placement.colEnd != null)
+                        opts.colEnd = placement.colEnd;
+                    if (placement.rowSpan != null)
+                        opts.rowSpan = placement.rowSpan;
+                    if (placement.rowStart != null)
+                        opts.rowStart = placement.rowStart;
+                    if (placement.rowEnd != null)
+                        opts.rowEnd = placement.rowEnd;
                 }
             }
         }
@@ -929,6 +945,7 @@ class WidgetContainerMixin extends ChildContainerMixin {
             'number-editor',
             'select-editor',
             'lookup-editor',
+            'entity-definition-provider-editor',
             'selection-list-editor',
             'date-time-editor',
             'toggle-editor',
@@ -984,6 +1001,34 @@ class FlexContainerBuilder extends WidgetContainerMixin {
  * Grid Container Builder - Liskov Substitution Principle
  * Extends WidgetContainerMixin to inherit all common functionality
  */
+/**
+ * Extracts flat grid-item options from AXPGridLayoutOptions for grid-item-layout widget.
+ * Uses first available breakpoint (lg, xl, md, sm).
+ */
+function toGridItemOptions(layoutOptions) {
+    if (!layoutOptions?.positions)
+        return { colSpan: 12 };
+    const positions = layoutOptions.positions;
+    const placement = positions['lg'] ?? positions['xl'] ?? positions['xxl'] ?? positions['md'] ?? positions['sm'];
+    if (!placement)
+        return { colSpan: 12 };
+    const opts = {};
+    if (placement['colSpan'] != null)
+        opts['colSpan'] = placement['colSpan'];
+    if (placement['colStart'] != null)
+        opts['colStart'] = placement['colStart'];
+    if (placement['colEnd'] != null)
+        opts['colEnd'] = placement['colEnd'];
+    if (placement['rowSpan'] != null)
+        opts['rowSpan'] = placement['rowSpan'];
+    if (placement['rowStart'] != null)
+        opts['rowStart'] = placement['rowStart'];
+    if (placement['rowEnd'] != null)
+        opts['rowEnd'] = placement['rowEnd'];
+    if (Object.keys(opts).length === 0)
+        opts['colSpan'] = 12;
+    return opts;
+}
 class GridContainerBuilder extends WidgetContainerMixin {
     constructor() {
         super('grid-layout');
@@ -992,6 +1037,21 @@ class GridContainerBuilder extends WidgetContainerMixin {
         this.containerState.options = { ...this.containerState.options, ...options };
         return this;
     }
+    item(layoutOptions, delegate) {
+        const fieldset = new FieldsetContainerBuilder();
+        fieldset.withInheritanceContext(this.inheritanceContext);
+        delegate(fieldset);
+        const fieldsetNode = fieldset.build();
+        const gridItemOptions = toGridItemOptions(layoutOptions);
+        const gridItemNode = {
+            type: 'grid-item-layout',
+            options: gridItemOptions,
+            children: [fieldsetNode],
+        };
+        this.ensureChildren();
+        this.containerState.children.push(gridItemNode);
+        return this;
+    }
     // Individual fluent methods for Grid
     setColumns(columns) {
         return this.setOptions({ grid: { default: { columns } } });
@@ -1761,10 +1821,19 @@ class ActionBuilder {
         return this;
     }
     custom(action) {
-        if (!this.dialogBuilder['dialogState'].actions.footer.suffix) {
-            this.dialogBuilder['dialogState'].actions.footer.suffix = [];
+        const position = action.position ?? 'suffix';
+        if (position === 'prefix') {
+            if (!this.dialogBuilder['dialogState'].actions.footer.prefix) {
+                this.dialogBuilder['dialogState'].actions.footer.prefix = [];
+            }
+            this.dialogBuilder['dialogState'].actions.footer.prefix.push(action);
+        }
+        else {
+            if (!this.dialogBuilder['dialogState'].actions.footer.suffix) {
+                this.dialogBuilder['dialogState'].actions.footer.suffix = [];
+            }
+            this.dialogBuilder['dialogState'].actions.footer.suffix.push(action);
         }
-        this.dialogBuilder['dialogState'].actions.footer.suffix.push(action);
         return this;
     }
 }
@@ -1913,22 +1982,22 @@ class AXPLayoutRendererComponent {
         /**
          * Form definition containing groups and fields OR widget tree
          */
-        this.layout = input.required(...(ngDevMode ? [{ debugName: "layout" }] : []));
+        this.layout = input.required(...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
         /**
          * Form context/model data
          */
-        this.context = model({}, ...(ngDevMode ? [{ debugName: "context" }] : []));
+        this.context = model({}, ...(ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []));
         /**
          * Form appearance and density styling (normal, compact, spacious)
          */
-        this.look = input('fieldset', ...(ngDevMode ? [{ debugName: "look" }] : []));
+        this.look = input('fieldset', ...(ngDevMode ? [{ debugName: "look" }] : /* istanbul ignore next */ []));
         /**
          * Default form mode. Can be overridden by section/group and field.
          */
-        this.mode = input('edit', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+        this.mode = input('edit', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
         //#endregion
         //#region ----   Widget Tree Conversion   ----
-        this.widgetTree = signal(null, ...(ngDevMode ? [{ debugName: "widgetTree" }] : []));
+        this.widgetTree = signal(null, ...(ngDevMode ? [{ debugName: "widgetTree" }] : /* istanbul ignore next */ []));
         /**
          * Convert layout data to widget tree when inputs change
          */
@@ -1953,7 +2022,7 @@ class AXPLayoutRendererComponent {
             if (!isEqual(prev, tree)) {
                 this.widgetTree.set(tree);
             }
-        }, ...(ngDevMode ? [{ debugName: "conversionEffect" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "conversionEffect" }] : /* istanbul ignore next */ []));
         //#endregion
         //#region ----   Outputs   ----
         /**
@@ -1966,12 +2035,12 @@ class AXPLayoutRendererComponent {
         this.validityChange = output();
         //#endregion
         //#region ----   Properties   ----
-        this.form = viewChild(AXFormComponent, ...(ngDevMode ? [{ debugName: "form" }] : []));
-        this.container = viewChild(AXPWidgetContainerComponent, ...(ngDevMode ? [{ debugName: "container" }] : []));
+        this.form = viewChild(AXFormComponent, ...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
+        this.container = viewChild(AXPWidgetContainerComponent, ...(ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []));
         /**
          * Internal context signal for reactivity
          */
-        this.internalContext = signal({}, ...(ngDevMode ? [{ debugName: "internalContext" }] : []));
+        this.internalContext = signal({}, ...(ngDevMode ? [{ debugName: "internalContext" }] : /* istanbul ignore next */ []));
         /**
          * Initial context for reset functionality
          */
@@ -1984,7 +2053,7 @@ class AXPLayoutRendererComponent {
         this.#contextSyncEffect = effect(() => {
             const ctx = this.context() ?? {};
             this.contextUpdateSubject.next(ctx);
-        }, ...(ngDevMode ? [{ debugName: "#contextSyncEffect" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "#contextSyncEffect" }] : /* istanbul ignore next */ []));
         /**
          * Effect to handle widget tree status changes
          */
@@ -1993,7 +2062,7 @@ class AXPLayoutRendererComponent {
             if (widgetTree) {
                 this.container()?.builderService.setStatus(AXPPageStatus.Rendered);
             }
-        }, ...(ngDevMode ? [{ debugName: "#widgetStatusEffect" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "#widgetStatusEffect" }] : /* istanbul ignore next */ []));
     }
     //#endregion
     //#region ----   Lifecycle Methods   ----
@@ -2133,8 +2202,8 @@ class AXPLayoutRendererComponent {
     isWidgetNode(data) {
         return data && typeof data === 'object' && 'type' in data && typeof data.type === 'string';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPLayoutRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPLayoutRendererComponent, isStandalone: true, selector: "axp-layout-renderer", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { context: "contextChange", contextInitiated: "contextInitiated", validityChange: "validityChange" }, viewQueries: [{ propertyName: "form", first: true, predicate: AXFormComponent, descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: AXPWidgetContainerComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPLayoutRendererComponent, isStandalone: true, selector: "axp-layout-renderer", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { context: "contextChange", contextInitiated: "contextInitiated", validityChange: "validityChange" }, viewQueries: [{ propertyName: "form", first: true, predicate: AXFormComponent, descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: AXPWidgetContainerComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     <ax-form>
       <axp-widgets-container [context]="internalContext()" (onContextChanged)="handleContextChanged($event)">
         @if (widgetTree()) {
@@ -2142,11 +2211,11 @@ class AXPLayoutRendererComponent {
         }
       </axp-widgets-container>
     </ax-form>
-  `, isInline: true, styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn", "inUserInteractionActive"], outputs: ["onValidate", "updateOnChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn", "inUserInteractionActive"], outputs: ["onValidate", "updateOnChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPLayoutRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-layout-renderer', standalone: true, imports: [CommonModule, AXPWidgetCoreModule, AXFormModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'axp-layout-renderer', standalone: true, imports: [AXPWidgetCoreModule, AXFormModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <ax-form>
       <axp-widgets-container [context]="internalContext()" (onContextChanged)="handleContextChanged($event)">
         @if (widgetTree()) {
@@ -2157,16 +2226,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
   `, styles: [":host{display:block;width:100%}\n"] }]
         }], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }, { type: i0.Output, args: ["contextChange"] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], contextInitiated: [{ type: i0.Output, args: ["contextInitiated"] }], validityChange: [{ type: i0.Output, args: ["validityChange"] }], form: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXFormComponent), { isSignal: true }] }], container: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPWidgetContainerComponent), { isSignal: true }] }] } });
 
+/** Registration key for {@link AXPPreviewWidgetFieldCommand}; lives alone so `LayoutBuilderModule` can reference it without static-importing the command implementation. */
+const AXP_PREVIEW_WIDGET_FIELD_COMMAND_KEY = 'Widget:Preview';
+
 class LayoutBuilderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LayoutBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: LayoutBuilderModule, imports: [CommonModule, AXPLayoutRendererComponent], exports: [AXPLayoutRendererComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LayoutBuilderModule, providers: [AXPLayoutBuilderService], imports: [CommonModule, AXPLayoutRendererComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LayoutBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: LayoutBuilderModule, imports: [CommonModule, AXPLayoutRendererComponent], exports: [AXPLayoutRendererComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LayoutBuilderModule, providers: [
+            AXPLayoutBuilderService,
+            provideCommandSetups([
+                {
+                    key: AXP_PREVIEW_WIDGET_FIELD_COMMAND_KEY,
+                    command: () => Promise.resolve().then(function () { return previewWidgetField_command; }).then((c) => c.AXPPreviewWidgetFieldCommand),
+                },
+            ]),
+        ], imports: [CommonModule, AXPLayoutRendererComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LayoutBuilderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LayoutBuilderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, AXPLayoutRendererComponent],
-                    providers: [AXPLayoutBuilderService],
+                    providers: [
+                        AXPLayoutBuilderService,
+                        provideCommandSetups([
+                            {
+                                key: AXP_PREVIEW_WIDGET_FIELD_COMMAND_KEY,
+                                command: () => Promise.resolve().then(function () { return previewWidgetField_command; }).then((c) => c.AXPPreviewWidgetFieldCommand),
+                            },
+                        ]),
+                    ],
                     exports: [AXPLayoutRendererComponent],
                 }]
         }] });
@@ -2178,17 +2266,17 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
         super(...arguments);
         this.result = new EventEmitter();
         this.expressionEvaluator = inject(AXPExpressionEvaluatorService);
-        this.context = signal({}, ...(ngDevMode ? [{ debugName: "context" }] : []));
+        this.context = signal({}, ...(ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []));
         // This will be set by the popup service automatically - same as dynamic-dialog
         this.callBack = () => { };
-        this.isDialogLoading = signal(false, ...(ngDevMode ? [{ debugName: "isDialogLoading" }] : []));
+        this.isDialogLoading = signal(false, ...(ngDevMode ? [{ debugName: "isDialogLoading" }] : /* istanbul ignore next */ []));
         // Aggregated actions for footer rendering
-        this.footerPrefix = signal([], ...(ngDevMode ? [{ debugName: "footerPrefix" }] : []));
-        this.footerSuffix = signal([], ...(ngDevMode ? [{ debugName: "footerSuffix" }] : []));
+        this.footerPrefix = signal([], ...(ngDevMode ? [{ debugName: "footerPrefix" }] : /* istanbul ignore next */ []));
+        this.footerSuffix = signal([], ...(ngDevMode ? [{ debugName: "footerSuffix" }] : /* istanbul ignore next */ []));
         //#endregion
         //#region ----   View Accessors   ----
         // Access the internal layout renderer to reach the widgets container injector
-        this.layoutRenderer = viewChild(AXPLayoutRendererComponent, ...(ngDevMode ? [{ debugName: "layoutRenderer" }] : []));
+        this.layoutRenderer = viewChild(AXPLayoutRendererComponent, ...(ngDevMode ? [{ debugName: "layoutRenderer" }] : /* istanbul ignore next */ []));
         this.#eff = effect(() => {
             let count = 0;
             this.aggregateAndEvaluateActions();
@@ -2209,7 +2297,7 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
                     this.aggregateAndEvaluateActions();
                 }, 200);
             }
-        }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "#eff" }] : /* istanbul ignore next */ []));
     }
     //#endregion
     //#region ----   Lifecycle   ----
@@ -2239,14 +2327,14 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
         return this.isDialogLoading();
     }
     async executeAction(action) {
-        const cmd = action.command;
+        const cmd = this.resolveActionCommandName(action.command);
         if (cmd !== 'cancel') {
             const isValid = await this.layoutRenderer()?.validate();
             if (!isValid?.result) {
                 return;
             }
         }
-        if (typeof cmd === 'string' && cmd.startsWith('widget:')) {
+        if (cmd?.startsWith('widget:')) {
             const parsed = this.parseWidgetCommand(cmd);
             if (parsed.widgetName && parsed.action) {
                 await this.executeWidgetApi(parsed.widgetName, parsed.action);
@@ -2260,7 +2348,7 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
             const dialogRef = {
                 close: (res) => this.close(res),
                 context: () => this.context(),
-                action: () => cmd ?? undefined,
+                action: () => action.command ?? undefined,
                 setLoading: (loading) => this.isDialogLoading.set(loading),
             };
             try {
@@ -2294,6 +2382,20 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
                 this.isDialogLoading.set(loading);
             },
         });
+        // Without `onAction`, only the configured cancel action dismisses the dialog (not submit/custom).
+        if (cmd === 'cancel') {
+            await this.close(result);
+        }
+    }
+    /** Resolves footer/widget action command to a string (e.g. `cancel`, `submit`, `widget:...`). */
+    resolveActionCommandName(command) {
+        if (typeof command === 'string') {
+            return command;
+        }
+        if (command && typeof command === 'object' && 'name' in command) {
+            return command.name;
+        }
+        return undefined;
     }
     parseWidgetCommand(cmd) {
         // Expected 'widget:<widgetName>.<action>'
@@ -2420,8 +2522,8 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
             return undefined;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPDialogRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPDialogRendererComponent, isStandalone: true, selector: "axp-dialog-renderer", outputs: { result: "result" }, viewQueries: [{ propertyName: "layoutRenderer", first: true, predicate: AXPLayoutRendererComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDialogRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDialogRendererComponent, isStandalone: true, selector: "axp-dialog-renderer", outputs: { result: "result" }, providers: [AXPContextStore], viewQueries: [{ propertyName: "layoutRenderer", first: true, predicate: AXPLayoutRendererComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <axp-component-slot name="dialog-header" [context]="context()"></axp-component-slot>
     <div class="ax-p-4">
       <axp-layout-renderer
@@ -2476,9 +2578,9 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
         </ax-suffix>
       </ax-footer>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXPLayoutRendererComponent, selector: "axp-layout-renderer", inputs: ["layout", "context", "look", "mode"], outputs: ["contextChange", "contextInitiated", "validityChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i3.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPComponentSlotModule }, { kind: "directive", type: i4.AXPComponentSlotDirective, selector: "axp-component-slot", inputs: ["name", "host", "context"], exportAs: ["slot"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXPLayoutRendererComponent, selector: "axp-layout-renderer", inputs: ["layout", "context", "look", "mode"], outputs: ["contextChange", "contextInitiated", "validityChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i3.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPComponentSlotModule }, { kind: "directive", type: i4.AXPComponentSlotDirective, selector: "axp-component-slot", inputs: ["name", "host", "context"], exportAs: ["slot"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPDialogRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDialogRendererComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-dialog-renderer',
@@ -2492,6 +2594,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         AXTranslationModule,
                         AXPComponentSlotModule,
                     ],
+                    providers: [AXPContextStore],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     <axp-component-slot name="dialog-header" [context]="context()"></axp-component-slot>
     <div class="ax-p-4">
@@ -2558,9 +2662,191 @@ var dialogRenderer_component = /*#__PURE__*/Object.freeze({
     AXPDialogRendererComponent: AXPDialogRendererComponent
 });
 
+//#region ----   Imports   ----
+/**
+ * `customWidget` only forwards keys from its options bag into the built node via `addSingleWidget`.
+ * Designer / configurator persist `defaultValue` (and other extended fields) on the widget node root;
+ * spreading `options` alone drops them, so preview never applied defaults.
+ */
+/**
+ * Widget options are sometimes persisted with an extra nesting (`options.options`) when context
+ * was merged incorrectly. Flatten so list/data-source resolution sees `dataSource` at the top level.
+ */
+function optionsBagForPreview(node) {
+    const raw = (node.options ?? {});
+    const inner = raw['options'];
+    if (inner !== undefined && typeof inner === 'object' && !Array.isArray(inner)) {
+        const { options: _nested, ...rest } = raw;
+        return { ...rest, ...inner };
+    }
+    return { ...raw };
+}
+function extendedNodePropsForPreview(node) {
+    const out = {};
+    if (node.defaultValue !== undefined) {
+        out['defaultValue'] = node.defaultValue;
+    }
+    if (node.triggers !== undefined) {
+        out['triggers'] = node.triggers;
+    }
+    if (node.meta !== undefined) {
+        out['meta'] = node.meta;
+    }
+    if (node.valueTransforms !== undefined) {
+        out['valueTransforms'] = node.valueTransforms;
+    }
+    if (node.visible !== undefined) {
+        out['visible'] = node.visible;
+    }
+    if (node.mode !== undefined) {
+        out['mode'] = node.mode;
+    }
+    if (node.children !== undefined) {
+        out['children'] = node.children;
+    }
+    return out;
+}
+//#endregion
+//#region ----   Command   ----
+/**
+ * Opens a dialog that previews a widget configuration (same behavior as the preview button on
+ * `axp-widget-field-configurator`). Invoked from that component and from entity list actions.
+ */
+class AXPPreviewWidgetFieldCommand {
+    constructor() {
+        this.formBuilderService = inject(AXPLayoutBuilderService);
+        this.widgetRegistry = inject(AXPWidgetRegistryService);
+        this.translationService = inject(AXTranslationService);
+        this.mlResolver = inject(AXPMultiLanguageStringResolverService);
+        this.crudService = inject(AXP_ENTITY_DEFINITION_CRUD_SERVICE, { optional: true });
+    }
+    async execute(input) {
+        try {
+            const merged = this.mergeInvocation(input);
+            const currentWidget = this.normalizeWidget(merged['widget'] ?? merged['interface']);
+            if (!currentWidget?.type) {
+                return {
+                    success: false,
+                    message: { text: (await this.translationService.translateAsync('@general:messages.invalid-data')) || 'Invalid data' },
+                };
+            }
+            const fieldName = String(merged['fieldName'] ?? merged['name'] ?? 'Field');
+            const rawTitle = (merged['fieldTitle'] ?? merged['title']);
+            const fieldTitleLabel = this.resolveFieldTitleLabel(rawTitle, fieldName);
+            const dialogTitle = (await this.resolveWidgetDisplayTitle(currentWidget.type)) ||
+                currentWidget.type ||
+                fieldTitleLabel;
+            const previewWidgetOptions = {
+                ...optionsBagForPreview(currentWidget),
+                name: fieldName,
+                ...extendedNodePropsForPreview(currentWidget),
+            };
+            const dialogOutcome = await this.formBuilderService
+                .create()
+                .dialog((dialog) => {
+                dialog
+                    .setTitle(dialogTitle)
+                    .setSize('md')
+                    .setCloseButton(true)
+                    .setContext({})
+                    .content((layoutBuilder) => {
+                    layoutBuilder.formField(fieldTitleLabel, (formField) => {
+                        formField.customWidget(currentWidget.type, previewWidgetOptions);
+                    });
+                })
+                    .setActions((actions) => actions.cancel('@general:actions.close.title'));
+            })
+                .show();
+            const cancelled = this.isCancelDialogOutcome(dialogOutcome);
+            return {
+                success: !cancelled,
+                message: { text: '' },
+            };
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : 'Unknown error';
+            return {
+                success: false,
+                message: { text: message },
+            };
+        }
+    }
+    mergeInvocation(input) {
+        const contextOptions = input.__context__?.options;
+        const ctxData = input.__context__?.data;
+        const { __context__: _ctx, ...rest } = input;
+        return {
+            ...(ctxData ?? {}),
+            ...(contextOptions ?? {}),
+            ...rest,
+        };
+    }
+    normalizeWidget(raw) {
+        if (raw == null)
+            return null;
+        if (typeof raw === 'string') {
+            const t = raw.trim();
+            return t ? { type: t, options: {} } : null;
+        }
+        if (typeof raw === 'object' && !Array.isArray(raw) && 'type' in raw) {
+            const w = raw;
+            return w.type ? cloneDeep(w) : null;
+        }
+        return null;
+    }
+    resolveFieldTitleLabel(raw, fallback) {
+        let source = fallback;
+        if (raw !== undefined && raw !== null) {
+            if (typeof raw === 'string') {
+                if (raw.trim() !== '') {
+                    source = raw;
+                }
+            }
+            else if (typeof raw === 'object' && !Array.isArray(raw) && Object.keys(raw).length > 0) {
+                source = raw;
+            }
+        }
+        return this.mlResolver.resolve(source);
+    }
+    isCancelDialogOutcome(outcome) {
+        if (outcome == null) {
+            return false;
+        }
+        const ref = outcome;
+        if (typeof ref.action !== 'function') {
+            return false;
+        }
+        return ref.action() === 'cancel';
+    }
+    async resolveWidgetDisplayTitle(widgetType) {
+        const crud = this.crudService;
+        if (crud) {
+            const interfaces = await crud.listInterfaces();
+            const iface = interfaces.find((d) => d.name === widgetType);
+            return iface?.title ?? iface?.name;
+        }
+        const config = this.widgetRegistry.getOptional(widgetType);
+        if (!config) {
+            return undefined;
+        }
+        const resolved = this.mlResolver.resolve(config.title);
+        return resolved || undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPPreviewWidgetFieldCommand, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPPreviewWidgetFieldCommand }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPPreviewWidgetFieldCommand, decorators: [{
+            type: Injectable
+        }] });
+
+var previewWidgetField_command = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPPreviewWidgetFieldCommand: AXPPreviewWidgetFieldCommand
+});
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AXPDialogRendererComponent, AXPLayoutBuilderService, AXPLayoutConversionService, AXPLayoutRendererComponent, LayoutBuilderModule };
+export { AXPDialogRendererComponent, AXPLayoutBuilderService, AXPLayoutConversionService, AXPLayoutRendererComponent, AXPPreviewWidgetFieldCommand, AXP_PREVIEW_WIDGET_FIELD_COMMAND_KEY, LayoutBuilderModule };
 //# sourceMappingURL=acorex-platform-layout-builder.mjs.map