source: trip-planner-front/node_modules/primeng/fesm2020/primeng-multiselect.mjs@ 8d391a1

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

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