@trimble-oss/moduswebcomponents
Version:
Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust
164 lines (163 loc) • 6.27 kB
TypeScript
import { EventEmitter } from '../../stencil-public-runtime';
import { AutocompleteTypes, IAutocompleteItem, IAutocompleteNoResults, IInputFeedbackProp, ModusSize } from '../types';
/**
* A customizable autocomplete component used to create searchable text inputs.
*
* The component supports a `<slot>` for injecting custom content.
*/
export declare class ModusWcAutocomplete {
private menuVisible;
private isChipsExpanded;
private initialNavigation;
private filteredItems;
private selectionOrder;
private searchText;
private showFeedback;
private debounceTimer?;
private readonly resolveEffectiveId;
private inheritedAttributes;
private programmaticOpen;
private isNavigating;
/** Reference to the host element */
el: HTMLElement;
/** Hint for form autofill feature. */
autoComplete?: AutocompleteTypes;
/** Indicates that the autocomplete should have a border. */
bordered?: boolean;
/** Custom CSS class to apply to host element. */
customClass?: string;
/**
* The debounce timeout in milliseconds.
* Set to 0 to disable debouncing.
*/
debounceMs?: number;
/** Whether the form control is disabled. */
disabled?: boolean;
/** Feedback state for the input field. */
feedback?: IInputFeedbackProp;
/** Show the clear button within the input field. */
includeClear?: boolean;
/** Show the search icon within the input field. */
includeSearch?: boolean;
/** The ID of the input element. */
inputId?: string;
/** Determine the control's relative ordering for sequential focus navigation (typically with the Tab key). */
inputTabIndex?: number;
/**
* The items to display in the menu.
* Creating a new array of items will ensure proper component re-render.
**/
items?: IAutocompleteItem[];
/** The text to display within the label. */
label?: string;
/** Whether the menu should remain open after an item is selected. */
leaveMenuOpen?: boolean;
/** The minimum number of characters required to render the menu. */
minChars: number;
/** Whether the input allows multiple items to be selected. */
multiSelect?: boolean;
/** Name of the form control. Submitted with the form as part of a name/value pair. */
name?: string;
/** The content to display when no results are found. */
noResults?: IAutocompleteNoResults;
/** Text that appears in the form control when it has no value set. */
placeholder?: string;
/** Whether the value is editable. */
readOnly?: boolean;
/** A value is required for the form to be submittable. */
required?: boolean;
/** Whether to show the menu whenever the input has focus, regardless of input value. */
showMenuOnFocus?: boolean;
/** The size of the autocomplete (input and menu). */
size?: ModusSize;
/** A spinner that appears when set to true */
showSpinner?: boolean;
/** The value of the control. */
value: string;
/** Maximum number of chips to display. When exceeded, shows expand/collapse button. Set to -1 to disable limit. */
maxChips?: number;
/** Custom item selection handler - if provided, overrides default selection logic */
customItemSelect?: (item: IAutocompleteItem) => void;
/** Custom input change handler - if provided, overrides default search filtering */
customInputChange?: (value: string) => void;
/** Custom key down handler - if provided, overrides default keyboard navigation */
customKeyDown?: (event: KeyboardEvent) => void;
/** Custom blur handler - if provided, overrides default blur behavior */
customBlur?: (event: FocusEvent) => void;
/** Minimum width for the text input in pixels. When chips would make input smaller, container height increases instead. */
minInputWidth?: number;
/** Event emitted when a selected item chip is removed. */
chipRemove: EventEmitter<IAutocompleteItem>;
/** Event emitted when chips expansion state changes. */
chipsExpansionChange: EventEmitter<{
expanded: boolean;
}>;
/** Event emitted when the clear button is clicked. */
clearClick: EventEmitter<void>;
/** Event emitted when the input loses focus. */
inputBlur: EventEmitter<FocusEvent>;
/**
* Event emitted when the input value changes.
* This event is debounced based on the debounceMs prop.
*/
inputChange: EventEmitter<Event>;
/** Event emitted when the input gains focus. */
inputFocus: EventEmitter<FocusEvent>;
/** Event emitted when a menu item is selected. */
itemSelect: EventEmitter<IAutocompleteItem>;
handleMenuVisibilityChange(): void;
handleItemsChange(newItems: IAutocompleteItem[], oldItems: IAutocompleteItem[]): void;
componentWillLoad(): void;
disconnectedCallback(): void;
private getClasses;
private getMultiSelectClasses;
private getVisibleItems;
private syncFilteredItems;
private updateItemFocus;
private clearAllFocus;
private scrollMenuItemIntoView;
private scrollToOptionSelected;
private scrollFocusedIntoView;
private handleArrowDown;
private handleArrowUp;
private handleEscape;
private handleEnter;
private handleBackspace;
private handleFocusOutside;
private handleBlur;
private handleMenuFocusout;
private handleChange;
handleKeyDown(event: KeyboardEvent): void;
private handleFocus;
/**
* Programmatically select an item
*/
selectItem(item: IAutocompleteItem | null): Promise<void>;
/**
* Programmatically open the menu
*/
openMenu(): Promise<void>;
/**
* Programmatically close the menu
*/
closeMenu(): Promise<void>;
/**
* Programmatically toggle the menu open/closed
*/
toggleMenu(): Promise<void>;
/**
* Programmatically set focus to input
*/
focusInput(): Promise<void>;
/**
* Clear the input value and reset items
*/
clearInput(): Promise<void>;
private handleItemSelectByValue;
private handleItemSelect;
private handleChipRemove;
private handleClearAll;
private toggleChipsExpansion;
private handleOutsideClick;
render(): any;
}