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

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

@@ -0,0 +1,65 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+const NvFieldtoggleDocs = {
+    component: 'nv-fieldtoggle',
+    stories: [
+        {
+            name: 'Default',
+            template: h("nv-fieldtoggle", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.label),
+            description: 'The label displayed next to the toggle.',
+            args: { label: 'Label' },
+            template: h("nv-fieldtoggle", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.description),
+            description: 'A description providing additional context or information about the toggle.',
+            args: { description: 'Description' },
+            template: h("nv-fieldtoggle", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.checked),
+            description: 'Indicates whether the toggle is checked or not.',
+            args: { checked: true },
+            template: h("nv-fieldtoggle", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.disabled),
+            description: 'Disables the toggle, preventing user interaction.',
+            args: { disabled: true },
+            template: (h("div", { "data-class": "flex gap-4 " }, h("nv-fieldtoggle", { "data-storybook-args": true }), h("nv-fieldtoggle", { "data-storybook-args": true, checked: true }))),
+        },
+        {
+            name: nameof(x => x.readonly),
+            description: 'Sets the toggle to read-only, preventing user changes but still allowing focus and selection of text.',
+            args: { readonly: true },
+            template: (h("div", { "data-class": "flex gap-4 " }, h("nv-fieldtoggle", { "data-storybook-args": true }), h("nv-fieldtoggle", { "data-storybook-args": true, checked: true }))),
+        },
+        {
+            name: nameof(x => x.hideLabel),
+            description: 'Hides the label visually while still keeping it available for screen readers.',
+            args: { label: 'Label', hideLabel: true },
+            template: h("nv-fieldtoggle", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.labelPlacement),
+            description: 'Determines the position of the label relative to the toggle, either `start` (before) or `end` (after).',
+            args: { label: 'Label', labelPlacement: 'before' },
+            template: h("nv-fieldtoggle", { "data-storybook-args": true }),
+        },
+        {
+            name: 'SlotLabel',
+            description: 'You can use the `label` slot to customize the content of the label.',
+            template: (h("nv-fieldtoggle", { "data-storybook-args": true }, h("span", { slot: "label" }, "Label"))),
+        },
+        {
+            name: 'SlotDescription',
+            description: 'You can use the `description` slot to customize the content of the description.',
+            template: (h("nv-fieldtoggle", { "data-storybook-args": true }, h("span", { slot: "description" }, "Description"))),
+        },
+    ],
+};
+export default NvFieldtoggleDocs;
+//# sourceMappingURL=nv-fieldtoggle.docs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-fieldtoggle.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldtoggle/nv-fieldtoggle.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGlC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,iBAAiB,GAAuC;IAC5D,SAAS,EAAE,gBAAgB;IAC3B,OAAO,EAAE;QACP;YACE,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,oDAAqD;SAChE;QACD;YACE,IAAI,EAAE,MAAM,CAA2B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;YACpD,WAAW,EAAE,yCAAyC;YACtD,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;YACxB,QAAQ,EAAE,oDAAqD;SAChE;QACD;YACE,IAAI,EAAE,MAAM,CAA2B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC;YAC1D,WAAW,EACT,6EAA6E;YAC/E,IAAI,EAAE,EAAE,WAAW,EAAE,aAAa,EAAE;YACpC,QAAQ,EAAE,oDAAqD;SAChE;QACD;YACE,IAAI,EAAE,MAAM,CAA2B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;YACtD,WAAW,EAAE,iDAAiD;YAC9D,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;YACvB,QAAQ,EAAE,oDAAqD;SAChE;QACD;YACE,IAAI,EAAE,MAAM,CAA2B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;YACvD,WAAW,EAAE,mDAAmD;YAChE,IAAI,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;YACxB,QAAQ,EAAE,CACR,yBAAgB,aAAa;gBAC3B,oDAAqD;gBACrD,mDAAoC,OAAO,SAAkB,CACzD,CACP;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAA2B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;YACvD,WAAW,EACT,uGAAuG;YACzG,IAAI,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;YACxB,QAAQ,EAAE,CACR,yBAAgB,aAAa;gBAC3B,oDAAqD;gBACrD,mDAAoC,OAAO,SAAkB,CACzD,CACP;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAA2B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;YACxD,WAAW,EACT,+EAA+E;YACjF,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE;YACzC,QAAQ,EAAE,oDAAqD;SAChE;QACD;YACE,IAAI,EAAE,MAAM,CAA2B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC;YAC7D,WAAW,EACT,wGAAwG;YAC1G,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE;YAClD,QAAQ,EAAE,oDAAqD;SAChE;QACD;YACE,IAAI,EAAE,WAAW;YACjB,WAAW,EACT,qEAAqE;YACvE,QAAQ,EAAE,CACR;gBACE,YAAM,IAAI,EAAC,OAAO,YAAa,CAChB,CAClB;SACF;QACD;YACE,IAAI,EAAE,iBAAiB;YACvB,WAAW,EACT,iFAAiF;YACnF,QAAQ,EAAE,CACR;gBACE,YAAM,IAAI,EAAC,aAAa,kBAAmB,CAC5B,CAClB;SACF;KACF;CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvFieldtoggleDocs: NovaDocs<Components.NvFieldtoggle> = {\n  component: 'nv-fieldtoggle',\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-fieldtoggle data-storybook-args></nv-fieldtoggle>,\n    },\n    {\n      name: nameof<Components.NvFieldtoggle>(x => x.label),\n      description: 'The label displayed next to the toggle.',\n      args: { label: 'Label' },\n      template: <nv-fieldtoggle data-storybook-args></nv-fieldtoggle>,\n    },\n    {\n      name: nameof<Components.NvFieldtoggle>(x => x.description),\n      description:\n        'A description providing additional context or information about the toggle.',\n      args: { description: 'Description' },\n      template: <nv-fieldtoggle data-storybook-args></nv-fieldtoggle>,\n    },\n    {\n      name: nameof<Components.NvFieldtoggle>(x => x.checked),\n      description: 'Indicates whether the toggle is checked or not.',\n      args: { checked: true },\n      template: <nv-fieldtoggle data-storybook-args></nv-fieldtoggle>,\n    },\n    {\n      name: nameof<Components.NvFieldtoggle>(x => x.disabled),\n      description: 'Disables the toggle, preventing user interaction.',\n      args: { disabled: true },\n      template: (\n        <div data-class=\"flex gap-4 \">\n          <nv-fieldtoggle data-storybook-args></nv-fieldtoggle>\n          <nv-fieldtoggle data-storybook-args checked></nv-fieldtoggle>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldtoggle>(x => x.readonly),\n      description:\n        'Sets the toggle to read-only, preventing user changes but still allowing focus and selection of text.',\n      args: { readonly: true },\n      template: (\n        <div data-class=\"flex gap-4 \">\n          <nv-fieldtoggle data-storybook-args></nv-fieldtoggle>\n          <nv-fieldtoggle data-storybook-args checked></nv-fieldtoggle>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldtoggle>(x => x.hideLabel),\n      description:\n        'Hides the label visually while still keeping it available for screen readers.',\n      args: { label: 'Label', hideLabel: true },\n      template: <nv-fieldtoggle data-storybook-args></nv-fieldtoggle>,\n    },\n    {\n      name: nameof<Components.NvFieldtoggle>(x => x.labelPlacement),\n      description:\n        'Determines the position of the label relative to the toggle, either `start` (before) or `end` (after).',\n      args: { label: 'Label', labelPlacement: 'before' },\n      template: <nv-fieldtoggle data-storybook-args></nv-fieldtoggle>,\n    },\n    {\n      name: 'SlotLabel',\n      description:\n        'You can use the `label` slot to customize the content of the label.',\n      template: (\n        <nv-fieldtoggle data-storybook-args>\n          <span slot=\"label\">Label</span>\n        </nv-fieldtoggle>\n      ),\n    },\n    {\n      name: 'SlotDescription',\n      description:\n        'You can use the `description` slot to customize the content of the description.',\n      template: (\n        <nv-fieldtoggle data-storybook-args>\n          <span slot=\"description\">Description</span>\n        </nv-fieldtoggle>\n      ),\n    },\n  ],\n};\n\nexport default NvFieldtoggleDocs;\n"]}

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

@@ -0,0 +1,283 @@
+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.
+ */
+export class NvFieldtoggle {
+    constructor() {
+        this.inputId = uuidv4();
+        this.name = undefined;
+        this.value = undefined;
+        this.label = undefined;
+        this.labelPlacement = undefined;
+        this.hideLabel = false;
+        this.description = undefined;
+        this.checked = false;
+        this.disabled = false;
+        this.readonly = false;
+    }
+    /****************************** WATCHERS ************************************/
+    /**
+     * Watches for changes to the checked state and emits the new value.
+     * @param {boolean} checked - The new value of the checked state.
+     */
+    onCheckedChanged(checked) {
+        this.checkedChanged.emit(checked);
+    }
+    /**
+     * Listens for the change event on the toggle input element and updates the checked state.
+     * the checked state of the host elements.
+     * @param {Event} event - The change event.
+     */
+    handleChange(event) {
+        const target = event.target;
+        if (target.type === 'checkbox' && target.id === this.inputId) {
+            if (this.readonly || this.disabled) {
+                event.preventDefault();
+                return;
+            }
+            this.checked = target.checked;
+        }
+    }
+    /********************************* RENDER ***********************************/
+    render() {
+        return (h(Host, { key: '32394c2068002d65652918e998a837ed413db2e8', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, h("div", { key: 'd2a037dbf554e6885853e10d1c5097e2900f7594', class: "input-container" }, h("input", { key: 'c9f150ee7742ed49066f2af75e9aa2fbe03750ba', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), h("div", { key: '6b6d95647dcd2eb850c6e78420581d7205707e62', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '00393d9a26ea57a6ecacc0a248d450d5ef8f543c', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: '8e2f5085aea5337d59e753ecd856a3fc6e057269', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'c44a88b35cab4b2c034a2f29a9bf0ec168b86a50', class: "description" }, h("slot", { key: '5d80f64e1ac6d61025aa54b77f5e7b0860e6cc11', name: "description" }, this.description))))));
+    }
+    static get is() { return "nv-fieldtoggle"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-fieldtoggle.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-fieldtoggle.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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": false,
+                "defaultValue": "uuidv4()"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name attribute for the toggle input, used to reference the form data\nafter submission."
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The value attribute of the toggle input, representing the value sent on\nform submission when the toggle is checked."
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The label displayed next to the toggle."
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "labelPlacement": {
+                "type": "string",
+                "mutable": false,
+                "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": "Determines the position of the label relative to the toggle, either\n'start' (before) or 'end' (after)."
+                },
+                "attribute": "label-placement",
+                "reflect": true
+            },
+            "hideLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the label visually while still keeping it available for screen\nreaders."
+                },
+                "attribute": "hide-label",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A description providing additional context or information about the\ntoggle."
+                },
+                "attribute": "description",
+                "reflect": true
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether the toggle is checked or not."
+                },
+                "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 toggle, preventing user interaction."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the toggle to read-only, preventing user changes but still allowing\nfocus and selection of text."
+                },
+                "attribute": "readonly",
+                "reflect": false,
+                "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": "onCheckedChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "change",
+                "method": "handleChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=nv-fieldtoggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-fieldtoggle.js","sourceRoot":"","sources":["../../../src/components/nv-fieldtoggle/nv-fieldtoggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,OAAO,EACP,KAAK,EACL,KAAK,EAEL,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAC;AAIpC;;;GAGG;AAMH,MAAM,OAAO,aAAa;;uBAWG,MAAM,EAAE;;;;;yBAgCL,KAAK;;uBAWhB,KAAK;wBAIK,KAAK;wBAOL,KAAK;;IAUlC,8EAA8E;IAC9E;;;OAGG;IAEH,gBAAgB,CAAC,OAAgB;QAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACpC,CAAC;IAED;;;;OAIG;IAEH,YAAY,CAAC,KAAY;QACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAEhD,IAAI,MAAM,CAAC,IAAI,KAAK,UAAU,IAAI,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;YAC7D,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;YAED,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;QAChC,CAAC;IACH,CAAC;IAED,8EAA8E;IAC9E,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CACT,IAAI,CAAC,cAAc,KAAK,QAAQ,IAAI,wBAAwB,CAC7D;YAED,4DAAK,KAAK,EAAC,iBAAiB;gBAC1B,8DACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,EAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,CACE;YAEN,4DAAK,KAAK,EAAC,gBAAgB;gBACxB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAC1D,8DACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,iBAAiB,CAAC;oBAEhD,6DAAM,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACT;gBAEA,CAAC,IAAI,CAAC,WAAW;oBAChB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC,IAAI,CAClD,4DAAK,KAAK,EAAC,aAAa;oBACtB,6DAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACP,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Watch,\n  Event,\n  EventEmitter,\n  Listen,\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 */\n@Component({\n  tag: 'nv-fieldtoggle',\n  styleUrl: 'nv-fieldtoggle.scss',\n  shadow: false,\n})\nexport class NvFieldtoggle {\n  @Element() el!: HTMLNvFieldtoggleElement;\n\n  /******************************** PROPERTIES ********************************/\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()\n  readonly inputId: string = uuidv4();\n\n  /**\n   * The name attribute for the toggle input, used to reference the form data\n   * after submission.\n   */\n  @Prop()\n  readonly name?: string;\n\n  /**\n   * The value attribute of the toggle input, representing the value sent on\n   * form submission when the toggle is checked.\n   */\n  @Prop()\n  readonly value?: string;\n\n  /** The label displayed next to the toggle.*/\n  @Prop()\n  readonly label?: string;\n\n  /**\n   * Determines the position of the label relative to the toggle, either\n   * 'start' (before) or 'end' (after).\n   */\n  @Prop({ reflect: true })\n  readonly labelPlacement: `${FieldLabelPlacement}`;\n\n  /**\n   * Hides the label visually while still keeping it available for screen\n   * readers.\n   */\n  @Prop()\n  readonly hideLabel: boolean = false;\n\n  /**\n   * A description providing additional context or information about the\n   * toggle.\n   */\n  @Prop({ reflect: true })\n  readonly description?: string;\n\n  /** Indicates whether the toggle is checked or not. */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /** Disables the toggle, preventing user interaction. */\n  @Prop()\n  readonly disabled: boolean = false;\n\n  /**\n   * Sets the toggle to read-only, preventing user changes but still allowing\n   * focus and selection of text.\n   */\n  @Prop()\n  readonly readonly: boolean = false;\n\n  /******************************** EVENTS ************************************/\n  /**\n   * Emits when the checked state changes.\n   * @bind checked\n   */\n  @Event()\n  checkedChanged: EventEmitter<boolean>;\n\n  /****************************** WATCHERS ************************************/\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  onCheckedChanged(checked: boolean) {\n    this.checkedChanged.emit(checked);\n  }\n\n  /**\n   * Listens for the change event on the toggle input element and updates the checked state.\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 === 'checkbox' && target.id === this.inputId) {\n      if (this.readonly || this.disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      this.checked = target.checked;\n    }\n  }\n\n  /********************************* RENDER ***********************************/\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.labelPlacement === 'before' && 'label-placement-before',\n        )}\n      >\n        <div class=\"input-container\">\n          <input\n            type=\"checkbox\"\n            id={this.inputId}\n            name={this.name}\n            autocomplete=\"off\"\n            value={this.value}\n            checked={Boolean(this.checked)}\n            disabled={this.disabled || this.readonly}\n            readonly={this.readonly}\n          />\n        </div>\n\n        <div class=\"text-container\">\n          {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n            <label\n              htmlFor={this.inputId}\n              class={clsx(this.hideLabel && 'visually-hidden')}\n            >\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        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/nv-icon/nv-icon.css

@@ -0,0 +1,32 @@
+/* Variants */
+nv-icon {
+  display: inline-block;
+  width: fit-content;
+  height: fit-content;
+  color: inherit;
+}
+nv-icon > .nv-icon-xs {
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  stroke-width: 1.2px;
+}
+nv-icon > .nv-icon-sm {
+  width: var(--spacing-4);
+  height: var(--spacing-4);
+  stroke-width: 1.5px;
+}
+nv-icon > .nv-icon-md {
+  width: var(--spacing-5);
+  height: var(--spacing-5);
+  stroke-width: 1.6px;
+}
+nv-icon > .nv-icon-lg {
+  width: var(--spacing-6);
+  height: var(--spacing-6);
+  stroke-width: 1.8px;
+}
+nv-icon > .nv-icon-xl {
+  width: var(--spacing-7);
+  height: var(--spacing-7);
+  stroke-width: 1.9px;
+}

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

@@ -0,0 +1,31 @@
+import { h } from "@stencil/core";
+import { iconNames } from "./nv-icons";
+import { nameof } from "../../utils/class.utils";
+const NvIconDocs = {
+    component: 'nv-icon',
+    stories: [
+        {
+            name: 'Default',
+            args: { name: 'user' },
+            template: h("nv-icon", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.name),
+            description: 'Choose the icon you want to display.',
+            args: { name: 'user' },
+            template: h("nv-icon", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.size),
+            args: { name: 'user' },
+            template: (h("div", { "data-class": "flex gap-4" }, h("nv-icon", { "data-storybook-args": true, size: "xs" }), h("nv-icon", { "data-storybook-args": true, size: "sm" }), h("nv-icon", { "data-storybook-args": true, size: "md" }), h("nv-icon", { "data-storybook-args": true, size: "lg" }), h("nv-icon", { "data-storybook-args": true, size: "xl" }))),
+        },
+        {
+            name: 'List',
+            description: 'Showcase of all available icons.',
+            template: (h("div", { "data-class": "flex flex-row flex-wrap gap-4" }, iconNames.map(iconName => (h("div", { "data-class": "w-2/12 flex flex-col items-center aspect-square" }, h("nv-icon", { name: iconName, size: "md" }), h("span", { "data-class": "text-xs mt-2" }, iconName)))))),
+        },
+    ],
+};
+export default NvIconDocs;
+//# sourceMappingURL=nv-icon.docs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-icon.docs.js","sourceRoot":"","sources":["../../../src/components/nv-icon/nv-icon.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGlC,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,UAAU,GAAgC;IAC9C,SAAS,EAAE,SAAS;IACpB,OAAO,EAAE;QACP;YACE,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACtB,QAAQ,EAAE,6CAAuC;SAClD;QACD;YACE,IAAI,EAAE,MAAM,CAAoB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YAC5C,WAAW,EAAE,sCAAsC;YACnD,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACtB,QAAQ,EAAE,6CAAuC;SAClD;QACD;YACE,IAAI,EAAE,MAAM,CAAoB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YAC5C,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACtB,QAAQ,EAAE,CACR,yBAAgB,YAAY;gBAC1B,4CAA6B,IAAI,EAAC,IAAI,GAAW;gBACjD,4CAA6B,IAAI,EAAC,IAAI,GAAW;gBACjD,4CAA6B,IAAI,EAAC,IAAI,GAAW;gBACjD,4CAA6B,IAAI,EAAC,IAAI,GAAW;gBACjD,4CAA6B,IAAI,EAAC,IAAI,GAAW,CAC7C,CACP;SACF;QACD;YACE,IAAI,EAAE,MAAM;YACZ,WAAW,EAAE,kCAAkC;YAC/C,QAAQ,EAAE,CACR,yBAAgB,+BAA+B,IAC5C,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CACzB,yBAAgB,iDAAiD;gBAC/D,eAAS,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,IAAI,GAAW;gBAC7C,0BAAiB,cAAc,IAAE,QAAQ,CAAQ,CAC7C,CACP,CAAC,CACE,CACP;SACF;KACF;CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { iconNames } from './nv-icons';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvIconDocs: NovaDocs<Components.NvIcon> = {\n  component: 'nv-icon',\n  stories: [\n    {\n      name: 'Default',\n      args: { name: 'user' },\n      template: <nv-icon data-storybook-args></nv-icon>,\n    },\n    {\n      name: nameof<Components.NvIcon>(x => x.name),\n      description: 'Choose the icon you want to display.',\n      args: { name: 'user' },\n      template: <nv-icon data-storybook-args></nv-icon>,\n    },\n    {\n      name: nameof<Components.NvIcon>(x => x.size),\n      args: { name: 'user' },\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-icon data-storybook-args size=\"xs\"></nv-icon>\n          <nv-icon data-storybook-args size=\"sm\"></nv-icon>\n          <nv-icon data-storybook-args size=\"md\"></nv-icon>\n          <nv-icon data-storybook-args size=\"lg\"></nv-icon>\n          <nv-icon data-storybook-args size=\"xl\"></nv-icon>\n        </div>\n      ),\n    },\n    {\n      name: 'List',\n      description: 'Showcase of all available icons.',\n      template: (\n        <div data-class=\"flex flex-row flex-wrap gap-4\">\n          {iconNames.map(iconName => (\n            <div data-class=\"w-2/12 flex flex-col items-center aspect-square\">\n              <nv-icon name={iconName} size=\"md\"></nv-icon>\n              <span data-class=\"text-xs mt-2\">{iconName}</span>\n            </div>\n          ))}\n        </div>\n      ),\n    },\n  ],\n};\n\nexport default NvIconDocs;\n"]}