import { library } from '@fortawesome/fontawesome-svg-core';
import * as FAS from '@fortawesome/free-solid-svg-icons';
import { createPopper } from '@popperjs/core';
import { h, Host } from "@stencil/core";
library.add(FAS.faEllipsisH);
export class BceMenu {
    constructor() {
        this.icon = 'fas:ellipsis-h';
        this.placement = 'bottom-start';
        this.handleBlur = async () => {
            await new Promise(res => setTimeout(res, 200));
            this.active = false;
        };
        this.handleClick = (event) => {
            this.active = !this.active;
            if (this._popper)
                this._popper.update();
            event.stopPropagation();
        };
    }
    async reattach() {
        const reference = this.el.shadowRoot.querySelector('.trigger');
        const dropdown = this.el.shadowRoot.querySelector('.dropdown');
        if (this._popper)
            this._popper.destroy();
        this._popper = createPopper(reference, dropdown, {
            placement: this.placement,
            strategy: 'fixed'
        });
    }
    componentDidLoad() {
        this.reattach();
    }
    componentDidUnload() {
        if (this._popper)
            this._popper.destroy();
    }
    render() {
        return (h(Host, { onClick: this.handleClick, onBlur: this.handleBlur },
            h("bce-button", { class: "trigger", design: "text", icon: this.icon }),
            h("div", { class: "dropdown", "data-active": this.active },
                h("slot", null))));
    }
    static get is() { return "bce-menu"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["bce-menu.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["bce-menu.css"]
    }; }
    static get properties() { return {
        "active": {
            "type": "boolean",
            "mutable": true,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "active",
            "reflect": true
        },
        "icon": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "icon",
            "reflect": true,
            "defaultValue": "'fas:ellipsis-h'"
        },
        "placement": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "placement",
            "reflect": true,
            "defaultValue": "'bottom-start'"
        }
    }; }
    static get methods() { return {
        "reattach": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    },
                    "HTMLElement": {
                        "location": "global"
                    },
                    "Placement": {
                        "location": "import",
                        "path": "@popperjs/core"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "el"; }
}
