import { Component, Prop, Host, h } from '@stencil/core';
export class Button {
    constructor() {
        /**
         * The color of the button
         */
        this.color = 'default';
        /**
         * The size of the button
         */
        this.size = 'default';
        /**
         * Button type - will be ignored if used as link
         */
        this.type = 'button';
        /**
         * Link rel options - will be ignored if used as button
         */
        this.rel = 'noopener';
    }
    render() {
        const isBtn = typeof this.href === 'undefined';
        const Tag = isBtn ? 'button' : 'a';
        const disabled = isBtn ? this.disabled : undefined;
        const attrs = isBtn
            ? {
                type: this.type,
                disabled
            }
            : {
                download: this.download,
                href: this.href,
                hreflang: this.hreflang,
                rel: this.rel,
                target: this.target
            };
        const classes = ['Button', this.color, this.size].filter(c => c !== 'default');
        return (h(Host, { "aria-disabled": disabled },
            h(Tag, Object.assign({}, attrs, { class: classes.join(' ') }),
                this.iconBefore && h("sr-icon", { name: this.iconBefore }),
                h("span", { class: "Button--content" },
                    h("slot", null)),
                this.iconAfter && h("sr-icon", { name: this.iconAfter }))));
    }
    static get is() { return "sr-button"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["_Button-component.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["_Button-component.css"]
    }; }
    static get properties() { return {
        "color": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'default' | 'secondary' | 'transparent'",
                "resolved": "\"default\" | \"secondary\" | \"transparent\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The color of the button"
            },
            "attribute": "color",
            "reflect": false,
            "defaultValue": "'default'"
        },
        "size": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'default' | 'small'",
                "resolved": "\"default\" | \"small\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The size of the button"
            },
            "attribute": "size",
            "reflect": false,
            "defaultValue": "'default'"
        },
        "block": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": "Display as block instead of inline-block"
            },
            "attribute": "block",
            "reflect": true
        },
        "fullWidth": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": "Display full width"
            },
            "attribute": "full-width",
            "reflect": true
        },
        "iconBefore": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": "Optional icon before the text. See icons doc for possible values"
            },
            "attribute": "icon-before",
            "reflect": false
        },
        "iconAfter": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": "Optional icon after the text. See icons doc for possible values"
            },
            "attribute": "icon-after",
            "reflect": false
        },
        "type": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'button' | 'submit' | 'reset'",
                "resolved": "\"button\" | \"reset\" | \"submit\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Button type - will be ignored if used as link"
            },
            "attribute": "type",
            "reflect": false,
            "defaultValue": "'button'"
        },
        "disabled": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": "Button disabled state - will be ignored if used as link"
            },
            "attribute": "disabled",
            "reflect": false
        },
        "href": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": "Optional href target. If set, the component will use \\<a\\> instead of \\<button\\> internally."
            },
            "attribute": "href",
            "reflect": false
        },
        "download": {
            "type": "any",
            "mutable": false,
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": "Link rel options - will be ignored if used as button"
            },
            "attribute": "download",
            "reflect": false
        },
        "hreflang": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": "Language of link target - will be ignored if used as button"
            },
            "attribute": "hreflang",
            "reflect": false
        },
        "rel": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Link rel options - will be ignored if used as button"
            },
            "attribute": "rel",
            "reflect": false,
            "defaultValue": "'noopener'"
        },
        "target": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": "Link target options - will be ignored if used as button"
            },
            "attribute": "target",
            "reflect": false
        }
    }; }
}
