UNPKG

6.46 kBTypeScriptView Raw
1import { ChangeDetectorRef, ComponentFactoryResolver, ElementRef, EventEmitter, Injector, NgZone, OnDestroy, OnInit, Renderer2, TemplateRef, ViewContainerRef, ApplicationRef, OnChanges, SimpleChanges } from '@angular/core';
2import { ControlValueAccessor } from '@angular/forms';
3import { OperatorFunction } from 'rxjs';
4import { Live } from '../util/accessibility/live';
5import { PlacementArray } from '../util/positioning';
6import { NgbTypeaheadConfig } from './typeahead-config';
7import { ResultTemplateContext } from './typeahead-window';
8/**
9 * An event emitted right before an item is selected from the result list.
10 */
11export interface NgbTypeaheadSelectItemEvent<T = any> {
12 /**
13 * The item from the result list about to be selected.
14 */
15 item: T;
16 /**
17 * Calling this function will prevent item selection from happening.
18 */
19 preventDefault: () => void;
20}
21/**
22 * A directive providing a simple way of creating powerful typeaheads from any text input.
23 */
24export declare class NgbTypeahead implements ControlValueAccessor, OnInit, OnChanges, OnDestroy {
25 private _elementRef;
26 private _renderer;
27 private _live;
28 private _document;
29 private _ngZone;
30 private _changeDetector;
31 private _popupService;
32 private _subscription;
33 private _closed$;
34 private _inputValueBackup;
35 private _valueChanges;
36 private _resubscribeTypeahead;
37 private _windowRef;
38 private _zoneSubscription;
39 /**
40 * The value for the `autocomplete` attribute for the `<input>` element.
41 *
42 * Defaults to `"off"` to disable the native browser autocomplete, but you can override it if necessary.
43 *
44 * @since 2.1.0
45 */
46 autocomplete: string;
47 /**
48 * A selector specifying the element the typeahead popup will be appended to.
49 *
50 * Currently only supports `"body"`.
51 */
52 container: string;
53 /**
54 * If `true`, model values will not be restricted only to items selected from the popup.
55 */
56 editable: boolean;
57 /**
58 * If `true`, the first item in the result list will always stay focused while typing.
59 */
60 focusFirst: boolean;
61 /**
62 * The function that converts an item from the result list to a `string` to display in the `<input>` field.
63 *
64 * It is called when the user selects something in the popup or the model value changes, so the input needs to
65 * be updated.
66 */
67 inputFormatter: (item: any) => string;
68 /**
69 * The function that converts a stream of text values from the `<input>` element to the stream of the array of items
70 * to display in the typeahead popup.
71 *
72 * If the resulting observable emits a non-empty array - the popup will be shown. If it emits an empty array - the
73 * popup will be closed.
74 *
75 * See the [basic example](#/components/typeahead/examples#basic) for more details.
76 *
77 * Note that the `this` argument is `undefined` so you need to explicitly bind it to a desired "this" target.
78 */
79 ngbTypeahead: OperatorFunction<string, readonly any[]> | null | undefined;
80 /**
81 * The function that converts an item from the result list to a `string` to display in the popup.
82 *
83 * Must be provided, if your `ngbTypeahead` returns something other than `Observable<string[]>`.
84 *
85 * Alternatively for more complex markup in the popup you should use `resultTemplate`.
86 */
87 resultFormatter: (item: any) => string;
88 /**
89 * The template to override the way resulting items are displayed in the popup.
90 *
91 * See the [ResultTemplateContext](#/components/typeahead/api#ResultTemplateContext) for the template context.
92 *
93 * Also see the [template for results demo](#/components/typeahead/examples#template) for more details.
94 */
95 resultTemplate: TemplateRef<ResultTemplateContext>;
96 /**
97 * If `true`, will show the hint in the `<input>` when an item in the result list matches.
98 */
99 showHint: boolean;
100 /**
101 * The preferred placement of the typeahead.
102 *
103 * Possible values are `"top"`, `"top-left"`, `"top-right"`, `"bottom"`, `"bottom-left"`,
104 * `"bottom-right"`, `"left"`, `"left-top"`, `"left-bottom"`, `"right"`, `"right-top"`,
105 * `"right-bottom"`
106 *
107 * Accepts an array of strings or a string with space separated possible values.
108 *
109 * The default order of preference is `"bottom-left bottom-right top-left top-right"`
110 *
111 * Please see the [positioning overview](#/positioning) for more details.
112 */
113 placement: PlacementArray;
114 /**
115 * A custom class to append to the typeahead popup window
116 *
117 * Accepts a string containing CSS class to be applied on the `ngb-typeahead-window`.
118 *
119 * This can be used to provide instance-specific styling, ex. you can override popup window `z-index`
120 *
121 * @since 9.1.0
122 */
123 popupClass: string;
124 /**
125 * An event emitted right before an item is selected from the result list.
126 *
127 * Event payload is of type [`NgbTypeaheadSelectItemEvent`](#/components/typeahead/api#NgbTypeaheadSelectItemEvent).
128 */
129 selectItem: EventEmitter<NgbTypeaheadSelectItemEvent<any>>;
130 activeDescendant: string | null;
131 popupId: string;
132 private _onTouched;
133 private _onChange;
134 constructor(_elementRef: ElementRef<HTMLInputElement>, viewContainerRef: ViewContainerRef, _renderer: Renderer2, injector: Injector, componentFactoryResolver: ComponentFactoryResolver, config: NgbTypeaheadConfig, ngZone: NgZone, _live: Live, _document: any, _ngZone: NgZone, _changeDetector: ChangeDetectorRef, applicationRef: ApplicationRef);
135 ngOnInit(): void;
136 ngOnChanges({ ngbTypeahead }: SimpleChanges): void;
137 ngOnDestroy(): void;
138 registerOnChange(fn: (value: any) => any): void;
139 registerOnTouched(fn: () => any): void;
140 writeValue(value: any): void;
141 setDisabledState(isDisabled: boolean): void;
142 /**
143 * Dismisses typeahead popup window
144 */
145 dismissPopup(): void;
146 /**
147 * Returns true if the typeahead popup window is displayed
148 */
149 isPopupOpen(): boolean;
150 handleBlur(): void;
151 handleKeyDown(event: KeyboardEvent): void;
152 private _openPopup;
153 private _closePopup;
154 private _selectResult;
155 private _selectResultClosePopup;
156 private _showHint;
157 private _formatItemForInput;
158 private _writeInputValue;
159 private _subscribeToUserInput;
160 private _unsubscribeFromUserInput;
161}