wabtec-internal-volt-basic-components 1.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"vds-basic-autocomplete.js","sourceRoot":"","sources":["../../../src/components/autocomplete/vds-basic-autocomplete.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, Watch, h, Event, EventEmitter, Method, State, Element } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { toggleContainerDisplay, updateContainerWidth } from '../basic-dropdown/vds-basic-dropdown.utils';\nimport { updateFloatingBoxPosition } from '../../utils/floating-engine-utils';\nimport { HTMLStencilElement, Listen } from '@stencil/core/internal';\nimport { cloneAttributes } from '../../utils/clone-attributes';\nimport { findOptionByExactValue, findOptionByValue, getFilteredOptions } from './vds-basic-autocomplete.utils';\nimport { getIconSize } from '../../utils/icon-attr.utils';\n\n@Component({\n  tag: 'vds-basic-autocomplete',\n  styleUrl: 'vds-basic-autocomplete.scss',\n  shadow: true,\n})\nexport class VdsBasicAutocomplete {\n\n  /** \n   * Sets the internal input size.\n   * If multiple property is true, This will only set the basic-input text value.\n   * If multiple property is false and the value prop matches with an option, the option will be selected,\n   * Otherwise text will be set in the basic-input.\n   */\n  @Prop({ mutable: true }) size: \"small\" | \"medium\" | \"large\" = \"medium\";\n  /** Sets the internal input value */\n  @Prop({ mutable: true, reflect: true }) value: string;\n  /** Sets the selected options when multiple is activated */\n  @Prop({ mutable: true, reflect: true }) multipleValues: Array<string> = [];\n  /** Sets the selected dropdown value when dropdown is activated */\n  @Prop() selectedDropdownValue = \"\";\n  /** Sets the internal input placeholder. */\n  @Prop({ mutable: true, reflect: true }) placeholder: string;\n  /** Sets the internal input in disabled state. */\n  @Prop({ mutable: true, reflect: true }) disabled: boolean;\n  /** Sets the internal input in readonly state. */\n  @Prop({ mutable: true, reflect: true }) isReadonly: boolean;\n  /** Sets the internal input in error state. */\n  @Prop({ mutable: true, reflect: true }) error: boolean;\n  /** Toggles the required sign in the internal input */\n  @Prop({ mutable: true, reflect: true }) isRequired: boolean = false;\n  /** Allows user to define a information icon inside the input at its left . */\n  @Prop() informativeIcon: string;\n  /** Sets character formatting for user input. Useful for adding a mask to the input. */\n  @Prop({ mutable: true }) formatter: Function;\n  /** Sets custom allowed styles to input (text-align, text-transform, unicode-bidi, direction) */\n  @Prop({ mutable: true }) allowedStyles: { [key: string]: string }[] = [];\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 items list width */\n  @Prop({ mutable: true }) matchWidth: boolean = true;\n  /** Debounce time for key inputs before the search */\n  @Prop() debounce: number;\n  /** Allows user to define a search icon inside the input at its right (zoom by default) . */\n  @Prop() actionIcon: string = \"zoom\";\n  /** Sets the autocomplete clear button visibility. */\n  @Prop() showClearButton: boolean = true;\n  /** \n   * Shows a dropdown chevron arrow that flips up/down when change state open/close.\n   * Also enables the selectedDropdownValue prop to be able to select an option from dropdown\n   * When multiple is true, this prop will be set to false.\n   */\n  @Prop() dropdown: boolean = false;\n  /** Sets the autocomplete dropdown chevron icon visibility. */\n  @Prop() showDropdownIcon: boolean = true;\n  /** Enables a message when there's no match options. */\n  @Prop() showEmptyMessage: boolean = false;\n  /** Allow to set the text message in the 'emptyMessage' state. */\n  @Prop() emptyMessage: string = \"No options\";\n  /** \n   * Allow multiple values to be selected.\n   * Also enables the multipleValues prop to be able to select multiple options\n   * When multiple is true, dropdown prop will be set to false.\n   * When multiple is true, valueChanged will emit an array of strings\n   */\n  @Prop() multiple: boolean = false;\n  /** \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  /** \n   * Clear selection and input on clicking the close button.\n   * Only works when multiple is true.\n   */\n  @Prop() clearSelection: 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(s) */\n  @Event() valueChanged: EventEmitter<string | string[]>;\n  /** Emits an event when the clear button is clicked */\n  @Event() cleared: EventEmitter<void>;\n  /** Emits an event when the user click the actionIcon (the magnifying glass) */\n  @Event() actionIconClick: EventEmitter<void>;\n  /** Emits updated inputed value from the vds-basic-input similar to the input event */\n\t@Event() changeInput: EventEmitter<string>;\n\n  @Element() hostEl: HTMLElement;\n\n  autocompleteContent: HTMLDivElement;\n  basicInput: HTMLVdsBasicInputElement;\n  \n  floatingCleanUp: () => void = () => {};\n  @State() isOpened: boolean = false;\n  @State() multiselectValues: Array<string>;\n  options: HTMLVdsAutocompleteItemElement[] = [];\n  autocompleteItemEmptyOption: HTMLVdsAutocompleteItemElement;\n  debounceTimeTracker: NodeJS.Timeout = null;\n  showUnfilteredOptions: boolean = false;\n  private updateContainerWidth = updateContainerWidth;\n  validateDropdownValue: boolean;\n\n  componentWillLoad(): void {\n    this.multiselectValues = this.multipleValues;\n    this.validateDropdownValue = true;\n  }\n\n  componentWillRender(): void {\n    if (this.multiple) {\n      this.dropdown = false;\n    }\n  }\n  \n  componentDidLoad(): void {\n    this.options = Array.from(this.hostEl.querySelectorAll(\"vds-autocomplete-item\"));\n    this.setPreselection();\n  }\n\n  componentDidRender(): void {\n    this.options = Array.from(this.hostEl.querySelectorAll(\"vds-autocomplete-item\"));\n    updateFloatingBoxPosition(this.basicInput, this.autocompleteContent, null, 'bottom', false);\n    this.updateContainerWidth(this.basicInput, this.matchWidth, this.autocompleteContent);\n    this.setPreselection();\n  }\n\n  @Watch(\"multiselectValues\")\n  setMulitpleValueHandler() {\n    this.valueChanged.emit(this.multiselectValues);\n  }\n\n  @Watch(\"disabled\")\n  setDisabledState() {\n    this.close();\n  }\n\n  @Watch(\"selectedDropdownValue\")\n  setDropdownValueValidation() {\n    this.validateDropdownValue = true;\n  }\n\n  @Watch(\"isOpened\")\n  async toggleAutocomplete(): Promise<void> {\n    if (this.isOpened) {\n      toggleContainerDisplay(this.autocompleteContent, true);\n      this.opened.emit();\n      this.floatingCleanUp = await updateFloatingBoxPosition(this.basicInput, this.autocompleteContent, null, \"bottom\", this.autoPosition);\n    } else {\n      toggleContainerDisplay(this.autocompleteContent, false);\n      this.closed.emit();\n      this.floatingCleanUp();\n    }\n  }\n\n  /* Open the floating element(menu) of the autocomplete. */\n  @Method()\n  public async open(): Promise<void> {\n    if (!this.isReadonly && !this.disabled) {\n      setTimeout(() => {\n        this.isOpened = true;\n      });\n    }\n  }\n\n  /* Close the floating element(menu) of the autocomplete. */\n  @Method()\n  public async close(): Promise<void> {\n    this.isOpened = false;\n  }\n\n  /* Sets focus to the input element */\n  @Method()\n  public async setFocus(): Promise<void> {\n    this.basicInput.setFocus();\n    setTimeout(() => {\n      this.open();\n    });\n  }\n\n  /**\n   * Sets the autocomplete input value to handle filtering.\n   *\n   * @returns {Promise<void>} \n   */\n  @Method()\n  public async setValue(value: string): Promise<void> {\n    this.value = value;\n  }\n\n  /**\n   * Sets the autocomplete selection value to handle.\n   * When multiple is true, sets the selected values from the list\n   * When dropdown is true and multiple is false, sets a single selected value.\n   * When dropdown is false and When multiple is false, set the input value\n   *\n   * @returns {Promise<void>} \n   */\n    @Method()\n    public async setSelectionValue(value: string | string[]): Promise<void> {\n      if (this.multiple && Array.isArray(value)) {\n        this.multipleValues = this.multiselectValues = value;\n      }\n      if (typeof value === \"string\") {\n        if (this.dropdown) {\n          this.selectedDropdownValue = value;\n        }\n        this.value = value;\n      }\n    }\n\n  /**\n   * Return the autocomplete value.\n   *\n   * @returns {Promise<string>} A promise that resolves by returning the autocomplete value.\n   */\n  @Method()\n  public async getValue(): Promise<string | string[]> {\n    if (this.multiple) {\n      return this.multipleValues;\n    }\n    if (this.dropdown) {\n      return this.selectedDropdownValue;\n    }\n    return this.value;\n  }\n\n  /**\n   * Clears the selected options and resets the value of the autocomplete.\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    if (this.dropdown) {\n      this.clearOptions();\n    }\n    if (this.clearSelection && this.multiple) {\n      this.multipleValues = this.multiselectValues = [];\n      this.setOptionsMultiple();\n    }\n    this.cleared.emit();\n  }\n\n  @Listen(\"autocompleteClicked\")\n  handleSelectOption(evt: CustomEvent<{value: string, selected: boolean}>): void {\n    const selectedOption = this.options.find((option) => findOptionByExactValue(option, evt.detail.value));\n    const isValidOption: boolean = selectedOption !== null && selectedOption !== undefined;\n    \n    if (isValidOption && this.multiple) {\n      selectedOption.isSelected = evt.detail.selected;\n    }\n\n    this.handleValueAssignment(evt);\n\n    if (isValidOption && this.dropdown) {\n      this.setOptionsSingle(evt.detail.value);\n    }\n  }\n\n  /* Close the autocomplete when click outside */\n  @Listen('click', { target: 'window' })\n  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 isClickInsideParentAutocomplete = target.nodeName === \"VDS-AUTOCOMPLETE\" && target.shadowRoot && (evt.target as HTMLElement).shadowRoot.contains(this.hostEl);\n    if (!isClickInside && !isClickInsideParentAutocomplete) {\n      this.isOpened = false;\n    }\n  }\n\n  @Listen('keyup', { target: 'window' })\n  handleEscPress(evt: any) {\n    if (this.isOpened && evt.code === \"Escape\") {\n      this.close();\n      this.basicInput.blur();\n    }\n  }\n\n  handleMultiselection(selection: {value: string, selected: boolean}): void {\n    if (selection.selected && !this.multipleValues.find(value => value.toLowerCase() === selection.value.toLowerCase())) {\n      this.multipleValues.push(selection.value);\n    } else {\n      this.multipleValues = this.multipleValues.filter(value => value.toLowerCase() !== selection.value.toLowerCase());\n    }\n    this.multiselectValues = Array.from(this.multipleValues);\n    this.basicInput.setFocus();\n  }\n\n  handleValueAssignment(evt: CustomEvent<{value: string, selected: boolean}>): void {\n    if (this.multiple) {\n      this.handleMultiselection(evt.detail)\n    } else {\n      this.value = evt.detail.value;\n      this.setSelectionValue(evt.detail.value);\n      this.valueChanged.emit(this.value);\n      this.close();\n    }\n  }\n\n  handleChange(evt: CustomEvent<string>) {\n    evt.stopPropagation();\n    this.changeInput.emit(evt.detail);\n    if (this.debounce !== undefined && this.debounce > 0) {\n      this.handleDebounceValueChange(evt.detail);\n    } else {\n      this.value = evt.detail;\n    }\n    if (this.dropdown) {\n      this.showUnfilteredOptions = false;\n    }\n  }\n\n  hasFocus(): void {\n    this.open();\n    if (this.hasValue() && this.dropdown) {\n      this.showUnfilteredOptions = true;\n      this.validateDropdownValue = false;\n    }\n  }\n\n  lostFocus(): void {\n    if (this.dropdown) {\n      this.showUnfilteredOptions = false;\n      this.validateDropdownValue = true;\n    }\n  }\n\n  emitActionIcon(): void {\n    this.actionIconClick.emit();\n  }\n\n  handleDebounceValueChange(newValue: string): void {\n\t\tif (this.debounceTimeTracker !== null) {\n\t\t\tclearTimeout(this.debounceTimeTracker);\n\t\t\tthis.debounceTimeTracker = null;\n\t\t}\n\t\tthis.debounceTimeTracker = setTimeout(() => {\n      this.value = newValue;\n\t\t\tthis.debounceTimeTracker = null;\n\t\t}, this.debounce);\n\t}\n\n\n  private hasValue(): boolean {\n    return this.value !== null && this.value !== undefined && this.value !== \"undefined\" && this.value !== \"\";\n  }\n\n  /**\n   * Sets autocomplete styles for JSX.style property\n   *\n   * @param maxHeight string\n   * @returns { [key: string]: string }\n   */\n  private setAutoCompleteStyles = (maxHeight: string): { [key: string]: string } => {\n    let styles = {};\n\n    styles = {\n        maxHeight: maxHeight ? maxHeight : undefined,\n    }\n\n    return styles;\n  }\n\n  setPreselection(): void {\n    if (this.multiple) {\n      this.setOptionsMultiple();\n    }\n    if (this.dropdown) {\n      this.setDropdownOption();\n    }\n  }\n\n  private setOptionsMultiple(): void {\n    try {\n      this.options.forEach(item => {\n        item.hasCheckmark = true;\n        const selection = this.multipleValues?.find(value => findOptionByExactValue(item, value));\n        item.isSelected = !!selection;\n      });\n    } \n    catch (error) {\n      console.warn(\"[setOptionsMultiple]\", error);\n    }\n  }\n\n  /**\n   * Sets the selected value for a autocomplete type dropdown and updates the options accordingly.\n   * @private\n   * @param {string} selectedValue - The value of the selected option.\n   */\n  private setOptionsSingle(selectedValue: string): void {\n    try {\n      this.selectedDropdownValue = selectedValue;\n      this.options.forEach(item => {\n        item.hasCheckmark = false;\n        item.isSelected = findOptionByExactValue(item, this.selectedDropdownValue);\n      });\n    } \n    catch (error) {\n      console.warn(\"[setOptionsSingle]\", error);\n    }\n  }\n\n  private setDropdownOption(): void {\n    try {\n      const hasValidValue = this.options?.some(opt => findOptionByExactValue(opt, this.selectedDropdownValue));\n      if (\n        hasValidValue &&\n        this.selectedDropdownValue !== undefined &&\n        this.selectedDropdownValue !== \"undefined\" &&\n        this.selectedDropdownValue !== \"\"\n      ) {\n        this.setOptionsSingle(this.selectedDropdownValue);\n\n        if (this.validateDropdownValue) {\n          this.value = this.selectedDropdownValue;\n          this.validateDropdownValue = false;\n        }\n      }\n    } \n    catch (error) {\n      console.warn(\"[setOptionsMultiple]\", error);\n    }\n  }\n\n  /**\n   * Sets the all the options to unselected state\n   * @private\n   * @param {string} selectedValue - The value of the selected option.\n   */\n  private clearOptions(): void {\n    try {\n      this.selectedDropdownValue = null;\n      this.options.forEach(item => {\n        item.hasCheckmark = item.isSelected = false;\n      });\n    } \n    catch (error) {\n      console.warn(\"[clearOptions]\", error);\n    }\n  }\n\n  private renderUnfilteredOptions(): HTMLStencilElement {\n    return (\n      <div \n        class={combineClasses('vds-basic-autocomplete__content-options', this.maxHeight ? 'scrollable' : '')}\n        style={this.setAutoCompleteStyles(this.maxHeight)}\n      >\n        <slot name={\"items\"}></slot>\n        <slot></slot>\n      </div>\n    );\n  }\n\n  private renderItem(item: HTMLVdsAutocompleteItemElement): HTMLStencilElement {\n    let isSelected = false;\n    if (this.multiple) {\n      isSelected = this.multipleValues?.some(value => findOptionByValue(item, value));\n    }\n    return (\n      <vds-autocomplete-item isSelected={isSelected} hasCheckmark={this.multiple} {...cloneAttributes(item)} innerHTML={item.innerHTML}></vds-autocomplete-item>\n    );\n  }\n\n  private renderFilteredOptions(): HTMLStencilElement {\n    const value = this.hasValue() ? this.value : \"\";\n    const filteredOptions = getFilteredOptions(this.options, value);\n    if (filteredOptions.length === 0) {\n      return this.showEmptyMessage && this.emptyMessage ? this.renderEmptyOption() : null;\n    }\n  \n    return (\n      <div\n        class={combineClasses('vds-basic-autocomplete__content-options', this.maxHeight ? 'scrollable' : '')}\n        style={this.setAutoCompleteStyles(this.maxHeight)}\n      >\n        {filteredOptions.map(item => this.renderItem(item))}\n      </div>\n    );\n  }\n\n  private renderEmptyOption(): HTMLStencilElement {\n    if (!this.autocompleteItemEmptyOption) {\n      this.autocompleteItemEmptyOption = document.createElement(\"vds-autocomplete-item\");\n      this.autocompleteItemEmptyOption.classList.add(\"non-clickable\");\n      this.autocompleteItemEmptyOption.value = \"\";\n      this.autocompleteItemEmptyOption.setAttribute(\"value\", \"\");\n    }\n\n    this.autocompleteItemEmptyOption.setAttribute(\"size\", this.size);\n    this.autocompleteItemEmptyOption.setAttribute(\"label\", this.emptyMessage);\n\n    return this.renderItem(this.autocompleteItemEmptyOption);\n  }\n\n  private renderClearIcon(): HTMLStencilElement {\n    const disabled = this.disabled || this.isReadonly;\n    return (\n      <vds-icon-button\n        tabIndex={disabled ? -1 : undefined}\n        disabled={disabled}\n        variant=\"secondary\"\n        size={this.size === \"medium\" ? \"small\" : this.size === \"small\" ? \"extra-small\" : \"medium\"}\n        icon={\"close\"}\n        onClick={disabled ? undefined : () => { this.clear(); this.basicInput.setFocus();}}\n      ></vds-icon-button>\n    );\n  }\n\n  private renderActionIcon(): HTMLStencilElement {\n    const disabled = this.disabled || this.isReadonly;\n    if (this.dropdown && this.showDropdownIcon) {\n      return (\n        <vds-icon\n          svgIcon={this.isOpened ? 'chevron-up' : 'chevron-down'}\n          color={disabled ? 'color-icon-disabled' : 'color-icon-high'}\n          size={getIconSize(this.size)}\n          onClick={disabled ? undefined : () => this.isOpened ? this.close() : this.open()}\n        ></vds-icon>\n      );\n    } \n    if (this.actionIcon) {\n      return (\n        <vds-icon-button\n          tabIndex={disabled ? -1 : undefined}\n          disabled={disabled}\n          variant=\"secondary\"\n          size={this.size === \"medium\" ? \"small\" : this.size === \"small\" ? \"extra-small\" : \"medium\"}\n          icon={this.actionIcon}\n          onClick={disabled ? undefined : () => this.emitActionIcon()}\n        ></vds-icon-button>\n      )\n    }\n  }\n\n  private renderOptions(): HTMLStencilElement {\n    if (this.dropdown && this.showUnfilteredOptions) {\n      return this.renderUnfilteredOptions();\n    }\n\n    if (this.hasValue()) {\n      return this.renderFilteredOptions();\n    }\n\n    return this.renderUnfilteredOptions();\n  }\n\n  render(): HTMLStencilElement {\n    const filteredOptions = getFilteredOptions(this.options, this.value || \"\");\n    return (\n      <Host class={this.disabled ? \"vds-basic-autocomplete--disabled\" : \"\"} title={this.value}>\n        <div class={combineClasses(\"vds-basic-autocomplete__container\")}>\n          <vds-basic-input\n            ref={(el) => {\n              if (el) {\n                this.basicInput = el; \n              }\n            }}\n            type=\"text\"\n            placeholder={this.placeholder}\n            value={this.value}\n            size={this.size}\n            disabled={this.disabled}\n            isReadonly={this.isReadonly}\n            error={this.error}\n            isRequired={this.isRequired}\n            formatter={this.formatter}\n            informativeIcon={this.informativeIcon}\n            allowedStyles={this.allowedStyles}\n            onChangeInput={(evt): void => this.handleChange(evt)}\n            onFocus={(): void => this.hasFocus()}\n            onBlur={(): void => this.lostFocus()}\n          >\n            {this.showClearButton && this.hasValue() && (\n              <div class=\"vds-basic-autocomplete__secondary-action\" slot=\"secondaryActionIcon\">\n                {this.renderClearIcon()}\n              </div>\n            )}\n            {((this.dropdown && this.showDropdownIcon) || this.actionIcon) && (\n              <div class=\"vds-basic-autocomplete__primary-action\" slot=\"primaryActionIcon\">\n                {this.renderActionIcon()}\n              </div>\n            )}\n          </vds-basic-input>\n          {this.backdrop && this.isOpened ? <div class=\"vds-floating-backdrop\" onClick={this.close.bind(this)}></div> : ''}\n          <div \n            ref={(el): void => { if (el) this.autocompleteContent = el;}}\n            class={\n              combineClasses(\n                \"vds-basic-autocomplete__content\",\n                this.maxHeight ? \"has-scroll\" : \"\",\n                (!this.emptyMessage || this.emptyMessage === \"\") && filteredOptions.length === 0 ? \"no-shadow\" : \"\",\n                !this.showEmptyMessage && filteredOptions.length === 0 ? \"no-shadow\" : \"\",\n                !this.value && this.options.length === 0 ? \"no-shadow\" : \"\"\n              )}\n          >\n            <div class={\"vds-basic-autocomplete__content__header\"}>\n              <slot name=\"header\"></slot>\n            </div>\n            {this.renderOptions()}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,359 @@
+import { getIconsFromSpriteFile } from "../../utils/icon-utils";
+const ICON_LIST = getIconsFromSpriteFile();
+export default {
+    title: 'VDS/Components/Autocomplete/Basic-Autocomplete',
+    parameters: {
+        docs: {
+            toc: true,
+        },
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?m=auto&node-id=29041-11385"
+        }
+    },
+    argTypes: {
+        size: {
+            options: ["small", "medium", "large"],
+            control: { type: "select" }
+        },
+        informativeIcon: {
+            options: [...ICON_LIST, undefined],
+            control: { type: "select" }
+        },
+        checkmarkVariant: {
+            options: ["checkbox", "checkmark"],
+            control: { type: "select" }
+        },
+        checkmarkAlignment: {
+            options: ["start", "end"],
+            control: { type: "select" }
+        }
+    },
+};
+const styles = `
+    .container {
+        position: relative;
+        padding:10px;
+        width: 500px;
+    }
+`;
+const codeTemplate = (args) => {
+    return `
+    <style>${styles}</style>
+    <div class="container">
+        <vds-basic-autocomplete
+            id="autocompleteTest"
+            size="${args.size}"
+            value="${args.value}"
+            placeholder="${args.placeholder}"
+            disabled="${args.disabled}"
+            is-readonly="${args.isReadonly}"
+            error="${args.error}"
+            is-required="${args.isRequired}"
+            ${args.informativeIcon ? `informative-icon="${args.informativeIcon}"` : ""}
+            max-height="${args.maxHeight}"
+            match-width="${args.matchWidth}"
+            debounce="${args.debounce}"
+            action-icon="${args.actionIcon}"
+            show-clear-button="${args.showClearButton}"
+            clear-selection="${args.clearSelection}"
+            dropdown="${args.dropdown}"
+            show-dropdown-icon="${args.showDropdownIcon}"
+            show-empty-message="${args.showEmptyMessage}"
+            empty-message="${args.emptyMessage}"
+            auto-position="${args.autoPosition}"
+            multiple="${args.multiple}"
+            backdrop="${args.backdrop}"
+        >
+            <vds-autocomplete-item value="tesla" size="${args.size}"  checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="toyota" label="Toyota" size="${args.size}"  checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="honda" label="Honda" size="${args.size}"  checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="ford" label="Ford" size="${args.size}"  checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="chevrolet" label="Chevrolet" size="${args.size}"  checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="bmw" label="BMW" size="${args.size}"  checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="mercedes-benz" label="Mercedes-Benz" size="${args.size}"  checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="audi" label="Audi" size="${args.size}"  checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="volkswagen" label="Volkswagen" size="${args.size}"  checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="porsche" label="Porsche" size="${args.size}"  checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+        </vds-basic-autocomplete>
+    </div>
+`;
+};
+export const BasicUsage = codeTemplate.bind({});
+BasicUsage.args = {
+    size: "medium",
+    value: "",
+    placeholder: "Select options",
+    disabled: false,
+    isReadonly: false,
+    error: false,
+    isRequired: false,
+    informativeIcon: undefined,
+    maxHeight: "",
+    matchWidth: true,
+    debounce: 0,
+    actionIcon: "zoom",
+    showClearButton: true,
+    clearSelection: false,
+    dropdown: false,
+    showDropdownIcon: false,
+    showEmptyMessage: true,
+    emptyMessage: "No options",
+    multiple: false,
+    checkmarkVariant: "checkmark",
+    checkmarkAlignment: "start",
+    autoPosition: false,
+    backdrop: false
+};
+const codeTemplateDropdown = (args) => {
+    return `
+    <style>${styles}</style>
+    <div class="container">
+        <vds-basic-autocomplete
+            id="autocompleteTest"
+            size="${args.size}"
+            value="${args.value}"
+            selected-dropdown-value="${args.selectedDropdownValue}"
+            placeholder="${args.placeholder}"
+            disabled="${args.disabled}"
+            is-readonly="${args.isReadonly}"
+            error="${args.error}"
+            is-required="${args.isRequired}"
+            ${args.informativeIcon ? `informative-icon="${args.informativeIcon}"` : ""}
+            max-height="${args.maxHeight}"
+            match-width="${args.matchWidth}"
+            debounce="${args.debounce}"
+            action-icon="${args.actionIcon}"
+            show-clear-button="${args.showClearButton}"
+            dropdown="true"
+            show-dropdown-icon="${args.showDropdownIcon}"
+            show-empty-message="${args.showEmptyMessage}"
+            empty-message="${args.emptyMessage}"
+            auto-position="${args.autoPosition}"
+        >
+            <vds-autocomplete-item value="nike" label="Nike" size="${args.size}"  checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="adidas" label="Adidas" size="${args.size}"  checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="gucci" label="Gucci" size="${args.size}"  checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="louis-vuitton" label="Louis Vuitton" size="${args.size}"  checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="chanel" label="Chanel" size="${args.size}"  checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="prada" label="Prada" size="${args.size}"  checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="hermes" label="Hermès" size="${args.size}"  checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="dior" label="Dior" size="${args.size}"  checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="zara" label="Zara" size="${args.size}"  checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="h&m" label="H&M" size="${args.size}"  checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+        </vds-basic-autocomplete>
+    </div>
+`;
+};
+export const DropdownUsage = codeTemplateDropdown.bind({});
+DropdownUsage.args = {
+    size: "medium",
+    value: "",
+    selectedDropdownValue: "",
+    placeholder: "Select options",
+    disabled: false,
+    isReadonly: false,
+    error: false,
+    isRequired: false,
+    informativeIcon: undefined,
+    maxHeight: "",
+    matchWidth: true,
+    debounce: 0,
+    actionIcon: "zoom",
+    showClearButton: true,
+    showDropdownIcon: true,
+    showEmptyMessage: true,
+    emptyMessage: "No options",
+    checkmarkVariant: "checkmark",
+    checkmarkAlignment: "start",
+    autoPosition: false
+};
+const codeTemplateMultiple = (args) => {
+    return `
+    <style>${styles}</style>
+    <div class="container">
+        <vds-basic-autocomplete
+            id="autocompleteTest"
+            size="${args.size}"
+            placeholder="${args.placeholder}"
+            disabled="${args.disabled}"
+            is-readonly="${args.isReadonly}"
+            error="${args.error}"
+            is-required="${args.isRequired}"
+            ${args.informativeIcon ? `informative-icon="${args.informativeIcon}"` : ""}
+            max-height="${args.maxHeight}"
+            match-width="${args.matchWidth}"
+            debounce="${args.debounce}"
+            action-icon="${args.actionIcon}"
+            show-clear-button="${args.showClearButton}"
+            clear-selection="${args.clearSelection}"
+            show-dropdown-icon="${args.showDropdownIcon}"
+            show-empty-message="${args.showEmptyMessage}"
+            empty-message="${args.emptyMessage}"
+            auto-position="${args.autoPosition}"
+            multiple="true"
+        >
+            <vds-autocomplete-item value="apple" label="Apple" size="${args.size}" checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="dell" label="Dell" size="${args.size}" checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="hp" label="HP" size="${args.size}" checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="lenovo" label="Lenovo" size="${args.size}" checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="acer" label="Acer" size="${args.size}" checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="asus" label="Asus" size="${args.size}" checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="microsoft" label="Microsoft" size="${args.size}" checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="razer" label="Razer" size="${args.size}" checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="msi" label="MSI" size="${args.size}" checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="gigabyte" label="Gigabyte" size="${args.size}" checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+        </vds-basic-autocomplete>
+    </div>
+`;
+};
+export const BasicMultipleUsage = codeTemplateMultiple.bind({});
+BasicMultipleUsage.args = {
+    size: "medium",
+    placeholder: "Select options",
+    disabled: false,
+    isReadonly: false,
+    error: false,
+    isRequired: false,
+    informativeIcon: undefined,
+    maxHeight: "",
+    matchWidth: true,
+    debounce: 0,
+    actionIcon: "zoom",
+    showClearButton: true,
+    clearSelection: false,
+    showDropdownIcon: false,
+    showEmptyMessage: true,
+    emptyMessage: "No options",
+    checkmarkVariant: "checkmark",
+    checkmarkAlignment: "start",
+    autoPosition: false
+};
+const stylesMultipleHeaderSlot = `
+    .container {
+        display: flex;
+        justify-content: space-around;
+        position: relative;
+        padding:10px;
+        width: 100%;
+    }
+
+    vds-basic-autocomplete {
+        width: 400px;
+    }
+
+    .with-chips {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+    }
+`;
+const codeTemplateMultipleSlotHeader = (args) => {
+    return `
+    <style>${stylesMultipleHeaderSlot}</style>
+    <p>Disclaimer: The chips inside the component are static. This is a visualization of what we can build with the header slot. or we can just
+    add them below our autocomplete.</p>
+    <div class="container">
+        <vds-basic-autocomplete
+            id="autocompleteTest"
+            size="${args.size}"
+            placeholder="${args.placeholder}"
+            disabled="${args.disabled}"
+            is-readonly="${args.isReadonly}"
+            error="${args.error}"
+            is-required="${args.isRequired}"
+            ${args.informativeIcon ? `informative-icon="${args.informativeIcon}"` : ""}
+            max-height="${args.maxHeight}"
+            match-width="${args.matchWidth}"
+            debounce="${args.debounce}"
+            action-icon="${args.actionIcon}"
+            show-clear-button="${args.showClearButton}"
+            clear-selection="${args.clearSelection}"
+            show-dropdown-icon="${args.showDropdownIcon}"
+            show-empty-message="${args.showEmptyMessage}"
+            empty-message="${args.emptyMessage}"
+            auto-position="${args.autoPosition}"
+            multiple="true"
+        >
+            <div style="padding: var(--spacing-04)" slot="header">
+                <vds-chip value="Apple" close="true" size="medium"></vds-chip>
+                <vds-chip value="Dell" close="true" size="medium"></vds-chip>
+                <vds-chip value="HP" close="true" size="medium"></vds-chip>
+            </div>
+            <vds-autocomplete-item value="apple" is-selected="true" label="Apple" size="${args.size}" checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="dell" is-selected="true" label="Dell" size="${args.size}" checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="hp" is-selected="true" label="HP" size="${args.size}" checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="lenovo" label="Lenovo" size="${args.size}" checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="acer" label="Acer" size="${args.size}" checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="asus" label="Asus" size="${args.size}" checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="microsoft" label="Microsoft" size="${args.size}" checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="razer" label="Razer" size="${args.size}" checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="msi" label="MSI" size="${args.size}" checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            <vds-autocomplete-item value="gigabyte" label="Gigabyte" size="${args.size}" checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+        </vds-basic-autocomplete>
+
+        <div class="with-chips">
+            <vds-basic-autocomplete
+                id="autocompleteTest"
+                size="${args.size}"
+                placeholder="${args.placeholder}"
+                disabled="${args.disabled}"
+                is-readonly="${args.isReadonly}"
+                error="${args.error}"
+                is-required="${args.isRequired}"
+                ${args.informativeIcon ? `informative-icon="${args.informativeIcon}"` : ""}
+                max-height="${args.maxHeight}"
+                match-width="${args.matchWidth}"
+                debounce="${args.debounce}"
+                action-icon="${args.actionIcon}"
+                show-clear-button="${args.showClearButton}"
+                clear-selection="${args.clearSelection}"
+                show-dropdown-icon="${args.showDropdownIcon}"
+                show-empty-message="${args.showEmptyMessage}"
+                empty-message="${args.emptyMessage}"
+                auto-position="${args.autoPosition}"
+                multiple="true"
+            >
+                <vds-autocomplete-item value="apple" is-selected="true" label="Apple" size="${args.size}" checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+                <vds-autocomplete-item value="dell" is-selected="true" label="Dell" size="${args.size}" checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+                <vds-autocomplete-item value="hp" is-selected="true" label="HP" size="${args.size}" checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+                <vds-autocomplete-item value="lenovo" label="Lenovo" size="${args.size}" checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+                <vds-autocomplete-item value="acer" label="Acer" size="${args.size}" checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+                <vds-autocomplete-item value="asus" label="Asus" size="${args.size}" checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+                <vds-autocomplete-item value="microsoft" label="Microsoft" size="${args.size}" checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+                <vds-autocomplete-item value="razer" label="Razer" size="${args.size}" checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+                <vds-autocomplete-item value="msi" label="MSI" size="${args.size}" checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+                <vds-autocomplete-item value="gigabyte" label="Gigabyte" size="${args.size}" checkmark-variant="${args.checkmarkVariant}" checkmark-alignment="${args.checkmarkAlignment}"></vds-autocomplete-item>
+            </vds-basic-autocomplete>
+            <div>
+                <vds-chip value="Apple" close="true" size="medium"></vds-chip>
+                <vds-chip value="Dell" close="true" size="medium"></vds-chip>
+                <vds-chip value="HP" close="true" size="medium"></vds-chip>
+            </div>
+        </div>
+    </div>
+`;
+};
+export const BasicMultipleSlotHeaderUsage = codeTemplateMultipleSlotHeader.bind({});
+BasicMultipleSlotHeaderUsage.args = {
+    size: "medium",
+    placeholder: "Select options",
+    disabled: false,
+    isReadonly: false,
+    error: false,
+    isRequired: false,
+    informativeIcon: undefined,
+    maxHeight: "",
+    matchWidth: true,
+    debounce: 0,
+    actionIcon: "zoom",
+    showClearButton: true,
+    clearSelection: false,
+    showDropdownIcon: false,
+    showEmptyMessage: true,
+    emptyMessage: "No options",
+    checkmarkVariant: "checkmark",
+    checkmarkAlignment: "start",
+    autoPosition: false
+};
+//# sourceMappingURL=vds-basic-autocomplete.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vds-basic-autocomplete.stories.js","sourceRoot":"","sources":["../../../src/components/autocomplete/vds-basic-autocomplete.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { getIconsFromSpriteFile } from \"../../utils/icon-utils\";\n\nconst ICON_LIST = getIconsFromSpriteFile();\n\nexport default {\n    title: 'VDS/Components/Autocomplete/Basic-Autocomplete',\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=29041-11385\"\n        }\n      },\n    argTypes: {\n        size: {\n            options: [\"small\", \"medium\", \"large\"],\n            control: { type: \"select\" }\n        },\n        informativeIcon: {\n            options: [...ICON_LIST, undefined],\n            control: { type: \"select\" }\n        },\n        checkmarkVariant: {\n            options: [\"checkbox\", \"checkmark\"],\n            control: { type: \"select\" }\n        },\n        checkmarkAlignment: {\n            options: [\"start\", \"end\"],\n            control: { type: \"select\" }\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-autocomplete\n            id=\"autocompleteTest\"\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            ${args.informativeIcon ? `informative-icon=\"${args.informativeIcon}\"`: \"\"}\n            max-height=\"${args.maxHeight}\"\n            match-width=\"${args.matchWidth}\"\n            debounce=\"${args.debounce}\"\n            action-icon=\"${args.actionIcon}\"\n            show-clear-button=\"${args.showClearButton}\"\n            clear-selection=\"${args.clearSelection}\"\n            dropdown=\"${args.dropdown}\"\n            show-dropdown-icon=\"${args.showDropdownIcon}\"\n            show-empty-message=\"${args.showEmptyMessage}\"\n            empty-message=\"${args.emptyMessage}\"\n            auto-position=\"${args.autoPosition}\"\n            multiple=\"${args.multiple}\"\n            backdrop=\"${args.backdrop}\"\n        >\n            <vds-autocomplete-item value=\"tesla\" size=\"${args.size}\"  checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"toyota\" label=\"Toyota\" size=\"${args.size}\"  checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"honda\" label=\"Honda\" size=\"${args.size}\"  checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"ford\" label=\"Ford\" size=\"${args.size}\"  checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"chevrolet\" label=\"Chevrolet\" size=\"${args.size}\"  checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"bmw\" label=\"BMW\" size=\"${args.size}\"  checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"mercedes-benz\" label=\"Mercedes-Benz\" size=\"${args.size}\"  checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"audi\" label=\"Audi\" size=\"${args.size}\"  checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"volkswagen\" label=\"Volkswagen\" size=\"${args.size}\"  checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"porsche\" label=\"Porsche\" size=\"${args.size}\"  checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n        </vds-basic-autocomplete>\n    </div>\n`;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n    size: \"medium\",\n    value: \"\",\n    placeholder: \"Select options\",\n    disabled: false,\n    isReadonly: false,\n    error: false,\n    isRequired: false,\n    informativeIcon: undefined,\n    maxHeight: \"\",\n    matchWidth: true,\n    debounce: 0,\n    actionIcon: \"zoom\",\n    showClearButton: true,\n    clearSelection: false,\n    dropdown: false,\n    showDropdownIcon: false,\n    showEmptyMessage: true,\n    emptyMessage: \"No options\",\n    multiple: false,\n    checkmarkVariant: \"checkmark\",\n    checkmarkAlignment: \"start\",\n    autoPosition: false,\n    backdrop: false\n}\n\n\nconst codeTemplateDropdown = (args) => {\n    return `\n    <style>${styles}</style>\n    <div class=\"container\">\n        <vds-basic-autocomplete\n            id=\"autocompleteTest\"\n            size=\"${args.size}\"\n            value=\"${args.value}\"\n            selected-dropdown-value=\"${args.selectedDropdownValue}\"\n            placeholder=\"${args.placeholder}\"\n            disabled=\"${args.disabled}\"\n            is-readonly=\"${args.isReadonly}\"\n            error=\"${args.error}\"\n            is-required=\"${args.isRequired}\"\n            ${args.informativeIcon ? `informative-icon=\"${args.informativeIcon}\"`: \"\"}\n            max-height=\"${args.maxHeight}\"\n            match-width=\"${args.matchWidth}\"\n            debounce=\"${args.debounce}\"\n            action-icon=\"${args.actionIcon}\"\n            show-clear-button=\"${args.showClearButton}\"\n            dropdown=\"true\"\n            show-dropdown-icon=\"${args.showDropdownIcon}\"\n            show-empty-message=\"${args.showEmptyMessage}\"\n            empty-message=\"${args.emptyMessage}\"\n            auto-position=\"${args.autoPosition}\"\n        >\n            <vds-autocomplete-item value=\"nike\" label=\"Nike\" size=\"${args.size}\"  checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"adidas\" label=\"Adidas\" size=\"${args.size}\"  checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"gucci\" label=\"Gucci\" size=\"${args.size}\"  checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"louis-vuitton\" label=\"Louis Vuitton\" size=\"${args.size}\"  checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"chanel\" label=\"Chanel\" size=\"${args.size}\"  checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"prada\" label=\"Prada\" size=\"${args.size}\"  checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"hermes\" label=\"Hermès\" size=\"${args.size}\"  checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"dior\" label=\"Dior\" size=\"${args.size}\"  checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"zara\" label=\"Zara\" size=\"${args.size}\"  checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"h&m\" label=\"H&M\" size=\"${args.size}\"  checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n        </vds-basic-autocomplete>\n    </div>\n`;\n}\n\nexport const DropdownUsage = codeTemplateDropdown.bind({});\n\nDropdownUsage.args = {\n    size: \"medium\",\n    value: \"\",\n    selectedDropdownValue: \"\",\n    placeholder: \"Select options\",\n    disabled: false,\n    isReadonly: false,\n    error: false,\n    isRequired: false,\n    informativeIcon: undefined,\n    maxHeight: \"\",\n    matchWidth: true,\n    debounce: 0,\n    actionIcon: \"zoom\",\n    showClearButton: true,\n    showDropdownIcon: true,\n    showEmptyMessage: true,\n    emptyMessage: \"No options\",\n    checkmarkVariant: \"checkmark\",\n    checkmarkAlignment: \"start\",\n    autoPosition: false\n}\n\nconst codeTemplateMultiple = (args) => {\n    return `\n    <style>${styles}</style>\n    <div class=\"container\">\n        <vds-basic-autocomplete\n            id=\"autocompleteTest\"\n            size=\"${args.size}\"\n            placeholder=\"${args.placeholder}\"\n            disabled=\"${args.disabled}\"\n            is-readonly=\"${args.isReadonly}\"\n            error=\"${args.error}\"\n            is-required=\"${args.isRequired}\"\n            ${args.informativeIcon ? `informative-icon=\"${args.informativeIcon}\"`: \"\"}\n            max-height=\"${args.maxHeight}\"\n            match-width=\"${args.matchWidth}\"\n            debounce=\"${args.debounce}\"\n            action-icon=\"${args.actionIcon}\"\n            show-clear-button=\"${args.showClearButton}\"\n            clear-selection=\"${args.clearSelection}\"\n            show-dropdown-icon=\"${args.showDropdownIcon}\"\n            show-empty-message=\"${args.showEmptyMessage}\"\n            empty-message=\"${args.emptyMessage}\"\n            auto-position=\"${args.autoPosition}\"\n            multiple=\"true\"\n        >\n            <vds-autocomplete-item value=\"apple\" label=\"Apple\" size=\"${args.size}\" checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"dell\" label=\"Dell\" size=\"${args.size}\" checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"hp\" label=\"HP\" size=\"${args.size}\" checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"lenovo\" label=\"Lenovo\" size=\"${args.size}\" checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"acer\" label=\"Acer\" size=\"${args.size}\" checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"asus\" label=\"Asus\" size=\"${args.size}\" checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"microsoft\" label=\"Microsoft\" size=\"${args.size}\" checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"razer\" label=\"Razer\" size=\"${args.size}\" checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"msi\" label=\"MSI\" size=\"${args.size}\" checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"gigabyte\" label=\"Gigabyte\" size=\"${args.size}\" checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n        </vds-basic-autocomplete>\n    </div>\n`;\n}\n\nexport const BasicMultipleUsage = codeTemplateMultiple.bind({});\n\nBasicMultipleUsage.args = {\n    size: \"medium\",\n    placeholder: \"Select options\",\n    disabled: false,\n    isReadonly: false,\n    error: false,\n    isRequired: false,\n    informativeIcon: undefined,\n    maxHeight: \"\",\n    matchWidth: true,\n    debounce: 0,\n    actionIcon: \"zoom\",\n    showClearButton: true,\n    clearSelection: false,\n    showDropdownIcon: false,\n    showEmptyMessage: true,\n    emptyMessage: \"No options\",\n    checkmarkVariant: \"checkmark\",\n    checkmarkAlignment: \"start\",\n    autoPosition: false\n}\n\n\nconst stylesMultipleHeaderSlot = `\n    .container {\n        display: flex;\n        justify-content: space-around;\n        position: relative;\n        padding:10px;\n        width: 100%;\n    }\n\n    vds-basic-autocomplete {\n        width: 400px;\n    }\n\n    .with-chips {\n        display: flex;\n        flex-direction: column;\n        gap: 0.25rem;\n    }\n`;\n\nconst codeTemplateMultipleSlotHeader = (args) => {\n    return `\n    <style>${stylesMultipleHeaderSlot}</style>\n    <p>Disclaimer: The chips inside the component are static. This is a visualization of what we can build with the header slot. or we can just\n    add them below our autocomplete.</p>\n    <div class=\"container\">\n        <vds-basic-autocomplete\n            id=\"autocompleteTest\"\n            size=\"${args.size}\"\n            placeholder=\"${args.placeholder}\"\n            disabled=\"${args.disabled}\"\n            is-readonly=\"${args.isReadonly}\"\n            error=\"${args.error}\"\n            is-required=\"${args.isRequired}\"\n            ${args.informativeIcon ? `informative-icon=\"${args.informativeIcon}\"`: \"\"}\n            max-height=\"${args.maxHeight}\"\n            match-width=\"${args.matchWidth}\"\n            debounce=\"${args.debounce}\"\n            action-icon=\"${args.actionIcon}\"\n            show-clear-button=\"${args.showClearButton}\"\n            clear-selection=\"${args.clearSelection}\"\n            show-dropdown-icon=\"${args.showDropdownIcon}\"\n            show-empty-message=\"${args.showEmptyMessage}\"\n            empty-message=\"${args.emptyMessage}\"\n            auto-position=\"${args.autoPosition}\"\n            multiple=\"true\"\n        >\n            <div style=\"padding: var(--spacing-04)\" slot=\"header\">\n                <vds-chip value=\"Apple\" close=\"true\" size=\"medium\"></vds-chip>\n                <vds-chip value=\"Dell\" close=\"true\" size=\"medium\"></vds-chip>\n                <vds-chip value=\"HP\" close=\"true\" size=\"medium\"></vds-chip>\n            </div>\n            <vds-autocomplete-item value=\"apple\" is-selected=\"true\" label=\"Apple\" size=\"${args.size}\" checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"dell\" is-selected=\"true\" label=\"Dell\" size=\"${args.size}\" checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"hp\" is-selected=\"true\" label=\"HP\" size=\"${args.size}\" checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"lenovo\" label=\"Lenovo\" size=\"${args.size}\" checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"acer\" label=\"Acer\" size=\"${args.size}\" checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"asus\" label=\"Asus\" size=\"${args.size}\" checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"microsoft\" label=\"Microsoft\" size=\"${args.size}\" checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"razer\" label=\"Razer\" size=\"${args.size}\" checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"msi\" label=\"MSI\" size=\"${args.size}\" checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            <vds-autocomplete-item value=\"gigabyte\" label=\"Gigabyte\" size=\"${args.size}\" checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n        </vds-basic-autocomplete>\n\n        <div class=\"with-chips\">\n            <vds-basic-autocomplete\n                id=\"autocompleteTest\"\n                size=\"${args.size}\"\n                placeholder=\"${args.placeholder}\"\n                disabled=\"${args.disabled}\"\n                is-readonly=\"${args.isReadonly}\"\n                error=\"${args.error}\"\n                is-required=\"${args.isRequired}\"\n                ${args.informativeIcon ? `informative-icon=\"${args.informativeIcon}\"`: \"\"}\n                max-height=\"${args.maxHeight}\"\n                match-width=\"${args.matchWidth}\"\n                debounce=\"${args.debounce}\"\n                action-icon=\"${args.actionIcon}\"\n                show-clear-button=\"${args.showClearButton}\"\n                clear-selection=\"${args.clearSelection}\"\n                show-dropdown-icon=\"${args.showDropdownIcon}\"\n                show-empty-message=\"${args.showEmptyMessage}\"\n                empty-message=\"${args.emptyMessage}\"\n                auto-position=\"${args.autoPosition}\"\n                multiple=\"true\"\n            >\n                <vds-autocomplete-item value=\"apple\" is-selected=\"true\" label=\"Apple\" size=\"${args.size}\" checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n                <vds-autocomplete-item value=\"dell\" is-selected=\"true\" label=\"Dell\" size=\"${args.size}\" checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n                <vds-autocomplete-item value=\"hp\" is-selected=\"true\" label=\"HP\" size=\"${args.size}\" checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n                <vds-autocomplete-item value=\"lenovo\" label=\"Lenovo\" size=\"${args.size}\" checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n                <vds-autocomplete-item value=\"acer\" label=\"Acer\" size=\"${args.size}\" checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n                <vds-autocomplete-item value=\"asus\" label=\"Asus\" size=\"${args.size}\" checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n                <vds-autocomplete-item value=\"microsoft\" label=\"Microsoft\" size=\"${args.size}\" checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n                <vds-autocomplete-item value=\"razer\" label=\"Razer\" size=\"${args.size}\" checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n                <vds-autocomplete-item value=\"msi\" label=\"MSI\" size=\"${args.size}\" checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n                <vds-autocomplete-item value=\"gigabyte\" label=\"Gigabyte\" size=\"${args.size}\" checkmark-variant=\"${args.checkmarkVariant}\" checkmark-alignment=\"${args.checkmarkAlignment}\"></vds-autocomplete-item>\n            </vds-basic-autocomplete>\n            <div>\n                <vds-chip value=\"Apple\" close=\"true\" size=\"medium\"></vds-chip>\n                <vds-chip value=\"Dell\" close=\"true\" size=\"medium\"></vds-chip>\n                <vds-chip value=\"HP\" close=\"true\" size=\"medium\"></vds-chip>\n            </div>\n        </div>\n    </div>\n`;\n}\n\nexport const BasicMultipleSlotHeaderUsage = codeTemplateMultipleSlotHeader.bind({});\n\nBasicMultipleSlotHeaderUsage.args = {\n    size: \"medium\",\n    placeholder: \"Select options\",\n    disabled: false,\n    isReadonly: false,\n    error: false,\n    isRequired: false,\n    informativeIcon: undefined,\n    maxHeight: \"\",\n    matchWidth: true,\n    debounce: 0,\n    actionIcon: \"zoom\",\n    showClearButton: true,\n    clearSelection: false,\n    showDropdownIcon: false,\n    showEmptyMessage: true,\n    emptyMessage: \"No options\",\n    checkmarkVariant: \"checkmark\",\n    checkmarkAlignment: \"start\",\n    autoPosition: false\n}"]}

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

@@ -0,0 +1,58 @@
+export const getFilteredOptions = (options, value, validateCasing = false) => {
+    try {
+        return options.filter(item => {
+            var _a, _b, _c;
+            if (validateCasing) {
+                return (((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.includes(value)) || ((_b = item.value) === null || _b === void 0 ? void 0 : _b.includes(value)) || ((_c = item.label) === null || _c === void 0 ? void 0 : _c.includes(value)));
+            }
+            return findOptionByValue(item, value);
+        });
+    }
+    catch (error) {
+        console.warn("[getFilteredOptions]", error);
+        return [];
+    }
+};
+/**
+ * Checks if an option object matches the given search value.
+ * @param {Object} option - The option object to be checked in a HTMLVdsAutocompleteItemElement
+ * @param {string} searchValue - The value to search for within the option.
+ * @returns {boolean} -
+ *   True if the searchValue is found within the option's `textContent`, `label`, or `value`.
+ *   False otherwise.
+ */
+export const findOptionByValue = (option, searchValue) => {
+    var _a, _b, _c;
+    try {
+        const lowerCaseSearchValue = (searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase()) || "";
+        return (option.textContent && ((_a = option.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(lowerCaseSearchValue)) ||
+            option.label && ((_b = option.label) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(lowerCaseSearchValue)) ||
+            option.value && ((_c = option.value) === null || _c === void 0 ? void 0 : _c.toLowerCase().includes(lowerCaseSearchValue)));
+    }
+    catch (error) {
+        console.warn("[findOptionByValue]", error);
+        return false;
+    }
+};
+/**
+ * Checks if an option object matches the given search value exactly.
+ * @param {Object} option - The option object to be checked in a HTMLVdsAutocompleteItemElement
+ * @param {string} searchValue - The value to search for within the option.
+ * @returns {boolean} -
+ *   True if the searchValue is exactly the same to one of the option's `textContent`, `label`, or `value`.
+ *   False otherwise.
+ */
+export const findOptionByExactValue = (option, searchValue) => {
+    var _a, _b, _c;
+    try {
+        const lowerCaseSearchValue = (searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase()) || "";
+        return (option.textContent && ((_a = option.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === lowerCaseSearchValue ||
+            option.label && ((_b = option.label) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === lowerCaseSearchValue ||
+            option.value && ((_c = option.value) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === lowerCaseSearchValue);
+    }
+    catch (error) {
+        console.warn("[findOptionByValue]", error);
+        return false;
+    }
+};
+//# sourceMappingURL=vds-basic-autocomplete.utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vds-basic-autocomplete.utils.js","sourceRoot":"","sources":["../../../src/components/autocomplete/vds-basic-autocomplete.utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,OAAyC,EAAE,KAAa,EAAE,iBAA0B,KAAK,EAAE,EAAE;IAC5H,IAAI,CAAC;QACD,OAAO,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;;YACzB,IAAI,cAAc,EAAE,CAAC;gBACjB,OAAO,CAAC,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,CAAC,KAAK,CAAC,MAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,CAAC,KAAK,CAAC,CAAA,KAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,CAAC,KAAK,CAAC,CAAA,CAAC,CAAC;YAC7G,CAAC;YACD,OAAO,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAC1C,CAAC,CAAC,CAAC;IACP,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACb,OAAO,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,CAAC;QAC5C,OAAO,EAAE,CAAC;IACd,CAAC;AACL,CAAC,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,MAAsC,EAAE,WAAmB,EAAW,EAAE;;IACtG,IAAI,CAAC;QACD,MAAM,oBAAoB,GAAG,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,WAAW,EAAE,KAAI,EAAE,CAAC;QAC9D,OAAO,CACH,MAAM,CAAC,WAAW,KAAI,MAAA,MAAM,CAAC,WAAW,0CAAE,WAAW,GAAG,QAAQ,CAAC,oBAAoB,CAAC,CAAA;YACtF,MAAM,CAAC,KAAK,KAAI,MAAA,MAAM,CAAC,KAAK,0CAAE,WAAW,GAAG,QAAQ,CAAC,oBAAoB,CAAC,CAAA;YAC1E,MAAM,CAAC,KAAK,KAAI,MAAA,MAAM,CAAC,KAAK,0CAAE,WAAW,GAAG,QAAQ,CAAC,oBAAoB,CAAC,CAAA,CAC7E,CAAC;IACN,CAAC;IAAA,OAAO,KAAK,EAAE,CAAC;QACZ,OAAO,CAAC,IAAI,CAAC,qBAAqB,EAAE,KAAK,CAAC,CAAC;QAC3C,OAAO,KAAK,CAAC;IACjB,CAAC;AACL,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,MAAsC,EAAE,WAAmB,EAAW,EAAE;;IAC3G,IAAI,CAAC;QACD,MAAM,oBAAoB,GAAG,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,WAAW,EAAE,KAAI,EAAE,CAAC;QAC9D,OAAO,CACH,MAAM,CAAC,WAAW,IAAI,CAAA,MAAA,MAAM,CAAC,WAAW,0CAAE,WAAW,EAAE,MAAK,oBAAoB;YAChF,MAAM,CAAC,KAAK,IAAI,CAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,WAAW,EAAE,MAAK,oBAAoB;YACpE,MAAM,CAAC,KAAK,IAAI,CAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,WAAW,EAAE,MAAK,oBAAoB,CACvE,CAAC;IACN,CAAC;IAAA,OAAO,KAAK,EAAE,CAAC;QACZ,OAAO,CAAC,IAAI,CAAC,qBAAqB,EAAE,KAAK,CAAC,CAAC;QAC3C,OAAO,KAAK,CAAC;IACjB,CAAC;AACL,CAAC,CAAC","sourcesContent":["export const getFilteredOptions = (options: HTMLVdsAutocompleteItemElement[], value: string, validateCasing: boolean = false) => {\n    try {\n        return options.filter(item => {\n            if (validateCasing) {\n                return (item.textContent?.includes(value) || item.value?.includes(value) || item.label?.includes(value));\n            }\n            return findOptionByValue(item, value);\n        });\n    } catch (error) {\n        console.warn(\"[getFilteredOptions]\", error);\n        return [];\n    }\n}\n\n/**\n * Checks if an option object matches the given search value.\n * @param {Object} option - The option object to be checked in a HTMLVdsAutocompleteItemElement\n * @param {string} searchValue - The value to search for within the option.\n * @returns {boolean} - \n *   True if the searchValue is found within the option's `textContent`, `label`, or `value`.\n *   False otherwise.\n */\nexport const findOptionByValue = (option: HTMLVdsAutocompleteItemElement, searchValue: string): boolean => {\n    try {\n        const lowerCaseSearchValue = searchValue?.toLowerCase() || \"\";\n        return (\n            option.textContent && option.textContent?.toLowerCase().includes(lowerCaseSearchValue) ||\n            option.label && option.label?.toLowerCase().includes(lowerCaseSearchValue) ||\n            option.value && option.value?.toLowerCase().includes(lowerCaseSearchValue)\n        );\n    }catch (error) {\n        console.warn(\"[findOptionByValue]\", error);\n        return false;\n    }\n};\n\n/**\n * Checks if an option object matches the given search value exactly.\n * @param {Object} option - The option object to be checked in a HTMLVdsAutocompleteItemElement\n * @param {string} searchValue - The value to search for within the option.\n * @returns {boolean} - \n *   True if the searchValue is exactly the same to one of the option's `textContent`, `label`, or `value`.\n *   False otherwise.\n */\nexport const findOptionByExactValue = (option: HTMLVdsAutocompleteItemElement, searchValue: string): boolean => {\n    try {\n        const lowerCaseSearchValue = searchValue?.toLowerCase() || \"\";\n        return (\n            option.textContent && option.textContent?.toLowerCase() === lowerCaseSearchValue ||\n            option.label && option.label?.toLowerCase() === lowerCaseSearchValue ||\n            option.value && option.value?.toLowerCase() === lowerCaseSearchValue\n        );\n    }catch (error) {\n        console.warn(\"[findOptionByValue]\", error);\n        return false;\n    }\n};"]}