npm - wabtec-internal-volt-basic-components - Versions diffs - 1.0.0 - Mend

wabtec-internal-volt-basic-components 1.0.0

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

Files changed (1131) hide show

package/dist/esm/vds-basic-autocomplete.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"vds-basic-autocomplete.entry.js","sources":["src/components/autocomplete/vds-basic-autocomplete.utils.ts","src/components/autocomplete/vds-basic-autocomplete.scss?tag=vds-basic-autocomplete&encapsulation=shadow","src/components/autocomplete/vds-basic-autocomplete.tsx"],"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};",":host {\n display: block;\n \n --vds-basic-autocomplete-input-min-width: 7.5rem;\n --vds-basic-autocomplete-input-min-width-large: 9.25rem;\n\n .vds-basic-autocomplete__container {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n\n vds-basic-input {\n --vds-input-min-width: var(--vds-basic-autocomplete-input-min-width);\n --vds-input-min-width-large: var(--vds-basic-autocomplete-input-min-width-large);\n }\n\n .vds-basic-autocomplete__content {\n display: none;\n flex-direction: column;\n align-items: flex-start;\n align-self: stretch;\n min-width: max-content;\n max-height: fit-content !important;\n border-radius: var(--radius-medium);\n background: var(--surface-medium);\n box-shadow: var(--elevation-shadow-2);\n box-sizing: border-box;\n border: 0.0625rem solid var(--color-border-lowest);\n margin-top: 0.25rem;\n z-index: var(--elevation-layer-5);\n\n &.no-shadow {\n box-shadow: none;\n border: none;\n\n .vds-basic-autocomplete__content__header {\n box-shadow: var(--elevation-shadow-2);\n }\n }\n\n &.has-scroll {\n padding-right: var(--spacing-01);\n }\n\n &.match-width {\n width: var(--trigger-width);\n min-width: var(--trigger-width);\n }\n\n .vds-basic-autocomplete__content-options {\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n border-radius: var(--radius-medium);\n\n &.scrollable {\n padding-right: var(--spacing-01);\n }\n\n &::-webkit-scrollbar {\n background-color: var(--surface-medium);\n width: 0.375rem;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: var(--color-background-neutral-press);\n border-radius: 1rem;\n }\n }\n }\n\n .vds-basic-autocomplete__primary-action,\n .vds-basic-autocomplete__secondary-action {\n display: inline-flex;\n align-items: center;\n }\n }\n\n .vds-floating-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--color-interaction-black-lower);\n opacity: 0.06;\n z-index: var(--elevation-layer-4);\n }\n\n .non-clickable {\n pointer-events: none;\n }\n}\n\n:host(.vds-basic-autocomplete--disabled) {\n pointer-events: none;\n}","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"],"names":[],"mappings":"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"}

package/dist/esm/vds-basic-combo-box.entry.js ADDED Viewed

@@ -0,0 +1,138 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-DTZC-zXo.js';
+import { c as combineClasses } from './combine-classes-B23UkaEC.js';
+import { i as isValidIcon, g as getIconColor, a as setDirtyClass, t as toggleFocusClass } from './vds-basic-input.utils-DswuOEPv.js';
+import { c as cloneAttributes } from './clone-attributes-CqHfuEQc.js';
+const vdsBasicComboBoxCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap\");:root{font-family:\"Roboto Flex\", sans-serif, sans-serif;box-sizing:border-box}:root body{--color-background-disabled:rgba(33, 49, 66, 0.3215686275);--color-background-brand-default:#007DBA;--color-background-brand-hover:#056CA0;--color-background-brand-press:#095B87;--color-background-caution-default:#D0A60B;--color-background-caution-lowest-default:#FFF9E5;--color-background-caution-lowest-hover:#FEF3CC;--color-background-caution-lowest-press:#FEE899;--color-background-danger-default:#F34336;--color-background-danger-high-default:#F34336;--color-background-danger-high-hover:#C83E38;--color-background-danger-high-press:#9D3A3A;--color-background-danger-lowest-default:#FEECEB;--color-background-danger-lowest-hover:#FCD9D6;--color-background-danger-lowest-press:#FAB3AE;--color-background-general-default:#8F9295;--color-background-general-lowest-default:#f7f7f7;--color-background-general-lowest-hover:#EEEEEE;--color-background-general-lowest-press:#DEDEDE;--color-background-healthy-default:#7FAE1B;--color-background-healthy-lowest-default:#F2F7E8;--color-background-healthy-lowest-hover:#E5EED1;--color-background-healthy-lowest-press:#CBDEA3;--color-background-information-default:#056CA0;--color-background-information-lowest-default:#E6F2F8;--color-background-information-lowest-hover:#CCE5F1;--color-background-information-lowest-press:#99CBE3;--color-background-neutral-default:#E8E9EB;--color-background-neutral-hover:#CFD3D7;--color-background-neutral-press:#C4C8CE;--color-background-neutral-lowest-default:#F9FAFA;--color-background-neutral-lowest-hover:#E8E9EB;--color-background-neutral-lowest-press:#CFD3D7;--color-background-warning-default:#D17739;--color-background-warning-lowest-default:#FFF3EB;--color-background-warning-lowest-hover:#FFE7D7;--color-background-warning-lowest-press:#FFD0B0;--color-border-high:#041821;--color-border-medium:rgba(4, 24, 33, 0.6392156863);--color-border-low:rgba(4, 24, 33, 0.3215686275);--color-border-lower:rgba(4, 24, 33, 0.1607843137);--color-border-lowest:rgba(4, 24, 33, 0.0784313725);--color-border-brand:#007DBA;--color-border-brand-hover:#CCE5F1;--color-border-disabled:rgba(33, 49, 66, 0.3215686275);--color-border-danger:#C83E38;--color-border-healthy:#6B9321;--color-border-caution:#D0A60B;--color-border-warning:#D17739;--color-border-information:#056CA0;--color-border-general:#8F9295;--color-border-focus-1:#ffffff;--color-border-focus-2:#133953;--color-border-white-high:#ffffff;--color-border-white-medium:rgba(255, 255, 255, 0.6392156863);--color-border-white-low:rgba(255, 255, 255, 0.3215686275);--color-border-white-lower:rgba(255, 255, 255, 0.1607843137);--color-border-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-icon-high:#041821;--color-icon-medium:rgba(4, 24, 33, 0.6392156863);--color-icon-low:rgba(4, 24, 33, 0.3215686275);--color-icon-disabled:rgba(33, 49, 66, 0.3215686275);--color-icon-healthy:#6B9321;--color-icon-caution:#D0A60B;--color-icon-warning:#D17739;--color-icon-danger:#C83E38;--color-icon-information:#056CA0;--color-icon-general:#8F9295;--color-icon-brand-default:#007DBA;--color-icon-brand-hover:#056CA0;--color-icon-brand-press:#095B87;--color-icon-white-high:#ffffff;--color-icon-white-medium:rgba(255, 255, 255, 0.6392156863);--color-icon-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-black-medium:rgba(16, 25, 36, 0.6392156863);--color-interaction-black-low:rgba(16, 25, 36, 0.3215686275);--color-interaction-black-lower:rgba(16, 25, 36, 0.1607843137);--color-interaction-black-lowest:rgba(16, 25, 36, 0.1215686275);--color-interaction-brand-medium:rgba(0, 125, 186, 0.6392156863);--color-interaction-brand-low:rgba(0, 122, 184, 0.3215686275);--color-interaction-brand-lower:rgba(0, 125, 186, 0.1607843137);--color-interaction-brand-lowest:rgba(0, 125, 186, 0.1215686275);--color-interaction-danger-medium:rgba(200, 62, 56, 0.6392156863);--color-interaction-danger-low:rgba(200, 62, 56, 0.3215686275);--color-interaction-danger-lower:rgba(200, 62, 56, 0.1607843137);--color-interaction-danger-lowest:rgba(200, 62, 56, 0.1215686275);--color-interaction-white-medium:rgba(255, 255, 255, 0.6392156863);--color-interaction-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-white-lower:rgba(255, 255, 255, 0.1607843137);--color-interaction-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-interaction-backdrop:rgba(0, 0, 0, 0.3215686275);--color-link-default:#007DBA;--color-link-hover:#056CA0;--color-link-press:#095B87;--color-text-high:#041821;--color-text-medium:rgba(4, 24, 33, 0.6392156863);--color-text-low:rgba(4, 24, 33, 0.3215686275);--color-text-disabled:rgba(33, 49, 66, 0.3215686275);--color-text-brand:#007DBA;--color-text-caution-high:#46482E;--color-text-caution-medium:#D0A60B;--color-text-danger-high:#47323D;--color-text-danger-medium:#C83E38;--color-text-general-high:#364351;--color-text-general-medium:#8F9295;--color-text-healthy-high:#2C4333;--color-text-healthy-medium:#6B9321;--color-text-information-high:#133953;--color-text-information-medium:#056CA0;--color-text-warning-high:#463C3A;--color-text-warning-medium:#D17739;--color-text-white-high:#ffffff;--color-text-white-medium:rgba(255, 255, 255, 0.6392156863);--color-text-white-low:rgba(255, 255, 255, 0.3215686275);--surface-higher:#ffffff;--surface-high:#ffffff;--surface-medium:#ffffff;--surface-low:#FBFBFB;--surface-lower:#F2F3F5;--surface-neutral-default:#ffffff;--surface-neutral-hover:#E8E9EB;--surface-neutral-press:#CFD3D7;--surface-overlay-default:#213142;--surface-overlay-hover:#334152;--surface-overlay-press:#6F7986;--surface-elevation-01:0px 0px 3px 0px rgba(29, 46, 64, 0.1), 0px 3px 3px 0px rgba(29, 46, 64, 0.1);--surface-elevation-02:0px 0px 6px 0px rgba(29, 46, 64, 0.1), 0px 6px 6px 0px rgba(29, 46, 64, 0.1);--surface-elevation-03:0px 0px 12px 0px rgba(29, 46, 64, 0.1), 0px 12px 12px 0px rgba(29, 46, 64, 0.1);--surface-elevation-04:0px 0px 24px 0px rgba(29, 46, 64, 0.1), 0px 24px 24px 0px rgba(29, 46, 64, 0.1);--box-shadow-color-01:rgba(0, 0, 0, 0.12);--box-shadow-color-02:rgba(0, 0, 0, 0.14);--size-56:3.5rem;--size-44:2.75rem;--size-36:2.25rem;--size-32:2rem;--size-28:1.75rem;--size-24:1.5rem;--size-20:1.25rem;--size-16:1rem;--size-14:0.875rem;--size-12:0.75rem;--size-10:0.625rem;--font-light:300;--font-semibold:600;--font-bold:800;--height-64:4rem;--height-52:3.25rem;--height-44:2.75rem;--height-40:2.5rem;--height-36:2.25rem;--height-32:2rem;--height-28:1.75rem;--height-24:1.5rem;--height-20:1.25rem;--height-16:1rem;--height-12:0.75rem}:root .theme-light{--color-background-disabled:rgba(33, 49, 66, 0.3215686275);--color-background-brand-default:#007DBA;--color-background-brand-hover:#056CA0;--color-background-brand-press:#095B87;--color-background-caution-default:#D0A60B;--color-background-caution-lowest-default:#FFF9E5;--color-background-caution-lowest-hover:#FEF3CC;--color-background-caution-lowest-press:#FEE899;--color-background-danger-default:#F34336;--color-background-danger-high-default:#F34336;--color-background-danger-high-hover:#C83E38;--color-background-danger-high-press:#9D3A3A;--color-background-danger-lowest-default:#FEECEB;--color-background-danger-lowest-hover:#FCD9D6;--color-background-danger-lowest-press:#FAB3AE;--color-background-general-default:#8F9295;--color-background-general-lowest-default:#f7f7f7;--color-background-general-lowest-hover:#EEEEEE;--color-background-general-lowest-press:#DEDEDE;--color-background-healthy-default:#7FAE1B;--color-background-healthy-lowest-default:#F2F7E8;--color-background-healthy-lowest-hover:#E5EED1;--color-background-healthy-lowest-press:#CBDEA3;--color-background-information-default:#056CA0;--color-background-information-lowest-default:#E6F2F8;--color-background-information-lowest-hover:#CCE5F1;--color-background-information-lowest-press:#99CBE3;--color-background-neutral-default:#E8E9EB;--color-background-neutral-hover:#CFD3D7;--color-background-neutral-press:#C4C8CE;--color-background-neutral-lowest-default:#F9FAFA;--color-background-neutral-lowest-hover:#E8E9EB;--color-background-neutral-lowest-press:#CFD3D7;--color-background-warning-default:#D17739;--color-background-warning-lowest-default:#FFF3EB;--color-background-warning-lowest-hover:#FFE7D7;--color-background-warning-lowest-press:#FFD0B0;--color-border-high:#041821;--color-border-medium:rgba(4, 24, 33, 0.6392156863);--color-border-low:rgba(4, 24, 33, 0.3215686275);--color-border-lower:rgba(4, 24, 33, 0.1607843137);--color-border-lowest:rgba(4, 24, 33, 0.0784313725);--color-border-brand:#007DBA;--color-border-brand-hover:#CCE5F1;--color-border-disabled:rgba(33, 49, 66, 0.3215686275);--color-border-danger:#C83E38;--color-border-healthy:#6B9321;--color-border-caution:#D0A60B;--color-border-warning:#D17739;--color-border-information:#056CA0;--color-border-general:#8F9295;--color-border-focus-1:#ffffff;--color-border-focus-2:#133953;--color-border-white-high:#ffffff;--color-border-white-medium:rgba(255, 255, 255, 0.6392156863);--color-border-white-low:rgba(255, 255, 255, 0.3215686275);--color-border-white-lower:rgba(255, 255, 255, 0.1607843137);--color-border-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-icon-high:#041821;--color-icon-medium:rgba(4, 24, 33, 0.6392156863);--color-icon-low:rgba(4, 24, 33, 0.3215686275);--color-icon-disabled:rgba(33, 49, 66, 0.3215686275);--color-icon-healthy:#6B9321;--color-icon-caution:#D0A60B;--color-icon-warning:#D17739;--color-icon-danger:#C83E38;--color-icon-information:#056CA0;--color-icon-general:#8F9295;--color-icon-brand-default:#007DBA;--color-icon-brand-hover:#056CA0;--color-icon-brand-press:#095B87;--color-icon-white-high:#ffffff;--color-icon-white-medium:rgba(255, 255, 255, 0.6392156863);--color-icon-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-black-medium:rgba(16, 25, 36, 0.6392156863);--color-interaction-black-low:rgba(16, 25, 36, 0.3215686275);--color-interaction-black-lower:rgba(16, 25, 36, 0.1607843137);--color-interaction-black-lowest:rgba(16, 25, 36, 0.1215686275);--color-interaction-brand-medium:rgba(0, 125, 186, 0.6392156863);--color-interaction-brand-low:rgba(0, 122, 184, 0.3215686275);--color-interaction-brand-lower:rgba(0, 125, 186, 0.1607843137);--color-interaction-brand-lowest:rgba(0, 125, 186, 0.1215686275);--color-interaction-danger-medium:rgba(200, 62, 56, 0.6392156863);--color-interaction-danger-low:rgba(200, 62, 56, 0.3215686275);--color-interaction-danger-lower:rgba(200, 62, 56, 0.1607843137);--color-interaction-danger-lowest:rgba(200, 62, 56, 0.1215686275);--color-interaction-white-medium:rgba(255, 255, 255, 0.6392156863);--color-interaction-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-white-lower:rgba(255, 255, 255, 0.1607843137);--color-interaction-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-interaction-backdrop:rgba(0, 0, 0, 0.3215686275);--color-link-default:#007DBA;--color-link-hover:#056CA0;--color-link-press:#095B87;--color-text-high:#041821;--color-text-medium:rgba(4, 24, 33, 0.6392156863);--color-text-low:rgba(4, 24, 33, 0.3215686275);--color-text-disabled:rgba(33, 49, 66, 0.3215686275);--color-text-brand:#007DBA;--color-text-caution-high:#46482E;--color-text-caution-medium:#D0A60B;--color-text-danger-high:#47323D;--color-text-danger-medium:#C83E38;--color-text-general-high:#364351;--color-text-general-medium:#8F9295;--color-text-healthy-high:#2C4333;--color-text-healthy-medium:#6B9321;--color-text-information-high:#133953;--color-text-information-medium:#056CA0;--color-text-warning-high:#463C3A;--color-text-warning-medium:#D17739;--color-text-white-high:#ffffff;--color-text-white-medium:rgba(255, 255, 255, 0.6392156863);--color-text-white-low:rgba(255, 255, 255, 0.3215686275);--surface-higher:#ffffff;--surface-high:#ffffff;--surface-medium:#ffffff;--surface-low:#FBFBFB;--surface-lower:#F2F3F5;--surface-neutral-default:#ffffff;--surface-neutral-hover:#E8E9EB;--surface-neutral-press:#CFD3D7;--surface-overlay-default:#213142;--surface-overlay-hover:#334152;--surface-overlay-press:#6F7986;--surface-elevation-01:0px 0px 3px 0px rgba(29, 46, 64, 0.1), 0px 3px 3px 0px rgba(29, 46, 64, 0.1);--surface-elevation-02:0px 0px 6px 0px rgba(29, 46, 64, 0.1), 0px 6px 6px 0px rgba(29, 46, 64, 0.1);--surface-elevation-03:0px 0px 12px 0px rgba(29, 46, 64, 0.1), 0px 12px 12px 0px rgba(29, 46, 64, 0.1);--surface-elevation-04:0px 0px 24px 0px rgba(29, 46, 64, 0.1), 0px 24px 24px 0px rgba(29, 46, 64, 0.1);--box-shadow-color-01:rgba(0, 0, 0, 0.12);--box-shadow-color-02:rgba(0, 0, 0, 0.14);--size-56:3.5rem;--size-44:2.75rem;--size-36:2.25rem;--size-32:2rem;--size-28:1.75rem;--size-24:1.5rem;--size-20:1.25rem;--size-16:1rem;--size-14:0.875rem;--size-12:0.75rem;--size-10:0.625rem;--font-light:300;--font-semibold:600;--font-bold:800;--height-64:4rem;--height-52:3.25rem;--height-44:2.75rem;--height-40:2.5rem;--height-36:2.25rem;--height-32:2rem;--height-28:1.75rem;--height-24:1.5rem;--height-20:1.25rem;--height-16:1rem;--height-12:0.75rem}:root .theme-dark{--color-background-disabled:rgba(161, 167, 176, 0.3215686275);--color-background-brand-default:#056CA0;--color-background-brand-hover:#095B87;--color-background-brand-press:#0E4A6C;--color-background-caution-default:#FED133;--color-background-caution-lowest-default:#2F3834;--color-background-caution-lowest-hover:#46482E;--color-background-caution-lowest-press:#746722;--color-background-danger-default:#C83E38;--color-background-danger-high-default:#C83E38;--color-background-danger-high-hover:#9D3A3A;--color-background-danger-high-press:#72363B;--color-background-danger-lowest-default:#72363B;--color-background-danger-lowest-hover:#47323D;--color-background-danger-lowest-press:#2E2B3A;--color-background-general-default:#BDBDBD;--color-background-general-lowest-default:#273646;--color-background-general-lowest-hover:#364351;--color-background-general-lowest-press:#535D67;--color-background-healthy-default:#B2CE76;--color-background-healthy-lowest-default:#223637;--color-background-healthy-lowest-hover:#2C4333;--color-background-healthy-lowest-press:#415E2D;--color-background-information-default:#3397C7;--color-background-information-lowest-default:#153147;--color-background-information-lowest-hover:#133953;--color-background-information-lowest-press:#0E4A6C;--color-background-neutral-default:#101924;--color-background-neutral-hover:#213142;--color-background-neutral-press:#334152;--color-background-neutral-lowest-default:#0B121A;--color-background-neutral-lowest-hover:#101924;--color-background-neutral-lowest-press:#213142;--color-background-warning-default:#FFA261;--color-background-warning-lowest-default:#2F323A;--color-background-warning-lowest-hover:#463C3A;--color-background-warning-lowest-press:#745039;--color-border-high:#ffffff;--color-border-medium:rgba(255, 255, 255, 0.6392156863);--color-border-low:rgba(255, 255, 255, 0.3215686275);--color-border-lower:rgba(255, 255, 255, 0.1607843137);--color-border-lowest:rgba(255, 255, 255, 0.1215686275);--color-border-brand:#66B1D5;--color-border-brand-hover:#133953;--color-border-disabled:rgba(161, 167, 176, 0.3215686275);--color-border-danger:#F78E86;--color-border-healthy:#98BE48;--color-border-warning:#FFA261;--color-border-caution:#FED133;--color-border-information:#66B1D5;--color-border-general:#CDCDCD;--color-border-focus-1:#041821;--color-border-focus-2:#CCE5F1;--color-border-white-high:#041821;--color-border-white-medium:rgba(4, 24, 33, 0.6392156863);--color-border-white-low:rgba(4, 24, 33, 0.3215686275);--color-border-white-lower:rgba(4, 24, 33, 0.1607843137);--color-border-white-lowest:rgba(4, 24, 33, 0.0784313725);--color-icon-high:#ffffff;--color-icon-medium:rgba(255, 255, 255, 0.6392156863);--color-icon-low:rgba(255, 255, 255, 0.3215686275);--color-icon-disabled:rgba(161, 167, 176, 0.3215686275);--color-icon-healthy:#98BE48;--color-icon-caution:#FED133;--color-icon-warning:#FFA261;--color-icon-danger:#F78E86;--color-icon-information:#66B1D5;--color-icon-general:#CDCDCD;--color-icon-brand-default:#66B1D5;--color-icon-brand-hover:#99CBE3;--color-icon-brand-press:#CCE5F1;--color-icon-white-high:#041821;--color-icon-white-medium:rgba(4, 24, 33, 0.6392156863);--color-icon-white-low:rgba(4, 24, 33, 0.3215686275);--color-interaction-black-medium:rgba(255, 255, 255, 0.6392156863);--color-interaction-black-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-black-lower:rgba(255, 255, 255, 0.1607843137);--color-interaction-black-lowest:rgba(255, 255, 255, 0.1215686275);--color-interaction-brand-medium:rgba(102, 177, 213, 0.6392156863);--color-interaction-brand-low:rgba(102, 177, 213, 0.3215686275);--color-interaction-brand-lower:rgba(102, 177, 213, 0.1607843137);--color-interaction-brand-lowest:rgba(102, 177, 213, 0.1215686275);--color-interaction-danger-medium:rgba(245, 104, 94, 0.6392156863);--color-interaction-danger-low:rgba(245, 104, 94, 0.3215686275);--color-interaction-danger-lower:rgba(245, 104, 94, 0.1607843137);--color-interaction-danger-lowest:rgba(245, 104, 94, 0.1215686275);--color-interaction-white-medium:rgba(16, 25, 36, 0.6392156863);--color-interaction-white-low:rgba(16, 25, 36, 0.3215686275);--color-interaction-white-lower:rgba(16, 25, 36, 0.1607843137);--color-interaction-white-lowest:rgba(16, 25, 36, 0.1215686275);--color-interaction-backdrop:rgba(0, 0, 0, 0.6392156863);--color-link-default:#66B1D5;--color-link-hover:#99CBE3;--color-link-press:#CCE5F1;--color-text-high:#ffffff;--color-text-medium:rgba(255, 255, 255, 0.6392156863);--color-text-low:rgba(255, 255, 255, 0.3215686275);--color-text-disabled:rgba(161, 167, 176, 0.6392156863);--color-text-brand:#007DBA;--color-text-caution-high:#FEE899;--color-text-caution-medium:#FEDC66;--color-text-danger-high:#FAB3AE;--color-text-danger-medium:#F78E86;--color-text-general-high:#DEDEDE;--color-text-general-medium:#CDCDCD;--color-text-healthy-high:#CBDEA3;--color-text-healthy-medium:#B2CE76;--color-text-information-high:#99CBE3;--color-text-information-medium:#66B1D5;--color-text-warning-high:#FFD0B0;--color-text-warning-medium:#FFB988;--color-text-white-high:#041821;--color-text-white-medium:rgba(4, 24, 33, 0.6392156863);--color-text-white-low:rgba(4, 24, 33, 0.3215686275);--surface-higher:#192938;--surface-high:#162431;--surface-medium:#0E0E0E;--surface-low:#000000;--surface-lower:#0E0E0E;--surface-neutral-default:#101924;--surface-neutral-hover:#213142;--surface-neutral-press:#6F7986;--surface-overlay-default:#ffffff;--surface-overlay-hover:#E8E9EB;--surface-overlay-press:#CFD3D7;--surface-elevation-01:0px 0px 3px 0px rgba(0, 0, 0, 0.3), 0px 3px 3px 0px rgba(0, 0, 0, 0.3);--surface-elevation-02:0px 0px 6px 0px rgba(0, 0, 0, 0.3), 0px 6px 6px 0px rgba(0, 0, 0, 0.3);--surface-elevation-03:0px 0px 12px 0px rgba(0, 0, 0, 0.3), 0px 12px 12px 0px rgba(0, 0, 0, 0.3);--surface-elevation-04:0px 0px 24px 0px rgba(0, 0, 0, 0.3), 0px 24px 24px 0px rgba(0, 0, 0, 0.3);--box-shadow-color-01:rgba(0, 0, 0, 0.24);--box-shadow-color-02:rgba(0, 0, 0, 0.28);--size-56:3.5rem;--size-44:2.75rem;--size-36:2.25rem;--size-32:2rem;--size-28:1.75rem;--size-24:1.5rem;--size-20:1.25rem;--size-16:1rem;--size-14:0.875rem;--size-12:0.75rem;--size-10:0.625rem;--font-light:300;--font-semibold:600;--font-bold:800;--height-64:4rem;--height-52:3.25rem;--height-44:2.75rem;--height-40:2.5rem;--height-36:2.25rem;--height-32:2rem;--height-28:1.75rem;--height-24:1.5rem;--height-20:1.25rem;--height-16:1rem;--height-12:0.75rem}:root body{--spacing-00:0rem;--spacing-01:0.125rem;--spacing-02:0.25rem;--spacing-03:0.5rem;--spacing-04:0.75rem;--spacing-05:1rem;--spacing-06:1.25rem;--spacing-07:1.5rem;--spacing-08:1.75rem;--spacing-09:2rem;--spacing-10:2.25rem;--spacing-11:2.5rem;--spacing-12:2.75rem;--spacing-13:3rem;--spacing-14:3.25rem;--spacing-15:3.5rem;--spacing-16:3.75rem;--spacing-17:4rem;--spacing-18:4.25rem;--spacing-19:4.5rem;--spacing-20:4.75rem;--opacity-64:0.64;--opacity-32:0.32;--opacity-16:0.16;--opacity-08:0.08;--radius-sharp:var(--spacing-00);--radius-medium:var(--spacing-02);--radius-large:var(--spacing-03);--radius-pill:var(--spacing-16);--radius-circle:50%;--static-brand-0:#ffffff;--static-brand-50:#E6F2F8;--static-brand-100:#CCE5F1;--static-brand-200:#99CBE3;--static-brand-300:#66B1D5;--static-brand-400:#3397C7;--static-brand-500:#007DBA;--static-brand-main:#007DBA;--static-brand-600:#056CA0;--static-brand-700:#095B87;--static-brand-800:#0E4A6C;--static-brand-900:#133953;--static-brand-950:#153147;--static-brand-1000:#041821;--static-brand-1000-medium:rgba(4, 24, 33, 0.6392156863);--static-brand-1000-low:rgba(4, 24, 33, 0.3215686275);--static-brand-1000-lower:rgba(4, 24, 33, 0.1607843137);--static-brand-1000-lowest:rgba(4, 24, 33, 0.0784313725);--static-green-0:#ffffff;--static-green-50:#F2F7E8;--static-green-100:#E5EED1;--static-green-200:#CBDEA3;--static-green-300:#B2CE76;--static-green-400:#98BE48;--static-green-500:#7FAE1B;--static-green-main:#7FAE1B;--static-green-600:#6B9321;--static-green-700:#557827;--static-green-800:#415E2D;--static-green-900:#2C4333;--static-green-950:#223637;--static-yellow-0:#ffffff;--static-yellow-50:#FFF9E5;--static-yellow-100:#FEF3CC;--static-yellow-200:#FEE899;--static-yellow-300:#FEDC66;--static-yellow-400:#FED133;--static-yellow-500:#FEC600;--static-yellow-main:#FEC600;--static-yellow-600:#D0A60B;--static-yellow-700:#A18717;--static-yellow-800:#746722;--static-yellow-900:#46482E;--static-yellow-950:#2F3834;--static-red-0:#ffffff;--static-red-50:#FEECEB;--static-red-100:#FCD9D6;--static-red-200:#FAB3AE;--static-red-300:#F78E86;--static-red-400:#F5685E;--static-red-500:#F34336;--static-red-main:#F34336;--static-red-600:#C83E38;--static-red-700:#9D3A3A;--static-red-800:#72363B;--static-red-900:#47323D;--static-red-950:#2E2B3A;--static-grey-0:#ffffff;--static-grey-50:#f7f7f7;--static-grey-100:#EEEEEE;--static-grey-200:#DEDEDE;--static-grey-300:#CDCDCD;--static-grey-400:#BDBDBD;--static-grey-500:#ADADAD;--static-grey-main:#ADADAD;--static-grey-600:#8F9295;--static-grey-700:#71787F;--static-grey-800:#535D67;--static-grey-900:#364351;--static-grey-950:#273646;--static-orange-0:#ffffff;--static-orange-50:#FFF3EB;--static-orange-100:#FFE7D7;--static-orange-200:#FFD0B0;--static-orange-300:#FFB988;--static-orange-400:#FFA261;--static-orange-500:#FF8B3A;--static-orange-main:#FF8B3A;--static-orange-600:#D17739;--static-orange-700:#A2633A;--static-orange-800:#745039;--static-orange-900:#463C3A;--static-orange-950:#2F323A;--static-dataviz-cat-sea-green:#0FB5AE;--static-dataviz-cat-palatinate-blue:#4046CA;--static-dataviz-cat-tangerine:#F68511;--static-dataviz-cat-magenta:#DE3D82;--static-dataviz-cat-tropical-indigo:#7E84FA;--static-dataviz-cat-malachite:#72E06A;--static-dataviz-cat-azure:#147AF3;--static-dataviz-cat-violet:#7326D3;--static-dataviz-cat-yellow:#E8C600;--static-dataviz-cat-alloy-orange:#CB5D00;--static-dataviz-cat-green:#008F5D;--static-dataviz-cat-lime:#BCE931;--static-dataviz-seq-viridis-50:#FDE725;--static-dataviz-seq-viridis-100:#D2E21B;--static-dataviz-seq-viridis-150:#A5DB36;--static-dataviz-seq-viridis-200:#7AD151;--static-dataviz-seq-viridis-250:#54C568;--static-dataviz-seq-viridis-300:#35B779;--static-dataviz-seq-viridis-350:#22A884;--static-dataviz-seq-viridis-400:#1F988B;--static-dataviz-seq-viridis-450:#23888E;--static-dataviz-seq-viridis-500:#2A788E;--static-dataviz-seq-viridis-550:#31688E;--static-dataviz-seq-viridis-600:#39568C;--static-dataviz-seq-viridis-650:#414487;--static-dataviz-seq-viridis-700:#472F7D;--static-dataviz-seq-viridis-750:#481A6C;--static-dataviz-seq-viridis-800:#440154;--static-dataviz-seq-magma-50:#FCFDBF;--static-dataviz-seq-magma-100:#FDDEA0;--static-dataviz-seq-magma-150:#FEBF84;--static-dataviz-seq-magma-200:#FE9F6D;--static-dataviz-seq-magma-250:#FA7F5E;--static-dataviz-seq-magma-300:#F1605D;--static-dataviz-seq-magma-350:#DE4968;--static-dataviz-seq-magma-400:#C43C75;--static-dataviz-seq-magma-450:#A8327D;--static-dataviz-seq-magma-500:#8C2981;--static-dataviz-seq-magma-550:#721F81;--static-dataviz-seq-magma-600:#57157E;--static-dataviz-seq-magma-650:#3B0F70;--static-dataviz-seq-magma-700:#20114B;--static-dataviz-seq-magma-750:#0B0924;--static-dataviz-seq-magma-800:#000004;--static-dataviz-seq-rose-50:#FFF4DE;--static-dataviz-seq-rose-100:#FFDDD8;--static-dataviz-seq-rose-150:#FFC6D2;--static-dataviz-seq-rose-200:#FCAFCB;--static-dataviz-seq-rose-250:#F898C4;--static-dataviz-seq-rose-300:#F380BC;--static-dataviz-seq-rose-350:#ED67B4;--static-dataviz-seq-rose-400:#E64BAC;--static-dataviz-seq-rose-450:#D03EA0;--static-dataviz-seq-rose-500:#B93495;--static-dataviz-seq-rose-550:#A12A8B;--static-dataviz-seq-rose-600:#892282;--static-dataviz-seq-rose-650:#701C7A;--static-dataviz-seq-rose-700:#551672;--static-dataviz-seq-rose-750:#37126C;--static-dataviz-seq-rose-800:#001066;--static-dataviz-seq-forest-50:#FFFFE0;--static-dataviz-seq-forest-100:#E2F5BD;--static-dataviz-seq-forest-150:#C5EA99;--static-dataviz-seq-forest-200:#A6DF73;--static-dataviz-seq-forest-250:#8FD16C;--static-dataviz-seq-forest-300:#79C365;--static-dataviz-seq-forest-350:#62B55E;--static-dataviz-seq-forest-400:#4CA658;--static-dataviz-seq-forest-450:#3B9752;--static-dataviz-seq-forest-500:#31884F;--static-dataviz-seq-forest-550:#28794C;--static-dataviz-seq-forest-600:#1E6A48;--static-dataviz-seq-forest-650:#155B45;--static-dataviz-seq-forest-700:#0E4D41;--static-dataviz-seq-forest-750:#073F3E;--static-dataviz-seq-forest-800:#00313A;--static-dataviz-seq-cerulean-50:#EAFFF1;--static-dataviz-seq-cerulean-100:#C9F1E4;--static-dataviz-seq-cerulean-150:#A7E3D7;--static-dataviz-seq-cerulean-200:#85D5CA;--static-dataviz-seq-cerulean-250:#6CC5C0;--static-dataviz-seq-cerulean-300:#58B4B9;--static-dataviz-seq-cerulean-350:#44A2B1;--static-dataviz-seq-cerulean-400:#3091AA;--static-dataviz-seq-cerulean-450:#2880A0;--static-dataviz-seq-cerulean-500:#246E96;--static-dataviz-seq-cerulean-550:#215D8B;--static-dataviz-seq-cerulean-600:#1D4C81;--static-dataviz-seq-cerulean-650:#1C3B77;--static-dataviz-seq-cerulean-700:#1B296D;--static-dataviz-seq-cerulean-750:#1A1662;--static-dataviz-seq-cerulean-800:#180055;--static-dataviz-div-orange-yellow-seafoam-0:#580000;--static-dataviz-div-orange-yellow-seafoam-50:#79260B;--static-dataviz-div-orange-yellow-seafoam-100:#9C4511;--static-dataviz-div-orange-yellow-seafoam-150:#BD651A;--static-dataviz-div-orange-yellow-seafoam-200:#DD8629;--static-dataviz-div-orange-yellow-seafoam-250:#F5AD52;--static-dataviz-div-orange-yellow-seafoam-300:#FED693;--static-dataviz-div-orange-yellow-seafoam-350:#FFFFE0;--static-dataviz-div-orange-yellow-seafoam-400:#BBE4D1;--static-dataviz-div-orange-yellow-seafoam-450:#76C7BE;--static-dataviz-div-orange-yellow-seafoam-500:#3EA8A6;--static-dataviz-div-orange-yellow-seafoam-550:#208288;--static-dataviz-div-orange-yellow-seafoam-600:#076769;--static-dataviz-div-orange-yellow-seafoam-650:#00494B;--static-dataviz-div-orange-yellow-seafoam-700:#002C2D;--static-dataviz-div-red-yellow-blue-0:#4A001E;--static-dataviz-div-red-yellow-blue-50:#751232;--static-dataviz-div-red-yellow-blue-100:#A52747;--static-dataviz-div-red-yellow-blue-150:#C65154;--static-dataviz-div-red-yellow-blue-200:#E47961;--static-dataviz-div-red-yellow-blue-250:#F0A882;--static-dataviz-div-red-yellow-blue-300:#FAD4AC;--static-dataviz-div-red-yellow-blue-350:#FFFFE0;--static-dataviz-div-red-yellow-blue-400:#BCE2CF;--static-dataviz-div-red-yellow-blue-450:#89C0C4;--static-dataviz-div-red-yellow-blue-500:#579EB9;--static-dataviz-div-red-yellow-blue-550:#397AA8;--static-dataviz-div-red-yellow-blue-600:#1C5796;--static-dataviz-div-red-yellow-blue-650:#163771;--static-dataviz-div-red-yellow-blue-700:#10194D;--static-dataviz-div-red-blue-0:#4A001E;--static-dataviz-div-red-blue-50:#731331;--static-dataviz-div-red-blue-100:#9F2945;--static-dataviz-div-red-blue-150:#CC415A;--static-dataviz-div-red-blue-200:#E06E85;--static-dataviz-div-red-blue-250:#ED9AB0;--static-dataviz-div-red-blue-300:#F8C3D9;--static-dataviz-div-red-blue-350:#FAF0FF;--static-dataviz-div-red-blue-400:#C6D0F2;--static-dataviz-div-red-blue-450:#92B2DE;--static-dataviz-div-red-blue-500:#5D94CB;--static-dataviz-div-red-blue-550:#2F74B3;--static-dataviz-div-red-blue-600:#265191;--static-dataviz-div-red-blue-650:#163670;--static-dataviz-div-red-blue-700:#0B194C;--static-white:#ffffff;--static-black:#000000;--elevation-shadow-0:none;--elevation-shadow-1:0 0 2px var(--box-shadow-color-01), 0 1px 2px var(--box-shadow-color-02);--elevation-shadow-2:0 0 2px var(--box-shadow-color-01), 0 2px 4px var(--box-shadow-color-02);--elevation-shadow-3:0 0 2px var(--box-shadow-color-01), 0 4px 8px var(--box-shadow-color-02);--elevation-shadow-5:0 0 2px var(--box-shadow-color-01), 0 8px 16px var(--box-shadow-color-02);--elevation-shadow-8:0 0 8px var(--box-shadow-color-01), 0 14px 28px var(--box-shadow-color-02);--elevation-shadow-17:0 0 8px var(--box-shadow-color-01), 0 32px 64px var(--box-shadow-color-02);--elevation-layer-0:0;--elevation-layer-1:1;--elevation-layer-2:3;--elevation-layer-3:6;--elevation-layer-4:8;--elevation-layer-5:12;--border-thickness-01:0.0625rem;--border-thickness-02:0.078125rem;--border-thickness-03:0.09375rem;--border-thickness-04:0.109375rem;--border-thickness-05:0.125rem;--border-thickness-06:0.140625rem;--border-thickness-07:0.15625rem;--border-thickness-08:0.171875rem;--border-thickness-09:0.1875rem}:root body .vds-font-display-large{font-size:3.5rem;font-weight:300;line-height:4rem;letter-spacing:normal}:root body .vds-font-display-medium{font-size:2.75rem;font-weight:300;line-height:3.25rem;letter-spacing:normal}:root body .vds-font-display-small{font-size:2.25rem;font-weight:300;line-height:2.75rem;letter-spacing:normal}:root body .vds-font-headline-large{font-size:2rem;font-weight:600;line-height:2.5rem;letter-spacing:normal}:root body .vds-font-headline-medium{font-size:1.75rem;font-weight:600;line-height:2.25rem;letter-spacing:normal}:root body .vds-font-headline-small{font-size:1.5rem;font-weight:600;line-height:2rem;letter-spacing:normal}:root body .vds-font-title-large{font-size:1.25rem;font-weight:600;line-height:1.75rem;letter-spacing:0.00875rem}:root body .vds-font-title-medium{font-size:1rem;font-weight:600;line-height:1.5rem;letter-spacing:normal}:root body .vds-font-title-small{font-size:0.875rem;font-weight:600;line-height:1.25rem;letter-spacing:normal}:root body .vds-font-title-extra-small{font-size:0.75rem;font-weight:600;line-height:1rem;letter-spacing:0.00875rem}:root body .vds-font-title-2x-small{font-size:0.625rem;font-weight:600;line-height:0.75rem;letter-spacing:0.00875rem}:root body .vds-font-body-large{font-size:1rem;font-weight:300;line-height:1.5rem;letter-spacing:normal}:root body .vds-font-body-medium{font-size:0.875rem;font-weight:300;line-height:1.25rem;letter-spacing:normal}:root body .vds-font-body-small{font-size:0.75rem;font-weight:300;line-height:1rem;letter-spacing:normal}.vds__divider{width:0.0625rem;height:1rem;margin:var(--spacing-01);background-color:var(--color-border-low)}.content_divider_vertical{opacity:0.16;background:var(--color-border-high);height:1rem;width:1px}.vds-header_content-section{display:flex;gap:var(--spacing-03)}.vds__menu--backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);backdrop-filter:grayscale(100%) opacity(0.5);pointer-events:auto}:host{display:block}:host .vds-combo-box__container{display:flex;align-items:center;flex-shrink:0;box-sizing:border-box;border-radius:var(--radius-medium);border:var(--border-thickness-01) solid var(--color-border-low);background:var(--surface-medium)}:host .vds-combo-box__container:hover{border-color:var(--color-border-brand);outline:var(--border-thickness-05) solid var(--color-interaction-brand-low)}:host .vds-combo-box__container .vds-combo-box__informative-icon::part(svg-icon){display:flex;justify-content:center;align-items:center}:host .vds-combo-box__container.vds-combo-box__container--focus{border-color:var(--color-border-brand)}:host .vds-combo-box__container.vds-combo-box__container--error{border-color:var(--color-border-danger);outline-color:var(--color-interaction-danger-medium)}:host .vds-combo-box__container.vds-combo-box__container--error .vds-combo-box__input{color:var(--color-text-danger-medium)}:host .vds-combo-box__container.vds-combo-box__container--readonly{border-color:var(--color-border-low);outline:none;background-color:var(--color-interaction-black-lowest)}:host .vds-combo-box__container.vds-combo-box__container--readonly .vds-combo-box__chip{pointer-events:none}:host .vds-combo-box__container.vds-combo-box__container--readonly .vds-combo-box__input{color:var(--color-text-medium)}:host .vds-combo-box__container.vds-combo-box__container--disabled{border-color:var(--color-border-lowest);outline:none;background-color:var(--surface-medium)}:host .vds-combo-box__container.vds-combo-box__container--disabled .vds-combo-box__input{color:var(--color-text-disabled)}:host .vds-combo-box__container.vds-combo-box__container--disabled .vds-combo-box__input::placeholder{color:var(--color-text-disabled)}:host .vds-combo-box__container.vds-combo-box--size-small{gap:var(--spacing-01);padding:calc(var(--spacing-02) - 1px) calc(var(--spacing-03) - 1px);min-height:var(--spacing-07)}:host .vds-combo-box__container.vds-combo-box--size-small .vds-combo-box__input-content{row-gap:var(--spacing-02)}:host .vds-combo-box__container.vds-combo-box--size-small .vds-combo-box__input-content.vds-combo-box__input-content--has-value{column-gap:var(--spacing-01)}:host .vds-combo-box__container.vds-combo-box--size-small .vds-combo-box__input-content .vds-combo-box__chip-container{height:var(--spacing-04)}:host .vds-combo-box__container.vds-combo-box--size-small .vds-combo-box__input-content .vds-combo-box__chip-container .vds-combo-box__chip{height:var(--spacing-05);transform:translateY(-5px)}:host .vds-combo-box__container.vds-combo-box--size-small .vds-combo-box__input-content .vds-combo-box__input{font-family:\"Roboto Flex\", sans-serif;font-size:0.75rem;font-weight:300;line-height:1rem;letter-spacing:normal}:host .vds-combo-box__container.vds-combo-box--size-medium{gap:var(--spacing-02);padding:calc(var(--spacing-03) - 1px) calc(var(--spacing-04) - 1px);min-height:var(--spacing-10)}:host .vds-combo-box__container.vds-combo-box--size-medium .vds-combo-box__input-content{row-gap:var(--spacing-03)}:host .vds-combo-box__container.vds-combo-box--size-medium .vds-combo-box__input-content.vds-combo-box__input-content--has-value{column-gap:var(--spacing-02)}:host .vds-combo-box__container.vds-combo-box--size-medium .vds-combo-box__input-content .vds-combo-box__chip-container{height:var(--spacing-06)}:host .vds-combo-box__container.vds-combo-box--size-medium .vds-combo-box__input-content .vds-combo-box__chip-container .vds-combo-box__chip{height:var(--spacing-07);transform:translateY(-2px)}:host .vds-combo-box__container.vds-combo-box--size-medium .vds-combo-box__input-content .vds-combo-box__input{font-family:\"Roboto Flex\", sans-serif;font-size:0.875rem;font-weight:300;line-height:1.25rem;letter-spacing:normal}:host .vds-combo-box__container.vds-combo-box--size-large{gap:var(--spacing-03);padding:calc(var(--spacing-04) - 1px) calc(var(--spacing-05) - 1px);min-height:var(--spacing-13)}:host .vds-combo-box__container.vds-combo-box--size-large .vds-combo-box__input-content{row-gap:var(--spacing-03)}:host .vds-combo-box__container.vds-combo-box--size-large .vds-combo-box__input-content.vds-combo-box__input-content--has-value{column-gap:var(--spacing-02)}:host .vds-combo-box__container.vds-combo-box--size-large .vds-combo-box__input-content .vds-combo-box__chip-container{height:var(--spacing-07)}:host .vds-combo-box__container.vds-combo-box--size-large .vds-combo-box__input-content .vds-combo-box__chip-container .vds-combo-box__chip{height:var(--spacing-08);transform:translateY(-2px)}:host .vds-combo-box__container.vds-combo-box--size-large .vds-combo-box__input-content .vds-combo-box__input{font-family:\"Roboto Flex\", sans-serif;font-size:1rem;font-weight:300;line-height:1.5rem;letter-spacing:normal}:host .vds-combo-box__container .vds-combo-box__input-content{align-items:center;color:inherit;display:flex;flex-wrap:wrap;flex:1 1}:host .vds-combo-box__container .vds-combo-box__input{display:inline-block;flex:1 1;border:none;background:transparent;padding:0;overflow:hidden;color:var(--color-text-high);font-feature-settings:\"clig\" off, \"liga\" off;text-overflow:ellipsis;white-space:nowrap;font-style:normal}:host .vds-combo-box__container .vds-combo-box__input::placeholder{color:var(--color-text-medium)}:host .vds-combo-box__container .vds-combo-box__input:hover,:host .vds-combo-box__container .vds-combo-box__input:focus{border:none;outline:none}:host-context(.vds-combo-box--disabled){pointer-events:none}";
+const VdsBasicComboBox = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.valueChanged = createEvent(this, "valueChanged");
+        this.cleared = createEvent(this, "cleared");
+        this.actionIconClick = createEvent(this, "actionIconClick");
+        this.changeInput = createEvent(this, "changeInput");
+        /** Sets the combobox size. */
+        this.size = "medium";
+        /** Sets the combobox value. */
+        this.value = [];
+        /** Sets the combobox clear button visibility. */
+        this.showClearButton = true;
+        /** Allows user to define a search icon inside the input at its right (zoom by default) . */
+        this.actionIcon = "zoom";
+        this.internalValue = "";
+    }
+    valueChangedHandler(newValue) {
+        this.valueChanged.emit(newValue);
+    }
+    /* Sets focus to the input element */
+    async setFocus() {
+        return new Promise((resolve) => {
+            this.inputEl.focus();
+            resolve();
+        });
+    }
+    /**
+     * Sets the autocomplete input value to handle filtering.
+     *
+     * @returns {Promise<void>}
+     */
+    async setValue(value) {
+        this.value = value;
+        return Promise.resolve();
+    }
+    /**
+     * Return the autocomplete value.
+     *
+     * @returns {Promise<string>} A promise that resolves by returning the autocomplete value.
+     */
+    async getValue() {
+        return Promise.resolve(this.value);
+    }
+    /**
+     * Clears the selected options and resets the value of the autocomplete.
+     *
+     * @returns {Promise<void>} A promise that resolves when the clearing operation is complete.
+     */
+    async clear() {
+        this.value = [];
+        this.internalValue = "";
+        this.cleared.emit();
+        return Promise.resolve();
+    }
+    /**
+     * Displays vds-icon when icon string is valid
+     *
+     * @returns HTMLStencilElement
+     */
+    getInputIcon(icon) {
+        if (!isValidIcon(icon))
+            return null;
+        const inputState = this.disabled ? "disabled" : this.isReadonly ? "readonly" : "normal";
+        const size = this.size === "medium" ? "1rem" : this.size === "small" ? "0.75rem" : "1.25rem";
+        return (h("vds-icon", { class: "vds-combo-box__informative-icon", svgIcon: icon, size: size, color: getIconColor(inputState) }));
+    }
+    /**
+     * Sets value from input"s event target.
+     * Emits change, input and changeInput events.
+     * Sets input as dirty when input"s event is triggered.
+     * Executes formatter prop function on every inputed value.
+     *
+     * @returns void
+     */
+    handleInput(evt) {
+        evt.stopPropagation();
+        const target = evt.target;
+        const inputEvent = new InputEvent("input");
+        setDirtyClass(this.hostEl);
+        this.internalValue = target.value;
+        this.changeInput.emit(this.internalValue);
+        this.hostEl.dispatchEvent(inputEvent);
+    }
+    /**
+     * Toggle class vds__input__container--focus in focus/blur input"s event
+     *
+     * @returns void
+     */
+    toggleFocusClass() {
+        this.inputContainerRef && toggleFocusClass(this.inputContainerRef);
+    }
+    handleCloseChip(val) {
+        this.value = this.value.filter(item => item !== val);
+    }
+    getSizeIconButton() {
+        switch (this.size) {
+            case "small":
+                return "extra-small";
+            case "medium":
+                return "small";
+            case "large":
+                return "medium";
+            default:
+                return "small";
+        }
+    }
+    handleActionButton() {
+        this.actionIconClick.emit();
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: 'cb9772767f5d0fecb7df380a1fdd6d5cd8cd83f0', class: this.disabled ? "vds-combo-box--disabled" : "" }, h("div", { key: 'f1871a8ba103f7bc04f998607defed955cada9ee', ref: (el) => {
+                if (el)
+                    this.inputContainerRef = el;
+            }, class: combineClasses("vds-combo-box__container", `vds-combo-box--size-${this.size}`, this.error && "vds-combo-box__container--error", this.isReadonly && "vds-combo-box__container--readonly", this.disabled && "vds-combo-box__container--disabled") }, this.getInputIcon(this.informativeIcon), h("div", { key: '28097a9af267fab216e5c6d73ad85102b67fd898', class: combineClasses("vds-combo-box__input-content", ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "vds-combo-box__input-content--has-value" : "") }, this.value.map((val) => (h("div", { class: "vds-combo-box__chip-container" }, h("vds-chip", { class: "vds-combo-box__chip", value: val, size: this.size, disabled: this.disabled || this.isReadonly, close: true, removeOnClose: false, onAfterClosed: () => this.handleCloseChip(val) })))), h("input", Object.assign({ key: '4464f822757a6533a628be6a7420011ebd96a90c', ref: (el) => {
+                if (el)
+                    this.inputEl = el;
+            }, class: "vds-combo-box__input", type: "text", value: this.internalValue, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.isReadonly, onInput: (evt) => this.handleInput(evt), onFocus: () => this.toggleFocusClass(), onBlur: () => this.toggleFocusClass() }, cloneAttributes(this.hostEl, "class", "value", "disabled", "placeholder", "label", "style")))), this.showClearButton && (h("vds-icon-button", { key: '1c5150f902042a296e7520a7ed64ed29fc069d19', variant: "secondary", disabled: this.disabled || this.isReadonly, icon: "close", size: this.getSizeIconButton(), onClick: () => this.clear() })), this.actionIcon && (h("vds-icon-button", { key: '1fa7db8fdde189f1c0e3e09f18c1de33c2c538f5', variant: "secondary", disabled: this.disabled || this.isReadonly, icon: this.actionIcon, size: this.getSizeIconButton(), onClick: () => this.handleActionButton() })))));
+    }
+    get hostEl() { return getElement(this); }
+    static get watchers() { return {
+        "value": ["valueChangedHandler"]
+    }; }
+};
+VdsBasicComboBox.style = vdsBasicComboBoxCss;
+export { VdsBasicComboBox as vds_basic_combo_box };
+//# sourceMappingURL=vds-basic-combo-box.entry.js.map
+//# sourceMappingURL=vds-basic-combo-box.entry.js.map

package/dist/esm/vds-basic-combo-box.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"vds-basic-combo-box.entry.js","sources":["src/components/vds-basic-combo-box/vds-basic-combo-box.scss?tag=vds-basic-combo-box&encapsulation=shadow","src/components/vds-basic-combo-box/vds-basic-combo-box.tsx"],"sourcesContent":["@import '~@volt/volt-foundations/dist/volt-foundations/volt-foundations';\n\n:host {\n display: block;\n .vds-combo-box__container {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n box-sizing: border-box;\n border-radius: var(--radius-medium);\n border: var(--border-thickness-01) solid var(--color-border-low);\n background: var(--surface-medium);\n\n &:hover {\n border-color: var(--color-border-brand);\n outline: var(--border-thickness-05) solid var(--color-interaction-brand-low);\n }\n\n .vds-combo-box__informative-icon::part(svg-icon) {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n &.vds-combo-box__container--focus {\n border-color: var(--color-border-brand);\n }\n\n &.vds-combo-box__container--error {\n border-color: var(--color-border-danger);\n outline-color: var(--color-interaction-danger-medium);\n\n .vds-combo-box__input {\n color: var(--color-text-danger-medium);\n }\n }\n\n &.vds-combo-box__container--readonly {\n border-color: var(--color-border-low);\n outline: none;\n background-color: var(--color-interaction-black-lowest);\n\n .vds-combo-box__chip {\n pointer-events: none;\n }\n .vds-combo-box__input {\n color: var(--color-text-medium);\n }\n }\n\n &.vds-combo-box__container--disabled {\n border-color: var(--color-border-lowest);\n outline: none;\n background-color: var(--surface-medium);\n\n .vds-combo-box__input {\n color: var(--color-text-disabled);\n\n &::placeholder {\n color: var(--color-text-disabled);\n }\n }\n }\n\n &.vds-combo-box--size-small {\n gap: var(--spacing-01);\n padding: calc(var(--spacing-02) - 1px) calc(var(--spacing-03) - 1px);\n min-height: var(--spacing-07);\n .vds-combo-box__input-content {\n &.vds-combo-box__input-content--has-value {\n column-gap: var(--spacing-01);\n }\n row-gap: var(--spacing-02);\n .vds-combo-box__chip-container {\n height: var(--spacing-04);\n .vds-combo-box__chip {\n height: var(--spacing-05);\n transform: translateY(-5px);\n }\n }\n .vds-combo-box__input {\n @include font-style(body, small);\n }\n }\n }\n\n &.vds-combo-box--size-medium {\n gap: var(--spacing-02);\n padding: calc(var(--spacing-03) - 1px) calc(var(--spacing-04) - 1px);\n min-height: var(--spacing-10);\n\n .vds-combo-box__input-content {\n &.vds-combo-box__input-content--has-value {\n column-gap: var(--spacing-02);\n }\n row-gap: var(--spacing-03);\n .vds-combo-box__chip-container {\n height: var(--spacing-06);\n .vds-combo-box__chip {\n height: var(--spacing-07);\n transform: translateY(-2px);\n }\n }\n .vds-combo-box__input {\n @include font-style(body, medium);\n }\n }\n }\n\n &.vds-combo-box--size-large {\n gap: var(--spacing-03);\n padding: calc(var(--spacing-04) - 1px) calc(var(--spacing-05) - 1px);\n min-height: var(--spacing-13);\n .vds-combo-box__input-content {\n &.vds-combo-box__input-content--has-value {\n column-gap: var(--spacing-02);\n }\n row-gap: var(--spacing-03);\n .vds-combo-box__chip-container {\n height: var(--spacing-07);\n .vds-combo-box__chip {\n height: var(--spacing-08);\n transform: translateY(-2px);\n }\n }\n .vds-combo-box__input {\n @include font-style(body, large);\n }\n }\n }\n\n .vds-combo-box__input-content {\n align-items: center;\n color: inherit;\n display: flex;\n flex-wrap: wrap;\n flex: 1 1;\n }\n\n .vds-combo-box__input {\n display: inline-block;\n flex: 1 1;\n border: none;\n background: transparent;\n padding: 0;\n overflow: hidden;\n color: var(--color-text-high);\n font-feature-settings: 'clig' off, 'liga' off;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-style: normal;\n \n &::placeholder {\n color: var(--color-text-medium);\n }\n \n &:hover,\n &:focus {\n border: none;\n outline: none;\n }\n }\n }\n}\n\n:host-context(.vds-combo-box--disabled) {\n pointer-events: none;\n}\n","import { Component, Host, Prop, h, Event, EventEmitter, Method, Element } from \"@stencil/core\";\nimport { combineClasses } from \"../../utils/combine-classes\";\nimport { HTMLStencilElement, State, Watch } from \"@stencil/core/internal\";\nimport { isValidIcon, setDirtyClass, getIconColor, toggleFocusClass } from \"../input/vds-basic-input.utils\";\nimport { cloneAttributes } from \"../../utils/clone-attributes\";\n\n@Component({\n tag: \"vds-basic-combo-box\",\n styleUrl: \"vds-basic-combo-box.scss\",\n shadow: true,\n})\nexport class VdsBasicComboBox {\n /** Sets the combobox size. */\n @Prop({ mutable: true }) size: \"medium\" | \"large\" | \"small\" = \"medium\";\n /** Sets the combobox value. */\n @Prop({ mutable: true, reflect: true }) value: string[] = [];\n /** Sets the combobox placeholder. */\n @Prop({ mutable: true, reflect: true }) placeholder: string;\n /** Sets the combobox in disabled state. */\n @Prop({ mutable: true, reflect: true }) disabled: boolean;\n /** Sets the combobox in readonly state. */\n @Prop({ mutable: true, reflect: true }) isReadonly: boolean;\n /** Sets the combobox in error state. */\n @Prop({ mutable: true, reflect: true }) error: boolean;\n /** Allows user to define a information icon inside the combobox at its left . */\n @Prop() informativeIcon: string;\n /** Sets the combobox clear button visibility. */\n @Prop() showClearButton: boolean = true;\n /** Allows user to define a search icon inside the input at its right (zoom by default) . */\n @Prop() actionIcon: string = \"zoom\";\n\n /** Emits event when the selected chips list change, this event contains the value of the selected chips */\n @Event() valueChanged: EventEmitter<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 similar to the input event */\n @Event() changeInput: EventEmitter<string>;\n\n @State() internalValue: string = \"\";\n\n @Element() hostEl: HTMLElement;\n\n private inputContainerRef: HTMLDivElement;\n private inputEl: HTMLInputElement;\n\n @Watch(\"value\")\n valueChangedHandler(newValue: string[]): void {\n this.valueChanged.emit(newValue);\n }\n\n /* Sets focus to the input element */\n @Method()\n public async setFocus(): Promise<void> {\n return new Promise((resolve) => {\n this.inputEl.focus();\n resolve();\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 return Promise.resolve();\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[]> {\n return Promise.resolve(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 this.internalValue = \"\";\n this.cleared.emit();\n return Promise.resolve();\n }\n\n /**\n * Displays vds-icon when icon string is valid\n *\n * @returns HTMLStencilElement\n */\n private getInputIcon(icon: string): HTMLStencilElement {\n if(!isValidIcon(icon)) return null;\n\n const inputState = this.disabled ? \"disabled\" : this.isReadonly ? \"readonly\" : \"normal\";\n const size = this.size === \"medium\" ? \"1rem\" : this.size === \"small\" ? \"0.75rem\" : \"1.25rem\";\n return (<vds-icon class=\"vds-combo-box__informative-icon\" svgIcon={icon} size={size} color={getIconColor(inputState)}></vds-icon>);\n }\n\n /**\n * Sets value from input\"s event target.\n * Emits change, input and changeInput events.\n * Sets input as dirty when input\"s event is triggered.\n * Executes formatter prop function on every inputed value.\n *\n * @returns void\n */\n private handleInput(evt: InputEvent): void {\n evt.stopPropagation();\n const target = evt.target as HTMLInputElement;\n const inputEvent = new InputEvent(\"input\");\n setDirtyClass(this.hostEl);\n\n this.internalValue = target.value;\n\n this.changeInput.emit(this.internalValue);\n this.hostEl.dispatchEvent(inputEvent);\n }\n\n /**\n * Toggle class vds__input__container--focus in focus/blur input\"s event\n *\n * @returns void\n */\n private toggleFocusClass(): void {\n this.inputContainerRef && toggleFocusClass(this.inputContainerRef);\n }\n\n private handleCloseChip(val: string): void {\n this.value = this.value.filter(item => item !== val);\n }\n\n private getSizeIconButton(): \"medium\" | \"large\" | \"small\" | \"extra-small\" {\n switch(this.size) {\n case \"small\": \n return \"extra-small\";\n case \"medium\": \n return \"small\";\n case \"large\": \n return \"medium\";\n default: \n return \"small\";\n }\n }\n\n private handleActionButton(): void {\n this.actionIconClick.emit();\n }\n\n render() {\n return (\n <Host class={this.disabled ? \"vds-combo-box--disabled\" : \"\"}>\n <div\n ref={(el): void => { if(el) this.inputContainerRef = el} }\n class={combineClasses(\n \"vds-combo-box__container\",\n `vds-combo-box--size-${this.size}`,\n this.error && \"vds-combo-box__container--error\",\n this.isReadonly && \"vds-combo-box__container--readonly\",\n this.disabled && \"vds-combo-box__container--disabled\"\n )}\n >\n {this.getInputIcon(this.informativeIcon)}\n <div class={combineClasses(\"vds-combo-box__input-content\", this.value?.length > 0 ? \"vds-combo-box__input-content--has-value\" : \"\")}>\n {this.value.map((val: string) => (\n <div class=\"vds-combo-box__chip-container\">\n <vds-chip \n class={\"vds-combo-box__chip\"}\n value={val}\n size={this.size}\n disabled={this.disabled || this.isReadonly}\n close={true}\n removeOnClose={false}\n onAfterClosed={() => this.handleCloseChip(val)}>\n </vds-chip>\n </div>\n ))}\n <input\n ref={(el): void => { if(el) this.inputEl = el} }\n class={\"vds-combo-box__input\"}\n type={\"text\"}\n value={this.internalValue}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readOnly={this.isReadonly}\n onInput={(evt): void => this.handleInput(evt)}\n onFocus={(): void => this.toggleFocusClass()}\n onBlur={(): void => this.toggleFocusClass()}\n {...cloneAttributes(\n this.hostEl,\n \"class\",\n \"value\",\n \"disabled\",\n \"placeholder\",\n \"label\",\n \"style\",\n )}\n />\n </div>\n {this.showClearButton && (<vds-icon-button variant=\"secondary\" disabled={this.disabled || this.isReadonly} icon={\"close\"} size={this.getSizeIconButton()} onClick={() => this.clear()} />)}\n {this.actionIcon && (<vds-icon-button variant=\"secondary\" disabled={this.disabled || this.isReadonly} icon={this.actionIcon} size={this.getSizeIconButton()} onClick={() => this.handleActionButton()} />)}\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/vds-basic-dropdown.utils-BMJUPaKN.js ADDED Viewed

@@ -0,0 +1,239 @@
+/**
+ * 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}
+ */
+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.
+ */
+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.
+ */
+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.
+ */
+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);
+    }
+};
+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.
+ */
+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.
+ */
+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.
+ */
+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.
+ */
+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.
+ */
+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 }
+ */
+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.
+ */
+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);
+    }
+};
+export { unselectNonSelectedItems as a, selectSelectedItems as b, updateContainerWidth as c, setDropdownStyles as d, getValidOptions as e, emitNativeInputEvent as f, getSelectedLabel as g, getSelectedItemsText as h, scrollToSelectedValue as s, toggleContainerDisplay as t, unselectAllItems as u };
+//# sourceMappingURL=vds-basic-dropdown.utils-BMJUPaKN.js.map
+//# sourceMappingURL=vds-basic-dropdown.utils-BMJUPaKN.js.map