@nova-design-system/nova-webcomponents 3.0.0-beta.17

package/dist/collection/components/nv-fieldradio/nv-fieldradio.docs.js

@@ -0,0 +1,121 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+const NvFieldradioDocs = {
+    component: 'nv-fieldradio',
+    stories: [
+        {
+            name: 'Default',
+            args: { label: 'Label' },
+            template: h("nv-fieldradio", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.name),
+            args: {
+                name: 'group',
+            },
+            template: (h("fieldset", { "data-class": "flex flex-col gap-4" }, h("nv-fieldradio", { "data-storybook-args": true, label: "Option 1" }), h("nv-fieldradio", { "data-storybook-args": true, label: "Option 2" }), h("nv-fieldradio", { "data-storybook-args": true, label: "Option 3" }))),
+        },
+        {
+            name: nameof(x => x.value),
+            args: {
+                label: 'Label',
+                value: 'value',
+            },
+            template: h("nv-fieldradio", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.label),
+            args: {
+                label: 'Label',
+            },
+            template: h("nv-fieldradio", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.labelPlacement),
+            args: {
+                name: 'group',
+            },
+            template: (h("div", { "data-class": "flex gap-4" }, h("nv-fieldradio", { "data-storybook-args": true, label: "before", "label-placement": "before" }), h("nv-fieldradio", { "data-storybook-args": true, label: "after", "label-placement": "after" }))),
+        },
+        {
+            name: nameof(x => x.description),
+            args: {
+                label: 'Label',
+                description: 'Description',
+            },
+            template: h("nv-fieldradio", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.error),
+            args: {
+                label: 'Label',
+                error: true,
+            },
+            template: h("nv-fieldradio", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.errorDescription),
+            args: {
+                label: 'Label',
+                error: true,
+                errorDescription: 'There is an error!',
+            },
+            template: h("nv-fieldradio", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.checked),
+            args: {
+                label: 'Label',
+                checked: true,
+            },
+            template: h("nv-fieldradio", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.disabled),
+            args: {
+                label: 'Label',
+                disabled: true,
+            },
+            template: h("nv-fieldradio", { "data-storybook-args": true }),
+        },
+        {
+            name: 'DisabledChecked',
+            description: 'Radio button in a disabled state.',
+            args: {
+                label: 'Label',
+                disabled: true,
+                checked: true,
+            },
+            template: h("nv-fieldradio", { "data-storybook-args": true }),
+        },
+        {
+            name: 'SlotLabel',
+            description: 'Radio button replacing the label with custom html.',
+            args: {
+                label: 'Label',
+            },
+            template: (h("nv-fieldradio", { "data-storybook-args": true }, h("span", { slot: "label" }, "Custom Label"))),
+        },
+        {
+            name: 'SlotDescription',
+            description: 'Radio button replacing the description with custom html.',
+            args: {
+                label: 'Label',
+                description: 'Description',
+            },
+            template: (h("nv-fieldradio", { "data-storybook-args": true }, h("span", { slot: "description" }, "Custom Description"))),
+        },
+        {
+            name: 'SlotErrorDescription',
+            description: 'Radio button replacing the error description with custom html.',
+            args: {
+                label: 'Label',
+                error: true,
+                errorDescription: 'Error Description',
+            },
+            template: (h("nv-fieldradio", { "data-storybook-args": true }, h("span", { slot: "error-description" }, "Custom Error Description"))),
+        },
+    ],
+};
+export default NvFieldradioDocs;
+//# sourceMappingURL=nv-fieldradio.docs.js.map

package/dist/collection/components/nv-fieldradio/nv-fieldradio.docs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-fieldradio.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldradio/nv-fieldradio.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvFieldradioDocs: NovaDocs<Components.NvFieldradio> = {\n  component: 'nv-fieldradio',\n  stories: [\n    {\n      name: 'Default',\n      args: { label: 'Label' },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.name),\n      args: {\n        name: 'group',\n      },\n      template: (\n        <fieldset data-class=\"flex flex-col gap-4\">\n          <nv-fieldradio data-storybook-args label=\"Option 1\"></nv-fieldradio>\n          <nv-fieldradio data-storybook-args label=\"Option 2\"></nv-fieldradio>\n          <nv-fieldradio data-storybook-args label=\"Option 3\"></nv-fieldradio>\n        </fieldset>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.value),\n      args: {\n        label: 'Label',\n        value: 'value',\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.label),\n      args: {\n        label: 'Label',\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.labelPlacement),\n      args: {\n        name: 'group',\n      },\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-fieldradio\n            data-storybook-args\n            label=\"before\"\n            label-placement=\"before\"\n          ></nv-fieldradio>\n          <nv-fieldradio\n            data-storybook-args\n            label=\"after\"\n            label-placement=\"after\"\n          ></nv-fieldradio>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.description),\n      args: {\n        label: 'Label',\n        description: 'Description',\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.error),\n      args: {\n        label: 'Label',\n        error: true,\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.errorDescription),\n      args: {\n        label: 'Label',\n        error: true,\n        errorDescription: 'There is an error!',\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.checked),\n      args: {\n        label: 'Label',\n        checked: true,\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.disabled),\n      args: {\n        label: 'Label',\n        disabled: true,\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: 'DisabledChecked',\n      description: 'Radio button in a disabled state.',\n      args: {\n        label: 'Label',\n        disabled: true,\n        checked: true,\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: 'SlotLabel',\n      description: 'Radio button replacing the label with custom html.',\n      args: {\n        label: 'Label',\n      },\n      template: (\n        <nv-fieldradio data-storybook-args>\n          <span slot=\"label\">Custom Label</span>\n        </nv-fieldradio>\n      ),\n    },\n    {\n      name: 'SlotDescription',\n      description: 'Radio button replacing the description with custom html.',\n      args: {\n        label: 'Label',\n        description: 'Description',\n      },\n      template: (\n        <nv-fieldradio data-storybook-args>\n          <span slot=\"description\">Custom Description</span>\n        </nv-fieldradio>\n      ),\n    },\n    {\n      name: 'SlotErrorDescription',\n      description:\n        'Radio button replacing the error description with custom html.',\n      args: {\n        label: 'Label',\n        error: true,\n        errorDescription: 'Error Description',\n      },\n      template: (\n        <nv-fieldradio data-storybook-args>\n          <span slot=\"error-description\">Custom Error Description</span>\n        </nv-fieldradio>\n      ),\n    },\n  ],\n};\n\nexport default NvFieldradioDocs;\n"]}

package/dist/collection/components/nv-fieldradio/nv-fieldradio.js

@@ -0,0 +1,347 @@
+import { Host, h, } from "@stencil/core";
+import clsx from "clsx";
+import { v4 as uuidv4 } from "uuid";
+/**
+ * @slot label - Content to be placed as the label, will override the label prop.
+ * @slot description - Content to be placed as the description, will override the description prop.
+ * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.
+ */
+export class NvFieldradio {
+    constructor() {
+        this.message = undefined;
+        this.labelBefore = false;
+        this.inputId = uuidv4();
+        this.name = undefined;
+        this.value = undefined;
+        this.label = undefined;
+        this.labelPlacement = undefined;
+        this.description = undefined;
+        this.error = false;
+        this.errorDescription = undefined;
+        this.checked = false;
+        this.disabled = false;
+    }
+    componentWillRender() {
+        if (this.message) {
+            this.description = this.message;
+        }
+        if (this.labelBefore) {
+            this.labelPlacement = 'before';
+        }
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    /**
+     * Watches for changes to the checked state and emits the new value.
+     * @param {boolean} checked - The new value of the checked state.
+     */
+    handleCheckedChange(checked) {
+        this.checkedChanged.emit(checked);
+    }
+    /**
+     * Listens for the change event on the radio button input element and controls
+     * the checked state of the host elements.
+     * @param {Event} event - The change event.
+     */
+    handleChange(event) {
+        const target = event.target;
+        if ((target === null || target === void 0 ? void 0 : target.type) === 'radio') {
+            Array.from(document.getElementsByTagName('nv-fieldradio')).forEach(element => {
+                if (element.name === this.name) {
+                    element.checked = false;
+                }
+            });
+            this.checked = target.checked;
+        }
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '923184aa248f433413ecdc49e4da07a60b408047', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, h("input", { key: '37c0948ac9a100352908a60dd2ad94e1f7fb2bab', type: "radio", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), h("div", { key: 'cb217f7f999396b1b477eb25e5e1db77e941f76a', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '84859686efb45332b5dade8f2cb3147643782588', htmlFor: this.inputId }, h("slot", { key: 'f456892bd1bad003efdd128051989952b1719ca1', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'f518939cc9f5f2a1bd9ceccbe284484d51ac44fa', class: "description" }, h("slot", { key: 'f6b1c15c9be9d9c87311b7a658358edf1dbd9c8e', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '3f862fccc7e1a85c076e70babca97a74680a462b', hidden: !this.error, class: "error-description" }, h("slot", { key: '3d42e75ba035117f90e5c2f924781617a297173a', name: "error-description" }, this.errorDescription))))));
+    }
+    static get is() { return "nv-fieldradio"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-fieldradio.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-fieldradio.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "use description instead."
+                        }],
+                    "text": "Adds a helpful hint message below the label"
+                },
+                "attribute": "message",
+                "reflect": false
+            },
+            "labelBefore": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "use labelPlacement instead."
+                        }],
+                    "text": "Set the label placement to before the input"
+                },
+                "attribute": "label-before",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "inputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the ID for the radio button\u2019s input element and the for attribute of\nthe associated label. If no ID is provided, a random one will be\nautomatically generated to ensure unique identification, facilitating\nproper label association and accessibility."
+                },
+                "attribute": "input-id",
+                "reflect": true,
+                "defaultValue": "uuidv4()"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this to assign a group name to your radio buttons. When you have\nmultiple radio buttons with the same name, users will be able to select\nonly one option within that group, making your forms more organized and\nuser-friendly."
+                },
+                "attribute": "name",
+                "reflect": true
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines what data will be sent when the radio button is selected.\nThis helps you identify which option the user has chosen in your form,\nensuring accurate data collection. When the form is submitted, the data\nwill consist of a name=value pair."
+                },
+                "attribute": "value",
+                "reflect": true
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the text content that is rendered next to the input element of type\nradio. This label is essential for accessibility and user clarity, as it\ndescribes the purpose or option of the radio button."
+                },
+                "attribute": "label",
+                "reflect": true
+            },
+            "labelPlacement": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "`${FieldLabelPlacement}`",
+                    "resolved": "\"after\" | \"before\"",
+                    "references": {
+                        "FieldLabelPlacement": {
+                            "location": "import",
+                            "path": "../../utils/constants",
+                            "id": "src/utils/constants.ts::FieldLabelPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the position of the label relative to the radio button."
+                },
+                "attribute": "label-placement",
+                "reflect": true
+            },
+            "description": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds a helpful hint message below the label. This description provides\nextra information or context about the radio button option, assisting users\nin making more informed choices."
+                },
+                "attribute": "description",
+                "reflect": true
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "validator",
+                            "text": "error"
+                        }],
+                    "text": "Highlight the radio button with error styling. It helps users quickly\nidentify which option needs attention, improving their form-filling\nexperience by making issues more visible."
+                },
+                "attribute": "error",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "errorDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "validator",
+                            "text": "message"
+                        }],
+                    "text": "A description that appears when there is an error related to the radio\nbutton."
+                },
+                "attribute": "error-description",
+                "reflect": true
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls whether the radio button is selected."
+                },
+                "attribute": "checked",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the radio button, making it un-selectable."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "checkedChanged",
+                "name": "checkedChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "bind",
+                            "text": "checked"
+                        }],
+                    "text": "Emits when the checked state changes."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "handleCheckedChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "change",
+                "method": "handleChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=nv-fieldradio.js.map

package/dist/collection/components/nv-fieldradio/nv-fieldradio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-fieldradio.js","sourceRoot":"","sources":["../../../src/components/nv-fieldradio/nv-fieldradio.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Listen,\n  Watch,\n  Element,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type FieldLabelPlacement } from '../../utils/constants';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldradio',\n  shadow: false,\n  styleUrl: 'nv-fieldradio.scss',\n  formAssociated: true,\n})\nexport class NvFieldradio {\n  @Element() el: HTMLNvFieldradioElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Adds a helpful hint message below the label\n   * @deprecated use description instead.\n   */\n  @Prop()\n  readonly message: string;\n\n  /**\n   * Set the label placement to before the input\n   * @deprecated use labelPlacement instead.\n   */\n  @Prop()\n  readonly labelBefore: boolean = false;\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.labelBefore) {\n      this.labelPlacement = 'before';\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the radio button’s input element and the for attribute of\n   * the associated label. If no ID is provided, a random one will be\n   * automatically generated to ensure unique identification, facilitating\n   * proper label association and accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Use this to assign a group name to your radio buttons. When you have\n   * multiple radio buttons with the same name, users will be able to select\n   * only one option within that group, making your forms more organized and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Defines what data will be sent when the radio button is selected.\n   * This helps you identify which option the user has chosen in your form,\n   * ensuring accurate data collection. When the form is submitted, the data\n   * will consist of a name=value pair.\n   */\n  @Prop({ reflect: true })\n  readonly value: string;\n\n  /**\n   * Sets the text content that is rendered next to the input element of type\n   * radio. This label is essential for accessibility and user clarity, as it\n   * describes the purpose or option of the radio button.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Defines the position of the label relative to the radio button.\n   */\n  @Prop({ mutable: true, reflect: true })\n  labelPlacement: `${FieldLabelPlacement}`;\n\n  /**\n   * Adds a helpful hint message below the label. This description provides\n   * extra information or context about the radio button option, assisting users\n   * in making more informed choices.\n   */\n  @Prop({ mutable: true, reflect: true })\n  description: string;\n\n  /**\n   * Highlight the radio button with error styling. It helps users quickly\n   * identify which option needs attention, improving their form-filling\n   * experience by making issues more visible.\n   * @validator error\n   */\n  @Prop({ reflect: true })\n  readonly error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the radio\n   * button.\n   * @validator message\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription: string;\n\n  /**\n   * Controls whether the radio button is selected.\n   */\n  @Prop({ mutable: true, reflect: true })\n  checked: boolean = false;\n\n  /**\n   * Disables the radio button, making it un-selectable.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the checked state changes.\n   * @bind checked\n   */\n  @Event()\n  checkedChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Watches for changes to the checked state and emits the new value.\n   * @param {boolean} checked - The new value of the checked state.\n   */\n  @Watch('checked')\n  handleCheckedChange(checked: boolean) {\n    this.checkedChanged.emit(checked);\n  }\n\n  /**\n   * Listens for the change event on the radio button input element and controls\n   * the checked state of the host elements.\n   * @param {Event} event - The change event.\n   */\n  @Listen('change')\n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n\n    if (target?.type === 'radio') {\n      Array.from(document.getElementsByTagName('nv-fieldradio')).forEach(\n        element => {\n          if (element.name === this.name) {\n            element.checked = false;\n          }\n        },\n      );\n\n      this.checked = target.checked;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.labelPlacement === 'before' && 'label-placement-before',\n          this.error && 'error',\n        )}\n      >\n        <input\n          type=\"radio\"\n          id={this.inputId}\n          name={this.name}\n          autocomplete=\"off\"\n          value={this.value}\n          checked={this.checked}\n          disabled={this.disabled}\n        />\n\n        <div class=\"text-container\">\n          {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n            <label htmlFor={this.inputId}>\n              <slot name=\"label\">{this.label}</slot>\n            </label>\n          )}\n\n          {(this.description ||\n            this.el.querySelector('[slot=\"description\"]')) && (\n            <div class=\"description\">\n              <slot name=\"description\">{this.description}</slot>\n            </div>\n          )}\n\n          {(this.errorDescription ||\n            this.el.querySelector('[slot=\"error-description\"]')) && (\n            <div hidden={!this.error} class=\"error-description\">\n              <slot name=\"error-description\">{this.errorDescription}</slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}