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

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

@@ -1,190 +0,0 @@
-import { Host, h, } from "@stencil/core";
-export class NvFielddropdownitemcheck {
-    constructor() {
-        this.handleCheckboxToggle = () => {
-            if (this.disabled)
-                return; // Ignore interactions si désactivé
-            this.checked = !this.checked;
-            this.itemChecked.emit({
-                value: this.value,
-                checked: this.checked,
-                group: this.group,
-            });
-            console.log('itemChecked emitted:', {
-                value: this.value,
-                checked: this.checked,
-                group: this.group,
-            });
-        };
-        this.checked = false;
-        this.value = undefined;
-        this.label = undefined;
-        this.description = undefined;
-        this.group = undefined;
-        this.disabled = false;
-    }
-    //#endregion EVENTS
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        return (h(Host, { key: 'a12664b18cb98c654b7e13b1883775baf96f174d', onClick: this.handleCheckboxToggle }, h("div", { key: '279a9e736c4e12c214bff691494b1bbc8efea808' }, h("nv-fieldcheckbox", { key: 'b278a88b87f8d5137cd9bdf28b332a28938ef1e2', 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" }))));
-    }
-    static get is() { return "nv-fielddropdownitemcheck"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["nv-fielddropdownitemcheck.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["nv-fielddropdownitemcheck.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "checked": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Indicates whether the checkbox is selected."
-                },
-                "attribute": "checked",
-                "reflect": true,
-                "defaultValue": "false"
-            },
-            "value": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The value associated with this item."
-                },
-                "attribute": "value",
-                "reflect": true
-            },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The label displayed alongside the checkbox."
-                },
-                "attribute": "label",
-                "reflect": true
-            },
-            "description": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "A description providing additional context or information about the\ncheckbox."
-                },
-                "attribute": "description",
-                "reflect": true
-            },
-            "group": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The group this item belongs to, if applicable."
-                },
-                "attribute": "group",
-                "reflect": true
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Disables the item, preventing any user interaction."
-                },
-                "attribute": "disabled",
-                "reflect": true,
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "itemChecked",
-                "name": "itemChecked",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Event emitted when the checkbox is toggled.\nIt provides details about the current state of the item."
-                },
-                "complexType": {
-                    "original": "{\n    value: string | undefined;\n    checked: boolean;\n    group?: string | undefined;\n  }",
-                    "resolved": "{ value: string; checked: boolean; group?: string; }",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-}
-//  <Host
-//    role="checkbox"
-//    aria-checked={this.checked.toString()}
-//    tabindex="0"
-//    onClick={this.handleCheckboxToggle}
-//    class={{
-//      disabled: this.disabled,
-//    }}
-//  >
-//    <nv-fieldcheckbox
-//      checked={this.checked}
-//      name="checkbox-hidden-label"
-//      label={this.label || this.value}
-//      label-placement="after"
-//      description={this.description}
-//      disabled={this.disabled}
-//      tabindex="-1"
-//    ></nv-fieldcheckbox>
-//  </Host>;
-//# sourceMappingURL=nv-fielddropdownitemcheck.js.map

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

@@ -1 +0,0 @@
-{"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;;QA0D3B,yBAAoB,GAAG,GAAG,EAAE;YAClC,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO,CAAC,mCAAmC;YAC9D,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;YAC7B,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;YAEH,OAAO,CAAC,GAAG,CAAC,sBAAsB,EAAE;gBAClC,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;QACL,CAAC,CAAC;uBA9DiB,KAAK;;;;;wBA+BK,KAAK;;IAiClC,mBAAmB;IACnB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB;YACtC;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,GACK,CAChB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGF;AAED,SAAS;AACT,qBAAqB;AACrB,4CAA4C;AAC5C,kBAAkB;AAClB,yCAAyC;AACzC,cAAc;AACd,gCAAgC;AAChC,QAAQ;AACR,KAAK;AACL,uBAAuB;AACvB,8BAA8B;AAC9B,oCAAoC;AACpC,wCAAwC;AACxC,+BAA+B;AAC/B,sCAAsC;AACtC,gCAAgC;AAChC,qBAAqB;AACrB,0BAA0B;AAC1B,YAAY","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    value: string | undefined;\n    checked: boolean;\n    group?: string | undefined;\n  }>;\n\n  private handleCheckboxToggle = () => {\n    if (this.disabled) return; // Ignore interactions si désactivé\n    this.checked = !this.checked;\n    this.itemChecked.emit({\n      value: this.value,\n      checked: this.checked,\n      group: this.group,\n    });\n\n    console.log('itemChecked emitted:', {\n      value: this.value,\n      checked: this.checked,\n      group: this.group,\n    });\n  };\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host onClick={this.handleCheckboxToggle}>\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          ></nv-fieldcheckbox>\n        </div>\n      </Host>\n    );\n  }\n\n  //#endregion METHODS\n}\n\n//  <Host\n//    role=\"checkbox\"\n//    aria-checked={this.checked.toString()}\n//    tabindex=\"0\"\n//    onClick={this.handleCheckboxToggle}\n//    class={{\n//      disabled: this.disabled,\n//    }}\n//  >\n//    <nv-fieldcheckbox\n//      checked={this.checked}\n//      name=\"checkbox-hidden-label\"\n//      label={this.label || this.value}\n//      label-placement=\"after\"\n//      description={this.description}\n//      disabled={this.disabled}\n//      tabindex=\"-1\"\n//    ></nv-fieldcheckbox>\n//  </Host>;\n"]}

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

@@ -1,195 +0,0 @@
-nv-fieldmultiselect {
-  --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-fieldmultiselect[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-fieldmultiselect[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-fieldmultiselect[required]:not([required=false]) label::after {
-  content: "*";
-  color: var(--components-form-text-required);
-  font-weight: 700;
-}
-nv-fieldmultiselect 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-fieldmultiselect nv-popover {
-  width: 100%;
-  display: block;
-}
-nv-fieldmultiselect .input-wrapper-multiselect {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--form-gap-x);
-  align-items: stretch;
-  align-self: stretch;
-  width: 100%;
-}
-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;
-  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-fieldmultiselect .input-container-multiselect:hover {
-  border-color: var(--nv-field-border-hover);
-}
-nv-fieldmultiselect .input-container-multiselect: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-fieldmultiselect .input-container-multiselect:has(input:read-only) {
-  opacity: 0.5;
-  background-color: var(--components-form-field-background-readonly);
-  border-color: var(--nv-field-border-readonly);
-}
-nv-fieldmultiselect .input-container-multiselect:has(input:disabled) {
-  opacity: 0.5;
-  background-color: var(--components-form-field-background-disabled);
-  border-color: var(--nv-field-border-disabled);
-}
-nv-fieldmultiselect .input-container-multiselect input,
-nv-fieldmultiselect .input-container-multiselect 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-fieldmultiselect .input-container-multiselect input:focus,
-nv-fieldmultiselect .input-container-multiselect p.non-filterable-text:focus {
-  outline: none;
-}
-nv-fieldmultiselect .input-container-multiselect input::placeholder,
-nv-fieldmultiselect .input-container-multiselect 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-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-icon.validation {
-  color: var(--nv-field-border-default);
-  position: absolute;
-  right: 50px;
-}
-nv-fieldmultiselect .input-container-multiselect.focus-within, nv-fieldmultiselect .input-container-multiselect:hover {
-  border-color: var(--nv-field-border-focus);
-  box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);
-}
-nv-fieldmultiselect .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-fieldmultiselect .non-filterable-text span {
-  display: inline-block;
-  width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-nv-fieldmultiselect .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-fieldmultiselect .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-fieldmultiselect hr {
-  border: none;
-  border-top: 1px solid var(--dropdown-divider-color, #ccc);
-  margin: 0.5rem 0;
-}
-
-.input-container-multiselect.focus-within,
-.input-container-multiselect: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-fieldmultiselect/nv-fieldmultiselect.docs.js

@@ -1,169 +0,0 @@
-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

@@ -1 +0,0 @@
-{"version":3,"file":"nv-fieldmultiselect.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldmultiselect/nv-fieldmultiselect.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGlC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,sBAAsB,GAA4C;IACtE,SAAS,EAAE,qBAAqB;IAChC,aAAa,EAAE,CAAC,2BAA2B,EAAE,WAAW,EAAE,SAAS,CAAC;IACpE,OAAO,EAAE;QACP;YACE,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,CACR;gBACE,UAAI,IAAI,EAAC,SAAS;oBAChB,iCACE,KAAK,EAAC,QAAQ,EACd,WAAW,EAAC,wBAAwB,EACpC,KAAK,EAAC,OAAO,GACc;oBAC7B,iCACE,KAAK,EAAC,QAAQ,EACd,WAAW,EAAC,wBAAwB,EACpC,KAAK,EAAC,OAAO,GACc;oBAC7B,iCACE,KAAK,EAAC,QAAQ,EACd,WAAW,EAAC,wBAAwB,EACpC,KAAK,EAAC,OAAO,GACc;oBAC7B,iCACE,KAAK,EAAC,eAAe,EACrB,WAAW,EAAC,+BAA+B,EAC3C,QAAQ,QACR,KAAK,EAAC,UAAU,GACW,CAC1B,CACe,CACvB;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAgC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC;YAC9D,IAAI,EAAE;gBACJ,KAAK,EAAE,wBAAwB;gBAC/B,UAAU,EAAE,IAAI;aACjB;YACD,QAAQ,EAAE,CACR;gBACE,UAAI,IAAI,EAAC,SAAS;oBAChB,iCACE,KAAK,EAAC,QAAQ,EACd,WAAW,EAAC,wBAAwB,EACpC,KAAK,EAAC,OAAO,GACc;oBAC7B,iCACE,KAAK,EAAC,QAAQ,EACd,WAAW,EAAC,wBAAwB,EACpC,KAAK,EAAC,OAAO,GACc;oBAC7B,iCACE,KAAK,EAAC,QAAQ,EACd,WAAW,EAAC,wBAAwB,EACpC,KAAK,EAAC,OAAO,GACc;oBAC7B,iCACE,KAAK,EAAC,eAAe,EACrB,WAAW,EAAC,+BAA+B,EAC3C,QAAQ,QACR,KAAK,EAAC,UAAU,GACW,CAC1B,CACe,CACvB;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAgC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC;YAC9D,IAAI,EAAE;gBACJ,KAAK,EAAE,wBAAwB;gBAC/B,UAAU,EAAE,UAAU;aACvB;YACD,QAAQ,EAAE,CACR;gBACE,UAAI,IAAI,EAAC,SAAS;oBAChB,iCACE,KAAK,EAAC,QAAQ,EACd,WAAW,EAAC,wBAAwB,EACpC,KAAK,EAAC,OAAO,GACc;oBAC7B,iCACE,KAAK,EAAC,QAAQ,EACd,WAAW,EAAC,wBAAwB,EACpC,KAAK,EAAC,OAAO,GACc;oBAC7B,iCACE,KAAK,EAAC,QAAQ,EACd,WAAW,EAAC,wBAAwB,EACpC,KAAK,EAAC,OAAO,GACc;oBAC7B,iCACE,KAAK,EAAC,eAAe,EACrB,WAAW,EAAC,+BAA+B,EAC3C,QAAQ,QACR,KAAK,EAAC,UAAU,GACW,CAC1B,CACe,CACvB;SACF;QACD;YACE,IAAI,EAAE,UAAU;YAChB,IAAI,EAAE;gBACJ,KAAK,EAAE,wBAAwB;gBAC/B,UAAU,EAAE,IAAI;aACjB;YACD,QAAQ,EAAE,CACR;gBACE,UAAI,IAAI,EAAC,SAAS;oBAChB,iCACE,KAAK,EAAC,QAAQ,EACd,WAAW,EAAC,wBAAwB,EACpC,KAAK,EAAC,OAAO,GACc;oBAC7B,aAAM;oBACN,iCACE,KAAK,EAAC,QAAQ,EACd,WAAW,EAAC,wBAAwB,EACpC,KAAK,EAAC,OAAO,GACc;oBAC7B,aAAM;oBACN,iCACE,KAAK,EAAC,QAAQ,EACd,WAAW,EAAC,wBAAwB,EACpC,KAAK,EAAC,OAAO,GACc;oBAC7B,aAAM;oBACN,iCACE,KAAK,EAAC,eAAe,EACrB,WAAW,EAAC,+BAA+B,EAC3C,QAAQ,QACR,KAAK,EAAC,UAAU,GACW,CAC1B,CACe,CACvB;SACF;QAED,IAAI;QACJ,qEAAqE;QACrE,YAAY;QACZ,6CAA6C;QAC7C,qDAAqD;QACrD,OAAO;QACP,gBAAgB;QAChB,gDAAgD;QAChD,4BAA4B;QAC5B,qCAAqC;QACrC,2BAA2B;QAC3B,0BAA0B;QAC1B,wCAAwC;QACxC,cAAc;QACd,6BAA6B;QAC7B,OAAO;QACP,KAAK;QACL,IAAI;QACJ,qEAAqE;QACrE,YAAY;QACZ,6CAA6C;QAC7C,sCAAsC;QACtC,OAAO;QACP,gBAAgB;QAChB,gDAAgD;QAChD,4BAA4B;QAC5B,qCAAqC;QACrC,2BAA2B;QAC3B,0BAA0B;QAC1B,wCAAwC;QACxC,cAAc;QACd,6BAA6B;QAC7B,OAAO;QACP,KAAK;QACL,IAAI;QACJ,mEAAmE;QACnE,YAAY;QACZ,sCAAsC;QACtC,uBAAuB;QACvB,OAAO;QACP,gBAAgB;QAChB,gDAAgD;QAChD,4BAA4B;QAC5B,qCAAqC;QACrC,2BAA2B;QAC3B,0BAA0B;QAC1B,wCAAwC;QACxC,qCAAqC;QACrC,2BAA2B;QAC3B,0BAA0B;QAC1B,wCAAwC;QACxC,qCAAqC;QACrC,2BAA2B;QAC3B,0BAA0B;QAC1B,wCAAwC;QACxC,cAAc;QACd,6BAA6B;QAC7B,OAAO;QACP,KAAK;QACL,IAAI;QACJ,kEAAkE;QAClE,YAAY;QACZ,qCAAqC;QACrC,sBAAsB;QACtB,OAAO;QACP,gBAAgB;QAChB,gDAAgD;QAChD,4BAA4B;QAC5B,qCAAqC;QACrC,2BAA2B;QAC3B,0BAA0B;QAC1B,wCAAwC;QACxC,cAAc;QACd,6BAA6B;QAC7B,OAAO;QACP,KAAK;QACL,IAAI;QACJ,+DAA+D;QAC/D,YAAY;QACZ,uCAAuC;QACvC,mBAAmB;QACnB,OAAO;QACP,gBAAgB;QAChB,gDAAgD;QAChD,4BAA4B;QAC5B,qCAAqC;QACrC,2BAA2B;QAC3B,0BAA0B;QAC1B,wCAAwC;QACxC,cAAc;QACd,6BAA6B;QAC7B,OAAO;QACP,KAAK;QACL,IAAI;QACJ,0EAA0E;QAC1E,YAAY;QACZ,mDAAmD;QACnD,mBAAmB;QACnB,4DAA4D;QAC5D,OAAO;QACP,gBAAgB;QAChB,gDAAgD;QAChD,4BAA4B;QAC5B,qCAAqC;QACrC,2BAA2B;QAC3B,0BAA0B;QAC1B,wCAAwC;QACxC,cAAc;QACd,6BAA6B;QAC7B,OAAO;QACP,KAAK;QACL,IAAI;QACJ,0BAA0B;QAC1B,YAAY;QACZ,8CAA8C;QAC9C,OAAO;QACP,gBAAgB;QAChB,gDAAgD;QAChD,4BAA4B;QAC5B,oEAAoE;QACpE,4DAA4D;QAC5D,wCAAwC;QACxC,uCAAuC;QACvC,oEAAoE;QACpE,4DAA4D;QAC5D,wCAAwC;QACxC,uCAAuC;QACvC,cAAc;QACd,6BAA6B;QAC7B,OAAO;QACP,KAAK;KACN;CACF,CAAC;AAEF,eAAe,sBAAsB,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvFieldmultiselectDocs: NovaDocs<Components.NvFieldmultiselect> = {\n  component: 'nv-fieldmultiselect',\n  subcomponents: ['nv-fielddropdownitemcheck', 'nv-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"]}