import { forwardRef, EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ElementRef, Renderer2, ChangeDetectorRef, ViewChild, ContentChild, ContentChildren, NgModule } from '@angular/core'; import { trigger, transition, style, animate } from '@angular/animations'; import { CommonModule } from '@angular/common'; import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom'; import { ObjectUtils, FilterUtils } from 'primeng/utils'; import { Footer, Header, PrimeTemplate, SharedModule } from 'primeng/api'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { ScrollingModule } from '@angular/cdk/scrolling'; import { TooltipModule } from 'primeng/tooltip'; import { RippleModule } from 'primeng/ripple'; const MULTISELECT_VALUE_ACCESSOR = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MultiSelect), multi: true }; class MultiSelectItem { constructor() { this.onClick = new EventEmitter(); this.onKeydown = new EventEmitter(); } onOptionClick(event) { this.onClick.emit({ originalEvent: event, option: this.option }); } onOptionKeydown(event) { this.onKeydown.emit({ originalEvent: event, option: this.option }); } } MultiSelectItem.decorators = [ { type: Component, args: [{ selector: 'p-multiSelectItem', template: `
  • {{option.label}}
  • `, encapsulation: ViewEncapsulation.None },] } ]; MultiSelectItem.propDecorators = { option: [{ type: Input }], selected: [{ type: Input }], disabled: [{ type: Input }], itemSize: [{ type: Input }], template: [{ type: Input }], maxSelectionLimitReached: [{ type: Input }], onClick: [{ type: Output }], onKeydown: [{ type: Output }] }; class MultiSelect { constructor(el, renderer, cd) { this.el = el; this.renderer = renderer; this.cd = cd; this.scrollHeight = '200px'; this.filter = true; this.displaySelectedLabel = true; this.maxSelectedLabels = 3; this.selectedItemsLabel = '{0} items selected'; this.showToggleAll = true; this.emptyFilterMessage = 'No results found'; this.resetFilterOnHide = false; this.dropdownIcon = 'pi pi-chevron-down'; this.showHeader = true; this.autoZIndex = true; this.baseZIndex = 0; this.filterBy = 'label'; this.showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)'; this.hideTransitionOptions = '.1s linear'; this.filterMatchMode = "contains"; this.tooltip = ''; this.tooltipPosition = 'right'; this.tooltipPositionStyle = 'absolute'; this.autofocusFilter = true; this.onChange = new EventEmitter(); this.onFocus = new EventEmitter(); this.onBlur = new EventEmitter(); this.onClick = new EventEmitter(); this.onPanelShow = new EventEmitter(); this.onPanelHide = new EventEmitter(); this.onModelChange = () => { }; this.onModelTouched = () => { }; this.disabledSelectedOptions = []; } set defaultLabel(val) { this._defaultLabel = val; this.updateLabel(); } get defaultLabel() { return this._defaultLabel; } set placeholder(val) { this._placeholder = val; this.updateLabel(); } get placeholder() { return this._placeholder; } get options() { return this._options; } set options(val) { let opts = this.optionLabel ? ObjectUtils.generateSelectItems(val, this.optionLabel) : val; this.visibleOptions = opts; this._options = opts; this.updateLabel(); if (this.filterValue && this.filterValue.length) { this.activateFilter(); } } ngOnInit() { this.updateLabel(); } ngAfterContentInit() { this.templates.forEach((item) => { switch (item.getType()) { case 'item': this.itemTemplate = item.template; break; case 'selectedItems': this.selectedItemsTemplate = item.template; break; case 'header': this.headerTemplate = item.template; break; case 'footer': this.footerTemplate = item.template; break; default: this.itemTemplate = item.template; break; } }); } ngAfterViewInit() { if (this.overlayVisible) { this.show(); } } ngAfterViewChecked() { if (this.filtered) { this.alignOverlay(); this.filtered = false; } } writeValue(value) { this.value = value; this.updateLabel(); this.updateFilledState(); this.setDisabledSelectedOptions(); this.checkSelectionLimit(); this.cd.markForCheck(); } checkSelectionLimit() { if (this.selectionLimit && (this.value && this.value.length === this.selectionLimit)) { this.maxSelectionLimitReached = true; } else { this.maxSelectionLimitReached = false; } } updateFilledState() { this.filled = (this.value && this.value.length > 0); } registerOnChange(fn) { this.onModelChange = fn; } registerOnTouched(fn) { this.onModelTouched = fn; } setDisabledState(val) { this.disabled = val; this.cd.markForCheck(); } onOptionClick(event) { let option = event.option; if (option.disabled) { return; } const optionValue = option.value; let selectionIndex = this.findSelectionIndex(optionValue); if (selectionIndex != -1) { this.value = this.value.filter((val, i) => i != selectionIndex); if (this.selectionLimit) { this.maxSelectionLimitReached = false; } } else { if (!this.selectionLimit || (!this.value || this.value.length < this.selectionLimit)) { this.value = [...this.value || [], optionValue]; } this.checkSelectionLimit(); } this.onModelChange(this.value); this.onChange.emit({ originalEvent: event.originalEvent, value: this.value, itemValue: optionValue }); this.updateLabel(); this.updateFilledState(); } isSelected(value) { return this.findSelectionIndex(value) != -1; } findSelectionIndex(val) { let index = -1; if (this.value) { for (let i = 0; i < this.value.length; i++) { if (ObjectUtils.equals(this.value[i], val, this.dataKey)) { index = i; break; } } } return index; } toggleAll(event) { if (this.isAllChecked()) { if (this.disabledSelectedOptions && this.disabledSelectedOptions.length > 0) { let value = []; value = [...this.disabledSelectedOptions]; this.value = value; } else { this.value = []; } } else { let opts = this.getVisibleOptions(); if (opts) { let value = []; if (this.disabledSelectedOptions && this.disabledSelectedOptions.length > 0) { value = [...this.disabledSelectedOptions]; } for (let i = 0; i < opts.length; i++) { let option = opts[i]; if (!option.disabled) { value.push(opts[i].value); } } this.value = value; } } this.onModelChange(this.value); this.onChange.emit({ originalEvent: event, value: this.value }); this.updateFilledState(); this.updateLabel(); } isAllChecked() { if (this.filterValue && this.filterValue.trim().length) { return this.value && this.visibleOptions && this.visibleOptions.length && this.isAllVisibleOptionsChecked(); } else { let optionCount = this.getEnabledOptionCount(); let disabledSelectedOptionCount = this.disabledSelectedOptions.length; return this.value && this.options && (this.value.length > 0 && this.value.length == optionCount + disabledSelectedOptionCount); } } isAllVisibleOptionsChecked() { if (!this.visibleOptions || this.visibleOptions.length === 0) { return false; } else { for (let option of this.visibleOptions) { if (!this.isSelected(option.value)) { return false; } } return true; } } getEnabledOptionCount() { if (this.options) { let count = 0; for (let opt of this.options) { if (!opt.disabled) { count++; } } return count; } else { return 0; } } setDisabledSelectedOptions() { if (this.options) { this.disabledSelectedOptions = []; if (this.value) { for (let opt of this.options) { if (opt.disabled && this.isSelected(opt.value)) { this.disabledSelectedOptions.push(opt.value); } } } } } show() { if (!this.overlayVisible) { this.overlayVisible = true; } } onOverlayAnimationStart(event) { switch (event.toState) { case 'visible': this.overlay = event.element; this.appendOverlay(); if (this.autoZIndex) { this.overlay.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex)); } this.alignOverlay(); this.bindDocumentClickListener(); this.bindDocumentResizeListener(); this.bindScrollListener(); if (this.filterInputChild && this.filterInputChild.nativeElement) { this.preventModelTouched = true; if (this.autofocusFilter) { this.filterInputChild.nativeElement.focus(); } } this.onPanelShow.emit(); break; case 'void': this.onOverlayHide(); break; } } appendOverlay() { if (this.appendTo) { if (this.appendTo === 'body') document.body.appendChild(this.overlay); else DomHandler.appendChild(this.overlay, this.appendTo); if (!this.overlay.style.minWidth) { this.overlay.style.minWidth = DomHandler.getWidth(this.containerViewChild.nativeElement) + 'px'; } } } restoreOverlayAppend() { if (this.overlay && this.appendTo) { this.el.nativeElement.appendChild(this.overlay); } } alignOverlay() { if (this.overlay) { if (this.appendTo) DomHandler.absolutePosition(this.overlay, this.containerViewChild.nativeElement); else DomHandler.relativePosition(this.overlay, this.containerViewChild.nativeElement); } } hide() { this.overlayVisible = false; this.unbindDocumentClickListener(); if (this.resetFilterOnHide) { this.filterInputChild.nativeElement.value = ''; this.onFilter(); } this.onPanelHide.emit(); this.cd.markForCheck(); } close(event) { this.hide(); event.preventDefault(); event.stopPropagation(); } onMouseclick(event, input) { if (this.disabled || this.readonly || event.target.isSameNode(this.accessibleViewChild.nativeElement)) { return; } this.onClick.emit(event); if (!this.isOverlayClick(event)) { if (this.overlayVisible) { this.hide(); } else { input.focus(); this.show(); } } } isOverlayClick(event) { return (this.overlay && this.overlay.contains(event.target)); } isOutsideClicked(event) { return !(this.el.nativeElement.isSameNode(event.target) || this.el.nativeElement.contains(event.target) || this.isOverlayClick(event)); } onInputFocus(event) { this.focus = true; this.onFocus.emit({ originalEvent: event }); } onInputBlur(event) { this.focus = false; this.onBlur.emit({ originalEvent: event }); if (!this.preventModelTouched) { this.onModelTouched(); } this.preventModelTouched = false; } onOptionKeydown(event) { if (this.readonly) { return; } switch (event.originalEvent.which) { //down case 40: var nextItem = this.findNextItem(event.originalEvent.target.parentElement); if (nextItem) { nextItem.focus(); } event.originalEvent.preventDefault(); break; //up case 38: var prevItem = this.findPrevItem(event.originalEvent.target.parentElement); if (prevItem) { prevItem.focus(); } event.originalEvent.preventDefault(); break; //enter case 13: this.onOptionClick(event); event.originalEvent.preventDefault(); break; } } findNextItem(item) { let nextItem = item.nextElementSibling; if (nextItem) return DomHandler.hasClass(nextItem.children[0], 'p-disabled') || DomHandler.isHidden(nextItem.children[0]) ? this.findNextItem(nextItem) : nextItem.children[0]; else return null; } findPrevItem(item) { let prevItem = item.previousElementSibling; if (prevItem) return DomHandler.hasClass(prevItem.children[0], 'p-disabled') || DomHandler.isHidden(prevItem.children[0]) ? this.findPrevItem(prevItem) : prevItem.children[0]; else return null; } onKeydown(event) { switch (event.which) { //down case 40: if (!this.overlayVisible && event.altKey) { this.show(); event.preventDefault(); } break; //space case 32: if (!this.overlayVisible) { this.show(); event.preventDefault(); } break; //escape case 27: this.hide(); break; } } updateLabel() { if (this.value && this.options && this.value.length && this.displaySelectedLabel) { let label = ''; for (let i = 0; i < this.value.length; i++) { let itemLabel = this.findLabelByValue(this.value[i]); if (itemLabel) { if (label.length > 0) { label = label + ', '; } label = label + itemLabel; } } if (this.value.length <= this.maxSelectedLabels) { this.valuesAsString = label; } else { let pattern = /{(.*?)}/; if (pattern.test(this.selectedItemsLabel)) { this.valuesAsString = this.selectedItemsLabel.replace(this.selectedItemsLabel.match(pattern)[0], this.value.length + ''); } else { this.valuesAsString = this.selectedItemsLabel; } } } else { this.valuesAsString = this.placeholder || this.defaultLabel; } } findLabelByValue(val) { let label = null; for (let i = 0; i < this.options.length; i++) { let option = this.options[i]; if (val == null && option.value == null || ObjectUtils.equals(val, option.value, this.dataKey)) { label = option.label; break; } } return label; } onFilter() { let inputValue = this.filterInputChild.nativeElement.value; if (inputValue && inputValue.length) { this.filterValue = inputValue; this.activateFilter(); } else { this.filterValue = null; this.visibleOptions = this.options; this.filtered = false; } } activateFilter() { if (this.options && this.options.length) { let searchFields = this.filterBy.split(','); this.visibleOptions = FilterUtils.filter(this.options, searchFields, this.filterValue, this.filterMatchMode, this.filterLocale); this.filtered = true; } } getVisibleOptions() { return this.visibleOptions || this.options; } onHeaderCheckboxFocus() { this.headerCheckboxFocus = true; } onHeaderCheckboxBlur() { this.headerCheckboxFocus = false; } bindDocumentClickListener() { if (!this.documentClickListener) { const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document'; this.documentClickListener = this.renderer.listen(documentTarget, 'click', (event) => { if (this.isOutsideClicked(event)) { this.hide(); } }); } } unbindDocumentClickListener() { if (this.documentClickListener) { this.documentClickListener(); this.documentClickListener = null; } } bindDocumentResizeListener() { this.documentResizeListener = this.onWindowResize.bind(this); window.addEventListener('resize', this.documentResizeListener); } unbindDocumentResizeListener() { if (this.documentResizeListener) { window.removeEventListener('resize', this.documentResizeListener); this.documentResizeListener = null; } } onWindowResize() { if (!DomHandler.isAndroid()) { this.hide(); } } bindScrollListener() { if (!this.scrollHandler) { this.scrollHandler = new ConnectedOverlayScrollHandler(this.containerViewChild.nativeElement, () => { if (this.overlayVisible) { this.hide(); } }); } this.scrollHandler.bindScrollListener(); } unbindScrollListener() { if (this.scrollHandler) { this.scrollHandler.unbindScrollListener(); } } onOverlayHide() { this.unbindDocumentClickListener(); this.unbindDocumentResizeListener(); this.unbindScrollListener(); this.overlay = null; this.onModelTouched(); } ngOnDestroy() { if (this.scrollHandler) { this.scrollHandler.destroy(); this.scrollHandler = null; } this.restoreOverlayAppend(); this.onOverlayHide(); } } MultiSelect.decorators = [ { type: Component, args: [{ selector: 'p-multiSelect', template: `
    {{valuesAsString || 'empty'}}
    • {{emptyFilterMessage}}
    `, animations: [ trigger('overlayAnimation', [ transition(':enter', [ style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}') ]), transition(':leave', [ animate('{{hideTransitionParams}}', style({ opacity: 0 })) ]) ]) ], host: { '[class.p-inputwrapper-filled]': 'filled', '[class.p-inputwrapper-focus]': 'focus' }, providers: [MULTISELECT_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".p-multiselect{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;position:relative;user-select:none}.p-multiselect-trigger{-ms-flex-align:center;-ms-flex-negative:0;-ms-flex-pack:center;align-items:center;display:-ms-flexbox;display:flex;flex-shrink:0;justify-content:center}.p-multiselect-label-container{-ms-flex:1 1 auto;cursor:pointer;flex:1 1 auto;overflow:hidden}.p-multiselect-label{cursor:pointer;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.p-multiselect-label-empty{overflow:hidden;visibility:hidden}.p-multiselect .p-multiselect-panel{min-width:100%}.p-multiselect-panel{position:absolute}.p-multiselect-items-wrapper{overflow:auto}.p-multiselect-items{list-style-type:none;margin:0;padding:0}.p-multiselect-item{cursor:pointer;font-weight:400;overflow:hidden;position:relative;white-space:nowrap}.p-multiselect-header,.p-multiselect-item{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.p-multiselect-header{-ms-flex-pack:justify;justify-content:space-between}.p-multiselect-filter-container{-ms-flex:1 1 auto;flex:1 1 auto;position:relative}.p-multiselect-filter-icon{margin-top:-.5rem;position:absolute;top:50%}.p-multiselect-filter-container .p-inputtext{width:100%}.p-multiselect-close{-ms-flex-align:center;-ms-flex-negative:0;-ms-flex-pack:center;align-items:center;flex-shrink:0;justify-content:center;overflow:hidden;position:relative}.p-fluid .p-multiselect,.p-multiselect-close{display:-ms-flexbox;display:flex}"] },] } ]; MultiSelect.ctorParameters = () => [ { type: ElementRef }, { type: Renderer2 }, { type: ChangeDetectorRef } ]; MultiSelect.propDecorators = { scrollHeight: [{ type: Input }], defaultLabel: [{ type: Input }], placeholder: [{ type: Input }], style: [{ type: Input }], styleClass: [{ type: Input }], panelStyle: [{ type: Input }], panelStyleClass: [{ type: Input }], inputId: [{ type: Input }], disabled: [{ type: Input }], readonly: [{ type: Input }], filter: [{ type: Input }], filterPlaceHolder: [{ type: Input }], filterLocale: [{ type: Input }], overlayVisible: [{ type: Input }], tabindex: [{ type: Input }], appendTo: [{ type: Input }], dataKey: [{ type: Input }], name: [{ type: Input }], ariaLabelledBy: [{ type: Input }], displaySelectedLabel: [{ type: Input }], maxSelectedLabels: [{ type: Input }], selectionLimit: [{ type: Input }], selectedItemsLabel: [{ type: Input }], showToggleAll: [{ type: Input }], emptyFilterMessage: [{ type: Input }], resetFilterOnHide: [{ type: Input }], dropdownIcon: [{ type: Input }], optionLabel: [{ type: Input }], showHeader: [{ type: Input }], autoZIndex: [{ type: Input }], baseZIndex: [{ type: Input }], filterBy: [{ type: Input }], virtualScroll: [{ type: Input }], itemSize: [{ type: Input }], showTransitionOptions: [{ type: Input }], hideTransitionOptions: [{ type: Input }], ariaFilterLabel: [{ type: Input }], filterMatchMode: [{ type: Input }], tooltip: [{ type: Input }], tooltipPosition: [{ type: Input }], tooltipPositionStyle: [{ type: Input }], tooltipStyleClass: [{ type: Input }], autofocusFilter: [{ type: Input }], containerViewChild: [{ type: ViewChild, args: ['container',] }], filterInputChild: [{ type: ViewChild, args: ['filterInput',] }], accessibleViewChild: [{ type: ViewChild, args: ['in',] }], footerFacet: [{ type: ContentChild, args: [Footer,] }], headerFacet: [{ type: ContentChild, args: [Header,] }], templates: [{ type: ContentChildren, args: [PrimeTemplate,] }], onChange: [{ type: Output }], onFocus: [{ type: Output }], onBlur: [{ type: Output }], onClick: [{ type: Output }], onPanelShow: [{ type: Output }], onPanelHide: [{ type: Output }], options: [{ type: Input }] }; class MultiSelectModule { } MultiSelectModule.decorators = [ { type: NgModule, args: [{ imports: [CommonModule, SharedModule, ScrollingModule, TooltipModule, RippleModule], exports: [MultiSelect, SharedModule, ScrollingModule], declarations: [MultiSelect, MultiSelectItem] },] } ]; /** * Generated bundle index. Do not edit. */ export { MULTISELECT_VALUE_ACCESSOR, MultiSelect, MultiSelectItem, MultiSelectModule }; //# sourceMappingURL=primeng-multiselect.js.map