import { r as registerInstance, h, H as Host, g as getElement } from './index-aed5ae27.js';
import { c as cls } from './helpers-ea9d01ce.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: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 = 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
     */
    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: '71e5bd83345ae6f95e820a7c4bbe477c2593436d' }, h("slot", { key: 'c68838e07e036ad4196ac0c44d16708c89c67313' }), h("div", { key: 'ddb1c6581583632112eccf1a00163e75dbe9b243', class: cls('dropdown-container', { 'dropdown-show': this.show, 'dropdown-hover': this.hover }) }, h("slot", { key: '6be924779eae483e258cdb9ade1c9fbe72677fae', name: "dropdown" })));
    }
    get el() { return getElement(this); }
    static get watchers() { return {
        "align": ["onAlignWatch"],
        "show": ["onAlignWatch"]
    }; }
};
XDropdown.style = XDropdownStyle0;

export { XDropdown as x_dropdown };
