import './bce-element-icons';
import { h } from "@stencil/core";
export class BceElementFab {
    constructor() {
        this.icon = 'fas:plus';
        this.disabled = false;
        this.active = false;
        this.handleClick = () => {
            this.active = !this.active;
        };
        this.disableClick = (event) => {
            if (this.disabled)
                event.stopPropagation();
        };
    }
    get buttons() {
        const container = this.el.querySelector('div');
        if (!container)
            return [];
        const children = Array.from(container.children);
        const buttons = children.filter(c => c.tagName !== 'bce-button');
        return buttons;
    }
    updateButtonColor() {
        for (const button of this.buttons)
            button.color = this.color;
    }
    componentDidLoad() {
        this.updateButtonColor();
        for (const button of this.buttons) {
            // Always use the default type for internal buttons
            button.type = undefined;
            // Ensure that there is always an icon
            if (!button.icon)
                button.icon = 'far:square';
            // Deactivate the FAB overlay whenever one of the options is pressed. Call
            // the original onclick handler afterwards.
            const { onclick } = button;
            button.onclick = event => {
                this.handleClick();
                if (onclick)
                    onclick.apply(button, [event]);
            };
        }
    }
    render() {
        return [
            h("button", { disabled: this.disabled, onClick: this.handleClick },
                h("bce-icon", { raw: this.icon, size: "lg", onClick: this.disableClick, "fixed-width": true })),
            h("div", null,
                h("slot", null))
        ];
    }
    static get is() { return "bce-element-fab"; }
    static get originalStyleUrls() { return {
        "$": ["bce-element-fab.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["bce-element-fab.css"]
    }; }
    static get properties() { return {
        "color": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string | undefined",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "color",
            "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:plus'"
        },
        "disabled": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "disabled",
            "reflect": true,
            "defaultValue": "false"
        },
        "active": {
            "type": "boolean",
            "mutable": true,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "active",
            "reflect": true,
            "defaultValue": "false"
        }
    }; }
    static get elementRef() { return "el"; }
    static get watchers() { return [{
            "propName": "color",
            "methodName": "updateButtonColor"
        }]; }
}
