import { MDCFormField } from '@material/form-field';
import { MDCRadio } from '@material/radio';
import { h } from '@stencil/core';
/**
 * WARNING : Element en shadow : False.
 * en shadow : True, il ne détecte pas l'attribut "name" de ses voisins.
 */
export class Radio {
    componentWillLoad() {
        // Dans le cas ou materials-radio est utilisé dans un materials-radio-group.
        if (this.checked)
            this.change.emit(this.value);
    }
    componentDidLoad() {
        MDCRadio.attachTo(this.radioEl);
        MDCFormField.attachTo(this.formFieldEl);
    }
    handleClick() {
        this.checked = true;
        this.change.emit(this.value);
    }
    render() {
        return (h("div", { class: { 'mdc-form-field': true, 'mdc-form-field--align-end': this.alignEnd, 'checked': this.checked }, ref: el => this.formFieldEl = el },
            h("div", { class: { 'mdc-radio': true, 'mdc-radio--disabled': this.disabled }, ref: el => this.radioEl = el },
                h("input", { id: "radio", class: "mdc-radio__native-control", type: "radio", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onClick: () => this.handleClick(), checked: this.checked }),
                h("div", { class: "mdc-radio__background" },
                    h("div", { class: "mdc-radio__outer-circle" }),
                    h("div", { class: "mdc-radio__inner-circle" }))),
            h("label", { style: { 'padding': this.noPadding ? '0px' : '' }, htmlFor: "radio" }, this.label)));
    }
    static get is() { return "materials-radio"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["radio.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["radio.css"]
    }; }
    static get properties() { return {
        "name": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "name",
            "reflect": false
        },
        "label": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label",
            "reflect": false
        },
        "value": {
            "type": "any",
            "mutable": false,
            "complexType": {
                "original": "string | number | string[]",
                "resolved": "number | string | string[]",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "value",
            "reflect": false
        },
        "required": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "required",
            "reflect": false
        },
        "disabled": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "disabled",
            "reflect": false
        },
        "alignEnd": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "align-end",
            "reflect": false
        },
        "noPadding": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "no-padding",
            "reflect": false
        },
        "checked": {
            "type": "boolean",
            "mutable": true,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "checked",
            "reflect": false
        }
    }; }
    static get events() { return [{
            "method": "change",
            "name": "change",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
}
