@vsblty/ng-autocomplete
Version:
A fork of Angular autocomplete
246 lines (245 loc) • 8.15 kB
TypeScript
import { AfterViewInit, ElementRef, EventEmitter, OnChanges, OnInit, Renderer2, SimpleChanges, TemplateRef } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import { Observable } from 'rxjs';
import * as i0 from "@angular/core";
export declare class AutocompleteComponent implements OnInit, OnChanges, AfterViewInit, ControlValueAccessor {
private renderer;
searchInput: ElementRef;
filteredListElement: ElementRef;
historyListElement: ElementRef;
inputKeyUp$: Observable<any>;
inputKeyDown$: Observable<any>;
query: string;
filteredList: any[];
historyList: any[];
isHistoryListVisible: boolean;
elementRef: any;
selectedIdx: number;
toHighlight: string;
notFound: boolean;
isFocused: boolean;
isOpen: boolean;
isScrollToEnd: boolean;
overlay: boolean;
private manualOpen;
private manualClose;
/**
* Data of items list.
* It can be array of strings or array of objects.
*/
data: Array<any>;
searchKeyword: string;
placeholder: string;
heading: string;
initialValue: any;
/**
* History identifier of history list
* When valid history identifier is given, then component stores selected item to local storage of user's browser.
* If it is null then history is hidden.
* History list is visible if at least one history item is stored.
*/
historyIdentifier: string;
/**
* Heading text of history list.
* If it is null then history heading is hidden.
*/
historyHeading: string;
historyListMaxNumber: number;
notFoundText: string;
isLoading: boolean;
debounceTime: number;
disabled: boolean;
/**
* The minimum number of characters the user must type before a search is performed.
*/
minQueryLength: number;
/**
* Focus first item in the list
*/
focusFirst: boolean;
/**
* Custom filter function
*/
customFilter: (items: any[], query: string) => any[];
/**
* Custom result render function
* @param value - selected value to be rendered inside input field
*/
selectedValueRender: (value: any) => string;
/** Event that is emitted whenever an item from the list is selected. */
selected: EventEmitter<any>;
/** Event that is emitted whenever an input is changed. */
inputChanged: EventEmitter<any>;
/** Event that is emitted whenever an input is focused. */
readonly inputFocused: EventEmitter<void>;
/** Event that is emitted whenever an input is cleared. */
readonly inputCleared: EventEmitter<void>;
/** Event that is emitted when the autocomplete panel is opened. */
readonly opened: EventEmitter<void>;
/** Event that is emitted when the autocomplete panel is closed. */
readonly closed: EventEmitter<void>;
/** Event that is emitted when scrolled to the end of items. */
readonly scrolledToEnd: EventEmitter<void>;
itemTemplate: TemplateRef<any>;
notFoundTemplate: TemplateRef<any>;
customTemplate: TemplateRef<any>;
/**
* Propagates new value when model changes
*/
propagateChange: any;
onTouched: any;
/**
* Writes a new value from the form model into the view,
* Updates model
*/
writeValue(value?: any): void;
private defaultWriteValue;
/**
* Registers a handler that is called when something in the view has changed
*/
registerOnChange(fn: any): void;
/**
* Registers a handler specifically for when a control receives a touch event
*/
registerOnTouched(fn: () => void): void;
/**
* Event that is called when the value of an input element is changed
*/
onChange(event: any): void;
constructor(elementRef: ElementRef, renderer: Renderer2);
/**
* Event that is called when the control status changes to or from DISABLED
*/
setDisabledState(isDisabled: boolean): void;
ngOnInit(): void;
ngAfterViewInit(): void;
/**
* Set initial value
* @param value
*/
setInitialValue(value: any): void;
/**
* Update search results
*/
ngOnChanges(changes: SimpleChanges): void;
/**
* Items change
*/
handleItemsChange(): void;
/**
* Filter data
*/
filterList(): void;
/**
* Default filter function, used unless customFilter is provided
*/
defaultFilterFunction(): any[];
/**
* Check if item is a string in the list.
* @param item
*/
isTypeString(item: any): boolean;
/**
* Select item in the list.
* @param item
*/
select(item: any): void;
/**
* Document click
* @param e event
*/
handleClick(e: any): void;
/**
* Handle body overlay
*/
handleOverlay(): void;
/**
* Scroll items
*/
handleScroll(): void;
/**
* Define panel state
*/
setPanelState(event: any): void;
/**
* Manual controls
*/
open(): void;
close(): void;
focus(): void;
clear(): void;
/**
* Remove search query
*/
remove(e: any): void;
/**
* Initialize historyList search
*/
initSearchHistory(): void;
handleOpen(): void;
handleClose(): void;
handleFocus(e: any): void;
scrollToEnd(): void;
/**
* Initialize keyboard events
*/
initEventStream(): void;
/**
* Listen keyboard events
*/
listenEventStream(): void;
/**
* on keyup == when input changed
* @param e event
*/
onKeyUp(e: any): void;
/**
* Keyboard arrow top and arrow bottom
* @param e event
*/
onFocusItem(e: any): void;
/**
* Scroll to focused item
* * @param index
*/
scrollToFocusedItem(index: any): void;
/**
* Select item on enter click
*/
onHandleEnter(): void;
/**
* Esc click
*/
onEsc(): void;
/**
* Tab click
*/
onTab(): void;
/**
* Delete click
*/
onDelete(): void;
/**
* Select item to save in localStorage
* @param selected
*/
saveHistory(selected: any): void;
/**
* Save item in localStorage
* @param selected
*/
saveHistoryToLocalStorage(selected: any): void;
/**
* Remove item from localStorage
* @param index
* @param e event
*/
removeHistoryItem(index: any, e: any): void;
/**
* Reset localStorage
* @param e event
*/
resetHistoryList(e: any): void;
static ɵfac: i0.ɵɵFactoryDeclaration<AutocompleteComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<AutocompleteComponent, "ng-autocomplete", never, { "data": { "alias": "data"; "required": false; }; "searchKeyword": { "alias": "searchKeyword"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "heading": { "alias": "heading"; "required": false; }; "initialValue": { "alias": "initialValue"; "required": false; }; "historyIdentifier": { "alias": "historyIdentifier"; "required": false; }; "historyHeading": { "alias": "historyHeading"; "required": false; }; "historyListMaxNumber": { "alias": "historyListMaxNumber"; "required": false; }; "notFoundText": { "alias": "notFoundText"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; "debounceTime": { "alias": "debounceTime"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "minQueryLength": { "alias": "minQueryLength"; "required": false; }; "focusFirst": { "alias": "focusFirst"; "required": false; }; "customFilter": { "alias": "customFilter"; "required": false; }; "selectedValueRender": { "alias": "selectedValueRender"; "required": false; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; }; "notFoundTemplate": { "alias": "notFoundTemplate"; "required": false; }; }, { "selected": "selected"; "inputChanged": "inputChanged"; "inputFocused": "inputFocused"; "inputCleared": "inputCleared"; "opened": "opened"; "closed": "closed"; "scrolledToEnd": "scrolledToEnd"; }, ["customTemplate"], never, false, never>;
}