import { MDCSwitch } from '@material/switch';
import { h } from '@stencil/core';
export class Switch {
    componentDidLoad() {
        this.switch = new MDCSwitch(this.host.shadowRoot.querySelector('.mdc-switch'));
    }
    switchUpdate() {
        this.checked = this.switch.checked;
        this.change.emit(this.checked);
    }
    render() {
        return ([
            h("div", { class: { 'mdc-switch': true, 'mdc-switch--disabled': this.disabled, 'mdc-switch--checked': this.checked } },
                h("div", { class: "mdc-switch__track" }),
                h("div", { class: "mdc-switch__thumb-underlay" },
                    h("div", { class: "mdc-switch__thumb" },
                        h("input", { disabled: this.disabled, checked: this.checked, type: "checkbox", id: "switch-id", class: "mdc-switch__native-control", role: "switch", onChange: () => this.switchUpdate() })))),
            h("label", { class: "mdc-typography", htmlFor: "switch-id" }, this.label)
        ]);
    }
    static get is() { return "materials-switch"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["switch.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["switch.css"]
    }; }
    static get properties() { return {
        "disabled": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "disabled",
            "reflect": false
        },
        "label": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label",
            "reflect": false
        },
        "checked": {
            "type": "boolean",
            "mutable": true,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "checked",
            "reflect": true
        }
    }; }
    static get events() { return [{
            "method": "change",
            "name": "change",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
    static get elementRef() { return "host"; }
}
