import { Component, Prop, h } from '@stencil/core';
export class Tag {
    constructor() {
        /**
         * The color/styling of the button
         */
        this.color = 'default';
    }
    render() {
        const isBtn = typeof this.href === 'undefined';
        const Tag = isBtn ? 'button' : 'a';
        const disabled = isBtn ? this.disabled : undefined;
        // if (!isBtn) this.role = 'link';
        return (h(Tag, { class: ['Tag', this.color].join(' '), disabled: disabled, href: this.href },
            h("span", { class: "Tag--content" },
                h("slot", null))));
    }
    static get is() { return "sr-tag"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["_Tag-component.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["_Tag-component.css"]
    }; }
    static get properties() { return {
        "color": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'default' | 'border' | 'transparent'",
                "resolved": "\"border\" | \"default\" | \"transparent\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The color/styling of the button"
            },
            "attribute": "color",
            "reflect": false,
            "defaultValue": "'default'"
        },
        "disabled": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": "Disable the button"
            },
            "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. The component will automatically use an \\<a\\>-tag instead of \\<button\\>."
            },
            "attribute": "href",
            "reflect": false
        }
    }; }
}
