@acorex-platform/framework-client 0.0.56 → 0.0.58

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

@@ -3,10 +3,10 @@ import { CommonModule, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Injectable, inject, input, model, signal, computed, effect, output, viewChild, ChangeDetectionStrategy, Component, NgModule, EventEmitter, ElementRef, DestroyRef, untracked, Output } from '@angular/core';
 import * as i4 from '@acorex-platform/framework-client/core';
-import { AXPHookService, resolveDialogActionShortcuts, DEFAULT_CANCEL_DIALOG_ACTION_SHORTCUTS, DEFAULT_SUBMIT_DIALOG_ACTION_SHORTCUTS, AXP_SETTINGS_DEFINITION_DIALOG_OPENER, findOverlayContainerAncestor, getNestedVisibleOverlayPanes, getTopVisibleOverlayContainer, AXPExpressionEvaluatorService, AXPKeyboardShortcutRegistry, AXPDebugService, normalizeDialogActionShortcutChord, isDialogShortcutAllowedInEditableField, resolveConfiguredFooterActionShortcuts, AXPComponentSlotModule, AXPContextStore } from '@acorex-platform/framework-client/core';
-export { DEFAULT_CANCEL_DIALOG_ACTION_SHORTCUTS, DEFAULT_SUBMIT_DIALOG_ACTION_SHORTCUTS } from '@acorex-platform/framework-client/core';
+import { AXPHookService, AXPDialogOpener, resolveDialogActionShortcuts, DEFAULT_CANCEL_DIALOG_ACTION_SHORTCUTS, DEFAULT_SUBMIT_DIALOG_ACTION_SHORTCUTS, AXP_SETTINGS_DEFINITION_DIALOG_OPENER, findOverlayContainerAncestor, getNestedVisibleOverlayPanes, getTopVisibleOverlayContainer, AXPExpressionEvaluatorService, AXPKeyboardShortcutRegistry, normalizeDialogActionShortcutChord, isDialogShortcutAllowedInEditableField, resolveConfiguredFooterActionShortcuts, AXPComponentSlotModule, AXPContextStore } from '@acorex-platform/framework-client/core';
+export { AXPDialogOpener, AXP_ROOT_LOADING, DEFAULT_CANCEL_DIALOG_ACTION_SHORTCUTS, DEFAULT_SUBMIT_DIALOG_ACTION_SHORTCUTS } from '@acorex-platform/framework-client/core';
 import { provideCommandSetups, AXPCommandService } from '@acorex-platform/framework-client/runtime';
-import { toAxpGridItemWidgetOptions, AXP_PREVIEW_WIDGET_FIELD_COMMAND_KEY, AXPWidgetsList, AXPWidgetsCatalog, createRandomUuid, AXPKeyboardShortcutPriority } from '@acorex-platform/framework-shared/core';
+import { toAxpGridItemWidgetOptions, AXP_PREVIEW_WIDGET_FIELD_COMMAND_KEY, createRandomUuid, AXPKeyboardShortcutPriority } from '@acorex-platform/framework-shared/core';
 import { AXPopupService } from '@acorex/components/popup';
 import * as i1 from '@acorex-platform/framework-client/layout/widget-core';
 import { AXPWidgetSerializationHelper, AXPWidgetContainerComponent, AXPWidgetCoreModule, AXPWidgetRegistryService } from '@acorex-platform/framework-client/layout/widget-core';
@@ -22,7 +22,6 @@ import * as i2$1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i3 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
-import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
 import { AXBasePageComponent } from '@acorex/components/page';
 import { AXToastService } from '@acorex/components/toast';
 import * as i6 from '@acorex/core/translation';
@@ -376,83 +375,6 @@ function normalizeDialogCloseConfirmation(value) {
 }
 //#endregion
 
-/** Panel class on the popup overlay container; the reveal styles live in the host app. */
-const AXP_DIALOG_REVEAL_PANEL_CLASS = 'axp-dialog-reveal';
-/** Entry is owned by the panel class, so the overlay must not add its own fade-in. */
-const AXP_DIALOG_REVEAL_POPUP_ANIMATION = { enter: [] };
-/** Added once layout has settled so the reveal animation can play. */
-const READY_CLASS = 'axp-dialog-reveal-ready';
-/** The popup must keep the same size for this long before it counts as settled. */
-const AXP_DIALOG_REVEAL_RESIZE_STABLE_MS = 320;
-/** Upper bound for the stability wait (heavy entity step wizards). */
-const RESIZE_WAIT_MAX_MS = 2800;
-/** Resolves once the popup shell stops resizing (widgets, footer chrome, step content). */
-function waitForDialogPopupLayoutStable(from) {
-    const popup = from.closest('.ax-popup');
-    if (!(popup instanceof HTMLElement)) {
-        return Promise.resolve();
-    }
-    return new Promise((resolve) => {
-        let quietTimer;
-        const finish = () => {
-            clearTimeout(quietTimer);
-            clearTimeout(maxWaitTimer);
-            observer.disconnect();
-            resolve();
-        };
-        const restartQuietWindow = () => {
-            clearTimeout(quietTimer);
-            quietTimer = setTimeout(finish, AXP_DIALOG_REVEAL_RESIZE_STABLE_MS);
-        };
-        const maxWaitTimer = setTimeout(finish, RESIZE_WAIT_MAX_MS);
-        const observer = new ResizeObserver(restartQuietWindow);
-        observer.observe(popup);
-        restartQuietWindow();
-    });
-}
-const FIRST_FOCUSABLE_FIELD_SELECTOR = [
-    'input:not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([disabled]):not([tabindex="-1"])',
-    'textarea:not([disabled]):not([tabindex="-1"])',
-    'select:not([disabled]):not([tabindex="-1"])',
-    '[contenteditable="true"]:not([tabindex="-1"])',
-].join(', ');
-/** Reveals the popup shell that the panel class kept hidden, then focuses the first field. */
-function markDialogRevealReady(from) {
-    from.closest(`.${AXP_DIALOG_REVEAL_PANEL_CLASS}`)?.classList.add(READY_CLASS);
-    focusFirstPopupField(from);
-}
-/**
- * Focuses the first visible field in the popup body.
- * Runs after reveal: the shell focus from the popup library happens while the overlay is still hidden.
- */
-function focusFirstPopupField(from) {
-    const popup = from.closest('.ax-popup');
-    if (!(popup instanceof HTMLElement)) {
-        return;
-    }
-    setTimeout(() => {
-        const body = popup.querySelector('.ax-popup-body-container');
-        if (!(body instanceof HTMLElement)) {
-            return;
-        }
-        const field = Array.from(body.querySelectorAll(FIRST_FOCUSABLE_FIELD_SELECTOR)).find(isVisibleFocusTarget);
-        (field ?? popup).focus();
-    });
-}
-function isVisibleFocusTarget(element) {
-    if (element.closest('[hidden], [aria-hidden="true"]')) {
-        return false;
-    }
-    if (element.getAttribute('aria-disabled') === 'true') {
-        return false;
-    }
-    const style = getComputedStyle(element);
-    if (style.display === 'none' || style.visibility === 'hidden' || Number(style.opacity) === 0) {
-        return false;
-    }
-    return element.getClientRects().length > 0;
-}
-
 //#region ----   Inheritance Utilities   ----
 /**
  * Resolves inherited properties from context and local values
@@ -557,12 +479,13 @@ class AXPLayoutBuilderService {
     constructor() {
         this.popupService = inject(AXPopupService);
         this.hookService = inject(AXPHookService, { optional: true }) ?? undefined;
+        this.dialogOpener = inject(AXPDialogOpener);
     }
     /**
      * Create a new layout builder
      */
     create() {
-        return new LayoutBuilder(this.popupService, this.hookService);
+        return new LayoutBuilder(this.popupService, this.hookService, this.dialogOpener);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLayoutBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLayoutBuilderService, providedIn: 'root' }); }
@@ -580,9 +503,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Open/Closed: Extensible through container delegates
  */
 class LayoutBuilder {
-    constructor(popupService, hookService) {
+    constructor(popupService, hookService, dialogOpener) {
         this.popupService = popupService;
         this.hookService = hookService;
+        this.dialogOpener = dialogOpener;
         this.root = {
             children: [],
             mode: 'edit',
@@ -664,7 +588,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, this.hookService);
+        const container = new DialogContainerBuilder(this.popupService, this.hookService, this.dialogOpener);
         if (delegate) {
             delegate(container);
         }
@@ -1628,7 +1552,7 @@ class ListWidgetBuilder extends WidgetContainerMixin {
  * Uses composition instead of inheritance for cleaner separation
  */
 class DialogContainerBuilder {
-    constructor(popupService, hookService) {
+    constructor(popupService, hookService, dialogOpener) {
         this.dialogState = {
             type: 'flex-layout', // This will be overridden when content layout exists
             children: [],
@@ -1652,6 +1576,7 @@ class DialogContainerBuilder {
             this.popupService = inject(AXPopupService);
         }
         this.hookService = hookService ?? inject(AXPHookService, { optional: true }) ?? undefined;
+        this.dialogOpener = dialogOpener ?? inject(AXPDialogOpener);
     }
     setOptions(options) {
         this.dialogState.dialogOptions = { ...this.dialogState.dialogOptions, ...options };
@@ -1748,10 +1673,40 @@ class DialogContainerBuilder {
         return result;
     }
     // Dialog-specific methods
-    async show() {
+    async show(options) {
+        const outcome = await this.dialogOpener.run({
+            load: () => Promise.resolve().then(function () { return dialogRenderer_component; }).then((module) => module.AXPDialogRendererComponent),
+            data: this.dialogOpenKeyData(),
+            present: (notifyShown, component) => this.presentDialog(component, notifyShown, options),
+        });
+        if (outcome.duplicate) {
+            return createDismissedDialogRef();
+        }
+        return outcome.result;
+    }
+    dialogOpenKeyData() {
+        const dialogOptions = this.dialogState.dialogOptions;
+        return {
+            title: dialogOptions?.title ?? '',
+            size: String(dialogOptions?.size ?? 'md'),
+            widget: this.contentWidgetName(this.contentLayout),
+        };
+    }
+    contentWidgetName(node) {
+        if (!node) {
+            return '';
+        }
+        if (node.name) {
+            return node.name;
+        }
+        const child = node.children?.[0];
+        if (child) {
+            return this.contentWidgetName(child);
+        }
+        return node.type ?? '';
+    }
+    async presentDialog(component, notifyShown, options) {
         const dialogNode = this.build();
-        // Import the dialog renderer component dynamically
-        const { AXPDialogRendererComponent } = await Promise.resolve().then(function () { return dialogRenderer_component; });
         this.dialogState.dialogOptions ??= {};
         if (this.dialogState.dialogOptions.context == null || typeof this.dialogState.dialogOptions.context !== 'object') {
             this.dialogState.dialogOptions.context = {};
@@ -1770,11 +1725,8 @@ class DialogContainerBuilder {
             await hookService.runAsync(AXP_LAYOUT_BUILDER_DIALOG_BEFORE_OPEN_HOOK_KEY, beforePayload);
         }
         const confirmCloseWhenDirty = normalizeDialogCloseConfirmation(this.dialogState.dialogOptions?.confirmCloseWhenDirty);
-        // Create dialog configuration
         const dialogConfig = {
             title: this.dialogState.dialogOptions?.title || '',
-            //TODO: why we need message?
-            //message: this.dialogState.dialogOptions?.message,
             context: initialContext,
             definition: dialogNode,
             metadata: this.dialogState.dialogOptions.metadata,
@@ -1782,21 +1734,17 @@ class DialogContainerBuilder {
             onAction: this.dialogState.dialogOptions?.onAction,
             confirmCloseWhenDirty,
         };
-        // 
         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) => {
+        return new Promise((resolve) => {
             let flag = false;
-            await this.popupService.open(AXPDialogRendererComponent, {
+            const opened = this.popupService.open(component, {
                 title: dialogConfig.title,
                 size: this.dialogState.dialogOptions?.size || 'md',
                 closeButton: this.dialogState.dialogOptions?.closeButton || false,
                 closeOnBackdropClick: false,
                 draggable: this.dialogState.dialogOptions?.draggable ?? true,
-                panelClass: [AXP_DIALOG_REVEAL_PANEL_CLASS],
-                animation: AXP_DIALOG_REVEAL_POPUP_ANIMATION,
                 data: {
                     config: dialogConfig,
                     callBack: (result) => {
@@ -1805,9 +1753,17 @@ class DialogContainerBuilder {
                     },
                 },
             });
-            if (!flag) {
-                resolve(createDismissedDialogRef());
-            }
+            notifyShown();
+            options?.onShown?.();
+            void Promise.resolve(opened).then(() => {
+                if (!flag) {
+                    resolve(createDismissedDialogRef());
+                }
+            }, () => {
+                if (!flag) {
+                    resolve(createDismissedDialogRef());
+                }
+            });
         });
     }
 }
@@ -2669,121 +2625,8 @@ function shouldDeferDialogShortcutsToNestedOverlay(document, dialogHost, overlay
     return shouldDeferEscapeToNestedOverlayFromDom(document, dialogHost);
 }
 
-//#endregion
-//#region ----- Constants -----
-const SHELL_MS = 90;
-const MIN_MS = 80;
-const MAX_MS = 5000;
-const FIELD_MS = 7;
-const HEAVY_MS = 70;
-const CONTAINER_MS = 2;
-const TAB_MS = 3;
-const NETWORK_FIRST_MS = 200;
-const NETWORK_EACH_MS = 20;
-/** Widgets that fetch on init without a `dataSource` option. */
-const FETCH_WITHOUT_DATASOURCE = new Set([
-    AXPWidgetsList.Editors.LookupBox,
-    AXPWidgetsList.Editors.TagEditor,
-    AXPWidgetsList.Editors.EntityCategory,
-    AXPWidgetsList.Editors.MultiSourceSelector,
-    AXPWidgetsList.Entity.EntityList,
-]);
-/** Widgets that are expensive to instantiate even with no network. */
-const HEAVY_RENDER = new Set([
-    AXPWidgetsList.Editors.RichText,
-    AXPWidgetsList.Advanced.CodeEditor,
-    AXPWidgetsList.Editors.InlineDataTable,
-    AXPWidgetsList.Editors.SignatureBox,
-    AXPWidgetsList.Editors.MapBox,
-    AXPWidgetsList.Editors.FileViewer,
-    AXPWidgetsList.Editors.QueryBuilder,
-    AXPWidgetsList.Editors.SkillMatrix,
-    AXPWidgetsList.Editors.ResponsibilitiesMatrix,
-    AXPWidgetsList.Editors.RiskMatrix,
-    AXPWidgetsList.Editors.ControlHierarchyDiagram,
-]);
-//#endregion
-//#region ----- Estimate -----
-/**
- * Static walk of a dialog widget tree. Predicts how long the first paint will take
- * so the renderer can decide whether to show the loading dialog immediately.
- */
-function estimateDialogRenderMs(node, kindOf) {
-    const acc = { structural: 0, dataBound: 0 };
-    walk(node, acc, kindOf);
-    const network = acc.dataBound === 0 ? 0 : NETWORK_FIRST_MS + (acc.dataBound - 1) * NETWORK_EACH_MS;
-    const raw = SHELL_MS + acc.structural + network;
-    return Math.min(MAX_MS, Math.max(MIN_MS, raw));
-}
-//#endregion
-//#region ----- Walk -----
-function walk(node, acc, kindOf) {
-    if (!node || node.visible === false) {
-        return;
-    }
-    if (node.type === AXPWidgetsList.Layouts.TabsetLayout) {
-        chargeNode(node, acc, kindOf);
-        const children = node.children ?? [];
-        if (children.length > 0) {
-            walk(children[0], acc, kindOf);
-        }
-        for (let index = 1; index < children.length; index++) {
-            acc.structural += TAB_MS;
-        }
-        return;
-    }
-    if (node.type === AXPWidgetsCatalog.stepWizard) {
-        chargeNode(node, acc, kindOf);
-        for (const content of wizardStepContents(node)) {
-            walk(content, acc, kindOf);
-        }
-        for (const child of node.children ?? []) {
-            walk(child, acc, kindOf);
-        }
-        return;
-    }
-    chargeNode(node, acc, kindOf);
-    for (const child of node.children ?? []) {
-        walk(child, acc, kindOf);
-    }
-}
-function chargeNode(node, acc, kindOf) {
-    if (HEAVY_RENDER.has(node.type)) {
-        acc.structural += HEAVY_MS;
-    }
-    else if (kindOf(node.type) === 'container') {
-        acc.structural += CONTAINER_MS;
-    }
-    else {
-        acc.structural += FIELD_MS;
-    }
-    if (isNetworkBound(node)) {
-        acc.dataBound += 1;
-    }
-}
-function isNetworkBound(node) {
-    if (FETCH_WITHOUT_DATASOURCE.has(node.type)) {
-        return true;
-    }
-    const raw = node.options?.['dataSource'];
-    return typeof raw === 'string' || (!!raw && typeof raw === 'object' && 'id' in raw);
-}
-function wizardStepContents(node) {
-    const steps = node.options
-        ?.definition?.steps;
-    if (!Array.isArray(steps)) {
-        return [];
-    }
-    return steps.flatMap((step) => (step.content ? [step.content] : []));
-}
-//#endregion
-
 /** Debounce after widget count stabilizes before re-evaluating footer actions. */
 const DIALOG_WIDGET_COUNT_STABLE_DELAY_MS = 350;
-/** Safety net so the dialog is never left hidden when the widget debounce does not fire. */
-const DIALOG_REVEAL_FALLBACK_MS = 3500;
-/** Fast dialogs skip the loading overlay unless they overrun this wait. */
-const LOADING_DIALOG_SHOW_THRESHOLD_MS = 400;
 class AXPDialogRendererComponent extends AXBasePageComponent {
     constructor() {
         super(...arguments);
@@ -2798,21 +2641,12 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
         this.document = inject(DOCUMENT);
         this.host = inject((ElementRef));
         this.shortcutRegistry = inject(AXPKeyboardShortcutRegistry);
-        this.loadingDialog = inject(AXLoadingDialogService);
-        this.widgetRegistry = inject(AXPWidgetRegistryService);
-        this.debug = inject(AXPDebugService);
         /** Ensures `show()` resolves once when the dialog closes (footer action or header close). */
         this.callbackInvoked = false;
         /** Skips dirty confirmation on the next {@link onClosing} (successful submit / programmatic close). */
         this.skipNextOnClosingDirtyCheck = false;
         /** Blocks re-entrant {@link onClosing} while the first close gate is still resolving. */
         this.closeGateInProgress = false;
-        /** Predicted first-paint cost from the widget tree, used for the loading decision and debug trace. */
-        this.estimatedRenderMs = 0;
-        /** `performance.now()` at `ngOnInit`, for estimated-vs-measured traces. */
-        this.revealStartedAt = 0;
-        /** Keeps the reveal pipeline to a single run (widget debounce and fallback timer both call it). */
-        this.revealRequested = false;
         this.destroyRef = inject(DestroyRef);
         this.context = signal({}, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []));
@@ -2860,9 +2694,8 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
             if (this.debounceTimer) {
                 clearTimeout(this.debounceTimer);
             }
-            this.debounceTimer = setTimeout(async () => {
-                await this.aggregateAndEvaluateActions();
-                void this.revealWhenLayoutStable();
+            this.debounceTimer = setTimeout(() => {
+                void this.aggregateAndEvaluateActions();
             }, DIALOG_WIDGET_COUNT_STABLE_DELAY_MS);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#widgetActionsEffect" }] : /* istanbul ignore next */ []));
@@ -2877,24 +2710,9 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
     //#endregion
     //#region ----   Lifecycle   ----
     ngOnInit() {
-        this.revealStartedAt = performance.now();
-        this.estimatedRenderMs = estimateDialogRenderMs(this.config?.definition, (type) => this.widgetRegistry.getOptional(type)?.type);
-        if (this.estimatedRenderMs >= LOADING_DIALOG_SHOW_THRESHOLD_MS) {
-            this.revealLoading = this.openRevealLoading();
-        }
-        else {
-            this.revealLoadingTimer = setTimeout(() => {
-                this.revealLoading = this.openRevealLoading();
-            }, LOADING_DIALOG_SHOW_THRESHOLD_MS);
-        }
         const initialContext = this.config?.context || {};
         this.context.set(initialContext);
         void this.invokeLayoutContextChangedHooks();
-        const revealFallbackTimer = setTimeout(() => void this.revealWhenLayoutStable(), DIALOG_REVEAL_FALLBACK_MS);
-        this.destroyRef.onDestroy(() => {
-            clearTimeout(revealFallbackTimer);
-            void this.closeRevealLoading();
-        });
     }
     //#endregion
     //#region ----   Keyboard Shortcuts   ----
@@ -3394,40 +3212,6 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
             popFooter.append(footer);
         });
     }
-    /**
-     * The popup box is on screen before widgets and footer chrome are laid out, so it is held
-     * hidden by the reveal panel class. Wait for the shell to stop resizing, then fade it in.
-     */
-    async revealWhenLayoutStable() {
-        if (this.revealRequested) {
-            return;
-        }
-        this.revealRequested = true;
-        await waitForDialogPopupLayoutStable(this.host.nativeElement);
-        await this.closeRevealLoading();
-        markDialogRevealReady(this.host.nativeElement);
-        const elapsed = performance.now() - this.revealStartedAt;
-        this.debug.trace('dialog-reveal', 'render-cost', 'estimated vs measured', () => ({
-            estimatedMs: this.estimatedRenderMs,
-            measuredMs: Math.round(elapsed - AXP_DIALOG_REVEAL_RESIZE_STABLE_MS),
-            loadingShown: !!this.revealLoading,
-        }));
-    }
-    async openRevealLoading() {
-        const [title, text] = await Promise.all([
-            this.translationService.translateAsync('@general:state-message.loading.title'),
-            this.translationService.translateAsync('@general:state-message.loading.description'),
-        ]);
-        return this.loadingDialog.show({ title, text, mode: 'indeterminate' });
-    }
-    async closeRevealLoading() {
-        if (this.revealLoadingTimer) {
-            clearTimeout(this.revealLoadingTimer);
-            this.revealLoadingTimer = undefined;
-        }
-        const ref = await this.revealLoading?.catch(() => undefined);
-        ref?.close();
-    }
     async collectWidgetActions() {
         if (!this.widgetCoreService)
             return [];