@nanahoshi/mona-ui 0.24.1 → 0.24.4

package/fesm2022/nanahoshi-mona-ui-popup.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, DestroyRef, DOCUMENT, viewChild, ViewContainerRef, computed, signal, TemplateRef, Component, Injector, ElementRef, Injectable, input, output, effect } from '@angular/core';
+import { InjectionToken, inject, DestroyRef, DOCUMENT, viewChild, ViewContainerRef, computed, signal, TemplateRef, Component, Injector, ElementRef, Injectable, input, output, booleanAttribute, effect } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { rxTimeout } from '@nanahoshi/mona-ui/internal';
-import { take, asapScheduler, Subject, ReplaySubject, asyncScheduler, fromEvent, takeUntil, Subscription, filter, tap, exhaustMap, merge } from 'rxjs';
+import { take, asapScheduler, Subject, ReplaySubject, asyncScheduler, fromEvent, Subscription, merge, takeUntil } from 'rxjs';
 import { PreventableEvent } from '@nanahoshi/mona-ui/common';
 import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { ScrollDispatcher } from '@angular/cdk/scrolling';
 import { MonaI18nService, resolveComponentDirection, observeComponentDirection } from '@nanahoshi/mona-ui/i18n';
+import { focusCanReturn } from '@nanahoshi/mona-ui/internal';
 import { NgTemplateOutlet } from '@angular/common';
 
 class PopupCloseEvent extends PreventableEvent {
@@ -64,13 +64,17 @@ const slideFromBottomPopupAnimation = {
     leave: "mona-popup-slide-to-bottom-leave"
 };
 
-const PopupDataInjectionToken = new InjectionToken("PopupInjectionToken");
-const PopupSettingsInjectionToken = new InjectionToken("PopupSettingsInjectionToken");
+/**
+ * The `data` passed in `PopupSettings`, available to the popup content.
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention -- public API name, kept for compatibility.
+const PopupDataInjectionToken = new InjectionToken("PopupDataInjectionToken");
+const POPUP_SETTINGS = new InjectionToken("POPUP_SETTINGS");
 
 /**
  * @internal - used by the popup service. Do not use directly or export.
  */
-const PopupReferenceInjectionToken = new InjectionToken("PopupReferenceInjectionToken");
+const POPUP_REFERENCE = new InjectionToken("POPUP_REFERENCE");
 
 class PopupWrapperComponent {
     #destroyRef;
@@ -83,21 +87,21 @@ class PopupWrapperComponent {
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#document = inject(DOCUMENT);
-        this.#popupReference = inject(PopupReferenceInjectionToken);
-        this.#popupSettings = inject(PopupSettingsInjectionToken);
+        this.#popupReference = inject(POPUP_REFERENCE);
+        this.#popupSettings = inject(POPUP_SETTINGS);
         this.#closeEvent = null;
         this.#fallbackTimer = null;
         this.#leaveCompleted = false;
         this.animationElement = viewChild.required("animationElement", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "animationElement" }] : /* istanbul ignore next */ []));
         this.componentOutlet = viewChild.required("componentOutlet", { ...(ngDevMode ? { debugName: "componentOutlet" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
+        this.enterAnimationClasses = computed(() => this.#getAnimationConfig()?.enter ?? "", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "enterAnimationClasses" }] : /* istanbul ignore next */ []));
         this.hostClasses = computed(() => {
             const wrapperClass = this.wrapperClass();
             return ["mona-popup-wrapper", "w-full", "h-full", wrapperClass].filter(Boolean).join(" ");
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-        this.enterAnimationClasses = computed(() => this.#getAnimationConfig()?.enter ?? "", /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "enterAnimationClasses" }] : /* istanbul ignore next */ []));
         this.leaveAnimationClasses = computed(() => this.#getAnimationConfig()?.leave ?? "", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "leaveAnimationClasses" }] : /* istanbul ignore next */ []));
         this.templateRef = signal(null, /* @ts-ignore */
@@ -120,7 +124,6 @@ class PopupWrapperComponent {
         });
         this.#destroyRef.onDestroy(() => this.#clearFallbackTimer());
     }
-    ngOnInit() { }
     attachContent(content, injector) {
         if (content instanceof TemplateRef) {
             this.templateRef.set(content);
@@ -227,8 +230,15 @@ class PopupRef {
     constructor(options) {
         this.#options = options;
     }
+    /**
+     * Requests the popup to close.
+     * @param result optional result passed to `beforeClose` and `closed` as the event's `result`
+     * @param delay optional delay in milliseconds before the popup is removed, instead of waiting for the
+     * leave animation
+     * @returns `false` when the close was prevented or the popup is already closing, `true` otherwise.
+     */
     close(result, delay) {
-        this.#options.close(result, delay);
+        return this.#options.close(result, delay);
     }
     /**
      * Closes the popup after a delay.
@@ -317,13 +327,13 @@ class PopupReference {
     constructor(overlayReference, preventClose) {
         this.overlayReference = overlayReference;
         this.preventClose = preventClose;
+        this.#closed = false;
+        this.#closing = false;
         this.beforeClosed$ = new Subject();
         this.closeStart$ = new Subject();
         this.closed$ = new Subject();
         this.opened$ = new ReplaySubject(1);
         this.positionChanges$ = new Subject();
-        this.#closed = false;
-        this.#closing = false;
         this.popupRef = new PopupRef(this);
     }
     /**
@@ -361,8 +371,20 @@ class PopupReference {
         }
         return true;
     }
-    notifyOpen() {
-        this.opened$.next();
+    /**
+     * Finishes a close that bypassed {@link close}: the overlay was detached or disposed directly. Nothing can
+     * prevent it any more, so `beforeClose` is skipped; `closeStart` and `closed` still fire, in that order.
+     */
+    closeDetached() {
+        if (this.#closed) {
+            return;
+        }
+        const event = new PopupCloseEvent({ via: PopupCloseSource.Programmatic });
+        if (!this.#closing) {
+            this.#closing = true;
+            this.closeStart$.next(event);
+        }
+        this.completeClose(event);
     }
     completeClose(event) {
         if (this.#closed) {
@@ -374,6 +396,9 @@ class PopupReference {
         this.positionChanges$.complete();
         this.overlayRef.dispose();
     }
+    notifyOpen() {
+        this.opened$.next();
+    }
     get beforeClose$() {
         return this.beforeClosed$.asObservable();
     }
@@ -516,38 +541,30 @@ const generateFallbackPositions = (primaryPosition) => {
     else if (originX === "end" && originY === "top" && overlayX === "start" && overlayY === "bottom") {
         fallbacks.push({ originX: "start", originY: "bottom", overlayX: "end", overlayY: "top" });
     }
-    //6. Complete mirroring:
-    if (!fallbacks.find(f => f.originX !== originX && f.overlayX !== overlayX && f.originY !== originY && f.overlayY !== overlayY)) {
-        if (originX === "start" && originY === "top") {
-            fallbacks.push({ originX: "end", originY: "bottom", overlayX: "end", overlayY: "bottom" });
-        }
-        else if (originX === "center" && originY === "top") {
-            fallbacks.push({ originX: "center", originY: "bottom", overlayX: "center", overlayY: "bottom" });
-        }
-        else if (originX === "end" && originY === "top") {
-            fallbacks.push({ originX: "start", originY: "bottom", overlayX: "start", overlayY: "bottom" });
-        }
-        else if (originX === "start" && originY === "center") {
-            fallbacks.push({ originX: "end", originY: "center", overlayX: "end", overlayY: "center" });
-        }
-        else if (originX === "center" && originY === "center") {
-            fallbacks.push({ originX: "center", originY: "center", overlayX: "center", overlayY: "center" });
-        }
-        else if (originX === "end" && originY === "center") {
-            fallbacks.push({ originX: "start", originY: "center", overlayX: "start", overlayY: "center" });
-        }
-        else if (originX === "start" && originY === "bottom") {
-            fallbacks.push({ originX: "end", originY: "top", overlayX: "end", overlayY: "top" });
-        }
-        else if (originX === "center" && originY === "bottom") {
-            fallbacks.push({ originX: "center", originY: "top", overlayX: "center", overlayY: "top" });
-        }
-        else if (originX === "end" && originY === "bottom") {
-            fallbacks.push({ originX: "start", originY: "top", overlayX: "start", overlayY: "top" });
-        }
+    // 6. Complete mirroring: flip both the anchor corner and the popup corner on both axes, so the popup lands on
+    // the opposite side and alignment of the anchor. Flipping only the anchor corner and copying it onto the popup
+    // corner, as this used to do, placed the popup over the anchor.
+    const mirrored = {
+        originX: flipX(originX),
+        originY: flipY(originY),
+        overlayX: flipX(overlayX),
+        overlayY: flipY(overlayY)
+    };
+    const isPrimary = mirrored.originX === originX &&
+        mirrored.originY === originY &&
+        mirrored.overlayX === overlayX &&
+        mirrored.overlayY === overlayY;
+    const isListed = fallbacks.some(f => f.originX === mirrored.originX &&
+        f.originY === mirrored.originY &&
+        f.overlayX === mirrored.overlayX &&
+        f.overlayY === mirrored.overlayY);
+    if (!isPrimary && !isListed) {
+        fallbacks.push(mirrored);
     }
     return fallbacks;
 };
+const flipX = (value) => (value === "start" ? "end" : value === "end" ? "start" : value);
+const flipY = (value) => (value === "top" ? "bottom" : value === "bottom" ? "top" : value);
 
 class PopupService {
     #destroyRef = inject(DestroyRef);
@@ -555,10 +572,13 @@ class PopupService {
     #document = inject(DOCUMENT);
     #i18n = inject(MonaI18nService, { optional: true });
     #injector = inject(Injector);
+    /** Open popups in the order they were opened; the last one is on top. */
+    #openPopups = [];
     #outsideEventsToClose = ["click", "mousedown", "dblclick", "contextmenu", "auxclick"];
     #overlay = inject(Overlay);
     #scrollDispatcher = inject(ScrollDispatcher);
-    #selectorSubscriptions = new Map();
+    #escapeSubscription = null;
+    #escapeTarget = null;
     create(settings) {
         if (typeof settings.anchor === "string") {
             return this.createMultiElementPopup(settings);
@@ -581,35 +601,33 @@ class PopupService {
         }
         return ["mona-popup-content"].concat(popupClass);
     }
+    /**
+     * With `"auto"` (also the default), remembers the focused element when it is the anchor or inside it, such
+     * as the button inside a host component or the input inside a date picker, and returns focus to that element.
+     */
     captureOriginalFocus(settings) {
-        if (typeof settings.anchor === "string" || settings.restoreFocus === false) {
+        const restoreFocus = settings.restoreFocus ?? "auto";
+        if (typeof settings.anchor === "string" || restoreFocus === false) {
             return null;
         }
         const activeElement = this.#document.activeElement;
         if (!(activeElement instanceof HTMLElement)) {
             return null;
         }
-        if (settings.restoreFocus === "auto") {
+        if (restoreFocus === "auto") {
             const anchorElement = this.getAnchorElement(settings.anchor);
-            return activeElement === anchorElement ? activeElement : null;
+            return anchorElement?.contains(activeElement) ? activeElement : null;
         }
         return this.getAnchorElement(settings.anchor);
     }
-    cleanupEventDelegation(selector) {
-        const subscriptions = this.#selectorSubscriptions.get(selector);
-        if (subscriptions) {
-            subscriptions.forEach(sub => sub.unsubscribe());
-            this.#selectorSubscriptions.delete(selector);
-        }
-    }
     createInjector(settings, popupReference) {
         return Injector.create({
-            parent: this.#injector,
+            parent: settings.injector ?? this.#injector,
             providers: [
                 { provide: PopupRef, useFactory: () => popupReference.popupRef },
                 { provide: PopupDataInjectionToken, useValue: settings.data },
-                { provide: PopupReferenceInjectionToken, useValue: popupReference },
-                { provide: PopupSettingsInjectionToken, useValue: settings },
+                { provide: POPUP_REFERENCE, useValue: popupReference },
+                { provide: POPUP_SETTINGS, useValue: settings },
                 ...(settings.providers ?? [])
             ]
         });
@@ -619,12 +637,9 @@ class PopupService {
         // Create a virtual PopupRef that manages multi-element interactions
         const virtualOverlayRef = this.#overlay.create({ hasBackdrop: false });
         const virtualPopupReference = new PopupReference(virtualOverlayRef);
-        // Set up the event delegation internally
-        this.setupInternalEventDelegation(selector, settings);
-        // Clean up when the virtual popup is closed
-        virtualPopupReference.popupRef.closed.subscribe(() => {
-            this.cleanupEventDelegation(selector);
-        });
+        // Closing the returned ref stops the delegation and closes the popup currently showing.
+        const delegation = this.setupInternalEventDelegation(selector, settings);
+        virtualPopupReference.popupRef.closed.pipe(take(1)).subscribe(() => delegation.unsubscribe());
         return virtualPopupReference.popupRef;
     }
     createOverlay(settings) {
@@ -698,7 +713,8 @@ class PopupService {
             this.setupScrollClosing(settings, popupReference, overlayRef);
         }
         this.setupScrollTracking(settings, overlayRef, popupReference);
-        this.setupEscapeKeyListener(settings, popupReference);
+        this.registerOpenPopup(settings, popupReference);
+        this.setupDetachTracking(overlayRef, popupReference);
         this.setupPositionChangeTracking(settings, overlayRef, popupReference);
         this.setupDirectionTracking(settings, overlayRef, popupReference);
         return popupReference.popupRef;
@@ -745,18 +761,48 @@ class PopupService {
             .forEach(scrollable => addScrollable(scrollable));
         return Array.from(scrollablesByElement.values());
     }
-    handleFocusRestoration(settings, originallyFocusedElement) {
+    getTopmostOpenPopup() {
+        for (let index = this.#openPopups.length - 1; index >= 0; index--) {
+            const popup = this.#openPopups[index];
+            if (popup.reference.overlayRef.hasAttached()) {
+                return popup;
+            }
+        }
+        return null;
+    }
+    /**
+     * Escape goes to the topmost open popup only, so closing a dropdown inside a dialog leaves the dialog
+     * open. The topmost popup consumes the key even when it doesn't close on Escape, so a modal that can't
+     * be dismissed doesn't let it reach the popup underneath. An Escape that ends an IME composition is left
+     * alone. `preventDefault()` doesn't keep the popup open, because controls call it on every navigation key;
+     * a control that handles Escape itself stops its propagation instead.
+     */
+    handleEscapeKey(event) {
+        const escapeTarget = this.#escapeTarget;
+        this.#escapeTarget = null;
+        if (event.key !== "Escape" || event.isComposing) {
+            return;
+        }
+        // The popup on top when the key was pressed, before handlers further down could close it.
+        const popup = escapeTarget?.event === event ? escapeTarget.popup : this.getTopmostOpenPopup();
+        if (!popup?.closeOnEscape) {
+            return;
+        }
+        popup.reference.popupRef.close(new PopupCloseEvent({
+            event,
+            originalEvent: event,
+            via: PopupCloseSource.Escape
+        }));
+    }
+    handleFocusRestoration(settings, overlayRef, originallyFocusedElement) {
         const restoreFocus = settings.restoreFocus ?? "auto";
         if (restoreFocus === false) {
             return;
         }
-        if (restoreFocus === "auto") {
-            if (originallyFocusedElement) {
-                originallyFocusedElement.focus();
-            }
-            return;
+        const target = restoreFocus === "auto" ? originallyFocusedElement : this.getAnchorElement(settings.anchor);
+        if (target && focusCanReturn(this.#document, target, overlayRef.overlayElement)) {
+            target.focus();
         }
-        this.restoreFocusToAnchor(settings.anchor);
     }
     isScrollableElement(element) {
         const defaultView = this.#document.defaultView;
@@ -773,6 +819,33 @@ class PopupService {
     isScrollableOverflow(value) {
         return value === "auto" || value === "scroll" || value === "overlay";
     }
+    /**
+     * One pair of `document` listeners serves every open popup. The capturing one notes which popup is on
+     * top before the key reaches any control; the bubbling one closes it if nothing handled the key.
+     */
+    listenForEscape() {
+        if (this.#escapeSubscription) {
+            return;
+        }
+        const subscription = new Subscription();
+        subscription.add(fromEvent(this.#document, "keydown", { capture: true }).subscribe(event => {
+            this.#escapeTarget = event.key === "Escape" ? { event, popup: this.getTopmostOpenPopup() } : null;
+        }));
+        subscription.add(fromEvent(this.#document, "keydown").subscribe(event => this.handleEscapeKey(event)));
+        this.#escapeSubscription = subscription;
+    }
+    /**
+     * A popup leaves the stack as soon as it starts closing, so a second Escape during its leave animation
+     * goes to the popup underneath.
+     */
+    registerOpenPopup(settings, popupReference) {
+        const popup = { closeOnEscape: settings.closeOnEscape ?? true, reference: popupReference };
+        this.#openPopups.push(popup);
+        this.listenForEscape();
+        merge(popupReference.closeStart, popupReference.closed)
+            .pipe(take(1))
+            .subscribe(() => this.unregisterOpenPopup(popup));
+    }
     /**
      * Resolves a PopupAnchor to a FlexibleConnectedPositionStrategyOrigin.
      * This method should only receive actual elements or ElementRefs, not CSS selector strings.
@@ -787,16 +860,6 @@ class PopupService {
         }
         return anchor;
     }
-    restoreFocusToAnchor(anchor) {
-        if (typeof anchor === "string") {
-            return;
-        }
-        const resolvedAnchor = this.resolveAnchor(anchor);
-        const anchorElement = this.getAnchorElement(resolvedAnchor);
-        if (anchorElement) {
-            anchorElement.focus();
-        }
-    }
     setupBackdropCloseSubscription(settings, popupReference, overlayRef) {
         if (!(settings.closeOnBackdropClick ?? true)) {
             return null;
@@ -831,7 +894,7 @@ class PopupService {
     setupCleanupSubscription(popupReference, subscription, settings, originallyFocusedElement) {
         popupReference.closed.pipe(take(1)).subscribe(() => {
             subscription?.unsubscribe();
-            this.handleFocusRestoration(settings, originallyFocusedElement);
+            this.handleFocusRestoration(settings, popupReference.overlayRef, originallyFocusedElement);
         });
     }
     setupCloseSubscriptions(settings, popupReference, overlayRef) {
@@ -861,46 +924,70 @@ class PopupService {
         subscriptions.forEach(sub => combinedSubscription.add(sub));
         return combinedSubscription;
     }
-    setupEscapeKeyListener(settings, popupReference) {
-        if (settings.closeOnEscape === false) {
-            return;
-        }
-        fromEvent(this.#document, "keydown")
-            .pipe(filter(() => popupReference.overlayRef.hasAttached()), filter(event => event.key === "Escape"), takeUntil(popupReference.closed), takeUntilDestroyed(this.#destroyRef))
-            .subscribe(event => {
-            const closeEvent = new PopupCloseEvent({
-                event,
-                originalEvent: event,
-                via: PopupCloseSource.Escape
-            });
-            popupReference.popupRef.close(closeEvent);
+    /**
+     * `PopupRef.overlayRef` is public, so the overlay can be detached or disposed without going through
+     * `close()`. Finish the close then too, or `closed` never fires and focus, subscriptions and consumers
+     * waiting for it (the dropdowns won't reopen until it does) stay stuck.
+     */
+    setupDetachTracking(overlayRef, popupReference) {
+        overlayRef
+            .detachments()
+            .pipe(take(1), takeUntil(popupReference.closed))
+            .subscribe(() => popupReference.closeDetached());
+    }
+    setupDirectionTracking(settings, overlayRef, popupReference) {
+        const resolvedAnchor = this.resolveAnchor(settings.anchor);
+        const anchorElement = this.getAnchorElement(resolvedAnchor);
+        const cleanup = observeComponentDirection(anchorElement, this.#directionality, nextDir => {
+            overlayRef.setDirection(nextDir);
+            overlayRef.updatePosition();
+            popupReference.componentRef?.changeDetectorRef.markForCheck();
+        });
+        popupReference.closed.pipe(take(1)).subscribe(() => {
+            cleanup();
         });
     }
+    /**
+     * Listens on the document rather than on the elements matched at creation time, so elements added later
+     * get a popup too. One popup shows at a time; it closes when the pointer leaves its element, and the
+     * returned subscription's teardown closes it as well.
+     */
     setupInternalEventDelegation(selector, settings) {
-        this.cleanupEventDelegation(selector);
-        let currentPopupRef = null;
-        const subscriptions = [];
-        const elements = this.#document.querySelectorAll(selector);
-        elements.forEach(element => {
-            if (!(element instanceof HTMLElement)) {
+        let current = null;
+        const closeCurrent = () => {
+            const popup = current;
+            current = null;
+            popup?.popupRef.close();
+        };
+        const subscription = new Subscription(closeCurrent);
+        subscription.add(fromEvent(this.#document, "pointerover")
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(event => {
+            const target = event.target instanceof Element ? event.target : null;
+            const element = target?.closest(selector);
+            if (!(element instanceof HTMLElement) || element === current?.element) {
                 return;
             }
-            const pointerEnter$ = fromEvent(element, "pointerenter");
-            const pointerLeave$ = fromEvent(element, "pointerleave");
-            const subscription = pointerEnter$
-                .pipe(filter(() => !currentPopupRef), tap(() => {
-                const elementSettings = { ...settings, anchor: element };
-                currentPopupRef = this.createSingleElementPopup(elementSettings);
-            }), exhaustMap(() => pointerLeave$.pipe(take(1))), tap(() => {
-                if (currentPopupRef) {
-                    currentPopupRef.close();
-                    currentPopupRef = null;
+            closeCurrent();
+            const popupRef = this.createSingleElementPopup({ ...settings, anchor: element });
+            current = { element, popupRef };
+            popupRef.closed.pipe(take(1)).subscribe(() => {
+                if (current?.popupRef === popupRef) {
+                    current = null;
                 }
-            }), takeUntilDestroyed(this.#destroyRef))
-                .subscribe();
-            subscriptions.push(subscription);
-        });
-        this.#selectorSubscriptions.set(selector, subscriptions);
+            });
+        }));
+        subscription.add(fromEvent(this.#document, "pointerout")
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(event => {
+            const element = current?.element;
+            const target = event.target instanceof Node ? event.target : null;
+            const next = event.relatedTarget instanceof Node ? event.relatedTarget : null;
+            if (element && target && element.contains(target) && !(next && element.contains(next))) {
+                closeCurrent();
+            }
+        }));
+        return subscription;
     }
     setupMouseLeaveSubscription(settings, popupReference) {
         if (typeof settings.anchor === "string") {
@@ -927,7 +1014,7 @@ class PopupService {
             .outsidePointerEvents()
             .pipe(takeUntil(popupReference.closed), takeUntilDestroyed(this.#destroyRef))
             .subscribe(event => {
-            if (this.shouldIgnoreOutsideClick(settings, event)) {
+            if (this.shouldIgnoreOutsideClick(settings, event, overlayRef)) {
                 return;
             }
             const closeEvent = new PopupCloseEvent({
@@ -949,18 +1036,6 @@ class PopupService {
                 .subscribe(change => popupReference.positionChanges$.next(change.connectionPair));
         }
     }
-    setupDirectionTracking(settings, overlayRef, popupReference) {
-        const resolvedAnchor = this.resolveAnchor(settings.anchor);
-        const anchorElement = this.getAnchorElement(resolvedAnchor);
-        const cleanup = observeComponentDirection(anchorElement, this.#directionality, nextDir => {
-            overlayRef.setDirection(nextDir);
-            overlayRef.updatePosition();
-            popupReference.componentRef?.changeDetectorRef.markForCheck();
-        });
-        popupReference.closed.pipe(take(1)).subscribe(() => {
-            cleanup();
-        });
-    }
     setupScrollClosing(settings, popupReference, overlayRef) {
         if (!settings.closeOnScroll) {
             return;
@@ -978,22 +1053,26 @@ class PopupService {
             });
             popupReference.close(closeEvent, 0);
         };
+        // The page scrolls the anchor away whether or not it also sits in a scrollable container.
+        const win = this.#document.defaultView;
+        const pageEvents = [
+            fromEvent(win, "scroll", { passive: true }),
+            fromEvent(this.#document, "scroll", { passive: true })
+        ];
         if (scrollableContainers.length === 0) {
-            const win = this.#document.defaultView;
-            const globalScrollSubscription = merge(fromEvent(win, "scroll", { passive: true }), fromEvent(win, "resize", { passive: true }), fromEvent(this.#document, "scroll", { passive: true }))
-                .pipe(takeUntil(popupReference.closed), takeUntilDestroyed(this.#destroyRef))
-                .subscribe(event => handleScrollClose(event));
-            subscriptions.push(globalScrollSubscription);
-        }
-        else {
-            scrollableContainers.forEach(scrollable => {
-                const containerScrollSubscription = scrollable
-                    .elementScrolled()
-                    .pipe(takeUntil(popupReference.closed), takeUntilDestroyed(this.#destroyRef))
-                    .subscribe(() => handleScrollClose());
-                subscriptions.push(containerScrollSubscription);
-            });
+            pageEvents.push(fromEvent(win, "resize", { passive: true }));
         }
+        const pageScrollSubscription = merge(...pageEvents)
+            .pipe(takeUntil(popupReference.closed), takeUntilDestroyed(this.#destroyRef))
+            .subscribe(event => handleScrollClose(event));
+        subscriptions.push(pageScrollSubscription);
+        scrollableContainers.forEach(scrollable => {
+            const containerScrollSubscription = scrollable
+                .elementScrolled()
+                .pipe(takeUntil(popupReference.closed), takeUntilDestroyed(this.#destroyRef))
+                .subscribe(() => handleScrollClose());
+            subscriptions.push(containerScrollSubscription);
+        });
         popupReference.closed.pipe(take(1)).subscribe(() => {
             subscriptions.forEach(sub => sub.unsubscribe());
         });
@@ -1031,8 +1110,13 @@ class PopupService {
             subscriptions.forEach(sub => sub.unsubscribe());
         });
     }
-    shouldIgnoreOutsideClick(settings, event) {
+    shouldIgnoreOutsideClick(settings, event, overlayRef) {
         const eventTarget = event.target;
+        // The backdrop lies outside the pane, so its clicks also arrive here. They belong to the backdrop
+        // handler, which honours closeOnBackdropClick and reports them as BackdropClick.
+        if (overlayRef.backdropElement?.contains(eventTarget)) {
+            return true;
+        }
         if (typeof settings.anchor === "string") {
             return !this.#outsideEventsToClose.includes(event.type);
         }
@@ -1042,6 +1126,17 @@ class PopupService {
         const isRelevantEventType = this.#outsideEventsToClose.includes(event.type);
         return isAnchorClick || !isRelevantEventType;
     }
+    unregisterOpenPopup(popup) {
+        const index = this.#openPopups.indexOf(popup);
+        if (index !== -1) {
+            this.#openPopups.splice(index, 1);
+        }
+        if (this.#openPopups.length === 0) {
+            this.#escapeSubscription?.unsubscribe();
+            this.#escapeSubscription = null;
+            this.#escapeTarget = null;
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupService, providedIn: "root" }); }
 }
@@ -1065,14 +1160,14 @@ class PopupComponent {
     #destroyRef;
     #document;
     #popupService;
-    #popupOpened;
     #eventListenerCleanup$;
+    #popupOpened;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#document = inject(DOCUMENT);
         this.#popupService = inject(PopupService);
-        this.#popupOpened = false;
         this.#eventListenerCleanup$ = new Subject();
+        this.#popupOpened = false;
         this.contentTemplate = viewChild.required(TemplateRef, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []));
         this.popupRef = null;
@@ -1099,28 +1194,30 @@ class PopupComponent {
         /**
          * @description Emits when the popup is closed.
          */
+        // eslint-disable-next-line @angular-eslint/no-output-native -- public API name, kept for compatibility.
         this.close = output();
         /**
          * @description Whether to close the popup when clicking on the backdrop.
          * Only applies when the popup has a backdrop.
          */
-        this.closeOnBackdropClick = input(true, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : /* istanbul ignore next */ []));
+        this.closeOnBackdropClick = input(true, { ...(ngDevMode ? { debugName: "closeOnBackdropClick" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Whether to close the popup when the escape key is pressed.
+         * Escape only reaches the topmost open popup.
          */
-        this.closeOnEscape = input(true, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
+        this.closeOnEscape = input(true, { ...(ngDevMode ? { debugName: "closeOnEscape" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Whether to close the popup when the mouse leaves the anchor element.
          */
-        this.closeOnMouseLeave = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "closeOnMouseLeave" }] : /* istanbul ignore next */ []));
+        this.closeOnMouseLeave = input(false, { ...(ngDevMode ? { debugName: "closeOnMouseLeave" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Whether to close the popup when clicking outside of it.
          */
-        this.closeOnOutsideClick = input(true, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "closeOnOutsideClick" }] : /* istanbul ignore next */ []));
+        this.closeOnOutsideClick = input(true, { ...(ngDevMode ? { debugName: "closeOnOutsideClick" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * @description Whether to close the popup when the user scrolls the page or a scrollable container around the anchor.
+         */
+        this.closeOnScroll = input(false, { ...(ngDevMode ? { debugName: "closeOnScroll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Arbitrary data to pass to the popup.
          */
@@ -1129,8 +1226,7 @@ class PopupComponent {
         /**
          * @description Whether the popup should have a backdrop.
          */
-        this.hasBackdrop = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "hasBackdrop" }] : /* istanbul ignore next */ []));
+        this.hasBackdrop = input(false, { ...(ngDevMode ? { debugName: "hasBackdrop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description The height of the popup.
          */
@@ -1205,6 +1301,15 @@ class PopupComponent {
          */
         this.providers = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "providers" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Controls focus restoration when the popup closes.
+         * - `true`: always restore focus to the anchor element.
+         * - `false`: never restore focus (recommended for tooltips).
+         * - `"auto"`: restore focus only if the anchor, or an element inside it, was focused when the popup opened.
+         *
+         * Focus is left alone if the user moved it outside the popup and the anchor before it closed.
+         */
+        this.restoreFocus = input("auto", { ...(ngDevMode ? { debugName: "restoreFocus" } : /* istanbul ignore next */ {}), transform: (value) => (value === "auto" ? "auto" : booleanAttribute(value)) });
         /**
          * @description The trigger event for opening the popup.
          */
@@ -1218,34 +1323,16 @@ class PopupComponent {
         /**
          * @description Whether to push the popup into the screen when it is opened.
          */
-        this.withPush = input(true, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "withPush" }] : /* istanbul ignore next */ []));
-        /**
-         * @description Whether to close the popup when the user scrolls within a scrollable container.
-         */
-        this.closeOnScroll = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "closeOnScroll" }] : /* istanbul ignore next */ []));
-        /**
-         * @description Controls focus restoration when the popup closes.
-         * - `true`: always restore focus to the anchor element.
-         * - `false`: never restore focus (recommended for tooltips).
-         * - `"auto"`: restore focus only if the anchor was focused when the popup opened.
-         */
-        this.restoreFocus = input("auto", /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "restoreFocus" }] : /* istanbul ignore next */ []));
+        this.withPush = input(true, { ...(ngDevMode ? { debugName: "withPush" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Whether the popup should track scroll events and reposition itself.
          */
-        this.withScrollTracking = input(true, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "withScrollTracking" }] : /* istanbul ignore next */ []));
+        this.withScrollTracking = input(true, { ...(ngDevMode ? { debugName: "withScrollTracking" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         effect(() => this.setupEventListeners());
     }
     closePopup() {
         this.popupRef?.close();
     }
-    ngAfterViewInit() {
-        rxTimeout(this.#destroyRef, () => this.setupEventListeners());
-    }
     ngOnDestroy() {
         this.popupRef?.close();
         this.#eventListenerCleanup$.next();
@@ -1285,7 +1372,6 @@ class PopupComponent {
             target = this.#document.body;
             pointAnchor = true;
         }
-        const width = this.getPopupWidth();
         fromEvent(target, trigger)
             .pipe(takeUntil(this.#eventListenerCleanup$), takeUntilDestroyed(this.#destroyRef))
             .subscribe(event => {
@@ -1325,7 +1411,8 @@ class PopupComponent {
                 preventClose: this.preventClose(),
                 providers: this.providers(),
                 restoreFocus: this.restoreFocus(),
-                width,
+                // Measured now rather than when the listener was set up, so it follows the anchor's size.
+                width: this.getPopupWidth(),
                 withPush: this.withPush(),
                 withScrollTracking: this.withScrollTracking()
             };
@@ -1357,12 +1444,12 @@ class PopupComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: PopupComponent, isStandalone: true, selector: "mona-popup", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: true, transformFunction: null }, anchorConnectionPoint: { classPropertyName: "anchorConnectionPoint", publicName: "anchorConnectionPoint", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnMouseLeave: { classPropertyName: "closeOnMouseLeave", publicName: "closeOnMouseLeave", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, popupConnectionPoint: { classPropertyName: "popupConnectionPoint", publicName: "popupConnectionPoint", isSignal: true, isRequired: false, transformFunction: null }, popupWrapperClass: { classPropertyName: "popupWrapperClass", publicName: "popupWrapperClass", isSignal: true, isRequired: false, transformFunction: null }, positionStrategy: { classPropertyName: "positionStrategy", publicName: "positionStrategy", isSignal: true, isRequired: false, transformFunction: null }, positions: { classPropertyName: "positions", publicName: "positions", isSignal: true, isRequired: false, transformFunction: null }, preventClose: { classPropertyName: "preventClose", publicName: "preventClose", isSignal: true, isRequired: false, transformFunction: null }, providers: { classPropertyName: "providers", publicName: "providers", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, withPush: { classPropertyName: "withPush", publicName: "withPush", isSignal: true, isRequired: false, transformFunction: null }, closeOnScroll: { classPropertyName: "closeOnScroll", publicName: "closeOnScroll", isSignal: true, isRequired: false, transformFunction: null }, restoreFocus: { classPropertyName: "restoreFocus", publicName: "restoreFocus", isSignal: true, isRequired: false, transformFunction: null }, withScrollTracking: { classPropertyName: "withScrollTracking", publicName: "withScrollTracking", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", open: "open" }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\n    <ng-content></ng-content>\n</ng-template>\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: PopupComponent, isStandalone: true, selector: "mona-popup", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: true, transformFunction: null }, anchorConnectionPoint: { classPropertyName: "anchorConnectionPoint", publicName: "anchorConnectionPoint", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnMouseLeave: { classPropertyName: "closeOnMouseLeave", publicName: "closeOnMouseLeave", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnScroll: { classPropertyName: "closeOnScroll", publicName: "closeOnScroll", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, popupConnectionPoint: { classPropertyName: "popupConnectionPoint", publicName: "popupConnectionPoint", isSignal: true, isRequired: false, transformFunction: null }, popupWrapperClass: { classPropertyName: "popupWrapperClass", publicName: "popupWrapperClass", isSignal: true, isRequired: false, transformFunction: null }, positionStrategy: { classPropertyName: "positionStrategy", publicName: "positionStrategy", isSignal: true, isRequired: false, transformFunction: null }, positions: { classPropertyName: "positions", publicName: "positions", isSignal: true, isRequired: false, transformFunction: null }, preventClose: { classPropertyName: "preventClose", publicName: "preventClose", isSignal: true, isRequired: false, transformFunction: null }, providers: { classPropertyName: "providers", publicName: "providers", isSignal: true, isRequired: false, transformFunction: null }, restoreFocus: { classPropertyName: "restoreFocus", publicName: "restoreFocus", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, withPush: { classPropertyName: "withPush", publicName: "withPush", isSignal: true, isRequired: false, transformFunction: null }, withScrollTracking: { classPropertyName: "withScrollTracking", publicName: "withScrollTracking", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", open: "open" }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\n    <ng-content></ng-content>\n</ng-template>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupComponent, decorators: [{
             type: Component,
             args: [{ selector: "mona-popup", template: "<ng-template>\n    <ng-content></ng-content>\n</ng-template>\n" }]
-        }], ctorParameters: () => [], propDecorators: { contentTemplate: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: true }] }], anchorConnectionPoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorConnectionPoint", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], backdropClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClass", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnMouseLeave: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnMouseLeave", required: false }] }], closeOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsideClick", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], open: [{ type: i0.Output, args: ["open"] }], popupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupClass", required: false }] }], popupConnectionPoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupConnectionPoint", required: false }] }], popupWrapperClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupWrapperClass", required: false }] }], positionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionStrategy", required: false }] }], positions: [{ type: i0.Input, args: [{ isSignal: true, alias: "positions", required: false }] }], preventClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventClose", required: false }] }], providers: [{ type: i0.Input, args: [{ isSignal: true, alias: "providers", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], withPush: [{ type: i0.Input, args: [{ isSignal: true, alias: "withPush", required: false }] }], closeOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnScroll", required: false }] }], restoreFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "restoreFocus", required: false }] }], withScrollTracking: [{ type: i0.Input, args: [{ isSignal: true, alias: "withScrollTracking", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { contentTemplate: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: true }] }], anchorConnectionPoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorConnectionPoint", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], backdropClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClass", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnMouseLeave: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnMouseLeave", required: false }] }], closeOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsideClick", required: false }] }], closeOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnScroll", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], open: [{ type: i0.Output, args: ["open"] }], popupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupClass", required: false }] }], popupConnectionPoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupConnectionPoint", required: false }] }], popupWrapperClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupWrapperClass", required: false }] }], positionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionStrategy", required: false }] }], positions: [{ type: i0.Input, args: [{ isSignal: true, alias: "positions", required: false }] }], preventClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventClose", required: false }] }], providers: [{ type: i0.Input, args: [{ isSignal: true, alias: "providers", required: false }] }], restoreFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "restoreFocus", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], withPush: [{ type: i0.Input, args: [{ isSignal: true, alias: "withPush", required: false }] }], withScrollTracking: [{ type: i0.Input, args: [{ isSignal: true, alias: "withScrollTracking", required: false }] }] } });
 
 /*
  * Public API Surface of @nanahoshi/mona-ui/popup