import { getMode, h, Host } from "@stencil/core";
import { ripple } from '../../utils/ripple';
export class Button {
    constructor() {
        // #endregion
        // #region Forwarded to native button
        this.disabled = false;
        this.type = 'button';
        // #endregion
        this._iconOnly = false;
        this.handleBlur = () => {
            this.hasFocus = false;
        };
        this.handleFocus = () => {
            this.hasFocus = true;
        };
        this.handleMouseDown = (event) => {
            if (this.disabled)
                return;
            ripple(this.el.shadowRoot.querySelector('button'), event);
        };
        this.handleSlotChange = () => {
            this._iconOnly = !!this.icon && !this.el.childNodes.length;
        };
    }
    componentWillLoad() {
        this.handleSlotChange();
    }
    componentDidLoad() {
        const slot = this.el.shadowRoot.querySelector('slot');
        slot === null || slot === void 0 ? void 0 : slot.addEventListener('slotchange', this.handleSlotChange);
    }
    renderIcon() {
        const mode = getMode(this);
        const size = this.el.clientHeight + 'px';
        const style = mode === 'bce-fab' ? undefined : { width: size, height: size };
        return (h("bce-icon", { style: style, raw: this.icon, spin: this.iconSpin, "fixed-width": true }));
    }
    render() {
        return (h(Host, { onBlur: this.handleBlur, onFocus: this.handleFocus, onMouseDown: this.handleMouseDown },
            h("button", { class: { 'icon-only': this._iconOnly }, disabled: this.disabled, form: this.form, formaction: this.formAction, formenctype: this.formEnctype, formmethod: this.formMethod, formtarget: this.formTarget, type: this.type },
                this.icon && this.renderIcon(),
                h("span", null,
                    h("slot", null)))));
    }
    static get is() { return "bce-button"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "bce-fab": ["bce-button.fab.scss"],
        "bce-menu": ["bce-button.menu.scss"],
        "bucket": ["bce-button.bucket.scss"],
        "default": ["bce-button.scss"]
    }; }
    static get styleUrls() { return {
        "bce-fab": ["bce-button.fab.css"],
        "bce-menu": ["bce-button.menu.css"],
        "bucket": ["bce-button.bucket.css"],
        "default": ["bce-button.css"]
    }; }
    static get properties() { return {
        "color": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "color",
            "reflect": true
        },
        "design": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "ButtonDesign",
                "resolved": "\"contained\" | \"outline\" | \"text\"",
                "references": {
                    "ButtonDesign": {
                        "location": "import",
                        "path": "../../models/button-design"
                    }
                }
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "design",
            "reflect": true
        },
        "icon": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "icon",
            "reflect": true
        },
        "iconSpin": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "icon-spin",
            "reflect": true
        },
        "block": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "block",
            "reflect": true
        },
        "small": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "small",
            "reflect": true
        },
        "hasFocus": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "focus",
            "reflect": true
        },
        "upload": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "upload",
            "reflect": true
        },
        "disabled": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "disabled",
            "reflect": true,
            "defaultValue": "false"
        },
        "form": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "form",
            "reflect": true
        },
        "formAction": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "formaction",
            "reflect": false
        },
        "formEnctype": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "| 'application/x-www-form-urlencoded'\n    | 'multipart/form-data'\n    | 'text/plain'",
                "resolved": "\"application/x-www-form-urlencoded\" | \"multipart/form-data\" | \"text/plain\"",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "formenctype",
            "reflect": false
        },
        "formMethod": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'get' | 'post'",
                "resolved": "\"get\" | \"post\"",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "formmethod",
            "reflect": false
        },
        "formTarget": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "formtarget",
            "reflect": false
        },
        "type": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'button' | 'reset' | 'submit'",
                "resolved": "\"button\" | \"reset\" | \"submit\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "type",
            "reflect": true,
            "defaultValue": "'button'"
        }
    }; }
    static get states() { return {
        "_iconOnly": {}
    }; }
    static get elementRef() { return "el"; }
}
