@acorex-platform/framework-client 0.0.38 → 0.0.48

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, normalizeDialogActionShortcutChord, isDialogShortcutAllowedInEditableField, resolveConfiguredFooterActionShortcuts, AXPComponentSlotModule, AXPContextStore } 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 { provideCommandSetups, AXPCommandService } from '@acorex-platform/framework-client/runtime';
-import { AXP_PREVIEW_WIDGET_FIELD_COMMAND_KEY, createRandomUuid, AXPKeyboardShortcutPriority } from '@acorex-platform/framework-shared/core';
+import { toAxpGridItemWidgetOptions, AXP_PREVIEW_WIDGET_FIELD_COMMAND_KEY, AXPWidgetsList, AXPWidgetsCatalog, 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,6 +22,7 @@ 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';
@@ -375,6 +376,83 @@ 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
@@ -803,29 +881,8 @@ class LayoutContainerMixin extends BaseContainerMixin {
         if (typeof value === 'number') {
             this.containerState.options.colSpan = value;
         }
-        else if (value) {
-            const positions = value.positions;
-            if (positions) {
-                const placement = positions?.lg ?? positions?.xl ?? positions?.xxl ?? positions?.md ?? positions?.sm;
-                if (placement) {
-                    const opts = this.containerState.options;
-                    if (placement.colSpan != null)
-                        opts.colSpan = placement.colSpan;
-                    if (placement.colStart != null)
-                        opts.colStart = placement.colStart;
-                    if (placement.colEnd != null)
-                        opts.colEnd = placement.colEnd;
-                    if (placement.rowSpan != null)
-                        opts.rowSpan = placement.rowSpan;
-                    if (placement.rowStart != null)
-                        opts.rowStart = placement.rowStart;
-                    if (placement.rowEnd != null)
-                        opts.rowEnd = placement.rowEnd;
-                    const layoutOrder = value.order ?? placement.order;
-                    if (layoutOrder != null)
-                        opts.order = layoutOrder;
-                }
-            }
+        else if (value?.positions) {
+            Object.assign(this.containerState.options, toAxpGridItemWidgetOptions(value));
         }
         return this;
     }
@@ -1121,31 +1178,7 @@ function mergeAXPGridContainerOptions(prev, patch) {
     return next;
 }
 function toGridItemOptions(layoutOptions) {
-    if (!layoutOptions?.positions)
-        return { colSpan: 12 };
-    const positions = layoutOptions.positions;
-    const placement = positions['lg'] ?? positions['xl'] ?? positions['xxl'] ?? positions['md'] ?? positions['sm'];
-    if (!placement)
-        return { colSpan: 12 };
-    const opts = {};
-    if (placement['colSpan'] != null)
-        opts['colSpan'] = placement['colSpan'];
-    if (placement['colStart'] != null)
-        opts['colStart'] = placement['colStart'];
-    if (placement['colEnd'] != null)
-        opts['colEnd'] = placement['colEnd'];
-    if (placement['rowSpan'] != null)
-        opts['rowSpan'] = placement['rowSpan'];
-    if (placement['rowStart'] != null)
-        opts['rowStart'] = placement['rowStart'];
-    if (placement['rowEnd'] != null)
-        opts['rowEnd'] = placement['rowEnd'];
-    const layoutOrder = layoutOptions.order ?? placement['order'];
-    if (layoutOrder != null)
-        opts['order'] = layoutOrder;
-    if (Object.keys(opts).length === 0)
-        opts['colSpan'] = 12;
-    return opts;
+    return toAxpGridItemWidgetOptions(layoutOptions);
 }
 class GridContainerBuilder extends WidgetContainerMixin {
     constructor() {
@@ -1640,6 +1673,9 @@ class DialogContainerBuilder {
     setCloseButton(closeButton) {
         return this.setOptions({ closeButton });
     }
+    setDraggable(draggable) {
+        return this.setOptions({ draggable });
+    }
     setContext(context) {
         return this.setOptions({ context });
     }
@@ -1761,7 +1797,9 @@ class DialogContainerBuilder {
                 size: this.dialogState.dialogOptions?.size || 'md',
                 closeButton: this.dialogState.dialogOptions?.closeButton || false,
                 closeOnBackdropClick: false,
-                draggable: false,
+                draggable: this.dialogState.dialogOptions?.draggable ?? true,
+                panelClass: [AXP_DIALOG_REVEAL_PANEL_CLASS],
+                animation: AXP_DIALOG_REVEAL_POPUP_ANIMATION,
                 data: {
                     config: dialogConfig,
                     callBack: (result) => {
@@ -2634,8 +2672,121 @@ 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);
@@ -2650,12 +2801,21 @@ 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 */ []));
@@ -2668,6 +2828,8 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
         ...(ngDevMode ? [{ debugName: "footerPrefix" }] : /* istanbul ignore next */ []));
         this.footerSuffix = signal([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "footerSuffix" }] : /* istanbul ignore next */ []));
+        this.hasDefaultFooterActions = computed(() => this.footerPrefix().length > 0 || this.footerSuffix().length > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasDefaultFooterActions" }] : /* istanbul ignore next */ []));
         /**
          * Correlate layout context snapshots for distributed hooks (`layout-builder.dialog.context-changed`).
          */
@@ -2694,14 +2856,16 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
                 const renderer = this.layoutRenderer();
                 const container = renderer?.getContainer();
                 this.widgetCoreService = container?.builderService ?? null;
-                return;
             }
-            this.widgetCoreService.registeredWidgetsCount();
+            else {
+                this.widgetCoreService.registeredWidgetsCount();
+            }
             if (this.debounceTimer) {
                 clearTimeout(this.debounceTimer);
             }
-            this.debounceTimer = setTimeout(() => {
-                this.aggregateAndEvaluateActions();
+            this.debounceTimer = setTimeout(async () => {
+                await this.aggregateAndEvaluateActions();
+                void this.revealWhenLayoutStable();
             }, DIALOG_WIDGET_COUNT_STABLE_DELAY_MS);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#widgetActionsEffect" }] : /* istanbul ignore next */ []));
@@ -2716,9 +2880,24 @@ 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   ----
@@ -3196,6 +3375,61 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
         const suffix = visible.filter((a) => (a.zone ?? 'footer') === 'footer' && (a.placement ?? 'suffix') === 'suffix');
         this.footerPrefix.set(prefix);
         this.footerSuffix.set(suffix);
+        if (prefix.length > 0 || suffix.length > 0) {
+            this.scheduleRelocateFooterToPopupChrome();
+        }
+    }
+    /**
+     * AX popup lifts `:scope > ax-footer` once after first paint. Widget footer
+     * actions can appear later — move the footer into chrome when it is created.
+     */
+    scheduleRelocateFooterToPopupChrome() {
+        setTimeout(() => {
+            const host = this.host.nativeElement;
+            const footer = host.querySelector(':scope > ax-footer');
+            if (!(footer instanceof HTMLElement)) {
+                return;
+            }
+            const popFooter = host.closest('.ax-popup')?.querySelector('.ax-popup-footer-container');
+            if (!(popFooter instanceof HTMLElement) || popFooter.contains(footer)) {
+                return;
+            }
+            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)
@@ -3323,9 +3557,10 @@ class AXPDialogRendererComponent extends AXBasePageComponent {
       </axp-layout-renderer>
     </div>
 
-    <!-- Custom footer slot: if it has content, default footer is hidden -->
+    <!-- Custom footer slot: if it has content, default footer is not rendered -->
     <axp-component-slot name="dialog-footer" #footerSlot="slot" [context]="context()"></axp-component-slot>
-    @if (footerSlot.isEmpty()) {
+    <!-- ----- Default popup footer only when there is at least one action ----- -->
+    @if (footerSlot.isEmpty() && hasDefaultFooterActions()) {
       <ax-footer>
         <ax-prefix>
           <axp-component-slot name="dialog-footer-prefix" [context]="context()"></axp-component-slot>
@@ -3406,9 +3641,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
       </axp-layout-renderer>
     </div>
 
-    <!-- Custom footer slot: if it has content, default footer is hidden -->
+    <!-- Custom footer slot: if it has content, default footer is not rendered -->
     <axp-component-slot name="dialog-footer" #footerSlot="slot" [context]="context()"></axp-component-slot>
-    @if (footerSlot.isEmpty()) {
+    <!-- ----- Default popup footer only when there is at least one action ----- -->
+    @if (footerSlot.isEmpty() && hasDefaultFooterActions()) {
       <ax-footer>
         <ax-prefix>
           <axp-component-slot name="dialog-footer-prefix" [context]="context()"></axp-component-slot>