import { r as registerInstance, h, H as Host, g as getElement } from './index-6191c26c.js';
import { c as cls } from './helpers-3d0ba5b1.js';
import { c as computePosition, f as flip, s as shift, o as offset } from './floating-ui.dom.esm-6802681c.js';

const styleCss = "x-dropdown{display:inherit;text-align:inherit}x-dropdown .dropdown-container{display:block;width:-webkit-max-content;width:-moz-max-content;width:max-content;top:0;left:0;position:absolute;z-index:10000;visibility:hidden;opacity:0;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;pointer-events:none}x-dropdown .dropdown-container.dropdown-show{pointer-events:initial;opacity:1;visibility:visible}";
const XDropdownStyle0 = styleCss;

const XDropdown = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.show = false;
        this.align = 'bottom';
        this.hover = false;
        this.syncWidth = false;
        this.offset = 0;
    }
    /**
     * Update setting on align change
     */
    watchAlignAndShow() {
        this.updateDropdownContainer();
    }
    /**
     * On element is mounted
     */
    componentDidLoad() {
        this.container = this.el.querySelector('.dropdown-container');
        this.updateDropdownContainer();
        this.el.addEventListener('mouseenter', this.onMouseEnterOnContainer.bind(this));
        this.el.addEventListener('mouseleave', this.onMouseLeaveOnContainer.bind(this));
    }
    /**
     * On component did destroyed hook
     */
    disconectedCallback() {
        if (this.el) {
            this.el.removeEventListener('mouseenter', this.onMouseEnterOnContainer);
            this.el.removeEventListener('mouseleave', this.onMouseLeaveOnContainer);
        }
    }
    /**
     * Event triggered on mouse enter hover container
     */
    onMouseEnterOnContainer() {
        if (this.hover) {
            this.show = true;
        }
    }
    /**
     * Event triggered on mouse leave hover container
     */
    onMouseLeaveOnContainer() {
        if (this.hover) {
            this.show = false;
        }
    }
    /**
     * Update the instance or create
     */
    updateDropdownContainer() {
        if (this.syncWidth) {
            this.container.style.maxWidth = `${this.el.offsetWidth}px`;
            this.container.style.width = '100%';
        }
        else {
            this.container.style.maxWidth = 'auto';
            this.container.style.width = 'auto';
        }
        setTimeout(() => {
            computePosition(this.el, this.container, {
                placement: this.align,
                middleware: [flip(), shift({ padding: 10 }), offset(this.offset)],
            }).then(({ x, y }) => {
                this.container.style.left = `${x}px`;
                this.container.style.top = `${y}px`;
            });
        }, 50);
    }
    /**
     * Show tooltip overlay
     */
    async display(show) {
        this.show = show;
    }
    /**
     * Render element
     */
    render() {
        return h(Host, { key: '48df29d08ae8077798b586c71443872e1894f0bf' }, h("slot", { key: '4c623391741dfad19c2e61e20a57327f0ca13c92' }), h("div", { key: '2d058e90c91481f871c41354c964ce87975e7732', class: cls('dropdown-container', { 'dropdown-show': this.show, 'dropdown-hover': this.hover }) }, h("slot", { key: '71cc31936e0aefa2fd1570ede53838f1278139ff', name: "dropdown" })));
    }
    get el() { return getElement(this); }
    static get watchers() { return {
        "align": ["watchAlignAndShow"],
        "show": ["watchAlignAndShow"]
    }; }
};
XDropdown.style = XDropdownStyle0;

export { XDropdown as x_dropdown };
