@nova-design-system/nova-webcomponents 3.5.0 → 3.7.0

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

@@ -11,8 +11,28 @@ const NvFieldmultiselectDocs = {
     stories: [
         {
             name: 'Default',
+            args: {
+                value: ['php'],
+            },
             template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", description: "Description for PHP", value: "php", checked: true }), h("nv-fielddropdownitemcheck", { label: "Java", description: "Description for Java", value: "java" }), h("nv-fielddropdownitemcheck", { label: "Javascript", description: "Description for Javascript", value: "javascript" }), h("nv-fielddropdownitemcheck", { label: "Item disabled", description: "Description for disabled item", disabled: true, value: "disabled" })))),
         },
+        {
+            name: 'Multiple Selected Values',
+            args: {
+                value: ['php', 'java'],
+                label: 'Multiple Selected Values',
+            },
+            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", description: "Description for PHP", value: "php", checked: true }), h("nv-fielddropdownitemcheck", { label: "Java", description: "Description for Java", value: "java", checked: true }), h("nv-fielddropdownitemcheck", { label: "Javascript", description: "Description for Javascript", value: "javascript" })))),
+        },
+        {
+            name: 'Filterable with Events',
+            args: {
+                label: 'Filterable with Events',
+                filterable: true,
+                value: ['php'],
+            },
+            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", description: "Description for PHP", value: "php", checked: true }), h("nv-fielddropdownitemcheck", { label: "Java", description: "Description for Java", value: "java" }), h("nv-fielddropdownitemcheck", { label: "Javascript", description: "Description for Javascript", value: "javascript" })))),
+        },
         {
             name: nameof(x => x.inputId),
             args: {
@@ -51,24 +71,7 @@ const NvFieldmultiselectDocs = {
                 label: 'Multiselect with Custom Badge Label',
                 badgeLabel: 'languages',
             },
-            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", description: "Description for PHP", value: "php", checked: true }), h("nv-fielddropdownitemcheck", { label: "Java", description: "Description for Java", value: "java" })))),
-        },
-        {
-            name: nameof(x => x.autocomplete),
-            args: {
-                label: 'Multiselect with Autocomplete',
-                autocomplete: 'on',
-                filterable: true,
-            },
-            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php" }), h("nv-fielddropdownitemcheck", { label: "Java", value: "java" })))),
-        },
-        {
-            name: nameof(x => x.autofocus),
-            args: {
-                label: 'Autofocus',
-                autofocus: true,
-            },
-            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php" }), h("nv-fielddropdownitemcheck", { label: "Java", value: "java" }), h("nv-fielddropdownitemcheck", { label: "Javascript", value: "javascript" })))),
         },
         {
             name: 'Options Array',
@@ -77,25 +80,23 @@ const NvFieldmultiselectDocs = {
                 filterable: true,
                 options: [
                     { label: 'PHP', value: 'php', description: 'Description for PHP' },
-                    {
-                        label: 'Java',
-                        value: 'java',
-                        description: 'Description for Java',
-                    },
+                    { label: 'Java', value: 'java', description: 'Description for Java' },
                     {
                         label: 'Javascript',
                         value: 'javascript',
                         description: 'Description for Javascript',
+                        disabled: true,
                     },
                 ],
             },
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
         {
-            name: 'Options Array Preselected',
+            name: 'Options Array with Preselection',
             args: {
                 label: 'Multiselect with Options Array Preselected',
                 filterable: true,
+                value: ['java'],
                 options: [
                     { label: 'PHP', value: 'php', description: 'Description for PHP' },
                     {
@@ -114,6 +115,15 @@ const NvFieldmultiselectDocs = {
             },
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
+        {
+            name: nameof(x => x.filterText),
+            args: {
+                label: 'Multiselect with Initial Filter Text',
+                filterable: true,
+                filterText: 'php',
+            },
+            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", description: "Description for PHP", value: "php" }), h("nv-fielddropdownitemcheck", { label: "Java", description: "Description for Java", value: "java" }), h("nv-fielddropdownitemcheck", { label: "Javascript", description: "Description for Javascript", value: "javascript" })))),
+        },
         {
             name: nameof(x => x.label),
             args: {
@@ -184,23 +194,23 @@ const NvFieldmultiselectDocs = {
             template: (h("nv-fieldmultiselect", { "data-storybook-args": true, filterable: true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php", checked: true }), h("nv-fielddropdownitemcheck", { label: "Java", value: "java" }), h("nv-fielddropdownitemcheck", { label: "Javascript", value: "javascript" }), h("nv-fielddropdownitemcheck", { label: "Item disabled", disabled: true, value: "disabled" })))),
         },
         {
-            name: 'DefaultSlot',
+            name: 'Slots',
             args: {
-                label: 'DefaultSlot Multiselect',
-                description: 'This is a DefaultSlot multiselect.',
+                label: 'Available Slots for the checkbox items',
+                description: 'You can use main, label, and description slots. Main will replace the label and description.',
                 placeholder: 'Select multiple options...',
             },
-            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { class: "flex gap-2", value: "AB" }, h("nv-avatar", { initials: "AB", size: "xs" }), h("span", null, "Custom Item Text")), h("nv-fielddropdownitemcheck", { class: "flex gap-2", value: "CD" }, h("nv-avatar", { initials: "CD", size: "xs" }), h("span", null, "Custom Item Text")), h("nv-fielddropdownitemcheck", { class: "flex gap-2", value: "EF" }, h("nv-avatar", { initials: "EF", size: "xs" }), h("span", null, "Custom Item Text"))))),
+            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { class: "flex gap-2", value: "AB", description: "123" }, h("span", { slot: "main", "data-class": "flex gap-2" }, h("nv-avatar", { initials: "AB", size: "xs" }), h("nv-badge", null, "Main slot to replace label and description"))), h("nv-fielddropdownitemcheck", { class: "flex gap-2", value: "CD", description: "123" }, h("span", { slot: "label", "data-class": "flex gap-2" }, h("nv-avatar", { initials: "AB", size: "xs" }), h("span", null, "Label slot"))), h("nv-fielddropdownitemcheck", { class: "flex gap-2", value: "EF", description: "123" }, h("span", { slot: "description", "data-class": "flex gap-2" }, h("nv-avatar", { initials: "AB", size: "xs" }), h("span", null, "Description slot"))), h("nv-fielddropdownitemcheck", { class: "flex gap-2", value: "HI", description: "You can also just pass a default slot, label and description will render" }, h("nv-avatar", { initials: "AB", size: "xs" }))))),
         },
         {
-            name: 'DefaultSlotFiltereable',
+            name: 'SlotsFilterable',
             args: {
-                label: 'Default Slot Filtereable Multiselect',
-                description: 'This is a Default Slot Filtereable multiselect.',
+                label: 'Available Slots for the checkbox items (filterable example)',
+                description: 'You can use main, label, and description slots. Main will replace the label and description.',
                 placeholder: 'Select multiple options...',
                 filterable: true,
             },
-            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { class: "flex gap-2", value: "AB" }, h("nv-avatar", { initials: "AB", size: "xs" }), h("span", null, "Custom Item Text")), h("nv-fielddropdownitemcheck", { class: "flex gap-2", value: "CD" }, h("nv-avatar", { initials: "CD", size: "xs" }), h("span", null, "Custom Item Text")), h("nv-fielddropdownitemcheck", { class: "flex gap-2", value: "EF" }, h("nv-avatar", { initials: "EF", size: "xs" }), h("span", null, "Custom Item Text"))))),
+            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { class: "flex gap-2", value: "AB", description: "123" }, h("span", { slot: "main", "data-class": "flex gap-2" }, h("nv-avatar", { initials: "AB", size: "xs" }), h("nv-badge", null, "Main slot to replace label and description"))), h("nv-fielddropdownitemcheck", { class: "flex gap-2", value: "CD", description: "123" }, h("span", { slot: "label", "data-class": "flex gap-2" }, h("nv-avatar", { initials: "AB", size: "xs" }), h("span", null, "Label slot"))), h("nv-fielddropdownitemcheck", { class: "flex gap-2", value: "EF", description: "123" }, h("span", { slot: "description", "data-class": "flex gap-2" }, h("nv-avatar", { initials: "AB", size: "xs" }), h("span", null, "Description slot"))), h("nv-fielddropdownitemcheck", { class: "flex gap-2", value: "HI", description: "You can also just pass a default slot, label and description will render" }, h("nv-avatar", { initials: "AB", size: "xs" }))))),
         },
         {
             name: nameof(x => x.open),
@@ -214,7 +224,7 @@ const NvFieldmultiselectDocs = {
             name: nameof(x => x.value),
             args: {
                 label: 'Multiselect with Pre-selected Value',
-                value: 'Java',
+                value: ['Java'],
             },
             template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php" }), h("nv-fielddropdownitemcheck", { label: "Java", value: "java" }), h("nv-fielddropdownitemcheck", { label: "Javascript", value: "javascript" }), h("nv-fielddropdownitemcheck", { label: "Item disabled", disabled: true, value: "disabled" })))),
         },
@@ -232,7 +242,7 @@ const NvFieldmultiselectDocs = {
                 label: 'Multiselect with Empty Result Text',
                 filterable: true,
                 open: true,
-                value: 'search for a inexistent item',
+                value: ['search for a inexistent item'],
                 emptyResult: 'No items found',
             },
             template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php" })))),

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

@@ -1 +1 @@
-{"version":3,"file":"nv-fieldmultiselect.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldmultiselect/nv-fieldmultiselect.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 NvFieldmultiselectDocs: NovaDocs<Components.NvFieldmultiselect> = {\n  component: 'nv-fieldmultiselect',\n  subcomponents: [\n    'nv-fielddropdownitemcheck',\n    'nv-badge',\n    'nv-icon',\n    'nv-avatar',\n  ],\n  stories: [\n    {\n      name: 'Default',\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              description=\"Description for PHP\"\n              value=\"php\"\n              checked\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Java\"\n              description=\"Description for Java\"\n              value=\"java\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Javascript\"\n              description=\"Description for Javascript\"\n              value=\"javascript\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Item disabled\"\n              description=\"Description for disabled item\"\n              disabled\n              value=\"disabled\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.inputId),\n      args: {\n        label: 'Multiselect with Custom ID',\n        inputId: 'custom-multiselect-id',\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.name),\n      args: {\n        label: 'Multiselect with Name',\n        name: 'programming-languages',\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.filterable),\n      args: {\n        label: 'Multiselect Label',\n        filterable: true,\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              description=\"Description for PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Java\"\n              description=\"Description for Java\"\n              value=\"java\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Javascript\"\n              description=\"Description for Javascript\"\n              value=\"javascript\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.maxHeight),\n      args: {\n        label: 'Multiselect with Custom Max Height',\n        maxHeight: '300px',\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            {Array.from({ length: 50 }).map((_, index) => (\n              <nv-fielddropdownitemcheck\n                label={`Item ${index + 1}`}\n                value={`item-${index + 1}`}\n              ></nv-fielddropdownitemcheck>\n            ))}\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.badgeLabel),\n      args: {\n        label: 'Multiselect with Custom Badge Label',\n        badgeLabel: 'languages',\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              description=\"Description for PHP\"\n              value=\"php\"\n              checked\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Java\"\n              description=\"Description for Java\"\n              value=\"java\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.autocomplete),\n      args: {\n        label: 'Multiselect with Autocomplete',\n        autocomplete: 'on',\n        filterable: true,\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Java\"\n              value=\"java\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.autofocus),\n      args: {\n        label: 'Autofocus',\n        autofocus: true,\n      },\n      template: <nv-fieldmultiselect data-storybook-args></nv-fieldmultiselect>,\n    },\n    {\n      name: 'Options Array',\n      args: {\n        label: 'Multiselect with Options Array',\n        filterable: true,\n        options: [\n          { label: 'PHP', value: 'php', description: 'Description for PHP' },\n          {\n            label: 'Java',\n            value: 'java',\n            description: 'Description for Java',\n          },\n          {\n            label: 'Javascript',\n            value: 'javascript',\n            description: 'Description for Javascript',\n          },\n        ],\n      },\n      template: <nv-fieldmultiselect data-storybook-args></nv-fieldmultiselect>,\n    },\n    {\n      name: 'Options Array Preselected',\n      args: {\n        label: 'Multiselect with Options Array Preselected',\n        filterable: true,\n        options: [\n          { label: 'PHP', value: 'php', description: 'Description for PHP' },\n          {\n            label: 'Java',\n            value: 'java',\n            description: 'Description for Java',\n            checked: true,\n          },\n          {\n            label: 'Javascript',\n            value: 'javascript',\n            description: 'Description for Javascript',\n            disabled: true,\n          },\n        ],\n      },\n      template: <nv-fieldmultiselect data-storybook-args></nv-fieldmultiselect>,\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.label),\n      args: {\n        label: 'Filterable Multiselect',\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.description),\n      args: {\n        label: 'Multiselect with Description',\n        description: 'Description will show here',\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.placeholder),\n      args: {\n        label: 'Multiselect with Placeholder',\n        placeholder: 'Select multiple options...',\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.disabled),\n      args: {\n        label: 'Disabled Multiselect',\n        disabled: true,\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.required),\n      args: {\n        label: 'Required Multiselect',\n        required: true,\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.error),\n      args: {\n        label: 'Multiselect with Error',\n        error: true,\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.errorDescription),\n      args: {\n        label: 'Multiselect with Error Description',\n        description: 'Select at least one option.',\n        error: true,\n        errorDescription: 'This multiselect has an error.',\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.fluid),\n      args: {\n        label: 'Fluid Multiselect',\n        fluid: true,\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: 'PreSelected',\n      template: (\n        <nv-fieldmultiselect data-storybook-args filterable>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n              checked\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Java\"\n              value=\"java\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Javascript\"\n              value=\"javascript\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Item disabled\"\n              disabled\n              value=\"disabled\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: 'DefaultSlot',\n      args: {\n        label: 'DefaultSlot Multiselect',\n        description: 'This is a DefaultSlot multiselect.',\n        placeholder: 'Select multiple options...',\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck class=\"flex gap-2\" value=\"AB\">\n              <nv-avatar initials=\"AB\" size=\"xs\"></nv-avatar>\n              <span>Custom Item Text</span>\n            </nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck class=\"flex gap-2\" value=\"CD\">\n              <nv-avatar initials=\"CD\" size=\"xs\"></nv-avatar>\n              <span>Custom Item Text</span>\n            </nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck class=\"flex gap-2\" value=\"EF\">\n              <nv-avatar initials=\"EF\" size=\"xs\"></nv-avatar>\n              <span>Custom Item Text</span>\n            </nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: 'DefaultSlotFiltereable',\n      args: {\n        label: 'Default Slot Filtereable Multiselect',\n        description: 'This is a Default Slot Filtereable multiselect.',\n        placeholder: 'Select multiple options...',\n        filterable: true,\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck class=\"flex gap-2\" value=\"AB\">\n              <nv-avatar initials=\"AB\" size=\"xs\"></nv-avatar>\n              <span>Custom Item Text</span>\n            </nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck class=\"flex gap-2\" value=\"CD\">\n              <nv-avatar initials=\"CD\" size=\"xs\"></nv-avatar>\n              <span>Custom Item Text</span>\n            </nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck class=\"flex gap-2\" value=\"EF\">\n              <nv-avatar initials=\"EF\" size=\"xs\"></nv-avatar>\n              <span>Custom Item Text</span>\n            </nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.open),\n      args: {\n        label: 'Multiselect Opened',\n        open: true,\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Java\"\n              value=\"java\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Javascript\"\n              value=\"javascript\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.value),\n      args: {\n        label: 'Multiselect with Pre-selected Value',\n        value: 'Java',\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Java\"\n              value=\"java\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Javascript\"\n              value=\"javascript\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Item disabled\"\n              disabled\n              value=\"disabled\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.readonly),\n      args: {\n        label: 'Readonly Multiselect',\n        readonly: true,\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Java\"\n              value=\"java\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Javascript\"\n              value=\"javascript\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.emptyResult),\n      args: {\n        label: 'Multiselect with Empty Result Text',\n        filterable: true,\n        open: true,\n        value: 'search for a inexistent item',\n        emptyResult: 'No items found',\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.debounceDelay),\n      args: {\n        label: 'Multiselect with Custom Debounce Delay',\n        filterable: true,\n        debounceDelay: 1000,\n        placeholder: 'Type to filter...',\n        options: [\n          { label: 'PHP', value: 'php', description: 'Description for PHP' },\n          {\n            label: 'Java',\n            value: 'java',\n            description: 'Description for Java',\n          },\n          {\n            label: 'Javascript',\n            value: 'javascript',\n            description: 'Description for Javascript',\n          },\n        ],\n      },\n      description:\n        'Demonstrates the debounce delay when filtering items. The filter will wait 1 second after the user stops typing before filtering the results.',\n      template: <nv-fieldmultiselect data-storybook-args></nv-fieldmultiselect>,\n    },\n  ],\n};\n\nexport default NvFieldmultiselectDocs;\n"]}
+{"version":3,"file":"nv-fieldmultiselect.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldmultiselect/nv-fieldmultiselect.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 NvFieldmultiselectDocs: NovaDocs<Components.NvFieldmultiselect> = {\n  component: 'nv-fieldmultiselect',\n  subcomponents: [\n    'nv-fielddropdownitemcheck',\n    'nv-badge',\n    'nv-icon',\n    'nv-avatar',\n  ],\n  stories: [\n    {\n      name: 'Default',\n      args: {\n        value: ['php'],\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              description=\"Description for PHP\"\n              value=\"php\"\n              checked\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Java\"\n              description=\"Description for Java\"\n              value=\"java\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Javascript\"\n              description=\"Description for Javascript\"\n              value=\"javascript\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Item disabled\"\n              description=\"Description for disabled item\"\n              disabled\n              value=\"disabled\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: 'Multiple Selected Values',\n      args: {\n        value: ['php', 'java'],\n        label: 'Multiple Selected Values',\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              description=\"Description for PHP\"\n              value=\"php\"\n              checked\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Java\"\n              description=\"Description for Java\"\n              value=\"java\"\n              checked\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Javascript\"\n              description=\"Description for Javascript\"\n              value=\"javascript\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: 'Filterable with Events',\n      args: {\n        label: 'Filterable with Events',\n        filterable: true,\n        value: ['php'],\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              description=\"Description for PHP\"\n              value=\"php\"\n              checked\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Java\"\n              description=\"Description for Java\"\n              value=\"java\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Javascript\"\n              description=\"Description for Javascript\"\n              value=\"javascript\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.inputId),\n      args: {\n        label: 'Multiselect with Custom ID',\n        inputId: 'custom-multiselect-id',\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.name),\n      args: {\n        label: 'Multiselect with Name',\n        name: 'programming-languages',\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.filterable),\n      args: {\n        label: 'Multiselect Label',\n        filterable: true,\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              description=\"Description for PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Java\"\n              description=\"Description for Java\"\n              value=\"java\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Javascript\"\n              description=\"Description for Javascript\"\n              value=\"javascript\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.maxHeight),\n      args: {\n        label: 'Multiselect with Custom Max Height',\n        maxHeight: '300px',\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            {Array.from({ length: 50 }).map((_, index) => (\n              <nv-fielddropdownitemcheck\n                label={`Item ${index + 1}`}\n                value={`item-${index + 1}`}\n              ></nv-fielddropdownitemcheck>\n            ))}\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.badgeLabel),\n      args: {\n        label: 'Multiselect with Custom Badge Label',\n        badgeLabel: 'languages',\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Java\"\n              value=\"java\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Javascript\"\n              value=\"javascript\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: 'Options Array',\n      args: {\n        label: 'Multiselect with Options Array',\n        filterable: true,\n        options: [\n          { label: 'PHP', value: 'php', description: 'Description for PHP' },\n          { label: 'Java', value: 'java', description: 'Description for Java' },\n          {\n            label: 'Javascript',\n            value: 'javascript',\n            description: 'Description for Javascript',\n            disabled: true,\n          },\n        ],\n      },\n      template: <nv-fieldmultiselect data-storybook-args></nv-fieldmultiselect>,\n    },\n    {\n      name: 'Options Array with Preselection',\n      args: {\n        label: 'Multiselect with Options Array Preselected',\n        filterable: true,\n        value: ['java'],\n        options: [\n          { label: 'PHP', value: 'php', description: 'Description for PHP' },\n          {\n            label: 'Java',\n            value: 'java',\n            description: 'Description for Java',\n            checked: true,\n          },\n          {\n            label: 'Javascript',\n            value: 'javascript',\n            description: 'Description for Javascript',\n            disabled: true,\n          },\n        ],\n      },\n      template: <nv-fieldmultiselect data-storybook-args></nv-fieldmultiselect>,\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.filterText),\n      args: {\n        label: 'Multiselect with Initial Filter Text',\n        filterable: true,\n        filterText: 'php',\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              description=\"Description for PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Java\"\n              description=\"Description for Java\"\n              value=\"java\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Javascript\"\n              description=\"Description for Javascript\"\n              value=\"javascript\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.label),\n      args: {\n        label: 'Filterable Multiselect',\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.description),\n      args: {\n        label: 'Multiselect with Description',\n        description: 'Description will show here',\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.placeholder),\n      args: {\n        label: 'Multiselect with Placeholder',\n        placeholder: 'Select multiple options...',\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.disabled),\n      args: {\n        label: 'Disabled Multiselect',\n        disabled: true,\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.required),\n      args: {\n        label: 'Required Multiselect',\n        required: true,\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.error),\n      args: {\n        label: 'Multiselect with Error',\n        error: true,\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.errorDescription),\n      args: {\n        label: 'Multiselect with Error Description',\n        description: 'Select at least one option.',\n        error: true,\n        errorDescription: 'This multiselect has an error.',\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.fluid),\n      args: {\n        label: 'Fluid Multiselect',\n        fluid: true,\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: 'PreSelected',\n      template: (\n        <nv-fieldmultiselect data-storybook-args filterable>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n              checked\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Java\"\n              value=\"java\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Javascript\"\n              value=\"javascript\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Item disabled\"\n              disabled\n              value=\"disabled\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: 'Slots',\n      args: {\n        label: 'Available Slots for the checkbox items',\n        description:\n          'You can use main, label, and description slots. Main will replace the label and description.',\n        placeholder: 'Select multiple options...',\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              class=\"flex gap-2\"\n              value=\"AB\"\n              description=\"123\"\n            >\n              <span slot=\"main\" data-class=\"flex gap-2\">\n                <nv-avatar initials=\"AB\" size=\"xs\"></nv-avatar>\n                <nv-badge>Main slot to replace label and description</nv-badge>\n              </span>\n            </nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              class=\"flex gap-2\"\n              value=\"CD\"\n              description=\"123\"\n            >\n              <span slot=\"label\" data-class=\"flex gap-2\">\n                <nv-avatar initials=\"AB\" size=\"xs\"></nv-avatar>\n                <span>Label slot</span>\n              </span>\n            </nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              class=\"flex gap-2\"\n              value=\"EF\"\n              description=\"123\"\n            >\n              <span slot=\"description\" data-class=\"flex gap-2\">\n                <nv-avatar initials=\"AB\" size=\"xs\"></nv-avatar>\n                <span>Description slot</span>\n              </span>\n            </nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              class=\"flex gap-2\"\n              value=\"HI\"\n              description=\"You can also just pass a default slot, label and description will render\"\n            >\n              <nv-avatar initials=\"AB\" size=\"xs\"></nv-avatar>\n            </nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: 'SlotsFilterable',\n      args: {\n        label: 'Available Slots for the checkbox items (filterable example)',\n        description:\n          'You can use main, label, and description slots. Main will replace the label and description.',\n        placeholder: 'Select multiple options...',\n        filterable: true,\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              class=\"flex gap-2\"\n              value=\"AB\"\n              description=\"123\"\n            >\n              <span slot=\"main\" data-class=\"flex gap-2\">\n                <nv-avatar initials=\"AB\" size=\"xs\"></nv-avatar>\n                <nv-badge>Main slot to replace label and description</nv-badge>\n              </span>\n            </nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              class=\"flex gap-2\"\n              value=\"CD\"\n              description=\"123\"\n            >\n              <span slot=\"label\" data-class=\"flex gap-2\">\n                <nv-avatar initials=\"AB\" size=\"xs\"></nv-avatar>\n                <span>Label slot</span>\n              </span>\n            </nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              class=\"flex gap-2\"\n              value=\"EF\"\n              description=\"123\"\n            >\n              <span slot=\"description\" data-class=\"flex gap-2\">\n                <nv-avatar initials=\"AB\" size=\"xs\"></nv-avatar>\n                <span>Description slot</span>\n              </span>\n            </nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              class=\"flex gap-2\"\n              value=\"HI\"\n              description=\"You can also just pass a default slot, label and description will render\"\n            >\n              <nv-avatar initials=\"AB\" size=\"xs\"></nv-avatar>\n            </nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.open),\n      args: {\n        label: 'Multiselect Opened',\n        open: true,\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Java\"\n              value=\"java\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Javascript\"\n              value=\"javascript\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.value),\n      args: {\n        label: 'Multiselect with Pre-selected Value',\n        value: ['Java'],\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Java\"\n              value=\"java\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Javascript\"\n              value=\"javascript\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Item disabled\"\n              disabled\n              value=\"disabled\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.readonly),\n      args: {\n        label: 'Readonly Multiselect',\n        readonly: true,\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Java\"\n              value=\"java\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Javascript\"\n              value=\"javascript\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.emptyResult),\n      args: {\n        label: 'Multiselect with Empty Result Text',\n        filterable: true,\n        open: true,\n        value: ['search for a inexistent item'],\n        emptyResult: 'No items found',\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"PHP\"\n              value=\"php\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldmultiselect>(x => x.debounceDelay),\n      args: {\n        label: 'Multiselect with Custom Debounce Delay',\n        filterable: true,\n        debounceDelay: 1000,\n        placeholder: 'Type to filter...',\n        options: [\n          { label: 'PHP', value: 'php', description: 'Description for PHP' },\n          {\n            label: 'Java',\n            value: 'java',\n            description: 'Description for Java',\n          },\n          {\n            label: 'Javascript',\n            value: 'javascript',\n            description: 'Description for Javascript',\n          },\n        ],\n      },\n      description:\n        'Demonstrates the debounce delay when filtering items. The filter will wait 1 second after the user stops typing before filtering the results.',\n      template: <nv-fieldmultiselect data-storybook-args></nv-fieldmultiselect>,\n    },\n  ],\n};\n\nexport default NvFieldmultiselectDocs;\n"]}