@acorex/platform 21.0.0-next.0 → 21.0.0-next.10

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 { Injectable, inject, input, model, signal, effect, output, viewChild, ChangeDetectionStrategy, Component, NgModule, EventEmitter, Output } from '@angular/core';
 import { AXPopupService } from '@acorex/components/popup';
+import * as i1 from '@acorex/platform/layout/widget-core';
+import { AXPWidgetSerializationHelper, AXPWidgetContainerComponent, AXPPageStatus, AXPWidgetCoreModule } from '@acorex/platform/layout/widget-core';
 import { cloneDeep, isNil, set, isEqual } from 'lodash-es';
 import * 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 { Subject, debounceTime, distinctUntilChanged, startWith } from 'rxjs';
 import * as i1$1 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
@@ -285,10 +285,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.12", ngImport: i0, type: AXPLayoutConversionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPLayoutConversionService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPLayoutConversionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPLayoutConversionService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPLayoutConversionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPLayoutConversionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -361,17 +361,13 @@ function collectDefaultValues(node, context = {}, isTopLevel = true) {
     const result = isTopLevel ? cloneDeep(context) : context;
     // Check if this node has a defaultValue and a path
     // Note: We check for both node.defaultValue and also look in node.options.defaultValue as fallback
-    const defaultValue = node.defaultValue !== undefined
-        ? node.defaultValue
-        : node.options?.defaultValue;
+    const defaultValue = node.defaultValue !== undefined ? node.defaultValue : node.options?.defaultValue;
     if (defaultValue !== undefined && !isNil(defaultValue) && node.path) {
         // Check if path exists in context using lodash get equivalent check
         const currentValue = getNestedValue(result, node.path);
         if (currentValue === undefined) {
             // Clone the defaultValue to avoid reference issues (especially for Date objects)
-            const clonedValue = defaultValue instanceof Date
-                ? new Date(defaultValue.getTime())
-                : cloneDeep(defaultValue);
+            const clonedValue = defaultValue instanceof Date ? new Date(defaultValue.getTime()) : cloneDeep(defaultValue);
             set(result, node.path, clonedValue);
         }
     }
@@ -409,10 +405,10 @@ class AXPLayoutBuilderService {
     create() {
         return new LayoutBuilder(this.popupService);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPLayoutBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPLayoutBuilderService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPLayoutBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPLayoutBuilderService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPLayoutBuilderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPLayoutBuilderService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -527,6 +523,15 @@ class LayoutBuilder {
             mode: this.root.mode,
         };
     }
+    /**
+     * Converts the built widget node to JSON string
+     * @param options - Serialization options
+     * @returns JSON string representation of the widget node
+     */
+    toJson(options) {
+        const node = this.build();
+        return AXPWidgetSerializationHelper.toJson(node, options);
+    }
 }
 //#endregion
 //#region ----   Container Builder Implementation   ----
@@ -1155,10 +1160,34 @@ class FormFieldBuilder extends LayoutContainerMixin {
         child.type(type);
         child.name(finalName);
         child.path(widgetPath);
-        // Remove name from options since it's now in state
-        const { name: _, ...cleanOptions } = (options || {});
+        // Extract extended properties from options (triggers, meta, valueTransforms, mode, visible, defaultValue)
+        const { name: _, triggers, meta, valueTransforms, mode: extendedMode, visible: extendedVisible, defaultValue: extendedDefaultValue, children: extendedChildren, ...cleanOptions } = (options || {});
         child.withInheritanceContext(this.inheritanceContext);
         child.options(cleanOptions);
+        // Apply extended properties if provided
+        if (extendedMode !== undefined) {
+            child.mode(extendedMode);
+        }
+        if (extendedVisible !== undefined) {
+            child.visible(extendedVisible);
+        }
+        if (extendedDefaultValue !== undefined) {
+            child.defaultValue(extendedDefaultValue);
+        }
+        // Set triggers, meta, and valueTransforms directly on widgetState
+        // These are part of AXPWidgetNode but not handled by WidgetBuilder methods
+        if (triggers !== undefined) {
+            child.widgetState.triggers = triggers;
+        }
+        if (meta !== undefined) {
+            child.widgetState.meta = meta;
+        }
+        if (valueTransforms !== undefined) {
+            child.widgetState.valueTransforms = valueTransforms;
+        }
+        if (extendedChildren !== undefined) {
+            child.widgetState.children = extendedChildren;
+        }
         // IMPORTANT: Store the widget builder, don't build it yet!
         // This allows properties set after this method (like disabled, readonly) to be applied
         this.childWidget = child;
@@ -1500,12 +1529,13 @@ class DialogContainerBuilder {
         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 || {};
+        //TODO remove using collectDefaultValues and use initialContext directly for now:
         const contextWithDefaults = collectDefaultValues(dialogNode, initialContext);
         // Create dialog configuration
         const dialogConfig = {
             title: this.dialogState.dialogOptions?.title || '',
             message: this.dialogState.dialogOptions?.message,
-            context: contextWithDefaults,
+            context: initialContext,
             definition: dialogNode,
             actions: this.dialogState.actions,
         };
@@ -1539,6 +1569,7 @@ class WidgetBuilder {
         this.widgetState = {
             type: 'widget',
             options: {},
+            children: [],
         };
         this.inheritanceContext = {};
         if (name) {
@@ -1602,6 +1633,7 @@ class WidgetBuilder {
             this.widgetState.options = {};
         }
         this.widgetState.options['visible'] = condition;
+        this.widgetState.visible = condition;
         this.inheritanceContext.visible = condition;
         return this;
     }
@@ -1633,6 +1665,10 @@ class WidgetBuilder {
         this.inheritanceContext.direction = direction;
         return this;
     }
+    children(children) {
+        this.widgetState.children = children;
+        return this;
+    }
     // Inheritance context methods
     withInheritanceContext(context) {
         this.inheritanceContext = mergeInheritanceContext(context);
@@ -1656,6 +1692,7 @@ class WidgetBuilder {
         }
         if (resolved.visible !== undefined) {
             this.widgetState.options['visible'] = resolved.visible;
+            this.widgetState.visible = resolved.visible;
         }
         if (context.defaultValue !== undefined) {
             this.widgetState.defaultValue = context.defaultValue;
@@ -1666,14 +1703,29 @@ class WidgetBuilder {
         return { ...this.inheritanceContext };
     }
     build() {
-        return {
+        const node = {
             name: this.widgetState.name,
             type: this.widgetState.type,
             options: this.widgetState.options,
             mode: this.widgetState.mode,
             path: this.widgetState.path,
             defaultValue: this.widgetState.defaultValue,
+            children: this.widgetState.children,
         };
+        // Add extended properties if they exist
+        if (this.widgetState.triggers !== undefined) {
+            node.triggers = this.widgetState.triggers;
+        }
+        if (this.widgetState.meta !== undefined) {
+            node.meta = this.widgetState.meta;
+        }
+        if (this.widgetState.valueTransforms !== undefined) {
+            node.valueTransforms = this.widgetState.valueTransforms;
+        }
+        if (this.widgetState.visible !== undefined) {
+            node.visible = this.widgetState.visible;
+        }
+        return node;
     }
 }
 //#region ----   Action Builder Implementation   ----
@@ -2078,8 +2130,8 @@ class AXPLayoutRendererComponent {
     isWidgetNode(data) {
         return data && typeof data === 'object' && 'type' in data && typeof data.type === 'string';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPLayoutRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPLayoutRendererComponent, isStandalone: true, selector: "axp-layout-renderer", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { context: "contextChange", contextInitiated: "contextInitiated", validityChange: "validityChange" }, viewQueries: [{ propertyName: "form", first: true, predicate: AXFormComponent, descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: AXPWidgetContainerComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPLayoutRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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()) {
@@ -2089,7 +2141,7 @@ class AXPLayoutRendererComponent {
     </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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPLayoutRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPLayoutRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-layout-renderer', standalone: true, imports: [CommonModule, AXPWidgetCoreModule, AXFormModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <ax-form>
@@ -2103,11 +2155,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
         }], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }, { type: i0.Output, args: ["contextChange"] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], contextInitiated: [{ type: i0.Output, args: ["contextInitiated"] }], validityChange: [{ type: i0.Output, args: ["validityChange"] }], form: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXFormComponent), { isSignal: true }] }], container: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPWidgetContainerComponent), { isSignal: true }] }] } });
 
 class LayoutBuilderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LayoutBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.12", ngImport: i0, type: LayoutBuilderModule, imports: [CommonModule, AXPLayoutRendererComponent], exports: [AXPLayoutRendererComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LayoutBuilderModule, providers: [AXPLayoutBuilderService], imports: [CommonModule, AXPLayoutRendererComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: LayoutBuilderModule, imports: [CommonModule, AXPLayoutRendererComponent], exports: [AXPLayoutRendererComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutBuilderModule, providers: [AXPLayoutBuilderService], imports: [CommonModule, AXPLayoutRendererComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LayoutBuilderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutBuilderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, AXPLayoutRendererComponent],
@@ -2141,10 +2193,10 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
                 const renderer = this.layoutRenderer();
                 const container = renderer?.getContainer();
                 this.widgetCoreService = container?.builderService ?? null;
-                count = this.widgetCoreService.registeredWidgetsCount();
+                count = this.widgetCoreService?.registeredWidgetsCount();
             }
             else {
-                count = this.widgetCoreService.registeredWidgetsCount();
+                count = this.widgetCoreService?.registeredWidgetsCount();
                 // Clear existing timer
                 if (this.debounceTimer) {
                     clearTimeout(this.debounceTimer);
@@ -2159,7 +2211,6 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
     //#endregion
     //#region ----   Lifecycle   ----
     ngOnInit() {
-        // Initialize context with provided context
         this.context.set(this.config?.context || {});
     }
     #eff;
@@ -2343,8 +2394,8 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
             return undefined;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPDialogRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPDialogRendererComponent, isStandalone: true, selector: "axp-dialog-renderer", inputs: { config: "config" }, outputs: { result: "result" }, viewQueries: [{ propertyName: "layoutRenderer", first: true, predicate: AXPLayoutRendererComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPDialogRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXPDialogRendererComponent, isStandalone: true, selector: "axp-dialog-renderer", 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"
@@ -2394,7 +2445,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.12", ngImport: i0, type: AXPDialogRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPDialogRendererComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-dialog-renderer',
@@ -2457,9 +2508,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
     </ax-footer>
   `,
                 }]
-        }], propDecorators: { config: [{
-                type: Input
-            }], result: [{
+        }], propDecorators: { result: [{
                 type: Output
             }], layoutRenderer: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPLayoutRendererComponent), { isSignal: true }] }] } });