@metadev/lux
Version:
Lux: Library with User Interface components for Angular.
82 lines (81 loc) • 4.45 kB
TypeScript
import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnInit } from '@angular/core';
import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
import { Observable } from 'rxjs';
import { DataSource, DataSourceItem, DecoratedDataSource } from '../datasource';
import * as i0_1 from "@angular/core";
export declare const LOST_FOCUS_TIME_WINDOW_MS = 200;
export declare class AutocompleteComponent implements ControlValueAccessor, Validator, OnInit, AfterViewInit {
private cd;
static idCounter: number;
i0: ElementRef;
completeDiv: ElementRef;
private _dataSource;
private _placeholder;
private _value;
private lostFocusHandled;
private t0;
showSpinner: boolean;
touched: boolean;
completionList: DecoratedDataSource;
showCompletion: boolean;
focusItem: DataSourceItem<any, string>;
valueChange: EventEmitter<any>;
dataSourceChange: EventEmitter<DataSource<any, string>>;
inputId: string;
disabled: boolean | null;
readonly: boolean | null;
label: string;
/** If canAddNewValues, user can type items not present in the data-source. */
canAddNewValues: boolean;
/** After cleaning the selection should the completion list remain open or closed:
* false: (default) close on filters, to clean a filter and select all.
* true: keep open (when the action most likely is to pick another one).
*/
keepOpenAfterDelete: boolean;
get value(): any;
set value(v: any);
get dataSource(): DataSource<any, string>;
set dataSource(v: DataSource<any, string>);
required: boolean;
set placeholder(v: string);
get placeholder(): string;
resolveLabelsFunction?: (instance: any, keys: any[]) => Observable<DataSource<any, string>>;
populateFunction?: (instance: any, search: string) => Observable<DataSource<any, string>>;
instance: any;
constructor(cd: ChangeDetectorRef);
onChange: (value: any) => void;
onTouched: () => void;
writeValue(value: any): void;
registerOnChange(onChange: any): void;
registerOnTouched(onTouched: any): void;
markAsTouched(): void;
setDisabledState(disabled: boolean): void;
registerOnValidatorChange(): void;
validate(control: AbstractControl): ValidationErrors | null;
clear(): void;
private completeLabel;
ngOnInit(): void;
ngAfterViewInit(): void;
onInputResized(): void;
private setSameWidth;
onKeydown(event: KeyboardEvent, label: string): void;
onKeypress(event: KeyboardEvent, label: string): void;
onKeyup(event: KeyboardEvent, label: string): void;
private focusOnNext;
private focusOnPrevious;
onLostFocus(label: string): void;
complete(item: DataSourceItem<Record<string, unknown>, string>): void;
toggleCompletion(show: boolean, label: string): void;
get selectedOption(): string;
private ensureItemVisible;
private syncCustomValue;
/** Pick selection based on text filtering (ingnores drowdown state) */
private pickSelectionOrFirstMatch;
showCompletionList(text: string): void;
private spinnerVisibility;
private hasExternalDataSource;
private computeCompletionList;
static ɵfac: i0_1.ɵɵFactoryDeclaration<AutocompleteComponent, never>;
static ɵcmp: i0_1.ɵɵComponentDeclaration<AutocompleteComponent, "lux-autocomplete", never, { "inputId": { "alias": "inputId"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "label": { "alias": "label"; "required": false; }; "canAddNewValues": { "alias": "canAddNewValues"; "required": false; }; "keepOpenAfterDelete": { "alias": "keepOpenAfterDelete"; "required": false; }; "value": { "alias": "value"; "required": false; }; "dataSource": { "alias": "dataSource"; "required": false; }; "required": { "alias": "required"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "resolveLabelsFunction": { "alias": "resolveLabelsFunction"; "required": false; }; "populateFunction": { "alias": "populateFunction"; "required": false; }; "instance": { "alias": "instance"; "required": false; }; }, { "valueChange": "valueChange"; "dataSourceChange": "dataSourceChange"; }, never, never, false, never>;
}
export declare const selectElement: (completionList: DecoratedDataSource, label: string) => DataSourceItem<any, string>;