@acorex/platform 21.0.0-next.39 → 21.0.0-next.41

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

@@ -1,12 +1,12 @@
 import * as i5 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 } from '@angular/core';
+import { Injectable, inject, input, model, signal, computed, effect, output, viewChild, ChangeDetectionStrategy, Component, NgModule, EventEmitter, Output } from '@angular/core';
 import { provideCommandSetups } from '@acorex/platform/runtime';
 import { AXPopupService } from '@acorex/components/popup';
 import * as i1 from '@acorex/platform/layout/widget-core';
 import { AXPWidgetSerializationHelper, AXPWidgetContainerComponent, AXPPageStatus, AXPWidgetCoreModule, AXPWidgetRegistryService } from '@acorex/platform/layout/widget-core';
-import { cloneDeep, isNil, set, isEqual } from 'lodash-es';
+import { cloneDeep, isNil, set, isEqual, merge } from 'lodash-es';
 import * as i2 from '@acorex/components/form';
 import { AXFormComponent, AXFormModule } from '@acorex/components/form';
 import { Subject, debounceTime, distinctUntilChanged, startWith } from 'rxjs';
@@ -161,6 +161,10 @@ class AXPLayoutConversionService {
         if (!editorWidget.mode) {
             editorWidget.mode = fieldMode;
         }
+        const hintOpts = field.description != null &&
+            (typeof field.description !== 'string' || field.description.trim().length > 0)
+            ? { hint: field.description, hintDisplayMode: 'note' }
+            : {};
         return {
             type: 'form-field',
             name: field.path,
@@ -168,8 +172,8 @@ class AXPLayoutConversionService {
             options: {
                 label: field.title,
                 badge: field.badge,
-                description: field.description,
                 showLabel: true,
+                ...hintOpts,
             },
             children: [editorWidget], // The editor widget becomes a child of form-field
         };
@@ -212,7 +216,7 @@ class AXPLayoutConversionService {
             path: formFieldNode.name || editorWidget.name || `field-${Date.now()}`,
             title: formFieldNode.options?.['label'],
             badge: formFieldNode.options?.['badge'],
-            description: formFieldNode.options?.['description'],
+            description: formFieldNode.options?.['hint'],
             widget: editorWidget,
             mode: formFieldNode.mode,
         };
@@ -527,11 +531,21 @@ class LayoutBuilder {
         return this;
     }
     build() {
-        return {
-            type: this.root.type,
-            children: this.root.children,
-            mode: this.root.mode,
+        const r = this.root;
+        const node = {
+            type: r.type,
+            ...(r.mode !== undefined ? { mode: r.mode } : {}),
+            ...(r.children !== undefined ? { children: r.children } : {}),
+            ...(r.options !== undefined ? { options: r.options } : {}),
+            ...(r.name !== undefined ? { name: r.name } : {}),
+            ...(r.path !== undefined ? { path: r.path } : {}),
+            ...(r.visible !== undefined ? { visible: r.visible } : {}),
+            ...(r.defaultValue !== undefined ? { defaultValue: r.defaultValue } : {}),
+            ...(r.triggers !== undefined ? { triggers: r.triggers } : {}),
+            ...(r.meta !== undefined ? { meta: r.meta } : {}),
+            ...(r.valueTransforms !== undefined ? { valueTransforms: r.valueTransforms } : {}),
         };
+        return node;
     }
     /**
      * Converts the built widget node to JSON string
@@ -1005,6 +1019,24 @@ class FlexContainerBuilder extends WidgetContainerMixin {
  * Extracts flat grid-item options from AXPGridLayoutOptions for grid-item-layout widget.
  * Uses first available breakpoint (lg, xl, md, sm).
  */
+/**
+ * Deep-merges grid breakpoint buckets so sequential fluent calls (e.g. setColumns then setGap)
+ * do not wipe sibling keys under options.grid.default.
+ */
+function mergeAXPGridContainerOptions(prev, patch) {
+    const next = { ...(prev ?? {}), ...patch };
+    if (prev?.grid?.default || patch.grid?.default) {
+        next.grid = {
+            ...(prev?.grid ?? {}),
+            ...(patch.grid ?? {}),
+            default: {
+                ...(prev?.grid?.default ?? {}),
+                ...(patch.grid?.default ?? {}),
+            },
+        };
+    }
+    return next;
+}
 function toGridItemOptions(layoutOptions) {
     if (!layoutOptions?.positions)
         return { colSpan: 12 };
@@ -1034,7 +1066,7 @@ class GridContainerBuilder extends WidgetContainerMixin {
         super('grid-layout');
     }
     setOptions(options) {
-        this.containerState.options = { ...this.containerState.options, ...options };
+        this.containerState.options = mergeAXPGridContainerOptions(this.containerState.options, options);
         return this;
     }
     item(layoutOptions, delegate) {
@@ -1998,6 +2030,11 @@ class AXPLayoutRendererComponent {
         //#endregion
         //#region ----   Widget Tree Conversion   ----
         this.widgetTree = signal(null, ...(ngDevMode ? [{ debugName: "widgetTree" }] : /* istanbul ignore next */ []));
+        /**
+         * Prefer explicit {@link AXPWidgetNode.mode} on the root node (e.g. dialog flex `mode('view')`)
+         * so nested widgets resolve view vs edit correctly; fall back to the layout `mode` input.
+         */
+        this.effectiveRenderMode = computed(() => this.widgetTree()?.mode ?? this.mode(), ...(ngDevMode ? [{ debugName: "effectiveRenderMode" }] : /* istanbul ignore next */ []));
         /**
          * Convert layout data to widget tree when inputs change
          */
@@ -2207,7 +2244,11 @@ class AXPLayoutRendererComponent {
     <ax-form>
       <axp-widgets-container [context]="internalContext()" (onContextChanged)="handleContextChanged($event)">
         @if (widgetTree()) {
-          <ng-container axp-widget-renderer [node]="widgetTree()!" [mode]="mode()"></ng-container>
+          <ng-container
+            axp-widget-renderer
+            [node]="widgetTree()!"
+            [mode]="effectiveRenderMode()"
+          ></ng-container>
         }
       </axp-widgets-container>
     </ax-form>
@@ -2219,7 +2260,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
     <ax-form>
       <axp-widgets-container [context]="internalContext()" (onContextChanged)="handleContextChanged($event)">
         @if (widgetTree()) {
-          <ng-container axp-widget-renderer [node]="widgetTree()!" [mode]="mode()"></ng-container>
+          <ng-container
+            axp-widget-renderer
+            [node]="widgetTree()!"
+            [mode]="effectiveRenderMode()"
+          ></ng-container>
         }
       </axp-widgets-container>
     </ax-form>
@@ -2328,7 +2373,7 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
     }
     async executeAction(action) {
         const cmd = this.resolveActionCommandName(action.command);
-        if (cmd !== 'cancel') {
+        if (this.shouldValidateBeforeAction(cmd)) {
             const isValid = await this.layoutRenderer()?.validate();
             if (!isValid?.result) {
                 return;
@@ -2337,7 +2382,7 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
         if (cmd?.startsWith('widget:')) {
             const parsed = this.parseWidgetCommand(cmd);
             if (parsed.widgetName && parsed.action) {
-                await this.executeWidgetApi(parsed.widgetName, parsed.action);
+                await this.invokeWidget(parsed.widgetName, parsed.action, {});
                 await this.aggregateAndEvaluateActions();
                 return;
             }
@@ -2345,17 +2390,15 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
         const context = this.context();
         const onAction = this.config?.onAction;
         if (onAction) {
-            const dialogRef = {
-                close: (res) => this.close(res),
-                context: () => this.context(),
-                action: () => action.command ?? undefined,
-                setLoading: (loading) => this.isDialogLoading.set(loading),
-            };
+            const dialogRef = this.createDialogRef(cmd);
             try {
                 this.isDialogLoading.set(true);
                 const result = await Promise.resolve(onAction(dialogRef));
+                if (result && typeof result === 'object' && result.keepDialogOpen) {
+                    return;
+                }
                 this.callBack(result);
-                this.close(result);
+                await this.closeWithOptionalSkipValidate(result);
             }
             catch {
                 // Handler threw: stay open for retry, actions remain clickable
@@ -2373,20 +2416,48 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
             this.data.action = result.action;
         }
         this.callBack({
-            close: (res) => {
-                this.close(res);
-            },
-            context: () => this.context(),
+            ...this.createDialogRef(cmd),
             action: () => result.action,
-            setLoading: (loading) => {
-                this.isDialogLoading.set(loading);
-            },
         });
         // Without `onAction`, only the configured cancel action dismisses the dialog (not submit/custom).
         if (cmd === 'cancel') {
             await this.close(result);
         }
     }
+    /** Whether the layout form should be validated before running this footer command. */
+    shouldValidateBeforeAction(cmd) {
+        if (!cmd || cmd === 'cancel' || cmd === 'entity-form-done') {
+            return false;
+        }
+        if (cmd.startsWith('widget:')) {
+            return false;
+        }
+        return true;
+    }
+    createDialogRef(actionCmd) {
+        return {
+            close: (res) => {
+                void this.closeWithOptionalSkipValidate(res);
+            },
+            context: () => this.context(),
+            action: () => actionCmd,
+            setLoading: (loading) => this.isDialogLoading.set(loading),
+            patchContext: (partial) => {
+                const merged = merge({}, this.context(), partial);
+                this.context.set(merged);
+                this.layoutRenderer()?.updateContext(merged);
+            },
+            invokeWidget: (widgetName, method, opts) => this.invokeWidget(widgetName, method, opts ?? {}),
+        };
+    }
+    async closeWithOptionalSkipValidate(result) {
+        if (result && typeof result === 'object' && result.skipValidate) {
+            this.result.emit(result);
+            await super.close(result);
+            return;
+        }
+        await this.close(result);
+    }
     /** Resolves footer/widget action command to a string (e.g. `cancel`, `submit`, `widget:...`). */
     resolveActionCommandName(command) {
         if (typeof command === 'string') {
@@ -2407,7 +2478,7 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
             return {};
         return { widgetName: rest.slice(0, dot), action: rest.slice(dot + 1) };
     }
-    async executeWidgetApi(widgetName, apiMethod) {
+    async invokeWidget(widgetName, apiMethod, opts) {
         if (!this.widgetCoreService)
             return;
         try {
@@ -2417,16 +2488,20 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
             if (typeof fn === 'function') {
                 await Promise.resolve(fn({
                     close: (result) => {
-                        this.close(result);
+                        void this.closeWithOptionalSkipValidate(result);
                     },
                     context: () => this.context(),
                     setLoading: (loading) => {
-                        this.isDialogLoading.set(loading);
+                        (opts.setLoading ?? ((v) => this.isDialogLoading.set(v)))(loading);
                     },
                 }));
+                // Footer predicates (e.g. wizard step) must refresh when the widget advances outside executeAction (e.g. dialogRef.invokeWidget after entity-form continue).
+                await this.aggregateAndEvaluateActions();
             }
         }
-        catch { }
+        catch {
+            //
+        }
     }
     async close(result) {
         if (result) {
@@ -2476,6 +2551,7 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
             zone: 'footer',
             placement,
             scope: a.scope,
+            predicateApiWidgetName: a.predicateApiWidgetName,
         });
         const prefix = (footer?.prefix || []).map((a) => mapOne(a, 'prefix'));
         const suffix = (footer?.suffix || []).map((a) => mapOne(a, 'suffix'));
@@ -2485,16 +2561,18 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
         const out = [];
         for (const a of actions) {
             const parsed = typeof a.command === 'string' ? this.parseWidgetCommand(a.command) : {};
-            const api = parsed.widgetName ? await this.resolveApi(parsed.widgetName) : undefined;
+            const widgetNameForApi = parsed.widgetName ?? a.predicateApiWidgetName;
+            const api = widgetNameForApi ? await this.resolveApi(widgetNameForApi) : undefined;
             const scope = {
                 api,
-                widget: { name: parsed.widgetName },
+                widget: { name: widgetNameForApi },
                 dialog: { context: this.context() },
                 context: this.context(),
             };
             const disabled = await this.evalBool(a.disabled, scope);
             const hidden = await this.evalBool(a.hidden, scope);
-            out.push({ ...a, disabled, hidden });
+            const resolvedTitle = (await this.evalActionTitle(a.title, scope)) ?? a.title;
+            out.push({ ...a, disabled, hidden, title: resolvedTitle });
         }
         return out;
     }
@@ -2512,6 +2590,25 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
         }
         return value;
     }
+    /** Resolves footer action title when it contains {{ ... }} (e.g. wizard labels from dialog context). */
+    async evalActionTitle(value, scope) {
+        if (value == null || typeof value !== 'string' || !value.includes('{{')) {
+            return value;
+        }
+        try {
+            const result = await this.expressionEvaluator.evaluate(value, scope);
+            if (typeof result === 'string' && result.length > 0) {
+                return result;
+            }
+            if (result != null && result !== false) {
+                return String(result);
+            }
+        }
+        catch {
+            //
+        }
+        return value;
+    }
     async resolveApi(widgetName) {
         try {
             await this.widgetCoreService?.waitForWidget(widgetName, 2000);
@@ -2526,6 +2623,9 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDialogRendererComponent, isStandalone: true, selector: "axp-dialog-renderer", outputs: { result: "result" }, providers: [AXPContextStore], viewQueries: [{ propertyName: "layoutRenderer", first: true, predicate: AXPLayoutRendererComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <axp-component-slot name="dialog-header" [context]="context()"></axp-component-slot>
     <div class="ax-p-4">
+      @if (config.message) {
+        <p class="ax-mb-4 ax-leading-relaxed">{{ config.message | translate | async }}</p>
+      }
       <axp-layout-renderer
         [layout]="config.definition"
         [context]="context()"
@@ -2599,6 +2699,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     template: `
     <axp-component-slot name="dialog-header" [context]="context()"></axp-component-slot>
     <div class="ax-p-4">
+      @if (config.message) {
+        <p class="ax-mb-4 ax-leading-relaxed">{{ config.message | translate | async }}</p>
+      }
       <axp-layout-renderer
         [layout]="config.definition"
         [context]="context()"