var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, privateMap, value) {
    if (!privateMap.has(receiver)) {
        throw new TypeError("attempted to set private field on non-instance");
    }
    privateMap.set(receiver, value);
    return value;
};
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, privateMap) {
    if (!privateMap.has(receiver)) {
        throw new TypeError("attempted to get private field on non-instance");
    }
    return privateMap.get(receiver);
};
var _items, _menu;
import { h } from "@stencil/core";
import { Icon } from '../bce-icon/bce-icon';
import { MenuControl } from '../../utils/menu-control';
import { ripple } from '../../utils/ripple';
export class Fab {
    constructor() {
        this.icon = Icon.DEFAULT_ICON.iconName;
        _items.set(this, []);
        _menu.set(this, void 0);
        this.handleMouseDown = (event) => {
            if (this.disabled)
                return;
            ripple(event.target, event);
        };
        this.handleSlotChange = () => {
            var _a;
            __classPrivateFieldSet(this, _items, Array.from(this.el.querySelectorAll('bce-button')));
            (_a = __classPrivateFieldGet(this, _menu)) === null || _a === void 0 ? void 0 : _a.setItems(__classPrivateFieldGet(this, _items));
            for (const item of __classPrivateFieldGet(this, _items))
                this.initButton(item);
        };
        this.disableClick = (event) => {
            if (this.disabled)
                event.stopPropagation();
        };
    }
    get trigger() {
        const root = this.el.shadowRoot;
        return root.querySelector('.trigger');
    }
    watch() {
        for (const button of __classPrivateFieldGet(this, _items))
            this.propagateState(button);
    }
    async next() {
        var _a;
        return (_a = __classPrivateFieldGet(this, _menu)) === null || _a === void 0 ? void 0 : _a.next();
    }
    async prev() {
        var _a;
        return (_a = __classPrivateFieldGet(this, _menu)) === null || _a === void 0 ? void 0 : _a.prev();
    }
    async toggle(active = !this.active) {
        if (__classPrivateFieldGet(this, _items).length)
            this.active = active;
    }
    componentDidLoad() {
        __classPrivateFieldSet(this, _menu, new MenuControl({
            parent: this.el,
            trigger: this.trigger,
            onToggle: this.toggle.bind(this)
        }));
        const slot = this.el.shadowRoot.querySelector('slot');
        slot === null || slot === void 0 ? void 0 : slot.addEventListener('slotchange', this.handleSlotChange);
        this.handleSlotChange();
    }
    componentDidUnload() {
        if (__classPrivateFieldGet(this, _menu))
            __classPrivateFieldGet(this, _menu).dispose();
    }
    initButton(button) {
        this.propagateState(button);
        // Always use default design for internal buttons
        button.design = undefined;
        // Ensure that there is always an icon
        button.icon = button.icon || Icon.DEFAULT_ICON.iconName;
    }
    propagateState(button) {
        if (!this.active)
            button.dataset.inactive = '';
        else
            delete button.dataset.inactive;
        if (this.inline)
            button.dataset.inline = '';
        else
            delete button.dataset.inline;
    }
    renderMenu() {
        return (h("div", { role: "menu" },
            h("slot", null)));
    }
    render() {
        return [
            !this.inline && this.renderMenu(),
            h("button", { class: "trigger", disabled: this.disabled, onClick: this.disableClick, onMouseDown: this.handleMouseDown, "aria-haspopup": "menu", "aria-expanded": this.active },
                this.label && (h("div", { class: "label" },
                    h("span", null, this.label))),
                h("bce-icon", { raw: this.icon, size: "lg", "fixed-width": true })),
            this.inline && this.renderMenu(),
            h("div", { class: "backdrop", onClick: () => this.toggle(false) })
        ];
    }
    static get is() { return "bce-fab"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["bce-fab.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["bce-fab.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
        },
        "color": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "color",
            "reflect": true
        },
        "disabled": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "disabled",
            "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": "Icon.DEFAULT_ICON.iconName"
        },
        "inline": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "inline",
            "reflect": true
        },
        "label": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label",
            "reflect": true
        }
    }; }
    static get methods() { return {
        "next": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "prev": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "toggle": {
            "complexType": {
                "signature": "(active?: boolean) => Promise<void>",
                "parameters": [{
                        "tags": [],
                        "text": ""
                    }],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "el"; }
    static get watchers() { return [{
            "propName": "active",
            "methodName": "watch"
        }, {
            "propName": "inline",
            "methodName": "watch"
        }]; }
}
_items = new WeakMap(), _menu = new WeakMap();
