import { h, Host } from "@stencil/core";
import { govForm } from "../../../helpers/Dom/form";
import { govHost } from "../../../helpers/Dom/template";
import { splitByWhitespace } from "../../../utils/string.utils";
import { FormControlClass } from "./constants";
import { isString } from "../../../utils/helpers.types";
export class GovFormControl {
    constructor() {
        /**
         * Indicates the entered value of a child form element does not conform to the format expected by the application.
         */
        this.invalid = false;
        /**
        /**
        * Indicates the form control is disabled
         */
        this.disabled = false;
        /**
        /**
        * Indicates the entered value of a child form element does conform to the format expected by the application.
         */
        this.success = false;
        /**
         * Use control as a fieldset for better accessibility.
         * Note: Remember to set the legend attribute of the gov-form-label component
         */
        this.fieldset = false;
        /**
         * Form element size.
         */
        this.size = "m";
        this.h = govHost(this.host);
        this.f = govForm(this.h);
    }
    componentDidRender() {
        this.syncControlMessages();
        this.formElementDescriptionControl();
    }
    disconnectedCallback() {
        var _a;
        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
    }
    formElementDescriptionControl() {
        const bottomSlot = this.host.querySelector("." + FormControlClass.bottom);
        if (!bottomSlot)
            return;
        this.observer = new MutationObserver(function () {
            this.syncControlMessages();
        }.bind(this));
        this.observer.observe(bottomSlot, { childList: true });
    }
    syncControlMessages() {
        Promise.all(this.f.messageElements.map((message) => message.identifier())).then((ids) => {
            this.f.mainElementsInControl.forEach((element) => {
                const currentValue = splitByWhitespace(element.getAttribute("aria-describedby"));
                element.removeAttribute("aria-describedby");
                if (Array.isArray(currentValue)) {
                    currentValue.forEach(id => (isString(id) && id.indexOf("GovFormMessage") === -1 ? ids.push(id) : null));
                }
                if (ids.length) {
                    element.setAttribute("aria-describedby", ids.join(" "));
                }
            });
        });
    }
    render() {
        const Tag = this.fieldset ? "fieldset" : "div";
        return (h(Host, { key: '04e4ab3533f5d22939573fa20a354a0b76319986', size: this.size, class: this.h.classes(FormControlClass.root) }, h(Tag, { key: '9851627baf138775fe24a673d6a095fc8980b6e9', class: FormControlClass.holder }, this.h.hasSlot("top") && h("slot", { key: 'beffe147db943648861b9775dee76ef6b20dffa3', name: "top" }), h("slot", { key: '6667b41d2720045a93b10a92ef300e2842ff57b4' }), this.h.hasSlot("bottom") && (h("div", { key: 'fe117fdc7d64b3c2b4e18e95d1f213c8a8fe3766', class: FormControlClass.bottom }, h("slot", { key: '07eabb48c2849d624bed7f59ba14811ed35732fb', name: "bottom" }))))));
    }
    static get is() { return "gov-form-control"; }
    static get properties() {
        return {
            "identifier": {
                "type": "string",
                "attribute": "identifier",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Custom form element identifier"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "invalid": {
                "type": "boolean",
                "attribute": "invalid",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Indicates the entered value of a child form element does not conform to the format expected by the application."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "attribute": "disabled",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "/**\r\n Indicates the form control is disabled"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "false"
            },
            "success": {
                "type": "boolean",
                "attribute": "success",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "/**\r\n Indicates the entered value of a child form element does conform to the format expected by the application."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "false"
            },
            "fieldset": {
                "type": "boolean",
                "attribute": "fieldset",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Use control as a fieldset for better accessibility.\r\nNote: Remember to set the legend attribute of the gov-form-label component"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "size": {
                "type": "string",
                "attribute": "size",
                "mutable": false,
                "complexType": {
                    "original": "FormControlSizesType",
                    "resolved": "\"l\" | \"m\" | \"xl\"",
                    "references": {
                        "FormControlSizesType": {
                            "location": "import",
                            "path": "./constants",
                            "id": "../../../packages/core/src/components/gov-form/control/constants.ts::FormControlSizesType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Form element size."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "\"m\""
            }
        };
    }
    static get elementRef() { return "host"; }
}
//# sourceMappingURL=gov-form-control.js.map
