@fundamental-ngx/core 0.64.4-rc.2 → 0.64.4

package/fesm2022/fundamental-ngx-core-popover.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, Directive, inject, TemplateRef, HostBinding, input, viewChild, linkedSignal, output, ElementRef, Renderer2, afterNextRender, ChangeDetectionStrategy, ViewEncapsulation, Component, DestroyRef, InjectionToken, effect, ViewChild, NgModule, EventEmitter, Injector, computed, isSignal, Injectable, Input, model, booleanAttribute, ViewContainerRef, contentChild } from '@angular/core';
+import { signal, Directive, inject, TemplateRef, HostBinding, input, viewChild, linkedSignal, output, ElementRef, Renderer2, afterNextRender, ChangeDetectionStrategy, ViewEncapsulation, Component, DestroyRef, InjectionToken, effect, ViewChild, NgModule, EventEmitter, Injector, NgZone, computed, isSignal, Injectable, Input, model, booleanAttribute, ViewContainerRef, contentChild } from '@angular/core';
 import * as i1 from '@angular/cdk/a11y';
 import { CdkTrapFocus, A11yModule } from '@angular/cdk/a11y';
 import { ESCAPE, DOWN_ARROW } from '@angular/cdk/keycodes';
@@ -724,8 +724,16 @@ class PopoverService {
         this._viewportRuler = inject(ViewportRuler);
         /** @hidden */
         this._injector = inject(Injector);
-        /** @hidden Watches DOM mutations within the scroll container when the popover is open to reposition after layout shifts (e.g. display:none on siblings). */
+        /** @hidden Watches document.body while open for mutations that may affect the overlay's position. */
         this._ancestorMutationObserver = null;
+        /** @hidden Pending layout measurement frame, cancelled when its open session ends. */
+        this._layoutShiftAnimationFrame = null;
+        /** @hidden Session identity used to reject callbacks retained after close, deactivate or reopen. */
+        this._layoutShiftObserverSession = 0;
+        /** @hidden Geometry captured after positioning, used to suppress updates for unchanged layout. */
+        this._layoutShiftGeometry = null;
+        /** @hidden */
+        this._ngZone = inject(NgZone);
         /** @hidden Flag to prevent infinite loop when programmatically opening/closing */
         this._programmaticChange = false;
         /** @hidden Computed signal for body-related config to track dependencies */
@@ -778,8 +786,7 @@ class PopoverService {
             this._clearHoverCloseTimer();
             this._removeOverlayHoverListeners();
             this._removeTriggerListeners();
-            this._ancestorMutationObserver?.disconnect();
-            this._ancestorMutationObserver = null;
+            this._stopLayoutShiftObserver();
             if (this._overlayRef) {
                 this._overlayRef.detach();
                 this._overlayRef.dispose();
@@ -820,8 +827,9 @@ class PopoverService {
     }
     /** Closes the popover. */
     close(focusActiveElement = true) {
-        this._ancestorMutationObserver?.disconnect();
-        this._ancestorMutationObserver = null;
+        // Disposal emits a detachment; don't close again and override the focus decision.
+        this._stopCloseListening$.next();
+        this._stopLayoutShiftObserver();
         this._clearHoverCloseTimer();
         this._removeOverlayHoverListeners();
         if (this._overlayRef) {
@@ -836,7 +844,6 @@ class PopoverService {
         if ((!this._overlayRef || !this._overlayRef.hasAttached()) && !this.disabled() && this._triggerElement) {
             const position = this._getPositionStrategy();
             this._overlayRef = this._overlay.create(this._getOverlayConfig(position));
-            this._startAncestorResizeObserver();
             if (this._placementContainerValue) {
                 const placementElement = this._placementContainerValue instanceof ElementRef
                     ? this._placementContainerValue.nativeElement
@@ -861,6 +868,7 @@ class PopoverService {
             this._onLoad.next(this._getPopoverBody()._elementRef);
             // Update position - this will trigger the positionChanges observable
             this._overlayRef.updatePosition();
+            this._startLayoutShiftObserver();
         }
     }
     /** method updating template or text inside rendered PopoverBody */
@@ -906,10 +914,12 @@ class PopoverService {
         const refPosition = this._getPositionStrategy(positions);
         this._listenForPositionChange(refPosition.positionChanges);
         this._overlayRef.updatePositionStrategy(refPosition);
+        this._resetLayoutShiftGeometry();
     }
     /** Method called to refresh position of opened popover */
     refreshPosition() {
         this._overlayRef?.updatePosition();
+        this._resetLayoutShiftGeometry();
     }
     /** Temporary sets the ignoring of the event triggers. */
     setIgnoreTriggers(ignore) {
@@ -1029,6 +1039,7 @@ class PopoverService {
      * to enable it back in the future by initialise()
      */
     deactivate() {
+        this._stopLayoutShiftObserver();
         // Close the popover if it's open
         if (this.isOpen()) {
             this.close();
@@ -1352,64 +1363,140 @@ class PopoverService {
     }
     /**
      * @hidden
-     * Starts a MutationObserver on the nearest scrollable ancestor of the trigger element (falling
-     * back to document.body) to detect layout shifts that would invalidate the overlay position.
-     * Two mutation types are observed within the subtree:
-     *  - `childList`: catches elements being added to or removed from the DOM (e.g. a banner/toast
-     *    that is fully removed after its timer expires).
-     *  - `attributes` with `attributeFilter: ['style', 'class']`: catches visibility toggling via
-     *    CSS (e.g. `display: none` applied inline or through a utility class, as the
-     *    `fd-message-strip` autoDismiss directive does).
-     * The callback is debounced through `requestAnimationFrame` so that rapid batched mutations
-     * (Angular rendering a whole subtree at once) only trigger a single `updatePosition()` call.
+     * Starts a MutationObserver on document.body for DOM changes that may invalidate the
+     * overlay position — including mutations in elements outside the trigger's
+     * nearest scroll container (e.g. a collapsible header above a table pushing the trigger down).
+     *
+     * Observed mutation types:
+     *  - `childList`: elements added/removed from the DOM (Angular `@if`, ngIf, toast dismissed).
+     *  - `attributes` with `attributeFilter: ['style', 'class']`: visibility toggled via CSS.
+     *
+     * Starts after attachment and initial positioning to capture the initial geometry baseline.
+     * The observer and its requestAnimationFrame pipeline are registered outside Angular so
+     * their work does not schedule zone-driven change detection. Own-host mutations are ignored;
+     * other mutations are coalesced into at most one geometry measurement per frame.
+     *
+     * Calls updatePosition() only when the captured origin, overlay size, viewport or fill-mode
+     * trigger size changes, then captures the resulting geometry as the next baseline. This
+     * lets unchanged-layout mutation feedback settle while preserving later genuine shifts.
+     * There is no fixed update limit: a layout that keeps changing remains eligible for one
+     * reposition per frame. Session and overlay identity checks reject stale callbacks.
      */
-    _startAncestorResizeObserver() {
-        const trigger = this._triggerHtmlElement;
-        if (!trigger) {
+    _startLayoutShiftObserver() {
+        const overlayRef = this._overlayRef;
+        if (!this._triggerElement || !overlayRef?.hasAttached()) {
             return;
         }
-        let animationFrame = null;
-        const scheduleUpdate = (records) => {
-            // Skip self-caused mutations, else we loop: updatePosition() writes `style` on the
-            // overlay's position wrapper (.cdk-overlay-connected-position-bounding-box), which this
-            // observer would see and react to. Test against .cdk-overlay-container, not
-            // overlayElement -- the wrapper is overlayElement's parent, so it isn't contained by it.
-            const overlayEl = this._overlayRef?.overlayElement;
-            const overlayContainer = overlayEl?.closest('.cdk-overlay-container') ?? overlayEl;
-            if (overlayContainer && records.every((record) => overlayContainer.contains(record.target))) {
-                return;
-            }
-            if (animationFrame !== null) {
-                return;
-            }
-            animationFrame = window.requestAnimationFrame(() => {
-                animationFrame = null;
-                this._overlayRef?.updatePosition();
+        this._stopLayoutShiftObserver();
+        const session = ++this._layoutShiftObserverSession;
+        this._layoutShiftGeometry = this._getLayoutShiftGeometry(overlayRef);
+        this._ngZone.runOutsideAngular(() => {
+            const scheduleUpdate = (records) => {
+                // Skip self-caused mutations: updatePosition() writes `style` on hostElement
+                // (the CDK position bounding-box) and its descendants. Using hostElement as the
+                // scope boundary covers both the default case (.cdk-overlay-container) and the
+                // placementContainer case where the host is moved outside that container.
+                if (records.every((record) => overlayRef.hostElement.contains(record.target))) {
+                    return;
+                }
+                if (this._layoutShiftAnimationFrame !== null) {
+                    return;
+                }
+                this._layoutShiftAnimationFrame = window.requestAnimationFrame(() => {
+                    if (session !== this._layoutShiftObserverSession || this._overlayRef !== overlayRef) {
+                        return;
+                    }
+                    this._layoutShiftAnimationFrame = null;
+                    if (!overlayRef.hasAttached()) {
+                        return;
+                    }
+                    const geometry = this._getLayoutShiftGeometry(overlayRef);
+                    if (this._sameLayoutShiftGeometry(this._layoutShiftGeometry, geometry)) {
+                        return;
+                    }
+                    overlayRef.updatePosition();
+                    this._layoutShiftGeometry = this._getLayoutShiftGeometry(overlayRef);
+                });
+            };
+            this._ancestorMutationObserver = new MutationObserver(scheduleUpdate);
+            this._ancestorMutationObserver.observe(document.body, {
+                subtree: true,
+                childList: true,
+                attributes: true,
+                attributeFilter: ['style', 'class']
             });
-        };
-        this._ancestorMutationObserver = new MutationObserver(scheduleUpdate);
-        const container = this._findScrollableAncestor(trigger);
-        this._ancestorMutationObserver.observe(container, {
-            subtree: true,
-            childList: true,
-            attributes: true,
-            attributeFilter: ['style', 'class']
         });
     }
     /**
      * @hidden
-     * Returns the nearest scrollable ancestor, or document.body when none is found.
+     * Ends the current observer session, disconnects observation and cancels its pending frame.
+     * Invalidates session identity before clearing geometry so a retained callback cannot
+     * reposition a replacement overlay or clear its pending frame.
      */
-    _findScrollableAncestor(el) {
-        let parent = el.parentElement;
-        while (parent && parent !== document.body) {
-            const { overflow, overflowX, overflowY } = getComputedStyle(parent);
-            if (/auto|scroll|overlay/.test(overflow + overflowX + overflowY)) {
-                return parent;
-            }
-            parent = parent.parentElement;
+    _stopLayoutShiftObserver() {
+        this._layoutShiftObserverSession++;
+        this._ancestorMutationObserver?.disconnect();
+        this._ancestorMutationObserver = null;
+        if (this._layoutShiftAnimationFrame !== null) {
+            window.cancelAnimationFrame(this._layoutShiftAnimationFrame);
+            this._layoutShiftAnimationFrame = null;
+        }
+        this._layoutShiftGeometry = null;
+    }
+    /**
+     * @hidden
+     * Captures the attached overlay's geometry after refreshPosition() or applyNewPosition().
+     * Subsequent mutations are compared against that updated baseline, avoiding a redundant
+     * observer-driven reposition for layout already handled by the explicit operation.
+     */
+    _resetLayoutShiftGeometry() {
+        if (this._overlayRef?.hasAttached()) {
+            this._layoutShiftGeometry = this._getLayoutShiftGeometry(this._overlayRef);
         }
-        return document.body;
+    }
+    /**
+     * @hidden
+     * Captures the effective origin (appendTo or trigger), overlay size and viewport geometry.
+     * Includes the trigger's size in fill mode, where it can differ from the positioning origin.
+     * Overlay x/y are positioning outputs and are excluded to avoid treating position writes
+     * as new layout inputs. The snapshot does not track placement-container geometry.
+     */
+    _getLayoutShiftGeometry(overlayRef) {
+        const origin = this.appendTo() ?? this._triggerHtmlElement;
+        const originElement = origin instanceof ElementRef ? origin.nativeElement : origin;
+        const originRect = originElement.getBoundingClientRect();
+        const overlayRect = overlayRef.overlayElement.getBoundingClientRect();
+        const viewportRect = this._viewportRuler.getViewportRect();
+        const triggerRect = this.fillControlMode() ? this._triggerHtmlElement.getBoundingClientRect() : null;
+        return {
+            originX: originRect.x,
+            originY: originRect.y,
+            originWidth: originRect.width,
+            originHeight: originRect.height,
+            overlayWidth: overlayRect.width,
+            overlayHeight: overlayRect.height,
+            viewportTop: viewportRect.top,
+            viewportLeft: viewportRect.left,
+            viewportWidth: viewportRect.width,
+            viewportHeight: viewportRect.height,
+            triggerWidth: triggerRect?.width ?? null,
+            triggerHeight: triggerRect?.height ?? null
+        };
+    }
+    /** @hidden Compares captured geometry; a missing previous snapshot requires positioning. */
+    _sameLayoutShiftGeometry(previous, current) {
+        return (previous?.originX === current.originX &&
+            previous.originY === current.originY &&
+            previous.originWidth === current.originWidth &&
+            previous.originHeight === current.originHeight &&
+            previous.overlayWidth === current.overlayWidth &&
+            previous.overlayHeight === current.overlayHeight &&
+            previous.viewportTop === current.viewportTop &&
+            previous.viewportLeft === current.viewportLeft &&
+            previous.viewportWidth === current.viewportWidth &&
+            previous.viewportHeight === current.viewportHeight &&
+            previous.triggerWidth === current.triggerWidth &&
+            previous.triggerHeight === current.triggerHeight);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PopoverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PopoverService }); }