import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DBTJNfo7.js';
import { c as createRandomString } from './random-string-JbKhhoXs.js';
import { E as ESCAPE } from './keycodes-rI0IeKpx.js';
import { f as focusTriggerElement, z as zipObject } from './focus-trigger-element-6aEStEKM.js';
import './_assignValue-DkGAX8ec.js';
import './_baseAssignValue-C8Uwn8zr.js';
import './_defineProperty-yVdnnt__.js';
import './_getNative-aN4R8EiP.js';
import './eq-D7VMHFyO.js';
import './isObject-BJQylLSL.js';

/**
 * Check if an element is a descendant of another
 *
 * If the child element is a descendant of a limel-portal, this function will
 * go back through the portal and check the original tree recursively
 *
 * @param element - the parent element
 * @param child - the child element to check
 * @returns `true` if child is a descendant of element, taking
 * portals into account
 */
function portalContains(element, child) {
    var _a;
    if (element.contains(child) || ((_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(child))) {
        return true;
    }
    const parent = findParent(child);
    if (!parent) {
        return false;
    }
    return portalContains(element, parent);
}
function findParent(element) {
    const portal = element.closest('.limel-portal--container');
    if (portal) {
        return portal.portalSource;
    }
    const rootNode = element.getRootNode();
    return rootNode.host;
}

const popoverCss = () => `.trigger-anchor{display:inline-block;position:relative}`;

const Popover = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.close = createEvent(this, "close");
        /**
         * True if the content within the popover should be visible
         */
        this.open = false;
        this.shouldRestoreFocusOnClose = false;
        this.handleGlobalKeyPress = (event) => {
            if (event.key !== ESCAPE) {
                return;
            }
            event.stopPropagation();
            event.preventDefault();
            this.requestCloseAndRestoreFocus();
        };
        this.requestCloseAndRestoreFocus = () => {
            this.shouldRestoreFocusOnClose = true;
            this.close.emit();
        };
        this.setTriggerRef = (elm) => {
            this.triggerSlot = elm;
        };
        this.focusTrigger = () => {
            var _a, _b;
            const trigger = (_b = (_a = this.triggerSlot) === null || _a === void 0 ? void 0 : _a.assignedElements()) === null || _b === void 0 ? void 0 : _b[0];
            focusTriggerElement(trigger);
        };
        this.setTriggerAttributes = (element) => {
            const attributes = {
                'aria-haspopup': true,
                'aria-expanded': this.open,
                'aria-controls': this.portalId,
                role: 'button',
            };
            for (const [key, value] of Object.entries(attributes)) {
                if (value) {
                    element.setAttribute(key, String(value));
                }
                else {
                    element.removeAttribute(key);
                }
            }
        };
        this.portalId = createRandomString();
        this.globalClickListener = this.globalClickListener.bind(this);
    }
    watchOpen() {
        this.setupGlobalHandlers();
        if (!this.open && this.shouldRestoreFocusOnClose) {
            this.shouldRestoreFocusOnClose = false;
            setTimeout(this.focusTrigger, 0);
        }
    }
    componentWillLoad() {
        this.setupGlobalHandlers();
    }
    componentDidRender() {
        if (!this.triggerSlot) {
            return;
        }
        // eslint-disable-next-line unicorn/no-array-for-each
        this.triggerSlot.assignedElements().forEach(this.setTriggerAttributes);
    }
    setupGlobalHandlers() {
        if (this.open) {
            document.addEventListener('click', this.globalClickListener, {
                capture: true,
            });
            document.addEventListener('keydown', this.handleGlobalKeyPress);
        }
        else {
            document.removeEventListener('click', this.globalClickListener);
            document.removeEventListener('keydown', this.handleGlobalKeyPress);
        }
    }
    render() {
        const cssProperties = this.getCssProperties();
        const popoverZIndex = getComputedStyle(this.host).getPropertyValue('--popover-z-index');
        return (h("div", { key: '7bc94b0e636ab16a04e76947731eb815f9a33e38', class: "trigger-anchor" }, h("slot", { key: 'e35b20eb6e38755cd50f71ada0413efcc79ce9e0', name: "trigger", ref: this.setTriggerRef }), h("limel-portal", { key: '397107a1f1fa9f796f0801da60df81084a0862ea', visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, h("limel-popover-surface", { key: 'f63f011a8d529a68b535fcbed4685a5bb508dded', contentCollection: this.host.children, style: cssProperties }))));
    }
    globalClickListener(event) {
        const element = event.target;
        const clickedInside = portalContains(this.host, element);
        if (this.open && !clickedInside) {
            event.stopPropagation();
            event.preventDefault();
            this.close.emit();
        }
    }
    getCssProperties() {
        const propertyNames = [
            '--popover-surface-width',
            '--popover-body-background-color',
            '--popover-border-radius',
            '--popover-box-shadow',
        ];
        const style = getComputedStyle(this.host);
        const values = propertyNames.map((property) => {
            return style.getPropertyValue(property);
        });
        return zipObject(propertyNames, values);
    }
    get host() { return getElement(this); }
    static get watchers() { return {
        "open": [{
                "watchOpen": 0
            }]
    }; }
};
Popover.style = popoverCss();

const popoverSurfaceCss = () => `@charset "UTF-8";:host(limel-popover-surface){isolation:isolate;position:relative;display:flex;width:var(--popover-surface-width, auto);max-height:inherit;max-width:calc(100vw - 2rem);margin:0 0.25rem}.limel-popover-surface{flex:1;min-width:0;min-height:0;border-radius:var(--popover-border-radius, 0.75rem);box-shadow:var(--popover-box-shadow, var(--shadow-depth-16));backdrop-filter:blur(0.3125rem);-webkit-backdrop-filter:blur(0.3125rem)}.limel-popover-surface:after{transition:opacity 0.4s ease;pointer-events:none;content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;opacity:0.95;border-radius:var(--popover-border-radius, 0.75rem);background-color:var(--popover-body-background-color, var(--lime-elevated-surface-background-color))}.limel-popover-surface:focus{outline:none}.limel-popover-surface:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.limel-popover-surface:focus:after,.limel-popover-surface:focus-within:after{opacity:1}.limel-popover-surface>*{box-sizing:border-box}`;

const PopoverSurface = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    componentDidLoad() {
        this.appendElement();
    }
    render() {
        return h("div", { key: '2ade664e817c3559b6721f0567736c8942afd2f1', class: "limel-popover-surface", tabindex: "0" });
    }
    appendElement() {
        const portalContainer = this.host.shadowRoot.querySelector('.limel-popover-surface');
        const childElementsCopy = [...this.contentCollection];
        for (const child of childElementsCopy) {
            if (child.slot === 'trigger') {
                continue;
            }
            portalContainer.append(child);
        }
    }
    get host() { return getElement(this); }
};
PopoverSurface.style = popoverSurfaceCss();

export { Popover as limel_popover, PopoverSurface as limel_popover_surface };
