@acorex/platform 21.0.0-next.1 → 21.0.0-next.2

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

@@ -1,13 +1,13 @@
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, inject, input, model, signal, effect, output, viewChild, ChangeDetectionStrategy, Component, NgModule, EventEmitter, Output, Input } 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 { cloneDeep, isNil, set, isEqual } from 'lodash-es';
 import * as i2 from '@acorex/components/form';
 import { AXFormComponent, AXFormModule } from '@acorex/components/form';
 import * as i1 from '@acorex/platform/layout/widget-core';
 import { AXPWidgetContainerComponent, AXPPageStatus, AXPWidgetCoreModule } from '@acorex/platform/layout/widget-core';
+import { isEqual, 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';
@@ -20,281 +20,6 @@ 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   ----
 /**
  * Resolves inherited properties from context and local values
@@ -349,54 +74,6 @@ 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 {
@@ -803,26 +480,6 @@ 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
@@ -883,56 +540,8 @@ class WidgetContainerMixin extends ChildContainerMixin {
         this.containerState.children.push(container.build());
         return this;
     }
-    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);
+    customWidget(type, options) {
+        this.addWidget(type, options);
         return this;
     }
 }
@@ -1498,14 +1107,11 @@ 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: contextWithDefaults,
+            context: this.dialogState.dialogOptions?.context || {},
             definition: dialogNode,
             actions: this.dialogState.actions,
         };
@@ -1559,20 +1165,10 @@ class WidgetBuilder {
     path(path) {
         this.widgetState.path = path;
         return this;
-    }
-    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 };
-        }
+    }
+    options(options) {
+        // Merge options instead of replacing to preserve inherited properties
+        this.widgetState.options = { ...this.widgetState.options, ...options };
         return this;
     }
     layout(value) {
@@ -1846,6 +1442,268 @@ class StepWizardBuilder extends LayoutContainerMixin {
     }
 }
 
+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
+        };
+    }
+    /**
+     * 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'],
+            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',
+                }]
+        }] });
+
 class AXPLayoutRendererComponent {
     constructor() {
         this.conversionService = inject(AXPLayoutConversionService);
@@ -2087,7 +1945,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", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPLayoutRendererComponent, decorators: [{
             type: Component,