@nova-design-system/nova-webcomponents 3.0.0-beta.34 → 3.0.0-beta.35

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

@@ -0,0 +1,249 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+const NvFieldmultiselectDocs = {
+    component: 'nv-fieldmultiselect',
+    subcomponents: ['nv-fielddropdownitemcheck', 'nv-badge', 'nv-icon'],
+    stories: [
+        {
+            name: 'Default',
+            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" })))),
+        },
+        {
+            name: nameof(x => x.inputId),
+            args: {
+                label: 'Multiselect with Custom ID',
+                inputId: 'custom-multiselect-id',
+            },
+            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php" })))),
+        },
+        {
+            name: nameof(x => x.name),
+            args: {
+                label: 'Multiselect with Name',
+                name: 'programming-languages',
+            },
+            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php" })))),
+        },
+        {
+            name: nameof(x => x.filterable),
+            args: {
+                label: 'Multiselect Label',
+                filterable: true,
+            },
+            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.maxHeight),
+            args: {
+                label: 'Multiselect with Custom Max Height',
+                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}` })))))),
+        },
+        {
+            name: nameof(x => x.badgeLabel),
+            args: {
+                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: 'Options Array',
+            args: {
+                label: 'Multiselect with Options Array',
+                filterable: true,
+                mode: 'options',
+                options: JSON.stringify([
+                    { 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 }),
+        },
+        {
+            name: 'Options Array Preselected',
+            args: {
+                label: 'Multiselect with Options Array Preselected',
+                filterable: true,
+                mode: 'options',
+                options: JSON.stringify([
+                    { label: 'PHP', value: 'php', description: 'Description for PHP' },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                        description: 'Description for Java',
+                        checked: true,
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                        description: 'Description for Javascript',
+                        disabled: true,
+                    },
+                ]),
+            },
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.label),
+            args: {
+                label: 'Filterable Multiselect',
+            },
+            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php" })))),
+        },
+        {
+            name: nameof(x => x.description),
+            args: {
+                label: 'Multiselect with Description',
+                description: 'Description will show here',
+            },
+            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php" })))),
+        },
+        {
+            name: nameof(x => x.placeholder),
+            args: {
+                label: 'Multiselect with Placeholder',
+                placeholder: 'Select multiple options...',
+            },
+            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php" })))),
+        },
+        {
+            name: nameof(x => x.disabled),
+            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" })))),
+        },
+        {
+            name: nameof(x => x.required),
+            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" })))),
+        },
+        {
+            name: nameof(x => x.error),
+            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" })))),
+        },
+        {
+            name: nameof(x => x.errorDescription),
+            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" })))),
+        },
+        {
+            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: 'DefaultSlot',
+            args: {
+                label: 'DefaultSlot Multiselect',
+                description: 'This is a DefaultSlot multiselect.',
+                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"))))),
+        },
+        {
+            name: 'DefaultSlotFiltereable',
+            args: {
+                label: 'Default Slot Filtereable Multiselect',
+                description: 'This is a Default Slot Filtereable multiselect.',
+                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"))))),
+        },
+        {
+            name: nameof(x => x.open),
+            args: {
+                label: 'Multiselect Opened',
+                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" })))),
+        },
+        {
+            name: nameof(x => x.value),
+            args: {
+                label: 'Multiselect with Pre-selected Value',
+                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" })))),
+        },
+        {
+            name: nameof(x => x.readonly),
+            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" })))),
+        },
+        {
+            name: nameof(x => x.emptyresult),
+            args: {
+                label: 'Multiselect with Empty Result Text',
+                filterable: true,
+                open: true,
+                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" })))),
+        },
+        {
+            name: nameof(x => x.debounceDelay),
+            args: {
+                label: 'Multiselect with Custom Debounce Delay',
+                filterable: true,
+                debounceDelay: 1000,
+                placeholder: 'Type to filter...',
+                mode: 'options',
+                options: JSON.stringify([
+                    { 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 }),
+        },
+    ],
+};
+export default NvFieldmultiselectDocs;
+//# sourceMappingURL=nv-fieldmultiselect.docs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-fieldmultiselect.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldmultiselect/nv-fieldmultiselect.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGlC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,sBAAsB,GAA4C;IACtE,SAAS,EAAE,qBAAqB;IAChC,aAAa,EAAE,CAAC,2BAA2B,EAAE,UAAU,EAAE,SAAS,CAAC;IACnE,OAAO,EAAE;QACP;YACE,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,CACR;gBACE,UAAI,IAAI,EAAC,SAAS;oBAChB,iCACE,KAAK,EAAC,KAAK,EACX,WAAW,EAAC,qBAAqB,EACjC,KAAK,EAAC,KAAK,GACgB;oBAC7B,iCACE,KAAK,EAAC,MAAM,EACZ,WAAW,EAAC,sBAAsB,EAClC,KAAK,EAAC,MAAM,GACe;oBAC7B,iCACE,KAAK,EAAC,YAAY,EAClB,WAAW,EAAC,4BAA4B,EACxC,KAAK,EAAC,YAAY,GACS;oBAC7B,iCACE,KAAK,EAAC,eAAe,EACrB,WAAW,EAAC,+BAA+B,EAC3C,QAAQ,QACR,KAAK,EAAC,UAAU,GACW,CAC1B,CACe,CACvB;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAgC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;YAC3D,IAAI,EAAE;gBACJ,KAAK,EAAE,4BAA4B;gBACnC,OAAO,EAAE,uBAAuB;aACjC;YACD,QAAQ,EAAE,CACR;gBACE,UAAI,IAAI,EAAC,SAAS;oBAChB,iCACE,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,KAAK,GACgB,CAC1B,CACe,CACvB;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAgC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YACxD,IAAI,EAAE;gBACJ,KAAK,EAAE,uBAAuB;gBAC9B,IAAI,EAAE,uBAAuB;aAC9B;YACD,QAAQ,EAAE,CACR;gBACE,UAAI,IAAI,EAAC,SAAS;oBAChB,iCACE,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,KAAK,GACgB,CAC1B,CACe,CACvB;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAgC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC;YAC9D,IAAI,EAAE;gBACJ,KAAK,EAAE,mBAAmB;gBAC1B,UAAU,EAAE,IAAI;aACjB;YACD,QAAQ,EAAE,CACR;gBACE,UAAI,IAAI,EAAC,SAAS;oBAChB,iCACE,KAAK,EAAC,KAAK,EACX,WAAW,EAAC,qBAAqB,EACjC,KAAK,EAAC,KAAK,GACgB;oBAC7B,iCACE,KAAK,EAAC,MAAM,EACZ,WAAW,EAAC,sBAAsB,EAClC,KAAK,EAAC,MAAM,GACe;oBAC7B,iCACE,KAAK,EAAC,YAAY,EAClB,WAAW,EAAC,4BAA4B,EACxC,KAAK,EAAC,YAAY,GACS,CAC1B,CACe,CACvB;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAgC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;YAC7D,IAAI,EAAE;gBACJ,KAAK,EAAE,oCAAoC;gBAC3C,SAAS,EAAE,OAAO;aACnB;YACD,QAAQ,EAAE,CACR;gBACE,UAAI,IAAI,EAAC,SAAS,IACf,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5C,iCACE,KAAK,EAAE,QAAQ,KAAK,GAAG,CAAC,EAAE,EAC1B,KAAK,EAAE,QAAQ,KAAK,GAAG,CAAC,EAAE,GACC,CAC9B,CAAC,CACC,CACe,CACvB;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAgC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC;YAC9D,IAAI,EAAE;gBACJ,KAAK,EAAE,qCAAqC;gBAC5C,UAAU,EAAE,WAAW;aACxB;YACD,QAAQ,EAAE,CACR;gBACE,UAAI,IAAI,EAAC,SAAS;oBAChB,iCACE,KAAK,EAAC,KAAK,EACX,WAAW,EAAC,qBAAqB,EACjC,KAAK,EAAC,KAAK,EACX,OAAO,SACoB;oBAC7B,iCACE,KAAK,EAAC,MAAM,EACZ,WAAW,EAAC,sBAAsB,EAClC,KAAK,EAAC,MAAM,GACe,CAC1B,CACe,CACvB;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAgC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC;YAChE,IAAI,EAAE;gBACJ,KAAK,EAAE,+BAA+B;gBACtC,YAAY,EAAE,IAAI;gBAClB,UAAU,EAAE,IAAI;aACjB;YACD,QAAQ,EAAE,CACR;gBACE,UAAI,IAAI,EAAC,SAAS;oBAChB,iCACE,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,KAAK,GACgB;oBAC7B,iCACE,KAAK,EAAC,MAAM,EACZ,KAAK,EAAC,MAAM,GACe,CAC1B,CACe,CACvB;SACF;QACD;YACE,IAAI,EAAE,eAAe;YACrB,IAAI,EAAE;gBACJ,KAAK,EAAE,gCAAgC;gBACvC,UAAU,EAAE,IAAI;gBAChB,IAAI,EAAE,SAAS;gBACf,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC;oBACtB,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE;oBAClE;wBACE,KAAK,EAAE,MAAM;wBACb,KAAK,EAAE,MAAM;wBACb,WAAW,EAAE,sBAAsB;qBACpC;oBACD;wBACE,KAAK,EAAE,YAAY;wBACnB,KAAK,EAAE,YAAY;wBACnB,WAAW,EAAE,4BAA4B;qBAC1C;iBACF,CAAC;aACH;YACD,QAAQ,EAAE,yDAA+D;SAC1E;QACD;YACE,IAAI,EAAE,2BAA2B;YACjC,IAAI,EAAE;gBACJ,KAAK,EAAE,4CAA4C;gBACnD,UAAU,EAAE,IAAI;gBAChB,IAAI,EAAE,SAAS;gBACf,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC;oBACtB,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE;oBAClE;wBACE,KAAK,EAAE,MAAM;wBACb,KAAK,EAAE,MAAM;wBACb,WAAW,EAAE,sBAAsB;wBACnC,OAAO,EAAE,IAAI;qBACd;oBACD;wBACE,KAAK,EAAE,YAAY;wBACnB,KAAK,EAAE,YAAY;wBACnB,WAAW,EAAE,4BAA4B;wBACzC,QAAQ,EAAE,IAAI;qBACf;iBACF,CAAC;aACH;YACD,QAAQ,EAAE,yDAA+D;SAC1E;QACD;YACE,IAAI,EAAE,MAAM,CAAgC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;YACzD,IAAI,EAAE;gBACJ,KAAK,EAAE,wBAAwB;aAChC;YACD,QAAQ,EAAE,CACR;gBACE,UAAI,IAAI,EAAC,SAAS;oBAChB,iCACE,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,KAAK,GACgB,CAC1B,CACe,CACvB;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAgC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC;YAC/D,IAAI,EAAE;gBACJ,KAAK,EAAE,8BAA8B;gBACrC,WAAW,EAAE,4BAA4B;aAC1C;YACD,QAAQ,EAAE,CACR;gBACE,UAAI,IAAI,EAAC,SAAS;oBAChB,iCACE,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,KAAK,GACgB,CAC1B,CACe,CACvB;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAgC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC;YAC/D,IAAI,EAAE;gBACJ,KAAK,EAAE,8BAA8B;gBACrC,WAAW,EAAE,4BAA4B;aAC1C;YACD,QAAQ,EAAE,CACR;gBACE,UAAI,IAAI,EAAC,SAAS;oBAChB,iCACE,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,KAAK,GACgB,CAC1B,CACe,CACvB;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAgC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;YAC5D,IAAI,EAAE;gBACJ,KAAK,EAAE,sBAAsB;gBAC7B,QAAQ,EAAE,IAAI;aACf;YACD,QAAQ,EAAE,CACR;gBACE,UAAI,IAAI,EAAC,SAAS;oBAChB,iCACE,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,KAAK,GACgB,CAC1B,CACe,CACvB;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAgC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;YAC5D,IAAI,EAAE;gBACJ,KAAK,EAAE,sBAAsB;gBAC7B,QAAQ,EAAE,IAAI;aACf;YACD,QAAQ,EAAE,CACR;gBACE,UAAI,IAAI,EAAC,SAAS;oBAChB,iCACE,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,KAAK,GACgB,CAC1B,CACe,CACvB;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAgC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;YACzD,IAAI,EAAE;gBACJ,KAAK,EAAE,wBAAwB;gBAC/B,KAAK,EAAE,IAAI;aACZ;YACD,QAAQ,EAAE,CACR;gBACE,UAAI,IAAI,EAAC,SAAS;oBAChB,iCACE,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,KAAK,GACgB,CAC1B,CACe,CACvB;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAgC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC;YACpE,IAAI,EAAE;gBACJ,KAAK,EAAE,oCAAoC;gBAC3C,WAAW,EAAE,6BAA6B;gBAC1C,KAAK,EAAE,IAAI;gBACX,gBAAgB,EAAE,gCAAgC;aACnD;YACD,QAAQ,EAAE,CACR;gBACE,UAAI,IAAI,EAAC,SAAS;oBAChB,iCACE,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,KAAK,GACgB,CAC1B,CACe,CACvB;SACF;QACD;YACE,IAAI,EAAE,aAAa;YACnB,QAAQ,EAAE,CACR,wDAAyC,UAAU;gBACjD,UAAI,IAAI,EAAC,SAAS;oBAChB,iCACE,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,KAAK,EACX,OAAO,SACoB;oBAC7B,iCACE,KAAK,EAAC,MAAM,EACZ,KAAK,EAAC,MAAM,GACe;oBAC7B,iCACE,KAAK,EAAC,YAAY,EAClB,KAAK,EAAC,YAAY,GACS;oBAC7B,iCACE,KAAK,EAAC,eAAe,EACrB,QAAQ,QACR,KAAK,EAAC,UAAU,GACW,CAC1B,CACe,CACvB;SACF;QACD;YACE,IAAI,EAAE,aAAa;YACnB,IAAI,EAAE;gBACJ,KAAK,EAAE,yBAAyB;gBAChC,WAAW,EAAE,oCAAoC;gBACjD,WAAW,EAAE,4BAA4B;aAC1C;YACD,QAAQ,EAAE,CACR;gBACE,UAAI,IAAI,EAAC,SAAS;oBAChB,iCAA2B,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,IAAI;wBACtD,iBAAW,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,GAAa;wBAC/C,mCAA6B,CACH;oBAC5B,iCAA2B,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,IAAI;wBACtD,iBAAW,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,GAAa;wBAC/C,mCAA6B,CACH;oBAC5B,iCAA2B,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,IAAI;wBACtD,iBAAW,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,GAAa;wBAC/C,mCAA6B,CACH,CACzB,CACe,CACvB;SACF;QACD;YACE,IAAI,EAAE,wBAAwB;YAC9B,IAAI,EAAE;gBACJ,KAAK,EAAE,sCAAsC;gBAC7C,WAAW,EAAE,iDAAiD;gBAC9D,WAAW,EAAE,4BAA4B;gBACzC,UAAU,EAAE,IAAI;aACjB;YACD,QAAQ,EAAE,CACR;gBACE,UAAI,IAAI,EAAC,SAAS;oBAChB,iCAA2B,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,IAAI;wBACtD,iBAAW,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,GAAa;wBAC/C,mCAA6B,CACH;oBAC5B,iCAA2B,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,IAAI;wBACtD,iBAAW,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,GAAa;wBAC/C,mCAA6B,CACH;oBAC5B,iCAA2B,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,IAAI;wBACtD,iBAAW,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,GAAa;wBAC/C,mCAA6B,CACH,CACzB,CACe,CACvB;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAgC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YACxD,IAAI,EAAE;gBACJ,KAAK,EAAE,oBAAoB;gBAC3B,IAAI,EAAE,IAAI;aACX;YACD,QAAQ,EAAE,CACR;gBACE,UAAI,IAAI,EAAC,SAAS;oBAChB,iCACE,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,KAAK,GACgB;oBAC7B,iCACE,KAAK,EAAC,MAAM,EACZ,KAAK,EAAC,MAAM,GACe;oBAC7B,iCACE,KAAK,EAAC,YAAY,EAClB,KAAK,EAAC,YAAY,GACS,CAC1B,CACe,CACvB;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAgC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;YACzD,IAAI,EAAE;gBACJ,KAAK,EAAE,qCAAqC;gBAC5C,KAAK,EAAE,MAAM;aACd;YACD,QAAQ,EAAE,CACR;gBACE,UAAI,IAAI,EAAC,SAAS;oBAChB,iCACE,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,KAAK,GACgB;oBAC7B,iCACE,KAAK,EAAC,MAAM,EACZ,KAAK,EAAC,MAAM,GACe;oBAC7B,iCACE,KAAK,EAAC,YAAY,EAClB,KAAK,EAAC,YAAY,GACS;oBAC7B,iCACE,KAAK,EAAC,eAAe,EACrB,QAAQ,QACR,KAAK,EAAC,UAAU,GACW,CAC1B,CACe,CACvB;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAgC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;YAC5D,IAAI,EAAE;gBACJ,KAAK,EAAE,sBAAsB;gBAC7B,QAAQ,EAAE,IAAI;aACf;YACD,QAAQ,EAAE,CACR;gBACE,UAAI,IAAI,EAAC,SAAS;oBAChB,iCACE,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,KAAK,GACgB;oBAC7B,iCACE,KAAK,EAAC,MAAM,EACZ,KAAK,EAAC,MAAM,GACe;oBAC7B,iCACE,KAAK,EAAC,YAAY,EAClB,KAAK,EAAC,YAAY,GACS,CAC1B,CACe,CACvB;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAgC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC;YAC/D,IAAI,EAAE;gBACJ,KAAK,EAAE,oCAAoC;gBAC3C,UAAU,EAAE,IAAI;gBAChB,IAAI,EAAE,IAAI;gBACV,KAAK,EAAE,8BAA8B;gBACrC,WAAW,EAAE,gBAAgB;aAC9B;YACD,QAAQ,EAAE,CACR;gBACE,UAAI,IAAI,EAAC,SAAS;oBAChB,iCACE,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,KAAK,GACgB,CAC1B,CACe,CACvB;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAgC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC;YACjE,IAAI,EAAE;gBACJ,KAAK,EAAE,wCAAwC;gBAC/C,UAAU,EAAE,IAAI;gBAChB,aAAa,EAAE,IAAI;gBACnB,WAAW,EAAE,mBAAmB;gBAChC,IAAI,EAAE,SAAS;gBACf,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC;oBACtB,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE;oBAClE;wBACE,KAAK,EAAE,MAAM;wBACb,KAAK,EAAE,MAAM;wBACb,WAAW,EAAE,sBAAsB;qBACpC;oBACD;wBACE,KAAK,EAAE,YAAY;wBACnB,KAAK,EAAE,YAAY;wBACnB,WAAW,EAAE,4BAA4B;qBAC1C;iBACF,CAAC;aACH;YACD,WAAW,EACT,+IAA+I;YACjJ,QAAQ,EAAE,yDAA+D;SAC1E;KACF;CACF,CAAC;AAEF,eAAe,sBAAsB,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvFieldmultiselectDocs: NovaDocs<Components.NvFieldmultiselect> = {\n  component: 'nv-fieldmultiselect',\n  subcomponents: ['nv-fielddropdownitemcheck', 'nv-badge', 'nv-icon'],\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            ></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: 'Options Array',\n      args: {\n        label: 'Multiselect with Options Array',\n        filterable: true,\n        mode: 'options',\n        options: JSON.stringify([\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        mode: 'options',\n        options: JSON.stringify([\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: '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        mode: 'options',\n        options: JSON.stringify([\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"]}