'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-292cc870.js');
const helpers = require('./helpers-987f948e.js');
const floatingUi_dom_esm = require('./floating-ui.dom.esm-b52c5d27.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) {
        index.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(() => {
            floatingUi_dom_esm.computePosition(this.el, this.container, {
                placement: this.align,
                middleware: [floatingUi_dom_esm.flip(), floatingUi_dom_esm.shift({ padding: 10 }), floatingUi_dom_esm.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 index.h(index.Host, { key: '5f8255008c184d7631ccb4cd9551b116b5de5d41' }, index.h("slot", { key: 'e1ba19bc029636a57da7cc39b996d6bb074577d6' }), index.h("div", { key: 'cf2519e2ac095151a8a32749dd1d3afd0feefb83', class: helpers.cls('dropdown-container', { 'dropdown-show': this.show, 'dropdown-hover': this.hover }) }, index.h("slot", { key: 'd272d43ac171bafd22fd83aba86bd693cbc87360', name: "dropdown" })));
    }
    get el() { return index.getElement(this); }
    static get watchers() { return {
        "align": ["onAlignWatch"],
        "show": ["onAlignWatch"]
    }; }
};
XDropdown.style = XDropdownStyle0;

exports.x_dropdown = XDropdown;
