@acorex/platform 20.3.0-next.14 → 20.3.0-next.16

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

@@ -1,660 +1,521 @@
+import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, Input, Component, NgModule } from '@angular/core';
+import { inject, Injectable, input, model, signal, effect, output, viewChild, ChangeDetectionStrategy, Component, NgModule, EventEmitter, Output, Input } from '@angular/core';
+import { AXPopupService } from '@acorex/components/popup';
 import * as i1 from '@acorex/platform/layout/widget-core';
-import { AXPWidgetCoreModule } from '@acorex/platform/layout/widget-core';
+import { AXPWidgetContainerComponent, AXPPageStatus, AXPWidgetCoreModule } from '@acorex/platform/layout/widget-core';
+import * as i2 from '@acorex/components/form';
+import { AXFormComponent, AXFormModule } from '@acorex/components/form';
+import { isEqual, get } from 'lodash-es';
+import { AXPExpressionEvaluatorService } from '@acorex/platform/core';
+import { Subject, debounceTime, distinctUntilChanged, startWith } from 'rxjs';
+import * as i2$1 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i3 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import * as i4 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';
 
+//#region ----   Inheritance Utilities   ----
+/**
+ * Resolves inherited properties from context and local values
+ */
+function resolveInheritedProperties(context, localValues = {}) {
+    return {
+        mode: localValues.mode ?? context.mode ?? 'edit',
+        disabled: localValues.disabled ?? context.disabled,
+        readonly: localValues.readonly ?? context.readonly,
+        direction: localValues.direction ?? context.direction,
+        visible: localValues.visible ?? context.visible,
+    };
+}
+/**
+ * Merges inheritance context with local overrides
+ */
+function mergeInheritanceContext(parentContext, localOverrides = {}) {
+    return {
+        ...parentContext,
+        ...localOverrides,
+    };
+}
+/**
+ * Generates a random string for path/name generation
+ */
+function generateRandomId() {
+    return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+}
+/**
+ * Converts label to a valid path/name
+ */
+function labelToPath(label) {
+    return label
+        .toLowerCase()
+        .replace(/[^a-z0-9\s]/g, '') // Remove special characters
+        .replace(/\s+/g, '_') // Replace spaces with underscores
+        .substring(0, 50); // Limit length
+}
+/**
+ * Generates path for value widgets based on hierarchy
+ */
+function generateValueWidgetPath(widgetName, formFieldName, formFieldLabel) {
+    // Priority: widget name -> form field name -> generated from label -> random
+    if (widgetName) {
+        return widgetName;
+    }
+    if (formFieldName) {
+        return formFieldName;
+    }
+    if (formFieldLabel) {
+        return labelToPath(formFieldLabel);
+    }
+    return generateRandomId();
+}
+//#endregion
+//#region ----   Service Implementation   ----
 class AXPLayoutBuilderService {
+    constructor() {
+        this.popupService = inject(AXPopupService);
+    }
     /**
      * Create a new layout builder
      */
     create() {
-        return new LayoutBuilder();
+        return new LayoutBuilder(this.popupService);
     }
-    /**
-     * Convert Layout Builder definition to Layout Renderer format
-     * با processing و cleaning options
-     */
-    convertToLayoutRenderer(definition) {
-        const layoutDefinition = {
-            zones: {},
-            styles: definition.layoutConfig ? this.convertGridLayoutToStyles(definition.layoutConfig) : {}
-        };
-        const layoutNodes = [];
-        let nodeCounter = 0;
-        // Helper: count all nodes recursively
-        const countNodes = (nodes) => {
-            if (!nodes || nodes.length === 0)
-                return 0;
-            return nodes.reduce((acc, n) => acc + 1 + countNodes(n.children), 0);
-        };
-        const totalNodeCount = countNodes(definition.nodes);
-        const hasMultipleNodes = totalNodeCount > 1;
-        // Process nodes recursively - flatten everything into the same zone
-        const processNodes = (nodes, parentZone = 'main') => {
-            nodes.forEach((node) => {
-                if (!node.widget)
-                    return;
-                // Create layout node for widget
-                const nodeId = node.id || `widget-${nodeCounter++}`;
-                const layoutNode = {
-                    id: nodeId,
-                    type: node.widget.type,
-                    zone: parentZone,
-                    mode: node.mode || 'edit',
-                    options: node.widget.options || {}
-                };
-                // Convert layout config to node layout
-                if (node.layout) {
-                    layoutNode.layout = this.convertToNodeLayout(node.layout);
-                }
-                else if (hasMultipleNodes && definition.layoutConfig) {
-                    // Apply default layout for multi-node structures when node has no explicit layout
-                    layoutNode.layout = this.convertToNodeLayout(definition.layoutConfig);
-                }
-                // Add order if specified
-                if (node.order !== undefined) {
-                    if (!layoutNode.layout)
-                        layoutNode.layout = {};
-                    layoutNode.layout.order = typeof node.order === 'number' ? node.order : parseInt(node.order.toString());
-                }
-                // Process widget options and content
-                this.processWidgetOptions(layoutNode, node);
-                layoutNodes.push(layoutNode);
-                // Recursively add children into the same zone (flat)
-                if (node.children && node.children.length > 0) {
-                    processNodes(node.children, parentZone);
-                }
-            });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPLayoutBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPLayoutBuilderService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPLayoutBuilderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+//#endregion
+//#region ----   Layout Builder Implementation   ----
+/**
+ * Main layout builder - Single Responsibility: Layout orchestration
+ * Open/Closed: Extensible through container delegates
+ */
+class LayoutBuilder {
+    constructor(popupService) {
+        this.popupService = popupService;
+        this.root = {
+            children: [],
+            mode: 'edit',
+            type: 'flex-layout',
         };
-        // Create zones in order and assign auto-order to nodes (recursively)
-        let nodeOrder = 1;
-        const assignOrder = (nodes) => {
-            if (!nodes)
-                return;
-            nodes.forEach(n => {
-                if (n.order === undefined || n.order === null) {
-                    n.order = nodeOrder++;
-                }
-                if (n.children && n.children.length > 0)
-                    assignOrder(n.children);
-            });
+        this.inheritanceContext = {
+            mode: 'edit',
         };
-        assignOrder(definition.nodes);
-        // Always create a default main zone when there are nodes
-        if (totalNodeCount > 0) {
-            layoutDefinition.zones['main'] = {
-                layout: {
-                    type: 'flex',
-                    flexDirection: definition.direction === 'horizontal' ? 'row' : 'column',
-                    gap: '16px'
-                },
-                order: 0 // Main zone gets order 0 (first)
-            };
+    }
+    // Predefined layout containers at root level - delegate pattern required
+    grid(delegate) {
+        const container = new GridContainerBuilder();
+        container.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(container);
         }
-        processNodes(definition.nodes);
-        return {
-            layoutDefinition,
-            layoutNodes
-        };
+        //this.state.children!.push(container.build());
+        this.root = container.build();
+        return this;
     }
-    // Removed container mapping helpers - all nodes are treated uniformly
-    /**
-     * Convert grid layout options to CSS styles
-     */
-    convertGridLayoutToStyles(layout) {
-        const styles = {};
-        // Handle responsive positions
-        if (layout.positions) {
-            // Use largest breakpoint for base styles
-            const position = layout.positions.xxl || layout.positions.xl || layout.positions.lg ||
-                layout.positions.md || layout.positions.sm;
-            if (position) {
-                if (position.colSpan && position.colSpan < 12) {
-                    styles['width'] = `${(position.colSpan / 12) * 100}%`;
-                }
-            }
+    flex(delegate) {
+        const container = new FlexContainerBuilder();
+        container.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(container);
         }
-        return styles;
+        this.root.children.push(container.build());
+        return this;
     }
-    /**
-     * Convert grid layout to node layout configuration
-     */
-    convertToNodeLayout(layout) {
-        const nodeLayout = {};
-        if (layout.positions) {
-            const position = layout.positions.xxl || layout.positions.xl || layout.positions.lg ||
-                layout.positions.md || layout.positions.sm;
-            if (position) {
-                if (position.colSpan && position.colSpan < 12) {
-                    nodeLayout.flex = `0 0 ${(position.colSpan / 12) * 100}%`;
-                }
-                if (position.rowSpan && position.rowSpan > 1) {
-                    nodeLayout.gridArea = `span ${position.rowSpan}`;
-                }
-            }
+    panel(delegate) {
+        const container = new PanelContainerBuilder();
+        container.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(container);
         }
-        return nodeLayout;
+        this.root.children.push(container.build());
+        return this;
     }
-    /**
-     * Process widget options based on actual widget configurations
-     */
-    processWidgetOptions(layoutNode, sourceNode) {
-        if (!sourceNode.widget?.options)
-            return;
-        const options = sourceNode.widget.options;
-        const processedOptions = { ...options };
-        // Process based on actual widget type
-        switch (sourceNode.widget.type) {
-            case 'text-block-layout':
-                // Text Block Widget - فقط content
-                processedOptions.content = this.processTextBlockContent(options);
-                break;
-            case 'grid-layout':
-                // Grid Layout Widget - complete grid system
-                processedOptions.grid = this.processGridOptions(options);
-                processedOptions.spacing = this.processSpacingOptions(options);
-                processedOptions.border = this.processBorderOptions(options);
-                if (options.backgroundColor)
-                    processedOptions.backgroundColor = options.backgroundColor;
-                break;
-            case 'flex-layout':
-                // Flex Layout Widget
-                processedOptions.flex = this.processFlexOptions(options);
-                break;
-            case 'panel-layout':
-                // Panel Layout Widget
-                processedOptions.panel = this.processPanelOptions(options);
-                break;
-            case 'tag':
-                // Tag Widget (custom)
-                processedOptions.label = options.label || options.content || 'Tag';
-                processedOptions.tone = options.tone || 'primary';
-                break;
-            default:
-                // Generic processing برای custom widgets
-                if (options.content) {
-                    processedOptions.content = this.processGenericContent(options);
-                }
-                break;
+    page(delegate) {
+        const container = new PageContainerBuilder();
+        container.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(container);
         }
-        layoutNode.options = processedOptions;
+        this.root.children.push(container.build());
+        return this;
     }
-    /**
-     * Process text-block-layout content
-     */
-    processTextBlockContent(options) {
-        if (!options.content)
-            return '';
-        let content = options.content;
-        // اگر قبلاً HTML tag داره، استفاده کن
-        if (content.includes('<')) {
-            return content;
+    tabset(delegate) {
+        const container = new TabsetContainerBuilder();
+        container.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(container);
         }
-        // تبدیل plain text به HTML با styling مناسب
-        if (options.type === 'heading' || options.level === 'h1' || options.level === 'h2') {
-            const level = options.level || 'h2';
-            return `<${level} style="margin: 0 0 16px 0; color: #333; font-weight: 600;">${content}</${level}>`;
+        this.root.children.push(container.build());
+        return this;
+    }
+    fieldset(delegate) {
+        const container = new FieldsetContainerBuilder();
+        container.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(container);
         }
-        if (options.weight === 'bold' || options.bold) {
-            return `<strong style="color: #333;">${content}</strong>`;
+        this.root.children.push(container.build());
+        return this;
+    }
+    dialog(delegate) {
+        const container = new DialogContainerBuilder(this.popupService);
+        if (delegate) {
+            delegate(container);
         }
-        // Default text styling
-        return `<span style="color: #333; line-height: 1.5;">${content}</span>`;
+        return container;
     }
-    /**
-     * Process grid-layout options
-     */
-    processGridOptions(options) {
-        return {
-            default: {
-                columns: options.columns || 12,
-                rows: options.rows || 'auto',
-                gap: options.gap || '16px',
-                justifyItems: options.justifyItems || 'stretch',
-                alignItems: options.alignItems || 'stretch',
-                autoFlow: options.autoFlow || 'row'
-            }
-        };
+    formField(label, delegate) {
+        const field = new FormFieldBuilder(label);
+        field.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(field);
+        }
+        this.root.children.push(field.build());
+        return this;
     }
-    /**
-     * Process spacing options
-     */
-    processSpacingOptions(options) {
-        if (!options.spacing && !options.padding && !options.margin)
-            return undefined;
+    build() {
         return {
-            padding: options.spacing?.padding || options.padding || '0px',
-            margin: options.spacing?.margin || options.margin || '0px'
+            type: this.root.type,
+            children: this.root.children,
+            mode: this.root.mode,
         };
     }
-    /**
-     * Process border options
-     */
-    processBorderOptions(options) {
-        if (!options.border && !options.borderRadius && !options.borderWidth)
-            return undefined;
-        return {
-            radius: options.border?.radius || options.borderRadius || '0px',
-            width: options.border?.width || options.borderWidth || '0px',
-            color: options.border?.color || options.borderColor || '#ddd',
-            style: options.border?.style || options.borderStyle || 'solid'
+}
+//#endregion
+//#region ----   Container Builder Implementation   ----
+/**
+ * Abstract base container builder - Open/Closed Principle
+ * Provides common functionality for all container types
+ */
+class BaseContainerBuilder {
+    constructor(containerType) {
+        this.containerState = {
+            mode: 'edit',
+            type: 'flex-layout',
+            children: [],
         };
+        this.inheritanceContext = {};
+        this.containerState.type = containerType;
     }
-    /**
-     * Process flex-layout options
-     */
-    processFlexOptions(options) {
-        return {
-            flexDirection: options.flexDirection || 'row',
-            justifyContent: options.justifyContent || 'flex-start',
-            alignItems: options.alignItems || 'stretch',
-            gap: options.gap || '16px',
-            flexWrap: options.flexWrap || 'nowrap'
-        };
+    // Base methods shared by all containers
+    ensureChildren() {
+        this.containerState.children = this.containerState.children || [];
     }
-    /**
-     * Process panel-layout options
-     */
-    processPanelOptions(options) {
-        return {
-            title: options.title || '',
-            collapsible: options.collapsible || false,
-            collapsed: options.collapsed || false,
-            padding: options.padding || '16px'
-        };
+    addWidget(type, options) {
+        const child = new WidgetBuilder();
+        child.type(type);
+        // For value widgets, ensure path is provided
+        const widgetOptions = options ?? {};
+        const path = widgetOptions.path;
+        const name = widgetOptions.name;
+        if (this.isValueWidget(type) && !path) {
+            throw new Error(`Value widget '${type}' requires a 'path' property`);
+        }
+        // Set name and path in widget state, not options
+        if (name) {
+            child.name(name);
+        }
+        if (path) {
+            child.path(path);
+        }
+        // Remove name and path from options
+        const { name: _, path: __, ...cleanOptions } = widgetOptions;
+        child.options(cleanOptions);
+        child.withInheritanceContext(this.inheritanceContext);
+        this.ensureChildren();
+        this.containerState.children.push(child.build());
+        return this;
     }
-    /**
-     * Process tag content
-     */
-    processTagContent(options) {
-        return options.label || options.content || 'Tag';
+    isValueWidget(type) {
+        const valueWidgetTypes = [
+            'text-editor',
+            'large-text-editor',
+            'rich-text-editor',
+            'password-editor',
+            'number-editor',
+            'select-editor',
+            'lookup-editor',
+            'selection-list-editor',
+            'date-time-editor',
+            'toggle-editor',
+            'color-editor',
+        ];
+        return valueWidgetTypes.includes(type);
     }
-    /**
-     * Process generic content
-     */
-    processGenericContent(options) {
-        if (!options.content)
-            return '';
-        // اگر HTML tags داره، استفاده کن
-        if (options.content.includes('<')) {
-            return options.content;
+    build() {
+        const result = {
+            type: this.containerState.type,
+            children: this.containerState.children,
+            options: this.containerState.options,
+            mode: this.containerState.mode,
+            visible: this.containerState.visible,
+        };
+        // Add name with _form_field suffix for form fields
+        if (this.containerState.type === 'form-field') {
+            if (this.containerState.name) {
+                result.name = this.containerState.name;
+            }
+            else if (this.containerState.options?.['label']) {
+                result.name = labelToPath(this.containerState.options['label']) + '_form_field';
+            }
+            // Form fields don't have path
+        }
+        else {
+            // Other containers can have name and path
+            if (this.containerState.name) {
+                result.name = this.containerState.name;
+            }
+            if (this.containerState.path) {
+                result.path = this.containerState.path;
+            }
+            if (this.containerState.defaultValue !== undefined) {
+                result.defaultValue = this.containerState.defaultValue;
+            }
         }
-        // Plain text با basic styling
-        return `<span style="color: #333;">${options.content}</span>`;
+        return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AXPLayoutBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AXPLayoutBuilderService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AXPLayoutBuilderService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-//#region ----   Layout Builder Implementation   ----
-class LayoutBuilder {
-    constructor() {
-        this.state = {
-            nodes: [],
-            mode: 'edit',
-            direction: 'vertical',
-            look: 'normal',
-            layoutConfig: {
-                positions: {
-                    sm: { colSpan: 12 },
-                    md: { colSpan: 8 },
-                    lg: { colSpan: 6 },
-                    xl: { colSpan: 5 },
-                    xxl: { colSpan: 4 },
-                },
-            },
-        };
-    }
-    widget(name, delegate) {
-        const widgetBuilder = new WidgetBuilder(name);
-        if (delegate) {
-            delegate(widgetBuilder);
-        }
-        this.state.nodes.push(widgetBuilder.build());
+/**
+ * Base container builder mixin - Interface Segregation Principle
+ * Provides common container operations
+ */
+class BaseContainerMixin extends BaseContainerBuilder {
+    name(name) {
+        this.containerState.name = name;
         return this;
     }
-    layout(config) {
-        this.state.layoutConfig = { ...this.state.layoutConfig, ...config };
+    path(path) {
+        this.containerState.path = path;
         return this;
     }
     mode(mode) {
-        this.state.mode = mode;
+        this.containerState.mode = mode;
+        this.inheritanceContext.mode = mode;
+        return this;
+    }
+    visible(condition) {
+        if (!this.containerState.options)
+            this.containerState.options = {};
+        this.containerState.options['visible'] = condition;
+        this.inheritanceContext.visible = condition;
+        return this;
+    }
+    disabled(condition) {
+        if (!this.containerState.options)
+            this.containerState.options = {};
+        this.containerState.options['disabled'] = condition;
+        this.inheritanceContext.disabled = condition;
+        return this;
+    }
+    readonly(condition) {
+        if (!this.containerState.options)
+            this.containerState.options = {};
+        this.containerState.options['readonly'] = condition;
+        this.inheritanceContext.readonly = condition;
         return this;
     }
     direction(direction) {
-        this.state.direction = direction;
+        if (!this.containerState.options)
+            this.containerState.options = {};
+        this.containerState.options['direction'] = direction;
+        this.inheritanceContext.direction = direction;
         return this;
     }
-    look(look) {
-        this.state.look = look;
+    // Inheritance context methods
+    withInheritanceContext(context) {
+        this.inheritanceContext = mergeInheritanceContext(context);
         return this;
     }
-    // Predefined layout containers at root level - delegate pattern required
+    getInheritanceContext() {
+        return { ...this.inheritanceContext };
+    }
+}
+/**
+ * Layout container mixin - Interface Segregation Principle
+ * Provides layout-specific operations
+ */
+class LayoutContainerMixin extends BaseContainerMixin {
+    layout(value) {
+        // Layout handling can be added here if needed
+        return this;
+    }
+}
+/**
+ * Child container mixin - Interface Segregation Principle
+ * Provides child container management
+ */
+class ChildContainerMixin extends LayoutContainerMixin {
     grid(delegate) {
         const container = new GridContainerBuilder();
+        container.withInheritanceContext(this.inheritanceContext);
         if (delegate) {
             delegate(container);
         }
-        this.state.nodes.push(container.build());
+        this.ensureChildren();
+        this.containerState.children.push(container.build());
         return this;
     }
     flex(delegate) {
         const container = new FlexContainerBuilder();
+        container.withInheritanceContext(this.inheritanceContext);
         if (delegate) {
             delegate(container);
         }
-        this.state.nodes.push(container.build());
+        this.ensureChildren();
+        this.containerState.children.push(container.build());
         return this;
     }
     panel(delegate) {
         const container = new PanelContainerBuilder();
+        container.withInheritanceContext(this.inheritanceContext);
         if (delegate) {
             delegate(container);
         }
-        this.state.nodes.push(container.build());
+        this.ensureChildren();
+        this.containerState.children.push(container.build());
         return this;
     }
     page(delegate) {
         const container = new PageContainerBuilder();
+        container.withInheritanceContext(this.inheritanceContext);
         if (delegate) {
             delegate(container);
         }
-        this.state.nodes.push(container.build());
+        this.ensureChildren();
+        this.containerState.children.push(container.build());
         return this;
     }
     tabset(delegate) {
         const container = new TabsetContainerBuilder();
+        container.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(container);
+        }
+        this.ensureChildren();
+        this.containerState.children.push(container.build());
+        return this;
+    }
+    fieldset(delegate) {
+        const container = new FieldsetContainerBuilder();
+        container.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(container);
+        }
+        this.ensureChildren();
+        this.containerState.children.push(container.build());
+        return this;
+    }
+    dialog(delegate) {
+        const container = new DialogContainerBuilder(); // Will use inject() fallback
         if (delegate) {
             delegate(container);
         }
-        this.state.nodes.push(container.build());
+        return container;
+    }
+    formField(label, delegate) {
+        const field = new FormFieldBuilder(label);
+        field.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(field);
+        }
+        this.ensureChildren();
+        this.containerState.children.push(field.build());
         return this;
     }
-    // Direct widget methods at root level
+}
+/**
+ * Widget container mixin - Interface Segregation Principle
+ * Provides widget creation operations
+ */
+class WidgetContainerMixin extends ChildContainerMixin {
     textBox(options) {
-        const widgetBuilder = new WidgetBuilder().textBox(options);
-        this.state.nodes.push(widgetBuilder.build());
+        this.addWidget('text-editor', options);
         return this;
     }
     largeTextBox(options) {
-        const widgetBuilder = new WidgetBuilder().largeTextBox(options);
-        this.state.nodes.push(widgetBuilder.build());
+        this.addWidget('large-text-editor', options);
         return this;
     }
     richText(options) {
-        const widgetBuilder = new WidgetBuilder().richText(options);
-        this.state.nodes.push(widgetBuilder.build());
+        this.addWidget('rich-text-editor', options);
         return this;
     }
     passwordBox(options) {
-        const widgetBuilder = new WidgetBuilder().passwordBox(options);
-        this.state.nodes.push(widgetBuilder.build());
+        this.addWidget('password-editor', options);
         return this;
     }
     numberBox(options) {
-        const widgetBuilder = new WidgetBuilder().numberBox(options);
-        this.state.nodes.push(widgetBuilder.build());
+        this.addWidget('number-editor', options);
         return this;
     }
     selectBox(options) {
-        const widgetBuilder = new WidgetBuilder().selectBox(options);
-        this.state.nodes.push(widgetBuilder.build());
+        this.addWidget('select-editor', options);
         return this;
     }
     lookupBox(options) {
-        const widgetBuilder = new WidgetBuilder().lookupBox(options);
-        this.state.nodes.push(widgetBuilder.build());
+        this.addWidget('lookup-editor', options);
         return this;
     }
     selectionList(options) {
-        const widgetBuilder = new WidgetBuilder().selectionList(options);
-        this.state.nodes.push(widgetBuilder.build());
+        this.addWidget('selection-list-editor', options);
         return this;
     }
     dateTimeBox(options) {
-        const widgetBuilder = new WidgetBuilder().dateTimeBox(options);
-        this.state.nodes.push(widgetBuilder.build());
+        this.addWidget('date-time-editor', options);
         return this;
     }
     toggleSwitch(options) {
-        const widgetBuilder = new WidgetBuilder().toggleSwitch(options);
-        this.state.nodes.push(widgetBuilder.build());
+        this.addWidget('toggle-editor', options);
         return this;
     }
     colorBox(options) {
-        const widgetBuilder = new WidgetBuilder().colorBox(options);
-        this.state.nodes.push(widgetBuilder.build());
+        this.addWidget('color-editor', options);
         return this;
     }
-    customWidget(type, options) {
-        const widgetBuilder = new WidgetBuilder().customWidget(type, options);
-        this.state.nodes.push(widgetBuilder.build());
+    list(delegate) {
+        const container = new ListWidgetBuilder();
+        container.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(container);
+        }
+        this.ensureChildren();
+        this.containerState.children.push(container.build());
         return this;
     }
-    build() {
-        return {
-            nodes: this.state.nodes,
-            mode: this.state.mode,
-            direction: this.state.direction,
-            look: this.state.look,
-            layoutConfig: this.state.layoutConfig,
-        };
+    customWidget(type, options) {
+        this.addWidget(type, options);
+        return this;
     }
-    render() {
-        console.log('render() called, state:', JSON.parse(JSON.stringify(this.state)));
-        if (!this.state.nodes || !Array.isArray(this.state.nodes)) {
-            console.error('Invalid nodes in state:', this.state.nodes);
-            return {};
-        }
-        try {
-            const nodes = this.transformToWidgetNodes(this.state.nodes);
-            console.log('render() transformed nodes:', JSON.parse(JSON.stringify(nodes)));
-            // No nodes
-            if (!nodes || nodes.length === 0) {
-                return {};
-            }
-            // Single node → return directly
-            if (nodes.length === 1) {
-                return nodes[0];
-            }
-            // Multiple nodes → wrap in a container node with layout config
-            const flexDirection = this.state.direction === 'horizontal' ? 'row' : 'column';
-            const container = {
-                type: 'flex-layout',
-                name: 'root',
-                options: {
-                    flexDirection,
-                    gap: '16px',
-                },
-                children: nodes,
-            };
-            return container;
-        }
-        catch (error) {
-            console.error('Error in render():', error);
-            return {};
-        }
-    }
-    transformToWidgetNodes(nodes) {
-        console.log('transformToWidgetNodes called with nodes:', nodes);
-        const sorted = this.sortNodes(nodes);
-        // Helper to compute flex-item options from grid layout positions
-        const toFlexItemOptions = (layout, order) => {
-            let colSpan;
-            const positions = layout?.positions ?? this.state.layoutConfig?.positions;
-            if (positions) {
-                colSpan = positions.xxl?.colSpan || positions.xl?.colSpan || positions.lg?.colSpan || positions.md?.colSpan || positions.sm?.colSpan;
-            }
-            const basis = colSpan && colSpan > 0 && colSpan <= 12 ? `${(colSpan / 12) * 100}%` : undefined;
-            const opt = {};
-            if (basis)
-                opt.basis = basis;
-            if (order !== undefined)
-                opt.order = typeof order === 'number' ? order : parseInt(order.toString());
-            return opt;
-        };
-        const multipleSiblings = sorted.length > 1;
-        return sorted.map((node) => {
-            console.log('Processing node:', node);
-            // Build the actual widget node
-            const widget = {
-                type: node.widget?.type || 'unknown',
-                name: node.id,
-                options: {
-                    ...node.widget?.options,
-                    mode: node.mode,
-                    visible: node.visible,
-                    disabled: node.disabled,
-                    readonly: node.readonly,
-                },
-            };
-            if (node.children && node.children.length > 0) {
-                widget.children = this.transformToWidgetNodes(this.sortNodes(node.children));
-            }
-            // If we have multiple siblings at this level, wrap each item in a flex-item container
-            if (multipleSiblings) {
-                const flexItemOptions = toFlexItemOptions(node.layout, node.order);
-                const wrapped = {
-                    type: 'flex-item-layout',
-                    name: `${node.id || 'item'}-container`,
-                    options: {
-                        ...flexItemOptions,
-                    },
-                    children: [widget],
-                };
-                return wrapped;
-            }
-            return widget;
-        });
+}
+/**
+ * Flex Container Builder - Liskov Substitution Principle
+ * Extends WidgetContainerMixin to inherit all common functionality
+ */
+class FlexContainerBuilder extends WidgetContainerMixin {
+    constructor() {
+        super('flex-layout');
     }
-    sortNodes(nodes) {
-        if (!Array.isArray(nodes))
-            return [];
-        return nodes
-            .map((n, idx) => ({ n, idx }))
-            .sort((a, b) => {
-            const ao = a.n.order;
-            const bo = b.n.order;
-            const aHas = ao !== undefined && ao !== null;
-            const bHas = bo !== undefined && bo !== null;
-            if (aHas && bHas) {
-                if (typeof ao === 'number' && typeof bo === 'number')
-                    return ao - bo;
-                return String(ao).localeCompare(String(bo));
-            }
-            if (aHas && !bHas)
-                return -1;
-            if (!aHas && bHas)
-                return 1;
-            return a.idx - b.idx;
-        })
-            .map(x => x.n);
-    }
-}
-//#endregion
-//#region ----   Container Builder Implementation   ----
-// Base Container Builder
-class BaseContainerBuilder {
-    constructor(containerType) {
-        this.containerState = {
-            type: 'widget',
-            children: [],
-        };
-        this.containerState.widget = { type: containerType, options: {} };
-    }
-    baseId(id) {
-        this.containerState.id = id;
-        return this;
-    }
-    baseLayout(value) {
-        if (typeof value === 'number') {
-            this.containerState.layout = {
-                positions: {
-                    sm: { colSpan: 12 },
-                    md: { colSpan: 12 },
-                    lg: { colSpan: value },
-                    xl: { colSpan: value },
-                    xxl: { colSpan: value },
-                },
-            };
-        }
-        else {
-            this.containerState.layout = value;
-        }
-        return this;
-    }
-    // Base methods shared by all containers
-    ensureChildren() {
-        this.containerState.children = this.containerState.children || [];
-    }
-    addDirectWidget(type, options) {
-        const child = new WidgetBuilder();
-        child.customWidget(type, options);
-        this.ensureChildren();
-        this.containerState.children.push(child.build());
-        return this;
-    }
-    build() {
-        return {
-            id: this.containerState.id,
-            name: this.containerState.name,
-            widget: this.containerState.widget,
-            children: this.containerState.children,
-            layout: this.containerState.layout,
-            mode: this.containerState.mode,
-            order: this.containerState.order,
-            visible: this.containerState.visible,
-            disabled: this.containerState.disabled,
-            readonly: this.containerState.readonly,
-        };
-    }
-}
-// Flex Container Builder
-class FlexContainerBuilder extends BaseContainerBuilder {
-    constructor() {
-        super('flex-layout');
-    }
-    id(id) {
-        return this.baseId(id);
-    }
-    layout(value) {
-        return this.baseLayout(value);
-    }
-    mode(mode) {
-        this.containerState.mode = mode;
-        return this;
-    }
-    order(value) {
-        this.containerState.order = value;
-        return this;
-    }
-    visible(condition) {
-        this.containerState.visible = condition;
-        return this;
-    }
-    disabled(condition) {
-        this.containerState.disabled = condition;
-        return this;
-    }
-    readonly(condition) {
-        this.containerState.readonly = condition;
-        return this;
-    }
-    setOptions(options) {
-        this.containerState.widget.options = { ...this.containerState.widget.options, ...options };
-        return this;
+    setOptions(options) {
+        this.containerState.options = { ...this.containerState.options, ...options };
+        return this;
     }
     // Individual fluent methods for Flex
-    setFlexDirection(direction) {
+    setDirection(direction) {
         return this.setOptions({ flexDirection: direction });
     }
-    setFlexWrap(wrap) {
+    setWrap(wrap) {
         return this.setOptions({ flexWrap: wrap });
     }
     setJustifyContent(justify) {
@@ -675,70 +536,17 @@ class FlexContainerBuilder extends BaseContainerBuilder {
     setMargin(margin) {
         return this.setOptions({ spacing: { margin } });
     }
-    addContainer(name, delegate) {
-        // Implementation will be simplified for now
-        return this;
-    }
-    addWidget(name, delegate) {
-        const childWidget = new WidgetBuilder(name);
-        if (delegate) {
-            delegate(childWidget);
-        }
-        this.ensureChildren();
-        this.containerState.children.push(childWidget.build());
-        return this;
-    }
-    textBox(options) {
-        return this.addDirectWidget('text-editor', options);
-    }
-    largeTextBox(options) {
-        return this.addDirectWidget('large-text-editor', options);
-    }
-    richText(options) {
-        return this.addDirectWidget('rich-text-editor', options);
-    }
-    passwordBox(options) {
-        return this.addDirectWidget('password-editor', options);
-    }
-    numberBox(options) {
-        return this.addDirectWidget('number-editor', options);
-    }
-    selectBox(options) {
-        return this.addDirectWidget('select-editor', options);
-    }
-    lookupBox(options) {
-        return this.addDirectWidget('lookup-editor', options);
-    }
-    selectionList(options) {
-        return this.addDirectWidget('selection-list', options);
-    }
-    dateTimeBox(options) {
-        return this.addDirectWidget('date-time-editor', options);
-    }
-    toggleSwitch(options) {
-        return this.addDirectWidget('toggle-editor', options);
-    }
-    colorBox(options) {
-        return this.addDirectWidget('color-editor', options);
-    }
-    customWidget(type, options) {
-        return this.addDirectWidget(type, options);
-    }
 }
-// Grid Container Builder
-class GridContainerBuilder extends BaseContainerBuilder {
+/**
+ * Grid Container Builder - Liskov Substitution Principle
+ * Extends WidgetContainerMixin to inherit all common functionality
+ */
+class GridContainerBuilder extends WidgetContainerMixin {
     constructor() {
         super('grid-layout');
     }
-    id(id) { return this.baseId(id); }
-    layout(value) { return this.baseLayout(value); }
-    mode(mode) { this.containerState.mode = mode; return this; }
-    order(value) { this.containerState.order = value; return this; }
-    visible(condition) { this.containerState.visible = condition; return this; }
-    disabled(condition) { this.containerState.disabled = condition; return this; }
-    readonly(condition) { this.containerState.readonly = condition; return this; }
     setOptions(options) {
-        this.containerState.widget.options = { ...this.containerState.widget.options, ...options };
+        this.containerState.options = { ...this.containerState.options, ...options };
         return this;
     }
     // Individual fluent methods for Grid
@@ -769,42 +577,17 @@ class GridContainerBuilder extends BaseContainerBuilder {
     setMargin(margin) {
         return this.setOptions({ spacing: { margin } });
     }
-    addContainer(name, delegate) { return this; }
-    addWidget(name, delegate) {
-        const childWidget = new WidgetBuilder(name);
-        if (delegate)
-            delegate(childWidget);
-        this.ensureChildren();
-        this.containerState.children.push(childWidget.build());
-        return this;
-    }
-    textBox(options) { return this.addDirectWidget('text-editor', options); }
-    largeTextBox(options) { return this.addDirectWidget('large-text-editor', options); }
-    richText(options) { return this.addDirectWidget('rich-text-editor', options); }
-    passwordBox(options) { return this.addDirectWidget('password-editor', options); }
-    numberBox(options) { return this.addDirectWidget('number-editor', options); }
-    selectBox(options) { return this.addDirectWidget('select-editor', options); }
-    lookupBox(options) { return this.addDirectWidget('lookup-editor', options); }
-    selectionList(options) { return this.addDirectWidget('selection-list', options); }
-    dateTimeBox(options) { return this.addDirectWidget('date-time-editor', options); }
-    toggleSwitch(options) { return this.addDirectWidget('toggle-editor', options); }
-    colorBox(options) { return this.addDirectWidget('color-editor', options); }
-    customWidget(type, options) { return this.addDirectWidget(type, options); }
 }
-// Panel Container Builder
-class PanelContainerBuilder extends BaseContainerBuilder {
+/**
+ * Panel Container Builder - Liskov Substitution Principle
+ * Extends WidgetContainerMixin to inherit all common functionality
+ */
+class PanelContainerBuilder extends WidgetContainerMixin {
     constructor() {
         super('panel-layout');
     }
-    id(id) { return this.baseId(id); }
-    layout(value) { return this.baseLayout(value); }
-    mode(mode) { this.containerState.mode = mode; return this; }
-    order(value) { this.containerState.order = value; return this; }
-    visible(condition) { this.containerState.visible = condition; return this; }
-    disabled(condition) { this.containerState.disabled = condition; return this; }
-    readonly(condition) { this.containerState.readonly = condition; return this; }
     setOptions(options) {
-        this.containerState.widget.options = { ...this.containerState.widget.options, ...options };
+        this.containerState.options = { ...this.containerState.options, ...options };
         return this;
     }
     // Individual fluent methods for Panel
@@ -823,42 +606,17 @@ class PanelContainerBuilder extends BaseContainerBuilder {
     setCollapsed(collapsed) {
         return this.setOptions({ collapsed });
     }
-    addContainer(name, delegate) { return this; }
-    addWidget(name, delegate) {
-        const childWidget = new WidgetBuilder(name);
-        if (delegate)
-            delegate(childWidget);
-        this.ensureChildren();
-        this.containerState.children.push(childWidget.build());
-        return this;
-    }
-    textBox(options) { return this.addDirectWidget('text-editor', options); }
-    largeTextBox(options) { return this.addDirectWidget('large-text-editor', options); }
-    richText(options) { return this.addDirectWidget('rich-text-editor', options); }
-    passwordBox(options) { return this.addDirectWidget('password-editor', options); }
-    numberBox(options) { return this.addDirectWidget('number-editor', options); }
-    selectBox(options) { return this.addDirectWidget('select-editor', options); }
-    lookupBox(options) { return this.addDirectWidget('lookup-editor', options); }
-    selectionList(options) { return this.addDirectWidget('selection-list', options); }
-    dateTimeBox(options) { return this.addDirectWidget('date-time-editor', options); }
-    toggleSwitch(options) { return this.addDirectWidget('toggle-editor', options); }
-    colorBox(options) { return this.addDirectWidget('color-editor', options); }
-    customWidget(type, options) { return this.addDirectWidget(type, options); }
 }
-// Page Container Builder
-class PageContainerBuilder extends BaseContainerBuilder {
+/**
+ * Page Container Builder - Liskov Substitution Principle
+ * Extends WidgetContainerMixin to inherit all common functionality
+ */
+class PageContainerBuilder extends WidgetContainerMixin {
     constructor() {
         super('page-layout');
     }
-    id(id) { return this.baseId(id); }
-    layout(value) { return this.baseLayout(value); }
-    mode(mode) { this.containerState.mode = mode; return this; }
-    order(value) { this.containerState.order = value; return this; }
-    visible(condition) { this.containerState.visible = condition; return this; }
-    disabled(condition) { this.containerState.disabled = condition; return this; }
-    readonly(condition) { this.containerState.readonly = condition; return this; }
     setOptions(options) {
-        this.containerState.widget.options = { ...this.containerState.widget.options, ...options };
+        this.containerState.options = { ...this.containerState.options, ...options };
         return this;
     }
     // Individual fluent methods for Page
@@ -877,42 +635,17 @@ class PageContainerBuilder extends BaseContainerBuilder {
     setDirection(direction) {
         return this.setOptions({ direction });
     }
-    addContainer(name, delegate) { return this; }
-    addWidget(name, delegate) {
-        const childWidget = new WidgetBuilder(name);
-        if (delegate)
-            delegate(childWidget);
-        this.ensureChildren();
-        this.containerState.children.push(childWidget.build());
-        return this;
-    }
-    textBox(options) { return this.addDirectWidget('text-editor', options); }
-    largeTextBox(options) { return this.addDirectWidget('large-text-editor', options); }
-    richText(options) { return this.addDirectWidget('rich-text-editor', options); }
-    passwordBox(options) { return this.addDirectWidget('password-editor', options); }
-    numberBox(options) { return this.addDirectWidget('number-editor', options); }
-    selectBox(options) { return this.addDirectWidget('select-editor', options); }
-    lookupBox(options) { return this.addDirectWidget('lookup-editor', options); }
-    selectionList(options) { return this.addDirectWidget('selection-list', options); }
-    dateTimeBox(options) { return this.addDirectWidget('date-time-editor', options); }
-    toggleSwitch(options) { return this.addDirectWidget('toggle-editor', options); }
-    colorBox(options) { return this.addDirectWidget('color-editor', options); }
-    customWidget(type, options) { return this.addDirectWidget(type, options); }
 }
-// Tabset Container Builder
-class TabsetContainerBuilder extends BaseContainerBuilder {
+/**
+ * Tabset Container Builder - Liskov Substitution Principle
+ * Extends WidgetContainerMixin to inherit all common functionality
+ */
+class TabsetContainerBuilder extends WidgetContainerMixin {
     constructor() {
         super('tabset-layout');
     }
-    id(id) { return this.baseId(id); }
-    layout(value) { return this.baseLayout(value); }
-    mode(mode) { this.containerState.mode = mode; return this; }
-    order(value) { this.containerState.order = value; return this; }
-    visible(condition) { this.containerState.visible = condition; return this; }
-    disabled(condition) { this.containerState.disabled = condition; return this; }
-    readonly(condition) { this.containerState.readonly = condition; return this; }
     setOptions(options) {
-        this.containerState.widget.options = { ...this.containerState.widget.options, ...options };
+        this.containerState.options = { ...this.containerState.options, ...options };
         return this;
     }
     // Individual fluent methods for Tabset
@@ -925,396 +658,1113 @@ class TabsetContainerBuilder extends BaseContainerBuilder {
     setActiveIndex(index) {
         return this.setOptions({ activeIndex: index });
     }
-    addContainer(name, delegate) { return this; }
-    addWidget(name, delegate) {
-        const childWidget = new WidgetBuilder(name);
-        if (delegate)
-            delegate(childWidget);
-        this.ensureChildren();
-        this.containerState.children.push(childWidget.build());
-        return this;
-    }
-    textBox(options) { return this.addDirectWidget('text-editor', options); }
-    largeTextBox(options) { return this.addDirectWidget('large-text-editor', options); }
-    richText(options) { return this.addDirectWidget('rich-text-editor', options); }
-    passwordBox(options) { return this.addDirectWidget('password-editor', options); }
-    numberBox(options) { return this.addDirectWidget('number-editor', options); }
-    selectBox(options) { return this.addDirectWidget('select-editor', options); }
-    lookupBox(options) { return this.addDirectWidget('lookup-editor', options); }
-    selectionList(options) { return this.addDirectWidget('selection-list', options); }
-    dateTimeBox(options) { return this.addDirectWidget('date-time-editor', options); }
-    toggleSwitch(options) { return this.addDirectWidget('toggle-editor', options); }
-    colorBox(options) { return this.addDirectWidget('color-editor', options); }
-    customWidget(type, options) { return this.addDirectWidget(type, options); }
 }
-//#endregion
-//#region ----   Widget Builder Implementation   ----
-class WidgetBuilder {
-    constructor(name) {
-        this.widgetState = {
-            type: 'widget',
-            children: [],
-        };
-        if (name) {
-            this.widgetState.name = name;
-        }
-    }
-    // No utility methods needed - widget options are pure now
-    isContainerWidgetType(type) {
-        if (!type)
-            return false;
-        return ['grid-layout', 'flex-layout', 'panel-layout', 'page-layout', 'tabset-layout'].includes(type);
-    }
-    id(id) {
-        this.widgetState.id = id;
-        return this;
-    }
-    layout(value) {
-        if (typeof value === 'number') {
-            this.widgetState.layout = {
-                positions: {
-                    sm: { colSpan: 12 },
-                    md: { colSpan: 12 },
-                    lg: { colSpan: value },
-                    xl: { colSpan: value },
-                    xxl: { colSpan: value },
-                }
-            };
-        }
-        else {
-            this.widgetState.layout = value;
-        }
-        return this;
-    }
-    mode(mode) {
-        this.widgetState.mode = mode;
-        return this;
-    }
-    visible(condition) {
-        this.widgetState.visible = condition;
-        return this;
+/**
+ * Form Field Builder - Liskov Substitution Principle
+ * Can only contain ONE widget with automatic path generation
+ */
+class FormFieldBuilder extends LayoutContainerMixin {
+    constructor(label) {
+        super('form-field');
+        this.hasWidget = false;
+        this.containerState.options = { label, showLabel: true };
     }
-    disabled(condition) {
-        this.widgetState.disabled = condition;
+    setOptions(options) {
+        this.containerState.options = { ...this.containerState.options, ...options };
         return this;
     }
-    readonly(condition) {
-        this.widgetState.readonly = condition;
-        return this;
+    setLabel(label) {
+        return this.setOptions({ label });
     }
-    order(value) {
-        this.widgetState.order = value;
-        return this;
+    setShowLabel(showLabel) {
+        return this.setOptions({ showLabel });
     }
-    // Container helpers - delegate pattern required
-    grid(delegate) {
-        const container = new GridContainerBuilder();
-        if (delegate) {
-            delegate(container);
+    // Single widget methods with automatic path generation
+    addSingleWidget(type, options) {
+        if (this.hasWidget) {
+            throw new Error('Form field can only contain one widget');
         }
-        const built = container.build();
-        this.widgetState.widget = built.widget;
-        this.widgetState.children = built.children;
-        return this;
-    }
-    flex(delegate) {
-        const container = new FlexContainerBuilder();
-        if (delegate) {
-            delegate(container);
+        const formFieldName = this.containerState.name;
+        const formFieldPath = this.containerState.path; // Get explicit path from form field
+        const formFieldLabel = this.containerState.options?.['label'];
+        const widgetName = options?.name;
+        // Generate widget path: explicit path -> widget name -> form field name -> label -> random
+        let widgetPath;
+        if (formFieldPath) {
+            widgetPath = formFieldPath; // Use explicit form field path first
         }
-        const built = container.build();
-        this.widgetState.widget = built.widget;
-        this.widgetState.children = built.children;
-        return this;
-    }
-    panel(delegate) {
-        const container = new PanelContainerBuilder();
-        if (delegate) {
-            delegate(container);
+        else if (widgetName) {
+            widgetPath = widgetName;
         }
-        const built = container.build();
-        this.widgetState.widget = built.widget;
-        this.widgetState.children = built.children;
-        return this;
-    }
-    page(delegate) {
-        const container = new PageContainerBuilder();
-        if (delegate) {
-            delegate(container);
+        else if (formFieldName) {
+            widgetPath = formFieldName; // Use form field name as default path
         }
-        const built = container.build();
-        this.widgetState.widget = built.widget;
-        this.widgetState.children = built.children;
-        return this;
-    }
-    tabset(delegate) {
-        const container = new TabsetContainerBuilder();
-        if (delegate) {
-            delegate(container);
+        else if (formFieldLabel) {
+            widgetPath = labelToPath(formFieldLabel);
         }
-        const built = container.build();
-        this.widgetState.widget = built.widget;
-        this.widgetState.children = built.children;
-        return this;
-    }
-    widget(name, delegate) {
-        const child = new WidgetBuilder(name);
-        if (delegate) {
-            delegate(child);
+        else {
+            widgetPath = generateRandomId();
         }
-        this.widgetState.children = this.widgetState.children || [];
-        this.widgetState.children.push(child.build());
+        const finalName = widgetName || formFieldName || widgetPath;
+        const child = new WidgetBuilder();
+        child.type(type);
+        child.name(finalName);
+        child.path(widgetPath);
+        // Remove name from options since it's now in state
+        const { name: _, ...cleanOptions } = (options || {});
+        child.options(cleanOptions);
+        child.withInheritanceContext(this.inheritanceContext);
+        this.ensureChildren();
+        this.containerState.children.push(child.build());
+        this.hasWidget = true;
         return this;
     }
-    // Widget type methods
     textBox(options) {
-        if (this.isContainerWidgetType(this.widgetState.widget?.type)) {
-            const child = new WidgetBuilder();
-            child.textBox(options);
-            this.widgetState.children.push(child.build());
-            return this;
-        }
-        else {
-            this.widgetState.widget = {
-                type: 'text-editor',
-                options,
-            };
-            return this;
-        }
+        return this.addSingleWidget('text-editor', options);
     }
     largeTextBox(options) {
-        if (this.isContainerWidgetType(this.widgetState.widget?.type)) {
-            const child = new WidgetBuilder();
-            child.largeTextBox(options);
-            this.widgetState.children.push(child.build());
-            return this;
-        }
-        else {
-            this.widgetState.widget = {
-                type: 'large-text-editor',
-                options,
-            };
-            return this;
-        }
+        return this.addSingleWidget('large-text-editor', options);
     }
     richText(options) {
-        if (this.isContainerWidgetType(this.widgetState.widget?.type)) {
-            const child = new WidgetBuilder();
-            child.richText(options);
-            this.widgetState.children.push(child.build());
-            return this;
-        }
-        else {
-            this.widgetState.widget = {
-                type: 'rich-text-editor',
-                options,
-            };
-            return this;
-        }
+        return this.addSingleWidget('rich-text-editor', options);
     }
     passwordBox(options) {
-        if (this.isContainerWidgetType(this.widgetState.widget?.type)) {
-            const child = new WidgetBuilder();
-            child.passwordBox(options);
-            this.widgetState.children.push(child.build());
-            return this;
-        }
-        else {
-            this.widgetState.widget = {
-                type: 'password-editor',
-                options,
-            };
-            return this;
-        }
+        return this.addSingleWidget('password-editor', options);
     }
     numberBox(options) {
-        if (this.isContainerWidgetType(this.widgetState.widget?.type)) {
-            const child = new WidgetBuilder();
-            child.numberBox(options);
-            this.widgetState.children.push(child.build());
-            return this;
-        }
-        else {
-            this.widgetState.widget = {
-                type: 'number-editor',
-                options,
-            };
-            return this;
-        }
+        return this.addSingleWidget('number-editor', options);
     }
     selectBox(options) {
-        if (this.isContainerWidgetType(this.widgetState.widget?.type)) {
-            const child = new WidgetBuilder();
-            child.selectBox(options);
-            this.widgetState.children.push(child.build());
-            return this;
-        }
-        else {
-            this.widgetState.widget = {
-                type: 'select-editor',
-                options,
-            };
-            return this;
-        }
+        return this.addSingleWidget('select-editor', options);
     }
     lookupBox(options) {
-        if (this.isContainerWidgetType(this.widgetState.widget?.type)) {
-            const child = new WidgetBuilder();
-            child.lookupBox(options);
-            this.widgetState.children.push(child.build());
-            return this;
-        }
-        else {
-            this.widgetState.widget = {
-                type: 'lookup-editor',
-                options,
-            };
-            return this;
-        }
+        return this.addSingleWidget('lookup-editor', options);
     }
     selectionList(options) {
-        if (this.isContainerWidgetType(this.widgetState.widget?.type)) {
-            const child = new WidgetBuilder();
-            child.selectionList(options);
-            this.widgetState.children.push(child.build());
-            return this;
-        }
-        else {
-            this.widgetState.widget = {
-                type: 'selection-list',
-                options,
-            };
-            return this;
-        }
+        return this.addSingleWidget('selection-list-editor', options);
     }
     dateTimeBox(options) {
-        if (this.isContainerWidgetType(this.widgetState.widget?.type)) {
-            const child = new WidgetBuilder();
-            child.dateTimeBox(options);
-            this.widgetState.children.push(child.build());
-            return this;
-        }
-        else {
-            this.widgetState.widget = {
-                type: 'date-time-editor',
-                options,
-            };
-            return this;
-        }
+        return this.addSingleWidget('date-time-editor', options);
     }
     toggleSwitch(options) {
-        if (this.isContainerWidgetType(this.widgetState.widget?.type)) {
-            const child = new WidgetBuilder();
-            child.toggleSwitch(options);
-            this.widgetState.children.push(child.build());
-            return this;
-        }
-        else {
-            this.widgetState.widget = {
-                type: 'toggle-editor',
-                options,
-            };
-            return this;
-        }
+        return this.addSingleWidget('toggle-editor', options);
     }
     colorBox(options) {
-        if (this.isContainerWidgetType(this.widgetState.widget?.type)) {
-            const child = new WidgetBuilder();
-            child.colorBox(options);
-            this.widgetState.children.push(child.build());
-            return this;
-        }
-        else {
-            this.widgetState.widget = {
-                type: 'color-editor',
-                options,
-            };
-            return this;
-        }
+        return this.addSingleWidget('color-editor', options);
     }
     customWidget(type, options) {
-        if (this.isContainerWidgetType(this.widgetState.widget?.type)) {
-            const child = new WidgetBuilder();
-            child.customWidget(type, options);
-            this.widgetState.children.push(child.build());
-            return this;
-        }
-        else {
-            this.widgetState.widget = {
-                type,
-                options: options,
-            };
-            return this;
-        }
-    }
-    build() {
-        return {
-            id: this.widgetState.id,
-            name: this.widgetState.name,
-            widget: this.widgetState.widget,
-            children: this.widgetState.children,
-            layout: this.widgetState.layout,
-            mode: this.widgetState.mode,
-            order: this.widgetState.order,
-            visible: this.widgetState.visible,
-            disabled: this.widgetState.disabled,
-            readonly: this.widgetState.readonly,
-        };
+        return this.addSingleWidget(type, options);
     }
 }
-
-class AXPLayoutRendererComponent {
+/**
+ * Fieldset Container Builder - Liskov Substitution Principle
+ * Extends LayoutContainerMixin to inherit layout functionality
+ * Specialized for form fields only
+ */
+class FieldsetContainerBuilder extends LayoutContainerMixin {
     constructor() {
-        this.renderedNode = {};
+        super('fieldset-layout');
+        this.containerState.options = {};
     }
-    ngOnInit() {
-        if (this.builder) {
-            this.renderedNode = {
-                type: 'block-layout',
-                mode: this.builder.mode ?? 'view',
-                children: (this.builder.nodes ?? []).map((node) => ({
-                    type: node.widget?.type ?? 'text-block-layout',
-                    mode: node.mode ?? 'view',
-                    children: (node.children ?? []).map((child) => ({
-                        type: child.widget?.type ?? 'text-block-layout',
-                        mode: child.mode ?? 'view',
-                    })),
-                })),
-            };
-        }
+    setOptions(options) {
+        this.containerState.options = { ...this.containerState.options, ...options };
+        return this;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AXPLayoutRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: AXPLayoutRendererComponent, isStandalone: true, selector: "axp-layout-renderer", inputs: { builder: "builder" }, ngImport: i0, template: `
-    <axp-widgets-container>
-      <ng-container 
-        axp-widget-renderer 
-        [node]="renderedNode" 
-        [mode]="builder?.mode ?? 'view'">
-      </ng-container>
-    </axp-widgets-container>
-  `, 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"], exportAs: ["widgetRenderer"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AXPLayoutRendererComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'axp-layout-renderer', standalone: true, imports: [CommonModule, AXPWidgetCoreModule], template: `
-    <axp-widgets-container>
-      <ng-container 
-        axp-widget-renderer 
-        [node]="renderedNode" 
-        [mode]="builder?.mode ?? 'view'">
-      </ng-container>
-    </axp-widgets-container>
+    // Individual fluent methods for Fieldset
+    setTitle(title) {
+        return this.setOptions({ title });
+    }
+    setDescription(description) {
+        return this.setOptions({ description });
+    }
+    setIcon(icon) {
+        return this.setOptions({ icon });
+    }
+    setCollapsible(collapsible) {
+        return this.setOptions({ collapsible });
+    }
+    setIsOpen(isOpen) {
+        return this.setOptions({ isOpen });
+    }
+    setLook(look) {
+        return this.setOptions({ look });
+    }
+    setShowHeader(showHeader) {
+        return this.setOptions({ showHeader });
+    }
+    setCols(cols) {
+        return this.setOptions({ cols });
+    }
+    // Only form fields are allowed in fieldset
+    formField(label, delegate) {
+        const field = new FormFieldBuilder(label);
+        field.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(field);
+        }
+        this.ensureChildren();
+        this.containerState.children.push(field.build());
+        return this;
+    }
+}
+/**
+ * List Widget Builder - Liskov Substitution Principle
+ * Extends WidgetContainerMixin to inherit all common functionality
+ */
+class ListWidgetBuilder extends WidgetContainerMixin {
+    constructor() {
+        super('list');
+    }
+    setOptions(options) {
+        this.containerState.options = { ...this.containerState.options, ...options };
+        return this;
+    }
+    // Individual fluent methods for List Widget
+    setDataSource(dataSource) {
+        return this.setOptions({ dataSource });
+    }
+    setColumns(columns) {
+        return this.setOptions({ columns });
+    }
+    // Event handlers
+    setOnRowClick(handler) {
+        return this.setOptions({ onRowClick: handler });
+    }
+    setOnRowDoubleClick(handler) {
+        return this.setOptions({ onRowDoubleClick: handler });
+    }
+    setOnSelectionChange(handler) {
+        return this.setOptions({ onSelectionChange: handler });
+    }
+    setOnRowCommand(handler) {
+        return this.setOptions({ onRowCommand: handler });
+    }
+    // Table features
+    setPaging(paging) {
+        return this.setOptions({ paging });
+    }
+    setShowHeader(show) {
+        return this.setOptions({ showHeader: show });
+    }
+    setShowFooter(show) {
+        return this.setOptions({ showFooter: show });
+    }
+    setFixHeader(fix) {
+        return this.setOptions({ fixHeader: fix });
+    }
+    setFixFooter(fix) {
+        return this.setOptions({ fixFooter: fix });
+    }
+    setFetchDataMode(mode) {
+        return this.setOptions({ fetchDataMode: mode });
+    }
+    setParentField(field) {
+        return this.setOptions({ parentField: field });
+    }
+    setMinHeight(height) {
+        return this.setOptions({ minHeight: height });
+    }
+    // Selection & Index
+    setShowIndex(show) {
+        return this.setOptions({ showIndex: show });
+    }
+    setAllowSelection(allow) {
+        return this.setOptions({ allowSelection: allow });
+    }
+    // Commands
+    setPrimaryCommands(commands) {
+        return this.setOptions({ primaryCommands: commands });
+    }
+    setSecondaryCommands(commands) {
+        return this.setOptions({ secondaryCommands: commands });
+    }
+    // Loading
+    setLoading(loading) {
+        return this.setOptions({ loading });
+    }
+}
+/**
+ * Dialog Container Builder - Specialized for dialog functionality
+ * Uses composition instead of inheritance for cleaner separation
+ */
+class DialogContainerBuilder {
+    constructor(popupService) {
+        this.dialogState = {
+            type: 'flex-layout', // This will be overridden when content layout exists
+            children: [],
+            mode: 'edit',
+            dialogOptions: {
+                title: '',
+                size: 'md',
+                closeButton: false,
+            },
+            actions: {
+                footer: {
+                    prefix: [],
+                    suffix: [],
+                },
+            },
+        };
+        if (popupService) {
+            this.popupService = popupService;
+        }
+        else {
+            this.popupService = inject(AXPopupService);
+        }
+    }
+    setOptions(options) {
+        this.dialogState.dialogOptions = { ...this.dialogState.dialogOptions, ...options };
+        return this;
+    }
+    // Individual fluent methods for Dialog
+    setTitle(title) {
+        return this.setOptions({ title });
+    }
+    setMessage(message) {
+        return this.setOptions({ message });
+    }
+    setSize(size) {
+        return this.setOptions({ size });
+    }
+    setCloseButton(closeButton) {
+        return this.setOptions({ closeButton });
+    }
+    setContext(context) {
+        return this.setOptions({ context });
+    }
+    content(delegate) {
+        if (delegate) {
+            // Create a flex container directly instead of through LayoutBuilder
+            const flexContainer = new FlexContainerBuilder();
+            flexContainer.setDirection('column');
+            flexContainer.setGap('10px');
+            delegate(flexContainer);
+            this.contentLayout = flexContainer.build();
+        }
+        return this;
+    }
+    setActions(delegate) {
+        if (delegate) {
+            const actionBuilder = new ActionBuilder(this);
+            delegate(actionBuilder);
+        }
+        return this;
+    }
+    // Build method to create dialog node
+    build() {
+        // If we have content layout, use it directly to avoid extra wrapper
+        if (this.contentLayout) {
+            return {
+                ...this.contentLayout,
+                // Add dialog-specific properties
+                options: {
+                    ...this.contentLayout.options,
+                    ...this.dialogState.dialogOptions,
+                },
+            };
+        }
+        // Fallback to dialog state structure if no content
+        const result = {
+            ...this.dialogState,
+            children: [],
+        };
+        // Add dialog-specific properties
+        if (this.dialogState.dialogOptions) {
+            result.options = { ...result.options, ...this.dialogState.dialogOptions };
+        }
+        return result;
+    }
+    // Dialog-specific methods
+    async show() {
+        const dialogNode = this.build();
+        // Import the dialog renderer component dynamically
+        const { AXPDialogRendererComponent } = await Promise.resolve().then(function () { return dialogRenderer_component; });
+        // Create dialog configuration
+        const dialogConfig = {
+            title: this.dialogState.dialogOptions?.title || '',
+            message: this.dialogState.dialogOptions?.message,
+            context: this.dialogState.dialogOptions?.context || {},
+            definition: dialogNode,
+            actions: this.dialogState.actions,
+        };
+        // The Promise resolves when user clicks an action button
+        return new Promise(async (resolve) => {
+            this.popupService.open(AXPDialogRendererComponent, {
+                title: dialogConfig.title,
+                size: this.dialogState.dialogOptions?.size || 'md',
+                closeButton: this.dialogState.dialogOptions?.closeButton || false,
+                closeOnBackdropClick: false,
+                draggable: false,
+                data: {
+                    config: dialogConfig,
+                    callBack: (result) => {
+                        // Resolve with the dialog reference when user clicks an action
+                        resolve(result);
+                    },
+                },
+            });
+        });
+    }
+}
+//#endregion
+//#region ----   Widget Builder Implementation   ----
+/**
+ * Widget Builder - Single Responsibility Principle
+ * Handles individual widget configuration and building
+ */
+class WidgetBuilder {
+    constructor(name) {
+        this.widgetState = {
+            type: 'widget',
+            options: {},
+        };
+        this.inheritanceContext = {};
+        if (name) {
+            this.widgetState.name = name;
+        }
+    }
+    type(type) {
+        this.widgetState.type = type;
+        return this;
+    }
+    name(name) {
+        this.widgetState.name = name;
+        if (!this.widgetState.path) {
+            this.widgetState.path = name;
+        }
+        return this;
+    }
+    path(path) {
+        this.widgetState.path = path;
+        return this;
+    }
+    options(options) {
+        this.widgetState.options = options;
+        return this;
+    }
+    layout(value) {
+        if (typeof value === 'number') {
+            this.widgetState.layout = {
+                positions: {
+                    sm: { colSpan: 12 },
+                    md: { colSpan: 12 },
+                    lg: { colSpan: value },
+                    xl: { colSpan: value },
+                    xxl: { colSpan: value },
+                },
+            };
+        }
+        else {
+            this.widgetState.layout = value;
+        }
+        return this;
+    }
+    mode(mode) {
+        this.widgetState.mode = mode;
+        this.inheritanceContext.mode = mode;
+        return this;
+    }
+    visible(condition) {
+        if (!this.widgetState.options) {
+            this.widgetState.options = {};
+        }
+        this.widgetState.options['visible'] = condition;
+        this.inheritanceContext.visible = condition;
+        return this;
+    }
+    disabled(condition) {
+        if (!this.widgetState.options) {
+            this.widgetState.options = {};
+        }
+        this.widgetState.options['disabled'] = condition;
+        this.inheritanceContext.disabled = condition;
+        return this;
+    }
+    readonly(condition) {
+        if (!this.widgetState.options) {
+            this.widgetState.options = {};
+        }
+        this.widgetState.options['readonly'] = condition;
+        this.inheritanceContext.readonly = condition;
+        return this;
+    }
+    direction(direction) {
+        if (!this.widgetState.options) {
+            this.widgetState.options = {};
+        }
+        this.widgetState.options['direction'] = direction;
+        this.inheritanceContext.direction = direction;
+        return this;
+    }
+    // Inheritance context methods
+    withInheritanceContext(context) {
+        this.inheritanceContext = mergeInheritanceContext(context);
+        // Apply inherited properties to widget state
+        const resolved = resolveInheritedProperties(context, this.inheritanceContext);
+        if (resolved.mode && !this.widgetState.mode) {
+            this.widgetState.mode = resolved.mode;
+        }
+        if (!this.widgetState.options)
+            this.widgetState.options = {};
+        if (resolved.disabled !== undefined && !this.widgetState.options['disabled']) {
+            this.widgetState.options['disabled'] = resolved.disabled;
+        }
+        if (resolved.readonly !== undefined && !this.widgetState.options['readonly']) {
+            this.widgetState.options['readonly'] = resolved.readonly;
+        }
+        if (resolved.direction !== undefined && !this.widgetState.options['direction']) {
+            this.widgetState.options['direction'] = resolved.direction;
+        }
+        if (resolved.visible !== undefined && !this.widgetState.options['visible']) {
+            this.widgetState.options['visible'] = resolved.visible;
+        }
+        return this;
+    }
+    getInheritanceContext() {
+        return { ...this.inheritanceContext };
+    }
+    build() {
+        return {
+            name: this.widgetState.name,
+            type: this.widgetState.type,
+            options: this.widgetState.options,
+            mode: this.widgetState.mode,
+            path: this.widgetState.path,
+            defaultValue: this.widgetState.defaultValue,
+        };
+    }
+}
+//#region ----   Action Builder Implementation   ----
+class ActionBuilder {
+    constructor(dialogBuilder) {
+        this.dialogBuilder = dialogBuilder;
+    }
+    cancel(text) {
+        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' },
+        });
+        return this;
+    }
+    submit(text) {
+        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 } },
+        });
+        return this;
+    }
+    custom(action) {
+        if (!this.dialogBuilder['dialogState'].actions.footer.suffix) {
+            this.dialogBuilder['dialogState'].actions.footer.suffix = [];
+        }
+        this.dialogBuilder['dialogState'].actions.footer.suffix.push(action);
+        return this;
+    }
+}
+
+class AXPLayoutConversionService {
+    constructor() {
+        //#region ----   Caching   ----
+        this.widgetTreeCache = new Map();
+        this.formDefinitionCache = new Map();
+    }
+    //#endregion
+    //#region ----   Public Methods   ----
+    /**
+     * Convert AXPDynamicFormDefinition to AXPWidgetNode tree structure
+     * Groups become Fieldset Layouts with Form Field widgets as children
+     * Fields become Form Field widgets with Editor widgets as children
+     */
+    convertFormDefinition(formDefinition) {
+        // Create cache key based on form definition content
+        const cacheKey = this.createFormDefinitionCacheKey(formDefinition);
+        // Check cache first
+        if (this.widgetTreeCache.has(cacheKey)) {
+            return this.widgetTreeCache.get(cacheKey);
+        }
+        // Generate widget tree
+        const widgetTree = {
+            type: 'grid-layout',
+            name: 'dynamic-form-container',
+            options: {
+                title: 'Dynamic Form',
+                grid: {
+                    default: {
+                        columns: 1,
+                        gap: '1rem'
+                    }
+                }
+            },
+            children: formDefinition.groups.map(group => this.createGroupAsFieldsetWidget(group))
+        };
+        // Cache the result
+        this.widgetTreeCache.set(cacheKey, widgetTree);
+        return widgetTree;
+    }
+    /**
+     * Convert AXPWidgetNode tree back to AXPDynamicFormDefinition
+     * Parses Fieldset Layouts back to Groups
+     * Parses Form Field widgets back to Fields
+     */
+    convertWidgetTreeToFormDefinition(widgetTree) {
+        // Create cache key based on widget tree content
+        const cacheKey = this.createWidgetTreeCacheKey(widgetTree);
+        // Check cache first
+        if (this.formDefinitionCache.has(cacheKey)) {
+            return this.formDefinitionCache.get(cacheKey);
+        }
+        // Parse widget tree
+        const groups = [];
+        if (widgetTree.children) {
+            widgetTree.children.forEach(child => {
+                if (child.type === 'fieldset-layout') {
+                    const group = this.extractGroupFromFieldset(child);
+                    groups.push(group);
+                }
+            });
+        }
+        const formDefinition = { groups };
+        // Cache the result
+        this.formDefinitionCache.set(cacheKey, formDefinition);
+        return formDefinition;
+    }
+    /**
+     * Validate that a widget tree represents a valid dynamic form structure
+     */
+    validateFormWidgetTree(widgetTree) {
+        if (!widgetTree || widgetTree.type !== 'grid-layout') {
+            return false;
+        }
+        if (!widgetTree.children || widgetTree.children.length === 0) {
+            return true; // Empty form is valid
+        }
+        // Check that all children are fieldset-layout widgets
+        return widgetTree.children.every(child => child.type === 'fieldset-layout' &&
+            child.children &&
+            child.children.every(formField => formField.type === 'form-field' &&
+                formField.children &&
+                formField.children.length > 0));
+    }
+    /**
+     * Clear all caches
+     */
+    clearCaches() {
+        this.widgetTreeCache.clear();
+        this.formDefinitionCache.clear();
+    }
+    /**
+     * Get cache statistics
+     */
+    getCacheStats() {
+        return {
+            widgetTreeCacheSize: this.widgetTreeCache.size,
+            formDefinitionCacheSize: this.formDefinitionCache.size
+        };
+    }
+    //#endregion
+    //#region ----   Private Methods   ----
+    /**
+     * Convert a single group to Fieldset widget structure
+     */
+    createGroupAsFieldsetWidget(group) {
+        // Determine columns count from layout or default to 1
+        const columnsCount = 1;
+        return {
+            type: 'fieldset-layout',
+            name: group.name,
+            options: {
+                title: group.title,
+                description: group.description,
+                cols: columnsCount
+            },
+            children: this.createFieldWidgets(group.parameters, columnsCount)
+        };
+    }
+    /**
+     * Convert fields to Form Field widgets
+     */
+    createFieldWidgets(fields, columnsCount) {
+        return fields.map(field => this.createFormFieldWidget(field));
+    }
+    /**
+     * Convert a single field to Form Field widget with editor as child
+     */
+    createFormFieldWidget(field) {
+        return {
+            type: 'form-field',
+            name: field.path,
+            options: {
+                label: field.title,
+                description: field.description,
+                showLabel: true
+            },
+            children: [field.widget] // The editor widget becomes a child of form-field
+        };
+    }
+    /**
+     * Extract group information from Fieldset Layout widget
+     */
+    extractGroupFromFieldset(fieldsetNode) {
+        const columnsCount = fieldsetNode.options?.['cols'] || 1;
+        // Extract fields directly from fieldset children
+        const fields = [];
+        if (fieldsetNode.children) {
+            fieldsetNode.children.forEach(formField => {
+                if (formField.type === 'form-field' && formField.children && formField.children.length > 0) {
+                    const field = this.extractFieldFromFormWidget(formField);
+                    if (field) {
+                        fields.push(field);
+                    }
+                }
+            });
+        }
+        return {
+            name: fieldsetNode.name || `group-${Date.now()}`,
+            title: fieldsetNode.options?.['title'],
+            description: fieldsetNode.options?.['description'],
+            parameters: fields,
+        };
+    }
+    /**
+     * Extract field information from Form Field widget
+     */
+    extractFieldFromFormWidget(formFieldNode) {
+        if (!formFieldNode.children || formFieldNode.children.length === 0) {
+            return null;
+        }
+        const editorWidget = formFieldNode.children[0];
+        return {
+            path: formFieldNode.name || editorWidget.name || `field-${Date.now()}`,
+            title: formFieldNode.options?.['label'],
+            description: formFieldNode.options?.['description'],
+            widget: editorWidget,
+            mode: formFieldNode.mode
+        };
+    }
+    /**
+     * Create cache key for form definition
+     */
+    createFormDefinitionCacheKey(formDefinition) {
+        // Create a hash-like key instead of full JSON string
+        const keyParts = [];
+        keyParts.push(`groups:${formDefinition.groups.length}`);
+        formDefinition.groups.forEach((group, groupIndex) => {
+            keyParts.push(`g${groupIndex}:${group.name}:${group.parameters.length}`);
+            group.parameters.forEach((param, paramIndex) => {
+                keyParts.push(`p${groupIndex}.${paramIndex}:${param.path}:${param.widget.type}`);
+            });
+        });
+        if (formDefinition.mode) {
+            keyParts.push(`mode:${formDefinition.mode}`);
+        }
+        // Join with delimiter and create a shorter hash
+        const keyString = keyParts.join('|');
+        // If still too long, create a simple hash
+        if (keyString.length > 100) {
+            return this.createSimpleHash(keyString);
+        }
+        return keyString;
+    }
+    /**
+     * Create cache key for widget tree
+     */
+    createWidgetTreeCacheKey(widgetTree) {
+        // Create a hash-like key instead of full JSON string
+        const keyParts = [];
+        keyParts.push(`type:${widgetTree.type}`);
+        if (widgetTree.name) {
+            keyParts.push(`name:${widgetTree.name}`);
+        }
+        if (widgetTree.children) {
+            keyParts.push(`children:${widgetTree.children.length}`);
+            widgetTree.children.forEach((child, index) => {
+                keyParts.push(`c${index}:${child.type}`);
+                if (child.children) {
+                    keyParts.push(`cc${index}:${child.children.length}`);
+                    child.children.forEach((grandChild, gIndex) => {
+                        keyParts.push(`gc${index}.${gIndex}:${grandChild.type}`);
+                        if (grandChild.children) {
+                            keyParts.push(`gcc${index}.${gIndex}:${grandChild.children.length}`);
+                        }
+                    });
+                }
+            });
+        }
+        // Join with delimiter and create a shorter hash
+        const keyString = keyParts.join('|');
+        // If still too long, create a simple hash
+        if (keyString.length > 100) {
+            return this.createSimpleHash(keyString);
+        }
+        return keyString;
+    }
+    /**
+     * Create a simple hash from a string
+     */
+    createSimpleHash(str) {
+        let hash = 0;
+        if (str.length === 0)
+            return hash.toString();
+        for (let i = 0; i < str.length; i++) {
+            const char = str.charCodeAt(i);
+            hash = ((hash << 5) - hash) + char;
+            hash = hash & hash; // Convert to 32-bit integer
+        }
+        return Math.abs(hash).toString(36); // Convert to base36 for shorter string
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPLayoutConversionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPLayoutConversionService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPLayoutConversionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class AXPLayoutRendererComponent {
+    constructor() {
+        this.evaluatorService = inject(AXPExpressionEvaluatorService);
+        this.conversionService = inject(AXPLayoutConversionService);
+        /**
+         * Tracks the latest scheduled evaluation to ensure last-write-wins for async evaluate
+         */
+        this.evaluationRunId = 0;
+        /**
+         * RxJS subjects for context management
+         */
+        this.contextUpdateSubject = new Subject();
+        this.contextChangeSubject = new Subject();
+        /**
+         * Cache for expression evaluation results
+         */
+        this.expressionCache = new Map();
+        /**
+         * Cache for widget tree comparisons
+         */
+        this.widgetTreeCache = new Map();
+        /**
+         * Last layout hash for change detection
+         */
+        this.lastLayoutHash = '';
+        //#region ----   Inputs   ----
+        /**
+         * Form definition containing groups and fields OR widget tree
+         */
+        this.layout = input.required(...(ngDevMode ? [{ debugName: "layout" }] : []));
+        /**
+         * Form context/model data
+         */
+        this.context = model({}, ...(ngDevMode ? [{ debugName: "context" }] : []));
+        /**
+         * Form appearance and density styling (normal, compact, spacious)
+         */
+        this.look = input('fieldset', ...(ngDevMode ? [{ debugName: "look" }] : []));
+        /**
+         * Default form mode. Can be overridden by section/group and field.
+         */
+        this.mode = input('edit', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+        //#endregion
+        //#region ----   Widget Tree Conversion   ----
+        this.widgetTree = signal(null, ...(ngDevMode ? [{ debugName: "widgetTree" }] : []));
+        /**
+         * Convert and evaluate data when inputs change (optimized with RxJS)
+         */
+        this.conversionEffect = effect(() => {
+            const inputData = this.layout();
+            const ctx = this.internalContext();
+            const look = this.look();
+            const runId = ++this.evaluationRunId;
+            // Generate layout hash for change detection
+            const layoutHash = this.generateLayoutHash(inputData, look);
+            // Skip if layout hasn't changed
+            if (layoutHash === this.lastLayoutHash && this.widgetTree()) {
+                return;
+            }
+            this.lastLayoutHash = layoutHash;
+            (async () => {
+                // First evaluate expressions if needed
+                const evaluated = await this.expressionEvaluator(inputData, ctx);
+                // Ignore stale results
+                if (runId !== this.evaluationRunId) {
+                    return;
+                }
+                // Convert to widget tree (this will also apply the layout look)
+                const tree = evaluated;
+                // Update widget tree
+                const prev = this.widgetTree();
+                if (!isEqual(prev, tree)) {
+                    tree.mode = this.mode();
+                    this.widgetTree.set(tree);
+                }
+            })();
+        }, ...(ngDevMode ? [{ debugName: "conversionEffect" }] : []));
+        //#endregion
+        //#region ----   Outputs   ----
+        /**
+         * Emitted when context change is initiated
+         */
+        this.contextInitiated = output();
+        /**
+         * Emitted when form becomes valid/invalid
+         */
+        this.validityChange = output();
+        //#endregion
+        //#region ----   Properties   ----
+        this.form = viewChild(AXFormComponent, ...(ngDevMode ? [{ debugName: "form" }] : []));
+        this.container = viewChild(AXPWidgetContainerComponent, ...(ngDevMode ? [{ debugName: "container" }] : []));
+        /**
+         * Internal context signal for reactivity
+         */
+        this.internalContext = signal({}, ...(ngDevMode ? [{ debugName: "internalContext" }] : []));
+        //#endregion
+        //#region ----   Effects   ----
+        /**
+         * Effect to sync context changes from external to internal (optimized with RxJS)
+         */
+        this.#contextSyncEffect = effect(() => {
+            const ctx = this.context() ?? {};
+            this.contextUpdateSubject.next(ctx);
+        }, ...(ngDevMode ? [{ debugName: "#contextSyncEffect" }] : []));
+        /**
+         * Effect to handle widget tree status changes
+         */
+        this.#widgetStatusEffect = effect(() => {
+            const widgetTree = this.widgetTree();
+            if (widgetTree) {
+                this.container()?.builderService.setStatus(AXPPageStatus.Rendered);
+            }
+        }, ...(ngDevMode ? [{ debugName: "#widgetStatusEffect" }] : []));
+    }
+    async expressionEvaluator(expression, context) {
+        // Check if it's a form definition that needs conversion
+        if (this.isFormDefinition(expression)) {
+            return this.conversionService.convertFormDefinition(expression);
+        }
+        // Generate cache key using a more efficient method
+        const cacheKey = this.generateCacheKey(expression, context);
+        // Check cache first
+        if (this.expressionCache.has(cacheKey)) {
+            return this.expressionCache.get(cacheKey);
+        }
+        const scope = {
+            context: {
+                eval: (path) => get(context, path),
+            },
+        };
+        const result = await this.evaluatorService.evaluate(expression, scope);
+        // Cache result with LRU-like behavior
+        if (this.expressionCache.size > 50) {
+            // Clear half the cache when it gets too large
+            const keysToDelete = Array.from(this.expressionCache.keys()).slice(0, 25);
+            keysToDelete.forEach(key => this.expressionCache.delete(key));
+        }
+        this.expressionCache.set(cacheKey, result);
+        return result;
+    }
+    //#endregion
+    //#region ----   Lifecycle Methods   ----
+    ngOnInit() {
+        // Initialize internal context with input context
+        this.internalContext.set(this.context() ?? {});
+        // Setup RxJS streams for context management
+        this.setupContextStreams();
+    }
+    //#endregion
+    //#region ----   Effects   ----
+    /**
+     * Effect to sync context changes from external to internal (optimized with RxJS)
+     */
+    #contextSyncEffect;
+    /**
+     * Effect to handle widget tree status changes
+     */
+    #widgetStatusEffect;
+    //#endregion
+    //#region ----   Event Handlers   ----
+    /**
+     * Handle context change events from widget container (optimized with RxJS)
+     */
+    handleContextChanged(event) {
+        if (event.state === 'initiated') {
+            this.contextInitiated.emit(event.data);
+        }
+        else {
+            this.contextChangeSubject.next(event.data ?? {});
+        }
+    }
+    //#endregion
+    //#region ----   Public Methods   ----
+    /**
+     * Get the form component instance
+     */
+    getForm() {
+        return this.form();
+    }
+    /**
+     * Get the widget container component instance
+     */
+    getContainer() {
+        return this.container();
+    }
+    /**
+     * Get current form context
+     */
+    getContext() {
+        return this.internalContext();
+    }
+    /**
+     * Update form context programmatically
+     */
+    updateContext(context) {
+        this.internalContext.set(context);
+    }
+    /**
+     * Get the current widget tree
+     */
+    getWidgetTree() {
+        return this.widgetTree();
+    }
+    /**
+     * Validate the form
+     */
+    async validate() {
+        const form = this.form();
+        if (form) {
+            const isValid = await form.validate();
+            this.validityChange.emit(isValid.result);
+            return isValid;
+        }
+        return {
+            result: false,
+            messages: [],
+            rules: [],
+        };
+    }
+    //#endregion
+    //#region ----   RxJS Stream Setup   ----
+    /**
+     * Setup RxJS streams for context management
+     */
+    setupContextStreams() {
+        // Debounced context updates from external source
+        this.contextUpdateSubject
+            .pipe(debounceTime(16), // ~60fps
+        distinctUntilChanged((prev, curr) => isEqual(prev, curr)), startWith(this.context() ?? {}))
+            .subscribe(ctx => {
+            this.internalContext.set(ctx);
+        });
+        // Debounced context changes from widgets
+        this.contextChangeSubject
+            .pipe(debounceTime(16), // ~60fps
+        distinctUntilChanged((prev, curr) => isEqual(prev, curr)))
+            .subscribe(ctx => {
+            this.internalContext.set(ctx);
+            // Update the model signal directly - it will emit change events automatically
+            this.context.set(this.internalContext());
+        });
+    }
+    //#endregion
+    //#region ----   Type Guards   ----
+    /**
+     * Type guard to check if the input is a form definition
+     */
+    isFormDefinition(data) {
+        return data &&
+            typeof data === 'object' &&
+            'groups' in data &&
+            Array.isArray(data.groups);
+    }
+    //#endregion
+    //#region ----   Utility Methods   ----
+    /**
+     * Generate layout hash for change detection (short hash)
+     */
+    generateLayoutHash(layout, look) {
+        if (!layout)
+            return '';
+        // Generate short hash for large layout strings
+        const layoutStr = typeof layout === 'string' ? layout : JSON.stringify(layout);
+        const layoutHash = this.simpleHash(layoutStr);
+        return `${layoutHash}|${look}`;
+    }
+    /**
+     * Generate cache key for expression evaluation (short hash)
+     */
+    generateCacheKey(expression, context) {
+        // Use short hash for better performance
+        const exprStr = typeof expression === 'string' ? expression : JSON.stringify(expression);
+        const exprHash = this.simpleHash(exprStr);
+        const ctxHash = this.generateContextHash(context);
+        return `${exprHash}|${ctxHash}`;
+    }
+    /**
+     * Generate a simple hash for context change detection
+     */
+    generateContextHash(context) {
+        if (!context || typeof context !== 'object') {
+            return String(context);
+        }
+        // Generate short hash for context
+        const keys = Object.keys(context).sort();
+        const contextStr = keys.map(key => `${key}:${context[key]}`).join('|');
+        return this.simpleHash(contextStr);
+    }
+    /**
+     * Simple hash function for generating short keys
+     */
+    simpleHash(str) {
+        let hash = 0;
+        if (str.length === 0)
+            return hash.toString();
+        for (let i = 0; i < str.length; i++) {
+            const char = str.charCodeAt(i);
+            hash = ((hash << 5) - hash) + char;
+            hash = hash & hash; // Convert to 32-bit integer
+        }
+        // Convert to positive hex string
+        return Math.abs(hash).toString(16);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPLayoutRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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>
+        }
+      </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"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPLayoutRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-layout-renderer', standalone: true, imports: [CommonModule, 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>
+        }
+      </axp-widgets-container>
+    </ax-form>
   `, styles: [":host{display:block;width:100%}\n"] }]
-        }], propDecorators: { builder: [{
-                type: Input
-            }] } });
+        }] });
 
 class LayoutBuilderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: LayoutBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: LayoutBuilderModule, imports: [CommonModule, AXPLayoutRendererComponent], exports: [AXPLayoutRendererComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: LayoutBuilderModule, providers: [AXPLayoutBuilderService], imports: [CommonModule, AXPLayoutRendererComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: LayoutBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: LayoutBuilderModule, imports: [CommonModule, AXPLayoutRendererComponent], exports: [AXPLayoutRendererComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: LayoutBuilderModule, providers: [AXPLayoutBuilderService], imports: [CommonModule, AXPLayoutRendererComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: LayoutBuilderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: LayoutBuilderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, AXPLayoutRendererComponent],
@@ -1323,9 +1773,219 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                 }]
         }] });
 
+//#endregion
+
+class AXPDialogRendererComponent extends AXBasePageComponent {
+    constructor() {
+        super(...arguments);
+        this.result = new EventEmitter();
+        this.context = signal({}, ...(ngDevMode ? [{ debugName: "context" }] : []));
+        // This will be set by the popup service automatically - same as dynamic-dialog
+        this.callBack = () => { };
+        this.isDialogLoading = signal(false, ...(ngDevMode ? [{ debugName: "isDialogLoading" }] : []));
+    }
+    ngOnInit() {
+        // Initialize context with provided context
+        this.context.set(this.config?.context || {});
+    }
+    handleContextChanged(event) {
+        this.context.set(event);
+    }
+    handleContextInitiated(event) {
+        this.context.set(event);
+    }
+    visibleFooterPrefixActions() {
+        return this.config?.actions?.footer?.prefix || [];
+    }
+    visibleFooterSuffixActions() {
+        return this.config?.actions?.footer?.suffix || [
+            { title: 'Cancel', color: 'secondary', command: { name: 'cancel' } },
+            { title: 'Confirm', color: 'primary', command: { name: 'confirm' } }
+        ];
+    }
+    isFormLoading() {
+        return this.isDialogLoading();
+    }
+    isSubmitting() {
+        return this.isDialogLoading();
+    }
+    async executeAction(action) {
+        const actionName = action.command?.name || action.title?.toLowerCase();
+        // Store the action and context - same pattern as dynamic-dialog
+        const result = {
+            context: this.context(),
+            action: actionName
+        };
+        // Store result in component property
+        this.dialogResult = result;
+        // Store in popup data for DialogRef access
+        if (this.data) {
+            this.data.context = result.context;
+            this.data.action = result.action;
+        }
+        // Call the callback with DialogRef - same pattern as dynamic-dialog
+        this.callBack({
+            close: (result) => {
+                this.close(result);
+            },
+            context: () => {
+                return this.context();
+            },
+            action: () => {
+                return result.action;
+            },
+            setLoading: (loading) => {
+                this.isDialogLoading.set(loading);
+            }
+        });
+    }
+    close(result) {
+        if (result) {
+            this.result.emit(result);
+        }
+        super.close(result);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPDialogRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXPDialogRendererComponent, isStandalone: true, selector: "axp-dialog-renderer", inputs: { config: "config" }, outputs: { result: "result" }, usesInheritance: true, ngImport: i0, template: `
+<div class="ax-p-4">
+  <axp-layout-renderer
+    [layout]="config.definition"
+    [context]="context()"
+    (contextChange)="handleContextChanged($event)"
+    (contextInitiated)="handleContextInitiated($event)"
+  >
+  </axp-layout-renderer>
+</div>
+
+<ax-footer>
+  <ax-prefix>
+    <ng-container *ngTemplateOutlet="footerPrefixActions"></ng-container>
+  </ax-prefix>
+  <ax-suffix>
+    <ng-container *ngTemplateOutlet="footerSuffixActions"></ng-container>
+  </ax-suffix>
+</ax-footer>
+
+<!-- Footer Prefix Actions -->
+<ng-template #footerPrefixActions>
+  @for (action of visibleFooterPrefixActions(); track $index) {
+    <ax-button
+      [disabled]="action.disabled || isFormLoading()"
+      [text]="(action.title | translate | async)!"
+      [look]="'outline'"
+      [color]="action.color"
+      (onClick)="executeAction(action)"
+    >
+      @if (isFormLoading() && action.command?.name != 'cancel') {
+        <ax-loading></ax-loading>
+      }
+      <ax-prefix>
+        <i class="{{ action.icon }}"></i>
+      </ax-prefix>
+    </ax-button>
+  }
+</ng-template>
+
+<!-- Footer Suffix Actions -->
+<ng-template #footerSuffixActions>
+  @for (action of visibleFooterSuffixActions(); track $index) {
+    <ax-button
+      [disabled]="action.disabled || isSubmitting()"
+      [text]="(action.title | translate | async)!"
+      [look]="'solid'"
+      [color]="action.color"
+      (onClick)="executeAction(action)"
+    >
+      @if (action.icon) {
+        <ax-prefix>
+          <ax-icon icon="{{ action.icon }}"></ax-icon>
+        </ax-prefix>
+      }
+    </ax-button>
+  }
+</ng-template>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXPLayoutRendererComponent, selector: "axp-layout-renderer", inputs: ["layout", "context", "look", "mode"], outputs: ["contextChange", "contextInitiated", "validityChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$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: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.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: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPDialogRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-dialog-renderer',
+                    standalone: true,
+                    imports: [CommonModule, AXPLayoutRendererComponent, AXButtonModule, AXDecoratorModule, AXLoadingModule, AXTranslationModule],
+                    template: `
+<div class="ax-p-4">
+  <axp-layout-renderer
+    [layout]="config.definition"
+    [context]="context()"
+    (contextChange)="handleContextChanged($event)"
+    (contextInitiated)="handleContextInitiated($event)"
+  >
+  </axp-layout-renderer>
+</div>
+
+<ax-footer>
+  <ax-prefix>
+    <ng-container *ngTemplateOutlet="footerPrefixActions"></ng-container>
+  </ax-prefix>
+  <ax-suffix>
+    <ng-container *ngTemplateOutlet="footerSuffixActions"></ng-container>
+  </ax-suffix>
+</ax-footer>
+
+<!-- Footer Prefix Actions -->
+<ng-template #footerPrefixActions>
+  @for (action of visibleFooterPrefixActions(); track $index) {
+    <ax-button
+      [disabled]="action.disabled || isFormLoading()"
+      [text]="(action.title | translate | async)!"
+      [look]="'outline'"
+      [color]="action.color"
+      (onClick)="executeAction(action)"
+    >
+      @if (isFormLoading() && action.command?.name != 'cancel') {
+        <ax-loading></ax-loading>
+      }
+      <ax-prefix>
+        <i class="{{ action.icon }}"></i>
+      </ax-prefix>
+    </ax-button>
+  }
+</ng-template>
+
+<!-- Footer Suffix Actions -->
+<ng-template #footerSuffixActions>
+  @for (action of visibleFooterSuffixActions(); track $index) {
+    <ax-button
+      [disabled]="action.disabled || isSubmitting()"
+      [text]="(action.title | translate | async)!"
+      [look]="'solid'"
+      [color]="action.color"
+      (onClick)="executeAction(action)"
+    >
+      @if (action.icon) {
+        <ax-prefix>
+          <ax-icon icon="{{ action.icon }}"></ax-icon>
+        </ax-prefix>
+      }
+    </ax-button>
+  }
+</ng-template>
+  `
+                }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], result: [{
+                type: Output
+            }] } });
+
+var dialogRenderer_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPDialogRendererComponent: AXPDialogRendererComponent
+});
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AXPLayoutBuilderService, AXPLayoutRendererComponent, LayoutBuilderModule };
+export { AXPDialogRendererComponent, AXPLayoutBuilderService, AXPLayoutConversionService, AXPLayoutRendererComponent, LayoutBuilderModule };
 //# sourceMappingURL=acorex-platform-layout-builder.mjs.map