1 | import { EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef } from '@angular/core';
|
2 | import { ControlValueAccessor } from '@angular/forms';
|
3 | import { OperatorFunction } from 'rxjs';
|
4 | import { ResultTemplateContext } from './typeahead-window';
|
5 | import * as i0 from "@angular/core";
|
6 | /**
|
7 | * An event emitted right before an item is selected from the result list.
|
8 | */
|
9 | export 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 | */
|
22 | export 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 | }
|