import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { c as cls } from './helpers.js';
import { c as computePosition, f as flip, s as shift, o as offset } from './floating-ui.dom.esm.js';

const styleCss = "x-dropdown{display:inherit;text-align:inherit}x-dropdown .dropdown-container{display:none;width:-webkit-max-content;width:-moz-max-content;width:max-content;top:0;left:0;position:absolute;z-index:10000}x-dropdown .dropdown-container.dropdown-show{display:block;-webkit-animation:0.3s fadeIn;animation:0.3s fadeIn}";
const XDropdownStyle0 = styleCss;

const XDropdown$1 = /*@__PURE__*/ proxyCustomElement(class XDropdown extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.show = false;
        this.align = 'bottom';
        this.hover = false;
        this.syncWidth = false;
        this.offset = 0;
    }
    /**
     * Update setting on align change
     */
    onAlignWatch() {
        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: '5f8255008c184d7631ccb4cd9551b116b5de5d41' }, h("slot", { key: 'e1ba19bc029636a57da7cc39b996d6bb074577d6' }), h("div", { key: 'cf2519e2ac095151a8a32749dd1d3afd0feefb83', class: cls('dropdown-container', { 'dropdown-show': this.show, 'dropdown-hover': this.hover }) }, h("slot", { key: 'd272d43ac171bafd22fd83aba86bd693cbc87360', name: "dropdown" })));
    }
    get el() { return this; }
    static get watchers() { return {
        "align": ["onAlignWatch"],
        "show": ["onAlignWatch"]
    }; }
    static get style() { return XDropdownStyle0; }
}, [4, "x-dropdown", {
        "show": [1540],
        "align": [1],
        "hover": [4],
        "syncWidth": [4, "sync-width"],
        "offset": [2],
        "display": [64]
    }, undefined, {
        "align": ["onAlignWatch"],
        "show": ["onAlignWatch"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["x-dropdown"];
    components.forEach(tagName => { switch (tagName) {
        case "x-dropdown":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, XDropdown$1);
            }
            break;
    } });
}

const XDropdown = XDropdown$1;
const defineCustomElement = defineCustomElement$1;

export { XDropdown, defineCustomElement };
