npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.0.0-beta.38 → 3.0.0-beta.39 - Mend

@nova-design-system/nova-webcomponents 3.0.0-beta.38 → 3.0.0-beta.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (508) hide show

package/dist/collection/components/nv-fieldselect/nv-fieldselect.docs.js CHANGED Viewed

@@ -4,13 +4,11 @@ const NvFieldselectDocs = {
     component: 'nv-fieldselect',
     subcomponents: ['nv-badge', 'nv-button'],
     stories: [
-        // Default Story
         {
             name: 'Default',
             description: 'A default nv-fieldselect with no specific props set.',
             template: (h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4"))),
         },
-        // Label Prop Story
         {
             name: nameof(x => x.label),
             args: {
@@ -18,7 +16,6 @@ const NvFieldselectDocs = {
             },
             template: (h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4"))),
         },
-        // Description Prop Story
         {
             name: nameof(x => x.description),
             args: {
@@ -27,7 +24,6 @@ const NvFieldselectDocs = {
             },
             template: (h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4"))),
         },
-        // Placeholder Prop Story
         {
             name: 'Placeholder',
             description: 'Display temporary text inside the select field to give users a hint about what to choose.',
@@ -36,7 +32,6 @@ const NvFieldselectDocs = {
             },
             template: (h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "", disabled: true }, "Choose an option..."), h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4"))),
         },
-        // Value Prop Story
         {
             name: nameof(x => x.value),
             args: {
@@ -45,7 +40,6 @@ const NvFieldselectDocs = {
             },
             template: (h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4"))),
         },
-        // Disabled Prop Story
         {
             name: nameof(x => x.disabled),
             args: {
@@ -55,7 +49,6 @@ const NvFieldselectDocs = {
             },
             template: (h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4"))),
         },
-        // Readonly Prop Story
         {
             name: nameof(x => x.readonly),
             args: {
@@ -65,7 +58,6 @@ const NvFieldselectDocs = {
             },
             template: (h("div", { "data-class": "flex flex-col gap-2" }, h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4")), h("nv-fieldselect", { "data-storybook-args": true, multiple: true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4")))),
         },
-        // Readonly Prop Story + Display Value
         {
             name: nameof(x => x.displayValue),
             args: {
@@ -76,7 +68,6 @@ const NvFieldselectDocs = {
             },
             template: (h("div", { "data-class": "flex flex-col gap-2" }, h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2")), h("nv-fieldselect", { "data-storybook-args": true, multiple: true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2")))),
         },
-        // Required Prop Story
         {
             name: nameof(x => x.required),
             args: {
@@ -85,7 +76,6 @@ const NvFieldselectDocs = {
             },
             template: (h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4"))),
         },
-        // Error Prop Story
         {
             name: nameof(x => x.error),
             args: {
@@ -94,7 +84,6 @@ const NvFieldselectDocs = {
             },
             template: (h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4"))),
         },
-        // Success Prop Story
         {
             name: nameof(x => x.success),
             args: {
@@ -103,7 +92,6 @@ const NvFieldselectDocs = {
             },
             template: (h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4"))),
         },
-        // Multiple Prop Story
         {
             name: nameof(x => x.multiple),
             args: {
@@ -112,13 +100,19 @@ const NvFieldselectDocs = {
             },
             template: (h("div", { "data-class": "flex flex-col gap-2" }, h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4")), h("nv-fieldselect", { value: "1, 2", "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4")))),
         },
-        // SlotLabel Story
+        {
+            name: nameof(x => x.autofocus),
+            args: {
+                label: 'Autofocus',
+                autofocus: true,
+            },
+            template: (h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4"))),
+        },
         {
             name: 'SlotLabel',
             description: 'You can use the `label` slot to customize the content of the label.',
             template: (h("nv-fieldselect", { "data-storybook-args": true }, h("span", { slot: "label" }, "Label"), h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4"))),
         },
-        // SlotDescription Story
         {
             name: 'SlotDescription',
             description: 'You can use the `description` slot to customize the content of the description.',
@@ -128,19 +122,16 @@ const NvFieldselectDocs = {
             },
             template: (h("nv-fieldselect", { "data-storybook-args": true }, h("span", { slot: "description" }, "Description"), h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4"))),
         },
-        // SlotBefore Story
         {
             name: 'SlotBefore',
             description: 'You can use the `before` slot to customize the content before the select.',
             template: (h("nv-fieldselect", { "data-storybook-args": true }, h("span", { slot: "before" }, "Before"), h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4"))),
         },
-        // SlotAfter Story
         {
             name: 'SlotAfter',
             description: 'You can use the `after` slot to customize the content after the select.',
             template: (h("nv-fieldselect", { "data-storybook-args": true }, h("span", { slot: "after" }, "After"), h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4"))),
         },
-        // SlotErrorDescription Story
         {
             name: 'SlotErrorDescription',
             description: 'You can use the `error-description` slot to customize the content of the error description.',
@@ -151,7 +142,6 @@ const NvFieldselectDocs = {
             },
             template: (h("nv-fieldselect", { "data-storybook-args": true }, h("span", { slot: "error-description" }, "Error Description"), h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4"))),
         },
-        // Options JSON Story
         {
             name: 'Options JSON',
             args: {
@@ -166,7 +156,6 @@ const NvFieldselectDocs = {
             },
             template: h("nv-fieldselect", { "data-storybook-args": true }),
         },
-        // Options JSON Preselected Story
         {
             name: 'Options JSON Preselected',
             args: {

package/dist/collection/components/nv-fieldselect/nv-fieldselect.docs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-fieldselect.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldselect/nv-fieldselect.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 NvFieldselectDocs: NovaDocs<Components.NvFieldselect> = {\n component: 'nv-fieldselect',\n subcomponents: ['nv-badge', 'nv-button'],\n stories: [\n // Default Story\n {\n name: 'Default',\n description: 'A default nv-fieldselect with no specific props set.',\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n // Label Prop Story\n {\n name: nameof<Components.NvFieldselect>(x => x.label),\n args: {\n label: 'Select Label',\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n // Description Prop Story\n {\n name: nameof<Components.NvFieldselect>(x => x.description),\n args: {\n label: 'Select with Description',\n description: 'This is a description.',\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n // Placeholder Prop Story\n {\n name: 'Placeholder',\n description:\n 'Display temporary text inside the select field to give users a hint about what to choose.',\n args: {\n label: 'Select with Placeholder',\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"\" disabled>\n Choose an option...\n </option>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n // Value Prop Story\n {\n name: nameof<Components.NvFieldselect>(x => x.value),\n args: {\n label: 'Select Value',\n value: '2',\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n // Disabled Prop Story\n {\n name: nameof<Components.NvFieldselect>(x => x.disabled),\n args: {\n label: 'Disabled Select',\n disabled: true,\n value: '3',\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n // Readonly Prop Story\n {\n name: nameof<Components.NvFieldselect>(x => x.readonly),\n args: {\n label: 'Readonly Select',\n readonly: true,\n value: '1',\n },\n template: (\n <div data-class=\"flex flex-col gap-2\">\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n <nv-fieldselect data-storybook-args multiple={true}>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n </div>\n ),\n },\n // Readonly Prop Story + Display Value\n {\n name: nameof<Components.NvFieldselect>(x => x.displayValue),\n args: {\n label: 'Readonly Select with Display Label',\n readonly: true,\n displayValue: true,\n value: '1',\n },\n template: (\n <div data-class=\"flex flex-col gap-2\">\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n </nv-fieldselect>\n <nv-fieldselect data-storybook-args multiple={true}>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n </nv-fieldselect>\n </div>\n ),\n },\n // Required Prop Story\n {\n name: nameof<Components.NvFieldselect>(x => x.required),\n args: {\n label: 'Required Field',\n required: true,\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n // Error Prop Story\n {\n name: nameof<Components.NvFieldselect>(x => x.error),\n args: {\n label: 'Error State',\n error: true,\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n // Success Prop Story\n {\n name: nameof<Components.NvFieldselect>(x => x.success),\n args: {\n label: 'Success State',\n success: true,\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n // Multiple Prop Story\n {\n name: nameof<Components.NvFieldselect>(x => x.multiple),\n args: {\n label: 'Multiple Select',\n multiple: true,\n },\n template: (\n <div data-class=\"flex flex-col gap-2\">\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n <nv-fieldselect value=\"1, 2\" data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n </div>\n ),\n },\n // SlotLabel Story\n {\n name: 'SlotLabel',\n description:\n 'You can use the `label` slot to customize the content of the label.',\n template: (\n <nv-fieldselect data-storybook-args>\n <span slot=\"label\">Label</span>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n // SlotDescription Story\n {\n name: 'SlotDescription',\n description:\n 'You can use the `description` slot to customize the content of the description.',\n args: {\n label: 'Select with Description',\n description: 'This is a description.',\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <span slot=\"description\">Description</span>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n // SlotBefore Story\n {\n name: 'SlotBefore',\n description:\n 'You can use the `before` slot to customize the content before the select.',\n template: (\n <nv-fieldselect data-storybook-args>\n <span slot=\"before\">Before</span>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n // SlotAfter Story\n {\n name: 'SlotAfter',\n description:\n 'You can use the `after` slot to customize the content after the select.',\n template: (\n <nv-fieldselect data-storybook-args>\n <span slot=\"after\">After</span>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n // SlotErrorDescription Story\n {\n name: 'SlotErrorDescription',\n description:\n 'You can use the `error-description` slot to customize the content of the error description.',\n args: {\n label: 'Select with Error',\n error: true,\n errorDescription: 'This is an error.',\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <span slot=\"error-description\">Error Description</span>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n // Options JSON Story\n {\n name: 'Options JSON',\n args: {\n label: 'Select with JSON Options',\n options: JSON.stringify([\n { label: 'Paris', value: 'paris' },\n { label: 'London', value: 'london' },\n { label: 'New York', value: 'ny' },\n { label: 'Tokyo', value: 'tokyo', disabled: true },\n { label: 'Berlin', value: 'berlin' },\n ]),\n },\n template: <nv-fieldselect data-storybook-args></nv-fieldselect>,\n },\n // Options JSON Preselected Story\n {\n name: 'Options JSON Preselected',\n args: {\n label: 'Select with Preselected JSON Option',\n options: JSON.stringify([\n { label: 'Paris', value: 'paris' },\n { label: 'London', value: 'london', selected: true },\n { label: 'New York', value: 'ny' },\n { label: 'Tokyo', value: 'tokyo', disabled: true },\n { label: 'Berlin', value: 'berlin' },\n ]),\n },\n template: <nv-fieldselect data-storybook-args></nv-fieldselect>,\n },\n ],\n};\n\nexport default NvFieldselectDocs;\n"]}
1	+ {"version":3,"file":"nv-fieldselect.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldselect/nv-fieldselect.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 NvFieldselectDocs: NovaDocs<Components.NvFieldselect> = {\n component: 'nv-fieldselect',\n subcomponents: ['nv-badge', 'nv-button'],\n stories: [\n {\n name: 'Default',\n description: 'A default nv-fieldselect with no specific props set.',\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.label),\n args: {\n label: 'Select Label',\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.description),\n args: {\n label: 'Select with Description',\n description: 'This is a description.',\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: 'Placeholder',\n description:\n 'Display temporary text inside the select field to give users a hint about what to choose.',\n args: {\n label: 'Select with Placeholder',\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"\" disabled>\n Choose an option...\n </option>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.value),\n args: {\n label: 'Select Value',\n value: '2',\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.disabled),\n args: {\n label: 'Disabled Select',\n disabled: true,\n value: '3',\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.readonly),\n args: {\n label: 'Readonly Select',\n readonly: true,\n value: '1',\n },\n template: (\n <div data-class=\"flex flex-col gap-2\">\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n <nv-fieldselect data-storybook-args multiple={true}>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n </div>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.displayValue),\n args: {\n label: 'Readonly Select with Display Label',\n readonly: true,\n displayValue: true,\n value: '1',\n },\n template: (\n <div data-class=\"flex flex-col gap-2\">\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n </nv-fieldselect>\n <nv-fieldselect data-storybook-args multiple={true}>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n </nv-fieldselect>\n </div>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.required),\n args: {\n label: 'Required Field',\n required: true,\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.error),\n args: {\n label: 'Error State',\n error: true,\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.success),\n args: {\n label: 'Success State',\n success: true,\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.multiple),\n args: {\n label: 'Multiple Select',\n multiple: true,\n },\n template: (\n <div data-class=\"flex flex-col gap-2\">\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n <nv-fieldselect value=\"1, 2\" data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n </div>\n ),\n },\n {\n name: nameof<Components.NvFieldselect>(x => x.autofocus),\n args: {\n label: 'Autofocus',\n autofocus: true,\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\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-fieldselect data-storybook-args>\n <span slot=\"label\">Label</span>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: 'SlotDescription',\n description:\n 'You can use the `description` slot to customize the content of the description.',\n args: {\n label: 'Select with Description',\n description: 'This is a description.',\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <span slot=\"description\">Description</span>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: 'SlotBefore',\n description:\n 'You can use the `before` slot to customize the content before the select.',\n template: (\n <nv-fieldselect data-storybook-args>\n <span slot=\"before\">Before</span>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: 'SlotAfter',\n description:\n 'You can use the `after` slot to customize the content after the select.',\n template: (\n <nv-fieldselect data-storybook-args>\n <span slot=\"after\">After</span>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: 'SlotErrorDescription',\n description:\n 'You can use the `error-description` slot to customize the content of the error description.',\n args: {\n label: 'Select with Error',\n error: true,\n errorDescription: 'This is an error.',\n },\n template: (\n <nv-fieldselect data-storybook-args>\n <span slot=\"error-description\">Error Description</span>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n <option value=\"3\">Option 3</option>\n <option value=\"4\">Option 4</option>\n </nv-fieldselect>\n ),\n },\n {\n name: 'Options JSON',\n args: {\n label: 'Select with JSON Options',\n options: JSON.stringify([\n { label: 'Paris', value: 'paris' },\n { label: 'London', value: 'london' },\n { label: 'New York', value: 'ny' },\n { label: 'Tokyo', value: 'tokyo', disabled: true },\n { label: 'Berlin', value: 'berlin' },\n ]),\n },\n template: <nv-fieldselect data-storybook-args></nv-fieldselect>,\n },\n {\n name: 'Options JSON Preselected',\n args: {\n label: 'Select with Preselected JSON Option',\n options: JSON.stringify([\n { label: 'Paris', value: 'paris' },\n { label: 'London', value: 'london', selected: true },\n { label: 'New York', value: 'ny' },\n { label: 'Tokyo', value: 'tokyo', disabled: true },\n { label: 'Berlin', value: 'berlin' },\n ]),\n },\n template: <nv-fieldselect data-storybook-args></nv-fieldselect>,\n },\n ],\n};\n\nexport default NvFieldselectDocs;\n"]}

package/dist/collection/components/nv-fieldselect/nv-fieldselect.js CHANGED Viewed

@@ -74,6 +74,12 @@ export class NvFieldselect {
          * sets the component to readonly.
          */
         this.displayValue = false;
+        /**
+         * Applies focus to the input field as soon as the component is mounted. This
+         * is equivalent to setting the native autofocus attribute on a <select>
+         * element.
+         */
+        this.autofocus = false;
         //#endregion WATCHERS
         /****************************************************************************/
         //#region METHODS
@@ -337,13 +343,13 @@ export class NvFieldselect {
      * @returns {HTMLStencilElement} The HTML element to render.
      */
     render() {
-        return (h(Host, { key: 'ace27d52d50f0c22b6f9f54f3da24873f7c474c4' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '96665d80aec4cd4d8d0443c213a527d04a180f18', htmlFor: this.inputId }, h("slot", { key: '829c2f8afee3c36ed9706fc8de20c618334d1ed4', name: "label" }, this.label))), h("div", { key: 'e86b1e70ead3e7417db02d2b61c7df03872e7550', class: "select-wrapper" }, h("slot", { key: 'ab92d514336802ce38524abaac3b0ad4603a827a', name: "before-input" }), h("div", { key: 'ae6a3d57989cf64d8d443c81b02ef69b0421e0cd', class: "select-container", onClick: this.handleSelectContainerClick }, h("slot", { key: '3bb4e745a7b54377033814ecf8a85d2a041d0f83', name: "leading-input" }), this.internalReadonly && (h("input", { key: '7561e654ffd9eb3a50e4964bdca878e884c5fbaa', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
+        return (h(Host, { key: 'ec04f194be75e170699c357326154d7941fec6ce' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '0edc03d998e48060f9ceb0f164df1870226d8f7a', htmlFor: this.inputId }, h("slot", { key: '8a30ef1179797c99439e817d361e64eb7d5ad49e', name: "label" }, this.label))), h("div", { key: '06a59d0d207252a48a8a1b15592261c684eae329', class: "select-wrapper" }, h("slot", { key: '1a00c30cb8b3052e889dc15ba4581d58c88bb199', name: "before-input" }), h("div", { key: '5f405ab2666cf72dda3efa7a38d72d9d1febc964', class: "select-container", onClick: this.handleSelectContainerClick }, h("slot", { key: '711c23d7209a67a98c5b4915b02747e6c3dbaccf', name: "leading-input" }), this.internalReadonly && (h("input", { key: 'ab155f3f4fb064f9140f92a5d355388b2da38192', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
                 ? `${this.inputId}-error`
-                : `${this.inputId}-description` })), h("select", { key: '85057141cc87b490cb61f57d7b04d2fec9587f7f', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
+                : `${this.inputId}-description` })), h("select", { key: '59927b0fc45656c38e665fecfee870db6bfff228', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
                 ? `${this.inputId}-error`
-                : `${this.inputId}-description` }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (h("slot", null))), this.internalReadonly && (h("nv-icon", { key: '457ce2cf6de8979791e6f5e7c5e1007e91c2cc8a', name: "chevron-down", class: "readonly-icon", size: "sm" })), this.error && (h("nv-icon", { key: '65db640022a44074f0d2a8bad386ca0222f4abd9', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: 'bed81f83509df49579e727899ecd9ddb4a3aae82', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: '080b73f51093d4419eee7e78d66bd8dd61eb10c4', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'b4a180bf9df7061db893835f0a9438893f0b89de', class: "description", id: `${this.inputId}-description` }, h("slot", { key: '14b4e339fb55ca87340bfa712b2280a965408935', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'fd838c220f354e5ad3984780c04c372b540439e1', class: "error-description", id: `${this.inputId}-error` }, h("slot", { key: 'e8c632c8966283d581bd03d69ff9b6cd5e38e14f', name: "error-description" }, this.errorDescription)))));
+                : `${this.inputId}-description` }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (h("slot", null))), this.internalReadonly && (h("nv-icon", { key: 'cf35aab9fe5c8d0f684f96de13264c11a86d2847', name: "chevron-down", class: "readonly-icon", size: "sm" })), this.error && (h("nv-icon", { key: '20dc8da6bfc7eeb8f458392d7cdacc94f27d594c', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: 'a590386f8d19ada1b9aebe07cc4129a301bb4b50', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: '063a1fdcf06ab8cff2890f932a04757f7a1b0eea', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '5a539edf1387e5fa5e6ff14e8739f42d1d1dd44a', class: "description", id: `${this.inputId}-description` }, h("slot", { key: '6fa1cbff90c6df1f2fdf77e86f762d7dd6ee1ba3', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '57b89f5a7f9149fcd9c65f75defd25e2259f27d8', class: "error-description", id: `${this.inputId}-error` }, h("slot", { key: 'a3e85418965c828f241679d4b7359d04ac3801ac', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldselect"; }
     static get formAssociated() { return true; }
@@ -683,6 +689,26 @@ export class NvFieldselect {
                 "attribute": "display-value",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "autofocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Applies focus to the input field as soon as the component is mounted. This\nis equivalent to setting the native autofocus attribute on a <select>\nelement."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "autofocus",
+                "reflect": true,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/nv-fieldselect/nv-fieldselect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-fieldselect.js","sourceRoot":"","sources":["../../../src/components/nv-fieldselect/nv-fieldselect.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Watch,\n Element,\n State,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\n/*\n @slot default - Content to be placed inside the select element.\n * @slot leading-input - Content to be placed before the select input, within the select container.\n * @slot before-input - Content to be placed before the select input, outside the select container.\n * @slot after-input - Content to be placed after the select input, outside the select container.\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-fieldselect',\n shadow: false,\n formAssociated: true,\n styleUrl: 'nv-fieldselect.scss',\n})\nexport class NvFieldselect {\n @Element() el: HTMLNvFieldselectElement;\n private selectElement!: HTMLSelectElement;\n private internals: ElementInternals;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Message defines a 'hint ' message for the Select Field.\n * @deprecated Use `description` instead.\n /\n @Prop()\n readonly message: string;\n\n /\n Add the message to the validation state.\n * @deprecated Use `errorDescription` and set the error prop instead.\n /\n @Prop()\n readonly validation: string;\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region STATES\n\n @State()\n private computedDisplayValue: string = '';\n\n @State()\n private internalReadonly: boolean = false;\n\n /\n * Options to display in the select. Can be passed as a JSON string.\n * Format: [{ label: string, value: string, selected?: boolean, disabled?: boolean }]\n /\n @Prop()\n readonly options?: string;\n\n /\n Parsed options stored internally\n /\n @State()\n private parsedOptions: Array<{\n /\n The label of the option\n /\n label: string;\n /\n The value of the option\n /\n value: string;\n /\n Whether the option is selected\n /\n selected?: boolean;\n /\n Whether the option is disabled\n /\n disabled?: boolean;\n }> = [];\n\n //#endregion STATES\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Sets the ID for the select element and the for attribute of the associated\n * label. If no ID is provided, a random one will be automatically generated\n * to ensure unique identification, facilitating proper label association and\n * accessibility.\n /\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /\n Lets you define the text that explains what users should choose in the\n * select field. It’s a crucial element for making forms clear and\n * user-friendly.\n /\n @Prop({ reflect: true })\n readonly label?: string;\n\n /\n Add helpful hints or extra information under the select field. This is\n * where you can clarify what users should choose or provide additional\n * instructions, making the form easier to fill out correctly.\n /\n @Prop({ reflect: true, mutable: true })\n description?: string;\n\n /\n Defines the name attribute of the select field, which is crucial for form\n * submission. This value is used as the key in the key-value pair sent to\n * the server, representing the selected data in form submissions. It should be\n * unique within the form to avoid conflicts\n /\n @Prop({ reflect: true })\n readonly name: string;\n\n /\n The disabled prop lets you turn off the select field so that users can’t\n * choose something. When disabled, the field is grayed out and won’t respond to\n * clicks or touches.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Display the select field’s content without allowing users to change it.\n * Users can still click on it, select, and copy the text, but they won’t be\n * able to change or delete anything.\n /\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /\n Marks the select field as required, ensuring that the user must fill it out\n * before submitting the form.\n /\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /\n Alters the select field’s appearance to indicate an error, helping users\n * identify fields that need correction.\n * @validator error\n /\n @Prop({ reflect: true, mutable: true })\n error: boolean = false;\n\n /\n Show a helpful message under the select field when there’s a problem. It\n * explains what’s wrong and how users can fix it, making the error easier to\n * understand and resolve.\n * @validator message\n /\n @Prop({ reflect: true, mutable: true })\n errorDescription: string;\n\n /\n Changes the select field’s appearance to indicate successful input or\n * validation.\n /\n @Prop({ reflect: true })\n readonly success: boolean = false;\n\n /\n When enabled, allows the select to handle multiple selections.\n /\n @Prop({ reflect: true })\n readonly multiple: boolean = false;\n\n /\n The value of the select field.\n * - If `multiple` is `false`, it's a single string.\n * - If `multiple` is `true`, it's a comma-separated string of selected values.\n /\n @Prop({ reflect: true, mutable: true })\n value: string = '';\n\n /\n When enabled, displays the value element instead of the label when readonly.\n * By default, the label is displayed in readonly mode. Also it automatically\n * sets the component to readonly.\n /\n @Prop({ reflect: true })\n readonly displayValue: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the selected value changes.\n * @bind value\n /\n @Event()\n valueChanged: EventEmitter<string>; // Emit as a string\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n /\n * Updates the display value when the value property changes. This watcher is\n * used to update the display value when the selected value changes. This is\n * necessary for readonly select fields to display the selected value.\n * @internal This watcher is not intended to be called outside of the component.\n * @param {string} newValue - The new value of the select field.\n /\n @Watch('value')\n updateDisplayValueWatcher(newValue: string) {\n this.updateDisplayValue();\n\n if (this.selectElement) {\n const selectedValues = newValue.split(',').map(val => val.trim());\n const options = this.selectElement.options;\n\n if (options) {\n Array.from(options).forEach(option => {\n option.selected = this.multiple\n ? selectedValues.includes(option.value)\n : option.value === selectedValues[0];\n });\n\n if (!this.multiple) {\n this.selectElement.value = newValue; // Only set when not multiple\n }\n } else {\n this.selectElement.value = selectedValues[0] \|\| '';\n }\n }\n\n // Update form value\n this.setFormValue();\n }\n\n /\n Watcher for the displayValue prop to ensure internalReadonly is true when displayValue is true.\n * @param {boolean} newValue - The new value of displayValue.\n /\n @Watch('displayValue')\n handleDisplayValueChange(newValue: boolean) {\n this.internalReadonly = newValue; // Set internalReadonly to true if displayValue is true\n\n if (this.readonly) {\n this.internalReadonly = true;\n }\n }\n\n /\n Watcher for the readonly prop to ensure internalReadonly is true when readonly is true.\n * @param {boolean} newValue - The new value of readonly.\n /\n @Watch('readonly')\n handleReadonlyChange(newValue: boolean) {\n this.internalReadonly = newValue; // Set internalReadonly to true if displayValue is true\n\n if (this.displayValue) {\n this.internalReadonly = true;\n }\n }\n\n /\n Parse options and update the internal state\n * @param {string} newValue - The new value of options\n /\n @Watch('options')\n handleOptionsChange(newValue: string) {\n if (typeof newValue === 'string') {\n try {\n const parsedOpts = JSON.parse(newValue);\n this.parsedOptions = [...parsedOpts];\n\n // Update the value if an option is pre-selected\n const selectedOption = parsedOpts.find(opt => opt.selected);\n if (selectedOption) {\n this.value = selectedOption.value;\n }\n } catch (error) {\n console.error('Error parsing options:', error);\n this.parsedOptions = [];\n }\n }\n }\n\n //#endregion WATCHERS\n /*************************************************************************/\n //#region METHODS\n\n /\n * Handles the change event on the select element. This method is used to\n * update the value property when the selected options change. It is also\n * used to emit the selectChanged event when the selected value changes.\n * @param {Event} event - The change event on the select element.\n * @emits selectChanged\n /\n private readonly handleSelectChange = (event: Event) => {\n const select = event.target as HTMLSelectElement;\n let selectedValues: string[] = Array.from(select.selectedOptions).map(\n option => option.value,\n );\n\n if (!this.multiple) {\n selectedValues = selectedValues.slice(0, 1);\n }\n\n this.value = this.multiple\n ? selectedValues.join(', ')\n : selectedValues[0] \|\| '';\n this.valueChanged.emit(this.value);\n\n // Update form value\n this.setFormValue();\n };\n\n /\n Handles focus when the select container is clicked.\n /\n private readonly handleSelectContainerClick = () => {\n if (!this.internalReadonly && this.selectElement) {\n this.selectElement.focus();\n }\n };\n\n /\n Updates the display value of the select field. This method is used to\n * update the display value when the selected value changes. This is necessary\n * for readonly select fields to display the selected value. This method is\n * called in the componentDidLoad lifecycle hook and the updateDisplayValueWatcher\n * watcher.\n * @internal This method is not intended to be called outside of the component.\n /\n private updateDisplayValue(): void {\n if (this.internalReadonly && !this.displayValue) {\n if (this.multiple) {\n const selectedLabels = this.value\n .split(',')\n .map(key => key.trim())\n .map(key => this.getLabelFromId(key) \|\| '')\n .filter(label => label !== '');\n this.computedDisplayValue = selectedLabels.join(', ') \|\| '';\n } else {\n this.computedDisplayValue = this.getLabelFromId(this.value) \|\| '';\n }\n } else if (this.internalReadonly && this.displayValue) {\n this.computedDisplayValue = this.value \|\| '';\n }\n }\n\n /\n Retrieves the label from the <option> elements based on the provided key (value).\n * This method uses the id or value attribute directly from the <select> options.\n * @param {string} key - The key (value) for which to find the corresponding label.\n * @returns {string} The label if found; otherwise, an empty string.\n /\n private getLabelFromId(key: string): string {\n this.ensureSelectElement();\n if (!this.selectElement) {\n return '';\n }\n\n // Cache the option list\n const options = this.selectElement.options;\n\n if (options) {\n const option = Array.from(options).find(option => option.value === key);\n return option ? option.textContent.trim() \|\| '' : '';\n } else {\n return '';\n }\n }\n\n /\n Sets the value of the form element for form submission. This method is\n * called when the selected value changes or when the value property is set.\n * @internal This method is not intended to be called outside of the component.\n /\n private setFormValue(): void {\n this.internals.setFormValue(this.value);\n }\n\n /\n Ensures the select element is available. This method is used to ensure\n * the select element is available before attempting to access it.\n * @internal This method is not intended to be called outside of the component.\n /\n private ensureSelectElement(): void {\n if (!this.selectElement) {\n this.selectElement = this.el.querySelector('select') as HTMLSelectElement;\n }\n }\n\n //#endregion METHODS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillRender() {\n this.updateDisplayValue(); // Ensure display value is updated before render\n\n if (this.message) {\n this.description = this.message;\n }\n\n if (this.validation) {\n this.errorDescription = this.validation;\n this.error = true;\n }\n }\n\n /\n * Lifecycle method that is called before the component is rendered. This is\n * where the internal state is set up before rendering occurs.\n /\n componentWillLoad() {\n // Set internalReadonly based on the readonly prop\n this.internalReadonly = this.readonly;\n\n // Ensure internalReadonly is true if displayValue is true during loading\n if (this.displayValue) {\n this.internalReadonly = true;\n }\n\n if ('attachInternals' in this.el) {\n this.internals = (\n this.el as HTMLElement & {\n /\n Attach the element to the form internals.\n * @returns {ElementInternals} - The element internals object.\n /\n attachInternals: () => ElementInternals;\n }\n ).attachInternals();\n } else {\n // Fallback logic for browsers without attachInternals support\n this.internals = {\n setFormValue: (value: string) => {\n const formElement = this.el.closest('form');\n if (formElement) {\n const input = document.createElement('input');\n input.type = 'hidden';\n input.name = this.name;\n input.value = value;\n formElement.appendChild(input);\n }\n },\n } as ElementInternals;\n }\n\n // Initialize value as an empty string if multiple is true\n if (this.multiple && typeof this.value !== 'string') {\n this.value = '';\n }\n\n // Parse initial options if present\n if (this.options) {\n this.handleOptionsChange(this.options);\n }\n }\n\n /\n Lifecycle method that is called after the component has been rendered.\n * This is where the display value is updated and the initial select element's\n * state is set.\n /\n componentDidLoad() {\n this.updateDisplayValue();\n\n if (this.selectElement) {\n // Only set the value for single selection, skip for multiple\n if (!this.multiple) {\n this.selectElement.value = this.value;\n }\n\n const selectedValues = this.multiple\n ? this.value.split(',').map(v => v.trim())\n : [this.value];\n\n const options = this.selectElement.options;\n\n if (options) {\n Array.from(options).forEach(option => {\n option.selected = this.multiple\n ? selectedValues.includes(option.value)\n : option.value === selectedValues[0];\n });\n } else {\n // Handle case where there are no options\n this.selectElement.value = selectedValues[0] \|\| '';\n }\n }\n\n // Set the initial form value\n this.setFormValue();\n }\n\n //#endregion LIFECYCLE\n /*************************************************************************/\n //#region RENDERING\n\n /\n * The render method creates the HTML structure for the component, including\n * the label, select element, and any error or description messages. It also\n * applies the appropriate CSS classes based on the readonly state and\n * displayValue prop. This method is called when the component is rendered.\n * @returns {HTMLStencilElement} The HTML element to render.\n */\n render() {\n return (\n <Host>\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 <div class=\"select-wrapper\">\n <slot name=\"before-input\"></slot>\n\n <div\n class=\"select-container\"\n onClick={this.handleSelectContainerClick}\n >\n <slot name=\"leading-input\"></slot>\n\n {this.internalReadonly && (\n <input\n id={this.inputId + '-readonly'}\n type=\"text\"\n value={this.computedDisplayValue}\n readonly\n class=\"readonly-input\"\n aria-readonly=\"true\"\n aria-label={this.label}\n aria-describedby={\n this.error\n ? `${this.inputId}-error`\n : `${this.inputId}-description`\n }\n />\n )}\n\n <select\n id={this.inputId}\n ref={el => (this.selectElement = el)}\n name={this.name}\n disabled={this.disabled}\n required={this.required}\n multiple={this.multiple}\n onChange={this.handleSelectChange}\n class={this.internalReadonly ? 'hidden' : ''}\n aria-label={this.label}\n aria-describedby={\n this.error\n ? `${this.inputId}-error`\n : `${this.inputId}-description`\n }\n >\n {this.parsedOptions.length > 0 ? (\n this.parsedOptions.map(option => (\n <option\n value={option.value}\n selected={option.selected}\n disabled={option.disabled}\n >\n {option.label}\n </option>\n ))\n ) : (\n <slot />\n )}\n </select>\n\n {this.internalReadonly && (\n <nv-icon name=\"chevron-down\" class=\"readonly-icon\" size=\"sm\" />\n )}\n {this.error && (\n <nv-icon name=\"alert-circle\" class=\"validation\" size=\"sm\" />\n )}\n {this.success && (\n <nv-icon name=\"circle-check\" class=\"validation\" size=\"sm\" />\n )}\n </div>\n\n <slot name=\"after-input\"></slot>\n </div>\n\n {(this.description \|\|\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\" id={`${this.inputId}-description`}>\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n\n {(this.errorDescription \|\|\n this.el.querySelector('[slot=\"error-description\"]')) && (\n <div class=\"error-description\" id={`${this.inputId}-error`}>\n <slot name=\"error-description\">{this.errorDescription}</slot>\n </div>\n )}\n </Host>\n );\n }\n\n //#endregion RENDERING\n}\n"]}
1	+ {"version":3,"file":"nv-fieldselect.js","sourceRoot":"","sources":["../../../src/components/nv-fieldselect/nv-fieldselect.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Watch,\n Element,\n State,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\n/*\n @slot default - Content to be placed inside the select element.\n * @slot leading-input - Content to be placed before the select input, within the select container.\n * @slot before-input - Content to be placed before the select input, outside the select container.\n * @slot after-input - Content to be placed after the select input, outside the select container.\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-fieldselect',\n shadow: false,\n formAssociated: true,\n styleUrl: 'nv-fieldselect.scss',\n})\nexport class NvFieldselect {\n @Element() el: HTMLNvFieldselectElement;\n private selectElement!: HTMLSelectElement;\n private internals: ElementInternals;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Message defines a 'hint ' message for the Select Field.\n * @deprecated Use `description` instead.\n /\n @Prop()\n readonly message: string;\n\n /\n Add the message to the validation state.\n * @deprecated Use `errorDescription` and set the error prop instead.\n /\n @Prop()\n readonly validation: string;\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region STATES\n\n @State()\n private computedDisplayValue: string = '';\n\n @State()\n private internalReadonly: boolean = false;\n\n /\n * Options to display in the select. Can be passed as a JSON string.\n * Format: [{ label: string, value: string, selected?: boolean, disabled?: boolean }]\n /\n @Prop()\n readonly options?: string;\n\n /\n Parsed options stored internally\n /\n @State()\n private parsedOptions: Array<{\n /\n The label of the option\n /\n label: string;\n /\n The value of the option\n /\n value: string;\n /\n Whether the option is selected\n /\n selected?: boolean;\n /\n Whether the option is disabled\n /\n disabled?: boolean;\n }> = [];\n\n //#endregion STATES\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Sets the ID for the select element and the for attribute of the associated\n * label. If no ID is provided, a random one will be automatically generated\n * to ensure unique identification, facilitating proper label association and\n * accessibility.\n /\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /\n Lets you define the text that explains what users should choose in the\n * select field. It’s a crucial element for making forms clear and\n * user-friendly.\n /\n @Prop({ reflect: true })\n readonly label?: string;\n\n /\n Add helpful hints or extra information under the select field. This is\n * where you can clarify what users should choose or provide additional\n * instructions, making the form easier to fill out correctly.\n /\n @Prop({ reflect: true, mutable: true })\n description?: string;\n\n /\n Defines the name attribute of the select field, which is crucial for form\n * submission. This value is used as the key in the key-value pair sent to\n * the server, representing the selected data in form submissions. It should be\n * unique within the form to avoid conflicts\n /\n @Prop({ reflect: true })\n readonly name: string;\n\n /\n The disabled prop lets you turn off the select field so that users can’t\n * choose something. When disabled, the field is grayed out and won’t respond to\n * clicks or touches.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Display the select field’s content without allowing users to change it.\n * Users can still click on it, select, and copy the text, but they won’t be\n * able to change or delete anything.\n /\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /\n Marks the select field as required, ensuring that the user must fill it out\n * before submitting the form.\n /\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /\n Alters the select field’s appearance to indicate an error, helping users\n * identify fields that need correction.\n * @validator error\n /\n @Prop({ reflect: true, mutable: true })\n error: boolean = false;\n\n /\n Show a helpful message under the select field when there’s a problem. It\n * explains what’s wrong and how users can fix it, making the error easier to\n * understand and resolve.\n * @validator message\n /\n @Prop({ reflect: true, mutable: true })\n errorDescription: string;\n\n /\n Changes the select field’s appearance to indicate successful input or\n * validation.\n /\n @Prop({ reflect: true })\n readonly success: boolean = false;\n\n /\n When enabled, allows the select to handle multiple selections.\n /\n @Prop({ reflect: true })\n readonly multiple: boolean = false;\n\n /\n The value of the select field.\n * - If `multiple` is `false`, it's a single string.\n * - If `multiple` is `true`, it's a comma-separated string of selected values.\n /\n @Prop({ reflect: true, mutable: true })\n value: string = '';\n\n /\n When enabled, displays the value element instead of the label when readonly.\n * By default, the label is displayed in readonly mode. Also it automatically\n * sets the component to readonly.\n /\n @Prop({ reflect: true })\n readonly displayValue: boolean = false;\n\n /\n Applies focus to the input field as soon as the component is mounted. This\n * is equivalent to setting the native autofocus attribute on a <select>\n * element.\n /\n @Prop({ reflect: true })\n // eslint-disable-next-line @stencil-community/reserved-member-names\n readonly autofocus: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the selected value changes.\n * @bind value\n /\n @Event()\n valueChanged: EventEmitter<string>; // Emit as a string\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n /\n * Updates the display value when the value property changes. This watcher is\n * used to update the display value when the selected value changes. This is\n * necessary for readonly select fields to display the selected value.\n * @internal This watcher is not intended to be called outside of the component.\n * @param {string} newValue - The new value of the select field.\n /\n @Watch('value')\n updateDisplayValueWatcher(newValue: string) {\n this.updateDisplayValue();\n\n if (this.selectElement) {\n const selectedValues = newValue.split(',').map(val => val.trim());\n const options = this.selectElement.options;\n\n if (options) {\n Array.from(options).forEach(option => {\n option.selected = this.multiple\n ? selectedValues.includes(option.value)\n : option.value === selectedValues[0];\n });\n\n if (!this.multiple) {\n this.selectElement.value = newValue; // Only set when not multiple\n }\n } else {\n this.selectElement.value = selectedValues[0] \|\| '';\n }\n }\n\n // Update form value\n this.setFormValue();\n }\n\n /\n Watcher for the displayValue prop to ensure internalReadonly is true when displayValue is true.\n * @param {boolean} newValue - The new value of displayValue.\n /\n @Watch('displayValue')\n handleDisplayValueChange(newValue: boolean) {\n this.internalReadonly = newValue; // Set internalReadonly to true if displayValue is true\n\n if (this.readonly) {\n this.internalReadonly = true;\n }\n }\n\n /\n Watcher for the readonly prop to ensure internalReadonly is true when readonly is true.\n * @param {boolean} newValue - The new value of readonly.\n /\n @Watch('readonly')\n handleReadonlyChange(newValue: boolean) {\n this.internalReadonly = newValue; // Set internalReadonly to true if displayValue is true\n\n if (this.displayValue) {\n this.internalReadonly = true;\n }\n }\n\n /\n Parse options and update the internal state\n * @param {string} newValue - The new value of options\n /\n @Watch('options')\n handleOptionsChange(newValue: string) {\n if (typeof newValue === 'string') {\n try {\n const parsedOpts = JSON.parse(newValue);\n this.parsedOptions = [...parsedOpts];\n\n // Update the value if an option is pre-selected\n const selectedOption = parsedOpts.find(opt => opt.selected);\n if (selectedOption) {\n this.value = selectedOption.value;\n }\n } catch (error) {\n console.error('Error parsing options:', error);\n this.parsedOptions = [];\n }\n }\n }\n\n //#endregion WATCHERS\n /*************************************************************************/\n //#region METHODS\n\n /\n * Handles the change event on the select element. This method is used to\n * update the value property when the selected options change. It is also\n * used to emit the selectChanged event when the selected value changes.\n * @param {Event} event - The change event on the select element.\n * @emits selectChanged\n /\n private readonly handleSelectChange = (event: Event) => {\n const select = event.target as HTMLSelectElement;\n let selectedValues: string[] = Array.from(select.selectedOptions).map(\n option => option.value,\n );\n\n if (!this.multiple) {\n selectedValues = selectedValues.slice(0, 1);\n }\n\n this.value = this.multiple\n ? selectedValues.join(', ')\n : selectedValues[0] \|\| '';\n this.valueChanged.emit(this.value);\n\n // Update form value\n this.setFormValue();\n };\n\n /\n Handles focus when the select container is clicked.\n /\n private readonly handleSelectContainerClick = () => {\n if (!this.internalReadonly && this.selectElement) {\n this.selectElement.focus();\n }\n };\n\n /\n Updates the display value of the select field. This method is used to\n * update the display value when the selected value changes. This is necessary\n * for readonly select fields to display the selected value. This method is\n * called in the componentDidLoad lifecycle hook and the updateDisplayValueWatcher\n * watcher.\n * @internal This method is not intended to be called outside of the component.\n /\n private updateDisplayValue(): void {\n if (this.internalReadonly && !this.displayValue) {\n if (this.multiple) {\n const selectedLabels = this.value\n .split(',')\n .map(key => key.trim())\n .map(key => this.getLabelFromId(key) \|\| '')\n .filter(label => label !== '');\n this.computedDisplayValue = selectedLabels.join(', ') \|\| '';\n } else {\n this.computedDisplayValue = this.getLabelFromId(this.value) \|\| '';\n }\n } else if (this.internalReadonly && this.displayValue) {\n this.computedDisplayValue = this.value \|\| '';\n }\n }\n\n /\n Retrieves the label from the <option> elements based on the provided key (value).\n * This method uses the id or value attribute directly from the <select> options.\n * @param {string} key - The key (value) for which to find the corresponding label.\n * @returns {string} The label if found; otherwise, an empty string.\n /\n private getLabelFromId(key: string): string {\n this.ensureSelectElement();\n if (!this.selectElement) {\n return '';\n }\n\n // Cache the option list\n const options = this.selectElement.options;\n\n if (options) {\n const option = Array.from(options).find(option => option.value === key);\n return option ? option.textContent.trim() \|\| '' : '';\n } else {\n return '';\n }\n }\n\n /\n Sets the value of the form element for form submission. This method is\n * called when the selected value changes or when the value property is set.\n * @internal This method is not intended to be called outside of the component.\n /\n private setFormValue(): void {\n this.internals.setFormValue(this.value);\n }\n\n /\n Ensures the select element is available. This method is used to ensure\n * the select element is available before attempting to access it.\n * @internal This method is not intended to be called outside of the component.\n /\n private ensureSelectElement(): void {\n if (!this.selectElement) {\n this.selectElement = this.el.querySelector('select') as HTMLSelectElement;\n }\n }\n\n //#endregion METHODS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillRender() {\n this.updateDisplayValue(); // Ensure display value is updated before render\n\n if (this.message) {\n this.description = this.message;\n }\n\n if (this.validation) {\n this.errorDescription = this.validation;\n this.error = true;\n }\n }\n\n /\n * Lifecycle method that is called before the component is rendered. This is\n * where the internal state is set up before rendering occurs.\n /\n componentWillLoad() {\n // Set internalReadonly based on the readonly prop\n this.internalReadonly = this.readonly;\n\n // Ensure internalReadonly is true if displayValue is true during loading\n if (this.displayValue) {\n this.internalReadonly = true;\n }\n\n if ('attachInternals' in this.el) {\n this.internals = (\n this.el as HTMLElement & {\n /\n Attach the element to the form internals.\n * @returns {ElementInternals} - The element internals object.\n /\n attachInternals: () => ElementInternals;\n }\n ).attachInternals();\n } else {\n // Fallback logic for browsers without attachInternals support\n this.internals = {\n setFormValue: (value: string) => {\n const formElement = this.el.closest('form');\n if (formElement) {\n const input = document.createElement('input');\n input.type = 'hidden';\n input.name = this.name;\n input.value = value;\n formElement.appendChild(input);\n }\n },\n } as ElementInternals;\n }\n\n // Initialize value as an empty string if multiple is true\n if (this.multiple && typeof this.value !== 'string') {\n this.value = '';\n }\n\n // Parse initial options if present\n if (this.options) {\n this.handleOptionsChange(this.options);\n }\n }\n\n /\n Lifecycle method that is called after the component has been rendered.\n * This is where the display value is updated and the initial select element's\n * state is set.\n /\n componentDidLoad() {\n this.updateDisplayValue();\n\n if (this.selectElement) {\n // Only set the value for single selection, skip for multiple\n if (!this.multiple) {\n this.selectElement.value = this.value;\n }\n\n const selectedValues = this.multiple\n ? this.value.split(',').map(v => v.trim())\n : [this.value];\n\n const options = this.selectElement.options;\n\n if (options) {\n Array.from(options).forEach(option => {\n option.selected = this.multiple\n ? selectedValues.includes(option.value)\n : option.value === selectedValues[0];\n });\n } else {\n // Handle case where there are no options\n this.selectElement.value = selectedValues[0] \|\| '';\n }\n }\n\n // Set the initial form value\n this.setFormValue();\n }\n\n //#endregion LIFECYCLE\n /*************************************************************************/\n //#region RENDERING\n\n /\n * The render method creates the HTML structure for the component, including\n * the label, select element, and any error or description messages. It also\n * applies the appropriate CSS classes based on the readonly state and\n * displayValue prop. This method is called when the component is rendered.\n * @returns {HTMLStencilElement} The HTML element to render.\n */\n render() {\n return (\n <Host>\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 <div class=\"select-wrapper\">\n <slot name=\"before-input\"></slot>\n\n <div\n class=\"select-container\"\n onClick={this.handleSelectContainerClick}\n >\n <slot name=\"leading-input\"></slot>\n\n {this.internalReadonly && (\n <input\n id={this.inputId + '-readonly'}\n type=\"text\"\n value={this.computedDisplayValue}\n readonly\n class=\"readonly-input\"\n aria-readonly=\"true\"\n aria-label={this.label}\n aria-describedby={\n this.error\n ? `${this.inputId}-error`\n : `${this.inputId}-description`\n }\n />\n )}\n\n <select\n id={this.inputId}\n ref={el => (this.selectElement = el)}\n name={this.name}\n autofocus={this.autofocus}\n disabled={this.disabled}\n required={this.required}\n multiple={this.multiple}\n onChange={this.handleSelectChange}\n class={this.internalReadonly ? 'hidden' : ''}\n aria-label={this.label}\n aria-describedby={\n this.error\n ? `${this.inputId}-error`\n : `${this.inputId}-description`\n }\n >\n {this.parsedOptions.length > 0 ? (\n this.parsedOptions.map(option => (\n <option\n value={option.value}\n selected={option.selected}\n disabled={option.disabled}\n >\n {option.label}\n </option>\n ))\n ) : (\n <slot />\n )}\n </select>\n\n {this.internalReadonly && (\n <nv-icon name=\"chevron-down\" class=\"readonly-icon\" size=\"sm\" />\n )}\n {this.error && (\n <nv-icon name=\"alert-circle\" class=\"validation\" size=\"sm\" />\n )}\n {this.success && (\n <nv-icon name=\"circle-check\" class=\"validation\" size=\"sm\" />\n )}\n </div>\n\n <slot name=\"after-input\"></slot>\n </div>\n\n {(this.description \|\|\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\" id={`${this.inputId}-description`}>\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n\n {(this.errorDescription \|\|\n this.el.querySelector('[slot=\"error-description\"]')) && (\n <div class=\"error-description\" id={`${this.inputId}-error`}>\n <slot name=\"error-description\">{this.errorDescription}</slot>\n </div>\n )}\n </Host>\n );\n }\n\n //#endregion RENDERING\n}\n"]}

package/dist/collection/components/nv-fieldtext/nv-fieldtext.docs.js CHANGED Viewed

@@ -147,6 +147,14 @@ const NvFieldtextDocs = {
             },
             template: h("nv-fieldtext", { "data-storybook-args": true }),
         },
+        {
+            name: nameof(x => x.autofocus),
+            args: {
+                label: 'Textfield Autofocus',
+                autofocus: true,
+            },
+            template: h("nv-fieldtext", { "data-storybook-args": true }),
+        },
         {
             name: 'leadingInputSlot',
             description: 'Content to be placed before the input text, within the input container.',

package/dist/collection/components/nv-fieldtext/nv-fieldtext.docs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-fieldtext.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldtext/nv-fieldtext.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 NvFieldtextDocs: NovaDocs<Components.NvFieldtext> = {\n component: 'nv-fieldtext',\n subcomponents: ['nv-badge', 'nv-button'],\n stories: [\n {\n name: 'Default',\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.label),\n args: {\n label: 'Textfield Label',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.description),\n args: {\n label: 'Textfield Description',\n description: 'Description will show here',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.placeholder),\n args: {\n label: 'Textfield Placeholder',\n placeholder: 'Type something...',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.name),\n args: {\n label: 'Textfield Name',\n name: 'name',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.value),\n args: {\n label: 'Textfield Value',\n value: 'value',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.type),\n args: {\n label: 'Textfield Type',\n type: 'email',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.disabled),\n args: {\n label: 'Textfield Disabled',\n disabled: true,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.readonly),\n args: {\n label: 'Textfield Readonly',\n readonly: true,\n value: 'This input is readonly',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.required),\n args: {\n label: 'Textfield Required',\n required: true,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.error),\n args: {\n label: 'Textfield Error',\n error: true,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.errorDescription),\n args: {\n label: 'Textfield Error Description',\n description: 'Make sure to be valid.',\n error: true,\n errorDescription: 'This input has an error.',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.success),\n args: {\n label: 'Textfield Success',\n success: true,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.maxlength),\n args: {\n label: 'Textfield Max Length',\n maxlength: 10,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.minlength),\n args: {\n label: 'Textfield Min Length',\n minlength: 10,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.pattern),\n args: {\n label: 'Textfield Pattern',\n pattern: '[0-9]+',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.autocomplete),\n args: {\n label: 'Textfield Autocomplete',\n autocomplete: 'on',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.multiple),\n args: {\n label: 'Textfield Multiple',\n type: 'email',\n multiple: true,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: 'leadingInputSlot',\n description:\n 'Content to be placed before the input text, within the input container.',\n args: {\n label: 'Leading Input',\n },\n template: (\n <nv-fieldtext data-storybook-args>\n <nv-badge slot=\"leading-input\" label=\"test\" dismissible></nv-badge>\n </nv-fieldtext>\n ),\n },\n {\n name: 'labelSlot',\n description:\n 'Content to be placed as the label, will override the label prop.',\n args: {\n label: 'Original Label',\n },\n template: (\n <nv-fieldtext data-storybook-args>\n <span slot=\"label\">Label Slot</span>\n </nv-fieldtext>\n ),\n },\n {\n name: 'descriptionSlot',\n description:\n 'Content to be placed as the description, will override the description prop.',\n args: {\n label: 'Description Slot',\n description: 'Original description',\n },\n template: (\n <nv-fieldtext data-storybook-args>\n <span slot=\"description\">Custom Description</span>\n </nv-fieldtext>\n ),\n },\n {\n name: 'errorDescriptionSlot',\n description:\n 'Content to be placed as the error description, will override the errorDescription prop.',\n args: {\n label: 'Error Description Slot',\n errorDescription: 'Original error description',\n error: true,\n },\n template: (\n <nv-fieldtext data-storybook-args>\n <span slot=\"error-description\">Custom Error Description</span>\n </nv-fieldtext>\n ),\n },\n {\n name: 'beforeInputSlot',\n description:\n 'Content to be placed before the input text, outside the input container.',\n args: {\n label: 'Before Input Slot',\n description: 'Description will show here',\n },\n template: (\n <nv-fieldtext data-storybook-args>\n <nv-button slot=\"before-input\">Before Input Slot</nv-button>\n </nv-fieldtext>\n ),\n },\n {\n name: 'afterInputSlot',\n description:\n 'Content to be placed after the input text, outside the input container.',\n args: {\n label: 'After Input Slot',\n description: 'Description will show here',\n },\n template: (\n <nv-fieldtext data-storybook-args>\n <nv-button slot=\"after-input\">After Input Slot</nv-button>\n </nv-fieldtext>\n ),\n },\n ],\n};\n\nexport default NvFieldtextDocs;\n"]}
1	+ {"version":3,"file":"nv-fieldtext.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldtext/nv-fieldtext.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 NvFieldtextDocs: NovaDocs<Components.NvFieldtext> = {\n component: 'nv-fieldtext',\n subcomponents: ['nv-badge', 'nv-button'],\n stories: [\n {\n name: 'Default',\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.label),\n args: {\n label: 'Textfield Label',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.description),\n args: {\n label: 'Textfield Description',\n description: 'Description will show here',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.placeholder),\n args: {\n label: 'Textfield Placeholder',\n placeholder: 'Type something...',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.name),\n args: {\n label: 'Textfield Name',\n name: 'name',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.value),\n args: {\n label: 'Textfield Value',\n value: 'value',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.type),\n args: {\n label: 'Textfield Type',\n type: 'email',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.disabled),\n args: {\n label: 'Textfield Disabled',\n disabled: true,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.readonly),\n args: {\n label: 'Textfield Readonly',\n readonly: true,\n value: 'This input is readonly',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.required),\n args: {\n label: 'Textfield Required',\n required: true,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.error),\n args: {\n label: 'Textfield Error',\n error: true,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.errorDescription),\n args: {\n label: 'Textfield Error Description',\n description: 'Make sure to be valid.',\n error: true,\n errorDescription: 'This input has an error.',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.success),\n args: {\n label: 'Textfield Success',\n success: true,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.maxlength),\n args: {\n label: 'Textfield Max Length',\n maxlength: 10,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.minlength),\n args: {\n label: 'Textfield Min Length',\n minlength: 10,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.pattern),\n args: {\n label: 'Textfield Pattern',\n pattern: '[0-9]+',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.autocomplete),\n args: {\n label: 'Textfield Autocomplete',\n autocomplete: 'on',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.multiple),\n args: {\n label: 'Textfield Multiple',\n type: 'email',\n multiple: true,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.autofocus),\n args: {\n label: 'Textfield Autofocus',\n autofocus: true,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: 'leadingInputSlot',\n description:\n 'Content to be placed before the input text, within the input container.',\n args: {\n label: 'Leading Input',\n },\n template: (\n <nv-fieldtext data-storybook-args>\n <nv-badge slot=\"leading-input\" label=\"test\" dismissible></nv-badge>\n </nv-fieldtext>\n ),\n },\n {\n name: 'labelSlot',\n description:\n 'Content to be placed as the label, will override the label prop.',\n args: {\n label: 'Original Label',\n },\n template: (\n <nv-fieldtext data-storybook-args>\n <span slot=\"label\">Label Slot</span>\n </nv-fieldtext>\n ),\n },\n {\n name: 'descriptionSlot',\n description:\n 'Content to be placed as the description, will override the description prop.',\n args: {\n label: 'Description Slot',\n description: 'Original description',\n },\n template: (\n <nv-fieldtext data-storybook-args>\n <span slot=\"description\">Custom Description</span>\n </nv-fieldtext>\n ),\n },\n {\n name: 'errorDescriptionSlot',\n description:\n 'Content to be placed as the error description, will override the errorDescription prop.',\n args: {\n label: 'Error Description Slot',\n errorDescription: 'Original error description',\n error: true,\n },\n template: (\n <nv-fieldtext data-storybook-args>\n <span slot=\"error-description\">Custom Error Description</span>\n </nv-fieldtext>\n ),\n },\n {\n name: 'beforeInputSlot',\n description:\n 'Content to be placed before the input text, outside the input container.',\n args: {\n label: 'Before Input Slot',\n description: 'Description will show here',\n },\n template: (\n <nv-fieldtext data-storybook-args>\n <nv-button slot=\"before-input\">Before Input Slot</nv-button>\n </nv-fieldtext>\n ),\n },\n {\n name: 'afterInputSlot',\n description:\n 'Content to be placed after the input text, outside the input container.',\n args: {\n label: 'After Input Slot',\n description: 'Description will show here',\n },\n template: (\n <nv-fieldtext data-storybook-args>\n <nv-button slot=\"after-input\">After Input Slot</nv-button>\n </nv-fieldtext>\n ),\n },\n ],\n};\n\nexport default NvFieldtextDocs;\n"]}