@acorex/platform 20.6.0-next.8 → 21.0.0-next.0

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

@@ -1,14 +1,13 @@
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, Injectable, input, model, signal, effect, output, viewChild, ChangeDetectionStrategy, Component, NgModule, EventEmitter, Output, Input } from '@angular/core';
+import { Injectable, inject, input, model, signal, effect, output, viewChild, ChangeDetectionStrategy, Component, NgModule, EventEmitter, Output, Input } from '@angular/core';
 import { AXPopupService } from '@acorex/components/popup';
+import { cloneDeep, isNil, set, isEqual } from 'lodash-es';
 import * as i2 from '@acorex/components/form';
 import { AXFormComponent, AXFormModule } from '@acorex/components/form';
-import { AXPExpressionEvaluatorService } from '@acorex/platform/core';
 import * as i1 from '@acorex/platform/layout/widget-core';
 import { AXPWidgetContainerComponent, AXPPageStatus, AXPWidgetCoreModule } from '@acorex/platform/layout/widget-core';
-import { isEqual, get, cloneDeep } from 'lodash-es';
 import { Subject, debounceTime, distinctUntilChanged, startWith } from 'rxjs';
 import * as i1$1 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
@@ -19,6 +18,282 @@ import { AXLoadingModule } from '@acorex/components/loading';
 import { AXBasePageComponent } from '@acorex/components/page';
 import * as i5 from '@acorex/core/translation';
 import { AXTranslationModule } from '@acorex/core/translation';
+import { AXPExpressionEvaluatorService } from '@acorex/platform/core';
+
+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',
+            mode: formDefinition.mode, // Preserve form-level mode
+            options: {
+                title: 'Dynamic Form',
+                grid: {
+                    default: {
+                        columns: 1,
+                        gap: '1rem',
+                    },
+                },
+            },
+            children: formDefinition.groups.map((group) => this.createGroupAsFieldsetWidget(group, formDefinition.mode)),
+        };
+        // 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, formMode) {
+        // Determine columns count from layout or default to 1
+        const columnsCount = 1;
+        // Use group mode if set, otherwise inherit from form mode
+        const groupMode = group.mode || formMode;
+        return {
+            type: 'fieldset-layout',
+            name: group.name,
+            mode: groupMode,
+            options: {
+                title: group.title,
+                description: group.description,
+                cols: columnsCount,
+                look: group.look || 'container', // Default to 'container' if not specified
+            },
+            children: this.createFieldWidgets(group.parameters, columnsCount, groupMode),
+        };
+    }
+    /**
+     * Convert fields to Form Field widgets
+     */
+    createFieldWidgets(fields, columnsCount, groupMode) {
+        return fields.map((field) => this.createFormFieldWidget(field, groupMode));
+    }
+    /**
+     * Convert a single field to Form Field widget with editor as child
+     */
+    createFormFieldWidget(field, groupMode) {
+        // Use field mode if set, otherwise inherit from group mode
+        const fieldMode = field.mode || groupMode;
+        // Ensure the editor widget also has the mode set
+        const editorWidget = { ...field.widget };
+        if (!editorWidget.mode) {
+            editorWidget.mode = fieldMode;
+        }
+        return {
+            type: 'form-field',
+            name: field.path,
+            mode: fieldMode,
+            options: {
+                label: field.title,
+                badge: field.badge,
+                description: field.description,
+                showLabel: true,
+            },
+            children: [editorWidget], // 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,
+            mode: fieldsetNode.mode,
+            look: fieldsetNode.options?.['look'],
+        };
+    }
+    /**
+     * 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'],
+            badge: formFieldNode.options?.['badge'],
+            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.12", ngImport: i0, type: AXPLayoutConversionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPLayoutConversionService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPLayoutConversionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
 
 //#region ----   Inheritance Utilities   ----
 /**
@@ -74,6 +349,54 @@ function generateValueWidgetPath(widgetName, formFieldName, formFieldLabel) {
     }
     return generateRandomId();
 }
+/**
+ * Collects default values from widget node tree and merges them into context
+ * Only sets values for paths that don't already exist in the context
+ * @param node - The widget node to process
+ * @param context - The context object to modify in place (cloned at top level only)
+ * @param isTopLevel - Internal flag to track if this is the top-level call
+ */
+function collectDefaultValues(node, context = {}, isTopLevel = true) {
+    // Clone context only at the top level, then modify in place for recursive calls
+    const result = isTopLevel ? cloneDeep(context) : context;
+    // Check if this node has a defaultValue and a path
+    // Note: We check for both node.defaultValue and also look in node.options.defaultValue as fallback
+    const defaultValue = node.defaultValue !== undefined
+        ? node.defaultValue
+        : node.options?.defaultValue;
+    if (defaultValue !== undefined && !isNil(defaultValue) && node.path) {
+        // Check if path exists in context using lodash get equivalent check
+        const currentValue = getNestedValue(result, node.path);
+        if (currentValue === undefined) {
+            // Clone the defaultValue to avoid reference issues (especially for Date objects)
+            const clonedValue = defaultValue instanceof Date
+                ? new Date(defaultValue.getTime())
+                : cloneDeep(defaultValue);
+            set(result, node.path, clonedValue);
+        }
+    }
+    // Recursively process children - pass result object to accumulate values in place
+    if (node.children && Array.isArray(node.children)) {
+        for (const child of node.children) {
+            collectDefaultValues(child, result, false);
+        }
+    }
+    return result;
+}
+/**
+ * Gets a nested value from an object using dot notation path
+ */
+function getNestedValue(obj, path) {
+    const keys = path.split('.');
+    let current = obj;
+    for (const key of keys) {
+        if (current === undefined || current === null || typeof current !== 'object') {
+            return undefined;
+        }
+        current = current[key];
+    }
+    return current;
+}
 //#endregion
 //#region ----   Service Implementation   ----
 class AXPLayoutBuilderService {
@@ -480,6 +803,26 @@ class ChildContainerMixin extends LayoutContainerMixin {
         this.containerState.children.push(field.build());
         return this;
     }
+    dynamicForm(definition) {
+        // Get conversion service using inject() - works in any context in Angular 14+
+        let conversionService;
+        try {
+            conversionService = inject(AXPLayoutConversionService);
+        }
+        catch {
+            // Fallback: create service instance if inject() fails (shouldn't happen in normal usage)
+            conversionService = new AXPLayoutConversionService();
+        }
+        // Convert form definition to widget node
+        const widgetNode = conversionService.convertFormDefinition(definition);
+        // Add the widget node's children to this container
+        // The converted widget node has a root grid-layout, we want its children (fieldsets)
+        if (widgetNode.children && widgetNode.children.length > 0) {
+            this.ensureChildren();
+            this.containerState.children.push(...widgetNode.children);
+        }
+        return this;
+    }
 }
 /**
  * Widget container mixin - Interface Segregation Principle
@@ -540,8 +883,56 @@ class WidgetContainerMixin extends ChildContainerMixin {
         this.containerState.children.push(container.build());
         return this;
     }
-    customWidget(type, options) {
-        this.addWidget(type, options);
+    customWidget(type, optionsOrDelegate, delegate) {
+        const child = new WidgetBuilder();
+        child.type(type);
+        // Determine if second parameter is delegate or options
+        const isDelegate = typeof optionsOrDelegate === 'function';
+        const options = isDelegate ? undefined : optionsOrDelegate;
+        const actualDelegate = isDelegate ? optionsOrDelegate : delegate;
+        // Apply inheritance context BEFORE setting options or calling delegate
+        child.withInheritanceContext(this.inheritanceContext);
+        // If options are provided (non-delegate overload), handle them
+        if (!isDelegate && options !== undefined) {
+            const widgetOptions = options;
+            const path = widgetOptions.path;
+            const name = widgetOptions.name;
+            // 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);
+        }
+        // If delegate is provided, call it to allow setting path, options, and other control methods
+        if (actualDelegate) {
+            actualDelegate(child);
+        }
+        // Build the widget to check if path is set (for value widgets)
+        const builtWidget = child.build();
+        // Check if value widget requires path
+        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',
+        ];
+        if (valueWidgetTypes.includes(type) && !builtWidget.path) {
+            throw new Error(`Value widget '${type}' requires a 'path' property`);
+        }
+        this.ensureChildren();
+        this.containerState.children.push(builtWidget);
         return this;
     }
 }
@@ -725,6 +1116,14 @@ class FormFieldBuilder extends LayoutContainerMixin {
     setShowLabel(showLabel) {
         return this.setOptions({ showLabel });
     }
+    defaultValue(value) {
+        this.containerState.defaultValue = value;
+        this.inheritanceContext.defaultValue = value;
+        if (this.childWidget) {
+            this.childWidget.withInheritanceContext(this.inheritanceContext);
+        }
+        return this;
+    }
     // Single widget methods with automatic path generation
     addSingleWidget(type, options) {
         if (this.hasWidget) {
@@ -916,7 +1315,7 @@ class FieldsetContainerBuilder extends LayoutContainerMixin {
  */
 class ListWidgetBuilder extends WidgetContainerMixin {
     constructor() {
-        super('list');
+        super('data-list');
     }
     setOptions(options) {
         this.containerState.options = { ...this.containerState.options, ...options };
@@ -1099,11 +1498,14 @@ class DialogContainerBuilder {
         const dialogNode = this.build();
         // Import the dialog renderer component dynamically
         const { AXPDialogRendererComponent } = await Promise.resolve().then(function () { return dialogRenderer_component; });
+        // Collect default values from widget tree and merge into initial context
+        const initialContext = this.dialogState.dialogOptions?.context || {};
+        const contextWithDefaults = collectDefaultValues(dialogNode, initialContext);
         // Create dialog configuration
         const dialogConfig = {
             title: this.dialogState.dialogOptions?.title || '',
             message: this.dialogState.dialogOptions?.message,
-            context: this.dialogState.dialogOptions?.context || {},
+            context: contextWithDefaults,
             definition: dialogNode,
             actions: this.dialogState.actions,
         };
@@ -1159,8 +1561,18 @@ class WidgetBuilder {
         return this;
     }
     options(options) {
-        // Merge options instead of replacing to preserve inherited properties
-        this.widgetState.options = { ...this.widgetState.options, ...options };
+        // Extract defaultValue from options - it's an exceptional parameter that updates context, not a widget option
+        if (options && options.defaultValue !== undefined) {
+            this.widgetState.defaultValue = options.defaultValue;
+            // Remove defaultValue from options since it's stored on the node, not in options
+            const { defaultValue: _, ...cleanOptions } = options;
+            // Merge clean options instead of replacing to preserve inherited properties
+            this.widgetState.options = { ...this.widgetState.options, ...cleanOptions };
+        }
+        else {
+            // Merge options instead of replacing to preserve inherited properties
+            this.widgetState.options = { ...this.widgetState.options, ...options };
+        }
         return this;
     }
     layout(value) {
@@ -1201,6 +1613,10 @@ class WidgetBuilder {
         this.inheritanceContext.disabled = condition;
         return this;
     }
+    defaultValue(defaultValue) {
+        this.widgetState.defaultValue = defaultValue;
+        return this;
+    }
     readonly(condition) {
         if (!this.widgetState.options) {
             this.widgetState.options = {};
@@ -1241,6 +1657,9 @@ class WidgetBuilder {
         if (resolved.visible !== undefined) {
             this.widgetState.options['visible'] = resolved.visible;
         }
+        if (context.defaultValue !== undefined) {
+            this.widgetState.defaultValue = context.defaultValue;
+        }
         return this;
     }
     getInheritanceContext() {
@@ -1308,412 +1727,133 @@ class StepBuilder {
     }
     setIcon(icon) {
         this.icon = icon;
-        return this;
-    }
-    setDescription(description) {
-        this.description = description;
-        return this;
-    }
-    setSkippable(skippable) {
-        this.skippable = skippable;
-        return this;
-    }
-    content(delegate) {
-        if (delegate) {
-            // Create LayoutBuilder in injection context (will be called from component)
-            const layoutBuilder = new LayoutBuilder();
-            // ✅ IMPORTANT: Propagate inheritance context to content
-            layoutBuilder.inheritanceContext = { ...this.inheritanceContext };
-            delegate(layoutBuilder);
-            this.contentNode = layoutBuilder.build();
-        }
-        return this;
-    }
-    withInheritanceContext(context) {
-        this.inheritanceContext = mergeInheritanceContext(context);
-        return this;
-    }
-    build() {
-        if (!this.contentNode) {
-            throw new Error(`Step '${this.id}' must have content`);
-        }
-        return {
-            id: this.id,
-            title: this.title,
-            icon: this.icon,
-            description: this.description,
-            skippable: this.skippable,
-            content: this.contentNode,
-        };
-    }
-}
-/**
- * Step Wizard Builder - Builds step wizard widget
- */
-class StepWizardBuilder extends LayoutContainerMixin {
-    constructor() {
-        super('step-wizard');
-        this.steps = [];
-        this.linear = true;
-        this.wizardDirection = 'horizontal';
-    }
-    setLinear(linear) {
-        this.linear = linear;
-        return this;
-    }
-    setDirection(direction) {
-        this.wizardDirection = direction;
-        return this;
-    }
-    setLook(look) {
-        this.look = look;
-        return this;
-    }
-    setShowActions(show) {
-        this.showActions = show;
-        return this;
-    }
-    setActions(actions) {
-        this.wizardActions = actions;
-        return this;
-    }
-    setGuards(guards) {
-        this.guards = guards;
-        return this;
-    }
-    setEvents(events) {
-        this.events = events;
-        return this;
-    }
-    step(id, title, delegate) {
-        const stepBuilder = new StepBuilder(id, title);
-        // ✅ IMPORTANT: Propagate inheritance context to step
-        stepBuilder.withInheritanceContext(this.inheritanceContext);
-        if (delegate) {
-            delegate(stepBuilder);
-        }
-        this.steps.push(stepBuilder.build());
-        return this;
-    }
-    build() {
-        // ✅ Validation
-        if (this.steps.length === 0) {
-            throw new Error('StepWizard must have at least one step');
-        }
-        // ✅ Check duplicate IDs
-        const ids = this.steps.map((s) => s.id);
-        const duplicates = ids.filter((id, index) => ids.indexOf(id) !== index);
-        if (duplicates.length > 0) {
-            throw new Error(`Duplicate step IDs found: ${duplicates.join(', ')}`);
-        }
-        const definition = {
-            steps: this.steps,
-            linear: this.linear,
-            direction: this.wizardDirection,
-            look: this.look,
-            // Do not auto-detect based on dialog context; keep explicit or undefined
-            showActions: this.showActions,
-            actions: this.wizardActions,
-            guards: this.guards,
-            events: this.events,
-        };
-        const node = {
-            name: this.containerState.name,
-            type: 'step-wizard',
-            options: { definition },
-            mode: this.containerState.mode,
-        };
-        return node;
-    }
-}
-
-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,
-            mode: group.mode,
-            options: {
-                title: group.title,
-                description: group.description,
-                cols: columnsCount,
-                look: group.look || 'container', // Default to 'container' if not specified
-            },
-            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
-        };
+        return this;
     }
-    /**
-     * 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);
-                    }
-                }
-            });
+    setDescription(description) {
+        this.description = description;
+        return this;
+    }
+    setSkippable(skippable) {
+        this.skippable = skippable;
+        return this;
+    }
+    content(delegate) {
+        if (delegate) {
+            // Create LayoutBuilder in injection context (will be called from component)
+            const layoutBuilder = new LayoutBuilder();
+            // ✅ IMPORTANT: Propagate inheritance context to content
+            layoutBuilder.inheritanceContext = { ...this.inheritanceContext };
+            delegate(layoutBuilder);
+            this.contentNode = layoutBuilder.build();
         }
-        return {
-            name: fieldsetNode.name || `group-${Date.now()}`,
-            title: fieldsetNode.options?.['title'],
-            description: fieldsetNode.options?.['description'],
-            parameters: fields,
-            mode: fieldsetNode.mode,
-            look: fieldsetNode.options?.['look'],
-        };
+        return this;
     }
-    /**
-     * Extract field information from Form Field widget
-     */
-    extractFieldFromFormWidget(formFieldNode) {
-        if (!formFieldNode.children || formFieldNode.children.length === 0) {
-            return null;
+    withInheritanceContext(context) {
+        this.inheritanceContext = mergeInheritanceContext(context);
+        return this;
+    }
+    build() {
+        if (!this.contentNode) {
+            throw new Error(`Step '${this.id}' must have content`);
         }
-        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,
+            id: this.id,
+            title: this.title,
+            icon: this.icon,
+            description: this.description,
+            skippable: this.skippable,
+            content: this.contentNode,
         };
     }
-    /**
-     * 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;
+}
+/**
+ * Step Wizard Builder - Builds step wizard widget
+ */
+class StepWizardBuilder extends LayoutContainerMixin {
+    constructor() {
+        super('step-wizard');
+        this.steps = [];
+        this.linear = true;
+        this.wizardDirection = 'horizontal';
     }
-    /**
-     * 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);
+    setLinear(linear) {
+        this.linear = linear;
+        return this;
+    }
+    setDirection(direction) {
+        this.wizardDirection = direction;
+        return this;
+    }
+    setLook(look) {
+        this.look = look;
+        return this;
+    }
+    setShowActions(show) {
+        this.showActions = show;
+        return this;
+    }
+    setActions(actions) {
+        this.wizardActions = actions;
+        return this;
+    }
+    setGuards(guards) {
+        this.guards = guards;
+        return this;
+    }
+    setEvents(events) {
+        this.events = events;
+        return this;
+    }
+    step(id, title, delegate) {
+        const stepBuilder = new StepBuilder(id, title);
+        // ✅ IMPORTANT: Propagate inheritance context to step
+        stepBuilder.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(stepBuilder);
         }
-        return keyString;
+        this.steps.push(stepBuilder.build());
+        return this;
     }
-    /**
-     * 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
+    build() {
+        // ✅ Validation
+        if (this.steps.length === 0) {
+            throw new Error('StepWizard must have at least one step');
         }
-        return Math.abs(hash).toString(36); // Convert to base36 for shorter string
+        // ✅ Check duplicate IDs
+        const ids = this.steps.map((s) => s.id);
+        const duplicates = ids.filter((id, index) => ids.indexOf(id) !== index);
+        if (duplicates.length > 0) {
+            throw new Error(`Duplicate step IDs found: ${duplicates.join(', ')}`);
+        }
+        const definition = {
+            steps: this.steps,
+            linear: this.linear,
+            direction: this.wizardDirection,
+            look: this.look,
+            // Do not auto-detect based on dialog context; keep explicit or undefined
+            showActions: this.showActions,
+            actions: this.wizardActions,
+            guards: this.guards,
+            events: this.events,
+        };
+        const node = {
+            name: this.containerState.name,
+            type: 'step-wizard',
+            options: { definition },
+            mode: this.containerState.mode,
+        };
+        return node;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPLayoutConversionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPLayoutConversionService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", 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
@@ -1735,36 +1875,29 @@ class AXPLayoutRendererComponent {
         //#region ----   Widget Tree Conversion   ----
         this.widgetTree = signal(null, ...(ngDevMode ? [{ debugName: "widgetTree" }] : []));
         /**
-         * Convert and evaluate data when inputs change (optimized with RxJS)
+         * Convert layout data to widget tree when inputs change
          */
         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()) {
+            // Convert to widget tree
+            let tree;
+            if (this.isFormDefinition(inputData)) {
+                // Convert form definition to widget tree
+                tree = this.conversionService.convertFormDefinition(inputData);
+            }
+            else if (this.isWidgetNode(inputData)) {
+                // Use widget tree directly
+                tree = inputData;
+            }
+            else {
+                console.warn('AXPLayoutRendererComponent: Invalid layout input. Expected AXPDynamicFormDefinition or AXPWidgetNode.', inputData);
                 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);
-                }
-            })();
+            // Update widget tree only if changed (Angular effect already prevents unnecessary runs)
+            const prev = this.widgetTree();
+            if (!isEqual(prev, tree)) {
+                this.widgetTree.set(tree);
+            }
         }, ...(ngDevMode ? [{ debugName: "conversionEffect" }] : []));
         //#endregion
         //#region ----   Outputs   ----
@@ -1807,32 +1940,6 @@ class AXPLayoutRendererComponent {
             }
         }, ...(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() {
@@ -1965,55 +2072,11 @@ class AXPLayoutRendererComponent {
     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
+     * Type guard to check if the input is a widget node
      */
-    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);
+    isWidgetNode(data) {
+        return data && typeof data === 'object' && 'type' in data && typeof data.type === 'string';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPLayoutRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPLayoutRendererComponent, isStandalone: true, selector: "axp-layout-renderer", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { context: "contextChange", contextInitiated: "contextInitiated", validityChange: "validityChange" }, viewQueries: [{ propertyName: "form", first: true, predicate: AXFormComponent, descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: AXPWidgetContainerComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
@@ -2024,7 +2087,7 @@ class AXPLayoutRendererComponent {
         }
       </axp-widgets-container>
     </ax-form>
-  `, isInline: true, styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPLayoutRendererComponent, decorators: [{
             type: Component,