wabtec-internal-volt-basic-components 1.0.0

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

@@ -0,0 +1,1218 @@
+import { Host, h } from "@stencil/core";
+import { combineClasses } from "../../utils/combine-classes";
+import { toggleContainerDisplay, updateContainerWidth } from "../basic-dropdown/vds-basic-dropdown.utils";
+import { updateFloatingBoxPosition } from "../../utils/floating-engine-utils";
+import { cloneAttributes } from "../../utils/clone-attributes";
+import { findOptionByExactValue, findOptionByValue, getFilteredOptions } from "./vds-basic-autocomplete.utils";
+import { getIconSize } from "../../utils/icon-attr.utils";
+export class VdsBasicAutocomplete {
+    constructor() {
+        /**
+         * Sets the internal input size.
+         * If multiple property is true, This will only set the basic-input text value.
+         * If multiple property is false and the value prop matches with an option, the option will be selected,
+         * Otherwise text will be set in the basic-input.
+         */
+        this.size = "medium";
+        /** Sets the selected options when multiple is activated */
+        this.multipleValues = [];
+        /** Sets the selected dropdown value when dropdown is activated */
+        this.selectedDropdownValue = "";
+        /** Toggles the required sign in the internal input */
+        this.isRequired = false;
+        /** Sets custom allowed styles to input (text-align, text-transform, unicode-bidi, direction) */
+        this.allowedStyles = [];
+        /** Sets the width value for the floating container of the items to match the items list width */
+        this.matchWidth = true;
+        /** Allows user to define a search icon inside the input at its right (zoom by default) . */
+        this.actionIcon = "zoom";
+        /** Sets the autocomplete clear button visibility. */
+        this.showClearButton = true;
+        /**
+         * Shows a dropdown chevron arrow that flips up/down when change state open/close.
+         * Also enables the selectedDropdownValue prop to be able to select an option from dropdown
+         * When multiple is true, this prop will be set to false.
+         */
+        this.dropdown = false;
+        /** Sets the autocomplete dropdown chevron icon visibility. */
+        this.showDropdownIcon = true;
+        /** Enables a message when there's no match options. */
+        this.showEmptyMessage = false;
+        /** Allow to set the text message in the 'emptyMessage' state. */
+        this.emptyMessage = "No options";
+        /**
+         * Allow multiple values to be selected.
+         * Also enables the multipleValues prop to be able to select multiple options
+         * When multiple is true, dropdown prop will be set to false.
+         * When multiple is true, valueChanged will emit an array of strings
+         */
+        this.multiple = false;
+        /**
+         * Toggles the floating container auto-positioning based on available window space.
+         * False by default as it may cause positioning issues in some situations, use with caution
+         */
+        this.autoPosition = false;
+        /**
+         * Clear selection and input on clicking the close button.
+         * Only works when multiple is true.
+         */
+        this.clearSelection = false;
+        /** Toggles the overlay element, allowing interaction only with this element when active */
+        this.backdrop = false;
+        this.floatingCleanUp = () => { };
+        this.isOpened = false;
+        this.options = [];
+        this.debounceTimeTracker = null;
+        this.showUnfilteredOptions = false;
+        this.updateContainerWidth = updateContainerWidth;
+        /**
+         * Sets autocomplete styles for JSX.style property
+         *
+         * @param maxHeight string
+         * @returns { [key: string]: string }
+         */
+        this.setAutoCompleteStyles = (maxHeight) => {
+            let styles = {};
+            styles = {
+                maxHeight: maxHeight ? maxHeight : undefined,
+            };
+            return styles;
+        };
+    }
+    componentWillLoad() {
+        this.multiselectValues = this.multipleValues;
+        this.validateDropdownValue = true;
+    }
+    componentWillRender() {
+        if (this.multiple) {
+            this.dropdown = false;
+        }
+    }
+    componentDidLoad() {
+        this.options = Array.from(this.hostEl.querySelectorAll("vds-autocomplete-item"));
+        this.setPreselection();
+    }
+    componentDidRender() {
+        this.options = Array.from(this.hostEl.querySelectorAll("vds-autocomplete-item"));
+        updateFloatingBoxPosition(this.basicInput, this.autocompleteContent, null, 'bottom', false);
+        this.updateContainerWidth(this.basicInput, this.matchWidth, this.autocompleteContent);
+        this.setPreselection();
+    }
+    setMulitpleValueHandler() {
+        this.valueChanged.emit(this.multiselectValues);
+    }
+    setDisabledState() {
+        this.close();
+    }
+    setDropdownValueValidation() {
+        this.validateDropdownValue = true;
+    }
+    async toggleAutocomplete() {
+        if (this.isOpened) {
+            toggleContainerDisplay(this.autocompleteContent, true);
+            this.opened.emit();
+            this.floatingCleanUp = await updateFloatingBoxPosition(this.basicInput, this.autocompleteContent, null, "bottom", this.autoPosition);
+        }
+        else {
+            toggleContainerDisplay(this.autocompleteContent, false);
+            this.closed.emit();
+            this.floatingCleanUp();
+        }
+    }
+    /* Open the floating element(menu) of the autocomplete. */
+    async open() {
+        if (!this.isReadonly && !this.disabled) {
+            setTimeout(() => {
+                this.isOpened = true;
+            });
+        }
+    }
+    /* Close the floating element(menu) of the autocomplete. */
+    async close() {
+        this.isOpened = false;
+    }
+    /* Sets focus to the input element */
+    async setFocus() {
+        this.basicInput.setFocus();
+        setTimeout(() => {
+            this.open();
+        });
+    }
+    /**
+     * Sets the autocomplete input value to handle filtering.
+     *
+     * @returns {Promise<void>}
+     */
+    async setValue(value) {
+        this.value = value;
+    }
+    /**
+     * Sets the autocomplete selection value to handle.
+     * When multiple is true, sets the selected values from the list
+     * When dropdown is true and multiple is false, sets a single selected value.
+     * When dropdown is false and When multiple is false, set the input value
+     *
+     * @returns {Promise<void>}
+     */
+    async setSelectionValue(value) {
+        if (this.multiple && Array.isArray(value)) {
+            this.multipleValues = this.multiselectValues = value;
+        }
+        if (typeof value === "string") {
+            if (this.dropdown) {
+                this.selectedDropdownValue = value;
+            }
+            this.value = value;
+        }
+    }
+    /**
+     * Return the autocomplete value.
+     *
+     * @returns {Promise<string>} A promise that resolves by returning the autocomplete value.
+     */
+    async getValue() {
+        if (this.multiple) {
+            return this.multipleValues;
+        }
+        if (this.dropdown) {
+            return this.selectedDropdownValue;
+        }
+        return 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 = '';
+        if (this.dropdown) {
+            this.clearOptions();
+        }
+        if (this.clearSelection && this.multiple) {
+            this.multipleValues = this.multiselectValues = [];
+            this.setOptionsMultiple();
+        }
+        this.cleared.emit();
+    }
+    handleSelectOption(evt) {
+        const selectedOption = this.options.find((option) => findOptionByExactValue(option, evt.detail.value));
+        const isValidOption = selectedOption !== null && selectedOption !== undefined;
+        if (isValidOption && this.multiple) {
+            selectedOption.isSelected = evt.detail.selected;
+        }
+        this.handleValueAssignment(evt);
+        if (isValidOption && this.dropdown) {
+            this.setOptionsSingle(evt.detail.value);
+        }
+    }
+    /* Close the autocomplete when click outside */
+    handleClickOut(evt) {
+        evt.stopPropagation();
+        const target = evt.target;
+        const isClickInside = this.hostEl.contains(target);
+        const isClickInsideParentAutocomplete = target.nodeName === "VDS-AUTOCOMPLETE" && target.shadowRoot && evt.target.shadowRoot.contains(this.hostEl);
+        if (!isClickInside && !isClickInsideParentAutocomplete) {
+            this.isOpened = false;
+        }
+    }
+    handleEscPress(evt) {
+        if (this.isOpened && evt.code === "Escape") {
+            this.close();
+            this.basicInput.blur();
+        }
+    }
+    handleMultiselection(selection) {
+        if (selection.selected && !this.multipleValues.find(value => value.toLowerCase() === selection.value.toLowerCase())) {
+            this.multipleValues.push(selection.value);
+        }
+        else {
+            this.multipleValues = this.multipleValues.filter(value => value.toLowerCase() !== selection.value.toLowerCase());
+        }
+        this.multiselectValues = Array.from(this.multipleValues);
+        this.basicInput.setFocus();
+    }
+    handleValueAssignment(evt) {
+        if (this.multiple) {
+            this.handleMultiselection(evt.detail);
+        }
+        else {
+            this.value = evt.detail.value;
+            this.setSelectionValue(evt.detail.value);
+            this.valueChanged.emit(this.value);
+            this.close();
+        }
+    }
+    handleChange(evt) {
+        evt.stopPropagation();
+        this.changeInput.emit(evt.detail);
+        if (this.debounce !== undefined && this.debounce > 0) {
+            this.handleDebounceValueChange(evt.detail);
+        }
+        else {
+            this.value = evt.detail;
+        }
+        if (this.dropdown) {
+            this.showUnfilteredOptions = false;
+        }
+    }
+    hasFocus() {
+        this.open();
+        if (this.hasValue() && this.dropdown) {
+            this.showUnfilteredOptions = true;
+            this.validateDropdownValue = false;
+        }
+    }
+    lostFocus() {
+        if (this.dropdown) {
+            this.showUnfilteredOptions = false;
+            this.validateDropdownValue = true;
+        }
+    }
+    emitActionIcon() {
+        this.actionIconClick.emit();
+    }
+    handleDebounceValueChange(newValue) {
+        if (this.debounceTimeTracker !== null) {
+            clearTimeout(this.debounceTimeTracker);
+            this.debounceTimeTracker = null;
+        }
+        this.debounceTimeTracker = setTimeout(() => {
+            this.value = newValue;
+            this.debounceTimeTracker = null;
+        }, this.debounce);
+    }
+    hasValue() {
+        return this.value !== null && this.value !== undefined && this.value !== "undefined" && this.value !== "";
+    }
+    setPreselection() {
+        if (this.multiple) {
+            this.setOptionsMultiple();
+        }
+        if (this.dropdown) {
+            this.setDropdownOption();
+        }
+    }
+    setOptionsMultiple() {
+        try {
+            this.options.forEach(item => {
+                var _a;
+                item.hasCheckmark = true;
+                const selection = (_a = this.multipleValues) === null || _a === void 0 ? void 0 : _a.find(value => findOptionByExactValue(item, value));
+                item.isSelected = !!selection;
+            });
+        }
+        catch (error) {
+            console.warn("[setOptionsMultiple]", error);
+        }
+    }
+    /**
+     * Sets the selected value for a autocomplete type dropdown and updates the options accordingly.
+     * @private
+     * @param {string} selectedValue - The value of the selected option.
+     */
+    setOptionsSingle(selectedValue) {
+        try {
+            this.selectedDropdownValue = selectedValue;
+            this.options.forEach(item => {
+                item.hasCheckmark = false;
+                item.isSelected = findOptionByExactValue(item, this.selectedDropdownValue);
+            });
+        }
+        catch (error) {
+            console.warn("[setOptionsSingle]", error);
+        }
+    }
+    setDropdownOption() {
+        var _a;
+        try {
+            const hasValidValue = (_a = this.options) === null || _a === void 0 ? void 0 : _a.some(opt => findOptionByExactValue(opt, this.selectedDropdownValue));
+            if (hasValidValue &&
+                this.selectedDropdownValue !== undefined &&
+                this.selectedDropdownValue !== "undefined" &&
+                this.selectedDropdownValue !== "") {
+                this.setOptionsSingle(this.selectedDropdownValue);
+                if (this.validateDropdownValue) {
+                    this.value = this.selectedDropdownValue;
+                    this.validateDropdownValue = false;
+                }
+            }
+        }
+        catch (error) {
+            console.warn("[setOptionsMultiple]", error);
+        }
+    }
+    /**
+     * Sets the all the options to unselected state
+     * @private
+     * @param {string} selectedValue - The value of the selected option.
+     */
+    clearOptions() {
+        try {
+            this.selectedDropdownValue = null;
+            this.options.forEach(item => {
+                item.hasCheckmark = item.isSelected = false;
+            });
+        }
+        catch (error) {
+            console.warn("[clearOptions]", error);
+        }
+    }
+    renderUnfilteredOptions() {
+        return (h("div", { class: combineClasses('vds-basic-autocomplete__content-options', this.maxHeight ? 'scrollable' : ''), style: this.setAutoCompleteStyles(this.maxHeight) }, h("slot", { name: "items" }), h("slot", null)));
+    }
+    renderItem(item) {
+        var _a;
+        let isSelected = false;
+        if (this.multiple) {
+            isSelected = (_a = this.multipleValues) === null || _a === void 0 ? void 0 : _a.some(value => findOptionByValue(item, value));
+        }
+        return (h("vds-autocomplete-item", Object.assign({ isSelected: isSelected, hasCheckmark: this.multiple }, cloneAttributes(item), { innerHTML: item.innerHTML })));
+    }
+    renderFilteredOptions() {
+        const value = this.hasValue() ? this.value : "";
+        const filteredOptions = getFilteredOptions(this.options, value);
+        if (filteredOptions.length === 0) {
+            return this.showEmptyMessage && this.emptyMessage ? this.renderEmptyOption() : null;
+        }
+        return (h("div", { class: combineClasses('vds-basic-autocomplete__content-options', this.maxHeight ? 'scrollable' : ''), style: this.setAutoCompleteStyles(this.maxHeight) }, filteredOptions.map(item => this.renderItem(item))));
+    }
+    renderEmptyOption() {
+        if (!this.autocompleteItemEmptyOption) {
+            this.autocompleteItemEmptyOption = document.createElement("vds-autocomplete-item");
+            this.autocompleteItemEmptyOption.classList.add("non-clickable");
+            this.autocompleteItemEmptyOption.value = "";
+            this.autocompleteItemEmptyOption.setAttribute("value", "");
+        }
+        this.autocompleteItemEmptyOption.setAttribute("size", this.size);
+        this.autocompleteItemEmptyOption.setAttribute("label", this.emptyMessage);
+        return this.renderItem(this.autocompleteItemEmptyOption);
+    }
+    renderClearIcon() {
+        const disabled = this.disabled || this.isReadonly;
+        return (h("vds-icon-button", { tabIndex: disabled ? -1 : undefined, disabled: disabled, variant: "secondary", size: this.size === "medium" ? "small" : this.size === "small" ? "extra-small" : "medium", icon: "close", onClick: disabled ? undefined : () => { this.clear(); this.basicInput.setFocus(); } }));
+    }
+    renderActionIcon() {
+        const disabled = this.disabled || this.isReadonly;
+        if (this.dropdown && this.showDropdownIcon) {
+            return (h("vds-icon", { svgIcon: this.isOpened ? 'chevron-up' : 'chevron-down', color: disabled ? 'color-icon-disabled' : 'color-icon-high', size: getIconSize(this.size), onClick: disabled ? undefined : () => this.isOpened ? this.close() : this.open() }));
+        }
+        if (this.actionIcon) {
+            return (h("vds-icon-button", { tabIndex: disabled ? -1 : undefined, disabled: disabled, variant: "secondary", size: this.size === "medium" ? "small" : this.size === "small" ? "extra-small" : "medium", icon: this.actionIcon, onClick: disabled ? undefined : () => this.emitActionIcon() }));
+        }
+    }
+    renderOptions() {
+        if (this.dropdown && this.showUnfilteredOptions) {
+            return this.renderUnfilteredOptions();
+        }
+        if (this.hasValue()) {
+            return this.renderFilteredOptions();
+        }
+        return this.renderUnfilteredOptions();
+    }
+    render() {
+        const filteredOptions = getFilteredOptions(this.options, this.value || "");
+        return (h(Host, { key: '9b035fb33aa14173337829378d0b4024d30e6358', class: this.disabled ? "vds-basic-autocomplete--disabled" : "", title: this.value }, h("div", { key: '3d19e70ce7783ab0b6dc46e1405e1223505db622', class: combineClasses("vds-basic-autocomplete__container") }, h("vds-basic-input", { key: 'd7235b7b4cf781dbe72d6076f080e3f2e0ef1e31', ref: (el) => {
+                if (el) {
+                    this.basicInput = el;
+                }
+            }, type: "text", placeholder: this.placeholder, value: this.value, size: this.size, disabled: this.disabled, isReadonly: this.isReadonly, error: this.error, isRequired: this.isRequired, formatter: this.formatter, informativeIcon: this.informativeIcon, allowedStyles: this.allowedStyles, onChangeInput: (evt) => this.handleChange(evt), onFocus: () => this.hasFocus(), onBlur: () => this.lostFocus() }, this.showClearButton && this.hasValue() && (h("div", { key: '637bd881af823a444595ff826b2aa6521452e020', class: "vds-basic-autocomplete__secondary-action", slot: "secondaryActionIcon" }, this.renderClearIcon())), ((this.dropdown && this.showDropdownIcon) || this.actionIcon) && (h("div", { key: '2042f0659fdaad6855f797b6b79596a90b77bec1', class: "vds-basic-autocomplete__primary-action", slot: "primaryActionIcon" }, this.renderActionIcon()))), this.backdrop && this.isOpened ? h("div", { class: "vds-floating-backdrop", onClick: this.close.bind(this) }) : '', h("div", { key: '4f0893d4476df5bc5723127528101dac34c0d697', ref: (el) => {
+                if (el)
+                    this.autocompleteContent = el;
+            }, class: combineClasses("vds-basic-autocomplete__content", this.maxHeight ? "has-scroll" : "", (!this.emptyMessage || this.emptyMessage === "") && filteredOptions.length === 0 ? "no-shadow" : "", !this.showEmptyMessage && filteredOptions.length === 0 ? "no-shadow" : "", !this.value && this.options.length === 0 ? "no-shadow" : "") }, h("div", { key: '33047b025c6d88f2ff8bf550f4a6090ebf198ec0', class: "vds-basic-autocomplete__content__header" }, h("slot", { key: '55ce34e7e2233e14a819a1c79288f3ffa5550ebe', name: "header" })), this.renderOptions()))));
+    }
+    static get is() { return "vds-basic-autocomplete"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-basic-autocomplete.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-basic-autocomplete.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": true,
+                "complexType": {
+                    "original": "\"small\" | \"medium\" | \"large\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the internal input size.\nIf multiple property is true, This will only set the basic-input text value.\nIf multiple property is false and the value prop matches with an option, the option will be selected,\nOtherwise text will be set in the basic-input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"medium\""
+            },
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the internal input value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "multipleValues": {
+                "type": "unknown",
+                "attribute": "multiple-values",
+                "mutable": true,
+                "complexType": {
+                    "original": "Array<string>",
+                    "resolved": "string[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the selected options when multiple is activated"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "selectedDropdownValue": {
+                "type": "string",
+                "attribute": "selected-dropdown-value",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the selected dropdown value when dropdown is activated"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "placeholder": {
+                "type": "string",
+                "attribute": "placeholder",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the internal input placeholder."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the internal input in disabled state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "isReadonly": {
+                "type": "boolean",
+                "attribute": "is-readonly",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the internal input in readonly state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "error": {
+                "type": "boolean",
+                "attribute": "error",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the internal input in error state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "isRequired": {
+                "type": "boolean",
+                "attribute": "is-required",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggles the required sign in the internal input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "informativeIcon": {
+                "type": "string",
+                "attribute": "informative-icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows user to define a information icon inside the input at its left ."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "formatter": {
+                "type": "unknown",
+                "attribute": "formatter",
+                "mutable": true,
+                "complexType": {
+                    "original": "Function",
+                    "resolved": "Function",
+                    "references": {
+                        "Function": {
+                            "location": "global",
+                            "id": "global::Function"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets character formatting for user input. Useful for adding a mask to the input."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "allowedStyles": {
+                "type": "unknown",
+                "attribute": "allowed-styles",
+                "mutable": true,
+                "complexType": {
+                    "original": "{ [key: string]: string }[]",
+                    "resolved": "{ [key: string]: string; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets custom allowed styles to input (text-align, text-transform, unicode-bidi, direction)"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "maxHeight": {
+                "type": "string",
+                "attribute": "max-height",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the max height value for the floating container of the items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "matchWidth": {
+                "type": "boolean",
+                "attribute": "match-width",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the width value for the floating container of the items to match the items list width"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "debounce": {
+                "type": "number",
+                "attribute": "debounce",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Debounce time for key inputs before the search"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "actionIcon": {
+                "type": "string",
+                "attribute": "action-icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows user to define a search icon inside the input at its right (zoom by default) ."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"zoom\""
+            },
+            "showClearButton": {
+                "type": "boolean",
+                "attribute": "show-clear-button",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the autocomplete clear button visibility."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "dropdown": {
+                "type": "boolean",
+                "attribute": "dropdown",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows a dropdown chevron arrow that flips up/down when change state open/close.\nAlso enables the selectedDropdownValue prop to be able to select an option from dropdown\nWhen multiple is true, this prop will be set to false."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showDropdownIcon": {
+                "type": "boolean",
+                "attribute": "show-dropdown-icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the autocomplete dropdown chevron icon visibility."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "showEmptyMessage": {
+                "type": "boolean",
+                "attribute": "show-empty-message",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables a message when there's no match options."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "emptyMessage": {
+                "type": "string",
+                "attribute": "empty-message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow to set the text message in the 'emptyMessage' state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"No options\""
+            },
+            "multiple": {
+                "type": "boolean",
+                "attribute": "multiple",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow multiple values to be selected.\nAlso enables the multipleValues prop to be able to select multiple options\nWhen multiple is true, dropdown prop will be set to false.\nWhen multiple is true, valueChanged will emit an array of strings"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "autoPosition": {
+                "type": "boolean",
+                "attribute": "auto-position",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggles the floating container auto-positioning based on available window space. \nFalse by default as it may cause positioning issues in some situations, use with caution"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "clearSelection": {
+                "type": "boolean",
+                "attribute": "clear-selection",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Clear selection and input on clicking the close button.\nOnly works when multiple is true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "backdrop": {
+                "type": "boolean",
+                "attribute": "backdrop",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggles the overlay element, allowing interaction only with this element when active"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpened": {},
+            "multiselectValues": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "opened",
+                "name": "opened",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits event when floating element gets opens"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "closed",
+                "name": "closed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits event when floating element gets closes"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "valueChanged",
+                "name": "valueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits event when an item is selected, this event contains the value of the selected item(s)"
+                },
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                }
+            }, {
+                "method": "cleared",
+                "name": "cleared",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits an event when the clear button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "actionIconClick",
+                "name": "actionIconClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits an event when the user click the actionIcon (the magnifying glass)"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "changeInput",
+                "name": "changeInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits updated inputed value from the vds-basic-input similar to the input event"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "setValue": {
+                "complexType": {
+                    "signature": "(value: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the autocomplete input value to handle filtering.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": undefined
+                        }]
+                }
+            },
+            "setSelectionValue": {
+                "complexType": {
+                    "signature": "(value: string | string[]) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "string | string[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the autocomplete selection value to handle.\nWhen multiple is true, sets the selected values from the list\nWhen dropdown is true and multiple is false, sets a single selected value.\nWhen dropdown is false and When multiple is false, set the input value",
+                    "tags": [{
+                            "name": "returns",
+                            "text": undefined
+                        }]
+                }
+            },
+            "getValue": {
+                "complexType": {
+                    "signature": "() => Promise<string | string[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string | string[]>"
+                },
+                "docs": {
+                    "text": "Return the autocomplete value.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "A promise that resolves by returning the autocomplete value."
+                        }]
+                }
+            },
+            "clear": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clears the selected options and resets the value of the autocomplete.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "A promise that resolves when the clearing operation is complete."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "multiselectValues",
+                "methodName": "setMulitpleValueHandler"
+            }, {
+                "propName": "disabled",
+                "methodName": "setDisabledState"
+            }, {
+                "propName": "selectedDropdownValue",
+                "methodName": "setDropdownValueValidation"
+            }, {
+                "propName": "isOpened",
+                "methodName": "toggleAutocomplete"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "autocompleteClicked",
+                "method": "handleSelectOption",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleClickOut",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keyup",
+                "method": "handleEscPress",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=vds-basic-autocomplete.js.map