import { MDCFormField } from '@material/form-field';
import { h } from '@stencil/core';
export class FormField {
    componentDidLoad() {
        MDCFormField.attachTo(this.formFieldEl);
    }
    render() {
        return (h("div", { class: { 'mdc-form-field': true, 'mdc-form-field--align-end': this.alignEnd }, ref: el => this.formFieldEl = el },
            h("slot", null),
            h("label", null, this.label)));
    }
    static get is() { return "materials-form-field"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["form-field.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["form-field.css"]
    }; }
    static get properties() { return {
        "alignEnd": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "align-end",
            "reflect": false
        },
        "label": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label",
            "reflect": false
        }
    }; }
}
