@nova-design-system/nova-webcomponents 3.0.0-beta.23 → 3.0.0-beta.25

package/dist/cjs/nv-stack.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5d1f2412.js');
+const index = require('./index-c50face0.js');
 const clsx = require('./clsx-fc789adc.js');
 
 const nvStackCss = "nv-stack{display:flex;align-items:center;justify-content:flex-start;flex-direction:row}nv-stack nv-col{display:flex}nv-stack:not(nv-row){flex-wrap:nowrap}nv-stack>.nv-stack-item-flex{flex-shrink:1;flex-grow:1}nv-stack>.nv-stack-item-lead{margin-right:auto}nv-stack>.nv-stack-item-lead+*{margin-left:0}nv-stack>.nv-stack-item-center{margin-right:auto;margin-left:auto}nv-stack>.nv-stack-item-tail{margin-left:auto}nv-stack>.nv-stack-nowrap{white-space:nowrap}nv-stack.nv-stack-vertical{align-items:stretch;flex-direction:column}nv-stack.nv-stack-vertical>.nv-stack-item-lead{margin-right:0;margin-bottom:auto}nv-stack.nv-stack-vertical>.nv-stack-item-lead+*{margin-top:0}nv-stack.nv-stack-vertical>.nv-stack-item-tail{margin-left:0;margin-top:auto}nv-stack.nv-stack-vertical>.nv-stack-item-center{margin:auto 0}nv-stack.nv-stack-flex>*{flex-shrink:1;flex-grow:1}nv-stack.nv-stack-fill>*{height:100%}nv-stack.nv-stack-fill.nv-stack-vertical>*{height:auto;width:100%}";
@@ -21,7 +21,7 @@ const NvStack = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '4c8889bb870137f5c3aa8fc499c26fc77bc6fba1', class: clsx.clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gutter-x-${this.gutter}`, this.gutter && this.vertical && `gutter-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, index.h("slot", { key: 'dbd5b334a0e6ee5aa3bbc0431d44d81933f1c05c' })));
+        return (index.h(index.Host, { key: 'c644c9312f247c75b8eecc0903fb16d36e9ed4e5', class: clsx.clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gutter-x-${this.gutter}`, this.gutter && this.vertical && `gutter-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, index.h("slot", { key: '654459698308057e20afc68fc046364cd32c2512' })));
     }
 };
 NvStack.style = NvStackStyle0;

package/dist/cjs/nv-tooltip.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5d1f2412.js');
+const index = require('./index-c50face0.js');
 
 const nvTooltipCss = "nv-tooltip{display:inline-block;position:relative}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip [data-scope=popover]{background:var(--components-tooltip-background);color:var(--components-tooltip-text);font-weight:var(--font-weight-medium-emphasis);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);font-size:var(--tooltip-font-size);border-radius:var(--tooltip-radius);border:none;box-shadow:0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2)}nv-tooltip [data-scope=arrow]{background:var(--components-tooltip-background);box-shadow:none;border:none}";
 const NvTooltipStyle0 = nvTooltipCss;
@@ -26,7 +26,7 @@ const NvTooltip = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '7fbaa673028556f15b8c15a863f066d79b7b844e' }, index.h("slot", { key: 'b9007b3c3326ed7bb3bea05c2b2ad90d49b25a45' }), index.h("nv-popover", { key: '9a72b61bf4af4a769ba5ad991925bc982a440f93', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: 'aa7d584e0db97792915f5460a7760ad16f45c5ba', slot: "content" }, this.message), index.h("slot", { key: 'fc32501ada94b526adf6e9fcb71ec355f72a163d', name: "content" }))));
+        return (index.h(index.Host, { key: '46f64d21b9d3b2b69b46e9c1314d1f23594b1475' }, index.h("slot", { key: '92264616d33e8cea569b86e03108680a9cd77ce6' }), index.h("nv-popover", { key: '23eabf680f27fcdd0eb924bd48cadcd88e057f6f', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: 'e61c681be642de5a1a4dd113c809bf3939970141', slot: "content" }, this.message), index.h("slot", { key: 'bd44dcd5180244856cab6df5840e6c8bb2c07e32', name: "content" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/collection/collection-manifest.json

@@ -8,6 +8,8 @@
     "components/nv-button/nv-button.js",
     "components/nv-col/nv-col.js",
     "components/nv-fieldcheckbox/nv-fieldcheckbox.js",
+    "components/nv-fielddropdown/nv-fielddropdown.js",
+    "components/nv-fielddropdownitem/nv-fielddropdownitem.js",
     "components/nv-fieldnumber/nv-fieldnumber.js",
     "components/nv-fieldpassword/nv-fieldpassword.js",
     "components/nv-fieldradio/nv-fieldradio.js",
@@ -26,7 +28,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.22.1",
+    "version": "4.22.3",
     "typescriptVersion": "5.5.4"
   },
   "collections": [],

package/dist/collection/components/nv-fielddropdown/nv-fielddropdown.css

@@ -0,0 +1,195 @@
+nv-fielddropdown {
+  --nv-field-border-default: var(--components-form-field-border-default);
+  --nv-field-border-hover: var(--components-form-field-border-hover);
+  --nv-field-border-focus: var(--components-form-field-border-focus);
+  --nv-field-border-disabled: var(--components-form-field-border-default);
+  --nv-field-border-readonly: var(--components-form-field-border-default);
+  --nv-field-focus-box-shadow: var(--color-focus-brand);
+  --nv-field-background: var(--components-form-field-background-default);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--form-gap-y);
+  box-sizing: border-box;
+}
+nv-fielddropdown[readonly]:not([readonly=false]) {
+  --nv-field-border-default: var(--components-form-field-border-readonly);
+  --nv-field-border-hover: var(--nv-field-border-default);
+  --nv-field-border-focus: var(--components-form-field-border-focus);
+  --nv-field-border-disabled: var(--nv-field-border-default);
+  --nv-field-border-readonly: var(--nv-field-border-default);
+  --nv-field-background: var(--components-form-field-background-readonly);
+}
+nv-fielddropdown[error]:not([error=false]) {
+  --nv-field-border-default: var(--components-form-field-border-error);
+  --nv-field-border-hover: var(--nv-field-border-default);
+  --nv-field-border-focus: var(--nv-field-border-default);
+  --nv-field-border-disabled: var(--nv-field-border-default);
+  --nv-field-border-readonly: var(--nv-field-border-default);
+  --nv-field-focus-box-shadow: var(--color-focus-destructive);
+}
+nv-fielddropdown[required]:not([required=false]) label::after {
+  content: "*";
+  color: var(--components-form-text-required);
+  font-weight: 700;
+}
+nv-fielddropdown label {
+  display: flex;
+  align-items: center;
+  gap: var(--form-label-gap);
+  align-self: stretch;
+  color: var(--components-form-text-label-default);
+  font-family: "TT Norms Pro", sans-serif;
+  font-size: var(--form-label-font-size);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--form-label-line-height);
+}
+nv-fielddropdown nv-popover {
+  width: 100%;
+  display: block;
+}
+nv-fielddropdown .input-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--form-gap-x);
+  align-items: stretch;
+  align-self: stretch;
+  width: 100%;
+}
+nv-fielddropdown .input-container {
+  display: flex;
+  flex-grow: 1;
+  padding: calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);
+  justify-content: center;
+  align-items: center;
+  gap: var(--form-field-gap);
+  align-self: stretch;
+  border-radius: var(--form-field-radius);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--nv-field-border-default);
+  opacity: var(--components-form-opacity-default);
+  background: var(--nv-field-background);
+  transition: all 150ms ease-out;
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  min-height: 40px;
+}
+nv-fielddropdown .input-container:hover {
+  border-color: var(--nv-field-border-hover);
+}
+nv-fielddropdown .input-container:focus-within {
+  border-color: var(--nv-field-border-focus);
+  box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);
+}
+nv-fielddropdown .input-container:has(input:read-only) {
+  opacity: 0.5;
+  background-color: var(--components-form-field-background-readonly);
+  border-color: var(--nv-field-border-readonly);
+}
+nv-fielddropdown .input-container:has(input:disabled) {
+  opacity: 0.5;
+  background-color: var(--components-form-field-background-disabled);
+  border-color: var(--nv-field-border-disabled);
+}
+nv-fielddropdown .input-container input,
+nv-fielddropdown .input-container p.non-filterable-text {
+  display: flex;
+  align-items: center;
+  flex: 1 0 0;
+  overflow: hidden;
+  background-color: transparent;
+  color: var(--components-form-field-content-text);
+  text-overflow: ellipsis;
+  font-size: var(--form-field-font-size);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--form-field-line-height);
+  width: 100%;
+  padding-right: 2rem;
+  flex-grow: 1;
+  margin: 0;
+  min-height: 100%;
+  box-sizing: border-box;
+}
+nv-fielddropdown .input-container input:focus,
+nv-fielddropdown .input-container p.non-filterable-text:focus {
+  outline: none;
+}
+nv-fielddropdown .input-container input::placeholder,
+nv-fielddropdown .input-container p.non-filterable-text::placeholder {
+  overflow: hidden;
+  color: var(--components-form-field-content-placeholder);
+  text-overflow: ellipsis;
+  font-family: "TT Norms Pro", sans-serif;
+  font-size: var(--form-field-font-size);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--form-field-line-height);
+}
+nv-fielddropdown .input-container .toggle-dropdown-icon {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+}
+nv-fielddropdown .input-container nv-icon.validation {
+  color: var(--nv-field-border-default);
+  position: absolute;
+  right: 50px;
+}
+nv-fielddropdown .input-container.focus-within, nv-fielddropdown .input-container:hover {
+  border-color: var(--nv-field-border-focus);
+  box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);
+}
+nv-fielddropdown .non-filterable-text {
+  display: block;
+  border-radius: var(--form-field-radius);
+  background-color: var(--nv-field-background);
+  color: var(--components-form-field-content-text);
+  font-size: var(--form-field-font-size);
+  font-weight: 500;
+  line-height: var(--form-field-line-height);
+  box-sizing: border-box;
+  cursor: pointer;
+  height: 100%;
+  min-height: 40px;
+}
+nv-fielddropdown .non-filterable-text span {
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+nv-fielddropdown .description {
+  align-self: stretch;
+  color: var(--components-form-text-description-default);
+  font-family: "TT Norms Pro", sans-serif;
+  font-size: var(--form-description-font-size);
+  font-style: normal;
+  line-height: var(--form-description-line-height);
+}
+nv-fielddropdown .error-description {
+  align-self: stretch;
+  color: var(--components-form-text-description-default);
+  font-family: "TT Norms Pro", sans-serif;
+  font-size: var(--form-description-font-size);
+  font-style: normal;
+  line-height: var(--form-description-line-height);
+  color: var(--components-form-text-description-error);
+}
+nv-fielddropdown hr {
+  border: none;
+  border-top: 1px solid var(--dropdown-divider-color, #ccc);
+  margin: 0.5rem 0;
+}
+
+.input-container.focus-within,
+.input-container:hover {
+  border-color: var(--nv-field-border-focus);
+  box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);
+}

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

@@ -0,0 +1,160 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+const NvFielddropdownDocs = {
+    component: 'nv-fielddropdown',
+    subcomponents: ['nv-fielddropdownitem', 'nv-avatar', 'nv-icon'],
+    stories: [
+        {
+            name: 'Default',
+            template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" }), h("nv-fielddropdownitem", { label: "Item 2" }), h("nv-fielddropdownitem", { label: "Item 3" }), h("nv-fielddropdownitem", { label: "Item disabled", disabled: true })))),
+        },
+        {
+            name: nameof(x => x.filterable),
+            args: {
+                label: 'Dropdown Label',
+                filterable: true,
+            },
+            template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" }), h("nv-fielddropdownitem", { label: "Item 2" }), h("nv-fielddropdownitem", { label: "Item 3" }), h("nv-fielddropdownitem", { label: "Item disabled", disabled: true })))),
+        },
+        {
+            name: nameof(x => x.label),
+            args: {
+                label: 'filterable Dropdown',
+            },
+            template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" })))),
+        },
+        {
+            name: nameof(x => x.description),
+            args: {
+                label: 'Dropdown with Description',
+                description: 'Description will show here',
+            },
+            template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" })))),
+        },
+        {
+            name: nameof(x => x.placeholder),
+            args: {
+                label: 'Dropdown with Placeholder',
+                placeholder: 'Select an option...',
+            },
+            template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" })))),
+        },
+        {
+            name: nameof(x => x.disabled),
+            args: {
+                label: 'Disabled Dropdown',
+                disabled: true,
+            },
+            template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" })))),
+        },
+        {
+            name: nameof(x => x.required),
+            args: {
+                label: 'Required Dropdown',
+                required: true,
+            },
+            template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" })))),
+        },
+        {
+            name: 'Dividers',
+            args: {
+                label: 'Dropdown with dividers',
+                filterable: true,
+            },
+            template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" }), h("hr", null), h("nv-fielddropdownitem", { label: "Item 2" }), h("hr", null), h("nv-fielddropdownitem", { label: "Item 3" }), h("nv-fielddropdownitem", { label: "Item disabled", disabled: true })))),
+        },
+        {
+            name: nameof(x => x.error),
+            args: {
+                label: 'Dropdown with Error',
+                error: true,
+            },
+            template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" })))),
+        },
+        {
+            name: nameof(x => x.errorDescription),
+            args: {
+                label: 'Dropdown with Error Description',
+                description: 'Ensure you select an option.',
+                error: true,
+                errorDescription: 'This dropdown has an error.',
+            },
+            template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" })))),
+        },
+        // {
+        //   name: 'PreSelected',
+        //   template: (
+        //     <nv-fielddropdown data-storybook-args filterable>
+        //       <ul slot="content">
+        //         <nv-fielddropdownitem
+        //           label="Item 1"
+        //           selected
+        //         ></nv-fielddropdownitem>
+        //         <nv-fielddropdownitem label="Item 2"></nv-fielddropdownitem>
+        //         <nv-fielddropdownitem label="Item 3"></nv-fielddropdownitem>
+        //         <nv-fielddropdownitem
+        //           label="Item disabled"
+        //           disabled
+        //         ></nv-fielddropdownitem>
+        //       </ul>
+        //     </nv-fielddropdown>
+        //   ),
+        // },
+        {
+            name: 'DefaultSlot',
+            args: {
+                label: 'DefaultSlot Dropdown',
+                description: 'This is a DefaultSlot dropdown.',
+                placeholder: 'Select an option...',
+            },
+            template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { class: "flex gap-2", value: "AB" }, h("nv-avatar", { initials: "AB", size: "xs" }), h("span", null, "Custom Item Text")), h("nv-fielddropdownitem", { class: "flex gap-2", value: "CD" }, h("nv-avatar", { initials: "CD", size: "xs" }), h("span", null, "Custom Item Text")), h("nv-fielddropdownitem", { 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 Dropdown',
+                description: 'This is a Default Slot Filtereable dropdown.',
+                placeholder: 'Select an option...',
+                filterable: true,
+            },
+            template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { class: "flex gap-2", value: "AB" }, h("nv-avatar", { initials: "AB", size: "xs" }), h("span", null, "Custom Item Text")), h("nv-fielddropdownitem", { class: "flex gap-2", value: "CD" }, h("nv-avatar", { initials: "CD", size: "xs" }), h("span", null, "Custom Item Text")), h("nv-fielddropdownitem", { 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: 'Dropdown Opened',
+                open: true,
+            },
+            template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" }), h("nv-fielddropdownitem", { label: "Item 2" }), h("nv-fielddropdownitem", { label: "Item 3" })))),
+        },
+        {
+            name: nameof(x => x.value),
+            args: {
+                label: 'Dropdown with Pre-selected Value',
+                value: 'Item 2',
+            },
+            template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" }), h("nv-fielddropdownitem", { label: "Item 2" }), h("nv-fielddropdownitem", { label: "Item 3" }), h("nv-fielddropdownitem", { label: "Item disabled", disabled: true })))),
+        },
+        {
+            name: nameof(x => x.readonly),
+            args: {
+                label: 'Readonly Dropdown',
+                readonly: true,
+            },
+            template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" }), h("nv-fielddropdownitem", { label: "Item 2" }), h("nv-fielddropdownitem", { label: "Item 3" })))),
+        },
+        {
+            name: nameof(x => x.emptyresult),
+            args: {
+                label: 'Dropdown with Empty Result Text',
+                filterable: true,
+                open: true,
+                value: 'search for a inexistent item',
+                emptyresult: 'No items found',
+            },
+            template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" })))),
+        },
+    ],
+};
+export default NvFielddropdownDocs;
+//# sourceMappingURL=nv-fielddropdown.docs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-fielddropdown.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fielddropdown/nv-fielddropdown.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 NvFielddropdownDocs: NovaDocs<Components.NvFielddropdown> = {\n  component: 'nv-fielddropdown',\n  subcomponents: ['nv-fielddropdownitem', 'nv-avatar', 'nv-icon'],\n  stories: [\n    {\n      name: 'Default',\n      template: (\n        <nv-fielddropdown data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitem label=\"Item 1\"></nv-fielddropdownitem>\n            <nv-fielddropdownitem label=\"Item 2\"></nv-fielddropdownitem>\n            <nv-fielddropdownitem label=\"Item 3\"></nv-fielddropdownitem>\n            <nv-fielddropdownitem\n              label=\"Item disabled\"\n              disabled\n            ></nv-fielddropdownitem>\n          </ul>\n        </nv-fielddropdown>\n      ),\n    },\n    {\n      name: nameof<Components.NvFielddropdown>(x => x.filterable),\n      args: {\n        label: 'Dropdown Label',\n        filterable: true,\n      },\n      template: (\n        <nv-fielddropdown data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitem label=\"Item 1\"></nv-fielddropdownitem>\n            <nv-fielddropdownitem label=\"Item 2\"></nv-fielddropdownitem>\n            <nv-fielddropdownitem label=\"Item 3\"></nv-fielddropdownitem>\n            <nv-fielddropdownitem\n              label=\"Item disabled\"\n              disabled\n            ></nv-fielddropdownitem>\n          </ul>\n        </nv-fielddropdown>\n      ),\n    },\n    {\n      name: nameof<Components.NvFielddropdown>(x => x.label),\n      args: {\n        label: 'filterable Dropdown',\n      },\n      template: (\n        <nv-fielddropdown data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitem label=\"Item 1\"></nv-fielddropdownitem>\n          </ul>\n        </nv-fielddropdown>\n      ),\n    },\n    {\n      name: nameof<Components.NvFielddropdown>(x => x.description),\n      args: {\n        label: 'Dropdown with Description',\n        description: 'Description will show here',\n      },\n      template: (\n        <nv-fielddropdown data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitem label=\"Item 1\"></nv-fielddropdownitem>\n          </ul>\n        </nv-fielddropdown>\n      ),\n    },\n    {\n      name: nameof<Components.NvFielddropdown>(x => x.placeholder),\n      args: {\n        label: 'Dropdown with Placeholder',\n        placeholder: 'Select an option...',\n      },\n      template: (\n        <nv-fielddropdown data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitem label=\"Item 1\"></nv-fielddropdownitem>\n          </ul>\n        </nv-fielddropdown>\n      ),\n    },\n    {\n      name: nameof<Components.NvFielddropdown>(x => x.disabled),\n      args: {\n        label: 'Disabled Dropdown',\n        disabled: true,\n      },\n      template: (\n        <nv-fielddropdown data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitem label=\"Item 1\"></nv-fielddropdownitem>\n          </ul>\n        </nv-fielddropdown>\n      ),\n    },\n    {\n      name: nameof<Components.NvFielddropdown>(x => x.required),\n      args: {\n        label: 'Required Dropdown',\n        required: true,\n      },\n      template: (\n        <nv-fielddropdown data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitem label=\"Item 1\"></nv-fielddropdownitem>\n          </ul>\n        </nv-fielddropdown>\n      ),\n    },\n    {\n      name: 'Dividers',\n      args: {\n        label: 'Dropdown with dividers',\n        filterable: true,\n      },\n      template: (\n        <nv-fielddropdown data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitem label=\"Item 1\"></nv-fielddropdownitem>\n            <hr />\n            <nv-fielddropdownitem label=\"Item 2\"></nv-fielddropdownitem>\n            <hr />\n            <nv-fielddropdownitem label=\"Item 3\"></nv-fielddropdownitem>\n            <nv-fielddropdownitem\n              label=\"Item disabled\"\n              disabled\n            ></nv-fielddropdownitem>\n          </ul>\n        </nv-fielddropdown>\n      ),\n    },\n    {\n      name: nameof<Components.NvFielddropdown>(x => x.error),\n      args: {\n        label: 'Dropdown with Error',\n        error: true,\n      },\n      template: (\n        <nv-fielddropdown data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitem label=\"Item 1\"></nv-fielddropdownitem>\n          </ul>\n        </nv-fielddropdown>\n      ),\n    },\n    {\n      name: nameof<Components.NvFielddropdown>(x => x.errorDescription),\n      args: {\n        label: 'Dropdown with Error Description',\n        description: 'Ensure you select an option.',\n        error: true,\n        errorDescription: 'This dropdown has an error.',\n      },\n      template: (\n        <nv-fielddropdown data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitem label=\"Item 1\"></nv-fielddropdownitem>\n          </ul>\n        </nv-fielddropdown>\n      ),\n    },\n    // {\n    //   name: 'PreSelected',\n    //   template: (\n    //     <nv-fielddropdown data-storybook-args filterable>\n    //       <ul slot=\"content\">\n    //         <nv-fielddropdownitem\n    //           label=\"Item 1\"\n    //           selected\n    //         ></nv-fielddropdownitem>\n    //         <nv-fielddropdownitem label=\"Item 2\"></nv-fielddropdownitem>\n    //         <nv-fielddropdownitem label=\"Item 3\"></nv-fielddropdownitem>\n    //         <nv-fielddropdownitem\n    //           label=\"Item disabled\"\n    //           disabled\n    //         ></nv-fielddropdownitem>\n    //       </ul>\n    //     </nv-fielddropdown>\n    //   ),\n    // },\n    {\n      name: 'DefaultSlot',\n      args: {\n        label: 'DefaultSlot Dropdown',\n        description: 'This is a DefaultSlot dropdown.',\n        placeholder: 'Select an option...',\n      },\n      template: (\n        <nv-fielddropdown data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitem class=\"flex gap-2\" value=\"AB\">\n              <nv-avatar initials=\"AB\" size=\"xs\"></nv-avatar>\n              <span>Custom Item Text</span>\n            </nv-fielddropdownitem>\n            <nv-fielddropdownitem class=\"flex gap-2\" value=\"CD\">\n              <nv-avatar initials=\"CD\" size=\"xs\"></nv-avatar>\n              <span>Custom Item Text</span>\n            </nv-fielddropdownitem>\n            <nv-fielddropdownitem class=\"flex gap-2\" value=\"EF\">\n              <nv-avatar initials=\"EF\" size=\"xs\"></nv-avatar>\n              <span>Custom Item Text</span>\n            </nv-fielddropdownitem>\n          </ul>\n        </nv-fielddropdown>\n      ),\n    },\n    {\n      name: 'DefaultSlotFiltereable',\n      args: {\n        label: 'Default Slot Filtereable Dropdown',\n        description: 'This is a Default Slot Filtereable dropdown.',\n        placeholder: 'Select an option...',\n        filterable: true,\n      },\n      template: (\n        <nv-fielddropdown data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitem class=\"flex gap-2\" value=\"AB\">\n              <nv-avatar initials=\"AB\" size=\"xs\"></nv-avatar>\n              <span>Custom Item Text</span>\n            </nv-fielddropdownitem>\n            <nv-fielddropdownitem class=\"flex gap-2\" value=\"CD\">\n              <nv-avatar initials=\"CD\" size=\"xs\"></nv-avatar>\n              <span>Custom Item Text</span>\n            </nv-fielddropdownitem>\n            <nv-fielddropdownitem class=\"flex gap-2\" value=\"EF\">\n              <nv-avatar initials=\"EF\" size=\"xs\"></nv-avatar>\n              <span>Custom Item Text</span>\n            </nv-fielddropdownitem>\n          </ul>\n        </nv-fielddropdown>\n      ),\n    },\n    {\n      name: nameof<Components.NvFielddropdown>(x => x.open),\n      args: {\n        label: 'Dropdown Opened',\n        open: true,\n      },\n      template: (\n        <nv-fielddropdown data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitem label=\"Item 1\"></nv-fielddropdownitem>\n            <nv-fielddropdownitem label=\"Item 2\"></nv-fielddropdownitem>\n            <nv-fielddropdownitem label=\"Item 3\"></nv-fielddropdownitem>\n          </ul>\n        </nv-fielddropdown>\n      ),\n    },\n    {\n      name: nameof<Components.NvFielddropdown>(x => x.value),\n      args: {\n        label: 'Dropdown with Pre-selected Value',\n        value: 'Item 2',\n      },\n      template: (\n        <nv-fielddropdown data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitem label=\"Item 1\"></nv-fielddropdownitem>\n            <nv-fielddropdownitem label=\"Item 2\"></nv-fielddropdownitem>\n            <nv-fielddropdownitem label=\"Item 3\"></nv-fielddropdownitem>\n            <nv-fielddropdownitem\n              label=\"Item disabled\"\n              disabled\n            ></nv-fielddropdownitem>\n          </ul>\n        </nv-fielddropdown>\n      ),\n    },\n    {\n      name: nameof<Components.NvFielddropdown>(x => x.readonly),\n      args: {\n        label: 'Readonly Dropdown',\n        readonly: true,\n      },\n      template: (\n        <nv-fielddropdown data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitem label=\"Item 1\"></nv-fielddropdownitem>\n            <nv-fielddropdownitem label=\"Item 2\"></nv-fielddropdownitem>\n            <nv-fielddropdownitem label=\"Item 3\"></nv-fielddropdownitem>\n          </ul>\n        </nv-fielddropdown>\n      ),\n    },\n    {\n      name: nameof<Components.NvFielddropdown>(x => x.emptyresult),\n      args: {\n        label: 'Dropdown 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-fielddropdown data-storybook-args>\n          <ul slot=\"content\">\n            <nv-fielddropdownitem label=\"Item 1\"></nv-fielddropdownitem>\n          </ul>\n        </nv-fielddropdown>\n      ),\n    },\n  ],\n};\n\nexport default NvFielddropdownDocs;\n"]}