import { EventEmitter } from "../../stencil-public-runtime"; import { IcAutocompleteTypes, IcAutocorrectStates, IcMenuOption, IcMultiValueEventDetail, IcSizesNoLarge, IcThemeMode } from "../../utils/types"; import { IcSearchBarBlurEventDetail, IcSearchBarSearchModes } from "./ic-search-bar.types"; import { IcValueEventDetail, IcBlurEventDetail } from "../../utils/types"; import { IcMenuChangeEventDetail, IcOptionSelectEventDetail } from "../ic-menu/ic-menu.types"; import { IcButtonTypes } from "../ic-button/ic-button.types"; /** * @slot helper-text - Content is set as the helper text for the search bar. */ export declare class SearchBar { private anchorEl?; private assistiveHintEl?; private debounceAriaLive?; private hasTimedOut; private inputEl?; private inputId; private menu?; private menuCloseFromMenuChangeEvent; private menuId; private preLoad; private preventSubmit; private prevNoOption; private retryButtonClick; private retryViaKeyPress; private timeoutTimer?; private truncateValue; private searchSubmitButton?; el: HTMLIcSearchBarElement; ariaActiveDescendant?: string; clearButtonFocused: boolean; highlightedValue?: string; open: boolean; searchSubmitFocused: boolean; showClearButton: boolean; /** * The automatic capitalisation of the text value as it is entered/edited by the user. * Available options: "off", "none", "on", "sentences", "words", "characters". */ autocapitalize: string; /** * The state of autocompletion the browser can apply on the text value. */ autocomplete: IcAutocompleteTypes; /** * The state of autocorrection the browser can apply when the user is entering/editing the text value. */ autocorrect: IcAutocorrectStates; /** * If `true`, the form control will have input focus when the page loads. */ autofocus: boolean; /** * The number of characters until suggestions appear. The submit button will be disabled until the inputted value is equal to or greater than this number. */ charactersUntilSuggestion: number; watchCharactersUntilSuggestionHandler(): void; /** * If `true`, the disabled state will be set. */ disabled: boolean; watchDisabledHandler(): void; /** * Specify whether to disable the built in filtering. For example, if options will already be filtered from external source. * If `true`, all options provided will be displayed. */ disableAutoFiltering: boolean; /** * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke. */ debounce: number; private debounceChanged; /** * The text displayed when there are no options in the option list. */ emptyOptionListText: string; /** * If `true`, the search bar will be focused when component loaded. */ focusOnLoad: boolean; /** * Specify whether the search bar fills the full width of the container. * If `true`, this overrides the --input-width CSS variable. */ fullWidth: boolean; /** * The helper text that will be displayed for additional field guidance. */ helperText: string; /** * If `true`, the label will be hidden and the required label value will be applied as an aria-label. */ hideLabel: boolean; /** * The hint text for the hidden assistive description element. */ assistiveHintText: string; /** * The label for the search bar. */ label: string; /** * The custom name for the label field to correspond with the IcMenuOption type. */ labelField: string; /** * Trigger loading state when fetching options asynchronously */ loading: boolean; loadingHandler(newValue: boolean): void; /** * Change the message displayed when external loading times out. */ loadingErrorLabel: string; /** * Change the message displayed whilst the options are being loaded externally. */ loadingLabel: string; /** * The name of the control, which is submitted with the form data. */ name: string; /** * The placeholder value to display. */ placeholder: string; /** * If `true` the parent form will not submit when the icSubmitSearch event fires. */ preventFormSubmitOnSearch: boolean; searchButtonType: IcButtonTypes; preventFormSubmitOnSearchHandler(): void; /** * If `true`, the readonly state will be set. */ readonly: boolean; /** * If `true`, the search bar will require a value. */ required: boolean; /** * Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches. */ searchMode: IcSearchBarSearchModes; /** * The size of the search bar component. */ size: IcSizesNoLarge; /** * If `true`, the value of the search will have its spelling and grammar checked. */ spellcheck: boolean; /** * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component. */ theme: IcThemeMode; /** * If using external filtering, set a timeout for when loading takes too long. */ timeout?: number; /** * The custom name for the value field to correspond with the IcMenuOption type. */ valueField: string; filteredOptions: IcMenuOption[]; filteredOptionsHandler(newOptions: IcMenuOption[]): void; /** * The suggested search options. */ options: IcMenuOption[]; watchOptionsHandler(newOptions: IcMenuOption[]): void; /** * The value of the search input. */ value: string; watchValueHandler(newValue: string): void; /** * Emitted when the value has changed. */ icChange: EventEmitter; /** * Emitted when value is cleared with clear button */ icClear: EventEmitter; private handleClear; /** * Emitted when a keyboard input occurred. */ icInput: EventEmitter; private onInput; private onInputBlur; private onInputFocus; /** * Emitted when option is highlighted within the menu */ icOptionSelect: EventEmitter; /** * Emitted when the state of the menu changes (i.e. open or close) */ icMenuChange: EventEmitter; /** * @internal - Emitted when blur is invoked from clear button */ icClearBlur: EventEmitter; private handleClearBlur; /** * Emitted when the 'retry loading' button is clicked */ icRetryLoad: EventEmitter; /** * Emitted when the search value has been submitted */ icSubmitSearch: EventEmitter; /** * @internal - Emitted when blur is invoked from search submit button */ icSubmitSearchBlur: EventEmitter; private handleSubmitSearchBlur; /** * Emitted when blur is invoked from ic-search-bar */ icSearchBarBlur: EventEmitter; /** * Emitted when focus is invoked from ic-search-bar */ icSearchBarFocus: EventEmitter; /** * Emitted when a keydown event occurred. */ icKeydown: EventEmitter<{ event: KeyboardEvent; }>; connectedCallback(): void; disconnectedCallback(): void; componentWillLoad(): void; componentDidLoad(): void; componentWillRender(): void; handleKeyDown(event: KeyboardEvent): void; handleKeyUp(ev: KeyboardEvent): void; /** * Sets focus on the native `input`. */ setFocus(): Promise; private setInputValue; private handleMouseDown; private handleSubmitSearchFocus; private handleSubmitSearch; private debounceAriaLiveUpdate; private handleSubmitSearchKeyDown; private handleRetry; private triggerLoading; private handleOptionSelect; private handleMenuOptionHighlight; private handleMenuChange; private setMenuChange; private handleHostFocus; private handleHostBlur; private handleFocusClearButton; private renderAssistiveHintEl; private updateSearchResultAriaLive; private hasOptionsOrFilterDisabled; private hadNoOptions; private isSubmitDisabled; private showMenuWithNoInput; private updateSearchButtonType; render(): any; }