source: trip-planner-front/node_modules/primeng/fesm2020/primeng-dropdown.mjs@ e29cc2e

Last change on this file since e29cc2e was 59329aa, checked in by Ema <ema_spirova@…>, 3 years ago

adding photos
  • Property mode set to 100644
File size: 63.0 KB
Line 
1import * as i4 from '@angular/cdk/scrolling';
2import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
3import * as i0 from '@angular/core';
4import { forwardRef, EventEmitter, Component, Input, Output, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, ContentChildren, NgModule } from '@angular/core';
5import { trigger, transition, style, animate } from '@angular/animations';
6import * as i2 from '@angular/common';
7import { CommonModule } from '@angular/common';
8import * as i3 from 'primeng/api';
9import { TranslationKeys, PrimeTemplate, SharedModule } from 'primeng/api';
10import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
11import { UniqueComponentId, ObjectUtils, ZIndexUtils } from 'primeng/utils';
12import { NG_VALUE_ACCESSOR } from '@angular/forms';
13import * as i5 from 'primeng/tooltip';
14import { TooltipModule } from 'primeng/tooltip';
15import * as i1 from 'primeng/ripple';
16import { RippleModule } from 'primeng/ripple';
17
18const DROPDOWN_VALUE_ACCESSOR = {
19 provide: NG_VALUE_ACCESSOR,
20 useExisting: forwardRef(() => Dropdown),
21 multi: true
22};
23class DropdownItem {
24 constructor() {
25 this.onClick = new EventEmitter();
26 }
27 onOptionClick(event) {
28 this.onClick.emit({
29 originalEvent: event,
30 option: this.option
31 });
32 }
33}
34DropdownItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: DropdownItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
35DropdownItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: DropdownItem, selector: "p-dropdownItem", inputs: { option: "option", selected: "selected", label: "label", disabled: "disabled", visible: "visible", itemSize: "itemSize", template: "template" }, outputs: { onClick: "onClick" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
36 <li (click)="onOptionClick($event)" role="option" pRipple
37 [attr.aria-label]="label" [attr.aria-selected]="selected"
38 [ngStyle]="{'height': itemSize + 'px'}" [id]="selected ? 'p-highlighted-option':''"
39 [ngClass]="{'p-dropdown-item':true, 'p-highlight': selected, 'p-disabled': disabled}">
40 <span *ngIf="!template">{{label||'empty'}}</span>
41 <ng-container *ngTemplateOutlet="template; context: {$implicit: option}"></ng-container>
42 </li>
43 `, isInline: true, directives: [{ type: i1.Ripple, selector: "[pRipple]" }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
44i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: DropdownItem, decorators: [{
45 type: Component,
46 args: [{
47 selector: 'p-dropdownItem',
48 template: `
49 <li (click)="onOptionClick($event)" role="option" pRipple
50 [attr.aria-label]="label" [attr.aria-selected]="selected"
51 [ngStyle]="{'height': itemSize + 'px'}" [id]="selected ? 'p-highlighted-option':''"
52 [ngClass]="{'p-dropdown-item':true, 'p-highlight': selected, 'p-disabled': disabled}">
53 <span *ngIf="!template">{{label||'empty'}}</span>
54 <ng-container *ngTemplateOutlet="template; context: {$implicit: option}"></ng-container>
55 </li>
56 `,
57 host: {
58 'class': 'p-element'
59 }
60 }]
61 }], propDecorators: { option: [{
62 type: Input
63 }], selected: [{
64 type: Input
65 }], label: [{
66 type: Input
67 }], disabled: [{
68 type: Input
69 }], visible: [{
70 type: Input
71 }], itemSize: [{
72 type: Input
73 }], template: [{
74 type: Input
75 }], onClick: [{
76 type: Output
77 }] } });
78class Dropdown {
79 constructor(el, renderer, cd, zone, filterService, config, overlayService) {
80 this.el = el;
81 this.renderer = renderer;
82 this.cd = cd;
83 this.zone = zone;
84 this.filterService = filterService;
85 this.config = config;
86 this.overlayService = overlayService;
87 this.scrollHeight = '200px';
88 this.resetFilterOnHide = false;
89 this.dropdownIcon = 'pi pi-chevron-down';
90 this.optionGroupChildren = "items";
91 this.autoDisplayFirst = true;
92 this.emptyFilterMessage = '';
93 this.emptyMessage = '';
94 this.autoZIndex = true;
95 this.baseZIndex = 0;
96 this.showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
97 this.hideTransitionOptions = '.1s linear';
98 this.filterMatchMode = "contains";
99 this.tooltip = '';
100 this.tooltipPosition = 'right';
101 this.tooltipPositionStyle = 'absolute';
102 this.autofocusFilter = true;
103 this.onChange = new EventEmitter();
104 this.onFilter = new EventEmitter();
105 this.onFocus = new EventEmitter();
106 this.onBlur = new EventEmitter();
107 this.onClick = new EventEmitter();
108 this.onShow = new EventEmitter();
109 this.onHide = new EventEmitter();
110 this.onClear = new EventEmitter();
111 this.onModelChange = () => { };
112 this.onModelTouched = () => { };
113 this.viewPortOffsetTop = 0;
114 this.id = UniqueComponentId();
115 }
116 get disabled() {
117 return this._disabled;
118 }
119 ;
120 set disabled(_disabled) {
121 if (_disabled) {
122 this.focused = false;
123 if (this.overlayVisible)
124 this.hide();
125 }
126 this._disabled = _disabled;
127 if (!this.cd.destroyed) {
128 this.cd.detectChanges();
129 }
130 }
131 ngAfterContentInit() {
132 this.templates.forEach((item) => {
133 switch (item.getType()) {
134 case 'item':
135 this.itemTemplate = item.template;
136 break;
137 case 'selectedItem':
138 this.selectedItemTemplate = item.template;
139 break;
140 case 'header':
141 this.headerTemplate = item.template;
142 break;
143 case 'footer':
144 this.footerTemplate = item.template;
145 break;
146 case 'emptyfilter':
147 this.emptyFilterTemplate = item.template;
148 break;
149 case 'empty':
150 this.emptyTemplate = item.template;
151 break;
152 case 'group':
153 this.groupTemplate = item.template;
154 break;
155 default:
156 this.itemTemplate = item.template;
157 break;
158 }
159 });
160 }
161 ngOnInit() {
162 this.optionsToDisplay = this.options;
163 this.updateSelectedOption(null);
164 this.labelId = this.id + '_label';
165 this.listId = this.id + '_list';
166 }
167 get options() {
168 return this._options;
169 }
170 set options(val) {
171 this._options = val;
172 this.optionsToDisplay = this._options;
173 this.updateSelectedOption(this.value);
174 this.optionsChanged = true;
175 if (this._filterValue && this._filterValue.length) {
176 this.activateFilter();
177 }
178 }
179 get filterValue() {
180 return this._filterValue;
181 }
182 set filterValue(val) {
183 this._filterValue = val;
184 this.activateFilter();
185 }
186 ngAfterViewInit() {
187 if (this.editable) {
188 this.updateEditableLabel();
189 }
190 }
191 get label() {
192 return this.selectedOption ? this.getOptionLabel(this.selectedOption) : null;
193 }
194 get emptyMessageLabel() {
195 return this.emptyMessage || this.config.getTranslation(TranslationKeys.EMPTY_MESSAGE);
196 }
197 get emptyFilterMessageLabel() {
198 return this.emptyFilterMessage || this.config.getTranslation(TranslationKeys.EMPTY_FILTER_MESSAGE);
199 }
200 get filled() {
201 return this.value || this.value != null || this.value != undefined;
202 }
203 updateEditableLabel() {
204 if (this.editableInputViewChild && this.editableInputViewChild.nativeElement) {
205 this.editableInputViewChild.nativeElement.value = (this.selectedOption ? this.getOptionLabel(this.selectedOption) : this.value || '');
206 }
207 }
208 getOptionLabel(option) {
209 return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : (option.label != undefined ? option.label : option);
210 }
211 getOptionValue(option) {
212 return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : (this.optionLabel || option.value === undefined ? option : option.value);
213 }
214 isOptionDisabled(option) {
215 return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : (option.disabled !== undefined ? option.disabled : false);
216 }
217 getOptionGroupLabel(optionGroup) {
218 return this.optionGroupLabel ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel) : (optionGroup.label != undefined ? optionGroup.label : optionGroup);
219 }
220 getOptionGroupChildren(optionGroup) {
221 return this.optionGroupChildren ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren) : optionGroup.items;
222 }
223 onItemClick(event) {
224 const option = event.option;
225 if (!this.isOptionDisabled(option)) {
226 this.selectItem(event, option);
227 this.accessibleViewChild.nativeElement.focus();
228 }
229 setTimeout(() => {
230 this.hide();
231 }, 150);
232 }
233 selectItem(event, option) {
234 if (this.selectedOption != option) {
235 this.selectedOption = option;
236 this.value = this.getOptionValue(option);
237 this.onModelChange(this.value);
238 this.updateEditableLabel();
239 this.onChange.emit({
240 originalEvent: event.originalEvent,
241 value: this.value
242 });
243 if (this.virtualScroll) {
244 setTimeout(() => {
245 this.viewPortOffsetTop = this.viewPort ? this.viewPort.measureScrollOffset() : 0;
246 }, 1);
247 }
248 }
249 }
250 ngAfterViewChecked() {
251 if (this.optionsChanged && this.overlayVisible) {
252 this.optionsChanged = false;
253 if (this.virtualScroll) {
254 this.updateVirtualScrollSelectedIndex(true);
255 }
256 this.zone.runOutsideAngular(() => {
257 setTimeout(() => {
258 this.alignOverlay();
259 }, 1);
260 });
261 }
262 if (this.selectedOptionUpdated && this.itemsWrapper) {
263 if (this.virtualScroll && this.viewPort) {
264 let range = this.viewPort.getRenderedRange();
265 this.updateVirtualScrollSelectedIndex(false);
266 if (range.start > this.virtualScrollSelectedIndex || range.end < this.virtualScrollSelectedIndex) {
267 this.viewPort.scrollToIndex(this.virtualScrollSelectedIndex);
268 }
269 }
270 let selectedItem = DomHandler.findSingle(this.overlay, 'li.p-highlight');
271 if (selectedItem) {
272 DomHandler.scrollInView(this.itemsWrapper, DomHandler.findSingle(this.overlay, 'li.p-highlight'));
273 }
274 this.selectedOptionUpdated = false;
275 }
276 }
277 writeValue(value) {
278 if (this.filter) {
279 this.resetFilter();
280 }
281 this.value = value;
282 this.updateSelectedOption(value);
283 this.updateEditableLabel();
284 this.cd.markForCheck();
285 }
286 resetFilter() {
287 this._filterValue = null;
288 if (this.filterViewChild && this.filterViewChild.nativeElement) {
289 this.filterViewChild.nativeElement.value = '';
290 }
291 this.optionsToDisplay = this.options;
292 }
293 updateSelectedOption(val) {
294 this.selectedOption = this.findOption(val, this.optionsToDisplay);
295 if (this.autoDisplayFirst && !this.placeholder && !this.selectedOption && this.optionsToDisplay && this.optionsToDisplay.length && !this.editable) {
296 this.selectedOption = this.optionsToDisplay[0];
297 this.value = this.getOptionValue(this.selectedOption);
298 this.onModelChange(this.value);
299 }
300 this.selectedOptionUpdated = true;
301 }
302 registerOnChange(fn) {
303 this.onModelChange = fn;
304 }
305 registerOnTouched(fn) {
306 this.onModelTouched = fn;
307 }
308 setDisabledState(val) {
309 this.disabled = val;
310 this.cd.markForCheck();
311 }
312 onMouseclick(event) {
313 if (this.disabled || this.readonly || this.isInputClick(event)) {
314 return;
315 }
316 this.onClick.emit(event);
317 this.accessibleViewChild.nativeElement.focus();
318 if (this.overlayVisible)
319 this.hide();
320 else
321 this.show();
322 this.cd.detectChanges();
323 }
324 onOverlayClick(event) {
325 this.overlayService.add({
326 originalEvent: event,
327 target: this.el.nativeElement
328 });
329 }
330 isInputClick(event) {
331 return DomHandler.hasClass(event.target, 'p-dropdown-clear-icon') ||
332 event.target.isSameNode(this.accessibleViewChild.nativeElement) ||
333 (this.editableInputViewChild && event.target.isSameNode(this.editableInputViewChild.nativeElement));
334 }
335 isOutsideClicked(event) {
336 return !(this.el.nativeElement.isSameNode(event.target) || this.el.nativeElement.contains(event.target) || (this.overlay && this.overlay.contains(event.target)));
337 }
338 isEmpty() {
339 return !this.optionsToDisplay || (this.optionsToDisplay && this.optionsToDisplay.length === 0);
340 }
341 onEditableInputClick() {
342 this.bindDocumentClickListener();
343 }
344 onEditableInputFocus(event) {
345 this.focused = true;
346 this.hide();
347 this.onFocus.emit(event);
348 }
349 onEditableInputChange(event) {
350 this.value = event.target.value;
351 this.updateSelectedOption(this.value);
352 this.onModelChange(this.value);
353 this.onChange.emit({
354 originalEvent: event,
355 value: this.value
356 });
357 }
358 show() {
359 this.overlayVisible = true;
360 }
361 onOverlayAnimationStart(event) {
362 switch (event.toState) {
363 case 'visible':
364 this.overlay = event.element;
365 let itemsWrapperSelector = this.virtualScroll ? '.cdk-virtual-scroll-viewport' : '.p-dropdown-items-wrapper';
366 this.itemsWrapper = DomHandler.findSingle(this.overlay, itemsWrapperSelector);
367 this.appendOverlay();
368 if (this.autoZIndex) {
369 ZIndexUtils.set('overlay', this.overlay, this.baseZIndex + this.config.zIndex.overlay);
370 }
371 this.alignOverlay();
372 this.bindDocumentClickListener();
373 this.bindDocumentResizeListener();
374 this.bindScrollListener();
375 if (this.options && this.options.length) {
376 if (!this.virtualScroll) {
377 let selectedListItem = DomHandler.findSingle(this.itemsWrapper, '.p-dropdown-item.p-highlight');
378 if (selectedListItem) {
379 selectedListItem.scrollIntoView({ block: 'nearest', inline: 'start' });
380 }
381 }
382 }
383 if (this.filterViewChild && this.filterViewChild.nativeElement) {
384 this.preventModelTouched = true;
385 if (this.autofocusFilter) {
386 this.filterViewChild.nativeElement.focus();
387 }
388 }
389 this.onShow.emit(event);
390 break;
391 case 'void':
392 this.onOverlayHide();
393 this.onHide.emit(event);
394 break;
395 }
396 }
397 onOverlayAnimationEnd(event) {
398 switch (event.toState) {
399 case 'void':
400 ZIndexUtils.clear(event.element);
401 break;
402 }
403 }
404 scrollToSelectedVirtualScrollElement() {
405 if (!this.virtualAutoScrolled) {
406 if (this.viewPortOffsetTop) {
407 this.viewPort.scrollToOffset(this.viewPortOffsetTop);
408 }
409 else if (this.virtualScrollSelectedIndex > -1) {
410 this.viewPort.scrollToIndex(this.virtualScrollSelectedIndex);
411 }
412 }
413 this.virtualAutoScrolled = true;
414 }
415 updateVirtualScrollSelectedIndex(resetOffset) {
416 if (this.selectedOption && this.optionsToDisplay && this.optionsToDisplay.length) {
417 if (resetOffset) {
418 this.viewPortOffsetTop = 0;
419 }
420 this.virtualScrollSelectedIndex = this.findOptionIndex(this.getOptionValue(this.selectedOption), this.optionsToDisplay);
421 }
422 }
423 appendOverlay() {
424 if (this.appendTo) {
425 if (this.appendTo === 'body')
426 document.body.appendChild(this.overlay);
427 else
428 DomHandler.appendChild(this.overlay, this.appendTo);
429 if (!this.overlay.style.minWidth) {
430 this.overlay.style.minWidth = DomHandler.getWidth(this.containerViewChild.nativeElement) + 'px';
431 }
432 }
433 }
434 restoreOverlayAppend() {
435 if (this.overlay && this.appendTo) {
436 this.el.nativeElement.appendChild(this.overlay);
437 }
438 }
439 hide() {
440 this.overlayVisible = false;
441 if (this.filter && this.resetFilterOnHide) {
442 this.resetFilter();
443 }
444 if (this.virtualScroll) {
445 this.virtualAutoScrolled = false;
446 }
447 this.cd.markForCheck();
448 }
449 alignOverlay() {
450 if (this.overlay) {
451 if (this.appendTo)
452 DomHandler.absolutePosition(this.overlay, this.containerViewChild.nativeElement);
453 else
454 DomHandler.relativePosition(this.overlay, this.containerViewChild.nativeElement);
455 }
456 }
457 onInputFocus(event) {
458 this.focused = true;
459 this.onFocus.emit(event);
460 }
461 onInputBlur(event) {
462 this.focused = false;
463 this.onBlur.emit(event);
464 if (!this.preventModelTouched) {
465 this.onModelTouched();
466 }
467 this.preventModelTouched = false;
468 }
469 findPrevEnabledOption(index) {
470 let prevEnabledOption;
471 if (this.optionsToDisplay && this.optionsToDisplay.length) {
472 for (let i = (index - 1); 0 <= i; i--) {
473 let option = this.optionsToDisplay[i];
474 if (option.disabled) {
475 continue;
476 }
477 else {
478 prevEnabledOption = option;
479 break;
480 }
481 }
482 if (!prevEnabledOption) {
483 for (let i = this.optionsToDisplay.length - 1; i >= index; i--) {
484 let option = this.optionsToDisplay[i];
485 if (this.isOptionDisabled(option)) {
486 continue;
487 }
488 else {
489 prevEnabledOption = option;
490 break;
491 }
492 }
493 }
494 }
495 return prevEnabledOption;
496 }
497 findNextEnabledOption(index) {
498 let nextEnabledOption;
499 if (this.optionsToDisplay && this.optionsToDisplay.length) {
500 for (let i = (index + 1); i < this.optionsToDisplay.length; i++) {
501 let option = this.optionsToDisplay[i];
502 if (this.isOptionDisabled(option)) {
503 continue;
504 }
505 else {
506 nextEnabledOption = option;
507 break;
508 }
509 }
510 if (!nextEnabledOption) {
511 for (let i = 0; i < index; i++) {
512 let option = this.optionsToDisplay[i];
513 if (this.isOptionDisabled(option)) {
514 continue;
515 }
516 else {
517 nextEnabledOption = option;
518 break;
519 }
520 }
521 }
522 }
523 return nextEnabledOption;
524 }
525 onKeydown(event, search) {
526 if (this.readonly || !this.optionsToDisplay || this.optionsToDisplay.length === null) {
527 return;
528 }
529 switch (event.which) {
530 //down
531 case 40:
532 if (!this.overlayVisible && event.altKey) {
533 this.show();
534 }
535 else {
536 if (this.group) {
537 let selectedItemIndex = this.selectedOption ? this.findOptionGroupIndex(this.getOptionValue(this.selectedOption), this.optionsToDisplay) : -1;
538 if (selectedItemIndex !== -1) {
539 let nextItemIndex = selectedItemIndex.itemIndex + 1;
540 if (nextItemIndex < (this.getOptionGroupChildren(this.optionsToDisplay[selectedItemIndex.groupIndex]).length)) {
541 this.selectItem(event, this.getOptionGroupChildren(this.optionsToDisplay[selectedItemIndex.groupIndex])[nextItemIndex]);
542 this.selectedOptionUpdated = true;
543 }
544 else if (this.optionsToDisplay[selectedItemIndex.groupIndex + 1]) {
545 this.selectItem(event, this.getOptionGroupChildren(this.optionsToDisplay[selectedItemIndex.groupIndex + 1])[0]);
546 this.selectedOptionUpdated = true;
547 }
548 }
549 else {
550 if (this.optionsToDisplay && this.optionsToDisplay.length > 0) {
551 this.selectItem(event, this.getOptionGroupChildren(this.optionsToDisplay[0])[0]);
552 }
553 }
554 }
555 else {
556 let selectedItemIndex = this.selectedOption ? this.findOptionIndex(this.getOptionValue(this.selectedOption), this.optionsToDisplay) : -1;
557 let nextEnabledOption = this.findNextEnabledOption(selectedItemIndex);
558 if (nextEnabledOption) {
559 this.selectItem(event, nextEnabledOption);
560 this.selectedOptionUpdated = true;
561 }
562 }
563 }
564 event.preventDefault();
565 break;
566 //up
567 case 38:
568 if (this.group) {
569 let selectedItemIndex = this.selectedOption ? this.findOptionGroupIndex(this.getOptionValue(this.selectedOption), this.optionsToDisplay) : -1;
570 if (selectedItemIndex !== -1) {
571 let prevItemIndex = selectedItemIndex.itemIndex - 1;
572 if (prevItemIndex >= 0) {
573 this.selectItem(event, this.getOptionGroupChildren(this.optionsToDisplay[selectedItemIndex.groupIndex])[prevItemIndex]);
574 this.selectedOptionUpdated = true;
575 }
576 else if (prevItemIndex < 0) {
577 let prevGroup = this.optionsToDisplay[selectedItemIndex.groupIndex - 1];
578 if (prevGroup) {
579 this.selectItem(event, this.getOptionGroupChildren(prevGroup)[this.getOptionGroupChildren(prevGroup).length - 1]);
580 this.selectedOptionUpdated = true;
581 }
582 }
583 }
584 }
585 else {
586 let selectedItemIndex = this.selectedOption ? this.findOptionIndex(this.getOptionValue(this.selectedOption), this.optionsToDisplay) : -1;
587 let prevEnabledOption = this.findPrevEnabledOption(selectedItemIndex);
588 if (prevEnabledOption) {
589 this.selectItem(event, prevEnabledOption);
590 this.selectedOptionUpdated = true;
591 }
592 }
593 event.preventDefault();
594 break;
595 //space
596 case 32:
597 if (search) {
598 if (!this.overlayVisible) {
599 this.show();
600 }
601 else {
602 this.hide();
603 }
604 event.preventDefault();
605 }
606 break;
607 //enter
608 case 13:
609 if (this.overlayVisible && (!this.filter || (this.optionsToDisplay && this.optionsToDisplay.length > 0))) {
610 this.hide();
611 }
612 else if (!this.overlayVisible) {
613 this.show();
614 }
615 event.preventDefault();
616 break;
617 //escape and tab
618 case 27:
619 case 9:
620 this.hide();
621 break;
622 //search item based on keyboard input
623 default:
624 if (search && !event.metaKey) {
625 this.search(event);
626 }
627 break;
628 }
629 }
630 search(event) {
631 if (this.searchTimeout) {
632 clearTimeout(this.searchTimeout);
633 }
634 const char = event.key;
635 this.previousSearchChar = this.currentSearchChar;
636 this.currentSearchChar = char;
637 if (this.previousSearchChar === this.currentSearchChar)
638 this.searchValue = this.currentSearchChar;
639 else
640 this.searchValue = this.searchValue ? this.searchValue + char : char;
641 let newOption;
642 if (this.group) {
643 let searchIndex = this.selectedOption ? this.findOptionGroupIndex(this.getOptionValue(this.selectedOption), this.optionsToDisplay) : { groupIndex: 0, itemIndex: 0 };
644 newOption = this.searchOptionWithinGroup(searchIndex);
645 }
646 else {
647 let searchIndex = this.selectedOption ? this.findOptionIndex(this.getOptionValue(this.selectedOption), this.optionsToDisplay) : -1;
648 newOption = this.searchOption(++searchIndex);
649 }
650 if (newOption && !this.isOptionDisabled(newOption)) {
651 this.selectItem(event, newOption);
652 this.selectedOptionUpdated = true;
653 }
654 this.searchTimeout = setTimeout(() => {
655 this.searchValue = null;
656 }, 250);
657 }
658 searchOption(index) {
659 let option;
660 if (this.searchValue) {
661 option = this.searchOptionInRange(index, this.optionsToDisplay.length);
662 if (!option) {
663 option = this.searchOptionInRange(0, index);
664 }
665 }
666 return option;
667 }
668 searchOptionInRange(start, end) {
669 for (let i = start; i < end; i++) {
670 let opt = this.optionsToDisplay[i];
671 if (this.getOptionLabel(opt).toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale)) && !this.isOptionDisabled(opt)) {
672 return opt;
673 }
674 }
675 return null;
676 }
677 searchOptionWithinGroup(index) {
678 let option;
679 if (this.searchValue) {
680 for (let i = index.groupIndex; i < this.optionsToDisplay.length; i++) {
681 for (let j = (index.groupIndex === i) ? (index.itemIndex + 1) : 0; j < this.getOptionGroupChildren(this.optionsToDisplay[i]).length; j++) {
682 let opt = this.getOptionGroupChildren(this.optionsToDisplay[i])[j];
683 if (this.getOptionLabel(opt).toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale)) && !this.isOptionDisabled(opt)) {
684 return opt;
685 }
686 }
687 }
688 if (!option) {
689 for (let i = 0; i <= index.groupIndex; i++) {
690 for (let j = 0; j < ((index.groupIndex === i) ? index.itemIndex : this.getOptionGroupChildren(this.optionsToDisplay[i]).length); j++) {
691 let opt = this.getOptionGroupChildren(this.optionsToDisplay[i])[j];
692 if (this.getOptionLabel(opt).toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale)) && !this.isOptionDisabled(opt)) {
693 return opt;
694 }
695 }
696 }
697 }
698 }
699 return null;
700 }
701 findOptionIndex(val, opts) {
702 let index = -1;
703 if (opts) {
704 for (let i = 0; i < opts.length; i++) {
705 if ((val == null && this.getOptionValue(opts[i]) == null) || ObjectUtils.equals(val, this.getOptionValue(opts[i]), this.dataKey)) {
706 index = i;
707 break;
708 }
709 }
710 }
711 return index;
712 }
713 findOptionGroupIndex(val, opts) {
714 let groupIndex, itemIndex;
715 if (opts) {
716 for (let i = 0; i < opts.length; i++) {
717 groupIndex = i;
718 itemIndex = this.findOptionIndex(val, this.getOptionGroupChildren(opts[i]));
719 if (itemIndex !== -1) {
720 break;
721 }
722 }
723 }
724 if (itemIndex !== -1) {
725 return { groupIndex: groupIndex, itemIndex: itemIndex };
726 }
727 else {
728 return -1;
729 }
730 }
731 findOption(val, opts, inGroup) {
732 if (this.group && !inGroup) {
733 let opt;
734 if (opts && opts.length) {
735 for (let optgroup of opts) {
736 opt = this.findOption(val, this.getOptionGroupChildren(optgroup), true);
737 if (opt) {
738 break;
739 }
740 }
741 }
742 return opt;
743 }
744 else {
745 let index = this.findOptionIndex(val, opts);
746 return (index != -1) ? opts[index] : null;
747 }
748 }
749 onFilterInputChange(event) {
750 let inputValue = event.target.value;
751 if (inputValue && inputValue.length) {
752 this._filterValue = inputValue;
753 this.activateFilter();
754 }
755 else {
756 this._filterValue = null;
757 this.optionsToDisplay = this.options;
758 }
759 this.optionsChanged = true;
760 this.onFilter.emit({ originalEvent: event, filter: this._filterValue });
761 }
762 activateFilter() {
763 let searchFields = (this.filterBy || this.optionLabel || 'label').split(',');
764 if (this.options && this.options.length) {
765 if (this.group) {
766 let filteredGroups = [];
767 for (let optgroup of this.options) {
768 let filteredSubOptions = this.filterService.filter(this.getOptionGroupChildren(optgroup), searchFields, this.filterValue, this.filterMatchMode, this.filterLocale);
769 if (filteredSubOptions && filteredSubOptions.length) {
770 filteredGroups.push({ ...optgroup, ...{ [this.optionGroupChildren]: filteredSubOptions } });
771 }
772 }
773 this.optionsToDisplay = filteredGroups;
774 }
775 else {
776 this.optionsToDisplay = this.filterService.filter(this.options, searchFields, this.filterValue, this.filterMatchMode, this.filterLocale);
777 }
778 this.optionsChanged = true;
779 }
780 }
781 applyFocus() {
782 if (this.editable)
783 DomHandler.findSingle(this.el.nativeElement, '.p-dropdown-label.p-inputtext').focus();
784 else
785 DomHandler.findSingle(this.el.nativeElement, 'input[readonly]').focus();
786 }
787 focus() {
788 this.applyFocus();
789 }
790 bindDocumentClickListener() {
791 if (!this.documentClickListener) {
792 const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
793 this.documentClickListener = this.renderer.listen(documentTarget, 'click', (event) => {
794 if (this.isOutsideClicked(event)) {
795 this.hide();
796 this.unbindDocumentClickListener();
797 }
798 this.cd.markForCheck();
799 });
800 }
801 }
802 unbindDocumentClickListener() {
803 if (this.documentClickListener) {
804 this.documentClickListener();
805 this.documentClickListener = null;
806 }
807 }
808 bindDocumentResizeListener() {
809 this.documentResizeListener = this.onWindowResize.bind(this);
810 window.addEventListener('resize', this.documentResizeListener);
811 }
812 unbindDocumentResizeListener() {
813 if (this.documentResizeListener) {
814 window.removeEventListener('resize', this.documentResizeListener);
815 this.documentResizeListener = null;
816 }
817 }
818 onWindowResize() {
819 if (this.overlayVisible && !DomHandler.isTouchDevice()) {
820 this.hide();
821 }
822 }
823 bindScrollListener() {
824 if (!this.scrollHandler) {
825 this.scrollHandler = new ConnectedOverlayScrollHandler(this.containerViewChild.nativeElement, (event) => {
826 if (this.overlayVisible) {
827 this.hide();
828 }
829 });
830 }
831 this.scrollHandler.bindScrollListener();
832 }
833 unbindScrollListener() {
834 if (this.scrollHandler) {
835 this.scrollHandler.unbindScrollListener();
836 }
837 }
838 clear(event) {
839 this.value = null;
840 this.onModelChange(this.value);
841 this.onChange.emit({
842 originalEvent: event,
843 value: this.value
844 });
845 this.updateSelectedOption(this.value);
846 this.updateEditableLabel();
847 this.onClear.emit(event);
848 }
849 onOverlayHide() {
850 this.unbindDocumentClickListener();
851 this.unbindDocumentResizeListener();
852 this.unbindScrollListener();
853 this.overlay = null;
854 this.itemsWrapper = null;
855 this.onModelTouched();
856 }
857 ngOnDestroy() {
858 if (this.scrollHandler) {
859 this.scrollHandler.destroy();
860 this.scrollHandler = null;
861 }
862 if (this.overlay) {
863 ZIndexUtils.clear(this.overlay);
864 }
865 this.restoreOverlayAppend();
866 this.onOverlayHide();
867 }
868}
869Dropdown.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Dropdown, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i3.FilterService }, { token: i3.PrimeNGConfig }, { token: i3.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
870Dropdown.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: Dropdown, selector: "p-dropdown", inputs: { scrollHeight: "scrollHeight", filter: "filter", name: "name", style: "style", panelStyle: "panelStyle", styleClass: "styleClass", panelStyleClass: "panelStyleClass", readonly: "readonly", required: "required", editable: "editable", appendTo: "appendTo", tabindex: "tabindex", placeholder: "placeholder", filterPlaceholder: "filterPlaceholder", filterLocale: "filterLocale", inputId: "inputId", selectId: "selectId", dataKey: "dataKey", filterBy: "filterBy", autofocus: "autofocus", resetFilterOnHide: "resetFilterOnHide", dropdownIcon: "dropdownIcon", optionLabel: "optionLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", autoDisplayFirst: "autoDisplayFirst", group: "group", showClear: "showClear", emptyFilterMessage: "emptyFilterMessage", emptyMessage: "emptyMessage", virtualScroll: "virtualScroll", itemSize: "itemSize", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", ariaFilterLabel: "ariaFilterLabel", ariaLabelledBy: "ariaLabelledBy", filterMatchMode: "filterMatchMode", maxlength: "maxlength", tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", autofocusFilter: "autofocusFilter", disabled: "disabled", options: "options", filterValue: "filterValue" }, outputs: { onChange: "onChange", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onClick: "onClick", onShow: "onShow", onHide: "onHide", onClear: "onClear" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "focused || overlayVisible" }, classAttribute: "p-element p-inputwrapper" }, providers: [DROPDOWN_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "filterViewChild", first: true, predicate: ["filter"], descendants: true }, { propertyName: "accessibleViewChild", first: true, predicate: ["in"], descendants: true }, { propertyName: "viewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "editableInputViewChild", first: true, predicate: ["editableInput"], descendants: true }], ngImport: i0, template: `
871 <div #container [ngClass]="{'p-dropdown p-component':true,
872 'p-disabled':disabled, 'p-dropdown-open':overlayVisible, 'p-focus':focused, 'p-dropdown-clearable': showClear && !disabled}"
873 (click)="onMouseclick($event)" [ngStyle]="style" [class]="styleClass">
874 <div class="p-hidden-accessible">
875 <input #in [attr.id]="inputId" type="text" readonly (focus)="onInputFocus($event)" aria-haspopup="listbox" [attr.placeholder]="placeholder"
876 aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible" [attr.aria-labelledby]="ariaLabelledBy" (blur)="onInputBlur($event)" (keydown)="onKeydown($event, true)"
877 [disabled]="disabled" [attr.tabindex]="tabindex" [attr.autofocus]="autofocus" [attr.aria-activedescendant]="overlayVisible ? 'p-highlighted-option' : labelId" role="listbox">
878 </div>
879 <span [attr.id]="labelId" [ngClass]="{'p-dropdown-label p-inputtext':true,'p-dropdown-label-empty':(label == null || label.length === 0)}" *ngIf="!editable && (label != null)" [pTooltip]="tooltip" [tooltipPosition]="tooltipPosition" [positionStyle]="tooltipPositionStyle" [tooltipStyleClass]="tooltipStyleClass">
880 <ng-container *ngIf="!selectedItemTemplate">{{label||'empty'}}</ng-container>
881 <ng-container *ngTemplateOutlet="selectedItemTemplate; context: {$implicit: selectedOption}"></ng-container>
882 </span>
883 <span [ngClass]="{'p-dropdown-label p-inputtext p-placeholder':true,'p-dropdown-label-empty': (placeholder == null || placeholder.length === 0)}" *ngIf="!editable && (label == null)">{{placeholder||'empty'}}</span>
884 <input #editableInput type="text" [attr.maxlength]="maxlength" class="p-dropdown-label p-inputtext" *ngIf="editable" [disabled]="disabled" [attr.placeholder]="placeholder"
885 aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible" (click)="onEditableInputClick()" (input)="onEditableInputChange($event)" (focus)="onEditableInputFocus($event)" (blur)="onInputBlur($event)">
886 <i class="p-dropdown-clear-icon pi pi-times" (click)="clear($event)" *ngIf="value != null && showClear && !disabled"></i>
887 <div class="p-dropdown-trigger" role="button" aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible">
888 <span class="p-dropdown-trigger-icon" [ngClass]="dropdownIcon"></span>
889 </div>
890 <div *ngIf="overlayVisible" [ngClass]="'p-dropdown-panel p-component'" (click)="onOverlayClick($event)" [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onOverlayAnimationStart($event)" (@overlayAnimation.start)="onOverlayAnimationEnd($event)"onOverlayAnimationEnd [ngStyle]="panelStyle" [class]="panelStyleClass">
891 <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
892 <div class="p-dropdown-header" *ngIf="filter" >
893 <div class="p-dropdown-filter-container" (click)="$event.stopPropagation()">
894 <input #filter type="text" autocomplete="off" [value]="filterValue||''" class="p-dropdown-filter p-inputtext p-component" [attr.placeholder]="filterPlaceholder"
895 (keydown.enter)="$event.preventDefault()" (keydown)="onKeydown($event, false)" (input)="onFilterInputChange($event)" [attr.aria-label]="ariaFilterLabel" [attr.aria-activedescendant]="overlayVisible ? 'p-highlighted-option' : labelId">
896 <span class="p-dropdown-filter-icon pi pi-search"></span>
897 </div>
898 </div>
899 <div class="p-dropdown-items-wrapper" [style.max-height]="virtualScroll ? 'auto' : (scrollHeight||'auto')">
900 <ul [attr.id]="listId" class="p-dropdown-items" [ngClass]="{'p-dropdown-virtualscroll': virtualScroll}" role="listbox">
901 <ng-container *ngIf="group">
902 <ng-template ngFor let-optgroup [ngForOf]="optionsToDisplay">
903 <li class="p-dropdown-item-group">
904 <span *ngIf="!groupTemplate">{{getOptionGroupLabel(optgroup)||'empty'}}</span>
905 <ng-container *ngTemplateOutlet="groupTemplate; context: {$implicit: optgroup}"></ng-container>
906 </li>
907 <ng-container *ngTemplateOutlet="itemslist; context: {$implicit: getOptionGroupChildren(optgroup), selectedOption: selectedOption}"></ng-container>
908 </ng-template>
909 </ng-container>
910 <ng-container *ngIf="!group">
911 <ng-container *ngTemplateOutlet="itemslist; context: {$implicit: optionsToDisplay, selectedOption: selectedOption}"></ng-container>
912 </ng-container>
913 <ng-template #itemslist let-options let-selectedOption="selectedOption">
914 <ng-container *ngIf="!virtualScroll; else virtualScrollList">
915 <ng-template ngFor let-option let-i="index" [ngForOf]="options">
916 <p-dropdownItem [option]="option" [selected]="selectedOption == option" [label]="getOptionLabel(option)" [disabled]="isOptionDisabled(option)"
917 (onClick)="onItemClick($event)"
918 [template]="itemTemplate"></p-dropdownItem>
919 </ng-template>
920 </ng-container>
921 <ng-template #virtualScrollList>
922 <cdk-virtual-scroll-viewport (scrolledIndexChange)="scrollToSelectedVirtualScrollElement()" #viewport [ngStyle]="{'height': scrollHeight}" [itemSize]="itemSize" *ngIf="virtualScroll && optionsToDisplay && optionsToDisplay.length">
923 <ng-container *cdkVirtualFor="let option of options; let i = index; let c = count; let f = first; let l = last; let e = even; let o = odd">
924 <p-dropdownItem [option]="option" [selected]="selectedOption == option" [label]="getOptionLabel(option)" [disabled]="isOptionDisabled(option)"
925 (onClick)="onItemClick($event)"
926 [template]="itemTemplate"></p-dropdownItem>
927 </ng-container>
928 </cdk-virtual-scroll-viewport>
929 </ng-template>
930 </ng-template>
931 <li *ngIf="filterValue && isEmpty()" class="p-dropdown-empty-message">
932 <ng-container *ngIf="!emptyFilterTemplate && !emptyTemplate; else emptyFilter">
933 {{emptyFilterMessageLabel}}
934 </ng-container>
935 <ng-container #emptyFilter *ngTemplateOutlet="emptyFilterTemplate || emptyTemplate"></ng-container>
936 </li>
937 <li *ngIf="!filterValue && isEmpty()" class="p-dropdown-empty-message">
938 <ng-container *ngIf="!emptyTemplate; else empty">
939 {{emptyMessageLabel}}
940 </ng-container>
941 <ng-container #empty *ngTemplateOutlet="emptyTemplate"></ng-container>
942 </li>
943 </ul>
944 </div>
945 <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
946 </div>
947 </div>
948 `, isInline: true, styles: [".p-dropdown{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;-ms-user-select:none;user-select:none}.p-dropdown-clear-icon{position:absolute;top:50%;margin-top:-.5rem}.p-dropdown-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.p-dropdown-label{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;width:1%;text-overflow:ellipsis;cursor:pointer}.p-dropdown-label-empty{overflow:hidden;visibility:hidden}input.p-dropdown-label{cursor:default}.p-dropdown .p-dropdown-panel{min-width:100%}.p-dropdown-panel{position:absolute;top:0;left:0}.p-dropdown-items-wrapper{overflow:auto}.p-dropdown-item{cursor:pointer;font-weight:normal;white-space:nowrap;position:relative;overflow:hidden}.p-dropdown-items{margin:0;padding:0;list-style-type:none}.p-dropdown-filter{width:100%}.p-dropdown-filter-container{position:relative}.p-dropdown-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.p-fluid .p-dropdown{display:flex}.p-fluid .p-dropdown .p-dropdown-label{width:1%}\n"], components: [{ type: DropdownItem, selector: "p-dropdownItem", inputs: ["option", "selected", "label", "disabled", "visible", "itemSize", "template"], outputs: ["onClick"] }, { type: i4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i4.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], animations: [
949 trigger('overlayAnimation', [
950 transition(':enter', [
951 style({ opacity: 0, transform: 'scaleY(0.8)' }),
952 animate('{{showTransitionParams}}')
953 ]),
954 transition(':leave', [
955 animate('{{hideTransitionParams}}', style({ opacity: 0 }))
956 ])
957 ])
958 ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
959i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Dropdown, decorators: [{
960 type: Component,
961 args: [{ selector: 'p-dropdown', template: `
962 <div #container [ngClass]="{'p-dropdown p-component':true,
963 'p-disabled':disabled, 'p-dropdown-open':overlayVisible, 'p-focus':focused, 'p-dropdown-clearable': showClear && !disabled}"
964 (click)="onMouseclick($event)" [ngStyle]="style" [class]="styleClass">
965 <div class="p-hidden-accessible">
966 <input #in [attr.id]="inputId" type="text" readonly (focus)="onInputFocus($event)" aria-haspopup="listbox" [attr.placeholder]="placeholder"
967 aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible" [attr.aria-labelledby]="ariaLabelledBy" (blur)="onInputBlur($event)" (keydown)="onKeydown($event, true)"
968 [disabled]="disabled" [attr.tabindex]="tabindex" [attr.autofocus]="autofocus" [attr.aria-activedescendant]="overlayVisible ? 'p-highlighted-option' : labelId" role="listbox">
969 </div>
970 <span [attr.id]="labelId" [ngClass]="{'p-dropdown-label p-inputtext':true,'p-dropdown-label-empty':(label == null || label.length === 0)}" *ngIf="!editable && (label != null)" [pTooltip]="tooltip" [tooltipPosition]="tooltipPosition" [positionStyle]="tooltipPositionStyle" [tooltipStyleClass]="tooltipStyleClass">
971 <ng-container *ngIf="!selectedItemTemplate">{{label||'empty'}}</ng-container>
972 <ng-container *ngTemplateOutlet="selectedItemTemplate; context: {$implicit: selectedOption}"></ng-container>
973 </span>
974 <span [ngClass]="{'p-dropdown-label p-inputtext p-placeholder':true,'p-dropdown-label-empty': (placeholder == null || placeholder.length === 0)}" *ngIf="!editable && (label == null)">{{placeholder||'empty'}}</span>
975 <input #editableInput type="text" [attr.maxlength]="maxlength" class="p-dropdown-label p-inputtext" *ngIf="editable" [disabled]="disabled" [attr.placeholder]="placeholder"
976 aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible" (click)="onEditableInputClick()" (input)="onEditableInputChange($event)" (focus)="onEditableInputFocus($event)" (blur)="onInputBlur($event)">
977 <i class="p-dropdown-clear-icon pi pi-times" (click)="clear($event)" *ngIf="value != null && showClear && !disabled"></i>
978 <div class="p-dropdown-trigger" role="button" aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible">
979 <span class="p-dropdown-trigger-icon" [ngClass]="dropdownIcon"></span>
980 </div>
981 <div *ngIf="overlayVisible" [ngClass]="'p-dropdown-panel p-component'" (click)="onOverlayClick($event)" [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onOverlayAnimationStart($event)" (@overlayAnimation.start)="onOverlayAnimationEnd($event)"onOverlayAnimationEnd [ngStyle]="panelStyle" [class]="panelStyleClass">
982 <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
983 <div class="p-dropdown-header" *ngIf="filter" >
984 <div class="p-dropdown-filter-container" (click)="$event.stopPropagation()">
985 <input #filter type="text" autocomplete="off" [value]="filterValue||''" class="p-dropdown-filter p-inputtext p-component" [attr.placeholder]="filterPlaceholder"
986 (keydown.enter)="$event.preventDefault()" (keydown)="onKeydown($event, false)" (input)="onFilterInputChange($event)" [attr.aria-label]="ariaFilterLabel" [attr.aria-activedescendant]="overlayVisible ? 'p-highlighted-option' : labelId">
987 <span class="p-dropdown-filter-icon pi pi-search"></span>
988 </div>
989 </div>
990 <div class="p-dropdown-items-wrapper" [style.max-height]="virtualScroll ? 'auto' : (scrollHeight||'auto')">
991 <ul [attr.id]="listId" class="p-dropdown-items" [ngClass]="{'p-dropdown-virtualscroll': virtualScroll}" role="listbox">
992 <ng-container *ngIf="group">
993 <ng-template ngFor let-optgroup [ngForOf]="optionsToDisplay">
994 <li class="p-dropdown-item-group">
995 <span *ngIf="!groupTemplate">{{getOptionGroupLabel(optgroup)||'empty'}}</span>
996 <ng-container *ngTemplateOutlet="groupTemplate; context: {$implicit: optgroup}"></ng-container>
997 </li>
998 <ng-container *ngTemplateOutlet="itemslist; context: {$implicit: getOptionGroupChildren(optgroup), selectedOption: selectedOption}"></ng-container>
999 </ng-template>
1000 </ng-container>
1001 <ng-container *ngIf="!group">
1002 <ng-container *ngTemplateOutlet="itemslist; context: {$implicit: optionsToDisplay, selectedOption: selectedOption}"></ng-container>
1003 </ng-container>
1004 <ng-template #itemslist let-options let-selectedOption="selectedOption">
1005 <ng-container *ngIf="!virtualScroll; else virtualScrollList">
1006 <ng-template ngFor let-option let-i="index" [ngForOf]="options">
1007 <p-dropdownItem [option]="option" [selected]="selectedOption == option" [label]="getOptionLabel(option)" [disabled]="isOptionDisabled(option)"
1008 (onClick)="onItemClick($event)"
1009 [template]="itemTemplate"></p-dropdownItem>
1010 </ng-template>
1011 </ng-container>
1012 <ng-template #virtualScrollList>
1013 <cdk-virtual-scroll-viewport (scrolledIndexChange)="scrollToSelectedVirtualScrollElement()" #viewport [ngStyle]="{'height': scrollHeight}" [itemSize]="itemSize" *ngIf="virtualScroll && optionsToDisplay && optionsToDisplay.length">
1014 <ng-container *cdkVirtualFor="let option of options; let i = index; let c = count; let f = first; let l = last; let e = even; let o = odd">
1015 <p-dropdownItem [option]="option" [selected]="selectedOption == option" [label]="getOptionLabel(option)" [disabled]="isOptionDisabled(option)"
1016 (onClick)="onItemClick($event)"
1017 [template]="itemTemplate"></p-dropdownItem>
1018 </ng-container>
1019 </cdk-virtual-scroll-viewport>
1020 </ng-template>
1021 </ng-template>
1022 <li *ngIf="filterValue && isEmpty()" class="p-dropdown-empty-message">
1023 <ng-container *ngIf="!emptyFilterTemplate && !emptyTemplate; else emptyFilter">
1024 {{emptyFilterMessageLabel}}
1025 </ng-container>
1026 <ng-container #emptyFilter *ngTemplateOutlet="emptyFilterTemplate || emptyTemplate"></ng-container>
1027 </li>
1028 <li *ngIf="!filterValue && isEmpty()" class="p-dropdown-empty-message">
1029 <ng-container *ngIf="!emptyTemplate; else empty">
1030 {{emptyMessageLabel}}
1031 </ng-container>
1032 <ng-container #empty *ngTemplateOutlet="emptyTemplate"></ng-container>
1033 </li>
1034 </ul>
1035 </div>
1036 <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
1037 </div>
1038 </div>
1039 `, animations: [
1040 trigger('overlayAnimation', [
1041 transition(':enter', [
1042 style({ opacity: 0, transform: 'scaleY(0.8)' }),
1043 animate('{{showTransitionParams}}')
1044 ]),
1045 transition(':leave', [
1046 animate('{{hideTransitionParams}}', style({ opacity: 0 }))
1047 ])
1048 ])
1049 ], host: {
1050 'class': 'p-element p-inputwrapper',
1051 '[class.p-inputwrapper-filled]': 'filled',
1052 '[class.p-inputwrapper-focus]': 'focused || overlayVisible'
1053 }, providers: [DROPDOWN_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".p-dropdown{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;-ms-user-select:none;user-select:none}.p-dropdown-clear-icon{position:absolute;top:50%;margin-top:-.5rem}.p-dropdown-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.p-dropdown-label{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;width:1%;text-overflow:ellipsis;cursor:pointer}.p-dropdown-label-empty{overflow:hidden;visibility:hidden}input.p-dropdown-label{cursor:default}.p-dropdown .p-dropdown-panel{min-width:100%}.p-dropdown-panel{position:absolute;top:0;left:0}.p-dropdown-items-wrapper{overflow:auto}.p-dropdown-item{cursor:pointer;font-weight:normal;white-space:nowrap;position:relative;overflow:hidden}.p-dropdown-items{margin:0;padding:0;list-style-type:none}.p-dropdown-filter{width:100%}.p-dropdown-filter-container{position:relative}.p-dropdown-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.p-fluid .p-dropdown{display:flex}.p-fluid .p-dropdown .p-dropdown-label{width:1%}\n"] }]
1054 }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i3.FilterService }, { type: i3.PrimeNGConfig }, { type: i3.OverlayService }]; }, propDecorators: { scrollHeight: [{
1055 type: Input
1056 }], filter: [{
1057 type: Input
1058 }], name: [{
1059 type: Input
1060 }], style: [{
1061 type: Input
1062 }], panelStyle: [{
1063 type: Input
1064 }], styleClass: [{
1065 type: Input
1066 }], panelStyleClass: [{
1067 type: Input
1068 }], readonly: [{
1069 type: Input
1070 }], required: [{
1071 type: Input
1072 }], editable: [{
1073 type: Input
1074 }], appendTo: [{
1075 type: Input
1076 }], tabindex: [{
1077 type: Input
1078 }], placeholder: [{
1079 type: Input
1080 }], filterPlaceholder: [{
1081 type: Input
1082 }], filterLocale: [{
1083 type: Input
1084 }], inputId: [{
1085 type: Input
1086 }], selectId: [{
1087 type: Input
1088 }], dataKey: [{
1089 type: Input
1090 }], filterBy: [{
1091 type: Input
1092 }], autofocus: [{
1093 type: Input
1094 }], resetFilterOnHide: [{
1095 type: Input
1096 }], dropdownIcon: [{
1097 type: Input
1098 }], optionLabel: [{
1099 type: Input
1100 }], optionValue: [{
1101 type: Input
1102 }], optionDisabled: [{
1103 type: Input
1104 }], optionGroupLabel: [{
1105 type: Input
1106 }], optionGroupChildren: [{
1107 type: Input
1108 }], autoDisplayFirst: [{
1109 type: Input
1110 }], group: [{
1111 type: Input
1112 }], showClear: [{
1113 type: Input
1114 }], emptyFilterMessage: [{
1115 type: Input
1116 }], emptyMessage: [{
1117 type: Input
1118 }], virtualScroll: [{
1119 type: Input
1120 }], itemSize: [{
1121 type: Input
1122 }], autoZIndex: [{
1123 type: Input
1124 }], baseZIndex: [{
1125 type: Input
1126 }], showTransitionOptions: [{
1127 type: Input
1128 }], hideTransitionOptions: [{
1129 type: Input
1130 }], ariaFilterLabel: [{
1131 type: Input
1132 }], ariaLabelledBy: [{
1133 type: Input
1134 }], filterMatchMode: [{
1135 type: Input
1136 }], maxlength: [{
1137 type: Input
1138 }], tooltip: [{
1139 type: Input
1140 }], tooltipPosition: [{
1141 type: Input
1142 }], tooltipPositionStyle: [{
1143 type: Input
1144 }], tooltipStyleClass: [{
1145 type: Input
1146 }], autofocusFilter: [{
1147 type: Input
1148 }], onChange: [{
1149 type: Output
1150 }], onFilter: [{
1151 type: Output
1152 }], onFocus: [{
1153 type: Output
1154 }], onBlur: [{
1155 type: Output
1156 }], onClick: [{
1157 type: Output
1158 }], onShow: [{
1159 type: Output
1160 }], onHide: [{
1161 type: Output
1162 }], onClear: [{
1163 type: Output
1164 }], containerViewChild: [{
1165 type: ViewChild,
1166 args: ['container']
1167 }], filterViewChild: [{
1168 type: ViewChild,
1169 args: ['filter']
1170 }], accessibleViewChild: [{
1171 type: ViewChild,
1172 args: ['in']
1173 }], viewPort: [{
1174 type: ViewChild,
1175 args: [CdkVirtualScrollViewport]
1176 }], editableInputViewChild: [{
1177 type: ViewChild,
1178 args: ['editableInput']
1179 }], templates: [{
1180 type: ContentChildren,
1181 args: [PrimeTemplate]
1182 }], disabled: [{
1183 type: Input
1184 }], options: [{
1185 type: Input
1186 }], filterValue: [{
1187 type: Input
1188 }] } });
1189class DropdownModule {
1190}
1191DropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1192DropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: DropdownModule, declarations: [Dropdown, DropdownItem], imports: [CommonModule, SharedModule, ScrollingModule, TooltipModule, RippleModule], exports: [Dropdown, SharedModule, ScrollingModule] });
1193DropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: DropdownModule, imports: [[CommonModule, SharedModule, ScrollingModule, TooltipModule, RippleModule], SharedModule, ScrollingModule] });
1194i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: DropdownModule, decorators: [{
1195 type: NgModule,
1196 args: [{
1197 imports: [CommonModule, SharedModule, ScrollingModule, TooltipModule, RippleModule],
1198 exports: [Dropdown, SharedModule, ScrollingModule],
1199 declarations: [Dropdown, DropdownItem]
1200 }]
1201 }] });
1202
1203/**
1204 * Generated bundle index. Do not edit.
1205 */
1206
1207export { DROPDOWN_VALUE_ACCESSOR, Dropdown, DropdownItem, DropdownModule };
Note: See TracBrowser for help on using the repository browser.