primeng
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primeng) [
{"version":3,"file":"primeng-dropdown.mjs","sources":["../../src/app/components/dropdown/dropdown.ts","../../src/app/components/dropdown/primeng-dropdown.ts"],"sourcesContent":["import {NgModule,Component,ElementRef,OnInit,AfterViewInit,AfterContentInit,AfterViewChecked,OnDestroy,Input,Output,Renderer2,EventEmitter,ContentChildren,\n QueryList,ViewChild,TemplateRef,forwardRef,ChangeDetectorRef,NgZone,ViewRef,ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core';\nimport {trigger,style,transition,animate,AnimationEvent} from '@angular/animations';\nimport {CommonModule} from '@angular/common';\nimport {OverlayService, PrimeNGConfig, SelectItem, TranslationKeys} from 'primeng/api';\nimport {SharedModule,PrimeTemplate, FilterService} from 'primeng/api';\nimport {DomHandler, ConnectedOverlayScrollHandler} from 'primeng/dom';\nimport {ObjectUtils,UniqueComponentId,ZIndexUtils} from 'primeng/utils';\nimport {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';\nimport {TooltipModule} from 'primeng/tooltip';\nimport {Scroller, ScrollerModule, ScrollerOptions} from 'primeng/scroller';\nimport {RippleModule} from 'primeng/ripple';\nimport {AutoFocusModule} from 'primeng/autofocus';\n\nexport const DROPDOWN_VALUE_ACCESSOR: any = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => Dropdown),\n multi: true\n};\n\nexport interface DropdownFilterOptions {\n filter?: (value?: any) => void;\n reset?: () => void;\n}\n\n@Component({\n selector: 'p-dropdownItem',\n template: `\n <li (click)=\"onOptionClick($event)\" role=\"option\" pRipple\n [attr.aria-label]=\"label\" [attr.aria-selected]=\"selected\"\n [ngStyle]=\"{'height': itemSize + 'px'}\" [id]=\"selected ? 'p-highlighted-option':''\"\n [ngClass]=\"{'p-dropdown-item':true, 'p-highlight': selected, 'p-disabled': disabled}\">\n <span *ngIf=\"!template\">{{label||'empty'}}</span>\n <ng-container *ngTemplateOutlet=\"template; context: {$implicit: option}\"></ng-container>\n </li>\n `,\n host: {\n 'class': 'p-element'\n }\n})\nexport class DropdownItem {\n\n @Input() option: SelectItem;\n\n @Input() selected: boolean;\n\n @Input() label: string;\n\n @Input() disabled: boolean;\n\n @Input() visible: boolean;\n\n @Input() itemSize: number;\n\n @Input() template: TemplateRef<any>;\n\n @Output() onClick: EventEmitter<any> = new EventEmitter();\n\n onOptionClick(event: Event) {\n this.onClick.emit({\n originalEvent: event,\n option: this.option\n });\n }\n}\n\n@Component({\n selector: 'p-dropdown',\n template: `\n <div #container [ngClass]=\"{'p-dropdown p-component':true,\n 'p-disabled':disabled, 'p-dropdown-open':overlayVisible, 'p-focus':focused, 'p-dropdown-clearable': showClear && !disabled}\"\n (click)=\"onMouseclick($event)\" [ngStyle]=\"style\" [class]=\"styleClass\">\n <div class=\"p-hidden-accessible\">\n <input #in [attr.id]=\"inputId\" type=\"text\" readonly (focus)=\"onInputFocus($event)\" aria-haspopup=\"listbox\" [attr.placeholder]=\"placeholder\"\n aria-haspopup=\"listbox\" [attr.aria-label]=\"ariaLabel\" [attr.aria-expanded]=\"false\" [attr.aria-labelledby]=\"ariaLabelledBy\" (blur)=\"onInputBlur($event)\" (keydown)=\"onKeydown($event, true)\"\n [disabled]=\"disabled\" [attr.tabindex]=\"tabindex\" [pAutoFocus]=\"autofocus\" [attr.aria-activedescendant]=\"overlayVisible ? labelId : null\" role=\"combobox\">\n </div>\n <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\">\n <ng-container *ngIf=\"!selectedItemTemplate\">{{label||'empty'}}</ng-container>\n <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: {$implicit: selectedOption}\"></ng-container>\n </span>\n <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>\n <input #editableInput type=\"text\" [attr.maxlength]=\"maxlength\" class=\"p-dropdown-label p-inputtext\" *ngIf=\"editable\" [disabled]=\"disabled\" [attr.placeholder]=\"placeholder\"\n aria-haspopup=\"listbox\" [attr.aria-expanded]=\"overlayVisible\" (click)=\"onEditableInputClick()\" (input)=\"onEditableInputChange($event)\" (focus)=\"onEditableInputFocus($event)\" (blur)=\"onInputBlur($event)\">\n <i class=\"p-dropdown-clear-icon pi pi-times\" (click)=\"clear($event)\" *ngIf=\"isVisibleClearIcon\"></i>\n <div class=\"p-dropdown-trigger\" role=\"button\" aria-label=\"dropdown trigger\" aria-haspopup=\"listbox\" [attr.aria-expanded]=\"overlayVisible\">\n <span class=\"p-dropdown-trigger-icon\" [ngClass]=\"dropdownIcon\"></span>\n </div>\n <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.done)=\"onOverlayAnimationEnd($event)\" [ngStyle]=\"panelStyle\" [class]=\"panelStyleClass\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n <div class=\"p-dropdown-header\" *ngIf=\"filter\" (click)=\"$event.stopPropagation()\">\n <ng-container *ngIf=\"filterTemplate; else builtInFilterElement\">\n <ng-container *ngTemplateOutlet=\"filterTemplate; context: {options: filterOptions}\"></ng-container>\n </ng-container>\n <ng-template #builtInFilterElement>\n <div class=\"p-dropdown-filter-container\">\n <input #filter type=\"text\" autocomplete=\"off\" [value]=\"filterValue||''\" class=\"p-dropdown-filter p-inputtext p-component\" [attr.placeholder]=\"filterPlaceholder\"\n (keydown.enter)=\"$event.preventDefault()\" (keydown)=\"onKeydown($event, false)\" (input)=\"onFilterInputChange($event)\" [attr.aria-label]=\"ariaFilterLabel\" [attr.aria-activedescendant]=\"overlayVisible ? 'p-highlighted-option' : labelId\">\n <span class=\"p-dropdown-filter-icon pi pi-search\"></span>\n </div>\n </ng-template>\n </div>\n <div class=\"p-dropdown-items-wrapper\" [style.max-height]=\"virtualScroll ? 'auto' : (scrollHeight||'auto')\">\n <p-scroller *ngIf=\"virtualScroll\" #scroller [items]=\"optionsToDisplay\" [style]=\"{'height': scrollHeight}\" [itemSize]=\"virtualScrollItemSize||_itemSize\" [autoSize]=\"true\"\n [lazy]=\"lazy\" (onLazyLoad)=\"onLazyLoad.emit($event)\" [options]=\"virtualScrollOptions\">\n <ng-template pTemplate=\"content\" let-items let-scrollerOptions=\"options\">\n <ng-container *ngTemplateOutlet=\"buildInItems; context: {$implicit: items, options: scrollerOptions}\"></ng-container>\n </ng-template>\n <ng-container *ngIf=\"loaderTemplate\">\n <ng-template pTemplate=\"loader\" let-scrollerOptions=\"options\">\n <ng-container *ngTemplateOutlet=\"loaderTemplate; context: {options: scrollerOptions}\"></ng-container>\n </ng-template>\n </ng-container>\n </p-scroller>\n <ng-container *ngIf=\"!virtualScroll\">\n <ng-container *ngTemplateOutlet=\"buildInItems; context: {$implicit: optionsToDisplay, options: {}}\"></ng-container>\n </ng-container>\n\n <ng-template #buildInItems let-items let-scrollerOptions=\"options\">\n <ul #items [attr.id]=\"listId\" class=\"p-dropdown-items\" [ngClass]=\"scrollerOptions.contentStyleClass\" [style]=\"scrollerOptions.contentStyle\" role=\"listbox\">\n <ng-container *ngIf=\"group\">\n <ng-template ngFor let-optgroup [ngForOf]=\"items\">\n <li class=\"p-dropdown-item-group\" [ngStyle]=\"{'height': scrollerOptions.itemSize + 'px'}\">\n <span *ngIf=\"!groupTemplate\">{{getOptionGroupLabel(optgroup)||'empty'}}</span>\n <ng-container *ngTemplateOutlet=\"groupTemplate; context: {$implicit: optgroup}\"></ng-container>\n </li>\n <ng-container *ngTemplateOutlet=\"itemslist; context: {$implicit: getOptionGroupChildren(optgroup), selectedOption: selectedOption}\"></ng-container>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"!group\">\n <ng-container *ngTemplateOutlet=\"itemslist; context: {$implicit: items, selectedOption: selectedOption}\"></ng-container>\n </ng-container>\n <ng-template #itemslist let-options let-selectedOption=\"selectedOption\">\n <ng-template ngFor let-option let-i=\"index\" [ngForOf]=\"options\">\n <p-dropdownItem [option]=\"option\" [selected]=\"selectedOption == option\" [label]=\"getOptionLabel(option)\" [disabled]=\"isOptionDisabled(option)\"\n (onClick)=\"onItemClick($event)\"\n [template]=\"itemTemplate\"></p-dropdownItem>\n </ng-template>\n </ng-template>\n <li *ngIf=\"filterValue && isEmpty()\" class=\"p-dropdown-empty-message\" [ngStyle]=\"{'height': scrollerOptions.itemSize + 'px'}\">\n <ng-container *ngIf=\"!emptyFilterTemplate && !emptyTemplate; else emptyFilter\">\n {{emptyFilterMessageLabel}}\n </ng-container>\n <ng-container #emptyFilter *ngTemplateOutlet=\"emptyFilterTemplate || emptyTemplate\"></ng-container>\n </li>\n <li *ngIf=\"!filterValue && isEmpty()\" class=\"p-dropdown-empty-message\" [ngStyle]=\"{'height': scrollerOptions.itemSize + 'px'}\">\n <ng-container *ngIf=\"!emptyTemplate; else empty\">\n {{emptyMessageLabel}}\n </ng-container>\n <ng-container #empty *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n </li>\n </ul>\n </ng-template>\n </div>\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n </div>\n `,\n animations: [\n trigger('overlayAnimation', [\n transition(':enter', [\n style({opacity: 0, transform: 'scaleY(0.8)'}),\n animate('{{showTransitionParams}}')\n ]),\n transition(':leave', [\n animate('{{hideTransitionParams}}', style({ opacity: 0 }))\n ])\n ])\n ],\n host: {\n 'class': 'p-element p-inputwrapper',\n '[class.p-inputwrapper-filled]': 'filled',\n '[class.p-inputwrapper-focus]': 'focused || overlayVisible'\n },\n providers: [DROPDOWN_VALUE_ACCESSOR],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n styleUrls: ['./dropdown.css']\n})\nexport class Dropdown implements OnInit,AfterViewInit,AfterContentInit,AfterViewChecked,OnDestroy,ControlValueAccessor {\n\n @Input() scrollHeight: string = '200px';\n\n @Input() filter: boolean;\n\n @Input() name: string;\n\n @Input() style: any;\n\n @Input() panelStyle: any;\n\n @Input() styleClass: string;\n\n @Input() panelStyleClass: string;\n\n @Input() readonly: boolean;\n\n @Input() required: boolean;\n\n @Input() editable: boolean;\n\n @Input() appendTo: any;\n\n @Input() tabindex: number;\n\n @Input() placeholder: string;\n\n @Input() filterPlaceholder: string;\n\n @Input() filterLocale: string;\n\n @Input() inputId: string;\n\n @Input() selectId: string;\n\n @Input() dataKey: string;\n\n @Input() filterBy: string;\n\n @Input() autofocus: boolean;\n\n @Input() resetFilterOnHide: boolean = false;\n\n @Input() dropdownIcon: string = 'pi pi-chevron-down';\n\n @Input() optionLabel: string;\n\n @Input() optionValue: string;\n\n @Input() optionDisabled: string;\n\n @Input() optionGroupLabel: string;\n\n @Input() optionGroupChildren: string = \"items\";\n\n @Input() autoDisplayFirst: boolean = true;\n\n @Input() group: boolean;\n\n @Input() showClear: boolean;\n\n @Input() emptyFilterMessage: string = '';\n\n @Input() emptyMessage: string = '';\n\n @Input() lazy: boolean = false;\n\n @Input() virtualScroll: boolean;\n\n @Input() virtualScrollItemSize: number;\n\n @Input() virtualScrollOptions: ScrollerOptions;\n\n @Input() autoZIndex: boolean = true;\n\n @Input() baseZIndex: number = 0;\n\n @Input() showTransitionOptions: string = '.12s cubic-bezier(0, 0, 0.2, 1)';\n\n @Input() hideTransitionOptions: string = '.1s linear';\n\n @Input() ariaFilterLabel: string;\n\n @Input() ariaLabel: string;\n\n @Input() ariaLabelledBy: string;\n\n @Input() filterMatchMode: string = \"contains\";\n\n @Input() maxlength: number;\n\n @Input() tooltip: string = '';\n\n @Input() tooltipPosition: string = 'right';\n\n @Input() tooltipPositionStyle: string = 'absolute';\n\n @Input() tooltipStyleClass: string;\n\n @Input() autofocusFilter: boolean = true;\n\n @Output() onChange: EventEmitter<any> = new EventEmitter();\n\n @Output() onFilter: EventEmitter<any> = new EventEmitter();\n\n @Output() onFocus: EventEmitter<any> = new EventEmitter();\n\n @Output() onBlur: EventEmitter<any> = new EventEmitter();\n\n @Output() onClick: EventEmitter<any> = new EventEmitter();\n\n @Output() onShow: EventEmitter<any> = new EventEmitter();\n\n @Output() onHide: EventEmitter<any> = new EventEmitter();\n\n @Output() onClear: EventEmitter<any> = new EventEmitter();\n\n @Output() onLazyLoad: EventEmitter<any> = new EventEmitter();\n\n @ViewChild('container') containerViewChild: ElementRef;\n\n @ViewChild('filter') filterViewChild: ElementRef;\n\n @ViewChild('in') accessibleViewChild: ElementRef;\n\n @ViewChild('editableInput') editableInputViewChild: ElementRef;\n\n @ViewChild('items') itemsViewChild: ElementRef;\n\n @ViewChild('scroller') scroller: Scroller;\n\n @ContentChildren(PrimeTemplate) templates: QueryList<any>;\n\n private _disabled: boolean;\n\n @Input() get disabled(): boolean {\n return this._disabled;\n }\n\n set disabled(_disabled: boolean) {\n if (_disabled) {\n this.focused = false;\n\n if (this.overlayVisible)\n this.hide();\n }\n\n this._disabled = _disabled;\n if (!(this.cd as ViewRef).destroyed) {\n this.cd.detectChanges();\n }\n }\n\n /* @deprecated */\n _itemSize: number;\n @Input() get itemSize(): number {\n return this._itemSize;\n }\n set itemSize(val: number) {\n this._itemSize = val;\n console.warn(\"The itemSize property is deprecated, use virtualScrollItemSize property instead.\");\n }\n\n overlay: HTMLDivElement;\n\n itemsWrapper: HTMLDivElement;\n\n itemTemplate: TemplateRef<any>;\n\n groupTemplate: TemplateRef<any>;\n\n loaderTemplate: TemplateRef<any>;\n\n selectedItemTemplate: TemplateRef<any>;\n\n headerTemplate: TemplateRef<any>;\n\n filterTemplate: TemplateRef<any>;\n\n footerTemplate: TemplateRef<any>;\n\n emptyFilterTemplate: TemplateRef<any>;\n\n emptyTemplate: TemplateRef<any>;\n\n filterOptions: DropdownFilterOptions;\n\n selectedOption: any;\n\n _options: any[];\n\n value: any;\n\n onModelChange: Function = () => {};\n\n onModelTouched: Function = () => {};\n\n optionsToDisplay: any[];\n\n hover: boolean;\n\n focused: boolean;\n\n overlayVisible: boolean;\n\n documentClickListener: any;\n\n scrollHandler: any;\n\n optionsChanged: boolean;\n\n panel: HTMLDivElement;\n\n dimensionsUpdated: boolean;\n\n hoveredItem: any;\n\n selectedOptionUpdated: boolean;\n\n _filterValue: string;\n\n searchValue: string;\n\n searchIndex: number;\n\n searchTimeout: any;\n\n previousSearchChar: string;\n\n currentSearchChar: string;\n\n documentResizeListener: any;\n\n preventModelTouched: boolean;\n\n preventDocumentDefault: boolean;\n\n id: string = UniqueComponentId();\n\n labelId: string;\n\n listId: string;\n\n constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public zone: NgZone, public filterService: FilterService, public config: PrimeNGConfig, public overlayService: OverlayService) {}\n\n ngAfterContentInit() {\n this.templates.forEach((item) => {\n switch(item.getType()) {\n case 'item':\n this.itemTemplate = item.template;\n break;\n\n case 'selectedItem':\n this.selectedItemTemplate = item.template;\n break;\n\n case 'header':\n this.headerTemplate = item.template;\n break;\n\n case 'filter':\n this.filterTemplate = item.template;\n break;\n\n case 'footer':\n this.footerTemplate = item.template;\n break;\n\n case 'emptyfilter':\n this.emptyFilterTemplate = item.template;\n break;\n\n case 'empty':\n this.emptyTemplate = item.template;\n break;\n\n case 'group':\n this.groupTemplate = item.template;\n break;\n\n case 'loader':\n this.loaderTemplate = item.template;\n break;\n\n default:\n this.itemTemplate = item.template;\n break;\n }\n });\n }\n\n ngOnInit() {\n this.optionsToDisplay = this.options;\n this.updateSelectedOption(null);\n this.labelId = this.id + '_label';\n this.listId = this.id + '_list';\n\n if (this.filterBy) {\n this.filterOptions = {\n filter: (value) => this.onFilterInputChange(value),\n reset: () => this.resetFilter()\n }\n }\n }\n\n @Input() get options(): any[] {\n return this._options;\n }\n\n set options(val: any[]) {\n this._options = val;\n this.optionsToDisplay = this._options;\n this.updateSelectedOption(this.value);\n\n this.selectedOption = this.findOption(this.value, this.optionsToDisplay);\n if (!this.selectedOption && ObjectUtils.isNotEmpty(this.value) && !this.editable) {\n this.value = null;\n this.onModelChange(this.value);\n }\n\n this.optionsChanged = true;\n\n if (this._filterValue && this._filterValue.length) {\n this.activateFilter();\n }\n }\n\n @Input() get filterValue(): string {\n return this._filterValue;\n }\n\n set filterValue(val: string) {\n this._filterValue = val;\n this.activateFilter();\n }\n\n ngAfterViewInit() {\n if (this.editable) {\n this.updateEditableLabel();\n }\n }\n\n get label(): string {\n return this.selectedOption ? this.getOptionLabel(this.selectedOption) : null;\n }\n\n get emptyMessageLabel(): string {\n return this.emptyMessage || this.config.getTranslation(TranslationKeys.EMPTY_MESSAGE);\n }\n\n get emptyFilterMessageLabel(): string {\n return this.emptyFilterMessage || this.config.getTranslation(TranslationKeys.EMPTY_FILTER_MESSAGE);\n }\n\n get filled() {\n return this.value || this.value != null || this.value != undefined;\n }\n\n get isVisibleClearIcon(): boolean {\n return (this.value != null && this.value !== '') && this.showClear && !this.disabled;\n }\n\n updateEditableLabel(): void {\n if (this.editableInputViewChild && this.editableInputViewChild.nativeElement) {\n this.editableInputViewChild.nativeElement.value = (this.selectedOption ? this.getOptionLabel(this.selectedOption) : this.value||'');\n }\n }\n\n getOptionLabel(option: any) {\n return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : (option && option.label !== undefined ? option.label : option);\n }\n\n getOptionValue(option: any) {\n return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : (!this.optionLabel && (option && option.value !== undefined) ? option.value : option);\n }\n\n isOptionDisabled(option: any) {\n return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : (option && option.disabled !== undefined ? option.disabled : false);\n }\n\n getOptionGroupLabel(optionGroup: any) {\n return this.optionGroupLabel ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel) : (optionGroup && optionGroup.label !== undefined ? optionGroup.label : optionGroup);\n }\n\n getOptionGroupChildren(optionGroup: any) {\n return this.optionGroupChildren ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren) : optionGroup.items;\n }\n\n onItemClick(event) {\n const option = event.option;\n\n if (!this.isOptionDisabled(option)) {\n this.selectItem(event.originalEvent, option);\n this.accessibleViewChild.nativeElement.focus({ preventScroll: true });\n }\n\n setTimeout(() => {\n this.hide();\n }, 150);\n }\n\n selectItem(event, option) {\n if (this.selectedOption != option) {\n this.selectedOption = option;\n this.value = this.getOptionValue(option);\n\n this.onModelChange(this.value);\n this.updateEditableLabel();\n this.onChange.emit({\n originalEvent: event,\n value: this.value\n });\n }\n }\n\n ngAfterViewChecked() {\n if (this.optionsChanged && this.overlayVisible) {\n this.optionsChanged = false;\n\n this.zone.runOutsideAngular(() => {\n setTimeout(() => {\n this.alignOverlay();\n }, 1);\n });\n }\n\n if (this.selectedOptionUpdated && this.itemsWrapper) {\n let selectedItem = DomHandler.findSingle(this.overlay, 'li.p-highlight');\n if (selectedItem) {\n DomHandler.scrollInView(this.itemsWrapper, DomHandler.findSingle(this.overlay, 'li.p-highlight'));\n }\n this.selectedOptionUpdated = false;\n }\n }\n\n writeValue(value: any): void {\n if (this.filter) {\n this.resetFilter();\n }\n\n this.value = value;\n this.updateSelectedOption(value);\n this.updateEditableLabel();\n this.cd.markForCheck();\n }\n\n resetFilter(): void {\n this._filterValue = null;\n\n if (this.filterViewChild && this.filterViewChild.nativeElement) {\n this.filterViewChild.nativeElement.value = '';\n }\n\n this.optionsToDisplay = this.options;\n }\n\n updateSelectedOption(val: any): void {\n this.selectedOption = this.findOption(val, this.optionsToDisplay);\n\n if (this.autoDisplayFirst && !this.placeholder && !this.selectedOption && this.optionsToDisplay && this.optionsToDisplay.length && !this.editable) {\n if(this.group) {\n this.selectedOption = this.optionsToDisplay[0].items[0];\n } else {\n this.selectedOption = this.optionsToDisplay[0];\n }\n this.value = this.getOptionValue(this.selectedOption);\n this.onModelChange(this.value);\n }\n\n this.selectedOptionUpdated = true;\n }\n\n registerOnChange(fn: Function): void {\n this.onModelChange = fn;\n }\n\n registerOnTouched(fn: Function): void {\n this.onModelTouched = fn;\n }\n\n setDisabledState(val: boolean): void {\n this.disabled = val;\n this.cd.markForCheck();\n }\n\n onMouseclick(event) {\n if (this.disabled || this.readonly || this.isInputClick(event)) {\n return;\n }\n\n this.onClick.emit(event);\n\n this.accessibleViewChild.nativeElement.focus({ preventScroll: true });\n\n if (this.overlayVisible)\n this.hide();\n else\n this.show();\n\n this.cd.detectChanges();\n }\n\n onOverlayClick(event) {\n this.overlayService.add({\n originalEvent: event,\n target: this.el.nativeElement\n });\n }\n\n isInputClick(event): boolean {\n return DomHandler.hasClass(event.target, 'p-dropdown-clear-icon') ||\n event.target.isSameNode(this.accessibleViewChild.nativeElement) ||\n (this.editableInputViewChild && event.target.isSameNode(this.editableInputViewChild.nativeElement));\n }\n\n isOutsideClicked(event: Event): boolean {\n return !(this.el.nativeElement.isSameNode(event.target) || this.el.nativeElement.contains(event.target) || (this.overlay && this.overlay.contains(<Node> event.target)));\n }\n\n isEmpty() {\n return !this.optionsToDisplay || (this.optionsToDisplay && this.optionsToDisplay.length === 0);\n }\n\n onEditableInputClick() {\n this.bindDocumentClickListener();\n }\n\n onEditableInputFocus(event) {\n this.focused = true;\n this.hide();\n this.onFocus.emit(event);\n }\n\n onEditableInputChange(event) {\n this.value = event.target.value;\n this.updateSelectedOption(this.value);\n this.onModelChange(this.value);\n this.onChange.emit({\n originalEvent: event,\n value: this.value\n });\n }\n\n show() {\n this.overlayVisible = true;\n this.preventDocumentDefault = true;\n this.cd.markForCheck();\n }\n\n onOverlayAnimationStart(event: AnimationEvent) {\n switch (event.toState) {\n case 'visible':\n this.overlay = event.element;\n this.itemsWrapper = DomHandler.findSingle(this.overlay, this.virtualScroll ? '.p-scroller' : '.p-dropdown-items-wrapper');\n this.virtualScroll && this.scroller.setContentEl(this.itemsViewChild.nativeElement);\n this.appendOverlay();\n if (this.autoZIndex) {\n ZIndexUtils.set('overlay', this.overlay, this.baseZIndex + this.config.zIndex.overlay);\n }\n this.alignOverlay();\n this.bindDocumentClickListener();\n this.bindDocumentResizeListener();\n this.bindScrollListener();\n\n if (this.options && this.options.length) {\n if (this.virtualScroll) {\n const selectedIndex = this.selectedOption ? this.findOptionIndex(this.getOptionValue(this.selectedOption), this.optionsToDisplay) : -1;\n if (selectedIndex !== -1) {\n this.scroller.scrollToIndex(selectedIndex);\n }\n }\n else {\n let selectedListItem = DomHandler.findSingle(this.itemsWrapper, '.p-dropdown-item.p-highlight');\n\n if (selectedListItem) {\n selectedListItem.scrollIntoView({ block: 'nearest', inline: 'center' });\n }\n }\n }\n\n if (this.filterViewChild && this.filterViewChild.nativeElement) {\n this.preventModelTouched = true;\n\n if (this.autofocusFilter) {\n this.filterViewChild.nativeElement.focus();\n }\n }\n\n this.onShow.emit(event);\n break;\n\n case 'void':\n this.onOverlayHide();\n this.onHide.emit(event);\n break;\n }\n }\n\n onOverlayAnimationEnd(event: AnimationEvent) {\n switch (event.toState) {\n case 'void':\n ZIndexUtils.clear(event.element);\n break;\n }\n }\n\n appendOverlay() {\n if (this.appendTo) {\n if (this.appendTo === 'body')\n document.body.appendChild(this.overlay);\n else\n DomHandler.appendChild(this.overlay, this.appendTo);\n\n if (!this.overlay.style.minWidth) {\n this.overlay.style.minWidth = DomHandler.getWidth(this.containerViewChild.nativeElement) + 'px';\n }\n }\n }\n\n restoreOverlayAppend() {\n if (this.overlay && this.appendTo) {\n this.el.nativeElement.appendChild(this.overlay);\n }\n }\n\n hide() {\n this.overlayVisible = false;\n\n if (this.filter && this.resetFilterOnHide) {\n this.resetFilter();\n }\n\n this.cd.markForCheck();\n }\n\n alignOverlay() {\n if (this.overlay) {\n if (this.appendTo)\n DomHandler.absolutePosition(this.overlay, this.containerViewChild.nativeElement);\n else\n DomHandler.relativePosition(this.overlay, this.containerViewChild.nativeElement);\n }\n }\n\n onInputFocus(event) {\n this.focused = true;\n this.onFocus.emit(event);\n }\n\n onInputBlur(event) {\n this.focused = false;\n this.onBlur.emit(event);\n\n if (!this.preventModelTouched) {\n this.onModelTouched();\n }\n this.preventModelTouched = false;\n }\n\n findPrevEnabledOption(index) {\n let prevEnabledOption;\n\n if (this.optionsToDisplay && this.optionsToDisplay.length) {\n for (let i = (index - 1); 0 <= i; i--) {\n let option = this.optionsToDisplay[i];\n if (this.isOptionDisabled(option)) {\n continue;\n }\n else {\n prevEnabledOption = option;\n break;\n }\n }\n\n if (!prevEnabledOption) {\n for (let i = this.optionsToDisplay.length - 1; i >= index ; i--) {\n let option = this.optionsToDisplay[i];\n if (this.isOptionDisabled(option)) {\n continue;\n }\n else {\n prevEnabledOption = option;\n break;\n }\n }\n }\n }\n\n return prevEnabledOption;\n }\n\n findNextEnabledOption(index) {\n let nextEnabledOption;\n\n if (this.optionsToDisplay && this.optionsToDisplay.length) {\n for (let i = (index + 1); i < this.optionsToDisplay.length; i++) {\n let option = this.optionsToDisplay[i];\n if (this.isOptionDisabled(option)) {\n continue;\n }\n else {\n nextEnabledOption = option;\n break;\n }\n }\n\n if (!nextEnabledOption) {\n for (let i = 0; i < index; i++) {\n let option = this.optionsToDisplay[i];\n if (this.isOptionDisabled(option)) {\n continue;\n }\n else {\n nextEnabledOption = option;\n break;\n }\n }\n }\n }\n\n return nextEnabledOption;\n }\n\n onKeydown(event: KeyboardEvent, search: boolean) {\n if (this.readonly || !this.optionsToDisplay || this.optionsToDisplay.length === null) {\n return;\n }\n\n switch(event.which) {\n //down\n case 40:\n if (!this.overlayVisible && event.altKey) {\n this.show();\n }\n else {\n if (this.group) {\n let selectedItemIndex = this.selectedOption ? this.findOptionGroupIndex(this.getOptionValue(this.selectedOption), this.optionsToDisplay) : -1;\n\n if (selectedItemIndex !== -1) {\n let nextItemIndex = selectedItemIndex.itemIndex + 1;\n if (nextItemIndex < (this.getOptionGroupChildren(this.optionsToDisplay[selectedItemIndex.groupIndex]).length)) {\n this.selectItem(event, this.getOptionGroupChildren(this.optionsToDisplay[selectedItemIndex.groupIndex])[nextItemIndex]);\n this.selectedOptionUpdated = true;\n }\n else if (this.optionsToDisplay[selectedItemIndex.groupIndex + 1]) {\n this.selectItem(event, this.getOptionGroupChildren(this.optionsToDisplay[selectedItemIndex.groupIndex + 1])[0]);\n this.selectedOptionUpdated = true;\n }\n }\n else {\n if (this.optionsToDisplay && this.optionsToDisplay.length > 0) {\n this.selectItem(event, this.getOptionGroupChildren(this.optionsToDisplay[0])[0]);\n }\n }\n }\n else {\n let selectedItemIndex = this.selectedOption ? this.findOptionIndex(this.getOptionValue(this.selectedOption), this.optionsToDisplay) : -1;\n let nextEnabledOption = this.findNextEnabledOption(selectedItemIndex);\n if (nextEnabledOption) {\n this.selectItem(event, nextEnabledOption);\n this.selectedOptionUpdated = true;\n }\n }\n }\n\n event.preventDefault();\n\n break;\n\n //up\n case 38:\n if (this.group) {\n let selectedItemIndex = this.selectedOption ? this.findOptionGroupIndex(this.getOptionValue(this.selectedOption), this.optionsToDisplay) : -1;\n if (selectedItemIndex !== -1) {\n let prevItemIndex = selectedItemIndex.itemIndex - 1;\n if (prevItemIndex >= 0) {\n this.selectItem(event, this.getOptionGroupChildren(this.optionsToDisplay[selectedItemIndex.groupIndex])[prevItemIndex]);\n this.selectedOptionUpdated = true;\n }\n else if (prevItemIndex < 0) {\n let prevGroup = this.optionsToDisplay[selectedItemIndex.groupIndex - 1];\n if (prevGroup) {\n this.selectItem(event, this.getOptionGroupChildren(prevGroup)[this.getOptionGroupChildren(prevGroup).length - 1]);\n this.selectedOptionUpdated = true;\n }\n }\n }\n }\n else {\n let selectedItemIndex = this.selectedOption ? this.findOptionIndex(this.getOptionValue(this.selectedOption), this.optionsToDisplay) : -1;\n let prevEnabledOption = this.findPrevEnabledOption(selectedItemIndex);\n if (prevEnabledOption) {\n this.selectItem(event, prevEnabledOption);\n this.selectedOptionUpdated = true;\n }\n }\n\n event.preventDefault();\n break;\n\n //space\n case 32:\n if (search) {\n if (!this.overlayVisible){\n this.show();\n }\n else {\n this.hide();\n }\n\n event.preventDefault();\n }\n break;\n\n //enter\n case 13:\n if (this.overlayVisible && (!this.filter || (this.optionsToDisplay && this.optionsToDisplay.length > 0))) {\n this.hide();\n }\n\n else if (!this.overlayVisible) {\n this.show();\n }\n\n event.preventDefault();\n break;\n\n //escape and tab\n case 27:\n case 9:\n this.hide();\n break;\n\n //search item based on keyboard input\n default:\n if (search && !event.metaKey) {\n this.search(event);\n }\n break;\n }\n }\n\n search(event: KeyboardEvent) {\n if (this.searchTimeout) {\n clearTimeout(this.searchTimeout);\n }\n\n const char = event.key;\n this.previousSearchChar = this.currentSearchChar;\n this.currentSearchChar = char;\n\n if (this.previousSearchChar === this.currentSearchChar)\n this.searchValue = this.currentSearchChar;\n else\n this.searchValue = this.searchValue ? this.searchValue + char : char;\n\n let newOption;\n if (this.group) {\n let searchIndex = this.selectedOption ? this.findOptionGroupIndex(this.getOptionValue(this.selectedOption), this.optionsToDisplay) : {groupIndex: 0, itemIndex: 0};\n newOption = this.searchOptionWithinGroup(searchIndex);\n }\n else {\n let searchIndex = this.selectedOption ? this.findOptionIndex(this.getOptionValue(this.selectedOption), this.optionsToDisplay) : -1;\n newOption = this.searchOption(++searchIndex);\n }\n\n if (newOption && !this.isOptionDisabled(newOption)) {\n this.selectItem(event, newOption);\n this.selectedOptionUpdated = true;\n }\n\n this.searchTimeout = setTimeout(() => {\n this.searchValue = null;\n }, 250);\n }\n\n searchOption(index) {\n let option;\n\n if (this.searchValue) {\n option = this.searchOptionInRange(index, this.optionsToDisplay.length);\n\n if (!option) {\n option = this.searchOptionInRange(0, index);\n }\n }\n\n return option;\n }\n\n searchOptionInRange(start, end) {\n for (let i = start; i < end; i++) {\n let opt = this.optionsToDisplay[i];\n if (this.getOptionLabel(opt).toLocaleLowerCase(this.filterLocale).startsWith((this.searchValue as any).toLocaleLowerCase(this.filterLocale)) && !this.isOptionDisabled(opt)) {\n return opt;\n }\n }\n\n return null;\n }\n\n searchOptionWithinGroup(index) {\n let option;\n\n if (this.searchValue) {\n for (let i = index.groupIndex; i < this.optionsToDisplay.length; i++) {\n for (let j = (index.groupIndex === i) ? (index.itemIndex + 1) : 0; j < this.getOptionGroupChildren(this.optionsToDisplay[i]).length; j++) {\n let opt = this.getOptionGroupChildren(this.optionsToDisplay[i])[j];\n if (this.getOptionLabel(opt).toLocaleLowerCase(this.filterLocale).startsWith((this.searchValue as any).toLocaleLowerCase(this.filterLocale)) && !this.isOptionDisabled(opt)) {\n return opt;\n }\n }\n }\n\n if (!option) {\n for (let i = 0; i <= index.groupIndex; i++) {\n for (let j = 0; j < ((index.groupIndex === i) ? index.itemIndex : this.getOptionGroupChildren(this.optionsToDisplay[i]).length); j++) {\n let opt = this.getOptionGroupChildren(this.optionsToDisplay[i])[j];\n if (this.getOptionLabel(opt).toLocaleLowerCase(this.filterLocale).startsWith((this.searchValue as any).toLocaleLowerCase(this.filterLocale)) && !this.isOptionDisabled(opt)) {\n return opt;\n }\n }\n }\n }\n }\n\n return null;\n }\n\n findOptionIndex(val: any, opts: any[]): number {\n let index: number = -1;\n if (opts) {\n for (let i = 0; i < opts.length; i++) {\n if ((val == null && this.getOptionValue(opts[i]) == null) || ObjectUtils.equals(val, this.getOptionValue(opts[i]), this.dataKey)) {\n index = i;\n break;\n }\n }\n }\n\n return index;\n }\n\n findOptionGroupIndex(val: any, opts: any[]): any {\n let groupIndex, itemIndex;\n\n if (opts) {\n for (let i = 0; i < opts.length; i++) {\n groupIndex = i;\n itemIndex = this.findOptionIndex(val, this.getOptionGroupChildren(opts[i]));\n\n if (itemIndex !== -1) {\n break;\n }\n }\n }\n\n if (itemIndex !== -1) {\n return {groupIndex: groupIndex, itemIndex: itemIndex};\n }\n else {\n return -1;\n }\n }\n\n findOption(val: any, opts: any[], inGroup?: boolean): SelectItem {\n if (this.group && !inGroup) {\n let opt: SelectItem;\n if (opts && opts.length) {\n for (let optgroup of opts) {\n opt = this.findOption(val, this.getOptionGroupChildren(optgroup), true);\n if (opt) {\n break;\n }\n }\n }\n return opt;\n }\n else {\n let index: number = this.findOptionIndex(val, opts);\n return (index != -1) ? opts[index] : null;\n }\n }\n\n onFilterInputChange(event): void {\n let inputValue = event.target.value;\n if (inputValue && inputValue.length) {\n this._filterValue = inputValue;\n this.activateFilter();\n }\n else {\n this._filterValue = null;\n this.optionsToDisplay = this.options;\n }\n\n this.virtualScroll && this.scroller.scrollToIndex(0);\n\n this.optionsChanged = true;\n this.onFilter.emit({originalEvent: event, filter: this._filterValue});\n }\n\n activateFilter() {\n let searchFields: string[] = (this.filterBy || this.optionLabel || 'label').split(',');\n\n if (this.options && this.options.length) {\n if (this.group) {\n let filteredGroups = [];\n for (let optgroup of this.options) {\n let filteredSubOptions = this.filterService.filter(this.getOptionGroupChildren(optgroup), searchFields, this.filterValue, this.filterMatchMode, this.filterLocale);\n if (filteredSubOptions && filteredSubOptions.length) {\n filteredGroups.push({...optgroup, ...{[this.optionGroupChildren]: filteredSubOptions}});\n }\n }\n\n this.optionsToDisplay = filteredGroups;\n }\n else {\n this.optionsToDisplay = this.filterService.filter(this.options, searchFields, this.filterValue, this.filterMatchMode, this.filterLocale);\n }\n\n this.optionsChanged = true;\n }\n }\n\n applyFocus(): void {\n if (this.editable)\n DomHandler.findSingle(this.el.nativeElement, '.p-dropdown-label.p-inputtext').focus();\n else\n DomHandler.findSingle(this.el.nativeElement, 'input[readonly]').focus();\n }\n\n focus(): void {\n this.applyFocus();\n }\n\n bindDocumentClickListener() {\n if (!this.documentClickListener) {\n const documentTarget: any = this.el ? this.el.nativeElement.ownerDocument : 'document';\n\n this.documentClickListener = this.renderer.listen(documentTarget, 'click', (event) => {\n if (!this.preventDocumentDefault && this.isOutsideClicked(event)) {\n this.hide();\n this.unbindDocumentClickListener();\n }\n this.preventDocumentDefault = false;\n });\n }\n }\n\n unbindDocumentClickListener() {\n if (this.documentClickListener) {\n this.documentClickListener();\n this.documentClickListener = null;\n }\n }\n\n bindDocumentResizeListener() {\n this.documentResizeListener = this.onWindowResize.bind(this);\n window.addEventListener('resize', this.documentResizeListener);\n }\n\n unbindDocumentResizeListener() {\n if (this.documentResizeListener) {\n window.removeEventListener('resize', this.documentResizeListener);\n this.documentResizeListener = null;\n }\n }\n\n onWindowResize() {\n if (this.overlayVisible && !DomHandler.isTouchDevice()) {\n this.hide();\n }\n }\n\n bindScrollListener() {\n if (!this.scrollHandler) {\n this.scrollHandler = new ConnectedOverlayScrollHandler(this.containerViewChild.nativeElement, (event: any) => {\n if (this.overlayVisible) {\n this.hide();\n }\n });\n }\n\n this.scrollHandler.bindScrollListener();\n }\n\n unbindScrollListener() {\n if (this.scrollHandler) {\n this.scrollHandler.unbindScrollListener();\n }\n }\n\n clear(event: Event) {\n this.value = null;\n this.onModelChange(this.value);\n this.onChange.emit({\n originalEvent: event,\n value: this.value\n });\n this.updateSelectedOption(this.value);\n this.updateEditableLabel();\n this.onClear.emit(event);\n }\n\n onOverlayHide() {\n this.unbindDocumentClickListener();\n this.unbindDocumentResizeListener();\n this.unbindScrollListener();\n this.overlay = null;\n this.itemsWrapper = null;\n this.onModelTouched();\n }\n\n ngOnDestroy() {\n if (this.scrollHandler) {\n this.scrollHandler.destroy();\n this.scrollHandler = null;\n }\n\n if (this.overlay) {\n ZIndexUtils.clear(this.overlay);\n }\n\n this.restoreOverlayAppend();\n this.onOverlayHide();\n }\n}\n\n@NgModule({\n imports: [CommonModule,SharedModule,TooltipModule,RippleModule,ScrollerModule, AutoFocusModule],\n exports: [Dropdown,SharedModule,ScrollerModule],\n declarations: [Dropdown,DropdownItem]\n})\nexport class DropdownModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAca,MAAA,uBAAuB,GAAQ;AAC1C,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,WAAW,EAAE,UAAU,CAAC,MAAM,QAAQ,CAAC;AACvC,IAAA,KAAK,EAAE,IAAI;EACX;MAsBW,YAAY,CAAA;AAfzB,IAAA,WAAA,GAAA;AA+Bc,QAAA,IAAA,CAAA,OAAO,GAAsB,IAAI,YAAY,EAAE,CAAC;AAQ7D,KAAA;AANG,IAAA,aAAa,CAAC,KAAY,EAAA;AACtB,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;AACd,YAAA,aAAa,EAAE,KAAK;YACpB,MAAM,EAAE,IAAI,CAAC,MAAM;AACtB,SAAA,CAAC,CAAC;KACN;;yGAvBQ,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAZ,YAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAY,EAbX,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,QAAA,EAAA,UAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,WAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;AAQT,IAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA