wabtec-internal-volt-basic-components 1.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"vds-basic-dropdown.js","sourceRoot":"","sources":["../../../src/components/basic-dropdown/vds-basic-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Method, Listen, Element, Event, EventEmitter, State, Watch, AttachInternals, forceUpdate } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { updateFloatingBoxPosition } from '../../utils/floating-engine-utils';\nimport { DropdownItemClickedEvent } from '../dropdown-item/vds-dropdown-item-clicked-event';\nimport { getIconSize } from '../../utils/icon-attr.utils';\nimport { getSelectedLabel, scrollToSelectedValue, selectSelectedItems, setDropdownStyles, toggleContainerDisplay, unselectAllItems, unselectNonSelectedItems, updateContainerWidth } from './vds-basic-dropdown.utils';\n\n@Component({\n  tag: 'vds-basic-dropdown',\n  styleUrl: 'vds-basic-dropdown.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class VdsBasicDropdown {\n  @Element() hostEl: HTMLElement;\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;\n  /** Allows user to define a information icon to the left of the dropdown. */\n  @Prop({ mutable: true }) informativeIcon: string;\n  /** Allows dropdown-item informativeIcon reflect dynamically as informativeIcon of the dropdown. */\n  @Prop({ mutable: true }) dynamicInformativeIcon: boolean = false;\n  /** Sets the dropdown's placeholder. */\n  @Prop({ mutable: true }) placeholder: string;\n  /** Sets the dropdown in disabled state. */\n  @Prop({ mutable: true }) disabled: boolean = false;\n  /** Sets the dropdown in readonly state. */\n  @Prop({ mutable: true }) isReadonly: boolean = false;\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' | 'hover' = 'click';\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  \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  /** Dropdown's status. */\n  @State() dropdownOpened: boolean = false;\n  /** Dropdown's label of the current value. */\n  @State() private valueLabel: string = undefined;\n\n  @AttachInternals() internals: ElementInternals;\n\n  private actionElementRef: HTMLButtonElement;\n  private dropdownContentElementRef: HTMLDivElement;\n  private defaultInformativeIcon: string;\n  private options: HTMLVdsDropdownItemElement[] = [];\n\n  private floatingCleanUp: () => void;\n  observer: any;\n\n  @Watch('dropdownOpened')\n  async emitValue(): Promise<void> {\n    if (this.dropdownOpened) {\n      this.floatingCleanUp = await updateFloatingBoxPosition(this.actionElementRef, this.dropdownContentElementRef, null, 'bottom', this.autoPosition);\n      toggleContainerDisplay(this.dropdownContentElementRef, true);\n      if (this.value) {\n        scrollToSelectedValue(this.dropdownContentElementRef, this.value);\n      }\n      this.opened.emit();\n    } else {\n      toggleContainerDisplay(this.dropdownContentElementRef, false);\n      this.floatingCleanUp();\n      this.closed.emit();\n    }\n  }\n\n  @Watch('value')\n  setValueHandler(): void {\n    unselectNonSelectedItems(this.dropdownContentElementRef, this.value);\n    selectSelectedItems(this.dropdownContentElementRef, this.value);\n    this.defineValue();\n    this.setFormValue();\n    this.valueLabel = getSelectedLabel(this.dropdownContentElementRef, this.value);\n  }\n \n  private setFormValue(): void {\n    if (this.internals && !!this.internals.setFormValue) {\n      this.internals.setFormValue(this.value);\n    }\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 isClickInside = this.hostEl.contains(evt.target as Node);\n    if (!isClickInside) {\n      this.close();\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  /* Open the floating element with click on the trigger element  */\n  private handleClick(evt: Event): void {\n    evt.stopImmediatePropagation();\n    if (this.event === 'click') {\n      const clickedElement = evt.target as HTMLElement;\n      if (clickedElement && !this.disabled && !this.isReadonly) {\n        this.dropdownOpened = !this.dropdownOpened;\n      }\n    }\n  }\n  /* Clear selected value from the Dropdown  */\n  private clearValue(evt: Event): void {\n    evt.stopImmediatePropagation();\n    this.clear();\n    this.close();\n  }\n  /* Listen when Dropdown Item element is clicked to close Dropdown Items window */\n  @Listen('dropdownItemClicked')\n  private handleDropdownItemClicked(event: CustomEvent<DropdownItemClickedEvent>): void {\n    this.handleSelection(event);\n    this.valueChanged.emit(this.value);\n    this.dynamicInformativeIcon ? (this.informativeIcon = event.detail.icon) : null;\n    this.close();\n  }\n\n  /* Checks if the item is already selected and if so clears the selection, otherwise sets the value */\n  private handleSelection(event: CustomEvent<DropdownItemClickedEvent>): void {\n    this.value = event.detail.value;\n    this.valueLabel = event.detail.label;\n  }\n\n  /* Open the floating element(menu) of the Dropdown. */\n  @Method()\n  public async open(): Promise<void> {\n    this.dropdownOpened = true;\n  }\n\n  /* Close the floating element(menu) of the Dropdown. */\n  @Method()\n  public async close(): Promise<void> {\n    this.dropdownOpened = false;\n  }\n  /* Clear the selected value from the Dropdown. */\n  @Method()\n  public async clear(): Promise<void> {\n    this.value = null;\n    this.valueLabel = null;\n    this.valueChanged.emit(this.value);\n    this.dynamicInformativeIcon ? (this.informativeIcon = this.defaultInformativeIcon) : null;\n    unselectAllItems(this.dropdownContentElementRef);\n    this.cleared.emit(true);\n  }\n  /**\n   *  Gets the target that will manage the menu\n   *  returns a promise with the target HTMLElement.\n   */\n  @Method()\n  public async getTarget(): Promise<HTMLElement | null> {\n    return document.querySelector('.vds__dropdown--trigger') as HTMLElement;\n  }\n  /**\n   *  Gets the selected value of the dropdown\n   *  returns a promise with the value.\n   */\n  @Method()\n  public async getValue(): Promise<String | null> {\n    return this.value;\n  }\n\n  /**\n   *  Set the value of the dropdown\n   */\n  @Method()\n  public async setValue(value: string): Promise<void> {\n    this.clear();\n    this.value = value;\n  }\n\n  private handleHover(event: Event): void {\n    const hoveredElement = event.target as HTMLElement;\n    if (this.event === 'hover' && hoveredElement) {\n      this.dropdownOpened = true;\n    }\n  }\n  private handleHoverOut(event: Event): void {\n    const hoveredElement = event.target as HTMLElement;\n    if (this.event === 'hover' && hoveredElement) {\n      this.close();\n    }\n  }\n\n  private setPredefinedItem() {\n    const slotElement = this.dropdownContentElementRef?.querySelector('slot');\n    const items = typeof slotElement?.assignedElements === 'function' && slotElement?.assignedElements();\n    let preselectedItem = Array.from(items || []).filter(item => item.tagName.toLowerCase() === 'vds-dropdown-item' && item.getAttribute('value') === this.value)[0];\n    if (preselectedItem) {\n      preselectedItem.setAttribute('is-selected', 'true');\n      preselectedItem.setAttribute('is-active', 'true');\n      this.valueLabel = preselectedItem.getAttribute('label');\n    }\n  }\n\n  private findAndSetPredefinedItem() {\n    let getPreselectedItem = undefined;\n    const slotElement = this.dropdownContentElementRef?.querySelector('slot');\n    if (slotElement && typeof slotElement.assignedElements === 'function' && slotElement.assignedElements().length > 0) {\n      getPreselectedItem = Array.from(slotElement.assignedElements()).find(\n        item =>\n          item.tagName.toLowerCase() === 'vds-dropdown-item' &&\n          item.hasAttribute('is-selected') &&\n          item.getAttribute('is-selected') === 'true' &&\n          item.hasAttribute('is-active') &&\n          item.getAttribute('is-active') === 'true',\n      );\n    }\n    if (getPreselectedItem !== undefined) {\n      this.value = getPreselectedItem.getAttribute('value');\n      this.valueLabel = getPreselectedItem.getAttribute('label');\n    }\n  }\n\n  private defineValue() {\n    if (this.value && !this.valueLabel) {\n      this.setPredefinedItem();\n    }\n    if (this.value) {\n      this.findAndSetPredefinedItem();\n    }\n  }\n\n  componentWillLoad() {\n    if (this.dynamicInformativeIcon && this.defaultInformativeIcon === undefined) {\n      this.defaultInformativeIcon = this.informativeIcon;\n    }\n  }\n\n  componentDidRender() {\n    this.options = Array.from(this.hostEl.querySelectorAll(\"vds-dropdown-item\"));\n    updateFloatingBoxPosition(this.actionElementRef, this.dropdownContentElementRef, null, 'bottom', false);\n    updateContainerWidth(this.actionElementRef, this.matchWidth, this.dropdownContentElementRef);\n  }\n\n  componentDidLoad() {\n    if (this.event === 'click') {\n      this.actionElementRef.addEventListener('click', this.handleClick.bind(this));\n    } else if (this.event === 'hover') {\n      this.actionElementRef.addEventListener('mouseenter', this.handleHover.bind(this));\n      this.dropdownContentElementRef.addEventListener('mouseleave', this.handleHoverOut.bind(this));\n    }\n    this.actionElementRef?.addEventListener('keydown', this.handleFloatingKeydown.bind(this));\n    this.dropdownContentElementRef?.addEventListener('keydown', this.handleFloatingKeydown.bind(this));\n    if (!this.dropdownContentElementRef) {\n      this.dropdownContentElementRef = this.hostEl.shadowRoot.querySelector(\".vds__dropdown--container\");\n    }\n    if (this.value) {\n      this.setPredefinedItem();\n    } else\n    {\n      this.findAndSetPredefinedItem();\n    }\n    this.setFormValue();\n    this.setListenerForChildren();\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('click', this.handleClickOut.bind(this));\n    if (this.event === 'click') {\n      this.actionElementRef.removeEventListener('click', this.handleClick.bind(this));\n    } else if (this.event === 'hover') {\n      this.actionElementRef.removeEventListener('mouseenter', this.handleHover.bind(this));\n      this.dropdownContentElementRef.removeEventListener('mouseleave', this.handleHoverOut.bind(this));\n      this.actionElementRef.removeEventListener('keydown', this.handleFloatingKeydown.bind(this));\n      this.dropdownContentElementRef.removeEventListener('keydown', this.handleFloatingKeydown.bind(this));\n    }\n\n    this.observer?.disconnect();\n  }\n\n  private setListenerForChildren(): void {\n\t\tconst config = {\n\t\t\tchildList: true,\n\t\t\tsubtree: true\n\t\t};\n\n\t\tthis.observer = new MutationObserver(() => {\n\t\t\tthis.options = Array.from(this.hostEl.querySelectorAll(\"vds-dropdown-item\"));\n\t\t\tforceUpdate(this);\n\t\t});\n\n\t\tthis.observer.observe(this.hostEl, config);\n\t}\n\n  /** Gets the icon color.\n   *\n   * @returns string\n   */\n  private getIconColor() {\n    return this.disabled ? 'color-icon-disabled' : 'color-icon-high';\n  }\n\n  private setDropdownIcon() {\n    return (\n      <span>\n        <vds-icon\n          svgIcon={this.dropdownOpened ? 'chevron-up' : 'chevron-down'}\n          color={this.disabled ? 'color-icon-disabled' : 'color-icon-high'}\n          size={getIconSize(this.size)}\n        ></vds-icon>\n      </span>\n    );\n  }\n  private setInformativeIcon() {\n    if (this.informativeIcon) {\n      return (\n        <span>\n          <vds-icon class={\"vds-dropdown__informative-icon\"} svgIcon={this.informativeIcon} color={this.getIconColor()} size={getIconSize(this.size)}></vds-icon>\n        </span>\n      );\n    } else {\n      return null;\n    }\n  }\n\n  private setLabelValue() {\n    return (\n      <span\n        class={combineClasses('vds__dropdown--value', 'vds__dropdown--value-' + this.size, 'vds__dropdown--value-' + (this.value && this.valueLabel ? 'label' : 'placeholder'))}\n      >\n        {this.value && this.valueLabel ? this.valueLabel : this.placeholder}\n      </span>\n    );\n  }\n\n  private setClearValueButtonIcon() {\n    if (this.value && this.valueLabel && this.showClearButton) {\n      return (\n        <span>\n          <vds-icon-button\n            icon=\"close\"\n            variant=\"secondary\"\n            size={this.size}\n            onClick={\n              !this.disabled && !this.isReadonly\n                ? event => {\n                    this.clearValue(event);\n                  }\n                : null\n            }\n            disabled={this.disabled || this.isReadonly}\n            setAriaLabel=\"clear\"\n          ></vds-icon-button>\n        </span>\n      );\n    } else {\n      return null;\n    }\n  }\n  render() {\n    return (\n      <Host class={combineClasses(this.disabled ? \"vds-basic-dropdown--disabled\" : \"\")} onClicked={event => this.handleDropdownItemClicked(event.detail)}>\n        <div class={\"vds-basic-dropdown__container\"}>\n          <button\n            tabIndex={0}\n            disabled={this.disabled}\n            value={this.value}\n            class={combineClasses('vds__dropdown--trigger', this.disabled ? 'vds__dropdown--trigger-disabled' : '', this.error ? 'vds__dropdown--trigger-error' : '', `vds__dropdown--trigger--size-${this.size}`,)}\n            onClick={(evt: MouseEvent) => {\n              this.handleClick(evt);\n            }}\n            ref={triggerEl => {\n              if (triggerEl) this.actionElementRef = triggerEl;\n            }}\n          >\n            <span class=\"vds__dropdown--left-content\">\n              {this.setInformativeIcon()}\n              {this.setLabelValue()}\n            </span>\n            <span class=\"vds__dropdown--right-actions\">\n              {this.setClearValueButtonIcon()}\n              {this.setDropdownIcon()}\n            </span>\n          </button>\n          {this.backdrop && this.dropdownOpened ? <div class=\"vds-floating-backdrop\" onClick={this.close.bind(this)}></div> : ''}\n          <div\n            class={combineClasses(\n              'vds__dropdown--container',\n              this.maxHeight ? 'has-scroll' : '',\n              this.options.length === 0 ? \"no-shadow\" : \"\"\n            )}\n            ref={dropdownEl => {\n              if (dropdownEl) this.dropdownContentElementRef = dropdownEl;\n            }}\n          >\n            <div class={combineClasses('vds-dropdown__content', this.maxHeight ? 'scrollable' : '')} style={setDropdownStyles(this.maxHeight)}>\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,243 @@
+export default {
+    title: 'VDS/Components/Dropdown/Basic-dropdown',
+    parameters: {
+        docs: {
+            toc: true,
+        },
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?m=auto&node-id=29047-159996"
+        }
+    },
+    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" }
+        },
+        autoPosition: {
+            control: "boolean"
+        }
+    },
+};
+const styles = `
+    .container {
+        position: relative;
+        padding:10px;
+        width: 500px;
+    }
+`;
+const codeTemplate = (args) => {
+    return `
+    <style>${styles}</style>
+    <div class="container">
+        <vds-basic-dropdown
+            class="animal-dropdown"
+            size="${args.size}"
+            value="${args.value}"
+            placeholder="${args.placeholder}"
+            ${args.disabled ? `disabled="${args.disabled}"` : ""}
+            ${args.isReadonly ? `is-readonly="${args.isReadonly}` : ""}
+            ${args.error ? `error="${args.error}"` : ""}
+            is-required="${args.isRequired}"
+            event="${args.event}"
+            show-clear-button="${args.showClearButton}"
+            max-height="${args.maxHeight}"
+            match-width="${args.matchWidth}"
+            auto-position="${args.autoPosition}"
+            backdrop="${args.backdrop}"
+        >
+            <vds-dropdown-group-header size="${args.size}">Carnivores</vds-dropdown-group-header>
+            <vds-dropdown-item value="lion" label="Lion" size="${args.size}"></vds-dropdown-item>
+            <vds-dropdown-item value="tiger" label="Tiger" size="${args.size}"></vds-dropdown-item>
+            <vds-dropdown-item value="leopard" label="Leopard" size="${args.size}"></vds-dropdown-item>
+            <vds-dropdown-item value="cheetah" label="Cheetah" size="${args.size}"></vds-dropdown-item>
+            <vds-dropdown-item value="wolf" label="Wolf" size="${args.size}"></vds-dropdown-item>
+
+            <vds-dropdown-group-header size="${args.size}">Primates</vds-dropdown-group-header>
+            <vds-dropdown-item value="chimpanzee" label="Chimpanzee" size="${args.size}"></vds-dropdown-item>
+            <vds-dropdown-item value="gorilla" label="Gorilla" size="${args.size}"></vds-dropdown-item>
+            <vds-dropdown-item value="orangutan" label="Orangutan" size="${args.size}"></vds-dropdown-item>
+            <vds-dropdown-item value="monkey" label="Monkey" size="${args.size}"></vds-dropdown-item>
+            <vds-dropdown-item value="human" label="Human" size="${args.size}"></vds-dropdown-item>
+
+            <vds-dropdown-group-header size="${args.size}">Rodents</vds-dropdown-group-header>
+            <vds-dropdown-item value="rat" label="Rat" size="${args.size}"></vds-dropdown-item>
+            <vds-dropdown-item value="mouse" label="Mouse" size="${args.size}"></vds-dropdown-item>
+            <vds-dropdown-item value="squirrel" label="Squirrel" size="${args.size}"></vds-dropdown-item>
+            <vds-dropdown-item value="hamster" label="Hamster" size="${args.size}"></vds-dropdown-item>
+            <vds-dropdown-item value="guinea pig" label="Guinea Pig" size="${args.size}"></vds-dropdown-item>
+
+            <vds-dropdown-group-header size="${args.size}">Ungulates</vds-dropdown-group-header>
+            <vds-dropdown-item value="elephant" label="Elephant" size="${args.size}"></vds-dropdown-item>
+            <vds-dropdown-item value="giraffe" label="Giraffe" size="${args.size}"></vds-dropdown-item>
+            <vds-dropdown-item value="zebra" label="Zebra" size="${args.size}"></vds-dropdown-item>
+            <vds-dropdown-item value="horse" label="Horse" size="${args.size}"></vds-dropdown-item>
+            <vds-dropdown-item value="rhino" label="Rhino" size="${args.size}"></vds-dropdown-item>
+
+            <vds-dropdown-group-header size="${args.size}">Cetaceans</vds-dropdown-group-header>
+            <vds-dropdown-item value="whale" label="Whale" size="${args.size}"></vds-dropdown-item>
+            <vds-dropdown-item value="dolphin" label="Dolphin" size="${args.size}"></vds-dropdown-item>
+            <vds-dropdown-item value="porpoise" label="Porpoise" size="${args.size}"></vds-dropdown-item>
+            <vds-dropdown-item value="orca" label="Orca" size="${args.size}"></vds-dropdown-item>
+            <vds-dropdown-item value="manatee" label="Manatee" size="${args.size}"></vds-dropdown-item>
+        </vds-basic-dropdown>
+    </div>
+`;
+};
+export const BasicUsage = codeTemplate.bind({});
+BasicUsage.args = {
+    size: "medium",
+    value: "",
+    placeholder: "Placeholder",
+    disabled: false,
+    isReadonly: false,
+    error: false,
+    isRequired: false,
+    event: "click",
+    showClearButton: true,
+    maxHeight: "200px",
+    matchWidth: true,
+    backdrop: true,
+    autoPosition: false
+};
+const codeTemplateWithIcons = (args) => {
+    return `
+    <style>${styles}</style>
+    <div class="container">
+        <vds-basic-dropdown
+            size="${args.size}"
+            value="${args.value}"
+            placeholder="${args.placeholder}"
+            disabled="${args.disabled}"
+            is-readonly="${args.isReadonly}"
+            error="${args.error}"
+            is-required="${args.isRequired}"
+            informative-icon="${args.informativeIcon}"
+            dynamic-informative-icon="${args.dynamicInformativeIcon}"
+            match-width="${args.matchWidth}"
+            auto-position="${args.autoPosition}"
+        >
+            <vds-dropdown-group-header size="${args.size}">My Group</vds-dropdown-group-header>
+            <vds-dropdown-item informative-icon="add" value="Item 1" label="Item 1" size="${args.size}"></vds-dropdown-item>
+            <vds-dropdown-item informative-icon="administration" value="Item 2 with more content" label="Item 2 with more content" size="${args.size}"></vds-dropdown-item>
+            <vds-dropdown-item informative-icon="user" value="Item 3" label="Item 3" size="${args.size}"></vds-dropdown-item>
+        </vds-basic-dropdown>
+    </div>
+`;
+};
+export const BasicWithIconsUsage = codeTemplateWithIcons.bind({});
+BasicWithIconsUsage.args = {
+    size: "medium",
+    value: "",
+    placeholder: "Placeholder",
+    disabled: false,
+    isReadonly: false,
+    error: false,
+    isRequired: false,
+    informativeIcon: "add",
+    dynamicInformativeIcon: false,
+    matchWidth: true,
+    autoPosition: false
+};
+const codeTemplateWithPredefinedItem = (args) => {
+    return `
+    <style>${styles}</style>
+    <div class="container">
+        <vds-basic-dropdown
+            size="${args.size}"
+            value="${args.value}"
+            placeholder="${args.placeholder}"
+            disabled="${args.disabled}"
+            is-readonly="${args.isReadonly}"
+            error="${args.error}"
+            is-required="${args.isRequired}"
+            event="${args.event}"
+            match-width="${args.matchWidth}"
+            auto-position="${args.autoPosition}"
+        >
+            <vds-dropdown-group-header size="${args.size}">My Group</vds-dropdown-group-header>
+            <vds-dropdown-item value="Item-1" label="Item 1" is-active="true" is-selected="true" size="${args.size}"></vds-dropdown-item>
+            <vds-dropdown-item value="Item-2" label="Item 2 with more content" size="${args.size}"></vds-dropdown-item>
+            <vds-dropdown-item value="Item-3" label="Item 3" size="${args.size}"></vds-dropdown-item>
+        </vds-basic-dropdown>
+    </div>
+    <div class="container">
+        <vds-basic-dropdown
+            size="${args.size}"
+            value="Item-2"
+            placeholder="${args.placeholder}"
+            disabled="${args.disabled}"
+            is-readonly="${args.isReadonly}"
+            error="${args.error}"
+            is-required="${args.isRequired}"
+            event="${args.event}"
+            match-width="${args.matchWidth}"
+            auto-position="${args.autoPosition}"
+        >
+            <vds-dropdown-group-header size="${args.size}">My Group</vds-dropdown-group-header>
+            <vds-dropdown-item value="Item-1" label="Item 1" size="${args.size}"></vds-dropdown-item>
+            <vds-dropdown-item value="Item-2" label="Item 2 with more content" size="${args.size}"></vds-dropdown-item>
+            <vds-dropdown-item value="Item-3" label="Item 3" size="${args.size}"></vds-dropdown-item>
+        </vds-basic-dropdown>
+    </div>
+`;
+};
+export const BasicWithPredefinedItemUsage = codeTemplateWithPredefinedItem.bind({});
+BasicWithPredefinedItemUsage.args = {
+    size: "medium",
+    value: "",
+    placeholder: "Placeholder",
+    disabled: false,
+    isReadonly: false,
+    error: false,
+    isRequired: false,
+    event: "click",
+    matchWidth: true,
+    autoPosition: false
+};
+const codeTemplateWithItemCheckmarkUsage = (args) => {
+    return `
+    <style>${styles}</style>
+    <div class="container">
+        <vds-basic-dropdown
+            size="${args.size}"
+            value="${args.value}"
+            placeholder="${args.placeholder}"
+            disabled="${args.disabled}"
+            is-readonly="${args.isReadonly}"
+            error="${args.error}"
+            is-required="${args.isRequired}"
+            event="${args.event}"
+            match-width="${args.matchWidth}"
+            auto-position="${args.autoPosition}"
+        >
+            <vds-dropdown-group-header size="${args.size}">My Group</vds-dropdown-group-header>
+            <vds-dropdown-item has-checkmark="true" value="Item-1" label="Item 1" is-selected="true" size="${args.size}"></vds-dropdown-item>
+            <vds-dropdown-item has-checkmark="true" value="Item-2" label="Item 2 with more content" size="${args.size}"></vds-dropdown-item>
+            <vds-dropdown-item has-checkmark="true" value="Item-3" label="Item 3" size="${args.size}"></vds-dropdown-item>
+        </vds-basic-dropdown>
+    </div>
+`;
+};
+export const BasicWithItemCheckmarkUsage = codeTemplateWithItemCheckmarkUsage.bind({});
+BasicWithItemCheckmarkUsage.args = {
+    size: "medium",
+    value: "Item-1",
+    placeholder: "Placeholder",
+    disabled: false,
+    isReadonly: false,
+    error: false,
+    isRequired: false,
+    event: "click",
+    matchWidth: true,
+    autoPosition: false
+};
+//# sourceMappingURL=vds-basic-dropdown.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vds-basic-dropdown.stories.js","sourceRoot":"","sources":["../../../src/components/basic-dropdown/vds-basic-dropdown.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["export default {\n    title: 'VDS/Components/Dropdown/Basic-dropdown',\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-159996\"\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                autoPosition: {\n            control: \"boolean\"\n        }\n    },\n};\nconst styles = `\n    .container {\n        position: relative;\n        padding:10px;\n        width: 500px;\n    }\n`;\n\nconst codeTemplate = (args) => {\n    return `\n    <style>${styles}</style>\n    <div class=\"container\">\n        <vds-basic-dropdown\n            class=\"animal-dropdown\"\n            size=\"${args.size}\"\n            value=\"${args.value}\"\n            placeholder=\"${args.placeholder}\"\n            ${args.disabled ? `disabled=\"${args.disabled}\"` : \"\"}\n            ${args.isReadonly ? `is-readonly=\"${args.isReadonly}` : \"\"}\n            ${args.error ? `error=\"${args.error}\"` : \"\"}\n            is-required=\"${args.isRequired}\"\n            event=\"${args.event}\"\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 size=\"${args.size}\">Carnivores</vds-dropdown-group-header>\n            <vds-dropdown-item value=\"lion\" label=\"Lion\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"tiger\" label=\"Tiger\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"leopard\" label=\"Leopard\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"cheetah\" label=\"Cheetah\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"wolf\" label=\"Wolf\" size=\"${args.size}\"></vds-dropdown-item>\n\n            <vds-dropdown-group-header size=\"${args.size}\">Primates</vds-dropdown-group-header>\n            <vds-dropdown-item value=\"chimpanzee\" label=\"Chimpanzee\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"gorilla\" label=\"Gorilla\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"orangutan\" label=\"Orangutan\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"monkey\" label=\"Monkey\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"human\" label=\"Human\" size=\"${args.size}\"></vds-dropdown-item>\n\n            <vds-dropdown-group-header size=\"${args.size}\">Rodents</vds-dropdown-group-header>\n            <vds-dropdown-item value=\"rat\" label=\"Rat\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"mouse\" label=\"Mouse\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"squirrel\" label=\"Squirrel\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"hamster\" label=\"Hamster\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"guinea pig\" label=\"Guinea Pig\" size=\"${args.size}\"></vds-dropdown-item>\n\n            <vds-dropdown-group-header size=\"${args.size}\">Ungulates</vds-dropdown-group-header>\n            <vds-dropdown-item value=\"elephant\" label=\"Elephant\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"giraffe\" label=\"Giraffe\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"zebra\" label=\"Zebra\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"horse\" label=\"Horse\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"rhino\" label=\"Rhino\" size=\"${args.size}\"></vds-dropdown-item>\n\n            <vds-dropdown-group-header size=\"${args.size}\">Cetaceans</vds-dropdown-group-header>\n            <vds-dropdown-item value=\"whale\" label=\"Whale\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"dolphin\" label=\"Dolphin\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"porpoise\" label=\"Porpoise\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"orca\" label=\"Orca\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"manatee\" label=\"Manatee\" size=\"${args.size}\"></vds-dropdown-item>\n        </vds-basic-dropdown>\n    </div>\n`;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n    size: \"medium\",\n    value: \"\",\n    placeholder: \"Placeholder\",\n    disabled: false,\n    isReadonly: false,\n    error: false,\n    isRequired: false,\n    event: \"click\",\n    showClearButton: true,\n    maxHeight: \"200px\",\n    matchWidth: true,\n    backdrop: true,\n    autoPosition: false\n}\n\nconst codeTemplateWithIcons = (args) => {\n    return `\n    <style>${styles}</style>\n    <div class=\"container\">\n        <vds-basic-dropdown\n            size=\"${args.size}\"\n            value=\"${args.value}\"\n            placeholder=\"${args.placeholder}\"\n            disabled=\"${args.disabled}\"\n            is-readonly=\"${args.isReadonly}\"\n            error=\"${args.error}\"\n            is-required=\"${args.isRequired}\"\n            informative-icon=\"${args.informativeIcon}\"\n            dynamic-informative-icon=\"${args.dynamicInformativeIcon}\"\n            match-width=\"${args.matchWidth}\"\n            auto-position=\"${args.autoPosition}\"\n        >\n            <vds-dropdown-group-header size=\"${args.size}\">My Group</vds-dropdown-group-header>\n            <vds-dropdown-item informative-icon=\"add\" value=\"Item 1\" label=\"Item 1\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item informative-icon=\"administration\" value=\"Item 2 with more content\" label=\"Item 2 with more content\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item informative-icon=\"user\" value=\"Item 3\" label=\"Item 3\" size=\"${args.size}\"></vds-dropdown-item>\n        </vds-basic-dropdown>\n    </div>\n`;\n}\n\nexport const BasicWithIconsUsage = codeTemplateWithIcons.bind({});\n\nBasicWithIconsUsage.args = {\n    size: \"medium\",\n    value: \"\",\n    placeholder: \"Placeholder\",\n    disabled: false,\n    isReadonly: false,\n    error: false,\n    isRequired: false,\n    informativeIcon: \"add\",\n    dynamicInformativeIcon: false,\n    matchWidth: true,\n    autoPosition: false\n}\n\nconst codeTemplateWithPredefinedItem = (args) => {\n    return `\n    <style>${styles}</style>\n    <div class=\"container\">\n        <vds-basic-dropdown\n            size=\"${args.size}\"\n            value=\"${args.value}\"\n            placeholder=\"${args.placeholder}\"\n            disabled=\"${args.disabled}\"\n            is-readonly=\"${args.isReadonly}\"\n            error=\"${args.error}\"\n            is-required=\"${args.isRequired}\"\n            event=\"${args.event}\"\n            match-width=\"${args.matchWidth}\"\n            auto-position=\"${args.autoPosition}\"\n        >\n            <vds-dropdown-group-header size=\"${args.size}\">My Group</vds-dropdown-group-header>\n            <vds-dropdown-item value=\"Item-1\" label=\"Item 1\" is-active=\"true\" is-selected=\"true\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"Item-2\" label=\"Item 2 with more content\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"Item-3\" label=\"Item 3\" size=\"${args.size}\"></vds-dropdown-item>\n        </vds-basic-dropdown>\n    </div>\n    <div class=\"container\">\n        <vds-basic-dropdown\n            size=\"${args.size}\"\n            value=\"Item-2\"\n            placeholder=\"${args.placeholder}\"\n            disabled=\"${args.disabled}\"\n            is-readonly=\"${args.isReadonly}\"\n            error=\"${args.error}\"\n            is-required=\"${args.isRequired}\"\n            event=\"${args.event}\"\n            match-width=\"${args.matchWidth}\"\n            auto-position=\"${args.autoPosition}\"\n        >\n            <vds-dropdown-group-header size=\"${args.size}\">My Group</vds-dropdown-group-header>\n            <vds-dropdown-item value=\"Item-1\" label=\"Item 1\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"Item-2\" label=\"Item 2 with more content\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"Item-3\" label=\"Item 3\" size=\"${args.size}\"></vds-dropdown-item>\n        </vds-basic-dropdown>\n    </div>\n`;\n}\n\nexport const BasicWithPredefinedItemUsage = codeTemplateWithPredefinedItem.bind({});\n\nBasicWithPredefinedItemUsage.args = {\n    size: \"medium\",\n    value: \"\",\n    placeholder: \"Placeholder\",\n    disabled: false,\n    isReadonly: false,\n    error: false,\n    isRequired: false,\n    event: \"click\",\n    matchWidth: true,\n    autoPosition: false\n}\n\nconst codeTemplateWithItemCheckmarkUsage = (args) => {\n    return `\n    <style>${styles}</style>\n    <div class=\"container\">\n        <vds-basic-dropdown\n            size=\"${args.size}\"\n            value=\"${args.value}\"\n            placeholder=\"${args.placeholder}\"\n            disabled=\"${args.disabled}\"\n            is-readonly=\"${args.isReadonly}\"\n            error=\"${args.error}\"\n            is-required=\"${args.isRequired}\"\n            event=\"${args.event}\"\n            match-width=\"${args.matchWidth}\"\n            auto-position=\"${args.autoPosition}\"\n        >\n            <vds-dropdown-group-header size=\"${args.size}\">My Group</vds-dropdown-group-header>\n            <vds-dropdown-item has-checkmark=\"true\" value=\"Item-1\" label=\"Item 1\" is-selected=\"true\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item has-checkmark=\"true\" value=\"Item-2\" label=\"Item 2 with more content\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item has-checkmark=\"true\" value=\"Item-3\" label=\"Item 3\" size=\"${args.size}\"></vds-dropdown-item>\n        </vds-basic-dropdown>\n    </div>\n`;\n}\n\nexport const BasicWithItemCheckmarkUsage = codeTemplateWithItemCheckmarkUsage.bind({});\n\nBasicWithItemCheckmarkUsage.args = {\n    size: \"medium\",\n    value: \"Item-1\",\n    placeholder: \"Placeholder\",\n    disabled: false,\n    isReadonly: false,\n    error: false,\n    isRequired: false,\n    event: \"click\",\n    matchWidth: true,\n    autoPosition: false\n}"]}

package/dist/collection/components/basic-dropdown/vds-basic-dropdown.utils.js

@@ -0,0 +1,235 @@
+/**
+ * Toggles the display style of an HTML element.
+ *
+ * @param {HTMLElement} contentBox The HTML element to toggle the display for.
+ * @param {boolean} toggle A boolean value to control the display.
+ *  - True: Sets the display to "block".
+ *  - False: Sets the display to "none".
+ * @returns {void}
+ */
+export const toggleContainerDisplay = (contentBox, toggle) => {
+    if (!contentBox) {
+        return;
+    }
+    contentBox.style.display = toggle ? "block" : "none";
+};
+/**
+ * Unselects non-selected items in a dropdown.
+ *
+ * @param {HTMLElement} dropdownContent The dropdown content element.
+ * @param {string[]|string} value The selected value or an array of selected values.
+ */
+export const unselectNonSelectedItems = (dropdownContent, value) => {
+    if (!dropdownContent) {
+        return;
+    }
+    const container = dropdownContent.querySelector("slot");
+    const dropdownItems = container && typeof (container === null || container === void 0 ? void 0 : container.assignedElements) === "function" ? container.assignedElements() : null;
+    Array.from(dropdownItems || []).forEach(item => {
+        if (typeof value === "string" && item.tagName.toLowerCase() === "vds-dropdown-item" && item.getAttribute("value") !== value) {
+            item.setAttribute("is-selected", "false");
+            item.setAttribute("is-active", "false");
+        }
+        if (Array.isArray(value) && item.tagName.toLowerCase() === "vds-dropdown-item" && value.some(v => v !== item.getAttribute("value"))) {
+            item.setAttribute("is-selected", "false");
+            item.setAttribute("is-active", "false");
+        }
+    });
+};
+/**
+ * Selects selected items in a dropdown.
+ *
+ * @param {HTMLElement} dropdownContent The dropdown content element.
+ * @param {string[]|string} value The selected value or an array of selected values.
+ */
+export const selectSelectedItems = (dropdownContent, value) => {
+    if (!dropdownContent) {
+        return;
+    }
+    try {
+        const container = dropdownContent.querySelector("slot");
+        const dropdownItems = container && typeof (container === null || container === void 0 ? void 0 : container.assignedElements) === "function" ? container.assignedElements() : null;
+        Array.from(dropdownItems || []).forEach(item => {
+            if (typeof value === "string" && item.tagName.toLowerCase() === "vds-dropdown-item" && item.getAttribute("value") === value) {
+                item.setAttribute("is-selected", "true");
+                item.setAttribute("is-active", "true");
+            }
+            if (Array.isArray(value) && item.tagName.toLowerCase() === "vds-dropdown-item" && value.some(v => v === item.getAttribute("value"))) {
+                item.setAttribute("is-selected", "true");
+                item.setAttribute("is-active", "true");
+            }
+        });
+    }
+    catch (error) {
+        console.warn("[selectSelectedItems]", error);
+    }
+};
+/**
+ * Gets selected label in single dropdown using value
+ *
+ * @param {HTMLElement} dropdownContent The dropdown content element.
+ * @param {string[]|string} value The selected value or an array of selected values.
+ */
+export const getSelectedLabel = (dropdownContent, value) => {
+    if (!dropdownContent) {
+        return;
+    }
+    try {
+        let response = "";
+        const container = dropdownContent.querySelector("slot");
+        const dropdownItems = container && typeof (container === null || container === void 0 ? void 0 : container.assignedElements) === "function" ? container.assignedElements() : null;
+        Array.from(dropdownItems || []).forEach(item => {
+            if (typeof value === "string" && item.tagName.toLowerCase() === "vds-dropdown-item" && item.getAttribute("value") === value) {
+                response = (item === null || item === void 0 ? void 0 : item.label) || (item === null || item === void 0 ? void 0 : item.textContent);
+            }
+        });
+        return response;
+    }
+    catch (error) {
+        console.warn("[getSelectedLabel]", error);
+    }
+};
+export const scrollToSelectedValue = (dropdownContent, value) => {
+    if (!dropdownContent) {
+        return;
+    }
+    try {
+        const container = dropdownContent.querySelector("slot");
+        const dropdownItems = container && typeof (container === null || container === void 0 ? void 0 : container.assignedElements) === "function" ? container.assignedElements() : null;
+        let selectedItem = null;
+        Array.from(dropdownItems || []).forEach(item => {
+            if (typeof value === "string" && item.tagName.toLowerCase() === "vds-dropdown-item" && item.getAttribute("value") === value) {
+                selectedItem = item;
+            }
+        });
+        // Scroll to option when is single value
+        if (typeof value === "string" && selectedItem) {
+            selectedItem.scrollIntoView({
+                behavior: "instant",
+                block: "center",
+                inline: "center",
+            });
+        }
+    }
+    catch (error) {
+        console.warn("[ScrollToSelectedValue]", error);
+    }
+};
+/**
+ * Gets thje selected text items in a dropdown.
+ *
+ * @param {HTMLElement} dropdownContent The dropdown content element.
+ * @param {string[]|string} value The selected value or an array of selected values.
+ */
+export const getSelectedItemsText = (dropdownContent, value) => {
+    if (!dropdownContent) {
+        return [];
+    }
+    const container = dropdownContent.querySelector("slot");
+    const dropdownItems = container && typeof (container === null || container === void 0 ? void 0 : container.assignedElements) === "function" ? container.assignedElements() : null;
+    return Array.from(dropdownItems || [])
+        .filter(ditem => ditem.tagName.toLowerCase() === "vds-dropdown-item" && value.some(v => v === ditem.getAttribute("value")))
+        .map(item => item.getAttribute("label"));
+};
+/**
+ * Unselects all items in a dropdown.
+ *
+ * @param {HTMLElement} dropdownContent The dropdown content element.
+ * @param {string[]|string} value The selected value or an array of selected values.
+ */
+export const unselectAllItems = (dropdownContent) => {
+    if (!dropdownContent) {
+        return;
+    }
+    const container = dropdownContent.querySelector("slot");
+    const dropdownItems = container && typeof (container === null || container === void 0 ? void 0 : container.assignedElements) === "function" ? container.assignedElements() : null;
+    Array.from(dropdownItems || []).forEach(item => {
+        item.setAttribute("is-selected", "false");
+        item.setAttribute("is-active", "false");
+    });
+};
+/**
+ * Emits a native "input" event on the specified host element.
+ *
+ * @param {HTMLElement} hostEl The host element to emit the event on.
+ */
+export const emitNativeInputEvent = (hostEl) => {
+    if (!hostEl) {
+        return;
+    }
+    const inputEvent = new InputEvent("input");
+    hostEl.dispatchEvent(inputEvent);
+};
+/**
+ * Checks if a given value is a valid option within a dropdown content element.
+ *
+ * @param {HTMLElement} dropdownContent The dropdown content element.
+ * @param {string} value The value to check for validity.
+ * @returns {boolean} True if the value is a valid option, false otherwise.
+ *
+ * **Validity criteria:**
+ * - The value must match the `value` attribute of at least one `vds-dropdown-item` element within the dropdown content.
+ */
+export const isValidOption = (dropdownContent, value) => {
+    if (!dropdownContent) {
+        return;
+    }
+    const container = dropdownContent.querySelector("slot");
+    const dropdownItems = container && typeof (container === null || container === void 0 ? void 0 : container.assignedElements) === "function" ? container.assignedElements() : null;
+    return Array.from(dropdownItems || []).some(item => item.getAttribute("value") === value);
+};
+/**
+ * Filters a list of options to only include those that are valid within a specified host element.
+ *
+ * @param {HTMLElement} hostEl The host element to validate options against.
+ * @param {string[]} options The list of options to filter.
+ * @returns {string[]} A new array containing only the valid options from the input list.
+ *
+ * **Validity criteria:**
+ * - An option is considered valid if it matches the `value` attribute of at least one `vds-dropdown-item` element within the host element's dropdown content.
+ */
+export const getValidOptions = (hostEl, options) => {
+    const validOptions = [];
+    options.forEach(nv => {
+        if (isValidOption(hostEl, nv)) {
+            validOptions.push(nv);
+        }
+    });
+    return validOptions;
+};
+/**
+ * Sets dropdown styles for JSX.style property
+ *
+ * @param maxHeight string
+ * @returns { [key: string]: string }
+ */
+export const setDropdownStyles = (maxHeight) => {
+    let styles = {};
+    styles = {
+        maxHeight: maxHeight ? maxHeight : undefined,
+    };
+    return styles;
+};
+/**
+ * Updates the container width to match the trigger width when matchWidth is true.
+ *
+ * @param {HTMLElement} dropdownTrigger - The HTML button element that triggers the dropdown.
+ * @param {boolean} matchWidth - A flag indicating whether to match the width of the dropdown content to the trigger.
+ * @param {HTMLDivElement} dropdownContent - The dropdown content element whose width is to be updated.
+ */
+export const updateContainerWidth = (dropdownTrigger, matchWidth, dropdownContent) => {
+    try {
+        if (matchWidth && dropdownTrigger && dropdownContent) {
+            const triggerWidth = dropdownTrigger.offsetWidth;
+            dropdownContent.style.setProperty('--trigger-width', `${triggerWidth}px`);
+            dropdownContent.classList.add('match-width');
+        }
+        else if (dropdownContent) {
+            dropdownContent.classList.remove('match-width');
+        }
+    }
+    catch (error) {
+        console.warn("[updateContainerWidth]", error);
+    }
+};
+//# sourceMappingURL=vds-basic-dropdown.utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vds-basic-dropdown.utils.js","sourceRoot":"","sources":["../../../src/components/basic-dropdown/vds-basic-dropdown.utils.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Toggles the display style of an HTML element.\n * \n * @param {HTMLElement} contentBox The HTML element to toggle the display for.\n * @param {boolean} toggle A boolean value to control the display. \n *  - True: Sets the display to \"block\".\n *  - False: Sets the display to \"none\".\n * @returns {void}\n */\nexport const toggleContainerDisplay = (contentBox: HTMLElement, toggle: boolean): void => {\n    if (!contentBox) {\n        return;\n    }\n\n    contentBox.style.display = toggle ? \"block\" : \"none\";\n}\n\n/**\n * Unselects non-selected items in a dropdown.\n *\n * @param {HTMLElement} dropdownContent The dropdown content element.\n * @param {string[]|string} value The selected value or an array of selected values.\n */\nexport const unselectNonSelectedItems = (dropdownContent: HTMLElement, value: string[] | string) => {\n    if (!dropdownContent) {\n        return;\n    }\n\n    const container = dropdownContent.querySelector(\"slot\");\n    const dropdownItems = container && typeof(container?.assignedElements) === \"function\" ? container.assignedElements() : null;\n    Array.from(dropdownItems || []).forEach(item => {\n        if (typeof value === \"string\" && item.tagName.toLowerCase() === \"vds-dropdown-item\" && item.getAttribute(\"value\") !== value) {\n            item.setAttribute(\"is-selected\", \"false\");\n            item.setAttribute(\"is-active\", \"false\");\n        }\n        if (Array.isArray(value) && item.tagName.toLowerCase() === \"vds-dropdown-item\" && value.some(v => v !== item.getAttribute(\"value\"))) {\n            item.setAttribute(\"is-selected\", \"false\");\n            item.setAttribute(\"is-active\", \"false\");\n        }\n    });\n}\n\n/**\n * Selects selected items in a dropdown.\n *\n * @param {HTMLElement} dropdownContent The dropdown content element.\n * @param {string[]|string} value The selected value or an array of selected values.\n */\nexport const selectSelectedItems = (dropdownContent: HTMLElement, value: string[] | string) => {\n    if (!dropdownContent) {\n        return;\n    }\n    try {\n        const container = dropdownContent.querySelector(\"slot\");\n        const dropdownItems = container && typeof(container?.assignedElements) === \"function\" ? container.assignedElements() : null;\n        Array.from(dropdownItems || []).forEach(item => {\n            if (typeof value === \"string\" && item.tagName.toLowerCase() === \"vds-dropdown-item\" && item.getAttribute(\"value\") === value) {\n                item.setAttribute(\"is-selected\", \"true\");\n                item.setAttribute(\"is-active\", \"true\");\n            }\n            if (Array.isArray(value) && item.tagName.toLowerCase() === \"vds-dropdown-item\" && value.some(v => v === item.getAttribute(\"value\"))) {\n                item.setAttribute(\"is-selected\", \"true\");\n                item.setAttribute(\"is-active\", \"true\");\n            }\n        });\n    } catch (error) {\n        console.warn(\"[selectSelectedItems]\", error);\n    }\n}\n\n/**\n * Gets selected label in single dropdown using value\n *\n * @param {HTMLElement} dropdownContent The dropdown content element.\n * @param {string[]|string} value The selected value or an array of selected values.\n */\nexport const getSelectedLabel = (dropdownContent: HTMLElement, value: string) => {\n    if (!dropdownContent) {\n        return;\n    }\n    try {\n        let response = \"\";\n        const container = dropdownContent.querySelector(\"slot\");\n        const dropdownItems = container && typeof(container?.assignedElements) === \"function\" ? container.assignedElements() : null;\n        Array.from(dropdownItems || []).forEach(item => {\n            if (typeof value === \"string\" && item.tagName.toLowerCase() === \"vds-dropdown-item\" && item.getAttribute(\"value\") === value) {\n                response = (item as HTMLVdsDropdownItemElement)?.label || (item as HTMLVdsDropdownItemElement)?.textContent;\n            }\n        });\n        return response;\n    } catch (error) {\n        console.warn(\"[getSelectedLabel]\", error);\n    }\n}\n\nexport const scrollToSelectedValue = (dropdownContent: HTMLElement, value: string[] | string) => {\n    if (!dropdownContent) {\n        return;\n    }\n    try {\n        const container = dropdownContent.querySelector(\"slot\");\n        const dropdownItems = container && typeof(container?.assignedElements) === \"function\" ? container.assignedElements() : null;\n        let selectedItem: Element | null = null;\n        Array.from(dropdownItems || []).forEach(item => {\n            if (typeof value === \"string\" && item.tagName.toLowerCase() === \"vds-dropdown-item\" && item.getAttribute(\"value\") === value) {\n                selectedItem = item;\n            }\n        });\n    \n        // Scroll to option when is single value\n        if (typeof value === \"string\" && selectedItem) {\n            selectedItem.scrollIntoView({\n                behavior: \"instant\",\n                block: \"center\",\n                inline: \"center\",\n            });\n        }\n    } catch (error) {\n        console.warn(\"[ScrollToSelectedValue]\", error);\n    }\n}\n\n/**\n * Gets thje selected text items in a dropdown.\n *\n * @param {HTMLElement} dropdownContent The dropdown content element.\n * @param {string[]|string} value The selected value or an array of selected values.\n */\nexport const getSelectedItemsText = (dropdownContent: HTMLElement, value: string[]): string[] => {\n    if (!dropdownContent) {\n        return [];\n    }\n\n    const container = dropdownContent.querySelector(\"slot\");\n    const dropdownItems = container && typeof(container?.assignedElements) === \"function\" ? container.assignedElements() : null;\n    return Array.from(dropdownItems || [])\n                .filter(ditem => ditem.tagName.toLowerCase() === \"vds-dropdown-item\" && value.some(v => v === ditem.getAttribute(\"value\")))\n                .map(item => item.getAttribute(\"label\"))\n}\n\n/**\n * Unselects all items in a dropdown.\n *\n * @param {HTMLElement} dropdownContent The dropdown content element.\n * @param {string[]|string} value The selected value or an array of selected values.\n */\nexport const unselectAllItems = (dropdownContent: HTMLElement) => {\n    if (!dropdownContent) {\n        return;\n    }\n\n    const container = dropdownContent.querySelector(\"slot\");\n    const dropdownItems = container && typeof(container?.assignedElements) === \"function\" ? container.assignedElements() : null;\n    Array.from(dropdownItems || []).forEach(item => {\n        item.setAttribute(\"is-selected\", \"false\");\n        item.setAttribute(\"is-active\", \"false\");\n    });\n}\n\n/**\n * Emits a native \"input\" event on the specified host element.\n *\n * @param {HTMLElement} hostEl The host element to emit the event on.\n */\nexport const emitNativeInputEvent = (hostEl: HTMLElement): void => {\n    if (!hostEl) {\n        return;\n    }\n\n    const inputEvent = new InputEvent(\"input\");\n    hostEl.dispatchEvent(inputEvent);\n}\n\n/**\n * Checks if a given value is a valid option within a dropdown content element.\n *\n * @param {HTMLElement} dropdownContent The dropdown content element.\n * @param {string} value The value to check for validity.\n * @returns {boolean} True if the value is a valid option, false otherwise.\n *\n * **Validity criteria:**\n * - The value must match the `value` attribute of at least one `vds-dropdown-item` element within the dropdown content.\n */\nexport const isValidOption = (dropdownContent: HTMLElement, value: string): boolean => {\n    if (!dropdownContent) {\n        return;\n    }\n\n    const container = dropdownContent.querySelector(\"slot\");\n    const dropdownItems = container && typeof(container?.assignedElements) === \"function\" ? container.assignedElements() : null;\n    return Array.from(dropdownItems || []).some(item => item.getAttribute(\"value\") === value);\n}\n\n/**\n * Filters a list of options to only include those that are valid within a specified host element.\n *\n * @param {HTMLElement} hostEl The host element to validate options against.\n * @param {string[]} options The list of options to filter.\n * @returns {string[]} A new array containing only the valid options from the input list.\n *\n * **Validity criteria:**\n * - An option is considered valid if it matches the `value` attribute of at least one `vds-dropdown-item` element within the host element's dropdown content.\n */\nexport const getValidOptions = (hostEl: HTMLElement, options: string[]): string[] => {\n    const validOptions = [];\n    options.forEach(nv => {\n        if (isValidOption(hostEl, nv)) {\n        validOptions.push(nv);\n        }\n    })\n    return validOptions;\n}\n\n/**\n * Sets dropdown styles for JSX.style property\n *\n * @param maxHeight string\n * @returns { [key: string]: string }\n */\nexport const setDropdownStyles = (maxHeight: string): { [key: string]: string } => {\n    let styles = {};\n\n    styles = {\n        maxHeight: maxHeight ? maxHeight : undefined,\n    }\n\n    return styles;\n}\n\n/**\n * Updates the container width to match the trigger width when matchWidth is true.\n *\n * @param {HTMLElement} dropdownTrigger - The HTML button element that triggers the dropdown.\n * @param {boolean} matchWidth - A flag indicating whether to match the width of the dropdown content to the trigger.\n * @param {HTMLDivElement} dropdownContent - The dropdown content element whose width is to be updated.\n */\nexport const updateContainerWidth = (dropdownTrigger: HTMLElement, matchWidth: boolean, dropdownContent: HTMLDivElement) => {\n    try {\n        if (matchWidth && dropdownTrigger && dropdownContent) {\n            const triggerWidth = dropdownTrigger.offsetWidth;\n            dropdownContent.style.setProperty('--trigger-width', `${triggerWidth}px`);\n            dropdownContent.classList.add('match-width');\n        } else if (dropdownContent){\n            dropdownContent.classList.remove('match-width');\n        }\n    } catch (error) {\n        console.warn(\"[updateContainerWidth]\", error);\n    }\n};"]}