1 | import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, Renderer2, ChangeDetectorRef, IterableDiffers, Input, Output, ViewChild, ContentChildren, NgModule } from '@angular/core';
|
2 | import { CommonModule } from '@angular/common';
|
3 | import { trigger, transition, style, animate } from '@angular/animations';
|
4 | import { InputTextModule } from 'primeng/inputtext';
|
5 | import { ButtonModule } from 'primeng/button';
|
6 | import { RippleModule } from 'primeng/ripple';
|
7 | import { PrimeTemplate, SharedModule } from 'primeng/api';
|
8 | import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
|
9 | import { UniqueComponentId, ObjectUtils } from 'primeng/utils';
|
10 | import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
11 |
|
12 | const AUTOCOMPLETE_VALUE_ACCESSOR = {
|
13 | provide: NG_VALUE_ACCESSOR,
|
14 | useExisting: forwardRef(() => AutoComplete),
|
15 | multi: true
|
16 | };
|
17 | class AutoComplete {
|
18 | constructor(el, renderer, cd, differs) {
|
19 | this.el = el;
|
20 | this.renderer = renderer;
|
21 | this.cd = cd;
|
22 | this.differs = differs;
|
23 | this.minLength = 1;
|
24 | this.delay = 300;
|
25 | this.type = 'text';
|
26 | this.autoZIndex = true;
|
27 | this.baseZIndex = 0;
|
28 | this.dropdownIcon = "pi pi-chevron-down";
|
29 | this.unique = true;
|
30 | this.completeOnFocus = false;
|
31 | this.completeMethod = new EventEmitter();
|
32 | this.onSelect = new EventEmitter();
|
33 | this.onUnselect = new EventEmitter();
|
34 | this.onFocus = new EventEmitter();
|
35 | this.onBlur = new EventEmitter();
|
36 | this.onDropdownClick = new EventEmitter();
|
37 | this.onClear = new EventEmitter();
|
38 | this.onKeyUp = new EventEmitter();
|
39 | this.onShow = new EventEmitter();
|
40 | this.onHide = new EventEmitter();
|
41 | this.scrollHeight = '200px';
|
42 | this.dropdownMode = 'blank';
|
43 | this.showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
|
44 | this.hideTransitionOptions = '.1s linear';
|
45 | this.autocomplete = 'off';
|
46 | this.onModelChange = () => { };
|
47 | this.onModelTouched = () => { };
|
48 | this.overlayVisible = false;
|
49 | this.focus = false;
|
50 | this.inputFieldValue = null;
|
51 | this.differ = differs.find([]).create(null);
|
52 | this.listId = UniqueComponentId() + '_list';
|
53 | }
|
54 | get suggestions() {
|
55 | return this._suggestions;
|
56 | }
|
57 | set suggestions(val) {
|
58 | this._suggestions = val;
|
59 | this.handleSuggestionsChange();
|
60 | }
|
61 | ngAfterViewChecked() {
|
62 |
|
63 | if (this.suggestionsUpdated && this.overlay && this.overlay.offsetParent) {
|
64 | setTimeout(() => {
|
65 | if (this.overlay) {
|
66 | this.alignOverlay();
|
67 | }
|
68 | }, 1);
|
69 | this.suggestionsUpdated = false;
|
70 | }
|
71 | if (this.highlightOptionChanged) {
|
72 | setTimeout(() => {
|
73 | if (this.overlay) {
|
74 | let listItem = DomHandler.findSingle(this.overlay, 'li.p-highlight');
|
75 | if (listItem) {
|
76 | DomHandler.scrollInView(this.overlay, listItem);
|
77 | }
|
78 | }
|
79 | }, 1);
|
80 | this.highlightOptionChanged = false;
|
81 | }
|
82 | }
|
83 | handleSuggestionsChange() {
|
84 | if (this._suggestions != null && this.loading) {
|
85 | this.highlightOption = null;
|
86 | if (this._suggestions.length) {
|
87 | this.noResults = false;
|
88 | this.show();
|
89 | this.suggestionsUpdated = true;
|
90 | if (this.autoHighlight) {
|
91 | this.highlightOption = this._suggestions[0];
|
92 | }
|
93 | }
|
94 | else {
|
95 | this.noResults = true;
|
96 | if (this.emptyMessage) {
|
97 | this.show();
|
98 | this.suggestionsUpdated = true;
|
99 | }
|
100 | else {
|
101 | this.hide();
|
102 | }
|
103 | }
|
104 | this.loading = false;
|
105 | }
|
106 | }
|
107 | ngAfterContentInit() {
|
108 | this.templates.forEach((item) => {
|
109 | switch (item.getType()) {
|
110 | case 'item':
|
111 | this.itemTemplate = item.template;
|
112 | break;
|
113 | case 'selectedItem':
|
114 | this.selectedItemTemplate = item.template;
|
115 | break;
|
116 | default:
|
117 | this.itemTemplate = item.template;
|
118 | break;
|
119 | }
|
120 | });
|
121 | }
|
122 | writeValue(value) {
|
123 | this.value = value;
|
124 | this.filled = this.value && this.value != '';
|
125 | this.updateInputField();
|
126 | }
|
127 | registerOnChange(fn) {
|
128 | this.onModelChange = fn;
|
129 | }
|
130 | registerOnTouched(fn) {
|
131 | this.onModelTouched = fn;
|
132 | }
|
133 | setDisabledState(val) {
|
134 | this.disabled = val;
|
135 | this.cd.markForCheck();
|
136 | }
|
137 | onInput(event) {
|
138 |
|
139 | if (!this.inputKeyDown && DomHandler.isIE()) {
|
140 | return;
|
141 | }
|
142 | if (this.timeout) {
|
143 | clearTimeout(this.timeout);
|
144 | }
|
145 | let value = event.target.value;
|
146 | if (!this.multiple && !this.forceSelection) {
|
147 | this.onModelChange(value);
|
148 | }
|
149 | if (value.length === 0 && !this.multiple) {
|
150 | this.hide();
|
151 | this.onClear.emit(event);
|
152 | this.onModelChange(value);
|
153 | }
|
154 | if (value.length >= this.minLength) {
|
155 | this.timeout = setTimeout(() => {
|
156 | this.search(event, value);
|
157 | }, this.delay);
|
158 | }
|
159 | else {
|
160 | this.suggestions = null;
|
161 | this.hide();
|
162 | }
|
163 | this.updateFilledState();
|
164 | this.inputKeyDown = false;
|
165 | }
|
166 | onInputClick(event) {
|
167 | if (this.documentClickListener) {
|
168 | this.inputClick = true;
|
169 | }
|
170 | }
|
171 | search(event, query) {
|
172 |
|
173 | if (query === undefined || query === null) {
|
174 | return;
|
175 | }
|
176 | this.loading = true;
|
177 | this.completeMethod.emit({
|
178 | originalEvent: event,
|
179 | query: query
|
180 | });
|
181 | }
|
182 | selectItem(option, focus = true) {
|
183 | if (this.forceSelectionUpdateModelTimeout) {
|
184 | clearTimeout(this.forceSelectionUpdateModelTimeout);
|
185 | this.forceSelectionUpdateModelTimeout = null;
|
186 | }
|
187 | if (this.multiple) {
|
188 | this.multiInputEL.nativeElement.value = '';
|
189 | this.value = this.value || [];
|
190 | if (!this.isSelected(option) || !this.unique) {
|
191 | this.value = [...this.value, option];
|
192 | this.onModelChange(this.value);
|
193 | }
|
194 | }
|
195 | else {
|
196 | this.inputEL.nativeElement.value = this.field ? ObjectUtils.resolveFieldData(option, this.field) || '' : option;
|
197 | this.value = option;
|
198 | this.onModelChange(this.value);
|
199 | }
|
200 | this.onSelect.emit(option);
|
201 | this.updateFilledState();
|
202 | if (focus) {
|
203 | this.itemClicked = true;
|
204 | this.focusInput();
|
205 | }
|
206 | }
|
207 | show() {
|
208 | if (this.multiInputEL || this.inputEL) {
|
209 | let hasFocus = this.multiple ?
|
210 | this.multiInputEL.nativeElement.ownerDocument.activeElement == this.multiInputEL.nativeElement :
|
211 | this.inputEL.nativeElement.ownerDocument.activeElement == this.inputEL.nativeElement;
|
212 | if (!this.overlayVisible && hasFocus) {
|
213 | this.overlayVisible = true;
|
214 | }
|
215 | }
|
216 | }
|
217 | onOverlayAnimationStart(event) {
|
218 | switch (event.toState) {
|
219 | case 'visible':
|
220 | this.overlay = event.element;
|
221 | this.appendOverlay();
|
222 | if (this.autoZIndex) {
|
223 | this.overlay.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
|
224 | }
|
225 | this.alignOverlay();
|
226 | this.bindDocumentClickListener();
|
227 | this.bindDocumentResizeListener();
|
228 | this.bindScrollListener();
|
229 | this.onShow.emit(event);
|
230 | break;
|
231 | case 'void':
|
232 | this.onOverlayHide();
|
233 | break;
|
234 | }
|
235 | }
|
236 | onOverlayAnimationDone(event) {
|
237 | if (event.toState === 'void') {
|
238 | this._suggestions = null;
|
239 | }
|
240 | }
|
241 | appendOverlay() {
|
242 | if (this.appendTo) {
|
243 | if (this.appendTo === 'body')
|
244 | document.body.appendChild(this.overlay);
|
245 | else
|
246 | DomHandler.appendChild(this.overlay, this.appendTo);
|
247 | if (!this.overlay.style.minWidth) {
|
248 | this.overlay.style.minWidth = DomHandler.getWidth(this.el.nativeElement.children[0]) + 'px';
|
249 | }
|
250 | }
|
251 | }
|
252 | resolveFieldData(value) {
|
253 | return this.field ? ObjectUtils.resolveFieldData(value, this.field) : value;
|
254 | }
|
255 | restoreOverlayAppend() {
|
256 | if (this.overlay && this.appendTo) {
|
257 | this.el.nativeElement.appendChild(this.overlay);
|
258 | }
|
259 | }
|
260 | alignOverlay() {
|
261 | if (this.appendTo)
|
262 | DomHandler.absolutePosition(this.overlay, (this.multiple ? this.multiContainerEL.nativeElement : this.inputEL.nativeElement));
|
263 | else
|
264 | DomHandler.relativePosition(this.overlay, (this.multiple ? this.multiContainerEL.nativeElement : this.inputEL.nativeElement));
|
265 | }
|
266 | hide() {
|
267 | this.overlayVisible = false;
|
268 | this.cd.markForCheck();
|
269 | }
|
270 | handleDropdownClick(event) {
|
271 | if (!this.overlayVisible) {
|
272 | this.focusInput();
|
273 | let queryValue = this.multiple ? this.multiInputEL.nativeElement.value : this.inputEL.nativeElement.value;
|
274 | if (this.dropdownMode === 'blank')
|
275 | this.search(event, '');
|
276 | else if (this.dropdownMode === 'current')
|
277 | this.search(event, queryValue);
|
278 | this.onDropdownClick.emit({
|
279 | originalEvent: event,
|
280 | query: queryValue
|
281 | });
|
282 | }
|
283 | else {
|
284 | this.hide();
|
285 | }
|
286 | }
|
287 | focusInput() {
|
288 | if (this.multiple)
|
289 | this.multiInputEL.nativeElement.focus();
|
290 | else
|
291 | this.inputEL.nativeElement.focus();
|
292 | }
|
293 | removeItem(item) {
|
294 | let itemIndex = DomHandler.index(item);
|
295 | let removedValue = this.value[itemIndex];
|
296 | this.value = this.value.filter((val, i) => i != itemIndex);
|
297 | this.onModelChange(this.value);
|
298 | this.updateFilledState();
|
299 | this.onUnselect.emit(removedValue);
|
300 | }
|
301 | onKeydown(event) {
|
302 | if (this.overlayVisible) {
|
303 | let highlightItemIndex = this.findOptionIndex(this.highlightOption);
|
304 | switch (event.which) {
|
305 |
|
306 | case 40:
|
307 | if (highlightItemIndex != -1) {
|
308 | var nextItemIndex = highlightItemIndex + 1;
|
309 | if (nextItemIndex != (this.suggestions.length)) {
|
310 | this.highlightOption = this.suggestions[nextItemIndex];
|
311 | this.highlightOptionChanged = true;
|
312 | }
|
313 | }
|
314 | else {
|
315 | this.highlightOption = this.suggestions[0];
|
316 | }
|
317 | event.preventDefault();
|
318 | break;
|
319 |
|
320 | case 38:
|
321 | if (highlightItemIndex > 0) {
|
322 | let prevItemIndex = highlightItemIndex - 1;
|
323 | this.highlightOption = this.suggestions[prevItemIndex];
|
324 | this.highlightOptionChanged = true;
|
325 | }
|
326 | event.preventDefault();
|
327 | break;
|
328 |
|
329 | case 13:
|
330 | if (this.highlightOption) {
|
331 | this.selectItem(this.highlightOption);
|
332 | this.hide();
|
333 | }
|
334 | event.preventDefault();
|
335 | break;
|
336 |
|
337 | case 27:
|
338 | this.hide();
|
339 | event.preventDefault();
|
340 | break;
|
341 |
|
342 | case 9:
|
343 | if (this.highlightOption) {
|
344 | this.selectItem(this.highlightOption);
|
345 | }
|
346 | this.hide();
|
347 | break;
|
348 | }
|
349 | }
|
350 | else {
|
351 | if (event.which === 40 && this.suggestions) {
|
352 | this.search(event, event.target.value);
|
353 | }
|
354 | }
|
355 | if (this.multiple) {
|
356 | switch (event.which) {
|
357 |
|
358 | case 8:
|
359 | if (this.value && this.value.length && !this.multiInputEL.nativeElement.value) {
|
360 | this.value = [...this.value];
|
361 | const removedValue = this.value.pop();
|
362 | this.onModelChange(this.value);
|
363 | this.updateFilledState();
|
364 | this.onUnselect.emit(removedValue);
|
365 | }
|
366 | break;
|
367 | }
|
368 | }
|
369 | this.inputKeyDown = true;
|
370 | }
|
371 | onKeyup(event) {
|
372 | this.onKeyUp.emit(event);
|
373 | }
|
374 | onInputFocus(event) {
|
375 | if (!this.itemClicked && this.completeOnFocus) {
|
376 | let queryValue = this.multiple ? this.multiInputEL.nativeElement.value : this.inputEL.nativeElement.value;
|
377 | this.search(event, queryValue);
|
378 | }
|
379 | this.focus = true;
|
380 | this.onFocus.emit(event);
|
381 | this.itemClicked = false;
|
382 | }
|
383 | onInputBlur(event) {
|
384 | this.focus = false;
|
385 | this.onModelTouched();
|
386 | this.onBlur.emit(event);
|
387 | }
|
388 | onInputChange(event) {
|
389 | if (this.forceSelection) {
|
390 | let valid = false;
|
391 | let inputValue = event.target.value.trim();
|
392 | if (this.suggestions) {
|
393 | for (let suggestion of this.suggestions) {
|
394 | let itemValue = this.field ? ObjectUtils.resolveFieldData(suggestion, this.field) : suggestion;
|
395 | if (itemValue && inputValue === itemValue.trim()) {
|
396 | valid = true;
|
397 | this.forceSelectionUpdateModelTimeout = setTimeout(() => {
|
398 | this.selectItem(suggestion, false);
|
399 | }, 250);
|
400 | break;
|
401 | }
|
402 | }
|
403 | }
|
404 | if (!valid) {
|
405 | if (this.multiple) {
|
406 | this.multiInputEL.nativeElement.value = '';
|
407 | }
|
408 | else {
|
409 | this.value = null;
|
410 | this.inputEL.nativeElement.value = '';
|
411 | }
|
412 | this.onClear.emit(event);
|
413 | this.onModelChange(this.value);
|
414 | }
|
415 | }
|
416 | }
|
417 | onInputPaste(event) {
|
418 | this.onKeydown(event);
|
419 | }
|
420 | isSelected(val) {
|
421 | let selected = false;
|
422 | if (this.value && this.value.length) {
|
423 | for (let i = 0; i < this.value.length; i++) {
|
424 | if (ObjectUtils.equals(this.value[i], val, this.dataKey)) {
|
425 | selected = true;
|
426 | break;
|
427 | }
|
428 | }
|
429 | }
|
430 | return selected;
|
431 | }
|
432 | findOptionIndex(option) {
|
433 | let index = -1;
|
434 | if (this.suggestions) {
|
435 | for (let i = 0; i < this.suggestions.length; i++) {
|
436 | if (ObjectUtils.equals(option, this.suggestions[i])) {
|
437 | index = i;
|
438 | break;
|
439 | }
|
440 | }
|
441 | }
|
442 | return index;
|
443 | }
|
444 | updateFilledState() {
|
445 | if (this.multiple)
|
446 | this.filled = (this.value && this.value.length) || (this.multiInputEL && this.multiInputEL.nativeElement && this.multiInputEL.nativeElement.value != '');
|
447 | else
|
448 | this.filled = (this.inputFieldValue && this.inputFieldValue != '') || (this.inputEL && this.inputEL.nativeElement && this.inputEL.nativeElement.value != '');
|
449 | ;
|
450 | }
|
451 | updateInputField() {
|
452 | let formattedValue = this.value ? (this.field ? ObjectUtils.resolveFieldData(this.value, this.field) || '' : this.value) : '';
|
453 | this.inputFieldValue = formattedValue;
|
454 | if (this.inputEL && this.inputEL.nativeElement) {
|
455 | this.inputEL.nativeElement.value = formattedValue;
|
456 | }
|
457 | this.updateFilledState();
|
458 | }
|
459 | bindDocumentClickListener() {
|
460 | if (!this.documentClickListener) {
|
461 | const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
|
462 | this.documentClickListener = this.renderer.listen(documentTarget, 'click', (event) => {
|
463 | if (event.which === 3) {
|
464 | return;
|
465 | }
|
466 | if (!this.inputClick && !this.isDropdownClick(event)) {
|
467 | this.hide();
|
468 | }
|
469 | this.inputClick = false;
|
470 | this.cd.markForCheck();
|
471 | });
|
472 | }
|
473 | }
|
474 | isDropdownClick(event) {
|
475 | if (this.dropdown) {
|
476 | let target = event.target;
|
477 | return (target === this.dropdownButton.nativeElement || target.parentNode === this.dropdownButton.nativeElement);
|
478 | }
|
479 | else {
|
480 | return false;
|
481 | }
|
482 | }
|
483 | unbindDocumentClickListener() {
|
484 | if (this.documentClickListener) {
|
485 | this.documentClickListener();
|
486 | this.documentClickListener = null;
|
487 | }
|
488 | }
|
489 | bindDocumentResizeListener() {
|
490 | this.documentResizeListener = this.onWindowResize.bind(this);
|
491 | window.addEventListener('resize', this.documentResizeListener);
|
492 | }
|
493 | unbindDocumentResizeListener() {
|
494 | if (this.documentResizeListener) {
|
495 | window.removeEventListener('resize', this.documentResizeListener);
|
496 | this.documentResizeListener = null;
|
497 | }
|
498 | }
|
499 | onWindowResize() {
|
500 | this.hide();
|
501 | }
|
502 | bindScrollListener() {
|
503 | if (!this.scrollHandler) {
|
504 | this.scrollHandler = new ConnectedOverlayScrollHandler(this.containerEL.nativeElement, () => {
|
505 | if (this.overlayVisible) {
|
506 | this.hide();
|
507 | }
|
508 | });
|
509 | }
|
510 | this.scrollHandler.bindScrollListener();
|
511 | }
|
512 | unbindScrollListener() {
|
513 | if (this.scrollHandler) {
|
514 | this.scrollHandler.unbindScrollListener();
|
515 | }
|
516 | }
|
517 | onOverlayHide() {
|
518 | this.unbindDocumentClickListener();
|
519 | this.unbindDocumentResizeListener();
|
520 | this.unbindScrollListener();
|
521 | this.overlay = null;
|
522 | this.onHide.emit();
|
523 | }
|
524 | ngOnDestroy() {
|
525 | if (this.forceSelectionUpdateModelTimeout) {
|
526 | clearTimeout(this.forceSelectionUpdateModelTimeout);
|
527 | this.forceSelectionUpdateModelTimeout = null;
|
528 | }
|
529 | if (this.scrollHandler) {
|
530 | this.scrollHandler.destroy();
|
531 | this.scrollHandler = null;
|
532 | }
|
533 | this.restoreOverlayAppend();
|
534 | this.onOverlayHide();
|
535 | }
|
536 | }
|
537 | AutoComplete.decorators = [
|
538 | { type: Component, args: [{
|
539 | selector: 'p-autoComplete',
|
540 | template: `
|
541 | <span #container [ngClass]="{'p-autocomplete p-component':true,'p-autocomplete-dd':dropdown,'p-autocomplete-multiple':multiple}" [ngStyle]="style" [class]="styleClass">
|
542 | <input *ngIf="!multiple" #in [attr.type]="type" [attr.id]="inputId" [ngStyle]="inputStyle" [class]="inputStyleClass" [autocomplete]="autocomplete" [attr.required]="required" [attr.name]="name"
|
543 | class="p-autocomplete-input p-inputtext p-component" [ngClass]="{'p-autocomplete-dd-input':dropdown,'p-disabled': disabled}" [value]="inputFieldValue" aria-autocomplete="list" [attr.aria-controls]="listId" role="searchbox" [attr.aria-expanded]="overlayVisible" aria-haspopup="true" [attr.aria-activedescendant]="'p-highlighted-option'"
|
544 | (click)="onInputClick($event)" (input)="onInput($event)" (keydown)="onKeydown($event)" (keyup)="onKeyup($event)" [attr.autofocus]="autofocus" (focus)="onInputFocus($event)" (blur)="onInputBlur($event)" (change)="onInputChange($event)" (paste)="onInputPaste($event)"
|
545 | [attr.placeholder]="placeholder" [attr.size]="size" [attr.maxlength]="maxlength" [attr.tabindex]="tabindex" [readonly]="readonly" [disabled]="disabled" [attr.aria-label]="ariaLabel" [attr.aria-labelledby]="ariaLabelledBy" [attr.aria-required]="required"
|
546 | ><ul *ngIf="multiple" #multiContainer class="p-autocomplete-multiple-container p-component p-inputtext" [ngClass]="{'p-disabled':disabled,'p-focus':focus}" (click)="multiIn.focus()">
|
547 | <li #token *ngFor="let val of value" class="p-autocomplete-token">
|
548 | <ng-container *ngTemplateOutlet="selectedItemTemplate; context: {$implicit: val}"></ng-container>
|
549 | <span *ngIf="!selectedItemTemplate" class="p-autocomplete-token-label">{{resolveFieldData(val)}}</span>
|
550 | <span class="p-autocomplete-token-icon pi pi-times-circle" (click)="removeItem(token)" *ngIf="!disabled"></span>
|
551 | </li>
|
552 | <li class="p-autocomplete-input-token">
|
553 | <input #multiIn [attr.type]="type" [attr.id]="inputId" [disabled]="disabled" [attr.placeholder]="(value&&value.length ? null : placeholder)" [attr.tabindex]="tabindex" [attr.maxlength]="maxlength" (input)="onInput($event)" (click)="onInputClick($event)"
|
554 | (keydown)="onKeydown($event)" [readonly]="readonly" (keyup)="onKeyup($event)" [attr.autofocus]="autofocus" (focus)="onInputFocus($event)" (blur)="onInputBlur($event)" (change)="onInputChange($event)" (paste)="onInputPaste($event)" [autocomplete]="autocomplete"
|
555 | [ngStyle]="inputStyle" [class]="inputStyleClass" [attr.aria-label]="ariaLabel" [attr.aria-labelledby]="ariaLabelledBy" [attr.aria-required]="required"
|
556 | aria-autocomplete="list" [attr.aria-controls]="listId" role="searchbox" [attr.aria-expanded]="overlayVisible" aria-haspopup="true" [attr.aria-activedescendant]="'p-highlighted-option'">
|
557 | </li>
|
558 | </ul>
|
559 | <i *ngIf="loading" class="p-autocomplete-loader pi pi-spinner pi-spin"></i><button #ddBtn type="button" pButton [icon]="dropdownIcon" class="p-autocomplete-dropdown" [disabled]="disabled" pRipple
|
560 | (click)="handleDropdownClick($event)" *ngIf="dropdown" [attr.tabindex]="tabindex"></button>
|
561 | <div #panel *ngIf="overlayVisible" [ngClass]="['p-autocomplete-panel p-component']" [style.max-height]="scrollHeight" [ngStyle]="panelStyle" [class]="panelStyleClass"
|
562 | [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onOverlayAnimationStart($event)" (@overlayAnimation.done)="onOverlayAnimationDone($event)" >
|
563 | <ul role="listbox" [attr.id]="listId" class="p-autocomplete-items">
|
564 | <li role="option" *ngFor="let option of suggestions; let idx = index" class="p-autocomplete-item" pRipple [ngClass]="{'p-highlight': (option === highlightOption)}" [id]="highlightOption == option ? 'p-highlighted-option':''" (click)="selectItem(option)">
|
565 | <span *ngIf="!itemTemplate">{{resolveFieldData(option)}}</span>
|
566 | <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: option, index: idx}"></ng-container>
|
567 | </li>
|
568 | <li *ngIf="noResults && emptyMessage" class="p-autocomplete-emptymessage p-autocomplete-item">{{emptyMessage}}</li>
|
569 | </ul>
|
570 | </div>
|
571 | </span>
|
572 | `,
|
573 | animations: [
|
574 | trigger('overlayAnimation', [
|
575 | transition(':enter', [
|
576 | style({ opacity: 0, transform: 'scaleY(0.8)' }),
|
577 | animate('{{showTransitionParams}}')
|
578 | ]),
|
579 | transition(':leave', [
|
580 | animate('{{hideTransitionParams}}', style({ opacity: 0 }))
|
581 | ])
|
582 | ])
|
583 | ],
|
584 | host: {
|
585 | '[class.p-inputwrapper-filled]': 'filled',
|
586 | '[class.p-inputwrapper-focus]': 'focus && !disabled'
|
587 | },
|
588 | providers: [AUTOCOMPLETE_VALUE_ACCESSOR],
|
589 | changeDetection: ChangeDetectionStrategy.OnPush,
|
590 | encapsulation: ViewEncapsulation.None,
|
591 | styles: [".p-autocomplete{display:-ms-inline-flexbox;display:inline-flex;position:relative}.p-autocomplete-loader{margin-top:-.5rem;position:absolute;top:50%}.p-autocomplete-dd .p-autocomplete-input{-ms-flex:1 1 auto;flex:1 1 auto;width:1%}.p-autocomplete-dd .p-autocomplete-input,.p-autocomplete-dd .p-autocomplete-multiple-container{border-bottom-right-radius:0;border-top-right-radius:0}.p-autocomplete-dd .p-autocomplete-dropdown{border-bottom-left-radius:0;border-top-left-radius:0}.p-autocomplete .p-autocomplete-panel{min-width:100%}.p-autocomplete-panel{overflow:auto;position:absolute}.p-autocomplete-items{list-style-type:none;margin:0;padding:0}.p-autocomplete-item{cursor:pointer;overflow:hidden;position:relative;white-space:nowrap}.p-autocomplete-multiple-container{-ms-flex-align:center;align-items:center;cursor:text;display:-ms-flexbox;display:flex;list-style-type:none;margin:0;overflow:hidden;padding:0}.p-autocomplete-token{-ms-flex:0 0 auto;-ms-flex-align:center;align-items:center;cursor:default;display:-ms-inline-flexbox;display:inline-flex;flex:0 0 auto}.p-autocomplete-token-icon{cursor:pointer}.p-autocomplete-input-token{-ms-flex:1 1 auto;display:-ms-inline-flexbox;display:inline-flex;flex:1 1 auto}.p-autocomplete-input-token input{background-color:rgba(0,0,0,0);border:0;border-radius:0;box-shadow:none;margin:0;outline:0 none;padding:0;width:100%}.p-fluid .p-autocomplete{display:-ms-flexbox;display:flex}.p-fluid .p-autocomplete-dd .p-autocomplete-input{width:1%}"]
|
592 | },] }
|
593 | ];
|
594 | AutoComplete.ctorParameters = () => [
|
595 | { type: ElementRef },
|
596 | { type: Renderer2 },
|
597 | { type: ChangeDetectorRef },
|
598 | { type: IterableDiffers }
|
599 | ];
|
600 | AutoComplete.propDecorators = {
|
601 | minLength: [{ type: Input }],
|
602 | delay: [{ type: Input }],
|
603 | style: [{ type: Input }],
|
604 | panelStyle: [{ type: Input }],
|
605 | styleClass: [{ type: Input }],
|
606 | panelStyleClass: [{ type: Input }],
|
607 | inputStyle: [{ type: Input }],
|
608 | inputId: [{ type: Input }],
|
609 | inputStyleClass: [{ type: Input }],
|
610 | placeholder: [{ type: Input }],
|
611 | readonly: [{ type: Input }],
|
612 | disabled: [{ type: Input }],
|
613 | maxlength: [{ type: Input }],
|
614 | name: [{ type: Input }],
|
615 | required: [{ type: Input }],
|
616 | size: [{ type: Input }],
|
617 | appendTo: [{ type: Input }],
|
618 | autoHighlight: [{ type: Input }],
|
619 | forceSelection: [{ type: Input }],
|
620 | type: [{ type: Input }],
|
621 | autoZIndex: [{ type: Input }],
|
622 | baseZIndex: [{ type: Input }],
|
623 | ariaLabel: [{ type: Input }],
|
624 | ariaLabelledBy: [{ type: Input }],
|
625 | dropdownIcon: [{ type: Input }],
|
626 | unique: [{ type: Input }],
|
627 | completeOnFocus: [{ type: Input }],
|
628 | completeMethod: [{ type: Output }],
|
629 | onSelect: [{ type: Output }],
|
630 | onUnselect: [{ type: Output }],
|
631 | onFocus: [{ type: Output }],
|
632 | onBlur: [{ type: Output }],
|
633 | onDropdownClick: [{ type: Output }],
|
634 | onClear: [{ type: Output }],
|
635 | onKeyUp: [{ type: Output }],
|
636 | onShow: [{ type: Output }],
|
637 | onHide: [{ type: Output }],
|
638 | field: [{ type: Input }],
|
639 | scrollHeight: [{ type: Input }],
|
640 | dropdown: [{ type: Input }],
|
641 | dropdownMode: [{ type: Input }],
|
642 | multiple: [{ type: Input }],
|
643 | tabindex: [{ type: Input }],
|
644 | dataKey: [{ type: Input }],
|
645 | emptyMessage: [{ type: Input }],
|
646 | showTransitionOptions: [{ type: Input }],
|
647 | hideTransitionOptions: [{ type: Input }],
|
648 | autofocus: [{ type: Input }],
|
649 | autocomplete: [{ type: Input }],
|
650 | containerEL: [{ type: ViewChild, args: ['container',] }],
|
651 | inputEL: [{ type: ViewChild, args: ['in',] }],
|
652 | multiInputEL: [{ type: ViewChild, args: ['multiIn',] }],
|
653 | multiContainerEL: [{ type: ViewChild, args: ['multiContainer',] }],
|
654 | dropdownButton: [{ type: ViewChild, args: ['ddBtn',] }],
|
655 | templates: [{ type: ContentChildren, args: [PrimeTemplate,] }],
|
656 | suggestions: [{ type: Input }]
|
657 | };
|
658 | class AutoCompleteModule {
|
659 | }
|
660 | AutoCompleteModule.decorators = [
|
661 | { type: NgModule, args: [{
|
662 | imports: [CommonModule, InputTextModule, ButtonModule, SharedModule, RippleModule],
|
663 | exports: [AutoComplete, SharedModule],
|
664 | declarations: [AutoComplete]
|
665 | },] }
|
666 | ];
|
667 |
|
668 |
|
669 |
|
670 |
|
671 |
|
672 | export { AUTOCOMPLETE_VALUE_ACCESSOR, AutoComplete, AutoCompleteModule };
|
673 |
|