import { Host, h } from '@stencil/core';
export class Chip {
    constructor() {
        /** The chip background color, it can be either :
         *  - a predifined value : 'primary', 'secondary'.
         *  - an hexa color code : #225566, #CCC.
         *  - a css named color : red, blue.
         */
        this.color = 'primary';
        /** The chip text color, it can be either :
         *  - a predifined value : 'primary', 'secondary'.
         *  - an hexa color code : #225566, #CCC.
         *  - a css named color : red, blue.
         */
        this.inkColor = 'primary';
    }
    componentDidLoad() {
        if (this.color && !/(primary)|(secondary)/.test(this.color)) {
            this.host.style.setProperty('--mdc-theme-primary', this.color);
        }
        if (this.inkColor && !/(primary)|(secondary)/.test(this.inkColor)) {
            this.host.style.setProperty('--mdc-theme-on-primary', this.inkColor);
        }
    }
    getClasses() {
        return {
            'mdc-chip': true,
            'mdc-chip--colored': !!this.color,
            'mdc-chip--ink-colored': !!this.inkColor,
            'mdc-theme--secondary': this.color === 'secondary'
        };
    }
    render() {
        return (h(Host, { class: "mdc-chip-set" },
            h("div", { class: this.getClasses(), tabindex: "0" },
                h("div", { class: "mdc-chip__text" },
                    h("slot", null)))));
    }
    static get is() { return "materials-chip"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["chip.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["chip.css"]
    }; }
    static get properties() { return {
        "color": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'primary' | 'secondary' | string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The chip background color, it can be either :\n- a predifined value : 'primary', 'secondary'.\n- an hexa color code : #225566, #CCC.\n- a css named color : red, blue."
            },
            "attribute": "color",
            "reflect": false,
            "defaultValue": "'primary'"
        },
        "inkColor": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'primary' | 'secondary' | string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The chip text color, it can be either :\n- a predifined value : 'primary', 'secondary'.\n- an hexa color code : #225566, #CCC.\n- a css named color : red, blue."
            },
            "attribute": "ink-color",
            "reflect": false,
            "defaultValue": "'primary'"
        }
    }; }
    static get elementRef() { return "host"; }
}
