primeng 11.3.1 → 11.4.2

package/fesm2015/primeng-dropdown.js

@@ -2,7 +2,7 @@ import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrollin
 import { forwardRef, EventEmitter, Component, Input, Output, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, Renderer2, ChangeDetectorRef, NgZone, ViewChild, ContentChildren, NgModule } from '@angular/core';
 import { trigger, transition, style, animate } from '@angular/animations';
 import { CommonModule } from '@angular/common';
-import { FilterService, PrimeTemplate, SharedModule } from 'primeng/api';
+import { TranslationKeys, FilterService, PrimeNGConfig, PrimeTemplate, SharedModule } from 'primeng/api';
 import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
 import { ObjectUtils } from 'primeng/utils';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -50,17 +50,20 @@ DropdownItem.propDecorators = {
     onClick: [{ type: Output }]
 };
 class Dropdown {
-    constructor(el, renderer, cd, zone, filterService) {
+    constructor(el, renderer, cd, zone, filterService, config) {
         this.el = el;
         this.renderer = renderer;
         this.cd = cd;
         this.zone = zone;
         this.filterService = filterService;
+        this.config = config;
         this.scrollHeight = '200px';
         this.resetFilterOnHide = false;
         this.dropdownIcon = 'pi pi-chevron-down';
+        this.optionGroupChildren = "items";
         this.autoDisplayFirst = true;
-        this.emptyFilterMessage = 'No results found';
+        this.emptyFilterMessage = '';
+        this.emptyMessage = '';
         this.autoZIndex = true;
         this.baseZIndex = 0;
         this.showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
@@ -71,6 +74,7 @@ class Dropdown {
         this.tooltipPositionStyle = 'absolute';
         this.autofocusFilter = true;
         this.onChange = new EventEmitter();
+        this.onFilter = new EventEmitter();
         this.onFocus = new EventEmitter();
         this.onBlur = new EventEmitter();
         this.onClick = new EventEmitter();
@@ -85,8 +89,11 @@ class Dropdown {
     }
     ;
     set disabled(_disabled) {
-        if (_disabled)
+        if (_disabled) {
             this.focused = false;
+            if (this.overlayVisible)
+                this.hide();
+        }
         this._disabled = _disabled;
         if (!this.cd.destroyed) {
             this.cd.detectChanges();
@@ -101,6 +108,18 @@ class Dropdown {
                 case 'selectedItem':
                     this.selectedItemTemplate = item.template;
                     break;
+                case 'header':
+                    this.headerTemplate = item.template;
+                    break;
+                case 'footer':
+                    this.footerTemplate = item.template;
+                    break;
+                case 'emptyfilter':
+                    this.emptyFilterTemplate = item.template;
+                    break;
+                case 'empty':
+                    this.emptyTemplate = item.template;
+                    break;
                 case 'group':
                     this.groupTemplate = item.template;
                     break;
@@ -122,7 +141,6 @@ class Dropdown {
         this.optionsToDisplay = this._options;
         this.updateSelectedOption(this.value);
         this.optionsChanged = true;
-        this.updateFilledState();
         if (this._filterValue && this._filterValue.length) {
             this.activateFilter();
         }
@@ -142,6 +160,12 @@ class Dropdown {
     get label() {
         return this.selectedOption ? this.getOptionLabel(this.selectedOption) : null;
     }
+    get emptyMessageLabel() {
+        return this.emptyMessage || this.config.getTranslation(TranslationKeys.EMPTY_MESSAGE);
+    }
+    get emptyFilterMessageLabel() {
+        return this.emptyFilterMessage || this.config.getTranslation(TranslationKeys.EMPTY_FILTER_MESSAGE);
+    }
     updateEditableLabel() {
         if (this.editableInputViewChild && this.editableInputViewChild.nativeElement) {
             this.editableInputViewChild.nativeElement.value = (this.selectedOption ? this.getOptionLabel(this.selectedOption) : this.value || '');
@@ -151,7 +175,7 @@ class Dropdown {
         return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : (option.label != undefined ? option.label : option);
     }
     getOptionValue(option) {
-        return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : (this.optionLabel ? option : option.value);
+        return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : (this.optionLabel || option.value === undefined ? option : option.value);
     }
     isOptionDisabled(option) {
         return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : (option.disabled !== undefined ? option.disabled : false);
@@ -169,14 +193,13 @@ class Dropdown {
             this.accessibleViewChild.nativeElement.focus();
         }
         setTimeout(() => {
-            this.hide(event);
+            this.hide();
         }, 150);
     }
     selectItem(event, option) {
         if (this.selectedOption != option) {
             this.selectedOption = option;
             this.value = this.getOptionValue(option);
-            this.filled = true;
             this.onModelChange(this.value);
             this.updateEditableLabel();
             this.onChange.emit({
@@ -224,7 +247,6 @@ class Dropdown {
         this.value = value;
         this.updateSelectedOption(value);
         this.updateEditableLabel();
-        this.updateFilledState();
         this.cd.markForCheck();
     }
     resetFilter() {
@@ -258,7 +280,7 @@ class Dropdown {
         this.onClick.emit(event);
         this.accessibleViewChild.nativeElement.focus();
         if (this.overlayVisible)
-            this.hide(event);
+            this.hide();
         else
             this.show();
         this.cd.detectChanges();
@@ -271,12 +293,15 @@ class Dropdown {
     isOutsideClicked(event) {
         return !(this.el.nativeElement.isSameNode(event.target) || this.el.nativeElement.contains(event.target) || (this.overlay && this.overlay.contains(event.target)));
     }
+    isEmpty() {
+        return !this.optionsToDisplay || (this.optionsToDisplay && this.optionsToDisplay.length === 0);
+    }
     onEditableInputClick() {
         this.bindDocumentClickListener();
     }
     onEditableInputFocus(event) {
         this.focused = true;
-        this.hide(event);
+        this.hide();
         this.onFocus.emit(event);
     }
     onEditableInputChange(event) {
@@ -323,6 +348,7 @@ class Dropdown {
                 break;
             case 'void':
                 this.onOverlayHide();
+                this.onHide.emit(event);
                 break;
         }
     }
@@ -361,7 +387,7 @@ class Dropdown {
             this.el.nativeElement.appendChild(this.overlay);
         }
     }
-    hide(event) {
+    hide() {
         this.overlayVisible = false;
         if (this.filter && this.resetFilterOnHide) {
             this.resetFilter();
@@ -370,7 +396,6 @@ class Dropdown {
             this.virtualAutoScrolled = false;
         }
         this.cd.markForCheck();
-        this.onHide.emit(event);
     }
     alignOverlay() {
         if (this.overlay) {
@@ -527,18 +552,18 @@ class Dropdown {
             //enter
             case 13:
                 if (!this.filter || (this.optionsToDisplay && this.optionsToDisplay.length > 0)) {
-                    this.hide(event);
+                    this.hide();
                 }
                 event.preventDefault();
                 break;
             //escape and tab
             case 27:
             case 9:
-                this.hide(event);
+                this.hide();
                 break;
             //search item based on keyboard input
             default:
-                if (search) {
+                if (search && !event.metaKey) {
                     this.search(event);
                 }
                 break;
@@ -663,7 +688,7 @@ class Dropdown {
             return (index != -1) ? opts[index] : null;
         }
     }
-    onFilter(event) {
+    onFilterInputChange(event) {
         let inputValue = event.target.value;
         if (inputValue && inputValue.length) {
             this._filterValue = inputValue;
@@ -674,6 +699,7 @@ class Dropdown {
             this.optionsToDisplay = this.options;
         }
         this.optionsChanged = true;
+        this.onFilter.emit({ originalEvent: event, filter: this._filterValue });
     }
     activateFilter() {
         let searchFields = (this.filterBy || this.optionLabel || 'label').split(',');
@@ -683,11 +709,7 @@ class Dropdown {
                 for (let optgroup of this.options) {
                     let filteredSubOptions = this.filterService.filter(this.getOptionGroupChildren(optgroup), searchFields, this.filterValue, this.filterMatchMode, this.filterLocale);
                     if (filteredSubOptions && filteredSubOptions.length) {
-                        filteredGroups.push({
-                            label: optgroup.label,
-                            value: optgroup.value,
-                            items: filteredSubOptions
-                        });
+                        filteredGroups.push(Object.assign(Object.assign({}, optgroup), { [this.optionGroupChildren]: filteredSubOptions }));
                     }
                 }
                 this.optionsToDisplay = filteredGroups;
@@ -712,7 +734,7 @@ class Dropdown {
             const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
             this.documentClickListener = this.renderer.listen(documentTarget, 'click', (event) => {
                 if (this.isOutsideClicked(event)) {
-                    this.hide(event);
+                    this.hide();
                     this.unbindDocumentClickListener();
                 }
                 this.cd.markForCheck();
@@ -737,14 +759,14 @@ class Dropdown {
     }
     onWindowResize() {
         if (!DomHandler.isAndroid()) {
-            this.hide(event);
+            this.hide();
         }
     }
     bindScrollListener() {
         if (!this.scrollHandler) {
             this.scrollHandler = new ConnectedOverlayScrollHandler(this.containerViewChild.nativeElement, (event) => {
                 if (this.overlayVisible) {
-                    this.hide(event);
+                    this.hide();
                 }
             });
         }
@@ -755,9 +777,6 @@ class Dropdown {
             this.scrollHandler.unbindScrollListener();
         }
     }
-    updateFilledState() {
-        this.filled = (this.selectedOption != null);
-    }
     clear(event) {
         this.value = null;
         this.onModelChange(this.value);
@@ -767,7 +786,6 @@ class Dropdown {
         });
         this.updateSelectedOption(this.value);
         this.updateEditableLabel();
-        this.updateFilledState();
     }
     onOverlayHide() {
         this.unbindDocumentClickListener();
@@ -810,15 +828,16 @@ Dropdown.decorators = [
                 <span class="p-dropdown-trigger-icon" [ngClass]="dropdownIcon"></span>
             </div>
             <div *ngIf="overlayVisible" [ngClass]="'p-dropdown-panel p-component'" [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onOverlayAnimationStart($event)" [ngStyle]="panelStyle" [class]="panelStyleClass">
+                <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
                 <div class="p-dropdown-header" *ngIf="filter" >
                     <div class="p-dropdown-filter-container" (click)="$event.stopPropagation()">
                         <input #filter type="text" autocomplete="off" [value]="filterValue||''" class="p-dropdown-filter p-inputtext p-component" [attr.placeholder]="filterPlaceholder"
-                        (keydown.enter)="$event.preventDefault()" (keydown)="onKeydown($event, false)" (input)="onFilter($event)" [attr.aria-label]="ariaFilterLabel">
+                        (keydown.enter)="$event.preventDefault()" (keydown)="onKeydown($event, false)" (input)="onFilterInputChange($event)" [attr.aria-label]="ariaFilterLabel">
                         <span class="p-dropdown-filter-icon pi pi-search"></span>
                     </div>
                 </div>
                 <div class="p-dropdown-items-wrapper" [style.max-height]="virtualScroll ? 'auto' : (scrollHeight||'auto')">
-                    <ul class="p-dropdown-items" role="listbox">
+                    <ul class="p-dropdown-items" [ngClass]="{'p-dropdown-virtualscroll': virtualScroll}" role="listbox">
                         <ng-container *ngIf="group">
                             <ng-template ngFor let-optgroup [ngForOf]="optionsToDisplay">
                                 <li class="p-dropdown-item-group">
@@ -849,9 +868,21 @@ Dropdown.decorators = [
                                 </cdk-virtual-scroll-viewport>
                             </ng-template>
                         </ng-template>
-                        <li *ngIf="filter && (!optionsToDisplay || (optionsToDisplay && optionsToDisplay.length === 0))" class="p-dropdown-empty-message">{{emptyFilterMessage}}</li>
+                        <li *ngIf="filterValue && isEmpty()" class="p-dropdown-empty-message">
+                            <ng-container *ngIf="!emptyFilterTemplate && !emptyTemplate; else emptyFilter">
+                                {{emptyFilterMessageLabel}}
+                            </ng-container>
+                            <ng-container #emptyFilter *ngTemplateOutlet="emptyFilterTemplate || emptyTemplate"></ng-container>
+                        </li>
+                        <li *ngIf="!filterValue && isEmpty()" class="p-dropdown-empty-message">
+                            <ng-container *ngIf="!emptyTemplate; else empty">
+                                {{emptyMessageLabel}}
+                            </ng-container>
+                            <ng-container #empty *ngTemplateOutlet="emptyTemplate"></ng-container>
+                        </li>
                     </ul>
                 </div>
+                <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
             </div>
         </div>
     `,
@@ -867,7 +898,7 @@ Dropdown.decorators = [
                     ])
                 ],
                 host: {
-                    '[class.p-inputwrapper-filled]': 'filled',
+                    '[class.p-inputwrapper-filled]': 'value',
                     '[class.p-inputwrapper-focus]': 'focused || overlayVisible'
                 },
                 providers: [DROPDOWN_VALUE_ACCESSOR],
@@ -881,7 +912,8 @@ Dropdown.ctorParameters = () => [
     { type: Renderer2 },
     { type: ChangeDetectorRef },
     { type: NgZone },
-    { type: FilterService }
+    { type: FilterService },
+    { type: PrimeNGConfig }
 ];
 Dropdown.propDecorators = {
     scrollHeight: [{ type: Input }],
@@ -915,6 +947,7 @@ Dropdown.propDecorators = {
     group: [{ type: Input }],
     showClear: [{ type: Input }],
     emptyFilterMessage: [{ type: Input }],
+    emptyMessage: [{ type: Input }],
     virtualScroll: [{ type: Input }],
     itemSize: [{ type: Input }],
     autoZIndex: [{ type: Input }],
@@ -931,6 +964,7 @@ Dropdown.propDecorators = {
     tooltipStyleClass: [{ type: Input }],
     autofocusFilter: [{ type: Input }],
     onChange: [{ type: Output }],
+    onFilter: [{ type: Output }],
     onFocus: [{ type: Output }],
     onBlur: [{ type: Output }],
     onClick: [{ type: Output }],