ng-primitives 0.112.3 → 0.114.0

package/fesm2022/ng-primitives-portal.mjs

@@ -1,15 +1,14 @@
 import { coerceNumberProperty, coerceCssPixelValue } from '@angular/cdk/coercion';
 import { isNil, isObject, isFunction, injectDisposables, uniqueId, safeTakeUntilDestroyed } from 'ng-primitives/utils';
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { ViewportRuler } from '@angular/cdk/overlay';
+import { ViewportRuler } from '@angular/cdk/scrolling';
 import { DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, inject, ApplicationRef, TemplateRef, Injector, DestroyRef, signal, computed, runInInjectionContext } from '@angular/core';
+import { Injectable, inject, NgZone, InjectionToken, ApplicationRef, TemplateRef, Injector, DestroyRef, signal, computed, runInInjectionContext } from '@angular/core';
 import { ControlContainer } from '@angular/forms';
 import { getOverflowAncestors, autoUpdate, offset, flip, shift, size, arrow, computePosition } from '@floating-ui/dom';
 import { setupExitAnimation, explicitEffect, fromResizeEvent, injectElementRef } from 'ng-primitives/internal';
-import { Subject, fromEvent } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
+import { Subject } from 'rxjs';
 import { VERSION } from '@angular/cdk';
 import { ComponentPortal, DomPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
 import { createPrimitive, controlled, onDestroy, styleBinding, dataBinding } from 'ng-primitives/state';
@@ -141,6 +140,316 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+/**
+ * Singleton registry that tracks all visible overlays in open order and
+ * provides centralized dismiss routing (outside-click and escape-key).
+ *
+ * Document listeners are attached when the first overlay registers and
+ * detached when the last deregisters, avoiding permanent global listeners.
+ * @internal
+ */
+class NgpOverlayRegistry {
+    constructor() {
+        this.document = inject(DOCUMENT);
+        this.ngZone = inject(NgZone);
+        /** Ordered list of visible overlay entries (oldest first, newest/topmost last) */
+        this.entries = [];
+        /** Set of overlay IDs currently evaluating an async dismiss guard */
+        this.pendingGuardIds = new Set();
+        /** Tracks the pointerdown target for CDK-compatible outside pointer event dispatch */
+        this.pointerDownTarget = null;
+    }
+    /**
+     * Register an overlay as visible. The entry is appended to the end of the list
+     * (making it the topmost overlay). Attaches document listeners if this is the
+     * first entry.
+     */
+    register(entry) {
+        // Avoid double-registration
+        if (this.entries.some(e => e.id === entry.id)) {
+            return;
+        }
+        this.entries.push(entry);
+        // Attach listeners when the first overlay registers
+        if (this.entries.length === 1) {
+            this.attachListeners();
+        }
+    }
+    /**
+     * Remove an overlay from the registry.
+     * Detaches document listeners if no entries remain.
+     */
+    deregister(id) {
+        const index = this.entries.findIndex(e => e.id === id);
+        if (index !== -1) {
+            this.entries.splice(index, 1);
+            this.pendingGuardIds.delete(id);
+        }
+        // Detach listeners when the last overlay deregisters
+        if (this.entries.length === 0) {
+            this.detachListeners();
+        }
+    }
+    /**
+     * Close all descendants of the given overlay.
+     * Called by NgpOverlay when it hides to cascade the close to children.
+     */
+    closeDescendants(id) {
+        const descendants = this.getDescendants(id);
+        // Close deepest first to avoid re-entrant issues
+        for (let i = descendants.length - 1; i >= 0; i--) {
+            descendants[i].overlay.hideImmediate();
+        }
+    }
+    /**
+     * Get all registered entries.
+     */
+    getEntries() {
+        return this.entries;
+    }
+    /**
+     * Get the topmost (most recently opened) overlay entry, or null if none.
+     */
+    getTopmost() {
+        return this.entries.length > 0 ? this.entries[this.entries.length - 1] : null;
+    }
+    /**
+     * Find the overlay whose elements contain the given DOM element.
+     * Returns the ID of the most recently opened (topmost) containing overlay, or null.
+     */
+    findContainingOverlay(element) {
+        // Walk from topmost to oldest so we find the nearest containing overlay
+        for (let i = this.entries.length - 1; i >= 0; i--) {
+            const entry = this.entries[i];
+            const elements = entry.getElements();
+            if (elements.some(el => el.contains(element))) {
+                return entry.id;
+            }
+        }
+        return null;
+    }
+    /**
+     * Check whether overlay `ancestorId` is an ancestor of overlay `descendantId`
+     * by walking the parentId chain.
+     */
+    isAncestorOf(ancestorId, descendantId) {
+        let currentId = descendantId;
+        while (currentId !== null) {
+            const entry = this.entries.find(e => e.id === currentId);
+            if (!entry) {
+                return false;
+            }
+            if (entry.parentId === ancestorId) {
+                return true;
+            }
+            currentId = entry.parentId;
+        }
+        return false;
+    }
+    /**
+     * Get all descendants of the given overlay (children, grandchildren, etc.)
+     * by walking parentId chains of all entries.
+     */
+    getDescendants(id) {
+        const descendants = [];
+        const ancestorIds = new Set([id]);
+        // Walk the list and collect entries whose parentId is in the ancestor set.
+        // Because entries are ordered by open time, a child always appears after its parent.
+        for (const entry of this.entries) {
+            if (entry.parentId !== null && ancestorIds.has(entry.parentId)) {
+                descendants.push(entry);
+                ancestorIds.add(entry.id);
+            }
+        }
+        return descendants;
+    }
+    /**
+     * Attach centralized document listeners for outside-click and escape-key.
+     * Runs outside Angular zone to avoid unnecessary change detection on every
+     * mouse/keyboard event.
+     */
+    attachListeners() {
+        this.ngZone.runOutsideAngular(() => {
+            const onMouseUp = (event) => this.handleOutsideClick(event);
+            const onKeyDown = (event) => this.handleEscapeKey(event);
+            this.document.addEventListener('mouseup', onMouseUp, true);
+            this.document.addEventListener('keydown', onKeyDown, true);
+            this.removeOutsideClickListener = () => this.document.removeEventListener('mouseup', onMouseUp, true);
+            this.removeEscapeKeyListener = () => this.document.removeEventListener('keydown', onKeyDown, true);
+            // CDK-compatible outside pointer event dispatch:
+            // Track pointerdown origin, then emit click/auxclick/contextmenu events
+            // to entries that have an outsidePointerEvents$ subject.
+            const onPointerDown = (event) => {
+                this.pointerDownTarget = this.getComposedTarget(event);
+            };
+            const onPointerEvent = (event) => this.handleOutsidePointerEvent(event);
+            this.document.addEventListener('pointerdown', onPointerDown, true);
+            this.document.addEventListener('click', onPointerEvent, true);
+            this.document.addEventListener('auxclick', onPointerEvent, true);
+            this.document.addEventListener('contextmenu', onPointerEvent, true);
+            this.removeOutsidePointerListeners = () => {
+                this.document.removeEventListener('pointerdown', onPointerDown, true);
+                this.document.removeEventListener('click', onPointerEvent, true);
+                this.document.removeEventListener('auxclick', onPointerEvent, true);
+                this.document.removeEventListener('contextmenu', onPointerEvent, true);
+            };
+        });
+    }
+    /**
+     * Detach centralized document listeners.
+     */
+    detachListeners() {
+        this.removeOutsideClickListener?.();
+        this.removeOutsideClickListener = undefined;
+        this.removeEscapeKeyListener?.();
+        this.removeEscapeKeyListener = undefined;
+        this.removeOutsidePointerListeners?.();
+        this.removeOutsidePointerListeners = undefined;
+        this.pointerDownTarget = null;
+    }
+    /**
+     * Outside-click dismiss: only the topmost overlay responds.
+     */
+    handleOutsideClick(event) {
+        const topmost = this.getTopmost();
+        if (!topmost || this.pendingGuardIds.has(topmost.id)) {
+            return;
+        }
+        // Ignore scrollbar clicks — the click lands outside the viewport's client area.
+        const { clientWidth, clientHeight } = this.document.documentElement;
+        if (clientWidth > 0 &&
+            clientHeight > 0 &&
+            (event.clientX >= clientWidth || event.clientY >= clientHeight)) {
+            return;
+        }
+        // Check if the click is inside the topmost overlay
+        const path = event.composedPath();
+        const isInsideElements = topmost.getElements().some(el => path.includes(el));
+        const isInsideTrigger = path.includes(topmost.triggerElement);
+        const isInsideAnchor = topmost.anchorElement ? path.includes(topmost.anchorElement) : false;
+        if (isInsideElements || isInsideTrigger || isInsideAnchor) {
+            return;
+        }
+        // Derive a proper Element from the composed path
+        const target = path.find((node) => node instanceof Element) ??
+            this.document.documentElement;
+        this.evaluateGuardAndDismiss(topmost.id, topmost.dismissPolicy.outsidePress, target, () => this.ngZone.run(() => topmost.overlay.hide()));
+    }
+    /**
+     * Escape-key dismiss: only the topmost overlay responds.
+     */
+    handleEscapeKey(event) {
+        if (event.key !== 'Escape' || event.isComposing) {
+            return;
+        }
+        const topmost = this.getTopmost();
+        if (!topmost || this.pendingGuardIds.has(topmost.id)) {
+            return;
+        }
+        this.evaluateGuardAndDismiss(topmost.id, topmost.dismissPolicy.escapeKey, event, () => this.ngZone.run(() => topmost.overlay.hide({ origin: 'keyboard', immediate: true })));
+    }
+    /**
+     * CDK-compatible outside pointer event dispatch.
+     * Iterates overlays from topmost to oldest (like CDK's OverlayOutsideClickDispatcher).
+     * For each overlay with an outsidePointerEvents$ subject, emits the event if the
+     * click was outside its elements. Stops iterating when an overlay contains the click.
+     */
+    handleOutsidePointerEvent(event) {
+        const target = this.getComposedTarget(event);
+        // For click events, use the pointerdown origin to handle drag scenarios
+        const origin = event.type === 'click' && this.pointerDownTarget ? this.pointerDownTarget : target;
+        this.pointerDownTarget = null;
+        // Iterate from topmost to oldest (like CDK)
+        const overlays = this.entries.slice();
+        for (let i = overlays.length - 1; i >= 0; i--) {
+            const entry = overlays[i];
+            if (!entry.outsidePointerEvents$?.observers.length) {
+                continue;
+            }
+            const elements = entry.getElements();
+            if (this.containsElement(elements, target) || this.containsElement(elements, origin)) {
+                break;
+            }
+            this.ngZone.run(() => entry.outsidePointerEvents$.next(event));
+        }
+    }
+    /**
+     * Get the composed event target, piercing shadow DOM boundaries.
+     */
+    getComposedTarget(event) {
+        return event.composedPath?.()?.[0] ?? event.target;
+    }
+    /**
+     * Check whether any of the given elements contain the target, piercing shadow DOM.
+     */
+    containsElement(elements, target) {
+        if (!target || !(target instanceof Node)) {
+            return false;
+        }
+        return elements.some(el => {
+            let current = target;
+            while (current) {
+                if (current === el)
+                    return true;
+                current =
+                    typeof ShadowRoot !== 'undefined' && current instanceof ShadowRoot
+                        ? current.host
+                        : current.parentNode;
+            }
+            return false;
+        });
+    }
+    /**
+     * Evaluate a dismiss guard and call the dismiss function if allowed.
+     * Supports boolean values and sync/async guard functions.
+     */
+    evaluateGuardAndDismiss(overlayId, guard, target, dismiss) {
+        if (guard === true || guard === undefined) {
+            dismiss();
+            return;
+        }
+        if (guard === false) {
+            return;
+        }
+        // Function guard → evaluate
+        let result;
+        try {
+            result = guard(target);
+        }
+        catch (error) {
+            console.error('NgpOverlayRegistry: dismiss guard threw', error);
+            return;
+        }
+        if (typeof result === 'boolean') {
+            if (result) {
+                dismiss();
+            }
+        }
+        else {
+            // Promise — track as pending to prevent re-triggering
+            this.pendingGuardIds.add(overlayId);
+            result
+                .then(shouldDismiss => {
+                if (shouldDismiss) {
+                    dismiss();
+                }
+            })
+                .catch(error => {
+                console.error('NgpOverlayRegistry: dismiss guard rejected', error);
+            })
+                .finally(() => {
+                this.pendingGuardIds.delete(overlayId);
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpOverlayRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpOverlayRegistry, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpOverlayRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 const NgpOverlayContextToken = new InjectionToken('NgpOverlayContextToken');
 /**
  * Injects the context for the overlay.
@@ -354,8 +663,8 @@ function createPortal(componentOrTemplate, viewContainerRef, injector, context)
 }
 
 /**
- * This code is largely based on the CDK Overlay's scroll strategy implementation, however it
- * has been modified so that it does not rely on the CDK's global overlay styles.
+ * Originally based on Angular CDK's scroll strategy.
+ * Modified to be fully standalone with no CDK overlay dependency.
  */
 /** Cached result of the check that indicates whether the browser supports scroll behaviors. */
 let scrollBehaviorSupported;
@@ -447,22 +756,21 @@ class BlockScrollStrategy {
             // Note that we don't mutate the property if the browser doesn't support `scroll-behavior`,
             // because it can throw off feature detections in `supportsScrollBehavior` which
             // checks for `'scrollBehavior' in documentElement.style`.
-            if (scrollBehaviorSupported) {
+            if (supportsScrollBehavior()) {
                 htmlStyle.scrollBehavior = bodyStyle.scrollBehavior = 'auto';
             }
             window.scroll(this.previousScrollPosition.left, this.previousScrollPosition.top);
-            if (scrollBehaviorSupported) {
+            if (supportsScrollBehavior()) {
                 htmlStyle.scrollBehavior = previousHtmlScrollBehavior;
                 bodyStyle.scrollBehavior = previousBodyScrollBehavior;
             }
         }
     }
     canBeEnabled() {
-        // Since the scroll strategies can't be singletons, we have to use a global CSS class
-        // (`cdk-global-scrollblock`) to make sure that we don't try to disable global
-        // scrolling multiple times.
         const html = this.document.documentElement;
-        if (html.classList.contains('cdk-global-scrollblock') || this.isEnabled) {
+        if (html.classList.contains('cdk-global-scrollblock') ||
+            html.hasAttribute('data-scrollblock') ||
+            this.isEnabled) {
             return false;
         }
         const viewport = this.viewportRuler.getViewportSize();
@@ -593,10 +901,11 @@ class NgpOverlay {
         this.config = config;
         this.disposables = injectDisposables();
         this.document = inject(DOCUMENT);
-        this.destroyRef = inject(DestroyRef);
         this.viewportRuler = inject(ViewportRuler);
+        this.destroyRef = inject(DestroyRef);
         this.focusMonitor = inject(FocusMonitor);
         this.cooldownManager = inject(NgpOverlayCooldownManager);
+        this.registry = inject(NgpOverlayRegistry);
         /** Access any parent overlays */
         this.parentOverlay = inject(NgpOverlay, { optional: true });
         /** Track child overlays for outside click detection */
@@ -680,56 +989,8 @@ class NgpOverlay {
                 this.hideImmediate();
             }
         });
-        // Register with parent overlay for outside click detection
-        if (this.parentOverlay) {
-            this.parentOverlay.registerChildOverlay(this);
-        }
-        // if there is a parent overlay and it is closed, close this overlay
-        this.parentOverlay?.closing
-            // we add a debounce here to ensure any dom events like clicks are processed first
-            .pipe(debounceTime(0), safeTakeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
-            if (this.isOpen()) {
-                this.hideImmediate();
-            }
-        });
-        // If closeOnOutsideClick is enabled, set up a click listener
-        fromEvent(this.document, 'mouseup', { capture: true })
-            .pipe(safeTakeUntilDestroyed(this.destroyRef))
-            .subscribe(event => {
-            if (!this.config.closeOnOutsideClick) {
-                return;
-            }
-            const overlay = this.portal();
-            if (!overlay || !this.isOpen()) {
-                return;
-            }
-            const path = event.composedPath();
-            const isInsideOverlay = overlay.getElements().some(el => path.includes(el));
-            const isInsideTrigger = path.includes(this.config.triggerElement);
-            const isInsideAnchor = this.config.anchorElement
-                ? path.includes(this.config.anchorElement)
-                : false;
-            if (!isInsideOverlay &&
-                !isInsideTrigger &&
-                !isInsideAnchor &&
-                !this.isInsideChildOverlay(path)) {
-                this.hide();
-            }
-        });
-        // If closeOnEscape is enabled, set up a keydown listener
-        fromEvent(this.document, 'keydown', { capture: true })
-            .pipe(safeTakeUntilDestroyed(this.destroyRef))
-            .subscribe(event => {
-            if (!this.config.closeOnEscape)
-                return;
-            if (event.key === 'Escape' && this.isOpen()) {
-                this.hide({ origin: 'keyboard', immediate: true });
-            }
-        });
         // Ensure cleanup on destroy
         this.destroyRef.onDestroy(() => {
-            this.parentOverlay?.unregisterChildOverlay(this);
             this.destroy();
         });
     }
@@ -1077,6 +1338,19 @@ class NgpOverlay {
         this.setupPositioning(outletElement);
         // Mark as open
         this.isOpen.set(true);
+        // Register with the overlay registry for centralized dismiss routing
+        this.registry.register({
+            id: this.id(),
+            parentId: this.parentOverlay?.id() ?? null,
+            overlay: this,
+            getElements: () => this.getElements(),
+            triggerElement: this.config.triggerElement,
+            anchorElement: this.config.anchorElement,
+            dismissPolicy: {
+                outsidePress: this.config.closeOnOutsideClick ?? false,
+                escapeKey: this.config.closeOnEscape ?? false,
+            },
+        });
         // Register as active overlay for this type (skip when cooldown is bypassed)
         if (this.config.overlayType && !skipCooldown) {
             this.cooldownManager.registerActive(this.config.overlayType, this, this.config.cooldown ?? 0);
@@ -1197,6 +1471,10 @@ class NgpOverlay {
         if (!portal) {
             return;
         }
+        // Close any descendant overlays before destroying this one
+        this.registry.closeDescendants(this.id());
+        // Deregister from the overlay registry
+        this.registry.deregister(this.id());
         // Unregister from active overlays
         if (this.config.overlayType) {
             this.cooldownManager.unregisterActive(this.config.overlayType, this);
@@ -1374,5 +1652,5 @@ function coerceShift(value) {
  * Generated bundle index. Do not edit.
  */
 
-export { BlockScrollStrategy, CloseScrollStrategy, NgpComponentPortal, NgpOverlay, NgpOverlayArrowStateToken, NgpOverlayCooldownManager, NgpPortal, NgpTemplatePortal, NoopScrollStrategy, coerceFlip, coerceOffset, coerceShift, createOverlay, createPortal, injectOverlay, injectOverlayArrowState, injectOverlayContext, ngpOverlayArrow, provideOverlayArrowState, provideOverlayContext };
+export { BlockScrollStrategy, CloseScrollStrategy, NgpComponentPortal, NgpOverlay, NgpOverlayArrowStateToken, NgpOverlayCooldownManager, NgpOverlayRegistry, NgpPortal, NgpTemplatePortal, NoopScrollStrategy, coerceFlip, coerceOffset, coerceShift, createOverlay, createPortal, injectOverlay, injectOverlayArrowState, injectOverlayContext, ngpOverlayArrow, provideOverlayArrowState, provideOverlayContext };
 //# sourceMappingURL=ng-primitives-portal.mjs.map