@nanahoshi/mona-ui 0.1.0

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

@@ -0,0 +1,1321 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, DestroyRef, DOCUMENT, viewChild, ViewContainerRef, computed, signal, afterNextRender, TemplateRef, Component, Injector, ElementRef, Injectable, input, output, 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 { 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 { NgTemplateOutlet } from '@angular/common';
+
+class PopupCloseEvent extends PreventableEvent {
+    #options;
+    constructor(options) {
+        super(options?.type ?? "popupClose", options?.originalEvent);
+        this.#options = options;
+    }
+    get result() {
+        return this.#options?.result;
+    }
+    get via() {
+        return this.#options?.via;
+    }
+}
+var PopupCloseSource;
+(function (PopupCloseSource) {
+    PopupCloseSource["BackdropClick"] = "backdropClick";
+    PopupCloseSource["CloseButton"] = "closeButton";
+    PopupCloseSource["Escape"] = "escape";
+    PopupCloseSource["MouseLeave"] = "mouseLeave";
+    PopupCloseSource["Programmatic"] = "programmatic";
+    PopupCloseSource["OutsideClick"] = "outsideClick";
+    PopupCloseSource["Scroll"] = "scroll";
+})(PopupCloseSource || (PopupCloseSource = {}));
+
+const defaultPopupAnimation = {
+    enter: "mona-popup-enter",
+    leave: "mona-popup-leave"
+};
+const dropdownPopupAnimation = {
+    enter: "mona-dropdown-popup-enter",
+    leave: "mona-dropdown-popup-leave"
+};
+const fadePopupAnimation = {
+    enter: "mona-popup-fade-enter",
+    leave: "mona-popup-fade-leave"
+};
+
+const PopupDataInjectionToken = new InjectionToken("PopupInjectionToken");
+const PopupSettingsInjectionToken = new InjectionToken("PopupSettingsInjectionToken");
+
+/**
+ * @internal - used by the popup service. Do not use directly or export.
+ */
+const PopupReferenceInjectionToken = new InjectionToken("PopupReferenceInjectionToken");
+
+class PopupWrapperComponent {
+    #destroyRef;
+    #document;
+    #popupReference;
+    #popupSettings;
+    #closeEvent;
+    #fallbackTimer;
+    #leaveCompleted;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#document = inject(DOCUMENT);
+        this.#popupReference = inject(PopupReferenceInjectionToken);
+        this.#popupSettings = inject(PopupSettingsInjectionToken);
+        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.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 */
+        ...(ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []));
+        this.visible = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+        this.wrapperClass = signal("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "wrapperClass" }] : /* istanbul ignore next */ []));
+        afterNextRender({
+            read: () => {
+                if (this.#popupSettings.popupWrapperClass != null) {
+                    if (this.#popupSettings.popupWrapperClass instanceof Array) {
+                        this.wrapperClass.set(this.#popupSettings.popupWrapperClass.join(" "));
+                    }
+                    else {
+                        this.wrapperClass.set(this.#popupSettings.popupWrapperClass);
+                    }
+                }
+                this.#popupReference.closeStart$
+                    .pipe(take(1), takeUntilDestroyed(this.#destroyRef))
+                    .subscribe(event => {
+                    this.#closeEvent = event;
+                    const animationElement = this.animationElement().nativeElement;
+                    this.visible.set(false);
+                    if (!this.leaveAnimationClasses()) {
+                        this.#completeClose();
+                        return;
+                    }
+                    this.#document.defaultView?.setTimeout(() => this.#startFallbackTimer(animationElement));
+                });
+            }
+        });
+        this.#destroyRef.onDestroy(() => this.#clearFallbackTimer());
+    }
+    ngOnInit() { }
+    attachContent(content, injector) {
+        if (content instanceof TemplateRef) {
+            this.templateRef.set(content);
+            return null;
+        }
+        return this.componentOutlet().createComponent(content, { injector });
+    }
+    onNativeLeaveComplete(event) {
+        if (event.target !== event.currentTarget) {
+            return;
+        }
+        this.#completeClose();
+    }
+    #getAnimationConfig() {
+        const config = this.#popupSettings.animation;
+        if (config === false) {
+            return null;
+        }
+        if (config == null || config === true) {
+            return defaultPopupAnimation;
+        }
+        return {
+            enter: config.enter ?? defaultPopupAnimation.enter,
+            leave: config.leave ?? defaultPopupAnimation.leave
+        };
+    }
+    #clearFallbackTimer() {
+        if (this.#fallbackTimer == null) {
+            return;
+        }
+        this.#document.defaultView?.clearTimeout(this.#fallbackTimer);
+        this.#fallbackTimer = null;
+    }
+    #completeClose() {
+        if (this.#leaveCompleted || this.#closeEvent == null) {
+            return;
+        }
+        this.#leaveCompleted = true;
+        this.#clearFallbackTimer();
+        this.#popupReference.completeClose(this.#closeEvent);
+    }
+    #getLongestCssTime(style) {
+        return Math.max(this.#getLongestCssTimeFromProperties(style.animationDuration, style.animationDelay), this.#getLongestCssTimeFromProperties(style.transitionDuration, style.transitionDelay));
+    }
+    #getLongestCssTimeFromProperties(durations, delays) {
+        const durationValues = durations.split(",").map(duration => this.#parseCssTime(duration));
+        const delayValues = delays.split(",").map(delay => this.#parseCssTime(delay));
+        const valueCount = Math.max(durationValues.length, delayValues.length);
+        if (valueCount === 0) {
+            return 0;
+        }
+        return Math.max(...Array.from({ length: valueCount }, (_, index) => {
+            const duration = durationValues[index % durationValues.length] ?? 0;
+            const delay = delayValues[index % delayValues.length] ?? 0;
+            return duration + delay;
+        }));
+    }
+    #parseCssTime(value) {
+        const trimmedValue = value.trim();
+        if (!trimmedValue) {
+            return 0;
+        }
+        if (trimmedValue.endsWith("ms")) {
+            return Number.parseFloat(trimmedValue);
+        }
+        if (trimmedValue.endsWith("s")) {
+            return Number.parseFloat(trimmedValue) * 1000;
+        }
+        return 0;
+    }
+    #startFallbackTimer(animationElement) {
+        if (this.#leaveCompleted) {
+            return;
+        }
+        const win = this.#document.defaultView;
+        if (!win) {
+            this.#completeClose();
+            return;
+        }
+        const duration = this.#getLongestCssTime(win.getComputedStyle(animationElement));
+        if (duration <= 0) {
+            this.#completeClose();
+            return;
+        }
+        this.#fallbackTimer = win.setTimeout(() => this.#completeClose(), duration + 50);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PopupWrapperComponent, isStandalone: true, selector: "mona-popup-wrapper", host: { properties: { "class": "hostClasses()" } }, viewQueries: [{ propertyName: "animationElement", first: true, predicate: ["animationElement"], descendants: true, isSignal: true }, { propertyName: "componentOutlet", first: true, predicate: ["componentOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (visible()) {\r\n    <div\r\n        #animationElement\r\n        class=\"w-full h-full origin-center\"\r\n        [animate.enter]=\"enterAnimationClasses()\"\r\n        [animate.leave]=\"leaveAnimationClasses()\"\r\n        (animationcancel)=\"onNativeLeaveComplete($event)\"\r\n        (animationend)=\"onNativeLeaveComplete($event)\"\r\n        (transitioncancel)=\"onNativeLeaveComplete($event)\"\r\n        (transitionend)=\"onNativeLeaveComplete($event)\">\r\n        @if (templateRef()) {\r\n            <ng-container [ngTemplateOutlet]=\"templateRef()\"></ng-container>\r\n        }\r\n        <ng-container #componentOutlet></ng-container>\r\n    </div>\r\n}\r\n", styles: [":host{display:block}.mona-popup-enter{animation:mona-popup-scale-in .15s cubic-bezier(.4,0,.2,1)}.mona-popup-leave{animation:mona-popup-scale-out .15s cubic-bezier(.4,0,.2,1)}.mona-dropdown-popup-enter{animation:mona-dropdown-popup-scale-in .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-dropdown-popup-leave{animation:mona-dropdown-popup-scale-out .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-popup-fade-enter{animation:mona-popup-fade-in 50ms ease-in}.mona-popup-fade-leave{animation:mona-popup-fade-out .15s ease-out}@keyframes mona-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-dropdown-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-dropdown-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes mona-popup-fade-out{0%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){.mona-popup-enter,.mona-popup-leave,.mona-dropdown-popup-enter,.mona-dropdown-popup-leave,.mona-popup-fade-enter,.mona-popup-fade-leave{animation-duration:1ms}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-popup-wrapper", imports: [NgTemplateOutlet], host: {
+                        "[class]": "hostClasses()"
+                    }, template: "@if (visible()) {\r\n    <div\r\n        #animationElement\r\n        class=\"w-full h-full origin-center\"\r\n        [animate.enter]=\"enterAnimationClasses()\"\r\n        [animate.leave]=\"leaveAnimationClasses()\"\r\n        (animationcancel)=\"onNativeLeaveComplete($event)\"\r\n        (animationend)=\"onNativeLeaveComplete($event)\"\r\n        (transitioncancel)=\"onNativeLeaveComplete($event)\"\r\n        (transitionend)=\"onNativeLeaveComplete($event)\">\r\n        @if (templateRef()) {\r\n            <ng-container [ngTemplateOutlet]=\"templateRef()\"></ng-container>\r\n        }\r\n        <ng-container #componentOutlet></ng-container>\r\n    </div>\r\n}\r\n", styles: [":host{display:block}.mona-popup-enter{animation:mona-popup-scale-in .15s cubic-bezier(.4,0,.2,1)}.mona-popup-leave{animation:mona-popup-scale-out .15s cubic-bezier(.4,0,.2,1)}.mona-dropdown-popup-enter{animation:mona-dropdown-popup-scale-in .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-dropdown-popup-leave{animation:mona-dropdown-popup-scale-out .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-popup-fade-enter{animation:mona-popup-fade-in 50ms ease-in}.mona-popup-fade-leave{animation:mona-popup-fade-out .15s ease-out}@keyframes mona-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-dropdown-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-dropdown-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes mona-popup-fade-out{0%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){.mona-popup-enter,.mona-popup-leave,.mona-dropdown-popup-enter,.mona-dropdown-popup-leave,.mona-popup-fade-enter,.mona-popup-fade-leave{animation-duration:1ms}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { animationElement: [{ type: i0.ViewChild, args: ["animationElement", { isSignal: true }] }], componentOutlet: [{ type: i0.ViewChild, args: ["componentOutlet", { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
+
+class PopupRef {
+    #options;
+    constructor(options) {
+        this.#options = options;
+    }
+    close(result, delay) {
+        this.#options.close(result, delay);
+    }
+    /**
+     * Closes the popup after a delay.
+     * When the popup is closed, the overlay element is removed from the DOM instantly.
+     * This causes the animation of the child elements to not play, therefore,
+     * a delay is added to allow the animation to play.
+     *
+     * @see {@link https://github.com/angular/angular/issues/23302} for more information.
+     * @param delay delay in milliseconds
+     * @param result optional result to pass to the closed observable
+     */
+    closeWithDelay(delay = 100, result) {
+        asapScheduler.schedule(() => this.close(result), delay);
+    }
+    /**
+     * @description Emitted when the popup is about to close.
+     * This event can be prevented. If it is prevented, the popup will not close.
+     */
+    get beforeClose() {
+        return this.#options.beforeClose$;
+    }
+    /**
+     * @description Emitted when the popup begins closing, before the leave animation completes.
+     * Subscribe to this to react at the moment the close sequence starts — for example, to begin
+     * coordinating a transition in the consuming component. The `closed` observable fires after
+     * the leave animation finishes.
+     */
+    get closeStart() {
+        return this.#options.closeStart$;
+    }
+    /**
+     * @description Emitted when the popup is closed.
+     * This event is emitted after the animation completes.
+     * Preventing this event has no effect.
+     */
+    get closed() {
+        return this.#options.closed$;
+    }
+    /**
+     * @description Reference to the component hosted in the popup.
+     * This is `null` if the popup does not contain a component.
+     */
+    get component() {
+        return this.#options.component;
+    }
+    /**
+     * @description Emitted when the popup is opened.
+     */
+    get opened() {
+        return this.#options.opened$;
+    }
+    /**
+     * @description Reference to the underlying CDK overlay.
+     * Use this reference to manipulate the overlay directly, such as to set its size or position.
+     * @see {@link https://material.angular.io/cdk/overlay/overview} for more information.
+     * @example
+     * ```ts
+     * const overlayRef = popupRef.overlayRef;
+     * overlayRef.updateSize({ width: '500px', height: '300px' });
+     * ```
+     */
+    get overlayRef() {
+        return this.#options.overlayRef;
+    }
+    /**
+     * @description Returns the position pair of the popup's anchor element.
+     * @example
+     * ```ts
+     * const positionChanges$ = popupRef.positionChanges;
+     * positionChanges$.subscribe(pair => {
+     *   console.log(`Popup position changed to: ${pair.originX} ${pair.originY} -> ${pair.overlayX} ${pair.overlayY}`);
+     * });
+     * ```
+     */
+    get positionChanges() {
+        return this.#options.positionChanges$;
+    }
+}
+
+/**
+ * @internal - used by the popup service. Do not use directly or export.
+ */
+class PopupReference {
+    #closed;
+    #closing;
+    constructor(overlayReference, preventClose) {
+        this.overlayReference = overlayReference;
+        this.preventClose = preventClose;
+        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);
+    }
+    /**
+     * Emits {@link beforeClosed$} exactly once and, unless the close is prevented (either by the
+     * `preventClose` callback passed to the popup or by a subscriber calling `preventDefault()`
+     * on the event), proceeds to close the popup.
+     * @returns `true` if the close proceeded, `false` if it was prevented.
+     */
+    close(result, delay) {
+        if (this.#closing) {
+            return false;
+        }
+        const beforeCloseEvent = result instanceof PopupCloseEvent
+            ? result
+            : new PopupCloseEvent({ result, via: PopupCloseSource.Programmatic });
+        this.beforeClosed$.next(beforeCloseEvent);
+        const prevented = this.preventClose
+            ? this.preventClose(beforeCloseEvent) || beforeCloseEvent.isDefaultPrevented()
+            : beforeCloseEvent.isDefaultPrevented();
+        if (prevented) {
+            return false;
+        }
+        this.#closing = true;
+        this.closeStart$.next(beforeCloseEvent);
+        if (delay != null) {
+            if (delay > 0) {
+                asyncScheduler.schedule(() => this.completeClose(beforeCloseEvent), delay);
+            }
+            else {
+                this.completeClose(beforeCloseEvent);
+            }
+        }
+        else if (this.wrapperComponentRef == null) {
+            this.completeClose(beforeCloseEvent);
+        }
+        return true;
+    }
+    notifyOpen() {
+        this.opened$.next();
+    }
+    completeClose(event) {
+        if (this.#closed) {
+            return;
+        }
+        this.#closed = true;
+        this.closed$.next(event);
+        this.closed$.complete();
+        this.positionChanges$.complete();
+        this.overlayRef.dispose();
+    }
+    get beforeClose$() {
+        return this.beforeClosed$.asObservable();
+    }
+    get closeStart() {
+        return this.closeStart$.asObservable();
+    }
+    get closed() {
+        return this.closed$.asObservable();
+    }
+    get component() {
+        return this.componentRef ?? null;
+    }
+    get opened() {
+        return this.opened$;
+    }
+    get overlayRef() {
+        return this.overlayReference;
+    }
+}
+
+const connectionPosition = (anchorConnectionPoint, popupConnectionPoint) => {
+    const originMap = {
+        topleft: { originX: "start", originY: "top" },
+        topcenter: { originX: "center", originY: "top" },
+        topright: { originX: "end", originY: "top" },
+        centerleft: { originX: "start", originY: "center" },
+        center: { originX: "center", originY: "center" },
+        centerright: { originX: "end", originY: "center" },
+        bottomleft: { originX: "start", originY: "bottom" },
+        bottomcenter: { originX: "center", originY: "bottom" },
+        bottomright: { originX: "end", originY: "bottom" }
+    };
+    const overlayMap = {
+        topleft: { overlayX: "start", overlayY: "top" },
+        topcenter: { overlayX: "center", overlayY: "top" },
+        topright: { overlayX: "end", overlayY: "top" },
+        centerleft: { overlayX: "start", overlayY: "center" },
+        center: { overlayX: "center", overlayY: "center" },
+        centerright: { overlayX: "end", overlayY: "center" },
+        bottomleft: { overlayX: "start", overlayY: "bottom" },
+        bottomcenter: { overlayX: "center", overlayY: "bottom" },
+        bottomright: { overlayX: "end", overlayY: "bottom" }
+    };
+    const primaryPosition = {
+        ...originMap[anchorConnectionPoint],
+        ...overlayMap[popupConnectionPoint]
+    };
+    const fallbackPositions = generateFallbackPositions(primaryPosition);
+    return [primaryPosition, ...fallbackPositions];
+};
+/**
+ * Generate fallback positions for the given primary position.
+ * This function is mostly AI-generated.
+ * @param primaryPosition The primary position to generate fallbacks for.
+ */
+const generateFallbackPositions = (primaryPosition) => {
+    const { originX, originY, overlayX, overlayY } = primaryPosition;
+    const fallbacks = [];
+    // 1. Keep the same X, try bottom.
+    if (originY !== "bottom" && overlayY !== "bottom") {
+        if (originY === "top") {
+            fallbacks.push({ originX, originY: "bottom", overlayX, overlayY: "bottom" });
+        }
+        else {
+            //originY is center
+            if (overlayY === "top") {
+                fallbacks.push({ originX, originY: "center", overlayX, overlayY: "bottom" });
+            }
+        }
+    }
+    // 2. Keep same Y, try right
+    if (originX !== "end" && overlayX !== "end") {
+        if (originX === "start") {
+            fallbacks.push({ originX: "end", originY, overlayX: "end", overlayY });
+        }
+        else {
+            // originX is center
+            if (overlayX === "start") {
+                fallbacks.push({ originX: "center", originY, overlayX: "end", overlayY });
+            }
+        }
+    }
+    // 3. Keep X and flip Y to the opposite if possible.
+    if (!fallbacks.find(f => f.originX === originX && f.overlayX === overlayX)) {
+        if (originY === "top" && overlayY === "top") {
+            fallbacks.push({ originX, originY: "bottom", overlayX, overlayY: "bottom" });
+        }
+        else if (originY === "bottom" && overlayY === "bottom") {
+            fallbacks.push({ originX, originY: "top", overlayX, overlayY: "top" });
+        }
+        else if (originY === "top" && overlayY === "bottom") {
+            fallbacks.push({ originX, originY: "bottom", overlayX, overlayY: "top" });
+        }
+        else if (originY === "bottom" && overlayY === "top") {
+            fallbacks.push({ originX, originY: "top", overlayX, overlayY: "bottom" });
+        }
+        else {
+            //originY === 'center'
+            if (overlayY === "top") {
+                fallbacks.push({ originX, originY: "center", overlayX, overlayY: "bottom" });
+            }
+            else if (overlayY === "bottom") {
+                fallbacks.push({ originX, originY: "center", overlayX, overlayY: "top" });
+            }
+        }
+    }
+    // 4. Keep Y and flip X to the opposite if possible
+    if (!fallbacks.find(f => f.originY === originY && f.overlayY === overlayY)) {
+        if (originX === "start" && overlayX === "start") {
+            fallbacks.push({ originX: "end", originY, overlayX: "end", overlayY });
+        }
+        else if (originX === "end" && overlayX === "end") {
+            fallbacks.push({ originX: "start", originY, overlayX: "start", overlayY });
+        }
+        else if (originX === "start" && overlayX === "end") {
+            fallbacks.push({ originX: "end", originY, overlayX: "start", overlayY });
+        }
+        else if (originX === "end" && overlayX === "start") {
+            fallbacks.push({ originX: "start", originY, overlayX: "end", overlayY });
+        }
+        else {
+            if (overlayX === "start") {
+                fallbacks.push({ originX: "center", originY, overlayX: "end", overlayY });
+            }
+            else if (overlayX === "end") {
+                fallbacks.push({ originX: "center", originY, overlayX: "start", overlayY });
+            }
+        }
+    }
+    // 5. Diagonal Flips
+    if (originX === "start" && originY === "top" && overlayX === "end" && overlayY === "bottom") {
+        fallbacks.push({ originX: "end", originY: "bottom", overlayX: "start", overlayY: "top" });
+    }
+    else if (originX === "end" && originY === "bottom" && overlayX === "start" && overlayY === "top") {
+        fallbacks.push({ originX: "start", originY: "top", overlayX: "end", overlayY: "bottom" });
+    }
+    else if (originX === "start" && originY === "bottom" && overlayX === "end" && overlayY === "top") {
+        fallbacks.push({ originX: "end", originY: "top", overlayX: "start", overlayY: "bottom" });
+    }
+    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" });
+        }
+    }
+    return fallbacks;
+};
+
+class PopupService {
+    #destroyRef = inject(DestroyRef);
+    #directionality = inject(Directionality, { optional: true });
+    #document = inject(DOCUMENT);
+    #injector = inject(Injector);
+    #outsideEventsToClose = ["click", "mousedown", "dblclick", "contextmenu", "auxclick"];
+    #overlay = inject(Overlay);
+    #selectorSubscriptions = new Map();
+    #scrollDispatcher = inject(ScrollDispatcher);
+    create(settings) {
+        if (typeof settings.anchor === "string") {
+            return this.createMultiElementPopup(settings);
+        }
+        return this.createSingleElementPopup(settings);
+    }
+    attachContent(settings, popupReference, overlayRef, injector) {
+        const portal = new ComponentPortal(PopupWrapperComponent, null, injector);
+        const wrapperComponentRef = overlayRef.attach(portal);
+        popupReference.wrapperComponentRef = wrapperComponentRef;
+        wrapperComponentRef.changeDetectorRef.detectChanges();
+        popupReference.componentRef =
+            wrapperComponentRef.instance.attachContent(settings.content, injector) ?? undefined;
+        wrapperComponentRef.changeDetectorRef.detectChanges();
+        return wrapperComponentRef.location.nativeElement;
+    }
+    buildPanelClass(popupClass) {
+        if (!popupClass) {
+            return "mona-popup-content";
+        }
+        return ["mona-popup-content"].concat(popupClass);
+    }
+    captureOriginalFocus(settings) {
+        if (typeof settings.anchor === "string" || settings.restoreFocus === false) {
+            return null;
+        }
+        const activeElement = this.#document.activeElement;
+        if (!(activeElement instanceof HTMLElement)) {
+            return null;
+        }
+        if (settings.restoreFocus === "auto") {
+            const anchorElement = this.getAnchorElement(settings.anchor);
+            return activeElement === anchorElement ? 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,
+            providers: [
+                { provide: PopupRef, useFactory: () => popupReference.popupRef },
+                { provide: PopupDataInjectionToken, useValue: settings.data },
+                { provide: PopupReferenceInjectionToken, useValue: popupReference },
+                { provide: PopupSettingsInjectionToken, useValue: settings },
+                ...(settings.providers ?? [])
+            ]
+        });
+    }
+    createMultiElementPopup(settings) {
+        const selector = settings.anchor;
+        // 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);
+        });
+        return virtualPopupReference.popupRef;
+    }
+    createOverlay(settings) {
+        const positionStrategy = this.createPositionStrategy(settings);
+        const panelClass = this.buildPanelClass(settings.popupClass);
+        const direction = this.#directionality?.value;
+        return this.#overlay.create(new OverlayConfig({
+            positionStrategy,
+            hasBackdrop: settings.hasBackdrop ?? false,
+            height: settings.height,
+            maxHeight: settings.maxHeight,
+            maxWidth: settings.maxWidth,
+            minHeight: settings.minHeight,
+            minWidth: settings.minWidth,
+            width: settings.width,
+            panelClass,
+            backdropClass: settings.backdropClass ?? "transparent",
+            direction
+        }));
+    }
+    createPositionStrategy(settings) {
+        if (settings.positionStrategy === "global") {
+            return this.#overlay.position().global();
+        }
+        const resolvedAnchor = this.resolveAnchor(settings.anchor);
+        const position = settings.positions?.length
+            ? settings.positions
+            : this.getPosition(settings.anchorConnectionPoint, settings.popupConnectionPoint);
+        const strategy = this.#overlay
+            .position()
+            .flexibleConnectedTo(resolvedAnchor)
+            .withPositions(position)
+            .withDefaultOffsetX(settings.offset?.horizontal ?? 0)
+            .withDefaultOffsetY(settings.offset?.vertical ?? 0)
+            .withPush(settings.withPush ?? true);
+        if (settings.withScrollTracking ?? true) {
+            const scrollableContainers = this.getScrollableContainers(resolvedAnchor);
+            strategy.withScrollableContainers(scrollableContainers);
+        }
+        return strategy;
+    }
+    createScrollDispatcherTarget(element) {
+        const elementRef = new ElementRef(element);
+        return {
+            elementScrolled: () => fromEvent(element, "scroll", { passive: true }),
+            getElementRef: () => elementRef
+        };
+    }
+    createSingleElementPopup(settings) {
+        const overlayRef = this.createOverlay(settings);
+        const popupReference = new PopupReference(overlayRef, settings.preventClose);
+        const originallyFocusedElement = this.captureOriginalFocus(settings);
+        const injector = this.createInjector(settings, popupReference);
+        popupReference.notifyOpen();
+        this.attachContent(settings, popupReference, overlayRef, injector);
+        const subscription = this.setupCloseSubscriptions(settings, popupReference, overlayRef);
+        this.setupCleanupSubscription(popupReference, subscription, settings, originallyFocusedElement);
+        if (settings.closeOnScroll) {
+            this.setupScrollClosing(settings, popupReference, overlayRef);
+        }
+        this.setupScrollTracking(settings, overlayRef, popupReference);
+        this.setupEscapeKeyListener(settings, popupReference);
+        this.setupPositionChangeTracking(settings, overlayRef, popupReference);
+        return popupReference.popupRef;
+    }
+    getAnchorElement(anchor) {
+        if (anchor instanceof HTMLElement) {
+            return anchor;
+        }
+        if (typeof anchor === "object" && "nativeElement" in anchor && anchor.nativeElement instanceof HTMLElement) {
+            return anchor.nativeElement;
+        }
+        return null;
+    }
+    getPosition(anchorConnectionPoint, popupConnectionPoint) {
+        const anchorPoint = anchorConnectionPoint ?? "bottomleft";
+        const popupPoint = popupConnectionPoint ?? "topleft";
+        return connectionPosition(anchorPoint, popupPoint);
+    }
+    getScrollableAncestorElements(anchorElement) {
+        const scrollables = [];
+        let element = anchorElement.parentElement;
+        while (element) {
+            if (this.isScrollableElement(element)) {
+                scrollables.push(element);
+            }
+            element = element.parentElement;
+        }
+        return scrollables;
+    }
+    getScrollableContainers(anchor) {
+        const anchorElement = this.getAnchorElement(anchor);
+        if (!anchorElement) {
+            return [];
+        }
+        const scrollablesByElement = new Map();
+        const addScrollable = (scrollable) => {
+            scrollablesByElement.set(scrollable.getElementRef().nativeElement, scrollable);
+        };
+        this.#scrollDispatcher
+            .getAncestorScrollContainers(anchorElement)
+            .forEach(scrollable => addScrollable(scrollable));
+        this.getScrollableAncestorElements(anchorElement)
+            .map(element => this.createScrollDispatcherTarget(element))
+            .forEach(scrollable => addScrollable(scrollable));
+        return Array.from(scrollablesByElement.values());
+    }
+    isScrollableElement(element) {
+        const defaultView = this.#document.defaultView;
+        if (!defaultView) {
+            return false;
+        }
+        const style = defaultView.getComputedStyle(element);
+        const canScrollVertically = (this.isScrollableOverflow(style.overflowY) || this.isScrollableOverflow(style.overflow)) &&
+            element.scrollHeight > element.clientHeight;
+        const canScrollHorizontally = (this.isScrollableOverflow(style.overflowX) || this.isScrollableOverflow(style.overflow)) &&
+            element.scrollWidth > element.clientWidth;
+        return canScrollVertically || canScrollHorizontally;
+    }
+    isScrollableOverflow(value) {
+        return value === "auto" || value === "scroll" || value === "overlay";
+    }
+    handleFocusRestoration(settings, originallyFocusedElement) {
+        const restoreFocus = settings.restoreFocus ?? "auto";
+        if (restoreFocus === false) {
+            return;
+        }
+        if (restoreFocus === "auto") {
+            if (originallyFocusedElement) {
+                originallyFocusedElement.focus();
+            }
+            return;
+        }
+        this.restoreFocusToAnchor(settings.anchor);
+    }
+    /**
+     * Resolves a PopupAnchor to a FlexibleConnectedPositionStrategyOrigin.
+     * This method should only receive actual elements or ElementRefs, not CSS selector strings.
+     * CSS selectors are handled by the multi-element popup creation path.
+     * @param anchor The anchor to resolve (should be Element or ElementRef)
+     * @returns The resolved anchor
+     */
+    resolveAnchor(anchor) {
+        if (typeof anchor === "string") {
+            throw new Error(`CSS selector "${anchor}" should not reach resolveAnchor(). ` +
+                `CSS selectors should be handled by createMultiElementPopup().`);
+        }
+        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;
+        }
+        const backdropSubject = new Subject();
+        return overlayRef
+            .backdropClick()
+            .pipe(takeUntil(backdropSubject))
+            .subscribe(e => {
+            const event = new PopupCloseEvent({
+                event: e,
+                originalEvent: e,
+                via: PopupCloseSource.BackdropClick
+            });
+            if (!popupReference.close(event)) {
+                return;
+            }
+            backdropSubject.next();
+            backdropSubject.complete();
+        });
+    }
+    setupCleanupSubscription(popupReference, subscription, settings, originallyFocusedElement) {
+        popupReference.closed.pipe(take(1)).subscribe(() => {
+            subscription?.unsubscribe();
+            this.handleFocusRestoration(settings, originallyFocusedElement);
+        });
+    }
+    setupCloseSubscriptions(settings, popupReference, overlayRef) {
+        const subscriptions = [];
+        if (settings.hasBackdrop) {
+            const backdropSub = this.setupBackdropCloseSubscription(settings, popupReference, overlayRef);
+            if (backdropSub) {
+                subscriptions.push(backdropSub);
+            }
+        }
+        if (settings.closeOnOutsideClick ?? true) {
+            const outsideClickSub = this.setupOutsideClickSubscription(settings, popupReference, overlayRef);
+            if (outsideClickSub) {
+                subscriptions.push(outsideClickSub);
+            }
+        }
+        if (settings.closeOnMouseLeave) {
+            const mouseLeaveSubscription = this.setupMouseLeaveSubscription(settings, popupReference);
+            if (mouseLeaveSubscription) {
+                subscriptions.push(mouseLeaveSubscription);
+            }
+        }
+        if (subscriptions.length === 0) {
+            return null;
+        }
+        const combinedSubscription = new Subscription();
+        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);
+        });
+    }
+    setupInternalEventDelegation(selector, settings) {
+        this.cleanupEventDelegation(selector);
+        let currentPopupRef = null;
+        const subscriptions = [];
+        const elements = this.#document.querySelectorAll(selector);
+        elements.forEach(element => {
+            if (!(element instanceof HTMLElement)) {
+                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;
+                }
+            }), takeUntilDestroyed(this.#destroyRef))
+                .subscribe();
+            subscriptions.push(subscription);
+        });
+        this.#selectorSubscriptions.set(selector, subscriptions);
+    }
+    setupMouseLeaveSubscription(settings, popupReference) {
+        if (typeof settings.anchor === "string") {
+            return null;
+        }
+        const resolvedAnchor = this.resolveAnchor(settings.anchor);
+        const anchorElement = this.getAnchorElement(resolvedAnchor);
+        if (!anchorElement) {
+            return null;
+        }
+        return fromEvent(anchorElement, "pointerleave")
+            .pipe(takeUntil(popupReference.closed), takeUntilDestroyed(this.#destroyRef))
+            .subscribe(event => {
+            const closeEvent = new PopupCloseEvent({
+                event,
+                originalEvent: event,
+                via: PopupCloseSource.MouseLeave
+            });
+            popupReference.close(closeEvent);
+        });
+    }
+    setupOutsideClickSubscription(settings, popupReference, overlayRef) {
+        return overlayRef
+            .outsidePointerEvents()
+            .pipe(takeUntil(popupReference.closed), takeUntilDestroyed(this.#destroyRef))
+            .subscribe(event => {
+            if (this.shouldIgnoreOutsideClick(settings, event)) {
+                return;
+            }
+            const closeEvent = new PopupCloseEvent({
+                event,
+                originalEvent: event,
+                via: PopupCloseSource.OutsideClick
+            });
+            popupReference.close(closeEvent);
+        });
+    }
+    setupPositionChangeTracking(settings, overlayRef, popupReference) {
+        if (settings.positionStrategy === "global") {
+            return;
+        }
+        const positionStrategy = overlayRef.getConfig().positionStrategy;
+        if (positionStrategy && positionStrategy.positionChanges) {
+            positionStrategy.positionChanges
+                .pipe(takeUntil(popupReference.closed), takeUntilDestroyed(this.#destroyRef))
+                .subscribe(change => popupReference.positionChanges$.next(change.connectionPair));
+        }
+    }
+    setupScrollClosing(settings, popupReference, overlayRef) {
+        if (!settings.closeOnScroll) {
+            return;
+        }
+        const scrollableContainers = this.getScrollableContainers(this.resolveAnchor(settings.anchor));
+        const subscriptions = [];
+        const handleScrollClose = (originalEvent) => {
+            if (!overlayRef.hasAttached()) {
+                return;
+            }
+            const closeEvent = new PopupCloseEvent({
+                event: originalEvent ?? new Event("scroll"),
+                originalEvent: originalEvent ?? new Event("scroll"),
+                via: PopupCloseSource.Scroll
+            });
+            popupReference.close(closeEvent, 0);
+        };
+        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);
+            });
+        }
+        popupReference.closed.pipe(take(1)).subscribe(() => {
+            subscriptions.forEach(sub => sub.unsubscribe());
+        });
+    }
+    setupScrollTracking(settings, overlayRef, popupReference) {
+        if (!(settings.withScrollTracking ?? true) || settings.positionStrategy === "global") {
+            return;
+        }
+        if (typeof settings.anchor === "string") {
+            return;
+        }
+        const subscriptions = [];
+        const updatePosition = () => {
+            if (overlayRef.hasAttached()) {
+                overlayRef.updatePosition();
+            }
+        };
+        const win = this.#document.defaultView;
+        const windowScrollSubscription = fromEvent(win, "scroll", { passive: true })
+            .pipe(takeUntil(popupReference.closed), takeUntilDestroyed(this.#destroyRef))
+            .subscribe(updatePosition);
+        subscriptions.push(windowScrollSubscription);
+        const resizeSubscription = fromEvent(win, "resize", { passive: true })
+            .pipe(takeUntil(popupReference.closed), takeUntilDestroyed(this.#destroyRef))
+            .subscribe(updatePosition);
+        subscriptions.push(resizeSubscription);
+        this.getScrollableContainers(this.resolveAnchor(settings.anchor)).forEach(scrollable => {
+            const containerScrollSubscription = scrollable
+                .elementScrolled()
+                .pipe(takeUntil(popupReference.closed), takeUntilDestroyed(this.#destroyRef))
+                .subscribe(updatePosition);
+            subscriptions.push(containerScrollSubscription);
+        });
+        popupReference.closed.pipe(take(1)).subscribe(() => {
+            subscriptions.forEach(sub => sub.unsubscribe());
+        });
+    }
+    shouldIgnoreOutsideClick(settings, event) {
+        const eventTarget = event.target;
+        if (typeof settings.anchor === "string") {
+            return !this.#outsideEventsToClose.includes(event.type);
+        }
+        const resolvedAnchor = this.resolveAnchor(settings.anchor);
+        const anchorElement = this.getAnchorElement(resolvedAnchor);
+        const isAnchorClick = anchorElement && anchorElement.contains(eventTarget);
+        const isRelevantEventType = this.#outsideEventsToClose.includes(event.type);
+        return isAnchorClick || !isRelevantEventType;
+    }
+    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" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root"
+                }]
+        }] });
+
+class PopupComponent {
+    #destroyRef;
+    #document;
+    #popupService;
+    #popupOpened;
+    #eventListenerCleanup$;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#document = inject(DOCUMENT);
+        this.#popupService = inject(PopupService);
+        this.#popupOpened = false;
+        this.#eventListenerCleanup$ = new Subject();
+        this.contentTemplate = viewChild.required(TemplateRef, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []));
+        this.popupRef = null;
+        /**
+         * @description The anchor element or point for the popup.
+         */
+        this.anchor = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "anchor" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The connection point for the popup anchor.
+         */
+        this.anchorConnectionPoint = input("bottomcenter", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "anchorConnectionPoint" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The animation settings for the popup.
+         */
+        this.animation = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "animation" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The class or classes to apply to the backdrop of the popup.
+         */
+        this.backdropClass = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "backdropClass" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emits when the popup is closed.
+         */
+        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 */ []));
+        /**
+         * @description Whether to close the popup when the escape key is pressed.
+         */
+        this.closeOnEscape = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
+        /**
+         * @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 */ []));
+        /**
+         * @description Whether to close the popup when clicking outside of it.
+         */
+        this.closeOnOutsideClick = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closeOnOutsideClick" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Arbitrary data to pass to the popup.
+         */
+        this.data = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "data" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Whether the popup should have a backdrop.
+         */
+        this.hasBackdrop = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasBackdrop" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The height of the popup.
+         */
+        this.height = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "height" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The maximum height of the popup.
+         */
+        this.maxHeight = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The maximum width of the popup.
+         */
+        this.maxWidth = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The minimum height of the popup.
+         */
+        this.minHeight = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "minHeight" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The minimum width of the popup.
+         */
+        this.minWidth = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "minWidth" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The offset of the popup from the anchor.
+         */
+        this.offset = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "offset" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emits when the popup is opened.
+         */
+        this.open = output();
+        /**
+         * @description The class or classes to apply to the popup.
+         */
+        this.popupClass = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupClass" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The connection point for the popup.
+         */
+        this.popupConnectionPoint = input("topcenter", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupConnectionPoint" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The class or classes to apply to the popup wrapper.
+         */
+        this.popupWrapperClass = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupWrapperClass" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The strategy for positioning the popup.
+         * `global` means the popup will be positioned relative to the viewport,
+         * `connected` means the popup will be positioned relative to the anchor element.
+         */
+        this.positionStrategy = input("connected", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "positionStrategy" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The positions to use for the popup.
+         * The popup will try to position itself in the first position that fits.
+         * This is only used when the `positionStrategy` is set to `connected`.
+         */
+        this.positions = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "positions" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Called when the popup is requested to close.
+         * This can be used to prevent the popup from closing.
+         */
+        this.preventClose = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "preventClose" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The providers that will be injected into the popup.
+         */
+        this.providers = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "providers" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The trigger event for opening the popup.
+         */
+        this.trigger = input("click", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The width of the popup.
+         */
+        this.width = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+        /**
+         * @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 */ []));
+        /**
+         * @description Whether the popup should track scroll events and reposition itself.
+         */
+        this.withScrollTracking = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "withScrollTracking" }] : /* istanbul ignore next */ []));
+        effect(() => this.setupEventListeners());
+    }
+    closePopup() {
+        this.popupRef?.close();
+    }
+    ngAfterViewInit() {
+        rxTimeout(this.#destroyRef, () => this.setupEventListeners());
+    }
+    ngOnDestroy() {
+        this.popupRef?.close();
+        this.#eventListenerCleanup$.next();
+        this.#eventListenerCleanup$.complete();
+    }
+    getPopupWidth() {
+        const width = this.width();
+        if (width != null) {
+            return width;
+        }
+        const anchor = this.anchor();
+        if (anchor instanceof HTMLElement) {
+            return anchor.getBoundingClientRect().width;
+        }
+        if (anchor instanceof ElementRef) {
+            return anchor.nativeElement.getBoundingClientRect().width;
+        }
+        return undefined;
+    }
+    setupEventListeners() {
+        // Clean up previous event listeners
+        this.#eventListenerCleanup$.next();
+        const trigger = this.trigger();
+        const anchor = this.anchor();
+        if (!trigger || !anchor) {
+            return;
+        }
+        let pointAnchor = false;
+        let target;
+        if (anchor instanceof ElementRef) {
+            target = anchor.nativeElement;
+        }
+        else if (anchor instanceof HTMLElement) {
+            target = anchor;
+        }
+        else {
+            target = this.#document.body;
+            pointAnchor = true;
+        }
+        const width = this.getPopupWidth();
+        fromEvent(target, trigger)
+            .pipe(takeUntil(this.#eventListenerCleanup$), takeUntilDestroyed(this.#destroyRef))
+            .subscribe(event => {
+            event.preventDefault();
+            if (this.#popupOpened) {
+                this.#popupOpened = false;
+                return;
+            }
+            if (this.popupRef !== null) {
+                this.popupRef.close();
+                return;
+            }
+            const popupSettings = {
+                anchor,
+                anchorConnectionPoint: this.anchorConnectionPoint(),
+                animation: this.animation(),
+                backdropClass: this.backdropClass(),
+                closeOnBackdropClick: this.closeOnBackdropClick(),
+                closeOnEscape: this.closeOnEscape(),
+                closeOnMouseLeave: this.closeOnMouseLeave(),
+                closeOnOutsideClick: this.closeOnOutsideClick(),
+                closeOnScroll: this.closeOnScroll(),
+                content: this.contentTemplate(),
+                data: this.data(),
+                hasBackdrop: this.hasBackdrop(),
+                height: this.height(),
+                maxHeight: this.maxHeight(),
+                maxWidth: this.maxWidth(),
+                minHeight: this.minHeight(),
+                minWidth: this.minWidth(),
+                offset: this.offset(),
+                popupClass: this.popupClass(),
+                popupConnectionPoint: this.popupConnectionPoint(),
+                popupWrapperClass: this.popupWrapperClass(),
+                positionStrategy: this.positionStrategy(),
+                positions: this.positions(),
+                preventClose: this.preventClose(),
+                providers: this.providers(),
+                restoreFocus: this.restoreFocus(),
+                width,
+                withPush: this.withPush(),
+                withScrollTracking: this.withScrollTracking()
+            };
+            this.popupRef = this.#popupService.create(popupSettings);
+            this.popupRef.closed.pipe(take(1)).subscribe(result => {
+                this.popupRef = null;
+                this.close.emit();
+                if (result instanceof PopupCloseEvent) {
+                    if (!result.originalEvent) {
+                        this.#popupOpened = false;
+                    }
+                    else if (result.originalEvent instanceof PointerEvent &&
+                        result.originalEvent.type === trigger) {
+                        this.#popupOpened =
+                            target instanceof HTMLElement &&
+                                target.contains(result.originalEvent.target);
+                    }
+                    else if (result.originalEvent instanceof PointerEvent &&
+                        pointAnchor &&
+                        result.originalEvent.type !== trigger) {
+                        this.#popupOpened = false;
+                    }
+                }
+            });
+            if (pointAnchor) {
+                this.#popupOpened = true;
+            }
+            this.open.emit(this.popupRef);
+        });
+    }
+    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>\r\n    <ng-content></ng-content>\r\n</ng-template>\r\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>\r\n    <ng-content></ng-content>\r\n</ng-template>\r\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 }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/popup
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PopupCloseEvent, PopupCloseSource, PopupComponent, PopupDataInjectionToken, PopupRef, PopupService, defaultPopupAnimation, dropdownPopupAnimation, fadePopupAnimation };
+//# sourceMappingURL=nanahoshi-mona-ui-popup.mjs.map