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

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

@@ -0,0 +1,169 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+const NvFieldmultiselectDocs = {
+    component: 'nv-fieldmultiselect',
+    subcomponents: ['nv-fielddropdownitemcheck', 'nv-avatar', 'nv-icon'],
+    stories: [
+        {
+            name: 'Default',
+            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "Item 1", description: "Description for item 1", value: "item1" }), h("nv-fielddropdownitemcheck", { label: "Item 2", description: "Description for item 2", value: "item2" }), h("nv-fielddropdownitemcheck", { label: "Item 3", description: "Description for item 3", value: "item3" }), h("nv-fielddropdownitemcheck", { label: "Item disabled", description: "Description for item disabled", disabled: true, value: "disabled" })))),
+        },
+        {
+            name: nameof(x => x.filterable),
+            args: {
+                label: 'Filterable Multiselect',
+                filterable: true,
+            },
+            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "Item 1", description: "Description for item 1", value: "item1" }), h("nv-fielddropdownitemcheck", { label: "Item 2", description: "Description for item 2", value: "item2" }), h("nv-fielddropdownitemcheck", { label: "Item 3", description: "Description for item 3", value: "item3" }), h("nv-fielddropdownitemcheck", { label: "Item disabled", description: "Description for item disabled", disabled: true, value: "disabled" })))),
+        },
+        {
+            name: nameof(x => x.badgeLabel),
+            args: {
+                label: 'Multiselect with Badge',
+                badgeLabel: 'selected',
+            },
+            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "Item 1", description: "Description for item 1", value: "item1" }), h("nv-fielddropdownitemcheck", { label: "Item 2", description: "Description for item 2", value: "item2" }), h("nv-fielddropdownitemcheck", { label: "Item 3", description: "Description for item 3", value: "item3" }), h("nv-fielddropdownitemcheck", { label: "Item disabled", description: "Description for item disabled", disabled: true, value: "disabled" })))),
+        },
+        {
+            name: 'Dividers',
+            args: {
+                label: 'Dropdown with dividers',
+                filterable: true,
+            },
+            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "Item 1", description: "Description for item 1", value: "item1" }), h("hr", null), h("nv-fielddropdownitemcheck", { label: "Item 2", description: "Description for item 2", value: "item2" }), h("hr", null), h("nv-fielddropdownitemcheck", { label: "Item 3", description: "Description for item 3", value: "item3" }), h("hr", null), h("nv-fielddropdownitemcheck", { label: "Item disabled", description: "Description for item disabled", disabled: true, value: "disabled" })))),
+        },
+        // {
+        //   name: nameof<Components.NvFieldmultiselect>(x => x.description),
+        //   args: {
+        //     label: 'Multiselect with Description',
+        //     description: 'You can select multiple items.',
+        //   },
+        //   template: (
+        //     <nv-fieldmultiselect data-storybook-args>
+        //       <ul slot="content">
+        //         <nv-fielddropdownitemcheck
+        //           label="Item 1"
+        //           value="item1"
+        //         ></nv-fielddropdownitemcheck>
+        //       </ul>
+        //     </nv-fieldmultiselect>
+        //   ),
+        // },
+        // {
+        //   name: nameof<Components.NvFieldmultiselect>(x => x.placeholder),
+        //   args: {
+        //     label: 'Multiselect with Placeholder',
+        //     placeholder: 'Select items...',
+        //   },
+        //   template: (
+        //     <nv-fieldmultiselect data-storybook-args>
+        //       <ul slot="content">
+        //         <nv-fielddropdownitemcheck
+        //           label="Item 1"
+        //           value="item1"
+        //         ></nv-fielddropdownitemcheck>
+        //       </ul>
+        //     </nv-fieldmultiselect>
+        //   ),
+        // },
+        // {
+        //   name: nameof<Components.NvFieldmultiselect>(x => x.clearable),
+        //   args: {
+        //     label: 'Clearable Multiselect',
+        //     clearable: true,
+        //   },
+        //   template: (
+        //     <nv-fieldmultiselect data-storybook-args>
+        //       <ul slot="content">
+        //         <nv-fielddropdownitemcheck
+        //           label="Item 1"
+        //           value="item1"
+        //         ></nv-fielddropdownitemcheck>
+        //         <nv-fielddropdownitemcheck
+        //           label="Item 2"
+        //           value="item2"
+        //         ></nv-fielddropdownitemcheck>
+        //         <nv-fielddropdownitemcheck
+        //           label="Item 3"
+        //           value="item3"
+        //         ></nv-fielddropdownitemcheck>
+        //       </ul>
+        //     </nv-fieldmultiselect>
+        //   ),
+        // },
+        // {
+        //   name: nameof<Components.NvFieldmultiselect>(x => x.disabled),
+        //   args: {
+        //     label: 'Disabled Multiselect',
+        //     disabled: true,
+        //   },
+        //   template: (
+        //     <nv-fieldmultiselect data-storybook-args>
+        //       <ul slot="content">
+        //         <nv-fielddropdownitemcheck
+        //           label="Item 1"
+        //           value="item1"
+        //         ></nv-fielddropdownitemcheck>
+        //       </ul>
+        //     </nv-fieldmultiselect>
+        //   ),
+        // },
+        // {
+        //   name: nameof<Components.NvFieldmultiselect>(x => x.error),
+        //   args: {
+        //     label: 'Multiselect with Error',
+        //     error: true,
+        //   },
+        //   template: (
+        //     <nv-fieldmultiselect data-storybook-args>
+        //       <ul slot="content">
+        //         <nv-fielddropdownitemcheck
+        //           label="Item 1"
+        //           value="item1"
+        //         ></nv-fielddropdownitemcheck>
+        //       </ul>
+        //     </nv-fieldmultiselect>
+        //   ),
+        // },
+        // {
+        //   name: nameof<Components.NvFieldmultiselect>(x => x.errorDescription),
+        //   args: {
+        //     label: 'Multiselect with Error Description',
+        //     error: true,
+        //     errorDescription: 'Please select at least one item.',
+        //   },
+        //   template: (
+        //     <nv-fieldmultiselect data-storybook-args>
+        //       <ul slot="content">
+        //         <nv-fielddropdownitemcheck
+        //           label="Item 1"
+        //           value="item1"
+        //         ></nv-fielddropdownitemcheck>
+        //       </ul>
+        //     </nv-fieldmultiselect>
+        //   ),
+        // },
+        // {
+        //   name: 'Custom Slots',
+        //   args: {
+        //     label: 'Multiselect with Custom Items',
+        //   },
+        //   template: (
+        //     <nv-fieldmultiselect data-storybook-args>
+        //       <ul slot="content">
+        //         <nv-fielddropdownitemcheck class="flex gap-2" value="AB">
+        //           <nv-avatar initials="AB" size="xs"></nv-avatar>
+        //           <span>Custom Item AB</span>
+        //         </nv-fielddropdownitemcheck>
+        //         <nv-fielddropdownitemcheck class="flex gap-2" value="CD">
+        //           <nv-avatar initials="CD" size="xs"></nv-avatar>
+        //           <span>Custom Item CD</span>
+        //         </nv-fielddropdownitemcheck>
+        //       </ul>
+        //     </nv-fieldmultiselect>
+        //   ),
+        // },
+    ],
+};
+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":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvFieldmultiselectDocs: NovaDocs<Components.NvFieldmultiselect> = {\n  component: 'nv-fieldmultiselect',\n  subcomponents: ['nv-fielddropdownitemcheck', 'nv-avatar', '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=\"Item 1\"\n              description=\"Description for item 1\"\n              value=\"item1\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Item 2\"\n              description=\"Description for item 2\"\n              value=\"item2\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Item 3\"\n              description=\"Description for item 3\"\n              value=\"item3\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Item disabled\"\n              description=\"Description for 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.filterable),\n      args: {\n        label: 'Filterable Multiselect',\n        filterable: true,\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"Item 1\"\n              description=\"Description for item 1\"\n              value=\"item1\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Item 2\"\n              description=\"Description for item 2\"\n              value=\"item2\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Item 3\"\n              description=\"Description for item 3\"\n              value=\"item3\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Item disabled\"\n              description=\"Description for 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.badgeLabel),\n      args: {\n        label: 'Multiselect with Badge',\n        badgeLabel: 'selected',\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"Item 1\"\n              description=\"Description for item 1\"\n              value=\"item1\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Item 2\"\n              description=\"Description for item 2\"\n              value=\"item2\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Item 3\"\n              description=\"Description for item 3\"\n              value=\"item3\"\n            ></nv-fielddropdownitemcheck>\n            <nv-fielddropdownitemcheck\n              label=\"Item disabled\"\n              description=\"Description for item disabled\"\n              disabled\n              value=\"disabled\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n    {\n      name: 'Dividers',\n      args: {\n        label: 'Dropdown with dividers',\n        filterable: true,\n      },\n      template: (\n        <nv-fieldmultiselect data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitemcheck\n              label=\"Item 1\"\n              description=\"Description for item 1\"\n              value=\"item1\"\n            ></nv-fielddropdownitemcheck>\n            <hr />\n            <nv-fielddropdownitemcheck\n              label=\"Item 2\"\n              description=\"Description for item 2\"\n              value=\"item2\"\n            ></nv-fielddropdownitemcheck>\n            <hr />\n            <nv-fielddropdownitemcheck\n              label=\"Item 3\"\n              description=\"Description for item 3\"\n              value=\"item3\"\n            ></nv-fielddropdownitemcheck>\n            <hr />\n            <nv-fielddropdownitemcheck\n              label=\"Item disabled\"\n              description=\"Description for item disabled\"\n              disabled\n              value=\"disabled\"\n            ></nv-fielddropdownitemcheck>\n          </ul>\n        </nv-fieldmultiselect>\n      ),\n    },\n\n    // {\n    //   name: nameof<Components.NvFieldmultiselect>(x => x.description),\n    //   args: {\n    //     label: 'Multiselect with Description',\n    //     description: 'You can select multiple items.',\n    //   },\n    //   template: (\n    //     <nv-fieldmultiselect data-storybook-args>\n    //       <ul slot=\"content\">\n    //         <nv-fielddropdownitemcheck\n    //           label=\"Item 1\"\n    //           value=\"item1\"\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 items...',\n    //   },\n    //   template: (\n    //     <nv-fieldmultiselect data-storybook-args>\n    //       <ul slot=\"content\">\n    //         <nv-fielddropdownitemcheck\n    //           label=\"Item 1\"\n    //           value=\"item1\"\n    //         ></nv-fielddropdownitemcheck>\n    //       </ul>\n    //     </nv-fieldmultiselect>\n    //   ),\n    // },\n    // {\n    //   name: nameof<Components.NvFieldmultiselect>(x => x.clearable),\n    //   args: {\n    //     label: 'Clearable Multiselect',\n    //     clearable: true,\n    //   },\n    //   template: (\n    //     <nv-fieldmultiselect data-storybook-args>\n    //       <ul slot=\"content\">\n    //         <nv-fielddropdownitemcheck\n    //           label=\"Item 1\"\n    //           value=\"item1\"\n    //         ></nv-fielddropdownitemcheck>\n    //         <nv-fielddropdownitemcheck\n    //           label=\"Item 2\"\n    //           value=\"item2\"\n    //         ></nv-fielddropdownitemcheck>\n    //         <nv-fielddropdownitemcheck\n    //           label=\"Item 3\"\n    //           value=\"item3\"\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=\"Item 1\"\n    //           value=\"item1\"\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=\"Item 1\"\n    //           value=\"item1\"\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    //     error: true,\n    //     errorDescription: 'Please select at least one item.',\n    //   },\n    //   template: (\n    //     <nv-fieldmultiselect data-storybook-args>\n    //       <ul slot=\"content\">\n    //         <nv-fielddropdownitemcheck\n    //           label=\"Item 1\"\n    //           value=\"item1\"\n    //         ></nv-fielddropdownitemcheck>\n    //       </ul>\n    //     </nv-fieldmultiselect>\n    //   ),\n    // },\n    // {\n    //   name: 'Custom Slots',\n    //   args: {\n    //     label: 'Multiselect with Custom Items',\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 AB</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 CD</span>\n    //         </nv-fielddropdownitemcheck>\n    //       </ul>\n    //     </nv-fieldmultiselect>\n    //   ),\n    // },\n  ],\n};\n\nexport default NvFieldmultiselectDocs;\n"]}