import { h, Host } from "@stencil/core";
import { scrollToFirstInvalidField } from "../../utils/form";
import { waitAfterFramePaint, waitAfterIdleCallback } from "../../utils/helpers";
export class Form {
    constructor() {
        /**
         * If `true` a native form element is added as a wrapper of the slot.
         */
        this.native = false;
        /**
         * If `true` it adds the novalidate attribute to the native form element.
         */
        this.novalidate = false;
        /**
         * The css class for the inner form element
         */
        this.formClass = '';
    }
    /**
     * Scrolls to the first invalid field inside this form component.
     */
    async scrollToFirstInvalidField() {
        await waitAfterIdleCallback();
        await waitAfterFramePaint();
        scrollToFirstInvalidField({ formEl: this.el });
    }
    render() {
        const NativeEl = this.native ? 'form' : 'div';
        let attrs = {};
        if (this.native) {
            attrs = {
                novalidate: this.novalidate,
            };
        }
        return (h(Host, { key: 'ed6e199a51186247ccad8e06989ba9819e43bed2' }, h(NativeEl, Object.assign({ key: 'de4a61e1690819e10096cd1c35eecc0371d73aae' }, attrs, { class: this.formClass }), h("slot", { key: 'f35cce725fc54ad822aada77aabaf6f0babd4141' }))));
    }
    static get is() { return "bal-form"; }
    static get originalStyleUrls() {
        return {
            "$": ["bal-form.sass"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["bal-form.css"]
        };
    }
    static get properties() {
        return {
            "native": {
                "type": "boolean",
                "attribute": "native",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` a native form element is added as a wrapper of the slot."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "novalidate": {
                "type": "boolean",
                "attribute": "novalidate",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` it adds the novalidate attribute to the native form element."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "formClass": {
                "type": "string",
                "attribute": "form-class",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The css class for the inner form element"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "''"
            }
        };
    }
    static get methods() {
        return {
            "scrollToFirstInvalidField": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Scrolls to the first invalid field inside this form component.",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
}
