import { MDCFloatingLabel } from '@material/floating-label';
import { MDCNotchedOutline } from '@material/notched-outline';
import { MDCTextField } from '@material/textfield';
import { h } from '@stencil/core';
export class TextArea {
    constructor() {
        this.required = false;
        this.rows = 4;
        this.cols = 40;
    }
    updateValue() {
        if (this.mdcTextField) {
            this.mdcTextField.value = this.value;
        }
    }
    componentDidLoad() {
        this.mdcTextField = new MDCTextField(this.textFieldEl);
        MDCFloatingLabel.attachTo(this.floatingLabelEl);
        if (this.outlined) {
            MDCNotchedOutline.attachTo(this.notchedOutlineEl);
        }
    }
    getClasses() {
        return {
            'mdc-text-field': true,
            'mdc-text-field--textarea': true,
            'mdc-text-field--fullwidth': this.fullwidth,
            'mdc-text-field--disabled': this.disabled
        };
    }
    getLabelClasses() {
        return {
            'mdc-floating-label': true,
            'mdc-floating-label--float-above': !!this.value
        };
    }
    render() {
        return (h("div", { class: this.getClasses(), ref: mdcTextField => { this.textFieldEl = mdcTextField; } },
            h("textarea", { id: "textarea", class: "mdc-text-field__input", rows: this.rows, cols: this.cols, value: this.value, required: this.required, onChange: (ev) => this.change.emit(ev), onInput: (ev) => {
                    this.value = ev.target.value;
                    this.input.emit(ev);
                } }),
            this.outlined ?
                h("div", { class: "mdc-notched-outline", ref: notchedOutlineEl => this.notchedOutlineEl = notchedOutlineEl },
                    h("div", { class: "mdc-notched-outline__leading" }),
                    h("div", { class: "mdc-notched-outline__notch" },
                        h("label", { style: { 'background-color': 'transparent' }, htmlFor: "textarea", class: this.getLabelClasses(), ref: el => this.floatingLabelEl = el }, this.label)),
                    h("div", { class: "mdc-notched-outline__trailing" }))
                : h("label", { style: { 'background-color': 'transparent' }, htmlFor: "textarea", class: this.getLabelClasses(), ref: el => this.floatingLabelEl = el }, this.label)));
    }
    static get is() { return "materials-text-area"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["text-area.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["text-area.css"]
    }; }
    static get properties() { return {
        "label": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label",
            "reflect": false
        },
        "disabled": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "disabled",
            "reflect": false
        },
        "required": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "required",
            "reflect": false,
            "defaultValue": "false"
        },
        "fullwidth": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "fullwidth",
            "reflect": false
        },
        "outlined": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "outlined",
            "reflect": false
        },
        "rows": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "rows",
            "reflect": false,
            "defaultValue": "4"
        },
        "cols": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "cols",
            "reflect": false,
            "defaultValue": "40"
        },
        "value": {
            "type": "string",
            "mutable": true,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "value",
            "reflect": true
        }
    }; }
    static get events() { return [{
            "method": "input",
            "name": "input",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "change",
            "name": "change",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
    static get watchers() { return [{
            "propName": "value",
            "methodName": "updateValue"
        }]; }
}
