UNPKG

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