import { h, Host } from '@stencil/core';
/**
 * A Material Design button component.
 *
 * To render a clear Material button on any html page :
 * @example
 * <materials-button>Click me</materials-button>
 *
 * @description
 * You can use any icon from the material-icons collection (https://material.io/tools/icons)
 *
 * Code is available on github: https://github.com/GMV-centravet/materials/tree/master/src/components/button
 *
 * Material Design guidelines: https://material.io/design/components/buttons.html
 */
export class Button {
    constructor() {
        /** The button color, it can be either :
         *  - a predifined value : 'primary', 'secondary', 'error'.
         *  - an hexa color code : #225566, #CCC.
         *  - a css named color : red, blue.
         */
        this.color = 'primary';
        /** A material icon name */
        this.icon = '';
        /** The button type */
        this.type = 'button';
        /** Disable the button */
        this.disabled = false;
        /** Render a raised Material button */
        this.raised = false;
        /** Render an unelevated Material button */
        this.unelevated = false;
        /** Render an outlined Material button */
        this.outlined = false;
        /** Render a dense Material button () */
        this.dense = false;
        /** Render a block Material button (Full width) */
        this.block = false;
    }
    getClasses() {
        return {
            'mdc-button': true,
            'mdc-button--raised': this.raised,
            'mdc-button--unelevated': this.unelevated,
            'mdc-button--outlined': this.outlined,
            'mdc-button--dense': this.dense,
            'mdc-theme--secondary': this.color === 'secondary',
            'mdc-theme--error': this.color === 'error'
        };
    }
    componentDidLoad() {
        if (this.color && !/(primary)|(secondary)|(error)/.test(this.color)) {
            this.btnEl.style.setProperty('--mdc-theme-primary', this.color);
        }
    }
    render() {
        return (h(Host, { class: { 'materials-button-block': this.block } },
            h("button", { type: this.type, disabled: this.disabled, class: this.getClasses() },
                this.icon &&
                    h("i", { class: "material-icons mdc-button__icon", "aria-hidden": "true" }, this.icon),
                h("span", { class: "mdc-button__label" },
                    h("slot", null)))));
    }
    static get is() { return "materials-button"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["button.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["button.css"]
    }; }
    static get properties() { return {
        "color": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'primary' | 'secondary' | 'error' | string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The button color, it can be either :\n- a predifined value : 'primary', 'secondary', 'error'.\n- an hexa color code : #225566, #CCC.\n- a css named color : red, blue."
            },
            "attribute": "color",
            "reflect": false,
            "defaultValue": "'primary'"
        },
        "icon": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": "A material icon name"
            },
            "attribute": "icon",
            "reflect": false,
            "defaultValue": "''"
        },
        "type": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'button' | 'submit' | 'reset'",
                "resolved": "\"button\" | \"reset\" | \"submit\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The button type"
            },
            "attribute": "type",
            "reflect": false,
            "defaultValue": "'button'"
        },
        "disabled": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Disable the button"
            },
            "attribute": "disabled",
            "reflect": false,
            "defaultValue": "false"
        },
        "raised": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Render a raised Material button"
            },
            "attribute": "raised",
            "reflect": false,
            "defaultValue": "false"
        },
        "unelevated": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Render an unelevated Material button"
            },
            "attribute": "unelevated",
            "reflect": false,
            "defaultValue": "false"
        },
        "outlined": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Render an outlined Material button"
            },
            "attribute": "outlined",
            "reflect": false,
            "defaultValue": "false"
        },
        "dense": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Render a dense Material button ()"
            },
            "attribute": "dense",
            "reflect": false,
            "defaultValue": "false"
        },
        "block": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Render a block Material button (Full width)"
            },
            "attribute": "block",
            "reflect": false,
            "defaultValue": "false"
        }
    }; }
    static get elementRef() { return "btnEl"; }
}
