mwcpl/dist/collection/components/mwcpl-form-field/mwcpl-form-field.js

Master's Web Component Pattern Library

import { Component, h, Prop, Host } from '@stencil/core';
export class MwcplFormField {
    constructor() {
        /**
         * Label for the form field.
         */
        this.label = '';
        /**
         * Creates a fullwidth form field.
         */
        this.fullwidth = false;
    }
    render() {
        return (h(Host, null,
            h("div", { class: "form-field-wrapper" },
                h("label", null, this.label),
                h("div", { class: "input-wrapper" },
                    h("slot", { name: "input" }),
                    h("slot", { name: "icon" }))),
            h("slot", { name: "hint" })));
    }
    static get is() { return "mwcpl-form-field"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["mwcpl-form-field.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["mwcpl-form-field.css"]
    }; }
    static get properties() { return {
        "label": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Label for the form field."
            },
            "attribute": "label",
            "reflect": false,
            "defaultValue": "''"
        },
        "fullwidth": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Creates a fullwidth form field."
            },
            "attribute": "fullwidth",
            "reflect": false,
            "defaultValue": "false"
        }
    }; }
}