@nova-design-system/nova-webcomponents 3.9.1 → 3.10.0

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

@@ -9,267 +9,1030 @@ const NvFieldmultiselectDocs = {
         'nv-avatar',
     ],
     stories: [
+        // Default
         {
             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" })))),
+            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" }), h("nv-fielddropdownitemcheck", { label: "Item disabled", description: "Description for disabled item", disabled: true, value: "disabled" })))),
         },
+        // Label
         {
-            name: 'Multiple Selected Values',
+            name: nameof(x => x.label),
+            args: {
+                label: 'Multiselect with label',
+                options: [
+                    { label: 'PHP', value: 'php' },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                    },
+                ],
+            },
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // InputId
+        {
+            name: nameof(x => x.inputId),
+            args: {
+                label: 'Multiselect with Custom ID',
+                inputId: 'custom-multiselect-id',
+                options: [
+                    { label: 'PHP', value: 'php' },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                    },
+                ],
+            },
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // Name
+        {
+            name: nameof(x => x.name),
+            args: {
+                label: 'Multiselect with Name',
+                name: 'programming-languages',
+                options: [
+                    { label: 'PHP', value: 'php' },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                    },
+                ],
+            },
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // Description
+        {
+            name: nameof(x => x.description),
+            args: {
+                description: 'Description will show here',
+                options: [
+                    { label: 'PHP', value: 'php' },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                    },
+                ],
+            },
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // Placeholder
+        {
+            name: nameof(x => x.placeholder),
+            args: {
+                placeholder: 'Select multiple options...',
+                options: [
+                    { label: 'PHP', value: 'php' },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                    },
+                ],
+            },
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // Required
+        {
+            name: nameof(x => x.required),
+            args: {
+                label: 'Required Multiselect',
+                required: true,
+                options: [
+                    { label: 'PHP', value: 'php' },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                    },
+                ],
+            },
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // Readonly
+        {
+            name: nameof(x => x.readonly),
+            args: {
+                label: 'Readonly Multiselect',
+                readonly: true,
+                options: [
+                    { label: 'PHP', value: 'php' },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                    },
+                ],
+            },
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // Disabled
+        {
+            name: nameof(x => x.disabled),
+            args: {
+                label: 'Disabled Multiselect',
+                disabled: true,
+                options: [
+                    { label: 'PHP', value: 'php' },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                    },
+                ],
+            },
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // Error
+        {
+            name: nameof(x => x.error),
+            args: {
+                error: true,
+                options: [
+                    { label: 'PHP', value: 'php' },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                    },
+                ],
+            },
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // ErrorDescription
+        {
+            name: nameof(x => x.errorDescription),
+            args: {
+                error: true,
+                errorDescription: 'This multiselect has an error.',
+                options: [
+                    { label: 'PHP', value: 'php' },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                    },
+                ],
+            },
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // MaxHeight
+        {
+            name: nameof(x => x.maxHeight),
+            args: {
+                maxHeight: '300px',
+                options: [
+                    {
+                        label: 'Item 1',
+                        value: 'item-1',
+                    },
+                    {
+                        label: 'Item 2',
+                        value: 'item-2',
+                    },
+                    {
+                        label: 'Item 3',
+                        value: 'item-3',
+                    },
+                    {
+                        label: 'Item 4',
+                        value: 'item-4',
+                    },
+                    {
+                        label: 'Item 5',
+                        value: 'item-5',
+                    },
+                    {
+                        label: 'Item 6',
+                        value: 'item-6',
+                    },
+                    {
+                        label: 'Item 7',
+                        value: 'item-7',
+                    },
+                    {
+                        label: 'Item 8',
+                        value: 'item-8',
+                    },
+                    {
+                        label: 'Item 9',
+                        value: 'item-9',
+                    },
+                    {
+                        label: 'Item 10',
+                        value: 'item-10',
+                    },
+                    {
+                        label: 'Item 11',
+                        value: 'item-11',
+                    },
+                    {
+                        label: 'Item 12',
+                        value: 'item-12',
+                    },
+                    {
+                        label: 'Item 13',
+                        value: 'item-13',
+                    },
+                    {
+                        label: 'Item 14',
+                        value: 'item-14',
+                    },
+                    {
+                        label: 'Item 15',
+                        value: 'item-15',
+                    },
+                    {
+                        label: 'Item 16',
+                        value: 'item-16',
+                    },
+                    {
+                        label: 'Item 17',
+                        value: 'item-17',
+                    },
+                    {
+                        label: 'Item 18',
+                        value: 'item-18',
+                    },
+                    {
+                        label: 'Item 19',
+                        value: 'item-19',
+                    },
+                    {
+                        label: 'Item 20',
+                        value: 'item-20',
+                    },
+                    {
+                        label: 'Item 21',
+                        value: 'item-21',
+                    },
+                    {
+                        label: 'Item 22',
+                        value: 'item-22',
+                    },
+                    {
+                        label: 'Item 23',
+                        value: 'item-23',
+                    },
+                    {
+                        label: 'Item 24',
+                        value: 'item-24',
+                    },
+                    {
+                        label: 'Item 25',
+                        value: 'item-25',
+                    },
+                    {
+                        label: 'Item 26',
+                        value: 'item-26',
+                    },
+                    {
+                        label: 'Item 27',
+                        value: 'item-27',
+                    },
+                    {
+                        label: 'Item 28',
+                        value: 'item-28',
+                    },
+                    {
+                        label: 'Item 29',
+                        value: 'item-29',
+                    },
+                    {
+                        label: 'Item 30',
+                        value: 'item-30',
+                    },
+                    {
+                        label: 'Item 31',
+                        value: 'item-31',
+                    },
+                    {
+                        label: 'Item 32',
+                        value: 'item-32',
+                    },
+                    {
+                        label: 'Item 33',
+                        value: 'item-33',
+                    },
+                    {
+                        label: 'Item 34',
+                        value: 'item-34',
+                    },
+                    {
+                        label: 'Item 35',
+                        value: 'item-35',
+                    },
+                    {
+                        label: 'Item 36',
+                        value: 'item-36',
+                    },
+                    {
+                        label: 'Item 37',
+                        value: 'item-37',
+                    },
+                    {
+                        label: 'Item 38',
+                        value: 'item-38',
+                    },
+                    {
+                        label: 'Item 39',
+                        value: 'item-39',
+                    },
+                    {
+                        label: 'Item 40',
+                        value: 'item-40',
+                    },
+                    {
+                        label: 'Item 41',
+                        value: 'item-41',
+                    },
+                    {
+                        label: 'Item 42',
+                        value: 'item-42',
+                    },
+                    {
+                        label: 'Item 43',
+                        value: 'item-43',
+                    },
+                    {
+                        label: 'Item 44',
+                        value: 'item-44',
+                    },
+                    {
+                        label: 'Item 45',
+                        value: 'item-45',
+                    },
+                    {
+                        label: 'Item 46',
+                        value: 'item-46',
+                    },
+                    {
+                        label: 'Item 47',
+                        value: 'item-47',
+                    },
+                    {
+                        label: 'Item 48',
+                        value: 'item-48',
+                    },
+                    {
+                        label: 'Item 49',
+                        value: 'item-49',
+                    },
+                    {
+                        label: 'Item 50',
+                        value: 'item-50',
+                    },
+                ],
+            },
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // Open
+        {
+            name: nameof(x => x.open),
+            args: {
+                open: true,
+                options: [
+                    { label: 'PHP', value: 'php' },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                    },
+                ],
+            },
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // Fluid
+        {
+            name: nameof(x => x.fluid),
+            args: {
+                fluid: true,
+                options: [
+                    { label: 'PHP', value: 'php' },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                    },
+                ],
+            },
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // Options
+        {
+            name: nameof(x => x.options),
+            args: {
+                options: [
+                    { label: 'PHP', value: 'php' },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                    },
+                ],
+            },
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // OptionsWithDescription
+        {
+            name: 'OptionsWithDescription',
+            args: {
+                options: [
+                    { label: 'PHP', value: 'php', description: 'Description for PHP' },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                        description: 'Description for Java',
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                        description: 'Description for Javascript',
+                    },
+                ],
+            },
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // OptionsWithDisabledElement
+        {
+            name: 'OptionsWithDisabledElement',
+            args: {
+                options: [
+                    { label: 'PHP', value: 'php' },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                    },
+                    {
+                        label: 'Item disabled',
+                        value: 'disabled',
+                        disabled: true,
+                    },
+                ],
+            },
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // OptionsWithPreselectedValue
+        {
+            name: 'OptionsWithPreselectedValue',
+            args: {
+                value: ['java'],
+                options: [
+                    { label: 'PHP', value: 'php' },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                    },
+                ],
+            },
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // OptionsWithPrecheckedElement
+        {
+            name: 'OptionsWithPrecheckedElement',
+            args: {
+                options: [
+                    { label: 'PHP', value: 'php' },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                        checked: true,
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                    },
+                ],
+            },
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // OptionsWithMultiplePreselectedValues
+        {
+            name: 'OptionsWithMultiplePreselectedValues',
             args: {
                 value: ['php', 'java'],
-                label: 'Multiple Selected Values',
+                options: [
+                    { label: 'PHP', value: 'php' },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                    },
+                ],
+            },
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // OptionsWithMultiplePrecheckedElement
+        {
+            name: 'OptionsWithMultiplePrecheckedElement',
+            args: {
+                options: [
+                    {
+                        label: 'PHP',
+                        value: 'php',
+                        checked: true,
+                    },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                        checked: true,
+                    },
+                ],
+            },
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // Filterable
+        {
+            name: nameof(x => x.filterable),
+            args: {
+                filterable: true,
+                options: [
+                    { label: 'PHP', value: 'php' },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                    },
+                ],
+            },
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // BadgeLabel
+        {
+            name: nameof(x => x.badgeLabel),
+            args: {
+                badgeLabel: 'languages',
+                value: ['php'],
+                options: [
+                    { label: 'PHP', value: 'php' },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                    },
+                ],
             },
-            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" })))),
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
+        // FilterText
         {
-            name: 'Filterable with Events',
+            name: nameof(x => x.filterText),
             args: {
-                label: 'Filterable with Events',
+                label: 'Multiselect with Initial Filter Text',
                 filterable: true,
-                value: ['php'],
+                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", checked: true }), h("nv-fielddropdownitemcheck", { label: "Java", description: "Description for Java", value: "java" }), h("nv-fielddropdownitemcheck", { label: "Javascript", description: "Description for Javascript", value: "javascript" })))),
+            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" })))),
         },
+        // EmptyResult
         {
-            name: nameof(x => x.inputId),
+            name: nameof(x => x.emptyResult),
             args: {
-                label: 'Multiselect with Custom ID',
-                inputId: 'custom-multiselect-id',
+                filterable: true,
+                open: true,
+                filterText: '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" })))),
         },
+        // DebounceDelay
         {
-            name: nameof(x => x.name),
+            name: nameof(x => x.debounceDelay),
             args: {
-                label: 'Multiselect with Name',
-                name: 'programming-languages',
+                label: 'Multiselect with Custom Debounce Delay',
+                filterable: true,
+                debounceDelay: 1000,
+                placeholder: 'Type to filter...',
+                options: [
+                    { label: 'PHP', value: 'php' },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                    },
+                ],
             },
-            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php" })))),
+            description: 'Demonstrates the debounce delay when filtering items. The filter will wait 1 second after the user stops typing before filtering the results.',
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
+        // EnableSelectAll
         {
-            name: nameof(x => x.filterable),
+            name: nameof(x => x.enableSelectAll),
             args: {
-                label: 'Multiselect Label',
-                filterable: true,
+                enableSelectAll: true,
+                options: [
+                    { label: 'PHP', value: 'php' },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                    },
+                ],
             },
-            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" })))),
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
+        // EnableSelectAllWithPreselectedValue
         {
-            name: nameof(x => x.maxHeight),
+            name: 'EnableSelectAllWithPreselectedValue',
             args: {
-                label: 'Multiselect with Custom Max Height',
-                maxHeight: '300px',
+                enableSelectAll: true,
+                value: ['java'],
+                options: [
+                    { label: 'PHP', value: 'php' },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                    },
+                ],
             },
-            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, Array.from({ length: 50 }).map((_, index) => (h("nv-fielddropdownitemcheck", { label: `Item ${index + 1}`, value: `item-${index + 1}` })))))),
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
+        // EnableSelectAllWithPrecheckedElement
         {
-            name: nameof(x => x.badgeLabel),
+            name: 'EnableSelectAllWithPrecheckedElement',
             args: {
-                label: 'Multiselect with Custom Badge Label',
-                badgeLabel: 'languages',
+                enableSelectAll: true,
+                options: [
+                    { label: 'PHP', value: 'php' },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                        checked: true,
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                    },
+                ],
             },
-            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" })))),
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
+        // EnableSelectAllWithMultiplePreselectedValues
         {
-            name: 'Options Array',
+            name: 'EnableSelectAllWithMultiplePreselectedValues',
             args: {
-                label: 'Multiselect with Options Array',
-                filterable: true,
+                enableSelectAll: true,
+                value: ['php', 'java'],
                 options: [
-                    { label: 'PHP', value: 'php', description: 'Description for PHP' },
-                    { label: 'Java', value: 'java', description: 'Description for Java' },
+                    { label: 'PHP', value: 'php' },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                    },
                     {
                         label: 'Javascript',
                         value: 'javascript',
-                        description: 'Description for Javascript',
-                        disabled: true,
                     },
                 ],
             },
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
+        // EnableSelectAllWithMultiplePrecheckedElement
         {
-            name: 'Options Array with Preselection',
+            name: 'EnableSelectAllWithMultiplePrecheckedElement',
             args: {
-                label: 'Multiselect with Options Array Preselected',
-                filterable: true,
-                value: ['java'],
+                enableSelectAll: true,
                 options: [
-                    { label: 'PHP', value: 'php', description: 'Description for PHP' },
+                    { label: 'PHP', value: 'php', checked: true },
                     {
                         label: 'Java',
                         value: 'java',
-                        description: 'Description for Java',
-                        checked: true,
                     },
                     {
                         label: 'Javascript',
                         value: 'javascript',
-                        description: 'Description for Javascript',
-                        disabled: true,
+                        checked: true,
                     },
                 ],
             },
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
+        // EnableSelectAllWithFiltering
         {
-            name: nameof(x => x.filterText),
+            name: 'EnableSelectAllWithFiltering',
             args: {
-                label: 'Multiselect with Initial Filter Text',
+                enableSelectAll: true,
                 filterable: true,
-                filterText: 'php',
+                options: [
+                    { label: 'PHP', value: 'php' },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                    },
+                ],
             },
-            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" })))),
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
+        // Slots
         {
-            name: nameof(x => x.label),
+            name: 'Slots',
             args: {
-                label: 'Filterable 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", { label: "PHP", value: "php" })))),
+            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" }))))),
         },
+        // SlotContentLabel
         {
-            name: nameof(x => x.description),
+            name: 'SlotContentLabel',
             args: {
-                label: 'Multiselect with Description',
-                description: 'Description will show here',
+                label: 'Multiselect with label',
             },
-            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php" })))),
+            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" })))),
         },
+        // SlotContentInputId
         {
-            name: nameof(x => x.placeholder),
+            name: 'SlotContentInputId',
             args: {
-                label: 'Multiselect with Placeholder',
-                placeholder: 'Select multiple options...',
+                label: 'Multiselect with Custom ID',
+                inputId: 'custom-slot-multiselect-id',
             },
-            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php" })))),
+            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" })))),
         },
+        // SlotContentName
         {
-            name: nameof(x => x.disabled),
+            name: 'SlotContentName',
             args: {
-                label: 'Disabled Multiselect',
-                disabled: true,
+                label: 'Multiselect with Name',
+                name: 'slot-programming-languages',
             },
-            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php" })))),
+            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" })))),
         },
+        // SlotContentDescription
         {
-            name: nameof(x => x.required),
+            name: 'SlotContentDescription',
+            args: {
+                description: 'Description will show here',
+            },
+            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" })))),
+        },
+        // SlotContentPlaceholder
+        {
+            name: 'SlotContentPlaceholder',
+            args: {
+                placeholder: 'Select multiple options...',
+            },
+            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" })))),
+        },
+        // SlotContentRequired
+        {
+            name: 'SlotContentRequired',
             args: {
                 label: 'Required Multiselect',
                 required: true,
             },
-            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php" })))),
+            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" })))),
         },
+        // SlotContentReadonly
         {
-            name: nameof(x => x.error),
+            name: 'SlotContentReadonly',
+            args: {
+                label: 'Readonly Multiselect',
+                readonly: 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" })))),
+        },
+        // SlotContentDisabled
+        {
+            name: 'SlotContentDisabled',
+            args: {
+                label: 'Disabled Multiselect',
+                disabled: 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" })))),
+        },
+        // SlotContentError
+        {
+            name: 'SlotContentError',
             args: {
-                label: 'Multiselect with Error',
                 error: true,
             },
-            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php" })))),
+            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" })))),
         },
+        // SlotContentErrorDescription
         {
-            name: nameof(x => x.errorDescription),
+            name: 'SlotContentErrorDescription',
             args: {
-                label: 'Multiselect with Error Description',
-                description: 'Select at least one option.',
                 error: true,
                 errorDescription: 'This multiselect has an error.',
             },
-            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php" })))),
+            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" })))),
         },
+        // SlotContentMaxHeight
         {
-            name: nameof(x => x.fluid),
+            name: 'SlotContentMaxHeight',
+            args: {
+                maxHeight: '300px',
+            },
+            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, Array.from({ length: 50 }).map((_, index) => (h("nv-fielddropdownitemcheck", { label: `Item ${index + 1}`, value: `item-${index + 1}` })))))),
+        },
+        // SlotContentOpen
+        {
+            name: 'SlotContentOpen',
+            args: {
+                open: 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" })))),
+        },
+        // SlotContentFluid
+        {
+            name: 'SlotContentFluid',
             args: {
-                label: 'Fluid Multiselect',
                 fluid: true,
             },
-            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php" })))),
+            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" })))),
         },
+        // SlotContent
         {
-            name: 'PreSelected',
-            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: 'SlotContent',
+            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" })))),
         },
+        // SlotContentWithDescription
         {
-            name: 'Slots',
+            name: 'SlotContentWithDescription',
+            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php", description: "Description for PHP" }), h("nv-fielddropdownitemcheck", { label: "Java", value: "java", description: "Description for Java" }), h("nv-fielddropdownitemcheck", { label: "Javascript", value: "javascript", description: "Description for Javascript" })))),
+        },
+        // SlotContentWithDisabledElement
+        {
+            name: 'SlotContentWithDisabledElement',
+            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", value: "disabled", disabled: true })))),
+        },
+        // SlotContentWithPreselectedValue
+        {
+            name: 'SlotContentWithPreselectedValue',
             args: {
-                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...',
+                value: ['java'],
             },
-            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" }))))),
+            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" })))),
+        },
+        // SlotContentWithPrecheckedElement
+        {
+            name: 'SlotContentWithPrecheckedElement',
+            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" })))),
         },
+        // SlotContentWithMultipleSelectedValues
         {
-            name: 'SlotsFilterable',
+            name: 'SlotContentWithMultipleSelectedValues',
+            args: {
+                value: ['php', '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" })))),
+        },
+        // SlotContentWithMultiplePrecheckedElement
+        {
+            name: 'Slot with Multiple Prechecked element',
+            template: (h("nv-fieldmultiselect", { "data-storybook-args": 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", checked: true })))),
+        },
+        // SlotContentFilterable
+        {
+            name: 'SlotContentFilterable',
             args: {
-                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", 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" }))))),
+            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" })))),
         },
+        // SlotContentBadgeLabel
         {
-            name: nameof(x => x.open),
+            name: 'SlotContentBadgeLabel',
             args: {
-                label: 'Multiselect Opened',
-                open: true,
+                label: 'Multiselect with Custom Badge Label',
+                badgeLabel: 'languages',
+                value: ['php'],
             },
             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" })))),
         },
+        // SlotContentEnableSelectAll
         {
-            name: nameof(x => x.value),
+            name: 'SlotContentEnableSelectAll',
             args: {
-                label: 'Multiselect with Pre-selected Value',
-                value: ['Java'],
+                enableSelectAll: 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" }), h("nv-fielddropdownitemcheck", { label: "Item disabled", disabled: true, value: "disabled" })))),
+            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" })))),
         },
+        // SlotContentEnableSelectAllWithPreselectedValue
         {
-            name: nameof(x => x.readonly),
+            name: 'SlotContentEnableSelectAllWithPreselectedValue',
             args: {
-                label: 'Readonly Multiselect',
-                readonly: true,
+                enableSelectAll: true,
+                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" })))),
         },
+        // SlotContentEnableSelectAllWithPrecheckedElement
         {
-            name: nameof(x => x.emptyResult),
+            name: 'SlotContentEnableSelectAllWithPrecheckedElement',
             args: {
-                label: 'Multiselect with Empty Result Text',
-                filterable: true,
-                open: true,
-                value: ['search for a inexistent item'],
-                emptyResult: 'No items found',
+                enableSelectAll: true,
             },
-            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php" })))),
+            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", checked: true }), h("nv-fielddropdownitemcheck", { label: "Javascript", value: "javascript" })))),
         },
+        // SlotContentEnableSelectAllWithMultipleSelectedValues
         {
-            name: nameof(x => x.debounceDelay),
+            name: 'SlotContentEnableSelectAllWithMultipleSelectedValues',
             args: {
-                label: 'Multiselect with Custom Debounce Delay',
+                enableSelectAll: true,
+                value: ['php', '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" })))),
+        },
+        // SlotContentEnableSelectAllWithMultiplePrecheckedElement
+        {
+            name: 'SlotContentEnableSelectAllWithMultiplePrecheckedElement',
+            args: {
+                enableSelectAll: true,
+            },
+            template: (h("nv-fieldmultiselect", { "data-storybook-args": 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", checked: true })))),
+        },
+        // SlotContentEnableSelectAllWithFiltering
+        {
+            name: 'SlotContentEnableSelectAllWithFiltering',
+            args: {
+                enableSelectAll: true,
                 filterable: true,
-                debounceDelay: 1000,
-                placeholder: 'Type to filter...',
-                options: [
-                    { label: 'PHP', value: 'php', description: 'Description for PHP' },
-                    {
-                        label: 'Java',
-                        value: 'java',
-                        description: 'Description for Java',
-                    },
-                    {
-                        label: 'Javascript',
-                        value: 'javascript',
-                        description: 'Description for Javascript',
-                    },
-                ],
             },
-            description: 'Demonstrates the debounce delay when filtering items. The filter will wait 1 second after the user stops typing before filtering the results.',
-            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" })))),
         },
     ],
 };