import { r as registerInstance, h } from './chunk-7400f9fd.js';

/**
 * S'utilise avec des materials-list-item à placer à l'intérieur du tag.
 * <materials-dropdown>
 *   <materials-list-item></materials-list-item>
 * </materials-dropdown>
 */
class Dropdown {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    componentDidLoad() {
        this.materialsMenuEl.setPosition(this.menuPosition);
        if (this.buttonType)
            this.buttonEl[this.buttonType] = true;
    }
    componentWillUpdate() {
        if (this.buttonType)
            this.buttonEl[this.buttonType] = true;
    }
    async openMenu() {
        this.materialsMenuEl.open();
    }
    async closeMenu() {
        this.materialsMenuEl.close();
    }
    async isOpen() {
        return this.materialsMenuEl.isOpen();
    }
    renderIconHelper() {
        return this.iconHelper ? h("materials-icon", { style: { 'margin-left': '8px', 'margin-right': '-8px' }, name: this.iconHelper }) : '';
    }
    render() {
        return (h("div", null, this.iconOnly &&
            h("materials-icon-button", { onClick: () => this.openMenu(), icon: this.icon }), !this.iconOnly &&
            h("materials-button", { color: this.color, onClick: () => this.openMenu(), icon: this.icon, ref: el => this.buttonEl = el }, this.menuTitle, this.renderIconHelper()), h("materials-menu", { ref: el => this.materialsMenuEl = el }, h("slot", null))));
    }
    static get style() { return "materials-list-item>a{color:inherit;text-decoration:none}materials-menu{white-space:nowrap}"; }
}

export { Dropdown as materials_dropdown };
