npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.0.0-beta.40 → 3.0.0-beta.42 - Mend

@nova-design-system/nova-webcomponents 3.0.0-beta.40 → 3.0.0-beta.42

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (526) hide show

package/dist/collection/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.js CHANGED Viewed

@@ -27,9 +27,20 @@ export class NvFielddropdownitemcheck {
                 group: this.group,
             });
         };
+        /** Make sure the checkbox is checked when clicked anywhere in the item. */
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            if (this.el.querySelector('input').checked) {
+                this.checked = false;
+            }
+            else {
+                this.checked = true;
+            }
+        };
     }
     render() {
-        return (h(Host, { key: 'c76823d19d02d60e94d55c3d48b01319b68c2c9f' }, h("div", { key: '09a3207064891e00c88e0443f6b709195da622ba' }, h("nv-fieldcheckbox", { key: '74e188edba8f1fb69fed0a08b156a6ead4f37203', checked: this.checked, name: this.label || this.value, label: this.label || this.value, "label-placement": "after", description: this.description, disabled: this.disabled, tabindex: "-1", role: "option", onCheckedChanged: this.onFieldcheckboxChanged }))));
+        return (h(Host, { key: 'f9445369d2703e0a5fe4417b1968f9a25dc94743', onClick: this.handleClick }, h("nv-fieldcheckbox", { key: 'a64195d14834b2a83d3b4c3f1451272fb97ff46a', checked: this.checked, name: this.label || this.value, label: this.label || this.value, "label-placement": "after", description: this.description, disabled: this.disabled, tabindex: "-1", role: "option", onCheckedChanged: this.onFieldcheckboxChanged })));
     }
     static get is() { return "nv-fielddropdownitemcheck"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-fielddropdownitemcheck.js","sourceRoot":"","sources":["../../../src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,KAAK,EAEL,OAAO,GACR,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,wBAAwB;IALrC;QAQE,8EAA8E;QAC9E,oBAAoB;QAEpB;;WAEG;QAEH,YAAO,GAAY,KAAK,CAAC;QA2BzB;;WAEG;QAEM,aAAQ,GAAY,KAAK,CAAC;QA0BnC;;;;WAIG;QACK,2BAAsB,GAAG,CAAC,KAA2B,EAAE,EAAE;YAC/D,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,6CAA6C;YAC7C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,oBAAoB;YACjD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACpB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;QACL,CAAC,CAAC;~~KAqBH~~;~~IAnBC~~,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;~~YACH;gBACE~~,yEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAC9B,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,qBACf,OAAO,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAC,IAAI,EACb,IAAI,EAAC,QAAQ,EACb,gBAAgB,EAAE,IAAI,CAAC,sBAAsB,GAC3B,~~CAChB~~,~~CACD,~~CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n} from '@stencil/core';\n\n@Component({\n tag: 'nv-fielddropdownitemcheck',\n styleUrl: 'nv-fielddropdownitemcheck.scss',\n shadow: false,\n})\nexport class NvFielddropdownitemcheck {\n @Element() el: HTMLNvFielddropdownitemcheckElement;\n\n /**************************************************************************/\n //#region PROPERTIES\n\n /\n * Indicates whether the checkbox is selected.\n /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /\n The value associated with this item.\n /\n @Prop({ reflect: true })\n readonly value?: string;\n\n /\n The label displayed alongside the checkbox.\n /\n @Prop({ reflect: true })\n readonly label?: string;\n\n /\n A description providing additional context or information about the\n * checkbox.\n /\n @Prop({ reflect: true })\n readonly description?: string;\n\n /\n The group this item belongs to, if applicable.\n /\n @Prop({ reflect: true })\n readonly group?: string;\n\n /\n Disables the item, preventing any user interaction.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Event emitted when the checkbox is toggled.\n * It provides details about the current state of the item.\n /\n @Event()\n itemChecked: EventEmitter<{\n /\n The value associated with this item\n /\n value: string \| undefined;\n /\n Whether the checkbox is currently checked\n /\n checked: boolean;\n /\n The group this item belongs to, if any\n /\n group?: string \| undefined;\n }>;\n\n /\n when the child <nv-fieldcheckbox> change its `checked` state,\n * update `this.checked` and emit `itemChecked`.\n * @param {CustomEvent<boolean>} event - The event emitted by the <nv-fieldcheckbox> component.\n */\n private onFieldcheckboxChanged = (event: CustomEvent<boolean>) => {\n if (this.disabled) return;\n // NvFieldcheckbox has emitted checkedChanged\n this.checked = event.detail; // get the new state\n this.itemChecked.emit({\n value: this.value,\n checked: this.checked,\n group: this.group,\n });\n };\n\n render() {\n return (\n <Host>\n <~~div>\n <~~nv-fieldcheckbox\n checked={this.checked}\n name={this.label \|\| this.value}\n label={this.label \|\| this.value}\n label-placement=\"after\"\n description={this.description}\n disabled={this.disabled}\n tabindex=\"-1\"\n role=\"option\"\n onCheckedChanged={this.onFieldcheckboxChanged}\n ></nv-fieldcheckbox>\n ~~</div>\n~~ </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"nv-fielddropdownitemcheck.js","sourceRoot":"","sources":["../../../src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,KAAK,EAEL,OAAO,GACR,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,wBAAwB;IALrC;QAQE,8EAA8E;QAC9E,oBAAoB;QAEpB;;WAEG;QAEH,YAAO,GAAY,KAAK,CAAC;QA2BzB;;WAEG;QAEM,aAAQ,GAAY,KAAK,CAAC;QA0BnC;;;;WAIG;QACK,2BAAsB,GAAG,CAAC,KAA2B,EAAE,EAAE;YAC/D,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,6CAA6C;YAC7C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,oBAAoB;YACjD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACpB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,2EAA2E;QACnE,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,CAAC;gBAC3C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACvB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACtB,CAAC;QACH,CAAC,CAAC;KAmBH;IAjBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW;YAC7B,yEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAC9B,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,qBACf,OAAO,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAC,IAAI,EACb,IAAI,EAAC,QAAQ,EACb,gBAAgB,EAAE,IAAI,CAAC,sBAAsB,GAC3B,CACf,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n} from '@stencil/core';\n\n@Component({\n tag: 'nv-fielddropdownitemcheck',\n styleUrl: 'nv-fielddropdownitemcheck.scss',\n shadow: false,\n})\nexport class NvFielddropdownitemcheck {\n @Element() el: HTMLNvFielddropdownitemcheckElement;\n\n /**************************************************************************/\n //#region PROPERTIES\n\n /\n * Indicates whether the checkbox is selected.\n /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /\n The value associated with this item.\n /\n @Prop({ reflect: true })\n readonly value?: string;\n\n /\n The label displayed alongside the checkbox.\n /\n @Prop({ reflect: true })\n readonly label?: string;\n\n /\n A description providing additional context or information about the\n * checkbox.\n /\n @Prop({ reflect: true })\n readonly description?: string;\n\n /\n The group this item belongs to, if applicable.\n /\n @Prop({ reflect: true })\n readonly group?: string;\n\n /\n Disables the item, preventing any user interaction.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Event emitted when the checkbox is toggled.\n * It provides details about the current state of the item.\n /\n @Event()\n itemChecked: EventEmitter<{\n /\n The value associated with this item\n /\n value: string \| undefined;\n /\n Whether the checkbox is currently checked\n /\n checked: boolean;\n /\n The group this item belongs to, if any\n /\n group?: string \| undefined;\n }>;\n\n /\n when the child <nv-fieldcheckbox> change its `checked` state,\n * update `this.checked` and emit `itemChecked`.\n * @param {CustomEvent<boolean>} event - The event emitted by the <nv-fieldcheckbox> component.\n /\n private onFieldcheckboxChanged = (event: CustomEvent<boolean>) => {\n if (this.disabled) return;\n // NvFieldcheckbox has emitted checkedChanged\n this.checked = event.detail; // get the new state\n this.itemChecked.emit({\n value: this.value,\n checked: this.checked,\n group: this.group,\n });\n };\n\n /* Make sure the checkbox is checked when clicked anywhere in the item. */\n private handleClick = () => {\n if (this.disabled) return;\n if (this.el.querySelector('input').checked) {\n this.checked = false;\n } else {\n this.checked = true;\n }\n };\n\n render() {\n return (\n <Host onClick={this.handleClick}>\n <nv-fieldcheckbox\n checked={this.checked}\n name={this.label \|\| this.value}\n label={this.label \|\| this.value}\n label-placement=\"after\"\n description={this.description}\n disabled={this.disabled}\n tabindex=\"-1\"\n role=\"option\"\n onCheckedChanged={this.onFieldcheckboxChanged}\n ></nv-fieldcheckbox>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/nv-fieldmultiselect/nv-fieldmultiselect.css CHANGED Viewed

@@ -75,10 +75,8 @@ nv-fieldmultiselect .input-wrapper-multiselect {
 nv-fieldmultiselect .input-container-multiselect {
   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;
@@ -90,19 +88,18 @@ nv-fieldmultiselect .input-container-multiselect {
   position: relative;
   width: 100%;
   min-height: 40px;
-  /*
-      &:hover{
-        border-color: var(--components-form-field-border-hover);
-      }
+  /* &:hover{
+    border-color: var(--components-form-field-border-hover);
+  }
-      &:focus-visible,
-      &:focus-within,
-      &:focus,
-      &.focus-within  {
-        border-color: var(--components-form-field-border-focus);
-        box-shadow: 0px 0px 0px var(--focus-field-stroke)
-        var(--nv-field-focus-box-shadow);
-      }*/
+  &:focus-visible,
+  &:focus-within,
+  &:focus,
+  &.focus-within  {
+    border-color: var(--components-form-field-border-focus);
+    box-shadow: 0px 0px 0px var(--focus-field-stroke)
+    var(--nv-field-focus-box-shadow);
+  } */
 }
 nv-fieldmultiselect .input-container-multiselect:hover {
   border-color: var(--nv-field-border-hover);
@@ -121,6 +118,9 @@ nv-fieldmultiselect .input-container-multiselect:has(input:disabled) {
   background-color: var(--components-form-field-background-disabled);
   border-color: var(--nv-field-border-disabled);
 }
+nv-fieldmultiselect .input-container-multiselect > nv-badge {
+  margin-left: var(--form-field-padding-x);
+}
 nv-fieldmultiselect .input-container-multiselect input,
 nv-fieldmultiselect .input-container-multiselect p.non-filterable-text {
   display: flex;
@@ -129,13 +129,12 @@ nv-fieldmultiselect .input-container-multiselect p.non-filterable-text {
   overflow: hidden;
   background-color: transparent;
   color: var(--components-form-field-content-text);
-  text-overflow: ellipsis;
+  padding: var(--form-field-padding-y) var(--form-field-padding-x);
   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%;
@@ -156,17 +155,16 @@ nv-fieldmultiselect .input-container-multiselect p.non-filterable-text::placehol
   font-weight: 400;
   line-height: var(--form-field-line-height);
 }
-nv-fieldmultiselect .input-container-multiselect .toggle-dropdown-icon {
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 2;
+nv-fieldmultiselect .input-container-multiselect > nv-iconbutton {
+  border: 0px;
+  border-radius: 0px;
+}
+nv-fieldmultiselect .input-container-multiselect > nv-iconbutton:focus-visible {
+  border-radius: var(--button-md-border-radius);
+  outline-offset: -3px;
 }
 nv-fieldmultiselect .input-container-multiselect nv-icon.validation {
   color: var(--nv-field-border-default);
-  position: absolute;
-  right: 50px;
 }
 nv-fieldmultiselect .non-filterable-text {
   display: block;

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

@@ -12,7 +12,7 @@ const NvFieldmultiselectDocs = {
     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" })))),
+            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", description: "Description for PHP", value: "php", checked: true }), h("nv-fielddropdownitemcheck", { label: "Java", description: "Description for Java", value: "java" }), h("nv-fielddropdownitemcheck", { label: "Javascript", description: "Description for Javascript", value: "javascript" }), h("nv-fielddropdownitemcheck", { label: "Item disabled", description: "Description for disabled item", disabled: true, value: "disabled" })))),
         },
         {
             name: nameof(x => x.inputId),
@@ -76,7 +76,6 @@ const NvFieldmultiselectDocs = {
             args: {
                 label: 'Multiselect with Options Array',
                 filterable: true,
-                mode: 'options',
                 options: JSON.stringify([
                     { label: 'PHP', value: 'php', description: 'Description for PHP' },
                     {
@@ -98,7 +97,6 @@ const NvFieldmultiselectDocs = {
             args: {
                 label: 'Multiselect with Options Array Preselected',
                 filterable: true,
-                mode: 'options',
                 options: JSON.stringify([
                     { label: 'PHP', value: 'php', description: 'Description for PHP' },
                     {
@@ -239,7 +237,6 @@ const NvFieldmultiselectDocs = {
                 filterable: true,
                 debounceDelay: 1000,
                 placeholder: 'Type to filter...',
-                mode: 'options',
                 options: JSON.stringify([
                     { label: 'PHP', value: 'php', description: 'Description for PHP' },
                     {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-fieldmultiselect.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldmultiselect/nv-fieldmultiselect.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvFieldmultiselectDocs: NovaDocs<Components.NvFieldmultiselect> = {\n component: 'nv-fieldmultiselect',\n badge: 'beta',\n subcomponents: [\n 'nv-fielddropdownitemcheck',\n 'nv-badge',\n 'nv-icon',\n 'nv-avatar',\n ],\n stories: [\n {\n name: 'Default',\n template: (\n <nv-fieldmultiselect data-storybook-args>\n <ul slot=\"content\">\n <nv-fielddropdownitemcheck\n label=\"PHP\"\n description=\"Description for PHP\"\n value=\"php\"\n ></nv-fielddropdownitemcheck>\n <nv-fielddropdownitemcheck\n label=\"Java\"\n description=\"Description for Java\"\n value=\"java\"\n ></nv-fielddropdownitemcheck>\n <nv-fielddropdownitemcheck\n label=\"Javascript\"\n description=\"Description for Javascript\"\n value=\"javascript\"\n ></nv-fielddropdownitemcheck>\n <nv-fielddropdownitemcheck\n label=\"Item disabled\"\n description=\"Description for disabled item\"\n disabled\n value=\"disabled\"\n ></nv-fielddropdownitemcheck>\n </ul>\n </nv-fieldmultiselect>\n ),\n },\n {\n name: nameof<Components.NvFieldmultiselect>(x => x.inputId),\n args: {\n label: 'Multiselect with Custom ID',\n inputId: 'custom-multiselect-id',\n },\n template: (\n <nv-fieldmultiselect data-storybook-args>\n <ul slot=\"content\">\n <nv-fielddropdownitemcheck\n label=\"PHP\"\n value=\"php\"\n ></nv-fielddropdownitemcheck>\n </ul>\n </nv-fieldmultiselect>\n ),\n },\n {\n name: nameof<Components.NvFieldmultiselect>(x => x.name),\n args: {\n label: 'Multiselect with Name',\n name: 'programming-languages',\n },\n template: (\n <nv-fieldmultiselect data-storybook-args>\n <ul slot=\"content\">\n <nv-fielddropdownitemcheck\n label=\"PHP\"\n value=\"php\"\n ></nv-fielddropdownitemcheck>\n </ul>\n </nv-fieldmultiselect>\n ),\n },\n {\n name: nameof<Components.NvFieldmultiselect>(x => x.filterable),\n args: {\n label: 'Multiselect Label',\n filterable: true,\n },\n template: (\n <nv-fieldmultiselect data-storybook-args>\n <ul slot=\"content\">\n <nv-fielddropdownitemcheck\n label=\"PHP\"\n description=\"Description for PHP\"\n value=\"php\"\n ></nv-fielddropdownitemcheck>\n <nv-fielddropdownitemcheck\n label=\"Java\"\n description=\"Description for Java\"\n value=\"java\"\n ></nv-fielddropdownitemcheck>\n <nv-fielddropdownitemcheck\n label=\"Javascript\"\n description=\"Description for Javascript\"\n value=\"javascript\"\n ></nv-fielddropdownitemcheck>\n </ul>\n </nv-fieldmultiselect>\n ),\n },\n {\n name: nameof<Components.NvFieldmultiselect>(x => x.maxHeight),\n args: {\n label: 'Multiselect with Custom Max Height',\n maxHeight: '300px',\n },\n template: (\n <nv-fieldmultiselect data-storybook-args>\n <ul slot=\"content\">\n {Array.from({ length: 50 }).map((_, index) => (\n <nv-fielddropdownitemcheck\n label={`Item ${index + 1}`}\n value={`item-${index + 1}`}\n ></nv-fielddropdownitemcheck>\n ))}\n </ul>\n </nv-fieldmultiselect>\n ),\n },\n {\n name: nameof<Components.NvFieldmultiselect>(x => x.badgeLabel),\n args: {\n label: 'Multiselect with Custom Badge Label',\n badgeLabel: 'languages',\n },\n template: (\n <nv-fieldmultiselect data-storybook-args>\n <ul slot=\"content\">\n <nv-fielddropdownitemcheck\n label=\"PHP\"\n description=\"Description for PHP\"\n value=\"php\"\n checked\n ></nv-fielddropdownitemcheck>\n <nv-fielddropdownitemcheck\n label=\"Java\"\n description=\"Description for Java\"\n value=\"java\"\n ></nv-fielddropdownitemcheck>\n </ul>\n </nv-fieldmultiselect>\n ),\n },\n {\n name: nameof<Components.NvFieldmultiselect>(x => x.autocomplete),\n args: {\n label: 'Multiselect with Autocomplete',\n autocomplete: 'on',\n filterable: true,\n },\n template: (\n <nv-fieldmultiselect data-storybook-args>\n <ul slot=\"content\">\n <nv-fielddropdownitemcheck\n label=\"PHP\"\n value=\"php\"\n ></nv-fielddropdownitemcheck>\n <nv-fielddropdownitemcheck\n label=\"Java\"\n value=\"java\"\n ></nv-fielddropdownitemcheck>\n </ul>\n </nv-fieldmultiselect>\n ),\n },\n {\n name: nameof<Components.NvFieldmultiselect>(x => x.autofocus),\n args: {\n label: 'Autofocus',\n autofocus: true,\n },\n template: <nv-fieldmultiselect data-storybook-args></nv-fieldmultiselect>,\n },\n {\n name: 'Options Array',\n args: {\n label: 'Multiselect with Options Array',\n filterable: true,\n 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"]}
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 badge: 'beta',\n subcomponents: [\n 'nv-fielddropdownitemcheck',\n 'nv-badge',\n 'nv-icon',\n 'nv-avatar',\n ],\n stories: [\n {\n name: 'Default',\n template: (\n <nv-fieldmultiselect data-storybook-args>\n <ul slot=\"content\">\n <nv-fielddropdownitemcheck\n label=\"PHP\"\n description=\"Description for PHP\"\n value=\"php\"\n checked\n ></nv-fielddropdownitemcheck>\n <nv-fielddropdownitemcheck\n label=\"Java\"\n description=\"Description for Java\"\n value=\"java\"\n ></nv-fielddropdownitemcheck>\n <nv-fielddropdownitemcheck\n label=\"Javascript\"\n description=\"Description for Javascript\"\n value=\"javascript\"\n ></nv-fielddropdownitemcheck>\n <nv-fielddropdownitemcheck\n label=\"Item disabled\"\n description=\"Description for disabled item\"\n disabled\n value=\"disabled\"\n ></nv-fielddropdownitemcheck>\n </ul>\n </nv-fieldmultiselect>\n ),\n },\n {\n name: nameof<Components.NvFieldmultiselect>(x => x.inputId),\n args: {\n label: 'Multiselect with Custom ID',\n inputId: 'custom-multiselect-id',\n },\n template: (\n <nv-fieldmultiselect data-storybook-args>\n <ul slot=\"content\">\n <nv-fielddropdownitemcheck\n label=\"PHP\"\n value=\"php\"\n ></nv-fielddropdownitemcheck>\n </ul>\n </nv-fieldmultiselect>\n ),\n },\n {\n name: nameof<Components.NvFieldmultiselect>(x => x.name),\n args: {\n label: 'Multiselect with Name',\n name: 'programming-languages',\n },\n template: (\n <nv-fieldmultiselect data-storybook-args>\n <ul slot=\"content\">\n <nv-fielddropdownitemcheck\n label=\"PHP\"\n value=\"php\"\n ></nv-fielddropdownitemcheck>\n </ul>\n </nv-fieldmultiselect>\n ),\n },\n {\n name: nameof<Components.NvFieldmultiselect>(x => x.filterable),\n args: {\n label: 'Multiselect Label',\n filterable: true,\n },\n template: (\n <nv-fieldmultiselect data-storybook-args>\n <ul slot=\"content\">\n <nv-fielddropdownitemcheck\n label=\"PHP\"\n description=\"Description for PHP\"\n value=\"php\"\n ></nv-fielddropdownitemcheck>\n <nv-fielddropdownitemcheck\n label=\"Java\"\n description=\"Description for Java\"\n value=\"java\"\n ></nv-fielddropdownitemcheck>\n <nv-fielddropdownitemcheck\n label=\"Javascript\"\n description=\"Description for Javascript\"\n value=\"javascript\"\n ></nv-fielddropdownitemcheck>\n </ul>\n </nv-fieldmultiselect>\n ),\n },\n {\n name: nameof<Components.NvFieldmultiselect>(x => x.maxHeight),\n args: {\n label: 'Multiselect with Custom Max Height',\n maxHeight: '300px',\n },\n template: (\n <nv-fieldmultiselect data-storybook-args>\n <ul slot=\"content\">\n {Array.from({ length: 50 }).map((_, index) => (\n <nv-fielddropdownitemcheck\n label={`Item ${index + 1}`}\n value={`item-${index + 1}`}\n ></nv-fielddropdownitemcheck>\n ))}\n </ul>\n </nv-fieldmultiselect>\n ),\n },\n {\n name: nameof<Components.NvFieldmultiselect>(x => x.badgeLabel),\n args: {\n label: 'Multiselect with Custom Badge Label',\n badgeLabel: 'languages',\n },\n template: (\n <nv-fieldmultiselect data-storybook-args>\n <ul slot=\"content\">\n <nv-fielddropdownitemcheck\n label=\"PHP\"\n description=\"Description for PHP\"\n value=\"php\"\n checked\n ></nv-fielddropdownitemcheck>\n <nv-fielddropdownitemcheck\n label=\"Java\"\n description=\"Description for Java\"\n value=\"java\"\n ></nv-fielddropdownitemcheck>\n </ul>\n </nv-fieldmultiselect>\n ),\n },\n {\n name: nameof<Components.NvFieldmultiselect>(x => x.autocomplete),\n args: {\n label: 'Multiselect with Autocomplete',\n autocomplete: 'on',\n filterable: true,\n },\n template: (\n <nv-fieldmultiselect data-storybook-args>\n <ul slot=\"content\">\n <nv-fielddropdownitemcheck\n label=\"PHP\"\n value=\"php\"\n ></nv-fielddropdownitemcheck>\n <nv-fielddropdownitemcheck\n label=\"Java\"\n value=\"java\"\n ></nv-fielddropdownitemcheck>\n </ul>\n </nv-fieldmultiselect>\n ),\n },\n {\n name: nameof<Components.NvFieldmultiselect>(x => x.autofocus),\n args: {\n label: 'Autofocus',\n autofocus: true,\n },\n template: <nv-fieldmultiselect data-storybook-args></nv-fieldmultiselect>,\n },\n {\n name: 'Options Array',\n args: {\n label: 'Multiselect with Options Array',\n filterable: true,\n options: 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 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 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"]}

package/dist/collection/components/nv-fieldmultiselect/nv-fieldmultiselect.js CHANGED Viewed

@@ -331,6 +331,23 @@ export class NvFieldmultiselect {
                 }
             }
         };
+        //#endregion METHODS
+        /****************************************************************************/
+        //#region RENDER
+        /**
+         * Renders the component in options mode
+         * @returns {any} The JSX for options mode
+         */
+        this.renderOptionsMode = () => {
+            return (h(Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { htmlFor: this.inputId }, h("slot", { name: "label" }, this.label))), h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, h("slot", { name: "before-input" }), h("div", { class: "input-container-multiselect" }, h("slot", { name: "leading-input" }), h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.selectedValues.length > 0, hidden: this.selectedValues.length <= 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseOptions }), this.isFilterable || this.disabled || this.readonly ? (h("input", { type: "text", id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputOptions, onFocus: this.handleInputFocusOptions, onBlur: this.handleInputBlurOptions, onKeyDown: this.handleKeyDown })) : (h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusOptions, role: "combobox", "aria-expanded": this.open }, h("span", null, this.value || this.placeholder))), this.error && (h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), h("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverOptions })), h("slot", { name: "after-input" })), h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: { 'max-height': this.maxHeight, 'overflow-y': 'auto' } }, h("ul", { role: "content" }, this.parsedOptions.map(option => (h("nv-fielddropdownitemcheck", { label: option.label, description: option.description, value: option.value, checked: this.selectedValues.includes(option.value), disabled: option.disabled }))), h("hr", { class: "multiselect-divider", style: { display: 'none' } })))), this.renderDescriptions()));
+        };
+        /**
+         * Renders the component in slots mode
+         * @returns {any} The JSX for slots mode
+         */
+        this.renderSlotsMode = () => {
+            return (h(Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { htmlFor: this.inputId }, h("slot", { name: "label" }, this.label))), h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, h("slot", { name: "before-input" }), h("div", { class: "input-container-multiselect", onClick: this.handleInputContainerClickSlots }, h("slot", { name: "leading-input" }), h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.selectedValues.length > 0, hidden: this.selectedValues.length <= 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseSlots }), this.isFilterable || this.disabled || this.readonly ? (h("input", { id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputSlots, onFocus: this.handleInputFocusSlots, onBlur: this.handleInputBlurSlots, onKeyDown: this.handleKeyDown })) : (h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickSlots, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusSlots, role: "combobox", "aria-expanded": this.open }, h("span", null, this.value || this.placeholder))), this.error && (h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), h("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverSlots })), h("slot", { name: "after-input" })), h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: { 'max-height': this.maxHeight, 'overflow-y': 'auto' } }, h("slot", { name: "content" }))), this.renderDescriptions()));
+        };
     }
     //#endregion PROPERTIES
     /****************************************************************************/
@@ -345,7 +362,7 @@ export class NvFieldmultiselect {
      * Set the mode state and handle options change.
      */
     componentWillLoad() {
-        this.modeState = this.mode;
+        this.modeState = this.options ? 'options' : 'slots';
         // Don't call handleOptionsChange if we are in slots mode
         if (this.modeState === 'options') {
             this.handleOptionsChange(this.options);
@@ -429,7 +446,7 @@ export class NvFieldmultiselect {
     }
     /**
      * Listen for the `itemChecked` event emitted by child items.
-     * @param {CustomEvent<{ value: string; checked: boolean }>} event - The event object containing the selected value and its checked state.
+     * @param {CustomEvent} event - The event object containing the selected value and its checked state.
      */
     handleItemChecked(event) {
         if (this.disabled || this.readonly) {
@@ -991,13 +1008,6 @@ export class NvFieldmultiselect {
         if (existingMessage)
             existingMessage.remove();
     }
-    /**
-     * Watch for changes in the mode prop and update modeState accordingly
-     * @param {string} newValue - The new mode value
-     */
-    handleModeChange(newValue) {
-        this.modeState = newValue;
-    }
     manageDivider(ul, selectedItems, unselectedItems) {
         let divider = ul.querySelector('hr.multiselect-divider');
         if (!divider) {
@@ -1016,23 +1026,6 @@ export class NvFieldmultiselect {
             divider.style.display = 'none';
         }
     }
-    //#endregion METHODS
-    /****************************************************************************/
-    //#region RENDER
-    /**
-     * Renders the component in options mode
-     * @returns {any} The JSX for options mode
-     */
-    renderOptionsMode() {
-        return (h(Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { htmlFor: this.inputId }, h("slot", { name: "label" }, this.label))), h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, h("slot", { name: "before-input" }), h("div", { class: "input-container-multiselect" }, h("slot", { name: "leading-input" }), h("nv-badge", { slot: "leading-input", "prevent-auto-close": "true", color: "10", dismissible: this.selectedValues.length > 0, hidden: this.selectedValues.length <= 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseOptions }), this.isFilterable || this.disabled || this.readonly ? (h("input", { id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputOptions, onFocus: this.handleInputFocusOptions, onBlur: this.handleInputBlurOptions, onKeyDown: this.handleKeyDown })) : (h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusOptions, role: "combobox", "aria-expanded": this.open }, h("span", null, this.value || this.placeholder))), h("nv-iconbutton", { class: "toggle-dropdown-icon", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverOptions })), h("slot", { name: "after-input" })), h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: { 'max-height': this.maxHeight, 'overflow-y': 'auto' } }, h("ul", { role: "content" }, this.parsedOptions.map(option => (h("nv-fielddropdownitemcheck", { label: option.label, description: option.description, value: option.value, checked: this.selectedValues.includes(option.value), disabled: option.disabled }))), h("hr", { class: "multiselect-divider", style: { display: 'none' } })))), this.renderDescriptions()));
-    }
-    /**
-     * Renders the component in slots mode
-     * @returns {any} The JSX for slots mode
-     */
-    renderSlotsMode() {
-        return (h(Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { htmlFor: this.inputId }, h("slot", { name: "label" }, this.label))), h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, h("slot", { name: "before-input" }), h("div", { class: "input-container-multiselect", onClick: this.handleInputContainerClickSlots }, h("slot", { name: "leading-input" }, h("p", null, "No leading input")), h("nv-badge", { slot: "leading-input", "prevent-auto-close": "true", color: "10", dismissible: this.selectedValues.length > 0, hidden: this.selectedValues.length <= 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseSlots }), this.isFilterable || this.disabled || this.readonly ? (h("input", { id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputSlots, onFocus: this.handleInputFocusSlots, onBlur: this.handleInputBlurSlots, onKeyDown: this.handleKeyDown })) : (h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickSlots, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusSlots, role: "combobox", "aria-expanded": this.open }, h("span", null, this.value || this.placeholder))), h("nv-iconbutton", { class: "toggle-dropdown-icon", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverSlots })), h("slot", { name: "after-input" })), h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: { 'max-height': this.maxHeight, 'overflow-y': 'auto' } }, h("slot", { name: "content" }))), this.renderDescriptions()));
-    }
     /**
      * Renders description and error description sections
      * @returns {any} The JSX for descriptions
@@ -1413,25 +1406,6 @@ export class NvFieldmultiselect {
                 "reflect": true,
                 "defaultValue": "false"
             },
-            "mode": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'options' | 'slots'",
-                    "resolved": "\"options\" | \"slots\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Multiselect mode: 'options' (JSON data) or 'slots' (custom items).\nThis property is now reflected in the modeState."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "mode",
-                "reflect": true
-            },
             "options": {
                 "type": "string",
                 "mutable": false,
@@ -1625,9 +1599,6 @@ export class NvFieldmultiselect {
             }, {
                 "propName": "filterable",
                 "methodName": "watchFilterableHandler"
-            }, {
-                "propName": "mode",
-                "methodName": "handleModeChange"
             }];
     }
     static get listeners() {