wabtec-internal-volt-basic-components 1.0.0

package/dist/collection/components/dropdown-multiselect/vds-basic-dropdown-multiselect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-basic-dropdown-multiselect.js","sourceRoot":"","sources":["../../../src/components/dropdown-multiselect/vds-basic-dropdown-multiselect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Method, Prop, h, Event, EventEmitter, Element } from \"@stencil/core\";\nimport { AttachInternals, HTMLStencilElement, Listen, State, Watch } from \"@stencil/core/internal\";\nimport { combineClasses } from \"../../utils/combine-classes\";\nimport { getIconSize, getIconColor } from \"../../utils/icon-attr.utils\";\nimport { updateFloatingBoxPosition } from \"../../utils/floating-engine-utils\";\nimport { emitNativeInputEvent, getSelectedItemsText, getValidOptions, selectSelectedItems, setDropdownStyles, toggleContainerDisplay, unselectAllItems, unselectNonSelectedItems, updateContainerWidth } from \"../basic-dropdown/vds-basic-dropdown.utils\";\nimport { DropdownItemClickedEvent } from \"../dropdown-item/vds-dropdown-item-clicked-event\";\nimport { arrayIsEqual } from \"../../utils/array-utils\";\n\n@Component({\n  tag: \"vds-basic-dropdown-multiselect\",\n  styleUrl: \"vds-basic-dropdown-multiselect.scss\",\n  shadow: true,\n  formAssociated: true\n})\nexport class VdsBasicDropdownMultiselect {\n  /** Sets the dropdown's size. */\n  @Prop({ mutable: true }) size: \"small\" | \"medium\" | \"large\" = \"medium\";\n  /** Sets the dropdown's value. */\n  @Prop({ mutable: true }) value: string[] | string = [];\n  /** Allows user to define a information icon to the left of the dropdown. */\n  @Prop({ mutable: true }) informativeIcon: string;\n  /** Sets the dropdown's placeholder. */\n  @Prop({ mutable: true }) placeholder: string;\n  /** Sets the dropdown in disabled state. */\n  @Prop({ mutable: true,  reflect: true }) disabled: boolean;\n  /** Sets the dropdown in readonly state. */\n  @Prop({ mutable: true,  reflect: true }) isReadonly: boolean;\n  /** Sets the dropdown in error state. */\n  @Prop({ mutable: true, reflect: true }) error: boolean;\n  /** Sets the dropdown's trigger event. */\n  @Prop({ mutable: true }) event: \"click\" = \"click\";\n  /** Sets the dropdown's value max items selected in plain text. */\n  @Prop() displaySelectionLimit: number;\n  /** Sets displaySelectionLimit text */\n  @Prop() displaySelectionLimitText: string = \"Items selected\";\n  /** Sets the dropdown's clear button visibility. */\n  @Prop({ mutable: true }) showClearButton: boolean = true;\n  /** Set the max height value for the floating container of the items */\n  @Prop({ mutable: true }) maxHeight: string;\n  /** Sets the width value for the floating container of the items to match the dropdown width */\n  @Prop({ mutable: true }) matchWidth: boolean = false;\n  /** Toggles the floating container auto-positioning based on available window space. \n   * False by default as it may cause positioning issues in some situations, use with caution \n   */\n  @Prop({mutable: true}) autoPosition: boolean = false;\n  /** Toggles the overlay element, allowing interaction only with this element when active */\n  @Prop() backdrop: boolean = false;\n\n  /** Emits event when floating element gets opens */\n  @Event() opened: EventEmitter<void>;\n  /** Emits event when floating element gets closes */\n  @Event() closed: EventEmitter<void>;\n  /** Emits event when an item is selected, this event contains the value of the selected item */\n  @Event() valueChanged: EventEmitter<string[]>;\n  /** Emits an event when the clear button is clicked */\n  @Event() cleared: EventEmitter<boolean>;\n\n  @State() isOpened: boolean = false;\n\n  @Element() hostEl: HTMLElement;\n\n  @AttachInternals() internals: ElementInternals;\n\n  private dropdownTrigger: HTMLButtonElement;\n  private dropdownContent: HTMLDivElement;\n  private options: HTMLVdsDropdownItemElement[] = [];\n  private observer: MutationObserver;\n\n  private floatingCleanUp: () => void;\n\n  componentDidLoad(): void {\n    this.setValueHandler(this.value);\n    selectSelectedItems(this.dropdownContent, this.value);\n    this.dropdownTrigger?.addEventListener('keydown', this.handleFloatingKeydown.bind(this));\n    this.dropdownContent?.addEventListener('keydown', this.handleFloatingKeydown.bind(this));\n    this.setListenerForChildren();\n  }\n\n  disconnectedCallback() {\n    this.dropdownTrigger.removeEventListener('keydown', this.handleFloatingKeydown.bind(this));\n    this.dropdownContent.removeEventListener('keydown', this.handleFloatingKeydown.bind(this));\n    window.removeEventListener('click', this.handleClickOut.bind(this));\n    this.observer?.disconnect();\n  }\n  private setListenerForChildren(): void {\n    const config = {\n      childList: true,\n      subtree: true\n    };\n    this.observer = new MutationObserver(() => {\n      this.options = Array.from(this.hostEl.querySelectorAll(\"vds-dropdown-item\"));\n    });\n    this.observer.observe(this.hostEl, config);\n  }\n\n  // Sets the value prop validating whether the newValue is string or array.\n  @Watch(\"value\")\n  setValueHandler(newValue: string[] | string) {\n    if (!newValue) {\n      this.value = [];\n      return;\n    }\n    if (typeof newValue === \"string\") {\n      this.value = getValidOptions(this.dropdownContent, newValue.split(\",\"));\n    }\n    if (Array.isArray(newValue)) {\n      const uniqueValues = [...new Set(newValue)];\n      const selectedOptions = getValidOptions(this.dropdownContent, uniqueValues);\n      this.value = arrayIsEqual(this.value as string[], selectedOptions) ? this.value : selectedOptions;\n    }\n    if (this.internals && !!this.internals.setFormValue) {\n      this.internals.setFormValue((this.value as string[]).join(\",\"));\n    }\n\n    unselectNonSelectedItems(this.dropdownContent, this.value);\n    selectSelectedItems(this.dropdownContent, this.value);\n\n    if (this.value && this.value.length === 0) {\n      unselectAllItems(this.dropdownContent);\n    }\n  }\n\n  componentDidRender() {\n    this.options = Array.from(this.hostEl.querySelectorAll(\"vds-dropdown-item\"));\n    updateFloatingBoxPosition(this.dropdownTrigger, this.dropdownContent, null, 'bottom', false);\n    updateContainerWidth(this.dropdownTrigger, this.matchWidth, this.dropdownContent);\n  }\n\n  @Watch(\"isOpened\")\n  async toggleDropdown(): Promise<void> {\n    if (this.isOpened) {\n      toggleContainerDisplay(this.dropdownContent, true);\n      this.opened.emit();\n      this.floatingCleanUp = await updateFloatingBoxPosition(this.dropdownTrigger, this.dropdownContent, null, \"bottom\", this.autoPosition);\n    } else {\n      toggleContainerDisplay(this.dropdownContent, false);\n      this.closed.emit();\n      this.floatingCleanUp();\n    }\n  }\n\n  /* Open the floating element(menu) of the Dropdown. */\n  @Method()\n  public async open(): Promise<void> {\n    this.isOpened = true;\n  }\n\n  /* Close the floating element(menu) of the Dropdown. */\n  @Method()\n  public async close(): Promise<void> {\n    this.isOpened = false;\n  }\n  \n  /**\n   * Clears the selected options and resets the value of the dropdown.\n   *\n   * @returns {Promise<void>} A promise that resolves when the clearing operation is complete.\n   */\n  @Method()\n  public async clear(): Promise<void> {\n    this.value = [];\n    unselectAllItems(this.dropdownContent);\n    this.cleared.emit(true);\n  }\n\n  /**\n   *  Gets the target that will manage the menu\n   *  returns a promise with the target HTMLElement.\n   * \n   *  @returns {Promise<HTMLElement>} A promise that resolves with the target html element.\n   */\n  @Method()\n  public async getTarget(): Promise<HTMLElement | null> {\n    return this.dropdownTrigger;\n  }\n  /**\n   *  Gets the selected value of the dropdown\n   *  returns a promise with the value.\n   * \n   *  @returns {Promise<string[]>} A promise that resolves with the value as string[].\n   */\n  @Method()\n  public async getValue(): Promise<string[]> {\n    return this.value as string[];\n  }\n  \n  /**\n   * Sets the selected value(s) for the dropdown.\n   *\n   * @param {string[] | string} value The new value or array of values to select.\n   * @returns {Promise<void>} A promise that resolves when the value is set.\n   */\n  @Method()\n  public async setValue(value: string[] | string): Promise<void> {\n    this.setValueHandler(value);\n  }\n\n  /* Close the floating element when click outside */\n  @Listen('click', { target: 'window' })\n  private handleClickOut(evt: MouseEvent): void {\n    evt.stopPropagation();\n    const target = evt.target as HTMLElement;\n    const isClickInside = this.hostEl.contains(target as Node);\n    const isClickInsideParentDropdown = target.nodeName === \"VDS-DROPDOWN-MULTISELECT\" && target.shadowRoot && (evt.target as HTMLElement).shadowRoot.contains(this.hostEl);\n    if (!isClickInside && !isClickInsideParentDropdown) {\n      this.close();\n    }\n  }\n\n  /**\n   * Listen when Dropdown Item element is clicked to close Dropdown Items window, set the value and emit the changes.\n   *\n   * @param {CustomEvent<DropdownItemClickedEvent>} event The dropdown item clicked event.\n   */\n  @Listen(\"dropdownItemClicked\")\n  handleDropdownSelection(event: CustomEvent<DropdownItemClickedEvent>): void {\n    const item = event.target as HTMLVdsDropdownItemElement;\n    const value = event.detail.value;\n    item.isSelected = !item.isSelected;\n    if (item.isSelected) {\n      this.value = [...this.value, value];\n    } else{\n      this.value = (this.value as string[]).filter(v => v !== value)\n    }\n    \n    this.valueChanged.emit(this.value);\n    emitNativeInputEvent(this.hostEl);\n  }\n\n  /* Open the floating element with click on the trigger element  */\n  private handleClick(evt: Event): void {\n    evt.stopImmediatePropagation();\n    if (this.event === \"click\" && !this.disabled && !this.isReadonly) {\n      this.isOpened = !this.isOpened\n    }\n  }\n\n  /* Close the floating element with keydown on the trigger element  */\n  private handleFloatingKeydown(event: KeyboardEvent): void {\n    event.stopImmediatePropagation();\n    if (event.key === 'Escape' || event.key === 'Esc') {\n      this.close();\n    }\n  }\n\n  private clearIconClick(evt: Event): void {\n    evt.stopImmediatePropagation();\n    this.clear();\n    this.close();\n  }\n\n  private renderLabelValue(): HTMLStencilElement {\n    const selectedValue = this.getTextValue();\n    return <span class={combineClasses(\n      \"vds-dropdown-multiselect__label\",\n      `vds-dropdown-multiselect__label--${this.hasValue() ? \"value\" : \"placeholder\"}`)}\n    >{selectedValue}</span>\n  }\n\n  private getTextValue(): string {\n    if (this.displaySelectionLimit > 0 && this.value.length > this.displaySelectionLimit) {\n      return `${this.value.length} ${this.displaySelectionLimitText}`;\n    }\n\n    return this.hasValue() ? getSelectedItemsText(this.dropdownContent, this.value as string[]).join(\", \") : this.placeholder;\n  }\n  \n  private renderInformativeIcon(): HTMLStencilElement {\n    return <vds-icon svgIcon={this.informativeIcon} color={getIconColor(this.disabled)} size={getIconSize(this.size)}></vds-icon>\n  }\n\n  private renderClearIcon(): HTMLStencilElement {\n    return <vds-icon-button\n      icon=\"close\"\n      variant=\"secondary\"\n      size={this.size}\n      onClick={(evt) => {\n        this.clearIconClick(evt);\n      }}\n      disabled={this.disabled}\n      setAriaLabel=\"clear\"\n    ></vds-icon-button>\n  }\n\n  private renderDropdownIcon(): HTMLStencilElement {\n    return <vds-icon\n      svgIcon={this.isOpened ? \"chevron-up\" : \"chevron-down\"}\n      color={getIconColor(this.disabled)}\n      size={getIconSize(this.size)}\n    ></vds-icon>\n  }\n\n  private hasValue(): boolean {\n    return Array.isArray(this.value) && this.value && this.value.length > 0;\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host class={combineClasses(this.disabled ? \"vds-basic-dropdown-multiselect--disabled\" : \"\")} title={this.getTextValue()}>\n        <div class={\"vds-dropdown-multiselect__container\"}>\n          <button\n            disabled={this.disabled}\n            ref={(el): void => {\n              if (el) this.dropdownTrigger = el;\n            }}\n            class={combineClasses(\n              \"vds-dropdown-multiselect___trigger\",\n              `vds-dropdown-multiselect___trigger--size-${this.size}`,\n              this.disabled ? \"vds-dropdown-multiselect___trigger--disabled\" : \"\",\n              this.isReadonly ? \"vds-dropdown-multiselect___trigger--readonly\" : \"\",\n              this.error ? \"vds-dropdown-multiselect___trigger--error\" : \"\" \n            )}\n            onClick={(evt: MouseEvent) => {\n              this.handleClick(evt);\n            }}\n          >\n            {this.informativeIcon && this.renderInformativeIcon()}\n            {this.renderLabelValue()}\n            <div class=\"vds-dropdown-multiselect__trigger-icons\">\n              {this.hasValue() && this.showClearButton && this.renderClearIcon()}\n              {this.renderDropdownIcon()}\n            </div>\n          </button>\n          {this.backdrop && this.isOpened ? <div class=\"vds-floating-backdrop\" onClick={this.close.bind(this)}></div> : ''}\n          <div\n            ref={(el): void => {\n              if (el) this.dropdownContent = el;\n            }}\n            class={combineClasses(\n              \"vds-dropdown-multiselect__content\",\n              this.maxHeight ? \"has-scroll\" : \"\",\n              this.options.length === 0 ? \"no-shadow\" : \"\"\n            )}\n          >\n            <div \n            class={combineClasses(\n              'vds-dropdown-multiselect__content-options', \n              (this.maxHeight ? 'scrollable' : '')\n            )}\n            style={setDropdownStyles(this.maxHeight)}>\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/dropdown-multiselect/vds-basic-dropdown-multiselect.stories.js

@@ -0,0 +1,252 @@
+export default {
+    title: 'VDS/Components/Dropdown/Basic-dropdown-multiselect',
+    parameters: {
+        docs: {
+            toc: true,
+        },
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?m=auto&node-id=29047-161951"
+        }
+    },
+    argTypes: {
+        size: {
+            options: ["small", "medium", "large"],
+            control: { type: "select" }
+        },
+        informativeIcon: {
+            options: ["add", "calendar", "train", "administration"],
+            control: { type: "select" }
+        },
+        event: {
+            options: ["click", "hover"],
+            control: { type: "select" }
+        },
+    },
+};
+const styles = `
+    .container {
+        position: relative;
+        padding:10px;
+        width: 500px;
+        margin: auto;
+    }
+`;
+const codeTemplate = (args) => {
+    return `
+    <style>${styles}</style>
+    <div class="container">
+    <vds-basic-dropdown-multiselect
+        size="${args.size}"
+        value="${args.value}"
+        placeholder="${args.placeholder}"
+        ${args.informativeIcon ? `informative-icon="${args.informativeIcon}"` : ""}
+        ${args.disabled ? `disabled="${args.disabled}"` : ""}
+        ${args.isReadonly ? `is-readonly="${args.isReadonly}` : ""}
+        ${args.error ? `error="${args.error}"` : ""}
+        event="${args.event}"
+        display-selection-limit="${args.displaySelectionLimit}"
+        display-selection-limit-text="${args.displaySelectionLimitText}"
+        show-clear-button="${args.showClearButton}"
+        max-height="${args.maxHeight}"
+        match-width="${args.matchWidth}"
+        auto-position="${args.autoPosition}"
+        backdrop="${args.backdrop}"
+    >
+        <vds-dropdown-group-header class="content-item" size="${args.size}">Fruits</vds-dropdown-group-header>
+        <vds-dropdown-item class="content-item" value="apple" label="Apple" has-checkmark="true" size="${args.size}"></vds-dropdown-item>
+        <vds-dropdown-item class="content-item" value="banana" label="Banana" has-checkmark="true" size="${args.size}"></vds-dropdown-item>
+        <vds-dropdown-item class="content-item" value="orange" label="Orange" has-checkmark="true" size="${args.size}"></vds-dropdown-item>
+        <vds-dropdown-item class="content-item" value="grape" label="Grape" has-checkmark="true" size="${args.size}"></vds-dropdown-item>
+        <vds-dropdown-item class="content-item" value="strawberry" label="Strawberry" has-checkmark="true" size="${args.size}"></vds-dropdown-item>
+
+        <vds-dropdown-group-header size="${args.size}">Meats</vds-dropdown-group-header>
+        <vds-dropdown-item class="content-item" value="chicken" label="Chicken" has-checkmark="true" size="${args.size}"></vds-dropdown-item>
+        <vds-dropdown-item class="content-item" value="beef" label="Beef" has-checkmark="true" size="${args.size}"></vds-dropdown-item>
+        <vds-dropdown-item class="content-item" value="pork" label="Pork" has-checkmark="true" size="${args.size}"></vds-dropdown-item>
+        <vds-dropdown-item class="content-item" value="fish" label="Fish" has-checkmark="true" size="${args.size}"></vds-dropdown-item>
+        <vds-dropdown-item class="content-item" value="lamb" label="Lamb" has-checkmark="true" size="${args.size}"></vds-dropdown-item>
+    </vds-basic-dropdown-multiselect>
+`;
+};
+export const BasicUsage = codeTemplate.bind({});
+BasicUsage.args = {
+    size: "medium",
+    value: "",
+    placeholder: "Select options",
+    informativeIcon: undefined,
+    disabled: false,
+    isReadonly: false,
+    error: false,
+    event: "click",
+    displaySelectionLimit: 0,
+    displaySelectionLimitText: "Items selected",
+    showClearButton: true,
+    maxHeight: "",
+    matchWidth: true,
+    autoPosition: false,
+    backdrop: true
+};
+const codeTemplateDisplayLimit = (args) => {
+    return `
+    <style>${styles}</style>
+    <div class="container">
+    <vds-basic-dropdown-multiselect
+        size="medium"
+        value="apple,banana,orange,kiwi,pear"
+        placeholder="Select a fruit"
+        display-selection-limit="${args.displaySelectionLimit}"
+        display-selection-limit-text="${args.displaySelectionLimitText}"
+        match-width="${args.matchWidth}"
+        auto-position="${args.autoPosition}"
+    >
+        <vds-dropdown-group-header class="content-item">Fruits</vds-dropdown-group-header>
+        <vds-dropdown-item class="content-item" value="apple" label="Apple" has-checkmark="true"></vds-dropdown-item>
+        <vds-dropdown-item class="content-item" value="banana" label="Banana" has-checkmark="true"></vds-dropdown-item>
+        <vds-dropdown-item class="content-item" value="orange" label="Orange" has-checkmark="true"></vds-dropdown-item>
+        <vds-dropdown-item class="content-item" value="grape" label="Grape" has-checkmark="true"></vds-dropdown-item>
+        <vds-dropdown-item class="content-item" value="strawberry" label="Strawberry" has-checkmark="true"></vds-dropdown-item>
+        <vds-dropdown-item class="content-item" value="mango" label="Mango" has-checkmark="true"></vds-dropdown-item>
+        <vds-dropdown-item class="content-item" value="pineapple" label="Pineapple" has-checkmark="true"></vds-dropdown-item>
+        <vds-dropdown-item class="content-item" value="kiwi" label="Kiwi" has-checkmark="true"></vds-dropdown-item>
+        <vds-dropdown-item class="content-item" value="peach" label="Peach" has-checkmark="true"></vds-dropdown-item>
+        <vds-dropdown-item class="content-item" value="pear" label="Pear" has-checkmark="true"></vds-dropdown-item>
+    </vds-basic-dropdown-multiselect>
+`;
+};
+export const DisplayLimit = codeTemplateDisplayLimit.bind({});
+DisplayLimit.args = {
+    displaySelectionLimit: 4,
+    displaySelectionLimitText: "Items selected",
+    matchWidth: true,
+    autoPosition: false
+};
+const codeTemplateMaxContentLimit = (args) => {
+    const meals = [
+        {
+            name: "Fruits",
+            options: [
+                { label: "Banana", value: "banana" },
+                { label: "Apple", value: "apple" },
+                { label: "Orange", value: "orange" },
+                { label: "Mango", value: "mango" },
+                { label: "Pineapple", value: "pineapple" },
+                { label: "Grapes", value: "grapes" },
+                { label: "Strawberry", value: "strawberry" },
+                { label: "Blueberry", value: "blueberry" },
+                { label: "Kiwi", value: "kiwi" },
+                { label: "Watermelon", value: "watermelon" }
+            ]
+        },
+        {
+            name: "Meats",
+            options: [
+                { label: "Chicken", value: "chicken" },
+                { label: "Beef", value: "beef" },
+                { label: "Pork", value: "pork" },
+                { label: "Lamb", value: "lamb" },
+                { label: "Salmon", value: "salmon" },
+                { label: "Tuna", value: "tuna" },
+                { label: "Shrimp", value: "shrimp" },
+                { label: "Crab", value: "crab" },
+                { label: "Lobster", value: "lobster" },
+                { label: "Sausage", value: "sausage" }
+            ]
+        },
+        {
+            name: "Desserts",
+            options: [
+                { label: "Ice Cream", value: "ice_cream" },
+                { label: "Cake", value: "cake" },
+                { label: "Cookie", value: "cookie" },
+                { label: "Pie", value: "pie" },
+                { label: "Brownie", value: "brownie" },
+                { label: "Chocolate", value: "chocolate" },
+                { label: "Candy", value: "candy" },
+                { label: "Donut", value: "donut" },
+                { label: "Muffin", value: "muffin" },
+                { label: "Tiramisu", value: "tiramisu" }
+            ]
+        }
+    ];
+    let htmlItems = "";
+    for (let item of meals) {
+        htmlItems += `<vds-dropdown-group-header class="content-item" size="${args.size}">${item.name}</vds-dropdown-group-header>`;
+        for (let subitem of item.options) {
+            htmlItems += `<vds-dropdown-item class="content-item" value="${subitem.value}" label="${subitem.label}" size="${args.size}" has-checkmark="false"></vds-dropdown-item>`;
+        }
+    }
+    return `
+    <style>${styles}</style>
+    <div class="container">
+    <vds-basic-dropdown-multiselect
+        size="${args.size}"
+        event="${args.event}"
+        ${args.informativeIcon ? `informative-icon="${args.informativeIcon}"` : ""}
+        placeholder="Select a meal"
+        match-width="${args.matchWidth}"
+        max-height="${args.maxHeight}"
+        auto-position="${args.autoPosition}"
+    >
+        ${htmlItems}
+    </vds-basic-dropdown-multiselect>
+`;
+};
+export const MaxContent = codeTemplateMaxContentLimit.bind({});
+MaxContent.args = {
+    size: "medium",
+    event: "click",
+    informativeIcon: undefined,
+    matchWidth: true,
+    maxHeight: "300px",
+    autoPosition: false
+};
+const codeCheckboxTemplate = (args) => {
+    return `
+    <style>${styles}</style>
+    <div class="container">
+    <vds-basic-dropdown-multiselect
+        size="${args.size}"
+        value="${args.value}"
+        placeholder="${args.placeholder}"
+        ${args.informativeIcon ? `informative-icon="${args.informativeIcon}"` : ""}
+        disabled="${args.disabled}"
+        is-readonly="${args.isReadonly}"
+        error="${args.error}"
+        event="${args.event}"
+        display-selection-limit="${args.displaySelectionLimit}"
+        display-selection-limit-text="${args.displaySelectionLimitText}"
+        show-clear-button="${args.showClearButton}"
+        match-width="${args.matchWidth}"
+        auto-position="${args.autoPosition}"
+    >
+        <vds-dropdown-group-header class="content-item" size="${args.size}">Weekdays</vds-dropdown-group-header>
+        <vds-dropdown-item class="content-item" value="monday" label="Monday" size="${args.size}" has-checkmark="true" checkmark-variant="checkbox"></vds-dropdown-item>
+        <vds-dropdown-item class="content-item" value="tuesday" label="Tuesday" size="${args.size}" has-checkmark="true" checkmark-variant="checkbox"></vds-dropdown-item>
+        <vds-dropdown-item class="content-item" value="wednesday" label="Wednesday" size="${args.size}" has-checkmark="true" checkmark-variant="checkbox"></vds-dropdown-item>
+        <vds-dropdown-item class="content-item" value="thursday" label="Thursday" size="${args.size}" has-checkmark="true" checkmark-variant="checkbox"></vds-dropdown-item>
+        <vds-dropdown-item class="content-item" value="friday" label="Friday" size="${args.size}" has-checkmark="true" checkmark-variant="checkbox"></vds-dropdown-item>
+
+        <vds-dropdown-group-header class="content-item" size="${args.size}">Weekends</vds-dropdown-group-header>
+        <vds-dropdown-item class="content-item" value="saturday" label="Saturday" size="${args.size}" has-checkmark="true" checkmark-variant="checkbox"></vds-dropdown-item>
+        <vds-dropdown-item class="content-item" value="sunday" label="Sunday" size="${args.size}" has-checkmark="true" checkmark-variant="checkbox"></vds-dropdown-item>
+    </vds-basic-dropdown-multiselect>
+`;
+};
+export const CheckboxUsage = codeCheckboxTemplate.bind({});
+CheckboxUsage.args = {
+    size: "medium",
+    value: "",
+    placeholder: "Select your favorite days of the week",
+    informativeIcon: undefined,
+    disabled: false,
+    isReadonly: false,
+    error: false,
+    event: "click",
+    displaySelectionLimit: 3,
+    displaySelectionLimitText: "days selected",
+    showClearButton: true,
+    matchWidth: true,
+    autoPosition: false
+};
+//# sourceMappingURL=vds-basic-dropdown-multiselect.stories.js.map

package/dist/collection/components/dropdown-multiselect/vds-basic-dropdown-multiselect.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-basic-dropdown-multiselect.stories.js","sourceRoot":"","sources":["../../../src/components/dropdown-multiselect/vds-basic-dropdown-multiselect.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["export default {\n    title: 'VDS/Components/Dropdown/Basic-dropdown-multiselect',\n    parameters: {\n        docs: {\n          toc: true,\n        },\n        design: {\n            type: \"figma\",\n            url: \"https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?m=auto&node-id=29047-161951\"\n        }\n    },\n    argTypes: {\n        size: {\n            options: [\"small\", \"medium\", \"large\"],\n            control: { type: \"select\" }\n        },\n        informativeIcon: {\n            options: [\"add\", \"calendar\",\"train\",\"administration\"],\n            control: { type: \"select\" }\n        },\n        event: {\n            options: [\"click\", \"hover\"],\n            control: { type: \"select\" }\n        },\n    },\n};\nconst styles = `\n    .container {\n        position: relative;\n        padding:10px;\n        width: 500px;\n        margin: auto;\n    }\n`;\n\nconst codeTemplate = (args) => {\n    return `\n    <style>${styles}</style>\n    <div class=\"container\">\n    <vds-basic-dropdown-multiselect\n        size=\"${args.size}\"\n        value=\"${args.value}\"\n        placeholder=\"${args.placeholder}\"\n        ${args.informativeIcon ? `informative-icon=\"${args.informativeIcon}\"`: \"\"}\n        ${args.disabled ? `disabled=\"${args.disabled}\"` : \"\"}\n        ${args.isReadonly ? `is-readonly=\"${args.isReadonly}` : \"\"}\n        ${args.error ? `error=\"${args.error}\"` : \"\"}\n        event=\"${args.event}\"\n        display-selection-limit=\"${args.displaySelectionLimit}\"\n        display-selection-limit-text=\"${args.displaySelectionLimitText}\"\n        show-clear-button=\"${args.showClearButton}\"\n        max-height=\"${args.maxHeight}\"\n        match-width=\"${args.matchWidth}\"\n        auto-position=\"${args.autoPosition}\"\n        backdrop=\"${args.backdrop}\"\n    >\n        <vds-dropdown-group-header class=\"content-item\" size=\"${args.size}\">Fruits</vds-dropdown-group-header>\n        <vds-dropdown-item class=\"content-item\" value=\"apple\" label=\"Apple\" has-checkmark=\"true\" size=\"${args.size}\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"banana\" label=\"Banana\" has-checkmark=\"true\" size=\"${args.size}\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"orange\" label=\"Orange\" has-checkmark=\"true\" size=\"${args.size}\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"grape\" label=\"Grape\" has-checkmark=\"true\" size=\"${args.size}\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"strawberry\" label=\"Strawberry\" has-checkmark=\"true\" size=\"${args.size}\"></vds-dropdown-item>\n\n        <vds-dropdown-group-header size=\"${args.size}\">Meats</vds-dropdown-group-header>\n        <vds-dropdown-item class=\"content-item\" value=\"chicken\" label=\"Chicken\" has-checkmark=\"true\" size=\"${args.size}\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"beef\" label=\"Beef\" has-checkmark=\"true\" size=\"${args.size}\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"pork\" label=\"Pork\" has-checkmark=\"true\" size=\"${args.size}\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"fish\" label=\"Fish\" has-checkmark=\"true\" size=\"${args.size}\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"lamb\" label=\"Lamb\" has-checkmark=\"true\" size=\"${args.size}\"></vds-dropdown-item>\n    </vds-basic-dropdown-multiselect>\n`;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n    size: \"medium\",\n    value: \"\",\n    placeholder: \"Select options\",\n    informativeIcon: undefined,\n    disabled: false,\n    isReadonly: false,\n    error: false,\n    event: \"click\",\n    displaySelectionLimit: 0,\n    displaySelectionLimitText: \"Items selected\",\n    showClearButton: true,\n    maxHeight: \"\",\n    matchWidth: true,\n    autoPosition: false,\n    backdrop: true\n}\n\nconst codeTemplateDisplayLimit = (args) => {\n    return `\n    <style>${styles}</style>\n    <div class=\"container\">\n    <vds-basic-dropdown-multiselect\n        size=\"medium\"\n        value=\"apple,banana,orange,kiwi,pear\"\n        placeholder=\"Select a fruit\"\n        display-selection-limit=\"${args.displaySelectionLimit}\"\n        display-selection-limit-text=\"${args.displaySelectionLimitText}\"\n        match-width=\"${args.matchWidth}\"\n        auto-position=\"${args.autoPosition}\"\n    >\n        <vds-dropdown-group-header class=\"content-item\">Fruits</vds-dropdown-group-header>\n        <vds-dropdown-item class=\"content-item\" value=\"apple\" label=\"Apple\" has-checkmark=\"true\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"banana\" label=\"Banana\" has-checkmark=\"true\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"orange\" label=\"Orange\" has-checkmark=\"true\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"grape\" label=\"Grape\" has-checkmark=\"true\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"strawberry\" label=\"Strawberry\" has-checkmark=\"true\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"mango\" label=\"Mango\" has-checkmark=\"true\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"pineapple\" label=\"Pineapple\" has-checkmark=\"true\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"kiwi\" label=\"Kiwi\" has-checkmark=\"true\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"peach\" label=\"Peach\" has-checkmark=\"true\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"pear\" label=\"Pear\" has-checkmark=\"true\"></vds-dropdown-item>\n    </vds-basic-dropdown-multiselect>\n`;\n}\n\nexport const DisplayLimit = codeTemplateDisplayLimit.bind({});\n\nDisplayLimit.args = {\n    displaySelectionLimit: 4,\n    displaySelectionLimitText: \"Items selected\",\n    matchWidth: true,\n    autoPosition: false\n}\n\nconst codeTemplateMaxContentLimit = (args) => {\n    const meals = [\n        {\n          name: \"Fruits\",\n          options: [\n            { label: \"Banana\", value: \"banana\" },\n            { label: \"Apple\", value: \"apple\" },\n            { label: \"Orange\", value: \"orange\" },\n            { label: \"Mango\", value: \"mango\" },\n            { label: \"Pineapple\", value: \"pineapple\" },\n            { label: \"Grapes\", value: \"grapes\" },\n            { label: \"Strawberry\", value: \"strawberry\" },\n            { label: \"Blueberry\", value: \"blueberry\" },\n            { label: \"Kiwi\", value: \"kiwi\" },\n            { label: \"Watermelon\", value: \"watermelon\" }\n          ]\n        },\n        {\n          name: \"Meats\",\n          options: [\n            { label: \"Chicken\", value: \"chicken\" },\n            { label: \"Beef\", value: \"beef\" },\n            { label: \"Pork\", value: \"pork\" },\n            { label: \"Lamb\", value: \"lamb\" },\n            { label: \"Salmon\", value: \"salmon\" },\n            { label: \"Tuna\", value: \"tuna\" },\n            { label: \"Shrimp\", value: \"shrimp\" },\n            { label: \"Crab\", value: \"crab\" },\n            { label: \"Lobster\", value: \"lobster\" },\n            { label: \"Sausage\", value: \"sausage\" }\n          ]\n        },\n        {\n          name: \"Desserts\",\n          options: [\n            { label: \"Ice Cream\", value: \"ice_cream\" },\n            { label: \"Cake\", value: \"cake\" },\n            { label: \"Cookie\", value: \"cookie\" },\n            { label: \"Pie\", value: \"pie\" },\n            { label: \"Brownie\", value: \"brownie\" },\n            { label: \"Chocolate\", value: \"chocolate\" },\n            { label: \"Candy\", value: \"candy\" },\n            { label: \"Donut\", value: \"donut\" },\n            { label: \"Muffin\", value: \"muffin\" },\n            { label: \"Tiramisu\", value: \"tiramisu\" }\n          ]\n        }\n    ];\n\n    let htmlItems = \"\";\n\n    for(let item of meals) {\n        htmlItems += `<vds-dropdown-group-header class=\"content-item\" size=\"${args.size}\">${item.name}</vds-dropdown-group-header>`\n        for(let subitem of item.options) {\n            htmlItems += `<vds-dropdown-item class=\"content-item\" value=\"${subitem.value}\" label=\"${subitem.label}\" size=\"${args.size}\" has-checkmark=\"false\"></vds-dropdown-item>`\n        }\n    }\n\n    return `\n    <style>${styles}</style>\n    <div class=\"container\">\n    <vds-basic-dropdown-multiselect\n        size=\"${args.size}\"\n        event=\"${args.event}\"\n        ${args.informativeIcon ? `informative-icon=\"${args.informativeIcon}\"`: \"\"}\n        placeholder=\"Select a meal\"\n        match-width=\"${args.matchWidth}\"\n        max-height=\"${args.maxHeight}\"\n        auto-position=\"${args.autoPosition}\"\n    >\n        ${htmlItems}\n    </vds-basic-dropdown-multiselect>\n`;\n}\n\nexport const MaxContent = codeTemplateMaxContentLimit.bind({});\n\nMaxContent.args = {\n    size: \"medium\",\n    event: \"click\",\n    informativeIcon: undefined,\n    matchWidth: true,\n    maxHeight: \"300px\",\n    autoPosition: false\n}\n\n\nconst codeCheckboxTemplate = (args) => {\n    return `\n    <style>${styles}</style>\n    <div class=\"container\">\n    <vds-basic-dropdown-multiselect\n        size=\"${args.size}\"\n        value=\"${args.value}\"\n        placeholder=\"${args.placeholder}\"\n        ${args.informativeIcon ? `informative-icon=\"${args.informativeIcon}\"`: \"\"}\n        disabled=\"${args.disabled}\"\n        is-readonly=\"${args.isReadonly}\"\n        error=\"${args.error}\"\n        event=\"${args.event}\"\n        display-selection-limit=\"${args.displaySelectionLimit}\"\n        display-selection-limit-text=\"${args.displaySelectionLimitText}\"\n        show-clear-button=\"${args.showClearButton}\"\n        match-width=\"${args.matchWidth}\"\n        auto-position=\"${args.autoPosition}\"\n    >\n        <vds-dropdown-group-header class=\"content-item\" size=\"${args.size}\">Weekdays</vds-dropdown-group-header>\n        <vds-dropdown-item class=\"content-item\" value=\"monday\" label=\"Monday\" size=\"${args.size}\" has-checkmark=\"true\" checkmark-variant=\"checkbox\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"tuesday\" label=\"Tuesday\" size=\"${args.size}\" has-checkmark=\"true\" checkmark-variant=\"checkbox\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"wednesday\" label=\"Wednesday\" size=\"${args.size}\" has-checkmark=\"true\" checkmark-variant=\"checkbox\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"thursday\" label=\"Thursday\" size=\"${args.size}\" has-checkmark=\"true\" checkmark-variant=\"checkbox\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"friday\" label=\"Friday\" size=\"${args.size}\" has-checkmark=\"true\" checkmark-variant=\"checkbox\"></vds-dropdown-item>\n\n        <vds-dropdown-group-header class=\"content-item\" size=\"${args.size}\">Weekends</vds-dropdown-group-header>\n        <vds-dropdown-item class=\"content-item\" value=\"saturday\" label=\"Saturday\" size=\"${args.size}\" has-checkmark=\"true\" checkmark-variant=\"checkbox\"></vds-dropdown-item>\n        <vds-dropdown-item class=\"content-item\" value=\"sunday\" label=\"Sunday\" size=\"${args.size}\" has-checkmark=\"true\" checkmark-variant=\"checkbox\"></vds-dropdown-item>\n    </vds-basic-dropdown-multiselect>\n`;\n}\n\nexport const CheckboxUsage = codeCheckboxTemplate.bind({});\n\nCheckboxUsage.args = {\n    size: \"medium\",\n    value: \"\",\n    placeholder: \"Select your favorite days of the week\",\n    informativeIcon: undefined,\n    disabled: false,\n    isReadonly: false,\n    error: false,\n    event: \"click\",\n    displaySelectionLimit: 3,\n    displaySelectionLimitText: \"days selected\",\n    showClearButton: true,\n    matchWidth: true,\n    autoPosition: false\n}"]}