@cocoar/ui 0.1.0-beta.99 → 0.1.1

package/fesm2022/cocoar-ui-overlay.mjs

@@ -0,0 +1,1284 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Injector, createEnvironmentInjector, createComponent, inject, ApplicationRef, EnvironmentInjector, Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+/**
+ * Multi-provider token. Resolvers are applied in registration order.
+ */
+const COAR_OVERLAY_SPEC_RESOLVERS = new InjectionToken('COAR_OVERLAY_SPEC_RESOLVERS');
+const COAR_OVERLAY_DEFAULTS = {
+    anchor: { kind: 'virtual', placement: 'center' },
+    position: {
+        placement: ['top', 'bottom', 'left', 'right'],
+        offset: 8,
+        flip: true,
+        shift: true,
+    },
+    backdrop: { kind: 'none' },
+    scroll: { strategy: 'reposition' },
+    dismiss: { outsideClick: true, escapeKey: true },
+    focus: { trap: false, restore: true },
+    a11y: {},
+    attachment: { strategy: 'body' },
+};
+
+/**
+ * The OverlayRef for the overlay currently rendering this content.
+ *
+ * Provided automatically by CoarOverlayService for overlay content so components
+ * can open true child overlays without DOM lookups.
+ */
+const COAR_OVERLAY_REF = new InjectionToken('COAR_OVERLAY_REF');
+/**
+ * Parent overlay reference for menu hierarchies.
+ * Each overlay provides this token pointing to itself, enabling child menu items
+ * to close siblings by calling parent.closeChildren().
+ */
+const COAR_MENU_PARENT = new InjectionToken('COAR_MENU_PARENT');
+
+function getViewportRect() {
+    const docEl = document.documentElement;
+    const width = docEl?.clientWidth || window.innerWidth;
+    const height = docEl?.clientHeight || window.innerHeight;
+    return { width, height };
+}
+function getContainerRect(container) {
+    return rectFromDom(container.getBoundingClientRect());
+}
+function rectFromDom(domRect) {
+    return {
+        left: domRect.left,
+        top: domRect.top,
+        right: domRect.right,
+        bottom: domRect.bottom,
+        width: domRect.width,
+        height: domRect.height,
+    };
+}
+function getAnchorRect(anchor, viewport) {
+    switch (anchor.kind) {
+        case 'element':
+            return rectFromDom(anchor.element.getBoundingClientRect());
+        case 'point':
+            return rectFromPoint(anchor, 0, 0);
+        case 'virtual':
+            return rectFromVirtual(anchor, viewport);
+    }
+}
+function rectFromPoint(point, width, height) {
+    const left = point.x;
+    const top = point.y;
+    return {
+        left,
+        top,
+        right: left + width,
+        bottom: top + height,
+        width,
+        height,
+    };
+}
+function rectFromVirtual(spec, viewport) {
+    if (spec.placement === 'center') {
+        const x = viewport.width / 2;
+        const y = viewport.height / 2;
+        return rectFromPoint({ x, y }, 0, 0);
+    }
+    if (spec.placement === 'top') {
+        const x = viewport.width / 2;
+        const y = 0;
+        return rectFromPoint({ x, y }, 0, 0);
+    }
+    const x = viewport.width / 2;
+    const y = viewport.height;
+    return rectFromPoint({ x, y }, 0, 0);
+}
+function getScrollParents(element) {
+    const result = [];
+    let current = element;
+    while (current && current.parentElement) {
+        current = current.parentElement;
+        const style = getComputedStyle(current);
+        const overflowY = style.overflowY;
+        const overflowX = style.overflowX;
+        const scrollable = overflowY === 'auto' ||
+            overflowY === 'scroll' ||
+            overflowX === 'auto' ||
+            overflowX === 'scroll';
+        if (scrollable) {
+            result.push(current);
+        }
+    }
+    result.push(window);
+    return result;
+}
+function computeOverlayCoordinates(anchorRect, overlaySize, position, viewport, boundaryRect) {
+    const placements = Array.isArray(position.placement)
+        ? position.placement
+        : [position.placement];
+    const offset = position.offset ?? 0;
+    const allowFlip = position.flip ?? false;
+    const allowShift = position.shift ?? false;
+    // Use container boundaries if provided, otherwise use viewport
+    const boundary = boundaryRect ?? { left: 0, top: 0, right: viewport.width, bottom: viewport.height, width: viewport.width, height: viewport.height };
+    const candidates = placements.map((placement) => ({
+        placement,
+        coords: coordsForPlacement(anchorRect, overlaySize, placement, offset),
+    }));
+    if (allowFlip) {
+        for (const candidate of candidates) {
+            const fits = fitsInBoundary(candidate.coords, overlaySize, boundary);
+            if (fits) {
+                return allowShift
+                    ? { ...shiftIntoBoundary(candidate.coords, overlaySize, boundary), placement: candidate.placement }
+                    : { ...candidate.coords, placement: candidate.placement };
+            }
+        }
+    }
+    // Choose the candidate with the smallest total overflow.
+    let best = candidates[0];
+    let bestOverflow = Number.POSITIVE_INFINITY;
+    for (const candidate of candidates) {
+        const overflow = totalOverflowFromBoundary(candidate.coords, overlaySize, boundary);
+        if (overflow < bestOverflow) {
+            best = candidate;
+            bestOverflow = overflow;
+        }
+    }
+    const chosen = best?.coords ??
+        coordsForPlacement(anchorRect, overlaySize, placements[0] ?? 'bottom', offset);
+    const shifted = allowShift ? shiftIntoBoundary(chosen, overlaySize, boundary) : chosen;
+    return { ...shifted, placement: best?.placement ?? (placements[0] ?? 'bottom') };
+}
+function coordsForPlacement(anchorRect, overlaySize, placement, offset) {
+    const anchorCenterX = anchorRect.left + anchorRect.width / 2;
+    const anchorCenterY = anchorRect.top + anchorRect.height / 2;
+    switch (placement) {
+        case 'center':
+            return {
+                left: anchorCenterX - overlaySize.width / 2,
+                top: anchorCenterY - overlaySize.height / 2,
+            };
+        case 'top':
+            return {
+                left: anchorCenterX - overlaySize.width / 2,
+                top: anchorRect.top - overlaySize.height - offset,
+            };
+        case 'top-start':
+            return {
+                left: anchorRect.left,
+                top: anchorRect.top - overlaySize.height - offset,
+            };
+        case 'top-end':
+            return {
+                left: anchorRect.right - overlaySize.width,
+                top: anchorRect.top - overlaySize.height - offset,
+            };
+        case 'bottom':
+            return {
+                left: anchorCenterX - overlaySize.width / 2,
+                top: anchorRect.bottom + offset,
+            };
+        case 'bottom-start':
+            return {
+                left: anchorRect.left,
+                top: anchorRect.bottom + offset,
+            };
+        case 'bottom-end':
+            return {
+                left: anchorRect.right - overlaySize.width,
+                top: anchorRect.bottom + offset,
+            };
+        case 'left':
+            return {
+                left: anchorRect.left - overlaySize.width - offset,
+                top: anchorCenterY - overlaySize.height / 2,
+            };
+        case 'left-start':
+            return {
+                left: anchorRect.left - overlaySize.width - offset,
+                top: anchorRect.top,
+            };
+        case 'left-end':
+            return {
+                left: anchorRect.left - overlaySize.width - offset,
+                top: anchorRect.bottom - overlaySize.height,
+            };
+        case 'right':
+            return {
+                left: anchorRect.right + offset,
+                top: anchorCenterY - overlaySize.height / 2,
+            };
+        case 'right-start':
+            return {
+                left: anchorRect.right + offset,
+                top: anchorRect.top,
+            };
+        case 'right-end':
+            return {
+                left: anchorRect.right + offset,
+                top: anchorRect.bottom - overlaySize.height,
+            };
+    }
+}
+function fitsInBoundary(coords, overlaySize, boundary) {
+    return (coords.left >= boundary.left &&
+        coords.top >= boundary.top &&
+        coords.left + overlaySize.width <= boundary.right &&
+        coords.top + overlaySize.height <= boundary.bottom);
+}
+function shiftIntoBoundary(coords, overlaySize, boundary) {
+    const maxLeft = Math.max(boundary.left, boundary.right - overlaySize.width);
+    const maxTop = Math.max(boundary.top, boundary.bottom - overlaySize.height);
+    return {
+        left: clamp(coords.left, boundary.left, maxLeft),
+        top: clamp(coords.top, boundary.top, maxTop),
+    };
+}
+function totalOverflowFromBoundary(coords, overlaySize, boundary) {
+    const leftOverflow = Math.max(0, boundary.left - coords.left);
+    const topOverflow = Math.max(0, boundary.top - coords.top);
+    const rightOverflow = Math.max(0, coords.left + overlaySize.width - boundary.right);
+    const bottomOverflow = Math.max(0, coords.top + overlaySize.height - boundary.bottom);
+    return leftOverflow + topOverflow + rightOverflow + bottomOverflow;
+}
+function clamp(value, min, max) {
+    if (value < min)
+        return min;
+    if (value > max)
+        return max;
+    return value;
+}
+
+class CoarOverlayRef {
+    appRef;
+    environmentInjector;
+    spec;
+    inputs;
+    stackIndex;
+    parent;
+    onClosed;
+    afterClosedSubject = new Subject();
+    afterClosed$ = this.afterClosedSubject.asObservable();
+    get isClosed() {
+        return this.closed;
+    }
+    host;
+    panel;
+    backdropElement = null;
+    destroyContent = null;
+    resizeObserver = null;
+    cleanupFns = [];
+    closed = false;
+    lastResult;
+    rafPending = false;
+    presented = false;
+    closeFinalized = false;
+    restoreFocusTarget;
+    children = new Set();
+    hoverCloseTimer = null;
+    contentInjector;
+    contentEnvironmentInjector;
+    shouldAnimateMenu;
+    constructor(appRef, environmentInjector, spec, inputs, stackIndex, parent, onClosed) {
+        this.appRef = appRef;
+        this.environmentInjector = environmentInjector;
+        this.spec = spec;
+        this.inputs = inputs;
+        this.stackIndex = stackIndex;
+        this.parent = parent;
+        this.onClosed = onClosed;
+        this.host = document.createElement('div');
+        this.host.className = 'coar-overlay-host';
+        this.host.setAttribute('popover', 'manual');
+        this.panel = document.createElement('div');
+        this.panel.className = 'coar-overlay-panel';
+        // Apply custom panel class(es) if provided
+        if (this.spec.panelClass) {
+            const classes = Array.isArray(this.spec.panelClass)
+                ? this.spec.panelClass
+                : [this.spec.panelClass];
+            for (const cls of classes) {
+                if (cls)
+                    this.panel.classList.add(cls);
+            }
+        }
+        this.host.appendChild(this.panel);
+        this.shouldAnimateMenu = this.spec.a11y.role === 'menu';
+        this.contentInjector = Injector.create({
+            providers: [
+                { provide: COAR_OVERLAY_REF, useValue: this },
+                { provide: COAR_MENU_PARENT, useValue: this },
+            ],
+            parent: this.environmentInjector,
+        });
+        this.contentEnvironmentInjector = createEnvironmentInjector([
+            { provide: COAR_OVERLAY_REF, useValue: this },
+            { provide: COAR_MENU_PARENT, useValue: this },
+        ], this.environmentInjector);
+        Object.assign(this.host.style, {
+            position: 'fixed',
+            inset: 'unset',
+            top: '0px',
+            left: '0px',
+            margin: '0',
+            border: 'none',
+            padding: '0',
+            background: 'transparent',
+            overflow: 'visible',
+            transform: 'translate3d(0px, 0px, 0px)',
+            zIndex: `calc(var(--coar-z-overlay, 1000) + ${this.stackIndex * 2})`,
+            opacity: '1',
+            pointerEvents: 'none',
+        });
+        if (this.shouldAnimateMenu) {
+            Object.assign(this.panel.style, {
+                opacity: '0',
+                transition: 'opacity var(--coar-duration-slower) var(--coar-ease-out)',
+                willChange: 'opacity',
+            });
+        }
+        this.restoreFocusTarget =
+            (typeof document !== 'undefined' ? document.activeElement : null) ?? null;
+        if (this.parent) {
+            this.parent.children.add(this);
+        }
+    }
+    getHoverTreeDismissConfig() {
+        return this.spec.dismiss.hoverTree;
+    }
+    getPanelElement() {
+        return this.panel;
+    }
+    getRoot() {
+        return this.parent?.getRoot() ?? this;
+    }
+    closeChildren(exclude) {
+        for (const child of Array.from(this.children)) {
+            if (child !== exclude) {
+                child.closeChildren();
+                child.close();
+            }
+        }
+    }
+    open() {
+        const backdrop = this.spec.backdrop;
+        if (backdrop.kind === 'modal') {
+            const backdropEl = document.createElement('div');
+            backdropEl.className = 'coar-overlay-backdrop';
+            backdropEl.setAttribute('popover', 'manual');
+            Object.assign(backdropEl.style, {
+                position: 'fixed',
+                inset: '0',
+                margin: '0',
+                border: 'none',
+                padding: '0',
+                overflow: 'visible',
+                background: 'color-mix(in srgb, var(--coar-color-black) 40%, transparent)',
+                zIndex: `calc(var(--coar-z-overlay-backdrop, 999) + ${this.stackIndex * 2})`,
+            });
+            document.body.appendChild(backdropEl);
+            if ('showPopover' in backdropEl)
+                backdropEl.showPopover();
+            this.backdropElement = backdropEl;
+            if (backdrop.closeOnBackdropClick !== false) {
+                const onClick = (e) => {
+                    if (e.target === backdropEl) {
+                        this.close();
+                    }
+                };
+                backdropEl.addEventListener('click', onClick);
+                this.cleanupFns.push(() => backdropEl.removeEventListener('click', onClick));
+            }
+        }
+        const attachment = this.spec.attachment;
+        const attachmentParent = attachment.strategy === 'parent' ? attachment.container : document.body;
+        attachmentParent.appendChild(this.host);
+        if ('showPopover' in this.host)
+            this.host.showPopover();
+        this.installHoverTreeDismissIfEnabled();
+        this.applyA11y();
+        this.destroyContent = this.renderContent(this.spec.content, this.panel, this.inputs);
+        this.applySize();
+        if (this.spec.focus.trap) {
+            this.installFocusTrap();
+        }
+        this.installRepositionTriggers();
+        this.updatePosition();
+    }
+    installHoverTreeDismissIfEnabled() {
+        const hoverTree = this.spec.dismiss.hoverTree;
+        if (!hoverTree?.enabled)
+            return;
+        const delayMs = typeof hoverTree.delayMs === 'number' ? hoverTree.delayMs : 300;
+        const onEnter = () => {
+            this.cancelHoverCloseUpTree();
+        };
+        const onHostLeave = () => {
+            this.scheduleHoverCloseUpTree(delayMs);
+        };
+        const onAnchorLeave = () => {
+            this.scheduleHoverClose(delayMs);
+        };
+        this.host.addEventListener('pointerenter', onEnter);
+        this.host.addEventListener('pointerleave', onHostLeave);
+        this.cleanupFns.push(() => {
+            this.host.removeEventListener('pointerenter', onEnter);
+            this.host.removeEventListener('pointerleave', onHostLeave);
+            this.cancelHoverClose();
+        });
+        if (this.spec.anchor.kind === 'element') {
+            const el = this.spec.anchor.element;
+            el.addEventListener('pointerenter', onEnter);
+            el.addEventListener('pointerleave', onAnchorLeave);
+            this.cleanupFns.push(() => {
+                el.removeEventListener('pointerenter', onEnter);
+                el.removeEventListener('pointerleave', onAnchorLeave);
+            });
+        }
+    }
+    cancelHoverClose() {
+        if (!this.hoverCloseTimer)
+            return;
+        clearTimeout(this.hoverCloseTimer);
+        this.hoverCloseTimer = null;
+    }
+    cancelHoverCloseUpTree() {
+        this.cancelHoverClose();
+        this.parent?.cancelHoverCloseUpTree();
+    }
+    scheduleHoverClose(delayMs) {
+        const hoverTree = this.spec.dismiss.hoverTree;
+        if (!hoverTree?.enabled)
+            return;
+        this.cancelHoverClose();
+        this.hoverCloseTimer = setTimeout(() => {
+            this.hoverCloseTimer = null;
+            this.close();
+        }, delayMs);
+    }
+    scheduleHoverCloseUpTree(delayMs) {
+        this.scheduleHoverClose(delayMs);
+        this.parent?.scheduleHoverCloseUpTree(delayMs);
+    }
+    hasFocusTrap() {
+        return this.spec.focus.trap === true;
+    }
+    isDismissable(kind) {
+        if (kind === 'outsideClick') {
+            return this.spec.dismiss.outsideClick !== false;
+        }
+        return this.spec.dismiss.escapeKey !== false;
+    }
+    containsEventTarget(target) {
+        if (!(target instanceof Node))
+            return false;
+        if (this.host.contains(target))
+            return true;
+        if (this.backdropElement?.contains(target))
+            return true;
+        if (this.spec.anchor.kind === 'element') {
+            if (this.spec.anchor.element.contains(target))
+                return true;
+        }
+        return false;
+    }
+    handleTabKey(event) {
+        if (!this.spec.focus.trap)
+            return false;
+        const focusables = this.getFocusableElements();
+        if (focusables.length === 0) {
+            this.focusElement(this.host);
+            return true;
+        }
+        const first = focusables[0];
+        const last = focusables[focusables.length - 1];
+        const active = document.activeElement;
+        const isActiveInside = active instanceof Node && (this.host.contains(active) || active === this.host);
+        if (!isActiveInside) {
+            this.focusElement(event.shiftKey ? last : first);
+            return true;
+        }
+        if (event.shiftKey) {
+            if (active === first || active === this.host) {
+                this.focusElement(last);
+                return true;
+            }
+            return false;
+        }
+        if (active === last) {
+            this.focusElement(first);
+            return true;
+        }
+        return false;
+    }
+    updatePosition() {
+        if (this.closed)
+            return;
+        if (this.rafPending)
+            return;
+        this.rafPending = true;
+        this.schedule(() => {
+            this.rafPending = false;
+            if (this.closed)
+                return;
+            const viewport = getViewportRect();
+            const anchorRect = getAnchorRect(this.spec.anchor, viewport);
+            const rect = this.host.getBoundingClientRect();
+            const overlaySize = {
+                width: rect.width,
+                height: rect.height,
+            };
+            const attachment = this.spec.attachment;
+            const boundaryRect = attachment.strategy === 'parent' ? getContainerRect(attachment.container) : undefined;
+            const coords = computeOverlayCoordinates(anchorRect, overlaySize, this.spec.position, viewport, boundaryRect);
+            this.host.style.transform = `translate3d(${Math.round(coords.left)}px, ${Math.round(coords.top)}px, 0px)`;
+            this.present();
+        });
+    }
+    present() {
+        if (this.presented)
+            return;
+        this.presented = true;
+        if (this.shouldAnimateMenu) {
+            void this.panel.getBoundingClientRect();
+        }
+        this.host.style.pointerEvents = 'auto';
+        if (this.shouldAnimateMenu) {
+            this.panel.style.opacity = '1';
+        }
+    }
+    close(result) {
+        if (this.closed)
+            return;
+        this.closed = true;
+        this.lastResult = result;
+        this.cancelHoverClose();
+        this.closeChildren();
+        for (const cleanup of this.cleanupFns) {
+            cleanup();
+        }
+        this.cleanupFns = [];
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+        if (this.shouldAnimateMenu && this.presented) {
+            this.host.style.pointerEvents = 'none';
+            this.panel.style.opacity = '0';
+            const finalizeOnce = () => {
+                this.finalizeClose();
+            };
+            let fallbackTimer = null;
+            const onEnd = (e) => {
+                if (e.target === this.panel && e.propertyName === 'opacity') {
+                    this.host.removeEventListener('transitionend', onEnd);
+                    if (fallbackTimer) {
+                        clearTimeout(fallbackTimer);
+                        fallbackTimer = null;
+                    }
+                    finalizeOnce();
+                }
+            };
+            this.host.addEventListener('transitionend', onEnd);
+            const fallbackMs = this.getMaxTransitionTimeMs();
+            if (fallbackMs === 0) {
+                this.host.removeEventListener('transitionend', onEnd);
+                finalizeOnce();
+            }
+            else {
+                fallbackTimer = setTimeout(() => {
+                    this.host.removeEventListener('transitionend', onEnd);
+                    finalizeOnce();
+                }, fallbackMs);
+            }
+            return;
+        }
+        this.finalizeClose();
+    }
+    finalizeClose() {
+        if (this.closeFinalized)
+            return;
+        this.closeFinalized = true;
+        this.destroyContent?.();
+        this.destroyContent = null;
+        if ('hidePopover' in this.host)
+            this.host.hidePopover();
+        this.host.remove();
+        if (this.backdropElement) {
+            if ('hidePopover' in this.backdropElement)
+                this.backdropElement.hidePopover();
+            this.backdropElement.remove();
+            this.backdropElement = null;
+        }
+        if (this.spec.focus.restore !== false) {
+            const el = this.restoreFocusTarget;
+            if (el && typeof el.focus === 'function') {
+                try {
+                    el.focus({ preventScroll: true });
+                }
+                catch {
+                    try {
+                        el.focus();
+                    }
+                    catch {
+                        // noop
+                    }
+                }
+            }
+        }
+        this.afterClosedSubject.next(this.lastResult);
+        this.afterClosedSubject.complete();
+        this.parent?.children.delete(this);
+        this.onClosed();
+    }
+    getMaxTransitionTimeMs() {
+        if (typeof getComputedStyle === 'undefined')
+            return 0;
+        const style = getComputedStyle(this.panel);
+        const durations = style.transitionDuration.split(',').map((v) => v.trim());
+        const delays = style.transitionDelay.split(',').map((v) => v.trim());
+        const entries = Math.max(durations.length, delays.length);
+        let maxMs = 0;
+        for (let i = 0; i < entries; i++) {
+            const duration = durations[i] ?? durations[durations.length - 1] ?? '0ms';
+            const delay = delays[i] ?? delays[delays.length - 1] ?? '0ms';
+            const ms = this.parseCssTimeToMs(duration) + this.parseCssTimeToMs(delay);
+            maxMs = Math.max(maxMs, ms);
+        }
+        return maxMs;
+    }
+    parseCssTimeToMs(value) {
+        const v = value.trim();
+        if (!v)
+            return 0;
+        if (v.endsWith('ms')) {
+            const n = Number(v.slice(0, -2));
+            return Number.isFinite(n) ? n : 0;
+        }
+        if (v.endsWith('s')) {
+            const n = Number(v.slice(0, -1));
+            return Number.isFinite(n) ? n * 1000 : 0;
+        }
+        const n = Number(v);
+        return Number.isFinite(n) ? n : 0;
+    }
+    installFocusTrap() {
+        this.host.tabIndex = -1;
+        this.schedule(() => {
+            if (this.closed)
+                return;
+            const focusables = this.getFocusableElements();
+            this.focusElement(focusables[0] ?? this.host);
+        });
+    }
+    applySize() {
+        const size = this.spec.size;
+        if (!size)
+            return;
+        const viewport = getViewportRect();
+        const resolveMin = (value, anchorSize) => {
+            if (value === 'anchor')
+                return anchorSize;
+            if (typeof value === 'number')
+                return value;
+            return null;
+        };
+        const resolveMax = (value, viewportSize) => {
+            if (value === 'viewport')
+                return viewportSize;
+            if (typeof value === 'number')
+                return value;
+            return null;
+        };
+        const anchorRect = getAnchorRect(this.spec.anchor, viewport);
+        const minWidthPx = resolveMin(size.minWidth, anchorRect.width);
+        const minHeightPx = resolveMin(size.minHeight, anchorRect.height);
+        const maxWidthPx = resolveMax(size.maxWidth, viewport.width);
+        const maxHeightPx = resolveMax(size.maxHeight, viewport.height);
+        this.host.style.width = '';
+        this.host.style.height = '';
+        this.host.style.minWidth = '';
+        this.host.style.minHeight = '';
+        this.host.style.maxWidth = '';
+        this.host.style.maxHeight = '';
+        this.host.style.overflow = '';
+        if (minWidthPx != null && minWidthPx > 0)
+            this.host.style.minWidth = `${minWidthPx}px`;
+        if (minHeightPx != null && minHeightPx > 0)
+            this.host.style.minHeight = `${minHeightPx}px`;
+        if (size.mode === 'content') {
+            return;
+        }
+        if (size.mode === 'content-clamped') {
+            if (maxWidthPx != null)
+                this.host.style.maxWidth = `${maxWidthPx}px`;
+            if (maxHeightPx != null)
+                this.host.style.maxHeight = `${maxHeightPx}px`;
+            this.host.style.overflow = 'auto';
+            return;
+        }
+        if (maxWidthPx != null)
+            this.host.style.width = `${maxWidthPx}px`;
+        if (maxHeightPx != null)
+            this.host.style.height = `${maxHeightPx}px`;
+        this.host.style.overflow = 'auto';
+    }
+    applyA11y() {
+        const a11y = this.spec.a11y;
+        if (!a11y)
+            return;
+        if (a11y.role) {
+            this.host.setAttribute('role', a11y.role);
+        }
+        this.setAttrIfDefined('aria-label', a11y.label);
+        this.setAttrIfDefined('aria-labelledby', a11y.labelledBy);
+        this.setAttrIfDefined('aria-describedby', a11y.describedBy);
+        if (a11y.role === 'dialog' && this.spec.backdrop.kind === 'modal') {
+            this.host.setAttribute('aria-modal', 'true');
+        }
+    }
+    setAttrIfDefined(name, value) {
+        if (typeof value === 'string' && value.length > 0) {
+            this.host.setAttribute(name, value);
+            return;
+        }
+        this.host.removeAttribute(name);
+    }
+    focusElement(el) {
+        try {
+            el.focus({ preventScroll: true });
+        }
+        catch {
+            try {
+                el.focus();
+            }
+            catch {
+                // noop
+            }
+        }
+    }
+    getFocusableElements() {
+        const candidates = Array.from(this.host.querySelectorAll('a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"]),[contenteditable="true"]'));
+        return candidates.filter((el) => !this.isHidden(el));
+    }
+    isHidden(el) {
+        if (el.hasAttribute('hidden'))
+            return true;
+        if (el.getAttribute('aria-hidden') === 'true')
+            return true;
+        const style = el.style;
+        if (style.display === 'none' || style.visibility === 'hidden')
+            return true;
+        return false;
+    }
+    installRepositionTriggers() {
+        const strategy = this.spec.scroll.strategy;
+        if (strategy === 'noop')
+            return;
+        const scrollParents = this.spec.anchor.kind === 'element' ? getScrollParents(this.spec.anchor.element) : [window];
+        if (strategy === 'reposition') {
+            const onScroll = () => this.updatePosition();
+            const onResize = () => this.updatePosition();
+            for (const parent of scrollParents) {
+                if (parent === window) {
+                    window.addEventListener('scroll', onScroll, { passive: true });
+                    this.cleanupFns.push(() => window.removeEventListener('scroll', onScroll));
+                    continue;
+                }
+                parent.addEventListener('scroll', onScroll, { passive: true });
+                this.cleanupFns.push(() => parent.removeEventListener('scroll', onScroll));
+            }
+            window.addEventListener('resize', onResize, { passive: true });
+            this.cleanupFns.push(() => window.removeEventListener('resize', onResize));
+            if (typeof ResizeObserver !== 'undefined') {
+                const ro = new ResizeObserver(() => this.updatePosition());
+                ro.observe(this.host);
+                this.resizeObserver = ro;
+            }
+            return;
+        }
+        if (strategy === 'close') {
+            const onScroll = (e) => {
+                const target = e.target;
+                if (target instanceof Node && this.host.contains(target))
+                    return;
+                this.close();
+            };
+            if (typeof document !== 'undefined') {
+                document.addEventListener('scroll', onScroll, { passive: true, capture: true });
+                this.cleanupFns.push(() => document.removeEventListener('scroll', onScroll, { capture: true }));
+            }
+            window.addEventListener('scroll', onScroll, { passive: true });
+            this.cleanupFns.push(() => window.removeEventListener('scroll', onScroll));
+            for (const parent of scrollParents) {
+                if (parent === window)
+                    continue;
+                parent.addEventListener('scroll', onScroll, { passive: true });
+                this.cleanupFns.push(() => parent.removeEventListener('scroll', onScroll));
+            }
+            if (typeof ResizeObserver !== 'undefined') {
+                const ro = new ResizeObserver(() => this.updatePosition());
+                ro.observe(this.host);
+                this.resizeObserver = ro;
+            }
+        }
+    }
+    schedule(fn) {
+        if (typeof requestAnimationFrame !== 'undefined') {
+            requestAnimationFrame(() => fn());
+            return;
+        }
+        setTimeout(() => fn(), 0);
+    }
+    renderContent(content, host, inputs) {
+        switch (content.kind) {
+            case 'text': {
+                const text = inputs?.text;
+                if (typeof text !== 'string') {
+                    throw new Error('Text overlay requires inputs: { text: string }');
+                }
+                host.textContent = text;
+                return () => {
+                    host.textContent = '';
+                };
+            }
+            case 'template': {
+                const template = content.template;
+                if (!template)
+                    throw new Error('Template overlay requires a template');
+                let templateContext = inputs;
+                if (inputs != null && typeof inputs === 'object' && !('$implicit' in inputs)) {
+                    templateContext = {
+                        ...inputs,
+                        $implicit: inputs,
+                    };
+                }
+                const viewRef = template.createEmbeddedView(templateContext, this.contentInjector);
+                this.appRef.attachView(viewRef);
+                viewRef.detectChanges();
+                for (const node of viewRef.rootNodes) {
+                    host.appendChild(node);
+                }
+                return () => {
+                    this.appRef.detachView(viewRef);
+                    viewRef.destroy();
+                };
+            }
+            case 'component': {
+                const component = content.component;
+                if (!component)
+                    throw new Error('Component overlay requires a component');
+                const componentRef = createComponent(component, {
+                    environmentInjector: this.contentEnvironmentInjector,
+                    hostElement: host,
+                });
+                if (inputs && typeof inputs === 'object') {
+                    for (const [key, value] of Object.entries(inputs)) {
+                        componentRef.setInput(key, value);
+                    }
+                }
+                this.appRef.attachView(componentRef.hostView);
+                componentRef.changeDetectorRef.detectChanges();
+                return () => {
+                    this.appRef.detachView(componentRef.hostView);
+                    componentRef.destroy();
+                };
+            }
+        }
+    }
+}
+
+class CoarOverlayService {
+    appRef = inject(ApplicationRef);
+    environmentInjector = inject(EnvironmentInjector);
+    specResolvers = inject(COAR_OVERLAY_SPEC_RESOLVERS, { optional: true }) ??
+        [];
+    openOverlays = new Set();
+    globalListenersInstalled = false;
+    onDocumentPointerDown = (event) => {
+        const overlays = this.getOpenOverlaysInOrder();
+        if (overlays.length === 0)
+            return;
+        const target = event.target;
+        const topmostContaining = this.getTopmostOverlayContainingTarget(target);
+        if (topmostContaining) {
+            // When interacting with an overlay, close any child overlays (submenus) that may be open.
+            topmostContaining.closeChildren();
+            return;
+        }
+        const topmost = this.getTopmostDismissableOverlay('outsideClick');
+        if (!topmost)
+            return;
+        // For overlay trees (e.g. menus + submenus), outside-click should close the entire tree.
+        const root = topmost.getRoot();
+        if (root !== topmost && root.isDismissable('outsideClick')) {
+            root.close();
+            return;
+        }
+        topmost.close();
+    };
+    onDocumentKeyDown = (event) => {
+        if (event.key === 'Escape') {
+            const topmost = this.getTopmostDismissableOverlay('escapeKey');
+            if (!topmost)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            topmost.close();
+            return;
+        }
+        if (event.key === 'Tab') {
+            const topmost = this.getTopmostFocusTrappingOverlay();
+            if (!topmost)
+                return;
+            if (topmost.handleTabKey(event)) {
+                event.preventDefault();
+            }
+        }
+    };
+    openTemplate(template, settings, inputs) {
+        const resolved = this.resolveSpec({
+            ...settings,
+            content: { kind: 'template', template },
+        });
+        return this.attach(resolved, inputs, undefined);
+    }
+    openComponent(component, settings, inputs) {
+        const resolved = this.resolveSpec({
+            ...settings,
+            content: { kind: 'component', component },
+        });
+        return this.attach(resolved, inputs, undefined);
+    }
+    openText(settings, inputs) {
+        const resolved = this.resolveSpec({
+            ...settings,
+            content: { kind: 'text' },
+        });
+        return this.attach(resolved, inputs, undefined);
+    }
+    openTemplateAsChild(parent, template, settings, inputs, options) {
+        const resolved = this.resolveSpec({
+            ...settings,
+            content: { kind: 'template', template },
+        });
+        return this.attach(resolved, inputs, { parent, closeSiblings: options?.closeSiblings });
+    }
+    openComponentAsChild(parent, component, settings, inputs, options) {
+        const resolved = this.resolveSpec({
+            ...settings,
+            content: { kind: 'component', component },
+        });
+        return this.attach(resolved, inputs, { parent, closeSiblings: options?.closeSiblings });
+    }
+    openTextAsChild(parent, settings, inputs, options) {
+        const resolved = this.resolveSpec({
+            ...settings,
+            content: { kind: 'text' },
+        });
+        return this.attach(resolved, inputs, { parent, closeSiblings: options?.closeSiblings });
+    }
+    closeAll() {
+        for (const ref of Array.from(this.openOverlays)) {
+            ref.close();
+        }
+    }
+    resolveSpec(spec) {
+        const resolvedSpec = this.applySpecResolvers(spec);
+        const content = resolvedSpec.content;
+        if (!content) {
+            throw new Error('OverlaySpec missing content');
+        }
+        return {
+            content,
+            anchor: resolvedSpec.anchor ?? COAR_OVERLAY_DEFAULTS.anchor,
+            position: resolvedSpec.position ?? COAR_OVERLAY_DEFAULTS.position,
+            size: resolvedSpec.size ?? { mode: 'content' },
+            backdrop: resolvedSpec.backdrop ?? COAR_OVERLAY_DEFAULTS.backdrop,
+            scroll: resolvedSpec.scroll ?? COAR_OVERLAY_DEFAULTS.scroll,
+            dismiss: resolvedSpec.dismiss ?? COAR_OVERLAY_DEFAULTS.dismiss,
+            focus: resolvedSpec.focus ?? COAR_OVERLAY_DEFAULTS.focus,
+            a11y: resolvedSpec.a11y ?? COAR_OVERLAY_DEFAULTS.a11y,
+            attachment: resolvedSpec.attachment ?? COAR_OVERLAY_DEFAULTS.attachment,
+            panelClass: resolvedSpec.panelClass,
+        };
+    }
+    applySpecResolvers(spec) {
+        if (this.specResolvers.length === 0)
+            return spec;
+        let current = spec;
+        for (const resolver of this.specResolvers) {
+            const next = resolver(current);
+            current = (next ?? current);
+        }
+        return current;
+    }
+    attach(spec, inputs, options) {
+        const parent = this.getInternalRefOrNull(options?.parent);
+        // Close sibling overlays if requested (close all existing children of parent)
+        if (options?.closeSiblings && parent) {
+            parent.closeChildren();
+        }
+        const stackIndex = this.openOverlays.size;
+        const effectiveSpec = this.inheritDismissFromParent(spec, parent);
+        const ref = new CoarOverlayRef(this.appRef, this.environmentInjector, effectiveSpec, this.mergeInputs(spec.content, inputs), stackIndex, parent, () => {
+            this.openOverlays.delete(ref);
+            this.uninstallGlobalListenersIfIdle();
+        });
+        this.openOverlays.add(ref);
+        this.installGlobalListenersIfNeeded();
+        ref.open();
+        return ref;
+    }
+    inheritDismissFromParent(spec, parent) {
+        if (!parent)
+            return spec;
+        const parentHoverTree = parent.getHoverTreeDismissConfig();
+        if (!parentHoverTree?.enabled)
+            return spec;
+        const childHoverTree = spec.dismiss.hoverTree;
+        // Explicit disable in child wins.
+        if (childHoverTree?.enabled === false)
+            return spec;
+        let mergedHoverTree;
+        if (!childHoverTree) {
+            mergedHoverTree = { ...parentHoverTree };
+        }
+        else {
+            mergedHoverTree = {
+                enabled: true,
+                delayMs: childHoverTree.delayMs ?? parentHoverTree.delayMs,
+            };
+        }
+        // No change.
+        if (mergedHoverTree === childHoverTree)
+            return spec;
+        return {
+            ...spec,
+            dismiss: {
+                ...spec.dismiss,
+                hoverTree: mergedHoverTree,
+            },
+        };
+    }
+    getInternalRefOrNull(ref) {
+        if (!ref)
+            return null;
+        if (ref instanceof CoarOverlayRef)
+            return ref;
+        return null;
+    }
+    installGlobalListenersIfNeeded() {
+        if (this.globalListenersInstalled)
+            return;
+        if (typeof document === 'undefined')
+            return;
+        document.addEventListener('pointerdown', this.onDocumentPointerDown, { capture: true });
+        document.addEventListener('keydown', this.onDocumentKeyDown, { capture: true });
+        this.globalListenersInstalled = true;
+    }
+    uninstallGlobalListenersIfIdle() {
+        if (!this.globalListenersInstalled)
+            return;
+        if (this.openOverlays.size > 0)
+            return;
+        if (typeof document === 'undefined')
+            return;
+        document.removeEventListener('pointerdown', this.onDocumentPointerDown, { capture: true });
+        document.removeEventListener('keydown', this.onDocumentKeyDown, { capture: true });
+        this.globalListenersInstalled = false;
+    }
+    getOpenOverlaysInOrder() {
+        return Array.from(this.openOverlays);
+    }
+    getTopmostOverlayContainingTarget(target) {
+        const overlays = this.getOpenOverlaysInOrder();
+        for (let i = overlays.length - 1; i >= 0; i -= 1) {
+            const overlay = overlays[i];
+            if (overlay.containsEventTarget(target))
+                return overlay;
+        }
+        return null;
+    }
+    getTopmostDismissableOverlay(kind) {
+        const overlays = this.getOpenOverlaysInOrder();
+        for (let i = overlays.length - 1; i >= 0; i -= 1) {
+            const overlay = overlays[i];
+            if (overlay.isDismissable(kind)) {
+                return overlay;
+            }
+        }
+        return null;
+    }
+    getTopmostFocusTrappingOverlay() {
+        const overlays = this.getOpenOverlaysInOrder();
+        for (let i = overlays.length - 1; i >= 0; i -= 1) {
+            const overlay = overlays[i];
+            if (overlay.hasFocusTrap()) {
+                return overlay;
+            }
+        }
+        return null;
+    }
+    mergeInputs(content, inputs) {
+        if (!content.defaults)
+            return inputs;
+        if (inputs == null || typeof inputs !== 'object') {
+            return { ...content.defaults };
+        }
+        return {
+            ...content.defaults,
+            ...inputs,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarOverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarOverlayService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarOverlayService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class CoarOverlayOpenBuilder {
+    service;
+    settings;
+    constructor(service, settings = {}) {
+        this.service = service;
+        this.settings = settings;
+    }
+    fork() {
+        return new CoarOverlayOpenBuilder(this.service, { ...this.settings });
+    }
+    backdrop(value) {
+        return new CoarOverlayOpenBuilder(this.service, { ...this.settings, backdrop: value });
+    }
+    anchor(value) {
+        return new CoarOverlayOpenBuilder(this.service, { ...this.settings, anchor: value });
+    }
+    position(value) {
+        return new CoarOverlayOpenBuilder(this.service, { ...this.settings, position: value });
+    }
+    size(value) {
+        return new CoarOverlayOpenBuilder(this.service, { ...this.settings, size: value });
+    }
+    scroll(value) {
+        return new CoarOverlayOpenBuilder(this.service, { ...this.settings, scroll: value });
+    }
+    dismiss(value) {
+        return new CoarOverlayOpenBuilder(this.service, { ...this.settings, dismiss: value });
+    }
+    focus(value) {
+        return new CoarOverlayOpenBuilder(this.service, { ...this.settings, focus: value });
+    }
+    a11y(value) {
+        return new CoarOverlayOpenBuilder(this.service, { ...this.settings, a11y: value });
+    }
+    attachment(value) {
+        return new CoarOverlayOpenBuilder(this.service, { ...this.settings, attachment: value });
+    }
+    /**
+     * Add CSS class(es) to the overlay panel element.
+     * Useful for applying custom styles or size variants.
+     */
+    panelClass(value) {
+        return new CoarOverlayOpenBuilder(this.service, { ...this.settings, panelClass: value });
+    }
+    /**
+     * Applies baseline settings, without overriding fields already set on this builder.
+     * Useful for applying a preset after you've already configured part of the builder.
+     */
+    withPreset(value) {
+        const merged = { ...this.settings };
+        merged.anchor ??= value.anchor;
+        merged.position ??= value.position;
+        merged.size ??= value.size;
+        merged.backdrop ??= value.backdrop;
+        merged.scroll ??= value.scroll;
+        merged.dismiss ??= value.dismiss;
+        merged.focus ??= value.focus;
+        merged.a11y ??= value.a11y;
+        merged.attachment ??= value.attachment;
+        merged.panelClass ??= value.panelClass;
+        return new CoarOverlayOpenBuilder(this.service, merged);
+    }
+    fromTemplate(template) {
+        const settingsSnapshot = { ...this.settings };
+        return {
+            open: (inputs) => this.service.openTemplate(template, settingsSnapshot, inputs),
+            openAsChild: (parent, inputs, options) => this.service.openTemplateAsChild(parent, template, settingsSnapshot, inputs, options),
+        };
+    }
+    fromComponent(component) {
+        const settingsSnapshot = { ...this.settings };
+        return {
+            open: (inputs) => this.service.openComponent(component, settingsSnapshot, inputs),
+            openAsChild: (parent, inputs, options) => this.service.openComponentAsChild(parent, component, settingsSnapshot, inputs, options),
+        };
+    }
+    fromText() {
+        const settingsSnapshot = { ...this.settings };
+        return {
+            open: (inputs) => this.service.openText(settingsSnapshot, inputs),
+            openAsChild: (parent, inputs, options) => this.service.openTextAsChild(parent, settingsSnapshot, inputs, options),
+        };
+    }
+}
+function createOverlayBuilder(...initial) {
+    const service = inject(CoarOverlayService);
+    if (initial.length === 0) {
+        return new CoarOverlayOpenBuilder(service);
+    }
+    const merged = Object.assign({}, ...initial);
+    return new CoarOverlayOpenBuilder(service, merged);
+}
+
+const coarTooltipPreset = {
+    backdrop: { kind: 'none' },
+    scroll: { strategy: 'noop' },
+    dismiss: { outsideClick: false, escapeKey: false },
+    a11y: { role: 'tooltip' },
+    position: {
+        placement: ['top', 'bottom', 'left', 'right'],
+        offset: 8,
+        flip: true,
+        shift: true,
+    },
+    attachment: { strategy: 'body' },
+};
+const coarModalPreset = {
+    backdrop: { kind: 'modal', closeOnBackdropClick: true },
+    anchor: { kind: 'virtual', placement: 'center' },
+    focus: { trap: true, restore: true },
+    size: { mode: 'content-clamped', maxWidth: 'viewport', maxHeight: 'viewport' },
+    position: { placement: 'center', offset: 0, flip: false, shift: true },
+    a11y: { role: 'dialog' },
+    attachment: { strategy: 'body' },
+};
+const coarMenuPreset = {
+    backdrop: { kind: 'none' },
+    scroll: { strategy: 'close' },
+    dismiss: { outsideClick: true, escapeKey: true },
+    focus: { trap: false, restore: true },
+    a11y: { role: 'menu' },
+    position: {
+        placement: ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
+        offset: 4,
+        flip: true,
+        shift: true,
+    },
+};
+const coarHoverMenuPreset = {
+    ...coarMenuPreset,
+    dismiss: {
+        outsideClick: true,
+        escapeKey: true,
+        hoverTree: { enabled: true, delayMs: 300 },
+    },
+};
+
+// Public API: one way to create & open overlays.
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { COAR_MENU_PARENT, COAR_OVERLAY_DEFAULTS, COAR_OVERLAY_REF, COAR_OVERLAY_SPEC_RESOLVERS, CoarOverlayOpenBuilder, coarHoverMenuPreset, coarMenuPreset, coarModalPreset, coarTooltipPreset, createOverlayBuilder };
+//# sourceMappingURL=cocoar-ui-overlay.mjs.map