@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
113 lines (112 loc) • 4.32 kB
TypeScript
import { EventEmitter } from '../../stencil-public-runtime';
import { ModusSize } from '../types';
export interface IAutocompleteItem {
/** Whether the item is disabled */
disabled?: boolean;
/** Whether the item is currently focused */
focused?: boolean;
/** The display text shown for the autocomplete item */
label: string;
/** Whether the item is currently selected */
selected?: boolean;
/** The unique value identifier for the item */
value: string;
/** Whether the item should be shown in the dropdown menu */
visibleInMenu: boolean;
}
export interface IAutocompleteNoResults {
/** The aria-label to provide accessibility information for the no results section. */
ariaLabel?: string;
/** The main label to display when no results are found. */
label: string;
/** The sub-label or additional text to display below the main label. */
subLabel: string;
}
/**
* A customizable autocomplete component used to create searchable text inputs.
*/
export declare class ModusWcAutocomplete {
private debounceTimer?;
private inheritedAttributes;
/** Reference to the host element */
el: HTMLElement;
private menuVisible;
/** 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;
/** 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;
/** Event emitted when a selected item chip is removed. */
chipRemove: EventEmitter<IAutocompleteItem>;
/** 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;
disconnectedCallback(): void;
componentWillLoad(): void;
private getClasses;
private getMultiSelectClasses;
private handleBlur;
private handleMenuFocusout;
private handleChange;
handleKeyDown(event: KeyboardEvent): void;
private handleFocus;
private handleItemSelect;
private handleChipRemove;
private renderNoResults;
private handleOutsideClick;
render(): any;
}