import { MDCCheckbox } from '@material/checkbox';
import { h } from '@stencil/core';
export class Checkbox {
    constructor() {
        /** Mark the checkbox as checked */
        this.checked = false;
        /** If a label is provided, where should it be aligned ? */
        this.alignLabel = 'left';
        /** Mark the checkbox as disabled */
        this.disabled = false;
        /** Make the checkbox appear indeterminate */
        this.indeterminate = false;
        /** Color of the checkbox */
        this.color = 'accent';
    }
    componentDidLoad() {
        this.mdcCheckbox = new MDCCheckbox(this.checkboxDiv);
        if (this.indeterminate) {
            this.mdcCheckbox.indeterminate = this.indeterminate;
        }
        if (this.color && !/(accent)|(primary)|(secondary)|(error)/.test(this.color)) {
            this.checkboxDiv.style.setProperty('--mdc-theme-secondary', this.color);
        }
    }
    componentDidUnload() {
        this.mdcCheckbox.destroy();
    }
    getCheckboxClasses() {
        return {
            'mdc-checkbox': true,
            'mdc-theme--primary': this.color === 'primary',
            'mdc-theme--error': this.color === 'error',
        };
    }
    renderCheckbox() {
        return (h("div", { class: this.getCheckboxClasses(), ref: (cbDiv) => { this.checkboxDiv = cbDiv; } },
            h("input", { type: "checkbox", id: "checkbox", disabled: this.disabled, checked: this.checked, value: this.value, onChange: (evt) => {
                    this.checked = this.mdcCheckbox.checked;
                    this.change.emit(evt);
                }, class: "mdc-checkbox__native-control" }),
            h("div", { class: "mdc-checkbox__background" },
                h("svg", { class: "mdc-checkbox__checkmark", viewBox: "0 0 24 24" },
                    h("path", { class: "mdc-checkbox__checkmark__path", fill: "none", stroke: "white", d: "M1.73,12.91 8.1,19.28 22.79,4.59", style: { 'stroke-width': '3.12px' } })),
                h("div", { class: "mdc-checkbox__mixedmark" }))));
    }
    renderCheckboxWithLabel() {
        return (h("div", { class: { 'mdc-form-field--align-end': this.alignLabel === 'right', 'mdc-form-field': true } },
            h("label", null,
                this.renderCheckbox(),
                this.label)));
    }
    render() {
        if (this.label) {
            return this.renderCheckboxWithLabel();
        }
        return this.renderCheckbox();
    }
    static get is() { return "materials-checkbox"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["checkbox.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["checkbox.css"]
    }; }
    static get properties() { return {
        "value": {
            "type": "any",
            "mutable": true,
            "complexType": {
                "original": "string | number",
                "resolved": "number | string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The checkbox value"
            },
            "attribute": "value",
            "reflect": true
        },
        "checked": {
            "type": "boolean",
            "mutable": true,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Mark the checkbox as checked"
            },
            "attribute": "checked",
            "reflect": true,
            "defaultValue": "false"
        },
        "label": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": "The checkbox label (Optionnal)"
            },
            "attribute": "label",
            "reflect": false
        },
        "alignLabel": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'left' | 'right'",
                "resolved": "\"left\" | \"right\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "If a label is provided, where should it be aligned ?"
            },
            "attribute": "align-label",
            "reflect": false,
            "defaultValue": "'left'"
        },
        "disabled": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Mark the checkbox as disabled"
            },
            "attribute": "disabled",
            "reflect": false,
            "defaultValue": "false"
        },
        "indeterminate": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Make the checkbox appear indeterminate"
            },
            "attribute": "indeterminate",
            "reflect": false,
            "defaultValue": "false"
        },
        "color": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'primary' | 'accent' | 'secondary' | 'danger' | string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Color of the checkbox"
            },
            "attribute": "color",
            "reflect": false,
            "defaultValue": "'accent'"
        },
        "name": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Checkbox name"
            },
            "attribute": "name",
            "reflect": false
        }
    }; }
    static get events() { return [{
            "method": "change",
            "name": "change",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Change event emitted when checkbox value changes"
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
}
