import { h, Host } from "@stencil/core";
export class Button {
    constructor() {
        this.handleClick = (ev) => {
            if (!this.disabled) {
                this.bdsClick.emit(ev);
                if (ev.key === 'Enter') {
                    this.bdsClick.emit(ev);
                }
                const form = this.el.closest('form');
                if (form) {
                    ev.preventDefault();
                    const fakeButton = document.createElement('button');
                    fakeButton.type = this.type;
                    fakeButton.style.display = 'none';
                    form.appendChild(fakeButton);
                    fakeButton.click();
                    fakeButton.remove();
                }
            }
        };
        this.block = false;
        this.disabled = false;
        this.size = 'standard';
        this.variant = 'primary';
        this.icon = null;
        this.arrow = false;
        this.type = 'button';
        this.iconTheme = 'outline';
        this.typeIcon = 'icon';
        this.bdsLoading = false;
        this.bdsLoadingVariant = 'primary';
        this.bdsLoadingColor = 'main';
        this.dataTest = null;
    }
    getSizeClass() {
        return this.arrow || !!this.icon ? `button--size-${this.size}--icon` : `button--size-${this.size}`;
    }
    renderIcon() {
        return (this.icon && (h("div", { class: { button__icon: true, hide: this.bdsLoading && true } }, h("bds-icon", { class: { icon_buttom: true }, name: this.icon, theme: this.iconTheme, type: this.typeIcon, color: "inherit" }))));
    }
    renderText() {
        return (h("div", { class: {
                button__content: true,
                [`button__content__${this.variant}`]: true,
                [`button__content__${this.variant}--disabled`]: this.disabled,
                hide: this.bdsLoading && true,
            } }, h("bds-typo", { class: { typo_buttom: true }, variant: "fs-14", lineHeight: "simple", bold: "bold" }, h("slot", null))));
    }
    renderArrow() {
        return (this.arrow && (h("div", { class: { button__arrow: true, hide: this.bdsLoading && true } }, h("bds-icon", { class: { arrow_buttom: true }, name: "arrow-right", color: "inherit" }))));
    }
    renderLoadingSpinner() {
        const loadingColor = this.variant == 'primary' || this.variant == 'delete' ? 'light' : 'main';
        if (this.size === 'short') {
            return h("bds-loading-spinner", { size: "extra-small", color: loadingColor });
        }
        else {
            return h("bds-loading-spinner", { size: "small", color: loadingColor });
        }
    }
    render() {
        const sizeClass = this.getSizeClass();
        return (h(Host, { key: '4601369c7459e90f0776155d63b49d04418f201b', class: { host: true, block: this.block } }, h("div", { key: 'fb277181bcc77e94895d8b4296c5d882c60cdf73', tabindex: "0", onKeyDown: (ev) => this.handleClick(ev), class: "focus" }), h("button", { key: 'a65802aabd8bab7e7e8a94a3ba3309c4bf8c0fcb', onClick: (ev) => this.handleClick(ev), disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : 'false', "aria-live": "assertive", type: this.type, class: {
                button: true,
                'button--block': this.block,
                [`button__${this.variant}`]: true,
                [`button__${this.variant}--disabled`]: this.disabled,
                [sizeClass]: true,
                'button--size-icon--left': !!this.icon,
                'button--size-icon--right': this.arrow,
            }, part: "button", "data-test": this.dataTest }, [this.bdsLoading && this.renderLoadingSpinner(), this.renderIcon(), this.renderText(), this.renderArrow()])));
    }
    static get is() { return "bds-button"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["button.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["button.css"]
        };
    }
    static get properties() {
        return {
            "block": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If true, the base button will be disabled."
                },
                "attribute": "block",
                "reflect": false,
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If true, the base button will be disabled."
                },
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ButtonSize",
                    "resolved": "\"short\" | \"standard\" | \"tall\"",
                    "references": {
                        "ButtonSize": {
                            "location": "local",
                            "path": "/home/runner/work/blip-ds/blip-ds/src/components/button/button.tsx",
                            "id": "src/components/button/button.tsx::ButtonSize"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Size. Entered as one of the size. Can be one of:\r\n'tall', 'standard', 'short';"
                },
                "attribute": "size",
                "reflect": false,
                "defaultValue": "'standard'"
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ButtonVariant",
                    "resolved": "\"dashed\" | \"delete\" | \"facebook\" | \"ghost\" | \"primary\" | \"secondary\" | \"secondary--white\" | \"tertiary\"",
                    "references": {
                        "ButtonVariant": {
                            "location": "local",
                            "path": "/home/runner/work/blip-ds/blip-ds/src/components/button/button.tsx",
                            "id": "src/components/button/button.tsx::ButtonVariant"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Variant. Entered as one of the variant. Can be one of:\r\n'primary', 'secondary', 'ghost', 'dashed';"
                },
                "attribute": "variant",
                "reflect": false,
                "defaultValue": "'primary'"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "used for add icon in input left. Uses the bds-icon component."
                },
                "attribute": "icon",
                "reflect": true,
                "defaultValue": "null"
            },
            "arrow": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The arrow button"
                },
                "attribute": "arrow",
                "reflect": false,
                "defaultValue": "false"
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ButtonType",
                    "resolved": "\"button\" | \"reset\" | \"submit\"",
                    "references": {
                        "ButtonType": {
                            "location": "local",
                            "path": "/home/runner/work/blip-ds/blip-ds/src/components/button/button.tsx",
                            "id": "src/components/button/button.tsx::ButtonType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The type of the button. Can be one of:\r\n'button', 'submit', 'reset';"
                },
                "attribute": "type",
                "reflect": false,
                "defaultValue": "'button'"
            },
            "iconTheme": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IconTheme",
                    "resolved": "\"outline\" | \"solid\"",
                    "references": {
                        "IconTheme": {
                            "location": "local",
                            "path": "/home/runner/work/blip-ds/blip-ds/src/components/button/button.tsx",
                            "id": "src/components/button/button.tsx::IconTheme"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The theme of the icon. Can be one of:\r\n'outline', 'solid';"
                },
                "attribute": "icon-theme",
                "reflect": true,
                "defaultValue": "'outline'"
            },
            "typeIcon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IconType",
                    "resolved": "\"emoji\" | \"icon\" | \"logo\"",
                    "references": {
                        "IconType": {
                            "location": "local",
                            "path": "/home/runner/work/blip-ds/blip-ds/src/components/button/button.tsx",
                            "id": "src/components/button/button.tsx::IconType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The type of the icon. Can be one of:\r\n'icon', 'logo', 'emoji';"
                },
                "attribute": "type-icon",
                "reflect": true,
                "defaultValue": "'icon'"
            },
            "bdsLoading": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If true, shows the loading spinner"
                },
                "attribute": "bds-loading",
                "reflect": false,
                "defaultValue": "false"
            },
            "bdsLoadingVariant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "LoadingSpinnerVariant",
                    "resolved": "\"delete\" | \"ghost\" | \"primary\" | \"secondary\" | \"tertiary\"",
                    "references": {
                        "LoadingSpinnerVariant": {
                            "location": "import",
                            "path": "../loading-spinner/loading-spinner",
                            "id": "src/components/loading-spinner/loading-spinner.tsx::LoadingSpinnerVariant"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If not empty, Sets the color of the spinner, can be 'primary','secondary' or 'ghost'"
                },
                "attribute": "bds-loading-variant",
                "reflect": false,
                "defaultValue": "'primary'"
            },
            "bdsLoadingColor": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "colorsVariants",
                    "resolved": "\"light\" | \"main\"",
                    "references": {
                        "colorsVariants": {
                            "location": "import",
                            "path": "../loading-spinner/loading-spinner",
                            "id": "src/components/loading-spinner/loading-spinner.tsx::colorsVariants"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If not empty, Sets the color of the spinner, can be 'primary','secondary' or 'ghost'"
                },
                "attribute": "bds-loading-color",
                "reflect": false,
                "defaultValue": "'main'"
            },
            "dataTest": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Data test is the prop to specifically test the component action object."
                },
                "attribute": "data-test",
                "reflect": false,
                "defaultValue": "null"
            }
        };
    }
    static get events() {
        return [{
                "method": "bdsClick",
                "name": "bdsClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event buttom onClick."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=button.js.map
