wabtec-internal-volt-basic-components 1.2.0 → 1.4.0

package/dist/types/components/autocomplete/vds-basic-autocomplete.d.ts

@@ -1,192 +1,748 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { HTMLStencilElement } from '../../stencil-public-runtime';
 import { SelectedValueChangedEventDetail } from './vds-basic-autocomplete.utils';
+/**
+ * @component vds-basic-autocomplete
+ * @description An autocomplete component that provides filterable dropdown suggestions.
+ * Supports single selection, multi-selection, dropdown mode, and various customization options.
+ * @slot items - Autocomplete item elements
+ * @slot header - Content displayed in the dropdown header
+ * @slot (default) - Default slot for autocomplete items
+ * @example
+ * <!-- Basic autocomplete (single selection with filtering) -->
+ * <vds-basic-autocomplete placeholder="Search countries...">
+ *   <vds-autocomplete-item value="usa">United States</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="canada">Canada</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="mexico">Mexico</vds-autocomplete-item>
+ * </vds-basic-autocomplete>
+ *
+ * <!-- With pre-selected value -->
+ * <vds-basic-autocomplete
+ *   value="canada"
+ *   placeholder="Select country">
+ *   <vds-autocomplete-item value="usa">United States</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="canada">Canada</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="mexico">Mexico</vds-autocomplete-item>
+ * </vds-basic-autocomplete>
+ *
+ * <!-- Multiple selection mode -->
+ * <vds-basic-autocomplete
+ *   id="multi-select"
+ *   multiple
+ *   placeholder="Select countries">
+ *   <vds-autocomplete-item value="usa">United States</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="canada">Canada</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="mexico">Mexico</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="uk">United Kingdom</vds-autocomplete-item>
+ * </vds-basic-autocomplete>
+ * <script>
+ *   const multiSelect = document.getElementById('multi-select');
+ *   multiSelect.multipleValues = ['usa', 'canada'];
+ * </script>
+ *
+ * <!-- Dropdown mode (select without filtering) -->
+ * <vds-basic-autocomplete
+ *   dropdown
+ *   selected-dropdown-value="option2"
+ *   placeholder="Select option">
+ *   <vds-autocomplete-item value="option1">Option 1</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="option2">Option 2</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="option3">Option 3</vds-autocomplete-item>
+ * </vds-basic-autocomplete>
+ *
+ * <!-- With informative icon and custom size -->
+ * <vds-basic-autocomplete
+ *   placeholder="Search..."
+ *   informative-icon="system"
+ *   size="large">
+ *   <vds-autocomplete-item value="item1">Item 1</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="item2">Item 2</vds-autocomplete-item>
+ * </vds-basic-autocomplete>
+ *
+ * <!-- Dynamic informative icon from selected item -->
+ * <vds-basic-autocomplete
+ *   placeholder="Choose status"
+ *   dynamic-informative-icon
+ *   dropdown>
+ *   <vds-autocomplete-item value="active" informative-icon="checked">Active</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="pending" informative-icon="time">Pending</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="inactive" informative-icon="error">Inactive</vds-autocomplete-item>
+ * </vds-basic-autocomplete>
+ *
+ * <!-- With debounce and custom action icon -->
+ * <vds-basic-autocomplete
+ *   id="debounced-search"
+ *   placeholder="Type to search..."
+ *   action-icon="magnify">
+ *   <vds-autocomplete-item value="result1">Result 1</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="result2">Result 2</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="result3">Result 3</vds-autocomplete-item>
+ * </vds-basic-autocomplete>
+ * <script>
+ *   const debouncedSearch = document.getElementById('debounced-search');
+ *   debouncedSearch.debounce = 300;
+ * </script>
+ *
+ * <!-- With empty message and max height -->
+ * <vds-basic-autocomplete
+ *   placeholder="Search items..."
+ *   show-empty-message
+ *   empty-message="No items found"
+ *   max-height="200px">
+ *   <vds-autocomplete-item value="a">Item A</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="b">Item B</vds-autocomplete-item>
+ * </vds-basic-autocomplete>
+ *
+ * <!-- Disabled and readonly states -->
+ * <vds-basic-autocomplete
+ *   disabled
+ *   value="disabled-value"
+ *   placeholder="Disabled">
+ *   <vds-autocomplete-item value="disabled-value">Disabled Item</vds-autocomplete-item>
+ * </vds-basic-autocomplete>
+ *
+ * <vds-basic-autocomplete
+ *   is-readonly
+ *   value="readonly-value"
+ *   placeholder="Read only">
+ *   <vds-autocomplete-item value="readonly-value">Read Only Item</vds-autocomplete-item>
+ * </vds-basic-autocomplete>
+ *
+ * <!-- With error state and required indicator -->
+ * <vds-basic-autocomplete
+ *   error
+ *   is-required
+ *   placeholder="Required field">
+ *   <vds-autocomplete-item value="val1">Value 1</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="val2">Value 2</vds-autocomplete-item>
+ * </vds-basic-autocomplete>
+ *
+ * <!-- Small size without clear button -->
+ * <vds-basic-autocomplete
+ *   size="small"
+ *   show-clear-button="false"
+ *   placeholder="Compact autocomplete">
+ *   <vds-autocomplete-item value="opt1">Option 1</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="opt2">Option 2</vds-autocomplete-item>
+ * </vds-basic-autocomplete>
+ *
+ * <!-- With header slot -->
+ * <vds-basic-autocomplete placeholder="Select with header">
+ *   <div slot="header">
+ *     <strong>Available Options</strong>
+ *   </div>
+ *   <vds-autocomplete-item value="item1">Item 1</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="item2">Item 2</vds-autocomplete-item>
+ * </vds-basic-autocomplete>
+ */
 export declare class VdsBasicAutocomplete {
     /**
      * Sets the internal input size.
-     * If multiple property is true, This will only set the basic-input text value.
+     * 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.
+     * otherwise text will be set in the basic-input.
+     * @type {("small" | "medium" | "large")}
+     * @default "medium"
      */
     size: "small" | "medium" | "large";
-    /** Sets the internal input value */
+    /**
+     * Sets the internal input value for filtering options.
+     * @type {string}
+     * @default undefined
+     */
     value: string;
-    /** Sets the selected options when multiple is activated */
+    /**
+     * Sets the selected options when multiple selection is activated.
+     * @type {Array<string>}
+     * @default []
+     */
     multipleValues: Array<string>;
-    /** Sets the selected dropdown value when dropdown is activated */
+    /**
+     * Sets the selected dropdown value when dropdown mode is activated.
+     * @type {string}
+     * @default ""
+     */
     selectedDropdownValue: string;
-    /** Sets the internal input placeholder. */
+    /**
+     * Sets the internal input placeholder text.
+     * @type {string}
+     * @default undefined
+     */
     placeholder: string;
-    /** Sets the internal input in disabled state. */
+    /**
+     * Sets the internal input in disabled state.
+     * @type {boolean}
+     * @default undefined
+     */
     disabled: boolean;
-    /** Sets the internal input in readonly state. */
+    /**
+     * Sets the internal input in readonly state.
+     * @type {boolean}
+     * @default undefined
+     */
     isReadonly: boolean;
-    /** Sets the internal input in error state. */
+    /**
+     * Sets the internal input in error state.
+     * @type {boolean}
+     * @default undefined
+     */
     error: boolean;
-    /** Toggles the required sign in the internal input */
+    /**
+     * Toggles the required indicator in the internal input.
+     * @type {boolean}
+     * @default false
+     */
     isRequired: boolean;
-    /** Allows user to define a information icon inside the input at its left . */
+    /**
+     * Defines an informative icon inside the input at its left.
+     * @type {string}
+     * @default undefined
+     */
     informativeIcon: string;
-    /** Sets character formatting for user input. Useful for adding a mask to the input. */
+    /**
+     * Allows autocomplete-item informativeIcon to reflect dynamically as the autocomplete's informativeIcon.
+     * When true, the selected item's icon becomes the autocomplete's icon.
+     * @type {boolean}
+     * @default false
+     */
+    dynamicInformativeIcon: boolean;
+    /**
+     * Sets character formatting for user input. Useful for adding a mask to the input.
+     * @type {Function}
+     * @default undefined
+     */
     formatter: Function;
-    /** Sets custom allowed styles to input (text-align, text-transform, unicode-bidi, direction) */
+    /**
+     * Determines which option field to display in the input when an option is selected.
+     * - "label": displays the option's label if it exists, otherwise falls back to value.
+     * - "value": displays the option's value if it exists, otherwise falls back to label.
+     * - "formatted": runs the `formatter` function using label/value fallback order and displays the result.
+     * If formatter is not defined, it falls back to label first, then value.
+     * @type {"label" | "value" | "formatted"}
+     * @default "label"
+     */
+    displayValue: "label" | "value" | "formatted";
+    /**
+     * Sets custom allowed styles to input (text-align, text-transform, unicode-bidi, direction).
+     * @type {Array<{ [key: string]: string }>}
+     * @default []
+     */
     allowedStyles: {
         [key: string]: string;
     }[];
-    /** Set the max height value for the floating container of the items */
+    /**
+     * Sets the max height value for the floating container of the items.
+     * @type {string}
+     * @default undefined
+     */
     maxHeight: string;
-    /** Sets the width value for the floating container of the items to match the items list width */
+    /**
+     * Sets the floating container width to match the input width.
+     * @type {boolean}
+     * @default true
+     */
     matchWidth: boolean;
-    /** Debounce time for key inputs before the search */
+    /**
+     * Debounce time in milliseconds for key inputs before triggering the search.
+     * @type {number}
+     * @default undefined
+     */
     debounce: number;
-    /** Allows user to define a search icon inside the input at its right (zoom by default) . */
+    /**
+     * Defines a search icon inside the input at its right.
+     * @type {string}
+     * @default "zoom"
+     */
     actionIcon: string;
-    /** Sets the autocomplete clear button visibility. */
+    /**
+     * Controls the visibility of the autocomplete clear button.
+     * @type {boolean}
+     * @default true
+     */
     showClearButton: boolean;
     /**
-     * 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
+     * Shows a dropdown chevron arrow that flips up/down when state changes.
+     * Enables the selectedDropdownValue prop to select an option from dropdown.
      * When multiple is true, this prop will be set to false.
+     * @type {boolean}
+     * @default false
      */
     dropdown: boolean;
-    /** Sets the autocomplete dropdown chevron icon visibility. */
+    /**
+     * Controls the visibility of the autocomplete dropdown chevron icon.
+     * @type {boolean}
+     * @default true
+     */
     showDropdownIcon: boolean;
-    /** Enables a message when there's no match options. */
+    /**
+     * Enables a message when there are no matching options.
+     * @type {boolean}
+     * @default false
+     */
     showEmptyMessage: boolean;
-    /** Allow to set the text message in the 'emptyMessage' state. */
+    /**
+     * Sets the text message displayed in the empty state.
+     * @type {string}
+     * @default "No options"
+     */
     emptyMessage: string;
     /**
-     * Allow multiple values to be selected.
-     * Also enables the multipleValues prop to be able to select multiple options
+     * Enables multiple values to be selected.
+     * Activates the multipleValues prop 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
+     * When multiple is true, valueChanged will emit an array of strings.
+     * @type {boolean}
+     * @default false
      */
     multiple: boolean;
+    /**
+     * Defines the position where the autocomplete dropdown will be opened.
+     * @type {"top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end"}
+     * @default "bottom"
+     */
+    position: 'top' | 'bottom' | 'right' | 'left' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
     /**
      * 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
+     * False by default as it may cause positioning issues in some situations, use with caution.
+     * @type {boolean}
+     * @default false
      */
     autoPosition: boolean;
     /**
-     * Clear selection and input on clicking the close button.
+     * Clears selection and input when clicking the close button.
      * Only works when multiple is true.
+     * @type {boolean}
+     * @default false
      */
     clearSelection: boolean;
-    /** Toggles the overlay element, allowing interaction only with this element when active */
+    /**
+     * Toggles the overlay element, allowing interaction only with this element when active.
+     * @type {boolean}
+     * @default false
+     */
     backdrop: boolean;
-    /** Emits event when floating element gets opens */
+    /**
+     * Highlights the matching text inside the options.
+     * @type {boolean}
+     * @default false
+     */
+    highlightText: boolean;
+    /**
+     * In dropdown mode, automatically clears the selected value when the input is fully erased.
+     * When false, the selection persists even when input is cleared.
+     * @type {boolean}
+     * @default true
+     */
+    clearOnErase: boolean;
+    /**
+     * Emitted when the floating element opens.
+     * @event opened
+     * @type {EventEmitter<void>}
+     */
     opened: EventEmitter<void>;
-    /** Emits event when floating element gets closes */
+    /**
+     * Emitted when the floating element closes.
+     * @event closed
+     * @type {EventEmitter<void>}
+     */
     closed: EventEmitter<void>;
-    /** Emits event when an item is selected, this event contains the label of the selected item(s) */
+    /**
+     * Emitted when an item is selected. Contains the label of the selected item(s).
+     * @event valueChanged
+     * @type {EventEmitter<string | string[]>}
+     */
     valueChanged: EventEmitter<string | string[]>;
-    /** Emits an event when the clear button is clicked */
+    /**
+     * Emitted when the clear button is clicked.
+     * @event cleared
+     * @type {EventEmitter<void>}
+     */
     cleared: EventEmitter<void>;
-    /** Emits an event when the user click the actionIcon (the magnifying glass) */
+    /**
+     * Emitted when the user clicks the actionIcon (the magnifying glass).
+     * @event actionIconClick
+     * @type {EventEmitter<void>}
+     */
     actionIconClick: EventEmitter<void>;
-    /** Emits updated inputed value from the vds-basic-input similar to the input event */
+    /**
+     * Emitted with the updated input value from the vds-basic-input, similar to the input event.
+     * @event changeInput
+     * @type {EventEmitter<string>}
+     */
     changeInput: EventEmitter<string>;
-    /** Emits event when an item is selected, this event contains the value of the selected item(s) */
+    /**
+     * Emitted when an item is selected. Contains the value of the selected item(s).
+     * @event selectedValueChanged
+     * @type {EventEmitter<SelectedValueChangedEventDetail>}
+     */
     selectedValueChanged: EventEmitter<SelectedValueChangedEventDetail>;
     hostEl: HTMLElement;
     autocompleteContent: HTMLDivElement;
     basicInput: HTMLVdsBasicInputElement;
+    input?: HTMLInputElement | null;
     floatingCleanUp: () => void;
     isOpened: boolean;
     multiselectValues: Array<string>;
+    defaultInformativeIcon: string;
     options: HTMLVdsAutocompleteItemElement[];
     autocompleteItemEmptyOption: HTMLVdsAutocompleteItemElement;
     debounceTimeTracker: NodeJS.Timeout;
     showUnfilteredOptions: boolean;
     private updateContainerWidth;
     validateDropdownValue: boolean;
+    /**
+     * Component lifecycle method called before the component loads.
+     * Initializes multiselect values, dropdown validation, and default informative icon if dynamic icon is enabled.
+     * @returns {void}
+     */
     componentWillLoad(): void;
+    /**
+     * Component lifecycle method called before each render.
+     * Ensures dropdown mode is disabled when multiple selection is active.
+     * @returns {void}
+     */
     componentWillRender(): void;
+    /**
+     * Component lifecycle method called after the component loads.
+     * Queries for autocomplete items and sets preselection.
+     * @returns {void}
+     */
     componentDidLoad(): void;
+    /**
+     * Component lifecycle method called after each render.
+     * Updates autocomplete items, positions the floating container, and sets preselection.
+     * @returns {void}
+     */
     componentDidRender(): void;
+    /**
+     * Component lifecycle method called when the component is disconnected.
+     * Removes event listeners and disconnects observer.
+     * @returns {void}
+     */
+    disconnectedCallback(): void;
+    /**
+     * Watches multiselectValues and emits valueChanged event with the updated values.
+     * @private
+     * @returns {void}
+     */
     setMulitpleValueHandler(): void;
+    /**
+     * Watches disabled state and closes the autocomplete when disabled.
+     * @private
+     * @returns {void}
+     */
     setDisabledState(): void;
+    /**
+     * Watches value state and highlight autocomplete items in case it is needed.
+     * @private
+     * @returns {void}
+     */
+    setValueState(): void;
+    /**
+     * Applies the current input value as highlight text to each autocomplete item.
+     * If highlighting is disabled or value is empty, items receive an empty highlight text.
+     * @private
+     * @returns {void}
+     */
+    private applyHighlightToOptions;
+    /**
+     * Watches selectedDropdownValue and resets validation flag when it changes.
+     * @private
+     * @returns {void}
+     */
     setDropdownValueValidation(): void;
+    /**
+     * Watches isOpened state and toggles the autocomplete floating container.
+     * Emits opened/closed events and manages floating positioning.
+     * @private
+     * @returns {Promise<void>}
+     */
     toggleAutocomplete(): Promise<void>;
+    /**
+     * Opens the floating element (menu) of the autocomplete.
+     * Only opens if the component is not readonly or disabled.
+     * @method
+     * @public
+     * @returns {Promise<void>}
+     */
     open(): Promise<void>;
+    /**
+     * Closes the floating element (menu) of the autocomplete.
+     * @method
+     * @public
+     * @returns {Promise<void>}
+     */
     close(): Promise<void>;
+    /**
+     * Sets focus to the input element and opens the autocomplete.
+     * @method
+     * @public
+     * @returns {Promise<void>}
+     */
     setFocus(): Promise<void>;
     /**
      * Sets the autocomplete input value to handle filtering.
-     *
+     * @method
+     * @public
+     * @param {string} value - The value to set
      * @returns {Promise<void>}
      */
     setValue(value: string): Promise<void>;
     /**
-     * Sets the autocomplete selection value to handle.
-     * When multiple is true, sets the selected values from the list
+     * Sets the autocomplete selection value.
+     * 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
-     *
+     * When dropdown is false and multiple is false, sets the input value.
+     * @method
+     * @public
+     * @param {string | string[]} value - The value or values to set
      * @returns {Promise<void>}
      */
     setSelectionValue(value: string | string[]): Promise<void>;
     /**
-     * Return the autocomplete value.
-     *
-     * @returns {Promise<string>} A promise that resolves by returning the autocomplete value.
+     * Returns the autocomplete value.
+     * Returns multipleValues array if multiple is true.
+     * Returns selectedDropdownValue if dropdown is true.
+     * Returns the input value otherwise.
+     * @method
+     * @public
+     * @returns {Promise<string | string[]>} A promise that resolves with the autocomplete value
      */
     getValue(): Promise<string | string[]>;
     /**
      * Clears the selected options and resets the value of the autocomplete.
-     *
-     * @returns {Promise<void>} A promise that resolves when the clearing operation is complete.
+     * Emits a cleared event when complete.
+     * @method
+     * @public
+     * @returns {Promise<void>} A promise that resolves when the clearing operation is complete
      */
     clear(): Promise<void>;
+    /**
+     * Listens for autocompleteClicked events from autocomplete items.
+     * Handles option selection for both single and multiple modes.
+     * @private
+     * @param {CustomEvent<{value: string, selected: boolean}>} evt - The autocomplete clicked event
+     * @returns {void}
+     */
     handleSelectOption(evt: CustomEvent<{
         value: string;
         selected: boolean;
     }>): void;
+    /**
+     * Listens for clicks outside the autocomplete to close it.
+     * @private
+     * @param {MouseEvent} evt - The mouse click event
+     * @returns {void}
+     */
     handleClickOut(evt: MouseEvent): void;
+    /**
+     * Listens for focusout events to close the autocomplete.
+     * Handles focus moving to other focusable elements.
+     * @private
+     * @param {FocusEvent} evt - The focus event
+     * @returns {void}
+     */
+    handleFocusOut(evt: FocusEvent): void;
+    /**
+     * Listens for Escape key presses to close the autocomplete.
+     * @private
+     * @param {any} evt - The keyboard event
+     * @returns {void}
+     */
     handleEscPress(evt: any): void;
+    /**
+     * Handles multi-selection logic for adding or removing values.
+     * @private
+     * @param {{value: string, selected: boolean}} selection - The selection details
+     * @returns {void}
+     */
     handleMultiselection(selection: {
         value: string;
         selected: boolean;
     }): void;
+    /**
+     * Handles value assignment for both single and multiple selection modes.
+     * Emits valueChanged and selectedValueChanged events.
+     * @private
+     * @param {CustomEvent<{ value: string; selected: boolean; }>} evt - The selection event
+     * @param {HTMLVdsAutocompleteItemElement} selectedOption - The selected option element
+     * @returns {void}
+     */
     handleValueAssignment(evt: CustomEvent<{
         value: string;
         selected: boolean;
     }>, selectedOption: HTMLVdsAutocompleteItemElement): void;
+    /**
+     * Handles input change events and debouncing.
+     * Emits changeInput event and updates the value with or without debouncing.
+     * In dropdown mode, clears the selected option when input is fully erased (if clearOnErase is true).
+     * @private
+     * @param {CustomEvent<string>} evt - The input change event
+     * @returns {void}
+     */
     handleChange(evt: CustomEvent<string>): void;
+    /**
+     * Dispatches a native input event from the host element.
+     * @private
+     * @returns {void}
+     */
     handleInputChange(): void;
+    /**
+     * Handles focus event on the input.
+     * Opens the autocomplete and shows unfiltered options in dropdown mode when value exists.
+     * @private
+     * @returns {void}
+     */
     hasFocus(): void;
+    /**
+     * Handles blur event on the input.
+     * Resets unfiltered options display and validation in dropdown mode.
+     * @private
+     * @returns {void}
+     */
     lostFocus(): void;
+    /**
+     * Emits the actionIconClick event when the action icon is clicked.
+     * @private
+     * @returns {void}
+     */
     emitActionIcon(): void;
+    /**
+     * Prepares dropdown-only state when the component opens.
+     * Keeps the selected option visible in unfiltered mode when a valid value exists.
+     * @private
+     * @returns {void}
+     */
+    private setDropdownOpenState;
+    /**
+     * Return the display string for an option using the current `displayValue` and `formatter`.
+     * @private
+     */
+    private formatOptionDisplay;
+    /**
+     * Handles debounced value changes with a timeout.
+     * @private
+     * @param {string} newValue - The new input value
+     * @returns {void}
+     */
     handleDebounceValueChange(newValue: string): void;
+    /**
+     * Checks if the autocomplete has a valid value.
+     * @private
+     * @returns {boolean} True if the value is valid, false otherwise
+     */
     private hasValue;
     /**
-     * Sets autocomplete styles for JSX.style property
-     *
-     * @param maxHeight string
-     * @returns { [key: string]: string }
+     * Sets autocomplete styles for the floating container.
+     * @private
+     * @param {string} maxHeight - Maximum height value
+     * @returns {{ [key: string]: string }} Object containing CSS properties
      */
     private setAutoCompleteStyles;
+    /**
+     * Sets preselection for multiple and dropdown modes.
+     * @private
+     * @returns {void}
+     */
     setPreselection(): void;
+    /**
+     * Sets checkmarks and selected states for multiple selection mode.
+     * @private
+     * @returns {void}
+     */
     private setOptionsMultiple;
     /**
-     * Sets the selected value for a autocomplete type dropdown and updates the options accordingly.
+     * Sets the selected value for autocomplete dropdown mode and updates options accordingly.
      * @private
-     * @param {string} selectedValue - The value of the selected option.
+     * @param {string} selectedValue - The value of the selected option
+     * @returns {void}
      */
     private setOptionsSingle;
+    /**
+     * Sets the dropdown option value and validates it.
+     * @private
+     * @returns {void}
+     */
     private setDropdownOption;
     /**
-     * Sets the all the options to unselected state
+     * Sets all options to unselected state and clears the dropdown value.
      * @private
-     * @param {string} selectedValue - The value of the selected option.
+     * @returns {void}
      */
     private clearOptions;
+    /**
+     * Renders all unfiltered options in the dropdown.
+     * @private
+     * @returns {HTMLStencilElement} The unfiltered options container
+     */
     private renderUnfilteredOptions;
+    /**
+     * Renders a single autocomplete item with proper selection state.
+     * @private
+     * @param {HTMLVdsAutocompleteItemElement} item - The autocomplete item element
+     * @returns {HTMLStencilElement} The rendered autocomplete item
+     */
     private renderItem;
+    /**
+     * Renders filtered options based on the current input value.
+     * Shows empty message if no options match and showEmptyMessage is true.
+     * @private
+     * @returns {HTMLStencilElement} The filtered options container or null
+     */
     private renderFilteredOptions;
+    /**
+     * Renders an empty option when no items match the filter.
+     * @private
+     * @returns {HTMLStencilElement} The empty option element
+     */
     private renderEmptyOption;
+    /**
+     * Renders the clear icon button.
+     * @private
+     * @returns {HTMLStencilElement} The clear icon button element
+     */
     private renderClearIcon;
+    /**
+     * Renders the action icon (dropdown chevron or search icon).
+     * @private
+     * @returns {HTMLStencilElement} The action icon element
+     */
     private renderActionIcon;
+    /**
+     * Renders the appropriate options based on dropdown state and value.
+     * @private
+     * @returns {HTMLStencilElement} The options container
+     */
     private renderOptions;
+    /**
+     * Initializes keyboard navigation for autocomplete items.
+     * Subscribes to keyboard events and manages focus within the autocomplete.
+     * Closes autocomplete on Escape key and restores focus to trigger element.
+     * @private
+     * @returns {void}
+     */
+    private initKeyboardNavigation;
+    /**
+     * Refreshes keyboard navigation targets after autocomplete items are re-rendered.
+     * @private
+     * @returns {void}
+     */
+    private refreshKeyboardNavigation;
+    /**
+     * Returns focusable autocomplete items that can be navigated
+     * @private
+     * @returns {HTMLElement[]} An array of focusable autocomplete items.
+     */
+    private getAutocompleteItems;
+    /**
+     * Destroys the active keyboard navigation session.
+     * @private
+     * @returns {void}
+     */
+    private destroyKeyboardNavigation;
+    /**
+     * Renders the complete autocomplete component.
+     * @returns {HTMLStencilElement} The root autocomplete element
+     */
     render(): HTMLStencilElement;
 }