@acorex/platform 21.0.0-next.8 → 21.0.0-next.83

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

@@ -1,14 +1,19 @@
-import * as i4 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import * as i5 from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, inject, input, model, signal, effect, output, viewChild, ChangeDetectionStrategy, Component, NgModule, EventEmitter, Output, Input } from '@angular/core';
+import { Injectable, inject, input, model, signal, computed, effect, output, viewChild, ChangeDetectionStrategy, Component, NgModule, EventEmitter, ElementRef, DestroyRef, Output } from '@angular/core';
+import { provideCommandSetups, AXPCommandService } from '@acorex/platform/runtime';
 import { AXPopupService } from '@acorex/components/popup';
+import * as i4 from '@acorex/platform/core';
+import { normalizeKeyboardShortcuts, AXPHookService, findOverlayContainerAncestor, getNestedVisibleOverlayPanes, getTopVisibleOverlayContainer, AXPExpressionEvaluatorService, AXPComponentSlotModule, AXPContextStore } from '@acorex/platform/core';
 import * as i1 from '@acorex/platform/layout/widget-core';
-import { AXPWidgetSerializationHelper, AXPWidgetContainerComponent, AXPPageStatus, AXPWidgetCoreModule } from '@acorex/platform/layout/widget-core';
-import { cloneDeep, isNil, set, isEqual } from 'lodash-es';
+import { AXPWidgetSerializationHelper, AXPWidgetContainerComponent, AXPPageStatus, AXPWidgetCoreModule, AXPWidgetRegistryService } from '@acorex/platform/layout/widget-core';
+import { cloneDeep, isNil, set, isEqual, merge } from 'lodash-es';
 import * as i2 from '@acorex/components/form';
 import { AXFormComponent, AXFormModule } from '@acorex/components/form';
 import { Subject, debounceTime, distinctUntilChanged, startWith } from 'rxjs';
+import { AXP_PREVIEW_WIDGET_FIELD_COMMAND_KEY } from '@acorex/platform/contracts';
+import { AXOverlayService } from '@acorex/cdk/overlay';
 import * as i1$1 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
 import * as i2$1 from '@acorex/components/decorators';
@@ -16,9 +21,194 @@ import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i3 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import { AXBasePageComponent } from '@acorex/components/page';
-import * as i5 from '@acorex/core/translation';
-import { AXTranslationModule } from '@acorex/core/translation';
-import { AXPExpressionEvaluatorService } from '@acorex/platform/core';
+import * as i6 from '@acorex/core/translation';
+import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
+import { AXPUnsavedChangesConfirmService } from '@acorex/platform/common';
+import { AXP_ENTITY_DEFINITION_CRUD_SERVICE } from '@acorex/platform/domain';
+
+//#region ----   Dialog Action Shortcut Utilities   ----
+const DEFAULT_CANCEL_DIALOG_ACTION_SHORTCUTS = ['Esc'];
+const DEFAULT_SUBMIT_DIALOG_ACTION_SHORTCUTS = ['Enter', 'ctrl+s'];
+const PRIMARY_DIALOG_ACTION_COMMANDS = new Set(['submit', 'create', 'entity-form-done']);
+/**
+ * Parses a shortcut string such as `Enter`, `Escape`, or `ctrl+shift+s`.
+ */
+function parseDialogActionShortcut(shortcut) {
+    const parts = shortcut
+        .trim()
+        .toLowerCase()
+        .split('+')
+        .map((part) => part.trim())
+        .filter(Boolean);
+    const key = normalizeShortcutToken(parts.pop() ?? '');
+    return {
+        ctrl: parts.includes('ctrl') || parts.includes('control'),
+        shift: parts.includes('shift'),
+        alt: parts.includes('alt') || parts.includes('option'),
+        meta: parts.includes('meta') || parts.includes('cmd') || parts.includes('command'),
+        key,
+    };
+}
+/**
+ * Returns true when the keyboard event matches the given shortcut definition.
+ */
+function matchesDialogActionShortcut(event, shortcut) {
+    const parsed = parseDialogActionShortcut(shortcut);
+    if (parsed.ctrl !== event.ctrlKey) {
+        return false;
+    }
+    if (parsed.shift !== event.shiftKey) {
+        return false;
+    }
+    if (parsed.alt !== event.altKey) {
+        return false;
+    }
+    if (parsed.meta !== event.metaKey) {
+        return false;
+    }
+    return normalizeShortcutKey(event) === normalizeShortcutToken(parsed.key);
+}
+/**
+ * Resolves footer action shortcuts: defaults when omitted, merge when extras are provided, none when `[]`.
+ */
+function resolveDialogActionShortcuts(defaults, overrides) {
+    if (overrides !== undefined) {
+        if (overrides.length === 0) {
+            return undefined;
+        }
+        return flattenDialogActionShortcutChords([...defaults, ...overrides]);
+    }
+    return flattenDialogActionShortcutChords(defaults);
+}
+/**
+ * Applies built-in footer shortcuts when actions are declared without `shortcuts`
+ * (e.g. workflow `show-layout-popup` raw action config).
+ */
+function resolveConfiguredFooterActionShortcuts(command, explicit) {
+    if (explicit !== undefined) {
+        return resolveDialogActionShortcuts([], explicit);
+    }
+    if (command === 'cancel') {
+        return resolveDialogActionShortcuts(DEFAULT_CANCEL_DIALOG_ACTION_SHORTCUTS, undefined);
+    }
+    if (command && PRIMARY_DIALOG_ACTION_COMMANDS.has(command)) {
+        return resolveDialogActionShortcuts(DEFAULT_SUBMIT_DIALOG_ACTION_SHORTCUTS, undefined);
+    }
+    return undefined;
+}
+function flattenDialogActionShortcutChords(shortcuts) {
+    const chords = normalizeKeyboardShortcuts(shortcuts).flatMap((shortcut) => shortcut.keys);
+    const deduped = dedupeDialogActionShortcuts(chords);
+    return deduped.length ? deduped : undefined;
+}
+function dedupeDialogActionShortcuts(shortcuts) {
+    const seen = new Set();
+    const result = [];
+    for (const shortcut of shortcuts) {
+        const token = normalizeShortcutToken(shortcut);
+        if (!token || seen.has(token)) {
+            continue;
+        }
+        seen.add(token);
+        result.push(shortcut.trim());
+    }
+    return result;
+}
+function normalizeShortcutToken(key) {
+    const normalized = key.trim().toLowerCase();
+    if (normalized === 'esc') {
+        return 'escape';
+    }
+    return normalized;
+}
+/**
+ * Whether a shortcut should fire given the current focus target.
+ * Enter without modifiers is suppressed in multiline / rich-text fields.
+ */
+function shouldTriggerDialogActionShortcut(event, shortcut) {
+    const parsed = parseDialogActionShortcut(shortcut);
+    const isPlainEnter = parsed.key === 'enter' && !parsed.ctrl && !parsed.shift && !parsed.alt && !parsed.meta;
+    if (!isPlainEnter) {
+        return true;
+    }
+    return !isKeyboardTargetMultilineEditable(event.target);
+}
+function normalizeShortcutKey(event) {
+    if (event.key === 'Enter') {
+        return 'enter';
+    }
+    if (event.key === 'Escape') {
+        return 'escape';
+    }
+    if (event.key === ' ') {
+        return 'space';
+    }
+    if (event.key.length === 1) {
+        return event.key.toLowerCase();
+    }
+    const codeMatch = event.code.match(/^Key([A-Z])$/);
+    if (codeMatch) {
+        return codeMatch[1].toLowerCase();
+    }
+    const digitMatch = event.code.match(/^Digit([0-9])$/);
+    if (digitMatch) {
+        return digitMatch[1];
+    }
+    return event.key.toLowerCase();
+}
+function isKeyboardTargetMultilineEditable(target) {
+    if (!(target instanceof HTMLElement)) {
+        return false;
+    }
+    if (target.isContentEditable) {
+        return true;
+    }
+    const textarea = target.closest('textarea');
+    if (textarea && !textarea.readOnly && !textarea.disabled) {
+        return true;
+    }
+    const richText = target.closest('[contenteditable="true"]');
+    return richText instanceof HTMLElement;
+}
+//#endregion
+
+/** Fallback {@link AXPDialogRef} when the popup is dismissed without a footer action (e.g. header close). */
+function createDismissedDialogRef(context = () => ({})) {
+    return {
+        close: () => { },
+        context,
+        action: () => 'cancel',
+        setLoading: () => { },
+    };
+}
+//#endregion
+
+//#region ---- Imports ----
+//#endregion
+//#region ---- Before open ----
+/**
+ * Runs after dialog options and context are prepared and **before** footer customization and popup open.
+ * Listeners may mutate {@link AXPLayoutBuilderDialogBeforeOpenPayload.context} by reference.
+ */
+const AXP_LAYOUT_BUILDER_DIALOG_BEFORE_OPEN_HOOK_KEY = 'layout-builder.dialog.before-open';
+//#endregion
+//#region ---- Footer actions ----
+/**
+ * Runs after builder-defined footer actions exist and **before** the dialog opens.
+ * Listeners receive the live `actions.footer.prefix` / `suffix` arrays (same references as the dialog)
+ * so they may push, splice, filter, or replace items. They may also mutate {@link AXPLayoutBuilderDialogFooterPayload.context} by reference.
+ */
+const AXP_LAYOUT_BUILDER_DIALOG_CONFIG_HOOK_KEY = 'layout-builder.dialog.config';
+//#endregion
+//#region ---- Context updates (after open) ----
+/**
+ * Runs whenever the dialog layout builder context changes (debounced upstream), **after** the popup is visible.
+ * Use for side effects that depend on live context (for example values updated by widgets after render).
+ * Payload mirrors `AXPDialogRendererComponent` semantics: {@link AXPLayoutBuilderDialogContextChangedPayload.getContext},
+ * {@link AXPLayoutBuilderDialogContextChangedPayload.patchContext}, and optional loading state.
+ */
+const AXP_LAYOUT_BUILDER_DIALOG_CONTEXT_CHANGED_HOOK_KEY = 'layout-builder.dialog.context-changed';
+//#endregion
 
 class AXPLayoutConversionService {
     constructor() {
@@ -158,6 +348,10 @@ class AXPLayoutConversionService {
         if (!editorWidget.mode) {
             editorWidget.mode = fieldMode;
         }
+        const hintOpts = field.description != null &&
+            (typeof field.description !== 'string' || field.description.trim().length > 0)
+            ? { hint: field.description, hintDisplayMode: 'note' }
+            : {};
         return {
             type: 'form-field',
             name: field.path,
@@ -165,8 +359,8 @@ class AXPLayoutConversionService {
             options: {
                 label: field.title,
                 badge: field.badge,
-                description: field.description,
                 showLabel: true,
+                ...hintOpts,
             },
             children: [editorWidget], // The editor widget becomes a child of form-field
         };
@@ -209,7 +403,7 @@ class AXPLayoutConversionService {
             path: formFieldNode.name || editorWidget.name || `field-${Date.now()}`,
             title: formFieldNode.options?.['label'],
             badge: formFieldNode.options?.['badge'],
-            description: formFieldNode.options?.['description'],
+            description: formFieldNode.options?.['hint'],
             widget: editorWidget,
             mode: formFieldNode.mode,
         };
@@ -222,9 +416,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) {
@@ -285,16 +486,31 @@ 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.12", ngImport: i0, type: AXPLayoutConversionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", 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.12", 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',
                 }]
         }] });
 
+//#region ----   Dialog Close Confirmation Utilities   ----
+function normalizeDialogCloseConfirmation(value) {
+    if (value === undefined || value === false) {
+        return undefined;
+    }
+    if (value === true) {
+        return { enabled: true };
+    }
+    if (value.enabled === false) {
+        return undefined;
+    }
+    return { enabled: true, ...value };
+}
+//#endregion
+
 //#region ----   Inheritance Utilities   ----
 /**
  * Resolves inherited properties from context and local values
@@ -361,17 +577,13 @@ function collectDefaultValues(node, context = {}, isTopLevel = true) {
     const result = isTopLevel ? cloneDeep(context) : context;
     // Check if this node has a defaultValue and a path
     // Note: We check for both node.defaultValue and also look in node.options.defaultValue as fallback
-    const defaultValue = node.defaultValue !== undefined
-        ? node.defaultValue
-        : node.options?.defaultValue;
+    const defaultValue = node.defaultValue !== undefined ? node.defaultValue : node.options?.defaultValue;
     if (defaultValue !== undefined && !isNil(defaultValue) && node.path) {
         // Check if path exists in context using lodash get equivalent check
         const currentValue = getNestedValue(result, node.path);
         if (currentValue === undefined) {
             // Clone the defaultValue to avoid reference issues (especially for Date objects)
-            const clonedValue = defaultValue instanceof Date
-                ? new Date(defaultValue.getTime())
-                : cloneDeep(defaultValue);
+            const clonedValue = defaultValue instanceof Date ? new Date(defaultValue.getTime()) : cloneDeep(defaultValue);
             set(result, node.path, clonedValue);
         }
     }
@@ -402,17 +614,18 @@ function getNestedValue(obj, path) {
 class AXPLayoutBuilderService {
     constructor() {
         this.popupService = inject(AXPopupService);
+        this.hookService = inject(AXPHookService, { optional: true }) ?? undefined;
     }
     /**
      * Create a new layout builder
      */
     create() {
-        return new LayoutBuilder(this.popupService);
+        return new LayoutBuilder(this.popupService, this.hookService);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPLayoutBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", 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.12", 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',
@@ -425,8 +638,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Open/Closed: Extensible through container delegates
  */
 class LayoutBuilder {
-    constructor(popupService) {
+    constructor(popupService, hookService) {
         this.popupService = popupService;
+        this.hookService = hookService;
         this.root = {
             children: [],
             mode: 'edit',
@@ -453,7 +667,19 @@ class LayoutBuilder {
         if (delegate) {
             delegate(container);
         }
-        this.root.children.push(container.build());
+        const built = container.build();
+        // Step/dialog content usually calls flex() once; replace the default empty flex root instead of nesting flex inside flex.
+        if (this.root.type === 'flex-layout' &&
+            (!this.root.children || this.root.children.length === 0) &&
+            !this.root.options) {
+            this.root = built;
+        }
+        else {
+            if (!this.root.children) {
+                this.root.children = [];
+            }
+            this.root.children.push(built);
+        }
         return this;
     }
     panel(delegate) {
@@ -496,7 +722,7 @@ class LayoutBuilder {
         if (!this.popupService) {
             throw new Error('LayoutBuilder requires AXPopupService to create dialogs. Please inject it in the service constructor.');
         }
-        const container = new DialogContainerBuilder(this.popupService);
+        const container = new DialogContainerBuilder(this.popupService, this.hookService);
         if (delegate) {
             delegate(container);
         }
@@ -521,11 +747,21 @@ class LayoutBuilder {
         return this;
     }
     build() {
-        return {
-            type: this.root.type,
-            children: this.root.children,
-            mode: this.root.mode,
+        const r = this.root;
+        const node = {
+            type: r.type,
+            ...(r.mode !== undefined ? { mode: r.mode } : {}),
+            ...(r.children !== undefined ? { children: r.children } : {}),
+            ...(r.options !== undefined ? { options: r.options } : {}),
+            ...(r.name !== undefined ? { name: r.name } : {}),
+            ...(r.path !== undefined ? { path: r.path } : {}),
+            ...(r.visible !== undefined ? { visible: r.visible } : {}),
+            ...(r.defaultValue !== undefined ? { defaultValue: r.defaultValue } : {}),
+            ...(r.triggers !== undefined ? { triggers: r.triggers } : {}),
+            ...(r.meta !== undefined ? { meta: r.meta } : {}),
+            ...(r.valueTransforms !== undefined ? { valueTransforms: r.valueTransforms } : {}),
         };
+        return node;
     }
     /**
      * Converts the built widget node to JSON string
@@ -594,6 +830,7 @@ class BaseContainerBuilder {
             'number-editor',
             'select-editor',
             'lookup-editor',
+            'entity-definition-provider-editor',
             'selection-list-editor',
             'date-time-editor',
             'toggle-editor',
@@ -696,24 +933,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;
                 }
             }
         }
@@ -932,6 +1175,7 @@ class WidgetContainerMixin extends ChildContainerMixin {
             'number-editor',
             'select-editor',
             'lookup-editor',
+            'entity-definition-provider-editor',
             'selection-list-editor',
             'date-time-editor',
             'toggle-editor',
@@ -987,12 +1231,73 @@ 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).
+ */
+/**
+ * Deep-merges grid breakpoint buckets so sequential fluent calls (e.g. setColumns then setGap)
+ * do not wipe sibling keys under options.grid.default.
+ */
+function mergeAXPGridContainerOptions(prev, patch) {
+    const next = { ...(prev ?? {}), ...patch };
+    if (prev?.grid?.default || patch.grid?.default) {
+        next.grid = {
+            ...(prev?.grid ?? {}),
+            ...(patch.grid ?? {}),
+            default: {
+                ...(prev?.grid?.default ?? {}),
+                ...(patch.grid?.default ?? {}),
+            },
+        };
+    }
+    return next;
+}
+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');
     }
     setOptions(options) {
-        this.containerState.options = { ...this.containerState.options, ...options };
+        this.containerState.options = mergeAXPGridContainerOptions(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
@@ -1164,10 +1469,34 @@ class FormFieldBuilder extends LayoutContainerMixin {
         child.type(type);
         child.name(finalName);
         child.path(widgetPath);
-        // Remove name from options since it's now in state
-        const { name: _, ...cleanOptions } = (options || {});
+        // Extract extended properties from options (triggers, meta, valueTransforms, mode, visible, defaultValue)
+        const { name: _, triggers, meta, valueTransforms, mode: extendedMode, visible: extendedVisible, defaultValue: extendedDefaultValue, children: extendedChildren, ...cleanOptions } = (options || {});
         child.withInheritanceContext(this.inheritanceContext);
         child.options(cleanOptions);
+        // Apply extended properties if provided
+        if (extendedMode !== undefined) {
+            child.mode(extendedMode);
+        }
+        if (extendedVisible !== undefined) {
+            child.visible(extendedVisible);
+        }
+        if (extendedDefaultValue !== undefined) {
+            child.defaultValue(extendedDefaultValue);
+        }
+        // Set triggers, meta, and valueTransforms directly on widgetState
+        // These are part of AXPWidgetNode but not handled by WidgetBuilder methods
+        if (triggers !== undefined) {
+            child.widgetState.triggers = triggers;
+        }
+        if (meta !== undefined) {
+            child.widgetState.meta = meta;
+        }
+        if (valueTransforms !== undefined) {
+            child.widgetState.valueTransforms = valueTransforms;
+        }
+        if (extendedChildren !== undefined) {
+            child.widgetState.children = extendedChildren;
+        }
         // IMPORTANT: Store the widget builder, don't build it yet!
         // This allows properties set after this method (like disabled, readonly) to be applied
         this.childWidget = child;
@@ -1399,7 +1728,7 @@ class ListWidgetBuilder extends WidgetContainerMixin {
  * Uses composition instead of inheritance for cleaner separation
  */
 class DialogContainerBuilder {
-    constructor(popupService) {
+    constructor(popupService, hookService) {
         this.dialogState = {
             type: 'flex-layout', // This will be overridden when content layout exists
             children: [],
@@ -1422,6 +1751,7 @@ class DialogContainerBuilder {
         else {
             this.popupService = inject(AXPopupService);
         }
+        this.hookService = hookService ?? inject(AXPHookService, { optional: true }) ?? undefined;
     }
     setOptions(options) {
         this.dialogState.dialogOptions = { ...this.dialogState.dialogOptions, ...options };
@@ -1461,6 +1791,18 @@ class DialogContainerBuilder {
         }
         return this;
     }
+    onAction(handler) {
+        this.dialogState.dialogOptions ??= {
+            title: '',
+            size: 'md',
+            closeButton: false,
+        };
+        this.dialogState.dialogOptions.onAction = handler;
+        return this;
+    }
+    confirmCloseWhenDirty(options) {
+        return this.setOptions({ confirmCloseWhenDirty: options ?? true });
+    }
     addCustomAction(action) {
         // Add to actions based on position
         const position = action.position || 'suffix';
@@ -1507,20 +1849,44 @@ class DialogContainerBuilder {
         const dialogNode = this.build();
         // Import the dialog renderer component dynamically
         const { AXPDialogRendererComponent } = await Promise.resolve().then(function () { return dialogRenderer_component; });
-        // Collect default values from widget tree and merge into initial context
-        const initialContext = this.dialogState.dialogOptions?.context || {};
-        const contextWithDefaults = collectDefaultValues(dialogNode, initialContext);
+        this.dialogState.dialogOptions ??= {};
+        if (this.dialogState.dialogOptions.context == null || typeof this.dialogState.dialogOptions.context !== 'object') {
+            this.dialogState.dialogOptions.context = {};
+        }
+        const initialContext = this.dialogState.dialogOptions.context;
+        this.dialogState.actions ??= { footer: { prefix: [], suffix: [] } };
+        this.dialogState.actions.footer ??= { prefix: [], suffix: [] };
+        this.dialogState.actions.footer.prefix ??= [];
+        this.dialogState.actions.footer.suffix ??= [];
+        const hookService = this.hookService;
+        if (hookService) {
+            const beforePayload = {
+                context: initialContext,
+                dialogOptions: this.dialogState.dialogOptions,
+            };
+            await hookService.runAsync(AXP_LAYOUT_BUILDER_DIALOG_BEFORE_OPEN_HOOK_KEY, beforePayload);
+        }
+        const confirmCloseWhenDirty = normalizeDialogCloseConfirmation(this.dialogState.dialogOptions?.confirmCloseWhenDirty);
         // Create dialog configuration
         const dialogConfig = {
             title: this.dialogState.dialogOptions?.title || '',
-            message: this.dialogState.dialogOptions?.message,
-            context: contextWithDefaults,
+            //TODO: why we need message?
+            //message: this.dialogState.dialogOptions?.message,
+            context: initialContext,
             definition: dialogNode,
+            metadata: this.dialogState.dialogOptions.metadata,
             actions: this.dialogState.actions,
+            onAction: this.dialogState.dialogOptions?.onAction,
+            confirmCloseWhenDirty,
         };
+        // 
+        if (hookService) {
+            await hookService.runAsync(AXP_LAYOUT_BUILDER_DIALOG_CONFIG_HOOK_KEY, dialogConfig);
+        }
         // The Promise resolves when user clicks an action button
         return new Promise(async (resolve) => {
-            this.popupService.open(AXPDialogRendererComponent, {
+            let flag = false;
+            await this.popupService.open(AXPDialogRendererComponent, {
                 title: dialogConfig.title,
                 size: this.dialogState.dialogOptions?.size || 'md',
                 closeButton: this.dialogState.dialogOptions?.closeButton || false,
@@ -1529,11 +1895,14 @@ class DialogContainerBuilder {
                 data: {
                     config: dialogConfig,
                     callBack: (result) => {
-                        // Resolve with the dialog reference when user clicks an action
+                        flag = true;
                         resolve(result);
                     },
                 },
             });
+            if (!flag) {
+                resolve(createDismissedDialogRef());
+            }
         });
     }
 }
@@ -1548,6 +1917,7 @@ class WidgetBuilder {
         this.widgetState = {
             type: 'widget',
             options: {},
+            children: [],
         };
         this.inheritanceContext = {};
         if (name) {
@@ -1611,6 +1981,7 @@ class WidgetBuilder {
             this.widgetState.options = {};
         }
         this.widgetState.options['visible'] = condition;
+        this.widgetState.visible = condition;
         this.inheritanceContext.visible = condition;
         return this;
     }
@@ -1642,6 +2013,10 @@ class WidgetBuilder {
         this.inheritanceContext.direction = direction;
         return this;
     }
+    children(children) {
+        this.widgetState.children = children;
+        return this;
+    }
     // Inheritance context methods
     withInheritanceContext(context) {
         this.inheritanceContext = mergeInheritanceContext(context);
@@ -1665,6 +2040,7 @@ class WidgetBuilder {
         }
         if (resolved.visible !== undefined) {
             this.widgetState.options['visible'] = resolved.visible;
+            this.widgetState.visible = resolved.visible;
         }
         if (context.defaultValue !== undefined) {
             this.widgetState.defaultValue = context.defaultValue;
@@ -1675,14 +2051,29 @@ class WidgetBuilder {
         return { ...this.inheritanceContext };
     }
     build() {
-        return {
+        const node = {
             name: this.widgetState.name,
             type: this.widgetState.type,
             options: this.widgetState.options,
             mode: this.widgetState.mode,
             path: this.widgetState.path,
             defaultValue: this.widgetState.defaultValue,
+            children: this.widgetState.children,
         };
+        // Add extended properties if they exist
+        if (this.widgetState.triggers !== undefined) {
+            node.triggers = this.widgetState.triggers;
+        }
+        if (this.widgetState.meta !== undefined) {
+            node.meta = this.widgetState.meta;
+        }
+        if (this.widgetState.valueTransforms !== undefined) {
+            node.valueTransforms = this.widgetState.valueTransforms;
+        }
+        if (this.widgetState.visible !== undefined) {
+            node.visible = this.widgetState.visible;
+        }
+        return node;
     }
 }
 //#region ----   Action Builder Implementation   ----
@@ -1690,35 +2081,48 @@ class ActionBuilder {
     constructor(dialogBuilder) {
         this.dialogBuilder = dialogBuilder;
     }
-    cancel(text) {
+    cancel(text, options) {
         if (!this.dialogBuilder['dialogState'].actions.footer.suffix) {
             this.dialogBuilder['dialogState'].actions.footer.suffix = [];
         }
         this.dialogBuilder['dialogState'].actions.footer.suffix.push({
             title: text || '@general:actions.cancel.title',
-            icon: 'fa-times',
             color: 'default',
             command: { name: 'cancel' },
+            shortcuts: resolveDialogActionShortcuts(DEFAULT_CANCEL_DIALOG_ACTION_SHORTCUTS, options?.shortcuts),
         });
         return this;
     }
-    submit(text) {
+    submit(text, options) {
         if (!this.dialogBuilder['dialogState'].actions.footer.suffix) {
             this.dialogBuilder['dialogState'].actions.footer.suffix = [];
         }
         this.dialogBuilder['dialogState'].actions.footer.suffix.push({
             title: text || '@general:actions.submit.title',
-            icon: 'fa-check',
             color: 'primary',
             command: { name: 'submit', options: { validate: true } },
+            shortcuts: resolveDialogActionShortcuts(DEFAULT_SUBMIT_DIALOG_ACTION_SHORTCUTS, options?.shortcuts),
         });
         return this;
     }
-    custom(action) {
-        if (!this.dialogBuilder['dialogState'].actions.footer.suffix) {
-            this.dialogBuilder['dialogState'].actions.footer.suffix = [];
+    custom(action, options) {
+        const item = {
+            ...action,
+            shortcuts: resolveDialogActionShortcuts(action.shortcuts ?? [], options?.shortcuts),
+        };
+        const position = item.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(item);
+        }
+        else {
+            if (!this.dialogBuilder['dialogState'].actions.footer.suffix) {
+                this.dialogBuilder['dialogState'].actions.footer.suffix = [];
+            }
+            this.dialogBuilder['dialogState'].actions.footer.suffix.push(item);
         }
-        this.dialogBuilder['dialogState'].actions.footer.suffix.push(action);
         return this;
     }
 }
@@ -1867,22 +2271,27 @@ 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 */ []));
+        /**
+         * Prefer explicit {@link AXPWidgetNode.mode} on the root node (e.g. dialog flex `mode('view')`)
+         * so nested widgets resolve view vs edit correctly; fall back to the layout `mode` input.
+         */
+        this.effectiveRenderMode = computed(() => this.widgetTree()?.mode ?? this.mode(), ...(ngDevMode ? [{ debugName: "effectiveRenderMode" }] : /* istanbul ignore next */ []));
         /**
          * Convert layout data to widget tree when inputs change
          */
@@ -1907,7 +2316,7 @@ class AXPLayoutRendererComponent {
             if (!isEqual(prev, tree)) {
                 this.widgetTree.set(tree);
             }
-        }, ...(ngDevMode ? [{ debugName: "conversionEffect" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "conversionEffect" }] : /* istanbul ignore next */ []));
         //#endregion
         //#region ----   Outputs   ----
         /**
@@ -1920,12 +2329,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
          */
@@ -1938,7 +2347,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
          */
@@ -1947,7 +2356,7 @@ class AXPLayoutRendererComponent {
             if (widgetTree) {
                 this.container()?.builderService.setStatus(AXPPageStatus.Rendered);
             }
-        }, ...(ngDevMode ? [{ debugName: "#widgetStatusEffect" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "#widgetStatusEffect" }] : /* istanbul ignore next */ []));
     }
     //#endregion
     //#region ----   Lifecycle Methods   ----
@@ -2087,24 +2496,32 @@ 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.12", ngImport: i0, type: AXPLayoutRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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()) {
-          <ng-container axp-widget-renderer [node]="widgetTree()!" [mode]="mode()"></ng-container>
+          <ng-container
+            axp-widget-renderer
+            [node]="widgetTree()!"
+            [mode]="effectiveRenderMode()"
+          ></ng-container>
         }
       </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"], 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.12", 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()) {
-          <ng-container axp-widget-renderer [node]="widgetTree()!" [mode]="mode()"></ng-container>
+          <ng-container
+            axp-widget-renderer
+            [node]="widgetTree()!"
+            [mode]="effectiveRenderMode()"
+          ></ng-container>
         }
       </axp-widgets-container>
     </ax-form>
@@ -2112,74 +2529,321 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
         }], 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 }] }] } });
 
 class LayoutBuilderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LayoutBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.12", ngImport: i0, type: LayoutBuilderModule, imports: [CommonModule, AXPLayoutRendererComponent], exports: [AXPLayoutRendererComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.12", 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.12", 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],
                 }]
         }] });
 
+//#region ---- Contracts barrel ----
 //#endregion
 
+/**
+ * Returns true when a nested overlay is open and Esc should close it first.
+ * Returns false when only the dialog shell is on top.
+ * Returns null when the Acorex overlay service does not expose open-state queries yet.
+ */
+function hasOpenNestedOverlayFromAcorexService(overlayService, dialogOverlay) {
+    const service = overlayService;
+    if (typeof service.hasOpenAnchoredOverlay === 'function') {
+        if (!service.hasOpenAnchoredOverlay()) {
+            return false;
+        }
+        if (typeof service.hasOverlayAbove === 'function') {
+            return service.hasOverlayAbove(dialogOverlay);
+        }
+        return true;
+    }
+    if (typeof service.hasOverlayAbove === 'function') {
+        return service.hasOverlayAbove(dialogOverlay);
+    }
+    return null;
+}
+/**
+ * DOM fallback until {@link AXOverlayService} exposes open-overlay queries.
+ *
+ * Dialog popups use a centered `.ax-overlay-container` without `.ax-overlay-pane`.
+ * Widget popovers (select, datetime, dropdown) use anchored containers with `.ax-overlay-pane`.
+ */
+function shouldDeferEscapeToNestedOverlayFromDom(document, dialogHost) {
+    const dialogOverlay = findOverlayContainerAncestor(dialogHost);
+    if (getNestedVisibleOverlayPanes(document, dialogOverlay).length > 0) {
+        return true;
+    }
+    const topContainer = getTopVisibleOverlayContainer(document);
+    if (!topContainer) {
+        return false;
+    }
+    if (!dialogOverlay) {
+        return topContainer.contains(dialogHost) === false;
+    }
+    return topContainer !== dialogOverlay;
+}
+/**
+ * When a nested overlay is above this dialog (widget popover, confirm box, etc.), footer shortcuts
+ * should not run on the parent dialog.
+ */
+function shouldDeferDialogShortcutsToNestedOverlay(document, dialogHost, overlayService) {
+    const dialogOverlay = findOverlayContainerAncestor(dialogHost);
+    if (overlayService) {
+        const fromService = hasOpenNestedOverlayFromAcorexService(overlayService, dialogOverlay);
+        if (fromService !== null) {
+            return fromService;
+        }
+    }
+    return shouldDeferEscapeToNestedOverlayFromDom(document, dialogHost);
+}
+
+/**
+ * Builds the `show()` resolve payload for layout-builder custom footer commands (fallback path).
+ */
+function buildLayoutBuilderCustomActionRef(createDialogRef, command) {
+    return {
+        ...createDialogRef(command),
+        action: () => command,
+    };
+}
+/**
+ * Keeps legacy popup `data.context` / `data.action` side fields in sync for custom footer commands.
+ */
+function syncLegacyDialogDataSideFields(data, context, action) {
+    if (!data) {
+        return;
+    }
+    data.context = context;
+    data.action = action;
+}
+/**
+ * Cancel from an `onAction` handler should route through the dirty-close gate only when configured.
+ * Otherwise preserve the original resolve-then-close sequence.
+ */
+function shouldRouteOnActionCancelThroughDismissGate(confirmCloseWhenDirtyEnabled) {
+    return confirmCloseWhenDirtyEnabled === true;
+}
+
+/** Debounce after widget count stabilizes before re-evaluating footer actions. */
+const DIALOG_WIDGET_COUNT_STABLE_DELAY_MS = 350;
 class AXPDialogRendererComponent extends AXBasePageComponent {
     constructor() {
         super(...arguments);
         this.result = new EventEmitter();
         this.expressionEvaluator = inject(AXPExpressionEvaluatorService);
-        this.context = signal({}, ...(ngDevMode ? [{ debugName: "context" }] : []));
+        this.commandService = inject(AXPCommandService);
+        this.hookService = inject(AXPHookService, { optional: true });
+        this.unsavedChangesConfirm = inject(AXPUnsavedChangesConfirmService);
+        this.overlayService = inject(AXOverlayService);
+        this.translationService = inject(AXTranslationService);
+        this.document = inject(DOCUMENT);
+        this.host = inject((ElementRef));
+        /** Ensures `show()` resolves once when the dialog closes (footer action or header close). */
+        this.callbackInvoked = false;
+        /** Skips dirty confirmation on the next {@link onClosing} (successful submit / programmatic close). */
+        this.skipNextOnClosingDirtyCheck = false;
+        /** Blocks re-entrant {@link onClosing} while the first close gate is still resolving. */
+        this.closeGateInProgress = false;
+        this.destroyRef = inject(DestroyRef);
+        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 */ []));
+        /**
+         * Correlate layout context snapshots for distributed hooks (`layout-builder.dialog.context-changed`).
+         */
+        this.contextChangedHooksSessionKey = typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function'
+            ? crypto.randomUUID()
+            : `layout-dialog-ctx-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+        /**
+         * Capture-phase footer shortcuts — runs before widget editors (select, date, text) that stop keydown bubbling.
+         */
+        this.onDialogShortcutCapture = (event) => {
+            if (this.isDialogLoading()) {
+                return;
+            }
+            // Unsaved-changes confirm is modal — parent footer shortcuts must not run underneath it.
+            if (this.unsavedChangesConfirm.isConfirmPending()) {
+                return;
+            }
+            if (shouldDeferDialogShortcutsToNestedOverlay(this.document, this.host.nativeElement, this.overlayService)) {
+                return;
+            }
+            if (event.key === 'Escape' && this.config?.confirmCloseWhenDirty?.enabled) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                this.requestDismiss();
+                return;
+            }
+            const actions = [...this.footerPrefixActions(), ...this.footerSuffixActions()];
+            for (const action of actions) {
+                if (action.disabled || action.hidden || !action.shortcuts?.length) {
+                    continue;
+                }
+                for (const shortcut of action.shortcuts) {
+                    if (event.key === 'Escape' && this.config?.confirmCloseWhenDirty?.enabled) {
+                        continue;
+                    }
+                    if (!matchesDialogActionShortcut(event, shortcut) || !shouldTriggerDialogActionShortcut(event, shortcut)) {
+                        continue;
+                    }
+                    event.preventDefault();
+                    event.stopImmediatePropagation();
+                    void this.executeAction(action);
+                    return;
+                }
+            }
+        };
         //#endregion
         //#region ----   View Accessors   ----
         // Access the internal layout renderer to reach the widgets container injector
-        this.layoutRenderer = viewChild(AXPLayoutRendererComponent, ...(ngDevMode ? [{ debugName: "layoutRenderer" }] : []));
-        this.#eff = effect(() => {
-            let count = 0;
+        this.layoutRenderer = viewChild(AXPLayoutRendererComponent, ...(ngDevMode ? [{ debugName: "layoutRenderer" }] : /* istanbul ignore next */ []));
+        this.#widgetActionsEffect = effect(() => {
             this.aggregateAndEvaluateActions();
             if (!this.widgetCoreService) {
                 const renderer = this.layoutRenderer();
                 const container = renderer?.getContainer();
                 this.widgetCoreService = container?.builderService ?? null;
-                count = this.widgetCoreService.registeredWidgetsCount();
+                return;
             }
-            else {
-                count = this.widgetCoreService.registeredWidgetsCount();
-                // Clear existing timer
-                if (this.debounceTimer) {
-                    clearTimeout(this.debounceTimer);
-                }
-                // Set new timer to call after 200ms of no count changes
-                this.debounceTimer = setTimeout(() => {
-                    this.aggregateAndEvaluateActions();
-                }, 200);
+            this.widgetCoreService.registeredWidgetsCount();
+            if (this.debounceTimer) {
+                clearTimeout(this.debounceTimer);
             }
-        }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
+            this.debounceTimer = setTimeout(() => {
+                this.aggregateAndEvaluateActions();
+            }, DIALOG_WIDGET_COUNT_STABLE_DELAY_MS);
+        }, ...(ngDevMode ? [{ debugName: "#widgetActionsEffect" }] : /* istanbul ignore next */ []));
     }
     //#endregion
     //#region ----   Lifecycle   ----
     ngOnInit() {
-        // Initialize context with provided context
-        this.context.set(this.config?.context || {});
+        const initialContext = this.config?.context || {};
+        this.context.set(initialContext);
+        this.document.addEventListener('keydown', this.onDialogShortcutCapture, true);
+        this.destroyRef.onDestroy(() => {
+            this.document.removeEventListener('keydown', this.onDialogShortcutCapture, true);
+        });
+        void this.invokeLayoutContextChangedHooks();
     }
-    #eff;
+    //#endregion
+    //#region ----   Popup Close Gate   ----
+    /**
+     * Popup shell hook — handles header **X** and **Esc** (when `closeButton` is enabled).
+     * This is the only place that prompts for unsaved changes.
+     */
+    async onClosing(e) {
+        if (this.unsavedChangesConfirm.isConfirmPending() || this.closeGateInProgress) {
+            e.cancel = true;
+            return;
+        }
+        this.closeGateInProgress = true;
+        try {
+            if (this.skipNextOnClosingDirtyCheck) {
+                this.skipNextOnClosingDirtyCheck = false;
+                this.completeDismissResolve();
+                return;
+            }
+            if (!this.config?.confirmCloseWhenDirty?.enabled) {
+                this.completeDismissResolve();
+                return;
+            }
+            if (!(await this.confirmDismissIfDirty())) {
+                e.cancel = true;
+                this.pendingDismissResolvePayload = undefined;
+                return;
+            }
+            this.completeDismissResolve();
+        }
+        finally {
+            this.closeGateInProgress = false;
+        }
+    }
+    /**
+     * Footer cancel and other in-app dismiss actions. Routes through `super.close()` so the
+     * popup shell invokes {@link onClosing} exactly once (same path as **X** / **Esc**).
+     */
+    requestDismiss(resolvePayload) {
+        this.pendingDismissResolvePayload = resolvePayload ?? this.createDialogRef('cancel');
+        super.close();
+    }
+    /** Invokes `show()` callback with the pending payload or a default cancel {@link AXPDialogRef}. */
+    completeDismissResolve() {
+        const payload = this.pendingDismissResolvePayload;
+        this.pendingDismissResolvePayload = undefined;
+        if (payload !== undefined) {
+            this.resolveDialog(payload);
+            return;
+        }
+        if (!this.callbackInvoked) {
+            this.resolveDialog(this.createDialogRef('cancel'));
+        }
+    }
+    //#endregion
+    //#region ----   Dirty State   ----
+    getWidgetContainer() {
+        return this.layoutRenderer()?.getContainer();
+    }
+    #widgetActionsEffect;
     //#endregion
     handleContextChanged(event) {
         this.context.set(event);
         this.aggregateAndEvaluateActions();
+        void this.invokeLayoutContextChangedHooks();
     }
     handleContextInitiated(event) {
         this.context.set(event);
         this.aggregateAndEvaluateActions();
+        void this.invokeLayoutContextChangedHooks();
+    }
+    async invokeLayoutContextChangedHooks() {
+        const meta = this.config?.metadata;
+        if (!this.hookService) {
+            return;
+        }
+        const payload = {
+            sessionKey: this.contextChangedHooksSessionKey,
+            getContext: () => {
+                const store = this.getWidgetContainer()?.contextService;
+                return (store?.data() ?? this.context() ?? {});
+            },
+            metadata: meta,
+            patchContext: (partial) => {
+                const merged = merge({}, this.context(), partial);
+                this.context.set(merged);
+                this.layoutRenderer()?.updateContext(merged);
+            },
+            setLoading: (loading) => this.isDialogLoading.set(loading),
+        };
+        try {
+            await this.hookService.runAsync(AXP_LAYOUT_BUILDER_DIALOG_CONTEXT_CHANGED_HOOK_KEY, payload);
+        }
+        catch {
+            // Hook providers are best-effort; avoid breaking the dialog lifecycle.
+        }
     }
     footerPrefixActions() {
         return this.footerPrefix();
@@ -2194,38 +2858,177 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
         return this.isDialogLoading();
     }
     async executeAction(action) {
-        const cmd = action.command;
-        if (cmd !== 'cancel') {
+        const cmd = this.resolveActionCommandName(action.command);
+        if (this.shouldValidateBeforeAction(cmd)) {
             const isValid = await this.layoutRenderer()?.validate();
             if (!isValid?.result) {
                 return;
             }
         }
-        if (typeof cmd === 'string' && cmd.startsWith('widget:')) {
+        //TODO: matin, why we need this? maybe we can remove it?
+        if (cmd?.startsWith('widget:')) {
             const parsed = this.parseWidgetCommand(cmd);
             if (parsed.widgetName && parsed.action) {
-                await this.executeWidgetApi(parsed.widgetName, parsed.action);
+                await this.invokeWidget(parsed.widgetName, parsed.action, {});
                 await this.aggregateAndEvaluateActions();
                 return;
             }
         }
-        // Fallback: treat as regular dialog action (cancel/confirm/custom)
-        const result = { context: this.context(), action: cmd };
+        if (cmd && this.commandService.exists(cmd)) {
+            const dialogRef = this.createDialogRef(cmd);
+            const integration = (this.config.metadata ?? {});
+            try {
+                const cmdResult = await this.commandService.execute(cmd, { dialogRef, integration });
+                if (!cmdResult?.success) {
+                    return;
+                }
+                if (this.shouldKeepDialogOpenAfterCommandResult(cmdResult)) {
+                    return;
+                }
+                this.resolveDialog(cmdResult);
+                await this.closeWithOptionalSkipValidate(cmdResult);
+            }
+            catch (error) {
+                console.error('Error executing action', cmd, error);
+            }
+            return;
+        }
+        const context = this.context();
+        const onAction = this.config?.onAction;
+        // `onAction` return value is passed through to `show()` unchanged — see dialog-resolve.util.ts.
+        if (onAction) {
+            const dialogRef = this.createDialogRef(cmd);
+            try {
+                this.isDialogLoading.set(true);
+                const result = await Promise.resolve(onAction(dialogRef));
+                if (this.shouldKeepDialogOpenAfterCommandResult(result)) {
+                    return;
+                }
+                if (cmd === 'cancel' &&
+                    shouldRouteOnActionCancelThroughDismissGate(this.config?.confirmCloseWhenDirty?.enabled)) {
+                    this.isDialogLoading.set(false);
+                    this.requestDismiss(result);
+                    return;
+                }
+                this.resolveDialog(result);
+                await this.closeWithOptionalSkipValidate(result);
+            }
+            catch {
+                // Handler threw: stay open for retry, actions remain clickable
+            }
+            finally {
+                this.isDialogLoading.set(false);
+            }
+            return;
+        }
+        // Fallback: layout-builder custom footer commands (e.g. signature-apply, upload-image).
+        // See dialog-resolve.util.ts — resolves {@link AXPDialogRef}; does not auto-close except cancel.
+        const result = { context, action: cmd };
         this.dialogResult = result;
-        if (this.data) {
-            this.data.context = result.context;
-            this.data.action = result.action;
+        syncLegacyDialogDataSideFields(this.data, result.context, result.action);
+        const dialogRefPayload = buildLayoutBuilderCustomActionRef((command) => this.createDialogRef(command), cmd);
+        if (cmd === 'cancel') {
+            this.requestDismiss(dialogRefPayload);
+            return;
         }
-        this.callBack({
-            close: (result) => {
-                this.close(result);
+        this.resolveDialog(dialogRefPayload);
+    }
+    isDialogDirty() {
+        const confirmOptions = this.config?.confirmCloseWhenDirty;
+        if (!confirmOptions?.enabled) {
+            return false;
+        }
+        const container = this.getWidgetContainer();
+        if (!container?.isSavedCommitted()) {
+            return false;
+        }
+        const store = container.contextService;
+        if (typeof confirmOptions.isDirty === 'function') {
+            return confirmOptions.isDirty(store.data(), store.saved());
+        }
+        return container.isFormDirty();
+    }
+    confirmDismissIfDirty() {
+        const confirmOptions = this.config?.confirmCloseWhenDirty;
+        if (!confirmOptions?.enabled || !this.isDialogDirty()) {
+            return Promise.resolve(true);
+        }
+        return this.unsavedChangesConfirm.confirmIfDirty(true, {
+            enabled: confirmOptions.enabled,
+            title: confirmOptions.title,
+            message: confirmOptions.message,
+        });
+    }
+    /** Whether the layout form should be validated before running this footer command. */
+    shouldValidateBeforeAction(cmd) {
+        if (!cmd || cmd === 'cancel' || cmd === 'entity-form-done' || cmd === 'entity-form-next-step') {
+            return false;
+        }
+        if (cmd.startsWith('widget:')) {
+            return false;
+        }
+        if (this.commandService.exists(cmd)) {
+            return false;
+        }
+        return true;
+    }
+    /** True when a footer handler or command result asks to leave the dialog open (`keepDialogOpen` on the result or `result.data`). */
+    shouldKeepDialogOpenAfterCommandResult(result) {
+        if (!result || typeof result !== 'object') {
+            return false;
+        }
+        const top = result;
+        if (top.keepDialogOpen === true) {
+            return true;
+        }
+        if (top.data != null && typeof top.data === 'object' && 'keepDialogOpen' in top.data) {
+            return top.data.keepDialogOpen === true;
+        }
+        return false;
+    }
+    /** Resolves the dialog `show()` promise exactly once. */
+    resolveDialog(result) {
+        if (this.callbackInvoked) {
+            return;
+        }
+        this.callbackInvoked = true;
+        this.callBack(result);
+    }
+    createDialogRef(actionCmd) {
+        return {
+            close: (res) => {
+                void this.closeWithOptionalSkipValidate(res);
             },
             context: () => this.context(),
-            action: () => result.action,
-            setLoading: (loading) => {
-                this.isDialogLoading.set(loading);
+            action: () => actionCmd,
+            setLoading: (loading) => this.isDialogLoading.set(loading),
+            patchContext: (partial) => {
+                const merged = merge({}, this.context(), partial);
+                this.context.set(merged);
+                this.layoutRenderer()?.updateContext(merged);
             },
-        });
+            invokeWidget: (widgetName, method, opts) => this.invokeWidget(widgetName, method, opts ?? {}),
+        };
+    }
+    async closeWithOptionalSkipValidate(result) {
+        if (result && typeof result === 'object' && result.skipValidate) {
+            this.result.emit(result);
+            this.skipNextOnClosingDirtyCheck = true;
+            this.pendingDismissResolvePayload = undefined;
+            super.close(result);
+            return;
+        }
+        await this.close(result, { skipDirtyConfirm: true });
+    }
+    /** 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>'
@@ -2237,7 +3040,7 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
             return {};
         return { widgetName: rest.slice(0, dot), action: rest.slice(dot + 1) };
     }
-    async executeWidgetApi(widgetName, apiMethod) {
+    async invokeWidget(widgetName, apiMethod, opts) {
         if (!this.widgetCoreService)
             return;
         try {
@@ -2247,18 +3050,26 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
             if (typeof fn === 'function') {
                 await Promise.resolve(fn({
                     close: (result) => {
-                        this.close(result);
+                        void this.closeWithOptionalSkipValidate(result);
                     },
                     context: () => this.context(),
                     setLoading: (loading) => {
-                        this.isDialogLoading.set(loading);
+                        (opts.setLoading ?? ((v) => this.isDialogLoading.set(v)))(loading);
                     },
                 }));
+                // Footer predicates (e.g. wizard step) must refresh when the widget advances outside executeAction (e.g. dialogRef.invokeWidget after entity-form continue).
+                await this.aggregateAndEvaluateActions();
             }
         }
-        catch { }
+        catch {
+            //
+        }
     }
-    async close(result) {
+    async close(result, options) {
+        if (options?.skipDirtyConfirm) {
+            this.skipNextOnClosingDirtyCheck = true;
+            this.pendingDismissResolvePayload = undefined;
+        }
         if (result) {
             const isValid = await this.layoutRenderer()?.validate();
             if (isValid?.result) {
@@ -2306,6 +3117,8 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
             zone: 'footer',
             placement,
             scope: a.scope,
+            predicateApiWidgetName: a.predicateApiWidgetName,
+            shortcuts: resolveConfiguredFooterActionShortcuts(typeof a.command === 'string' ? a.command : a.command?.name, a.shortcuts),
         });
         const prefix = (footer?.prefix || []).map((a) => mapOne(a, 'prefix'));
         const suffix = (footer?.suffix || []).map((a) => mapOne(a, 'suffix'));
@@ -2315,16 +3128,18 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
         const out = [];
         for (const a of actions) {
             const parsed = typeof a.command === 'string' ? this.parseWidgetCommand(a.command) : {};
-            const api = parsed.widgetName ? await this.resolveApi(parsed.widgetName) : undefined;
+            const widgetNameForApi = parsed.widgetName ?? a.predicateApiWidgetName;
+            const api = widgetNameForApi ? await this.resolveApi(widgetNameForApi) : undefined;
             const scope = {
                 api,
-                widget: { name: parsed.widgetName },
+                widget: { name: widgetNameForApi },
                 dialog: { context: this.context() },
                 context: this.context(),
             };
             const disabled = await this.evalBool(a.disabled, scope);
             const hidden = await this.evalBool(a.hidden, scope);
-            out.push({ ...a, disabled, hidden });
+            const resolvedTitle = (await this.evalActionTitle(a.title, scope)) ?? a.title;
+            out.push({ ...a, disabled, hidden, title: resolvedTitle });
         }
         return out;
     }
@@ -2342,6 +3157,25 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
         }
         return value;
     }
+    /** Resolves footer action title when it contains {{ ... }} (e.g. wizard labels from dialog context). */
+    async evalActionTitle(value, scope) {
+        if (value == null || typeof value !== 'string' || !value.includes('{{')) {
+            return value;
+        }
+        try {
+            const result = await this.expressionEvaluator.evaluate(value, scope);
+            if (typeof result === 'string' && result.length > 0) {
+                return result;
+            }
+            if (result != null && result !== false) {
+                return String(result);
+            }
+        }
+        catch {
+            //
+        }
+        return value;
+    }
     async resolveApi(widgetName) {
         try {
             await this.widgetCoreService?.waitForWidget(widgetName, 2000);
@@ -2352,9 +3186,13 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
             return undefined;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPDialogRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPDialogRendererComponent, isStandalone: true, selector: "axp-dialog-renderer", inputs: { config: "config" }, 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">
+      <!-- @if (config.message) {
+        <p class="ax-mb-4 ax-leading-relaxed">{{ config.message | translate | async }}</p>
+      } -->
       <axp-layout-renderer
         [layout]="config.definition"
         [context]="context()"
@@ -2364,46 +3202,57 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
       </axp-layout-renderer>
     </div>
 
-    <ax-footer>
-      <ax-prefix>
-        @for (action of footerPrefixActions(); track $index) {
-          <ax-button
-            [disabled]="action.disabled || isFormLoading()"
-            [text]="(action.title | translate | async)!"
-            [look]="'outline'"
-            [color]="action.color"
-            (onClick)="executeAction(action)"
-          >
-            <ax-prefix>
-              <i class="{{ action.icon }}"></i>
-            </ax-prefix>
-          </ax-button>
-        }
-      </ax-prefix>
-      <ax-suffix>
-        @for (action of footerSuffixActions(); track $index) {
-          <ax-button
-            [disabled]="action.disabled || isSubmitting()"
-            [text]="(action.title | translate | async)!"
-            [look]="'solid'"
-            [color]="action.color"
-            (onClick)="executeAction(action)"
-          >
-            @if (isFormLoading()) {
-              <ax-loading></ax-loading>
-            }
-            @if (action.icon) {
+    <!-- Custom footer slot: if it has content, default footer is hidden -->
+    <axp-component-slot name="dialog-footer" #footerSlot="slot" [context]="context()"></axp-component-slot>
+    @if (footerSlot.isEmpty()) {
+      <ax-footer>
+        <ax-prefix>
+          <axp-component-slot name="dialog-footer-prefix" [context]="context()"></axp-component-slot>
+          @for (action of footerPrefixActions(); track $index) {
+            <ax-button
+              [disabled]="action.disabled || isFormLoading()"
+              [text]="(action.title | translate | async)!"
+              [look]="'outline'"
+              [color]="action.color"
+              (onClick)="executeAction(action)"
+            >
+              @if (isFormLoading()) {
+                <ax-loading></ax-loading>
+              }
               <ax-prefix>
-                <ax-icon icon="{{ action.icon }}"></ax-icon>
+                @if (action.icon) {
+                  <ax-icon [icon]="action.icon"></ax-icon>
+                }
               </ax-prefix>
-            }
-          </ax-button>
-        }
-      </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: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }] }); }
+            </ax-button>
+          }
+        </ax-prefix>
+        <ax-suffix>
+          @for (action of footerSuffixActions(); track $index) {
+            <ax-button
+              [disabled]="action.disabled || isSubmitting()"
+              [text]="(action.title | translate | async)!"
+              [look]="'solid'"
+              [color]="action.color"
+              (onClick)="executeAction(action)"
+            >
+              @if (isFormLoading()) {
+                <ax-loading></ax-loading>
+              }
+              @if (action.icon) {
+                <ax-prefix>
+                  <ax-icon [icon]="action.icon"></ax-icon>
+                </ax-prefix>
+              }
+            </ax-button>
+          }
+          <axp-component-slot name="dialog-footer-suffix" [context]="context()"></axp-component-slot>
+        </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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", 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',
@@ -2415,9 +3264,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                         AXDecoratorModule,
                         AXLoadingModule,
                         AXTranslationModule,
+                        AXPComponentSlotModule,
                     ],
+                    providers: [AXPContextStore],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
+    <axp-component-slot name="dialog-header" [context]="context()"></axp-component-slot>
     <div class="ax-p-4">
+      <!-- @if (config.message) {
+        <p class="ax-mb-4 ax-leading-relaxed">{{ config.message | translate | async }}</p>
+      } -->
       <axp-layout-renderer
         [layout]="config.definition"
         [context]="context()"
@@ -2427,48 +3283,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
       </axp-layout-renderer>
     </div>
 
-    <ax-footer>
-      <ax-prefix>
-        @for (action of footerPrefixActions(); track $index) {
-          <ax-button
-            [disabled]="action.disabled || isFormLoading()"
-            [text]="(action.title | translate | async)!"
-            [look]="'outline'"
-            [color]="action.color"
-            (onClick)="executeAction(action)"
-          >
-            <ax-prefix>
-              <i class="{{ action.icon }}"></i>
-            </ax-prefix>
-          </ax-button>
-        }
-      </ax-prefix>
-      <ax-suffix>
-        @for (action of footerSuffixActions(); track $index) {
-          <ax-button
-            [disabled]="action.disabled || isSubmitting()"
-            [text]="(action.title | translate | async)!"
-            [look]="'solid'"
-            [color]="action.color"
-            (onClick)="executeAction(action)"
-          >
-            @if (isFormLoading()) {
-              <ax-loading></ax-loading>
-            }
-            @if (action.icon) {
+    <!-- Custom footer slot: if it has content, default footer is hidden -->
+    <axp-component-slot name="dialog-footer" #footerSlot="slot" [context]="context()"></axp-component-slot>
+    @if (footerSlot.isEmpty()) {
+      <ax-footer>
+        <ax-prefix>
+          <axp-component-slot name="dialog-footer-prefix" [context]="context()"></axp-component-slot>
+          @for (action of footerPrefixActions(); track $index) {
+            <ax-button
+              [disabled]="action.disabled || isFormLoading()"
+              [text]="(action.title | translate | async)!"
+              [look]="'outline'"
+              [color]="action.color"
+              (onClick)="executeAction(action)"
+            >
+              @if (isFormLoading()) {
+                <ax-loading></ax-loading>
+              }
               <ax-prefix>
-                <ax-icon icon="{{ action.icon }}"></ax-icon>
+                @if (action.icon) {
+                  <ax-icon [icon]="action.icon"></ax-icon>
+                }
               </ax-prefix>
-            }
-          </ax-button>
-        }
-      </ax-suffix>
-    </ax-footer>
+            </ax-button>
+          }
+        </ax-prefix>
+        <ax-suffix>
+          @for (action of footerSuffixActions(); track $index) {
+            <ax-button
+              [disabled]="action.disabled || isSubmitting()"
+              [text]="(action.title | translate | async)!"
+              [look]="'solid'"
+              [color]="action.color"
+              (onClick)="executeAction(action)"
+            >
+              @if (isFormLoading()) {
+                <ax-loading></ax-loading>
+              }
+              @if (action.icon) {
+                <ax-prefix>
+                  <ax-icon [icon]="action.icon"></ax-icon>
+                </ax-prefix>
+              }
+            </ax-button>
+          }
+          <axp-component-slot name="dialog-footer-suffix" [context]="context()"></axp-component-slot>
+        </ax-suffix>
+      </ax-footer>
+    }
   `,
                 }]
-        }], propDecorators: { config: [{
-                type: Input
-            }], result: [{
+        }], propDecorators: { result: [{
                 type: Output
             }], layoutRenderer: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPLayoutRendererComponent), { isSignal: true }] }] } });
 
@@ -2477,9 +3342,190 @@ 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.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.translationService.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.translationService.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_LAYOUT_BUILDER_DIALOG_BEFORE_OPEN_HOOK_KEY, AXP_LAYOUT_BUILDER_DIALOG_CONFIG_HOOK_KEY, AXP_LAYOUT_BUILDER_DIALOG_CONTEXT_CHANGED_HOOK_KEY, DEFAULT_CANCEL_DIALOG_ACTION_SHORTCUTS, DEFAULT_SUBMIT_DIALOG_ACTION_SHORTCUTS, LayoutBuilderModule, createDismissedDialogRef };
 //# sourceMappingURL=acorex-platform-layout-builder.mjs.map