@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
166 lines (165 loc) • 8.99 kB
TypeScript
import { FocusOrigin } from '@angular/cdk/a11y';
import { ElementRef, EventEmitter, OnChanges, OnDestroy, SimpleChanges, TemplateRef } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { InfiniteScrollDirective, InfiniteScrollLoadedEvent, InfiniteScrollLoadFunction } from '../../directives/infinite-scroll/index';
import { PopoverOrientationService } from '../../services/popover-orientation/popover-orientation.service';
import { TypeaheadOptionEvent } from './typeahead-event';
import { TypeaheadOptionApi } from './typeahead-option-api';
import { TypeaheadOptionContext } from './typeahead-option-context';
import { TypeaheadVisibleOption } from './typeahead-visible-option';
import * as i0 from "@angular/core";
export declare class TypeaheadComponent<T = any> implements OnChanges, OnDestroy {
readonly typeaheadElement: ElementRef<any>;
readonly popoverOrientation: PopoverOrientationService;
private readonly _changeDetector;
private readonly _service;
infiniteScroll: InfiniteScrollDirective;
/** Define a unique id for the typeahead */
id: string;
/** Define the options or infinite load function */
options: T[] | InfiniteScrollLoadFunction;
/** Define the filter text */
filter: string;
/** Specify if the typeahead is open */
get open(): boolean;
set open(value: boolean);
/** Extract the test to display from an option */
display: ((option: T) => string) | string;
/** Extract the key from an option */
key: ((option: T) => string) | string;
/** Specify which options are disabled */
set disabledOptions(options: T | T[]);
get disabledOptions(): T | T[];
_disabledOptions: T[];
/** Specify the drop direction */
dropDirection: 'auto' | 'up' | 'down';
/** Specify the max height of the dropdown */
get maxHeight(): string;
set maxHeight(maxHeight: string);
/** Specify the aria multi selectable attribute value */
multiselectable: boolean;
/** Specify the aria label for the listbox */
ariaLabel: string;
/** Specify if the dropdown should appear when the filter appears */
openOnFilterChange: boolean;
/** Specify the page size */
pageSize: number;
/** Specify if we should select the first item by default */
selectFirst: boolean;
/** Specify if we should select an item on enter key press */
selectOnEnter: boolean;
/** Specify the loading state */
loading: boolean;
/** Specify a custom loading template */
loadingTemplate: TemplateRef<void>;
/** Specify a custom option template */
optionTemplate: TemplateRef<TypeaheadOptionContext<T>>;
/** Specify a custom template to display when there are no options */
noOptionsTemplate: TemplateRef<void>;
/** Specify the currently active item */
set active(item: T);
/**
* An initial list of recently selected options, to be presented above the full list of options.
* Bind an empty array to `recentOptions` to enable this feature without providing an initial set.
*/
recentOptions: ReadonlyArray<T>;
/** Maximum number of displayed recently selected options. */
recentOptionsMaxCount: number;
recentOptionsHeadingTemplate: TemplateRef<void>;
optionsHeadingTemplate: TemplateRef<void>;
/** Emit when the open state changes */
openChange: EventEmitter<boolean>;
/** Emit when an option is selected */
optionSelected: EventEmitter<TypeaheadOptionEvent<T>>;
/** Emit whenever a highlighted item changes */
highlightedChange: EventEmitter<T>;
/** Emit the highlighted element when it changes */
highlightedElementChange: EventEmitter<HTMLElement>;
/** Emits when recently selected options change.*/
recentOptionsChange: EventEmitter<readonly T[]>;
activeKey: string;
clicking: boolean;
hasBeenOpened: boolean;
highlighted$: BehaviorSubject<TypeaheadVisibleOption<T>>;
loadOptionsCallback: InfiniteScrollLoadFunction;
visibleOptions$: BehaviorSubject<TypeaheadVisibleOption<T>[]>;
visibleRecentOptions$: BehaviorSubject<TypeaheadVisibleOption<T>[]>;
allVisibleOptions: TypeaheadVisibleOption<T>[];
get highlighted(): T;
/** Store the list of recent items */
private _recentOptions;
private readonly _onDestroy;
private readonly _popoverOrientationListener;
private _maxHeight;
dropUp: boolean;
optionApi: TypeaheadOptionApi<T>;
constructor();
ngOnChanges(changes: SimpleChanges): void;
ngOnDestroy(): void;
mousedownHandler(event: MouseEvent, target: HTMLElement): void;
mouseupHandler(): void;
optionMousedownHandler(event: MouseEvent): void;
optionClickHandler(_event: MouseEvent, option: TypeaheadVisibleOption<T>): void;
/**
* Returns the unique key value of the given option.
*/
getKey(option: T): string;
/**
* Returns the display value of the given option.
*/
getDisplay(option: T): string | undefined;
/**
* Returns the display value of the given option with HTML markup added to highlight the part which matches the current filter value.
* @param option
*/
getDisplayHtml(option: T): string;
/**
* Returns true if the infinite scroll component should load
*/
isInfiniteScroll(): boolean;
/**
* Selects the given option, emitting the optionSelected event and closing the dropdown.
*/
select(option: TypeaheadVisibleOption<T>, origin?: FocusOrigin): void;
addToRecentOptions(value: T): void;
/**
* Returns true if the given option is part of the disabledOptions array.
*/
isDisabled(option: T): boolean;
/**
* Set the given option as the current highlighted option, available in the highlightedOption parameter.
*/
highlight(option: TypeaheadVisibleOption<T>): void;
/**
* Increment or decrement the highlighted option in the list. Disabled options are skipped.
* @param d Value to be added to the index of the highlighted option, i.e. -1 to move backwards, +1 to move forwards.
*/
moveHighlight(d: -1 | 1): T;
selectHighlighted(): void;
/**
* Set up the options before the dropdown is displayed.
*/
initOptions(): void;
/**
* Display the first item as highlighted when there are several pages
*/
onLoadedHighlight(event: InfiniteScrollLoadedEvent): void;
/**
* Update the visibleOptions and visibleRecentOptions arrays with the current filter.
*/
updateOptions(): void;
/**
* Convert a set of raw options into a filtered list of `TypeaheadVisibleOption` objects.
* @param options Set of raw options
* @param filter The filter expression
* @param isRecentOptions Whether `options` is a set of recent options
*/
private getVisibleOptions;
/**
* Return the index of the given option in the allVisibleOptions array.
* Returns -1 if the option is not currently visible.
*/
private indexOfVisibleOption;
static ɵfac: i0.ɵɵFactoryDeclaration<TypeaheadComponent<any>, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<TypeaheadComponent<any>, "ux-typeahead", never, { "id": { "alias": "id"; "required": false; }; "options": { "alias": "options"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "open": { "alias": "open"; "required": false; }; "display": { "alias": "display"; "required": false; }; "key": { "alias": "key"; "required": false; }; "disabledOptions": { "alias": "disabledOptions"; "required": false; }; "dropDirection": { "alias": "dropDirection"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "multiselectable": { "alias": "multiselectable"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "openOnFilterChange": { "alias": "openOnFilterChange"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "selectFirst": { "alias": "selectFirst"; "required": false; }; "selectOnEnter": { "alias": "selectOnEnter"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; }; "optionTemplate": { "alias": "optionTemplate"; "required": false; }; "noOptionsTemplate": { "alias": "noOptionsTemplate"; "required": false; }; "active": { "alias": "active"; "required": false; }; "recentOptions": { "alias": "recentOptions"; "required": false; }; "recentOptionsMaxCount": { "alias": "recentOptionsMaxCount"; "required": false; }; "recentOptionsHeadingTemplate": { "alias": "recentOptionsHeadingTemplate"; "required": false; }; "optionsHeadingTemplate": { "alias": "optionsHeadingTemplate"; "required": false; }; }, { "openChange": "openChange"; "optionSelected": "optionSelected"; "highlightedChange": "highlightedChange"; "highlightedElementChange": "highlightedElementChange"; "recentOptionsChange": "recentOptionsChange"; }, never, never, false, never>;
}