@acorex/platform 21.0.0-next.42 → 21.0.0-next.44

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

@@ -2,8 +2,10 @@ import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 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 { provideCommandSetups, AXPCommandService } from '@acorex/platform/runtime';
 import { AXPopupService } from '@acorex/components/popup';
+import * as i4 from '@acorex/platform/core';
+import { AXPHookService, AXPExpressionEvaluatorService, AXPComponentSlotModule, AXPContextStore } from '@acorex/platform/core';
 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, merge } from 'lodash-es';
@@ -19,10 +21,35 @@ import { AXLoadingModule } from '@acorex/components/loading';
 import { AXBasePageComponent } from '@acorex/components/page';
 import * as i6 from '@acorex/core/translation';
 import { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';
-import * as i4 from '@acorex/platform/core';
-import { AXPExpressionEvaluatorService, AXPComponentSlotModule, AXPContextStore } from '@acorex/platform/core';
 import { AXP_ENTITY_DEFINITION_CRUD_SERVICE } from '@acorex/platform/domain';
 
+//#region ---- Imports ----
+//#endregion
+//#region ---- Before open ----
+/**
+ * Runs after dialog options and context are prepared and **before** footer customization and popup open.
+ * Listeners may mutate {@link AXPLayoutBuilderDialogBeforeOpenPayload.context} by reference.
+ */
+const AXP_LAYOUT_BUILDER_DIALOG_BEFORE_OPEN_HOOK_KEY = 'layout-builder.dialog.before-open';
+//#endregion
+//#region ---- Footer actions ----
+/**
+ * Runs after builder-defined footer actions exist and **before** the dialog opens.
+ * Listeners receive the live `actions.footer.prefix` / `suffix` arrays (same references as the dialog)
+ * so they may push, splice, filter, or replace items. They may also mutate {@link AXPLayoutBuilderDialogFooterPayload.context} by reference.
+ */
+const AXP_LAYOUT_BUILDER_DIALOG_CONFIG_HOOK_KEY = 'layout-builder.dialog.config';
+//#endregion
+//#region ---- Context updates (after open) ----
+/**
+ * Runs whenever the dialog layout builder context changes (debounced upstream), **after** the popup is visible.
+ * Use for side effects that depend on live context (for example values updated by widgets after render).
+ * Payload mirrors `AXPDialogRendererComponent` semantics: {@link AXPLayoutBuilderDialogContextChangedPayload.getContext},
+ * {@link AXPLayoutBuilderDialogContextChangedPayload.patchContext}, and optional loading state.
+ */
+const AXP_LAYOUT_BUILDER_DIALOG_CONTEXT_CHANGED_HOOK_KEY = 'layout-builder.dialog.context-changed';
+//#endregion
+
 class AXPLayoutConversionService {
     constructor() {
         //#region ----   Caching   ----
@@ -412,12 +439,13 @@ function getNestedValue(obj, path) {
 class AXPLayoutBuilderService {
     constructor() {
         this.popupService = inject(AXPopupService);
+        this.hookService = inject(AXPHookService, { optional: true }) ?? undefined;
     }
     /**
      * Create a new layout builder
      */
     create() {
-        return new LayoutBuilder(this.popupService);
+        return new LayoutBuilder(this.popupService, this.hookService);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutBuilderService, providedIn: 'root' }); }
@@ -435,8 +463,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Open/Closed: Extensible through container delegates
  */
 class LayoutBuilder {
-    constructor(popupService) {
+    constructor(popupService, hookService) {
         this.popupService = popupService;
+        this.hookService = hookService;
         this.root = {
             children: [],
             mode: 'edit',
@@ -506,7 +535,7 @@ class LayoutBuilder {
         if (!this.popupService) {
             throw new Error('LayoutBuilder requires AXPopupService to create dialogs. Please inject it in the service constructor.');
         }
-        const container = new DialogContainerBuilder(this.popupService);
+        const container = new DialogContainerBuilder(this.popupService, this.hookService);
         if (delegate) {
             delegate(container);
         }
@@ -1512,7 +1541,7 @@ class ListWidgetBuilder extends WidgetContainerMixin {
  * Uses composition instead of inheritance for cleaner separation
  */
 class DialogContainerBuilder {
-    constructor(popupService) {
+    constructor(popupService, hookService) {
         this.dialogState = {
             type: 'flex-layout', // This will be overridden when content layout exists
             children: [],
@@ -1535,6 +1564,7 @@ class DialogContainerBuilder {
         else {
             this.popupService = inject(AXPopupService);
         }
+        this.hookService = hookService ?? inject(AXPHookService, { optional: true }) ?? undefined;
     }
     setOptions(options) {
         this.dialogState.dialogOptions = { ...this.dialogState.dialogOptions, ...options };
@@ -1575,7 +1605,12 @@ class DialogContainerBuilder {
         return this;
     }
     onAction(handler) {
-        (this.dialogState.dialogOptions ??= {}).onAction = handler;
+        this.dialogState.dialogOptions ??= {
+            title: '',
+            size: 'md',
+            closeButton: false,
+        };
+        this.dialogState.dialogOptions.onAction = handler;
         return this;
     }
     addCustomAction(action) {
@@ -1624,22 +1659,42 @@ 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 || {};
-        //TODO remove using collectDefaultValues and use initialContext directly for now:
-        const contextWithDefaults = collectDefaultValues(dialogNode, initialContext);
+        this.dialogState.dialogOptions ??= {};
+        if (this.dialogState.dialogOptions.context == null || typeof this.dialogState.dialogOptions.context !== 'object') {
+            this.dialogState.dialogOptions.context = {};
+        }
+        const initialContext = this.dialogState.dialogOptions.context;
+        this.dialogState.actions ??= { footer: { prefix: [], suffix: [] } };
+        this.dialogState.actions.footer ??= { prefix: [], suffix: [] };
+        this.dialogState.actions.footer.prefix ??= [];
+        this.dialogState.actions.footer.suffix ??= [];
+        const hookService = this.hookService;
+        if (hookService) {
+            const beforePayload = {
+                context: initialContext,
+                dialogOptions: this.dialogState.dialogOptions,
+            };
+            await hookService.runAsync(AXP_LAYOUT_BUILDER_DIALOG_BEFORE_OPEN_HOOK_KEY, beforePayload);
+        }
         // Create dialog configuration
         const dialogConfig = {
             title: this.dialogState.dialogOptions?.title || '',
-            message: this.dialogState.dialogOptions?.message,
+            //TODO: why we need message?
+            //message: this.dialogState.dialogOptions?.message,
             context: initialContext,
             definition: dialogNode,
+            metadata: this.dialogState.dialogOptions.metadata,
             actions: this.dialogState.actions,
             onAction: this.dialogState.dialogOptions?.onAction,
         };
+        // 
+        if (hookService) {
+            await hookService.runAsync(AXP_LAYOUT_BUILDER_DIALOG_CONFIG_HOOK_KEY, dialogConfig);
+        }
         // The Promise resolves when user clicks an action button
         return new Promise(async (resolve) => {
-            this.popupService.open(AXPDialogRendererComponent, {
+            let flag = false;
+            await this.popupService.open(AXPDialogRendererComponent, {
                 title: dialogConfig.title,
                 size: this.dialogState.dialogOptions?.size || 'md',
                 closeButton: this.dialogState.dialogOptions?.closeButton || false,
@@ -1648,10 +1703,14 @@ class DialogContainerBuilder {
                 data: {
                     config: dialogConfig,
                     callBack: (result) => {
+                        flag = true;
                         resolve(result);
                     },
                 },
             });
+            if (!flag) {
+                resolve({ success: false });
+            }
         });
     }
 }
@@ -2311,6 +2370,8 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
         super(...arguments);
         this.result = new EventEmitter();
         this.expressionEvaluator = inject(AXPExpressionEvaluatorService);
+        this.commandService = inject(AXPCommandService);
+        this.hookService = inject(AXPHookService, { optional: true });
         this.context = signal({}, ...(ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []));
         // This will be set by the popup service automatically - same as dynamic-dialog
         this.callBack = () => { };
@@ -2318,6 +2379,12 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
         // Aggregated actions for footer rendering
         this.footerPrefix = signal([], ...(ngDevMode ? [{ debugName: "footerPrefix" }] : /* istanbul ignore next */ []));
         this.footerSuffix = signal([], ...(ngDevMode ? [{ debugName: "footerSuffix" }] : /* istanbul ignore next */ []));
+        /**
+         * Correlate layout context snapshots for distributed hooks (`layout-builder.dialog.context-changed`).
+         */
+        this.contextChangedHooksSessionKey = typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function'
+            ? crypto.randomUUID()
+            : `layout-dialog-ctx-${Date.now()}-${Math.random().toString(36).slice(2)}`;
         //#endregion
         //#region ----   View Accessors   ----
         // Access the internal layout renderer to reach the widgets container injector
@@ -2348,16 +2415,42 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
     //#region ----   Lifecycle   ----
     ngOnInit() {
         this.context.set(this.config?.context || {});
+        void this.invokeLayoutContextChangedHooks();
     }
     #eff;
     //#endregion
     handleContextChanged(event) {
         this.context.set(event);
         this.aggregateAndEvaluateActions();
+        void this.invokeLayoutContextChangedHooks();
     }
     handleContextInitiated(event) {
         this.context.set(event);
         this.aggregateAndEvaluateActions();
+        void this.invokeLayoutContextChangedHooks();
+    }
+    async invokeLayoutContextChangedHooks() {
+        const meta = this.config?.metadata;
+        if (!this.hookService) {
+            return;
+        }
+        const payload = {
+            sessionKey: this.contextChangedHooksSessionKey,
+            getContext: () => (this.context() ?? {}),
+            metadata: meta,
+            patchContext: (partial) => {
+                const merged = merge({}, this.context(), partial);
+                this.context.set(merged);
+                this.layoutRenderer()?.updateContext(merged);
+            },
+            setLoading: (loading) => this.isDialogLoading.set(loading),
+        };
+        try {
+            await this.hookService.runAsync(AXP_LAYOUT_BUILDER_DIALOG_CONTEXT_CHANGED_HOOK_KEY, payload);
+        }
+        catch {
+            // Hook providers are best-effort; avoid breaking the dialog lifecycle.
+        }
     }
     footerPrefixActions() {
         return this.footerPrefix();
@@ -2379,6 +2472,7 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
                 return;
             }
         }
+        //TODO: matin, why we need this? maybe we can remove it?
         if (cmd?.startsWith('widget:')) {
             const parsed = this.parseWidgetCommand(cmd);
             if (parsed.widgetName && parsed.action) {
@@ -2387,6 +2481,25 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
                 return;
             }
         }
+        if (cmd && this.commandService.exists(cmd)) {
+            const dialogRef = this.createDialogRef(cmd);
+            const integration = (this.config.metadata ?? {});
+            try {
+                const cmdResult = await this.commandService.execute(cmd, { dialogRef, integration });
+                if (!cmdResult?.success) {
+                    return;
+                }
+                if (this.shouldKeepDialogOpenAfterCommandResult(cmdResult)) {
+                    return;
+                }
+                this.callBack(cmdResult);
+                await this.closeWithOptionalSkipValidate(cmdResult);
+            }
+            catch (error) {
+                console.error('Error executing action', cmd, error);
+            }
+            return;
+        }
         const context = this.context();
         const onAction = this.config?.onAction;
         if (onAction) {
@@ -2394,7 +2507,7 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
             try {
                 this.isDialogLoading.set(true);
                 const result = await Promise.resolve(onAction(dialogRef));
-                if (result && typeof result === 'object' && result.keepDialogOpen) {
+                if (this.shouldKeepDialogOpenAfterCommandResult(result)) {
                     return;
                 }
                 this.callBack(result);
@@ -2432,8 +2545,25 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
         if (cmd.startsWith('widget:')) {
             return false;
         }
+        if (this.commandService.exists(cmd)) {
+            return false;
+        }
         return true;
     }
+    /** True when a footer handler or command result asks to leave the dialog open (`keepDialogOpen` on the result or `result.data`). */
+    shouldKeepDialogOpenAfterCommandResult(result) {
+        if (!result || typeof result !== 'object') {
+            return false;
+        }
+        const top = result;
+        if (top.keepDialogOpen === true) {
+            return true;
+        }
+        if (top.data != null && typeof top.data === 'object' && 'keepDialogOpen' in top.data) {
+            return top.data.keepDialogOpen === true;
+        }
+        return false;
+    }
     createDialogRef(actionCmd) {
         return {
             close: (res) => {
@@ -2623,9 +2753,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) {
+      <!-- @if (config.message) {
         <p class="ax-mb-4 ax-leading-relaxed">{{ config.message | translate | async }}</p>
-      }
+      } -->
       <axp-layout-renderer
         [layout]="config.definition"
         [context]="context()"
@@ -2649,8 +2779,13 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
               [color]="action.color"
               (onClick)="executeAction(action)"
             >
+              @if (isFormLoading()) {
+                <ax-loading></ax-loading>
+              }
               <ax-prefix>
-                <i class="{{ action.icon }}"></i>
+                @if (action.icon) {
+                  <ax-icon [icon]="action.icon"></ax-icon>
+                }
               </ax-prefix>
             </ax-button>
           }
@@ -2669,7 +2804,7 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
               }
               @if (action.icon) {
                 <ax-prefix>
-                  <ax-icon icon="{{ action.icon }}"></ax-icon>
+                  <ax-icon [icon]="action.icon"></ax-icon>
                 </ax-prefix>
               }
             </ax-button>
@@ -2699,9 +2834,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) {
+      <!-- @if (config.message) {
         <p class="ax-mb-4 ax-leading-relaxed">{{ config.message | translate | async }}</p>
-      }
+      } -->
       <axp-layout-renderer
         [layout]="config.definition"
         [context]="context()"
@@ -2725,8 +2860,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
               [color]="action.color"
               (onClick)="executeAction(action)"
             >
+              @if (isFormLoading()) {
+                <ax-loading></ax-loading>
+              }
               <ax-prefix>
-                <i class="{{ action.icon }}"></i>
+                @if (action.icon) {
+                  <ax-icon [icon]="action.icon"></ax-icon>
+                }
               </ax-prefix>
             </ax-button>
           }
@@ -2745,7 +2885,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
               }
               @if (action.icon) {
                 <ax-prefix>
-                  <ax-icon icon="{{ action.icon }}"></ax-icon>
+                  <ax-icon [icon]="action.icon"></ax-icon>
                 </ax-prefix>
               }
             </ax-button>
@@ -2950,5 +3090,5 @@ var previewWidgetField_command = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { AXPDialogRendererComponent, AXPLayoutBuilderService, AXPLayoutConversionService, AXPLayoutRendererComponent, AXPPreviewWidgetFieldCommand, AXP_PREVIEW_WIDGET_FIELD_COMMAND_KEY, LayoutBuilderModule };
+export { AXPDialogRendererComponent, AXPLayoutBuilderService, AXPLayoutConversionService, AXPLayoutRendererComponent, AXPPreviewWidgetFieldCommand, AXP_LAYOUT_BUILDER_DIALOG_BEFORE_OPEN_HOOK_KEY, AXP_LAYOUT_BUILDER_DIALOG_CONFIG_HOOK_KEY, AXP_LAYOUT_BUILDER_DIALOG_CONTEXT_CHANGED_HOOK_KEY, AXP_PREVIEW_WIDGET_FIELD_COMMAND_KEY, LayoutBuilderModule };
 //# sourceMappingURL=acorex-platform-layout-builder.mjs.map