@acorex/platform 20.6.0-next.2 → 20.6.0-next.21

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

@@ -5,10 +5,9 @@ import { inject, Injectable, input, model, signal, effect, output, viewChild, Ch
 import { AXPopupService } from '@acorex/components/popup';
 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 { 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';
@@ -19,6 +18,7 @@ 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';
 
 //#region ----   Inheritance Utilities   ----
 /**
@@ -86,10 +86,10 @@ class AXPLayoutBuilderService {
     create() {
         return new LayoutBuilder(this.popupService);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPLayoutBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPLayoutBuilderService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPLayoutBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPLayoutBuilderService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPLayoutBuilderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPLayoutBuilderService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -725,6 +725,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 +924,7 @@ class FieldsetContainerBuilder extends LayoutContainerMixin {
  */
 class ListWidgetBuilder extends WidgetContainerMixin {
     constructor() {
-        super('list');
+        super('data-list');
     }
     setOptions(options) {
         this.containerState.options = { ...this.containerState.options, ...options };
@@ -1201,6 +1209,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 +1253,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() {
@@ -1679,10 +1694,10 @@ class AXPLayoutConversionService {
         }
         return Math.abs(hash).toString(36); // Convert to base36 for shorter string
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPLayoutConversionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPLayoutConversionService, providedIn: 'root' }); }
+    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.10", ngImport: i0, type: AXPLayoutConversionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPLayoutConversionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1691,29 +1706,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
 
 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 +1733,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 +1798,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,58 +1930,14 @@ 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
+     * Type guard to check if the input is a widget node
      */
-    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);
+    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.10", ngImport: i0, type: AXPLayoutRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: AXPLayoutRendererComponent, isStandalone: true, selector: "axp-layout-renderer", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { context: "contextChange", contextInitiated: "contextInitiated", validityChange: "validityChange" }, viewQueries: [{ propertyName: "form", first: true, predicate: AXFormComponent, descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: AXPWidgetContainerComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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: `
     <ax-form>
       <axp-widgets-container [context]="internalContext()" (onContextChanged)="handleContextChanged($event)">
         @if (widgetTree()) {
@@ -2024,9 +1945,9 @@ 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: ["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.10", ngImport: i0, type: AXPLayoutRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPLayoutRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-layout-renderer', standalone: true, imports: [CommonModule, AXPWidgetCoreModule, AXFormModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <ax-form>
@@ -2040,11 +1961,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
         }], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }, { type: i0.Output, args: ["contextChange"] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], contextInitiated: [{ type: i0.Output, args: ["contextInitiated"] }], validityChange: [{ type: i0.Output, args: ["validityChange"] }], form: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXFormComponent), { isSignal: true }] }], container: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPWidgetContainerComponent), { isSignal: true }] }] } });
 
 class LayoutBuilderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LayoutBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: LayoutBuilderModule, imports: [CommonModule, AXPLayoutRendererComponent], exports: [AXPLayoutRendererComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LayoutBuilderModule, providers: [AXPLayoutBuilderService], imports: [CommonModule, AXPLayoutRendererComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LayoutBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.12", ngImport: i0, type: LayoutBuilderModule, imports: [CommonModule, AXPLayoutRendererComponent], exports: [AXPLayoutRendererComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LayoutBuilderModule, providers: [AXPLayoutBuilderService], imports: [CommonModule, AXPLayoutRendererComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LayoutBuilderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LayoutBuilderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, AXPLayoutRendererComponent],
@@ -2280,8 +2201,8 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
             return undefined;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPDialogRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: AXPDialogRendererComponent, isStandalone: true, selector: "axp-dialog-renderer", inputs: { config: "config" }, outputs: { result: "result" }, viewQueries: [{ propertyName: "layoutRenderer", first: true, predicate: AXPLayoutRendererComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPDialogRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPDialogRendererComponent, isStandalone: true, selector: "axp-dialog-renderer", inputs: { config: "config" }, outputs: { result: "result" }, viewQueries: [{ propertyName: "layoutRenderer", first: true, predicate: AXPLayoutRendererComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <div class="ax-p-4">
       <axp-layout-renderer
         [layout]="config.definition"
@@ -2331,7 +2252,7 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
     </ax-footer>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXPLayoutRendererComponent, selector: "axp-layout-renderer", inputs: ["layout", "context", "look", "mode"], outputs: ["contextChange", "contextInitiated", "validityChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i3.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPDialogRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPDialogRendererComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-dialog-renderer',