/*!
 * Built with Stencil
 * By PostNord.
 */
import { forceUpdate, Host, h } from "@stencil/core";
import { uuidv4 } from "../../../globals/helpers";
import { alert_exclamation_circle, alert_info_circle } from "pn-design-assets/pn-assets/icons.js";
/**
 * The fielset is a wrapper to give context and information about inputs. Most commonly, a set of radio/checkboxes.
 * However, you may include any type of input such as textareas, toggles and selects.
 */
export class PnFieldset {
    mo;
    id = `pn-fieldset-${uuidv4()}`;
    idHelpertext = `${this.id}-helpertext`;
    hostElement;
    /**
     * The legend provides a caption for the fieldset group.
     * This should be a question or heading that describes the inputs/fields.
     */
    legend;
    /** Text message underneath the legend for more instruction or hints on how to fill in controls correctly. */
    helpertext;
    /** Give the fieldset a custom HTML id. */
    fieldsetId = this.id;
    /**
     * The id of the form you want the fieldset to be part of.
     * If you want the inputs inside to be associated with a specific form, you need to set on those elements directly.
     */
    form;
    /** Give the fieldset a HTML name. */
    name;
    /** Disable all of the inputs inside of the fieldset. */
    disabled = false;
    /** Set the fieldset as `invalid`, will add red error styles. */
    invalid = false;
    /** Error message, applies warning styles and icon. */
    error;
    handleId() {
        this.idHelpertext = `${this.fieldsetId}-helpertext`;
    }
    componentWillLoad() {
        this.handleId();
    }
    componentDidLoad() {
        if (this.mo)
            this.mo.disconnect();
        this.mo = new MutationObserver(() => forceUpdate(this.hostElement));
        this.mo.observe(this.hostElement.querySelector('.pn-fieldset'), { childList: true, subtree: true });
    }
    componentDidRender() {
        /**
         * Stencil has a known problem about rendering the `form` attribute.
         * Setting it via setAttribute solves it for now.
         * https://github.com/ionic-team/stencil/issues/2703
         **/
        if (this.form) {
            this.hostElement.querySelector('fieldset')?.setAttribute('form', this.form);
        }
    }
    hasError() {
        return this.invalid || !!this.error;
    }
    getSymbol() {
        if (this.disabled)
            return alert_info_circle;
        return alert_exclamation_circle;
    }
    render() {
        return (h(Host, { key: '4eac26b9a4c9095888cbe548f30eddcbed3efcdf' }, h("fieldset", { key: '341684c752c43382f37d0d95f9ea8c0d2d170ef1', id: this.fieldsetId, class: "pn-fieldset", disabled: this.disabled, "aria-describedby": this.helpertext && this.idHelpertext, "aria-invalid": this.hasError().toString() }, h("legend", { key: '3f98ab3a56288cebb07cce9c49b6e1bebd2096f2', class: "pn-fieldset-legend" }, this.legend), this.helpertext && (h("p", { key: '979b9b47ae0baa2f84bf19de877149773bfd63b9', id: this.idHelpertext, class: "pn-fieldset-helpertext" }, this.helpertext)), h("div", { key: 'a67905a01003d767e26061ff8fa3af86a0900c27', class: "pn-fieldset-items" }, h("slot", { key: 'a2a02e54157e39e43cf03839c8bb2a561533eb39' })), h("div", { key: '4c618709e6a3cbaa20761368acc70b6d2e964930', class: "pn-fieldset-message-wrapper", role: "alert", hidden: !this.error }, h("pn-icon", { key: 'db1b62bccada153943c62195242e66b62d9cc2c3', icon: this.getSymbol() }), h("p", { key: '9b94853b5064d9563e39c20491d7139eead83f56', class: "pn-fieldset-message" }, this.error)))));
    }
    static get is() { return "pn-fieldset"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-fieldset.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-fieldset.css"]
        };
    }
    static get properties() {
        return {
            "legend": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The legend provides a caption for the fieldset group.\nThis should be a question or heading that describes the inputs/fields."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "legend"
            },
            "helpertext": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Text message underneath the legend for more instruction or hints on how to fill in controls correctly."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "helpertext"
            },
            "fieldsetId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Give the fieldset a custom HTML id."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "fieldset-id",
                "defaultValue": "this.id"
            },
            "form": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The id of the form you want the fieldset to be part of.\nIf you want the inputs inside to be associated with a specific form, you need to set on those elements directly."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "form"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Give the fieldset a HTML name."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "name"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Disable all of the inputs inside of the fieldset."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "invalid": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set the fieldset as `invalid`, will add red error styles."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "invalid",
                "defaultValue": "false"
            },
            "error": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Error message, applies warning styles and icon."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "error"
            }
        };
    }
    static get elementRef() { return "hostElement"; }
    static get watchers() {
        return [{
                "propName": "fieldsetId",
                "methodName": "handleId"
            }];
    }
}
