UNPKG

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