1 | (function (global, factory) {
|
2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/scrolling'), require('@angular/core'), require('@angular/animations'), require('@angular/common'), require('primeng/api'), require('primeng/dom'), require('primeng/utils'), require('@angular/forms'), require('primeng/tooltip')) :
|
3 | typeof define === 'function' && define.amd ? define('primeng/dropdown', ['exports', '@angular/cdk/scrolling', '@angular/core', '@angular/animations', '@angular/common', 'primeng/api', 'primeng/dom', 'primeng/utils', '@angular/forms', 'primeng/tooltip'], factory) :
|
4 | (global = global || self, factory((global.primeng = global.primeng || {}, global.primeng.dropdown = {}), global.ng.cdk.scrolling, global.ng.core, global.ng.animations, global.ng.common, global.primeng.api, global.primeng.dom, global.primeng.utils, global.ng.forms, global.primeng.tooltip));
|
5 | }(this, (function (exports, scrolling, core, animations, common, api, dom, utils, forms, tooltip) { 'use strict';
|
6 |
|
7 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
8 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
9 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
10 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
11 | return c > 3 && r && Object.defineProperty(target, key, r), r;
|
12 | };
|
13 | var __values = (this && this.__values) || function(o) {
|
14 | var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
|
15 | if (m) return m.call(o);
|
16 | if (o && typeof o.length === "number") return {
|
17 | next: function () {
|
18 | if (o && i >= o.length) o = void 0;
|
19 | return { value: o && o[i++], done: !o };
|
20 | }
|
21 | };
|
22 | throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
|
23 | };
|
24 | var DROPDOWN_VALUE_ACCESSOR = {
|
25 | provide: forms.NG_VALUE_ACCESSOR,
|
26 | useExisting: core.forwardRef(function () { return Dropdown; }),
|
27 | multi: true
|
28 | };
|
29 | var DropdownItem = (function () {
|
30 | function DropdownItem() {
|
31 | this.onClick = new core.EventEmitter();
|
32 | }
|
33 | DropdownItem.prototype.onOptionClick = function (event) {
|
34 | this.onClick.emit({
|
35 | originalEvent: event,
|
36 | option: this.option
|
37 | });
|
38 | };
|
39 | __decorate([
|
40 | core.Input()
|
41 | ], DropdownItem.prototype, "option", void 0);
|
42 | __decorate([
|
43 | core.Input()
|
44 | ], DropdownItem.prototype, "selected", void 0);
|
45 | __decorate([
|
46 | core.Input()
|
47 | ], DropdownItem.prototype, "disabled", void 0);
|
48 | __decorate([
|
49 | core.Input()
|
50 | ], DropdownItem.prototype, "visible", void 0);
|
51 | __decorate([
|
52 | core.Input()
|
53 | ], DropdownItem.prototype, "itemSize", void 0);
|
54 | __decorate([
|
55 | core.Input()
|
56 | ], DropdownItem.prototype, "template", void 0);
|
57 | __decorate([
|
58 | core.Output()
|
59 | ], DropdownItem.prototype, "onClick", void 0);
|
60 | DropdownItem = __decorate([
|
61 | core.Component({
|
62 | selector: 'p-dropdownItem',
|
63 | template: "\n <li (click)=\"onOptionClick($event)\" role=\"option\"\n [attr.aria-label]=\"option.label\" [attr.aria-selected]=\"selected\"\n [ngStyle]=\"{'height': itemSize + 'px'}\"\n [ngClass]=\"{'ui-dropdown-item ui-corner-all':true,\n 'ui-state-highlight': selected,\n 'ui-state-disabled':(option.disabled),\n 'ui-dropdown-item-empty': !option.label||option.label.length === 0}\">\n <span *ngIf=\"!template\">{{option.label||'empty'}}</span>\n <ng-container *ngTemplateOutlet=\"template; context: {$implicit: option}\"></ng-container>\n </li>\n "
|
64 | })
|
65 | ], DropdownItem);
|
66 | return DropdownItem;
|
67 | }());
|
68 | var Dropdown = (function () {
|
69 | function Dropdown(el, renderer, cd, zone) {
|
70 | this.el = el;
|
71 | this.renderer = renderer;
|
72 | this.cd = cd;
|
73 | this.zone = zone;
|
74 | this.scrollHeight = '200px';
|
75 | this.filterBy = 'label';
|
76 | this.resetFilterOnHide = false;
|
77 | this.dropdownIcon = 'pi pi-chevron-down';
|
78 | this.autoDisplayFirst = true;
|
79 | this.emptyFilterMessage = 'No results found';
|
80 | this.autoZIndex = true;
|
81 | this.baseZIndex = 0;
|
82 | this.showTransitionOptions = '225ms ease-out';
|
83 | this.hideTransitionOptions = '195ms ease-in';
|
84 | this.filterMatchMode = "contains";
|
85 | this.tooltip = '';
|
86 | this.tooltipPosition = 'right';
|
87 | this.tooltipPositionStyle = 'absolute';
|
88 | this.autofocusFilter = true;
|
89 | this.onChange = new core.EventEmitter();
|
90 | this.onFocus = new core.EventEmitter();
|
91 | this.onBlur = new core.EventEmitter();
|
92 | this.onClick = new core.EventEmitter();
|
93 | this.onShow = new core.EventEmitter();
|
94 | this.onHide = new core.EventEmitter();
|
95 | this.onModelChange = function () { };
|
96 | this.onModelTouched = function () { };
|
97 | this.viewPortOffsetTop = 0;
|
98 | }
|
99 | Object.defineProperty(Dropdown.prototype, "disabled", {
|
100 | get: function () {
|
101 | return this._disabled;
|
102 | },
|
103 | set: function (_disabled) {
|
104 | if (_disabled)
|
105 | this.focused = false;
|
106 | this._disabled = _disabled;
|
107 | if (!this.cd.destroyed) {
|
108 | this.cd.detectChanges();
|
109 | }
|
110 | },
|
111 | enumerable: true,
|
112 | configurable: true
|
113 | });
|
114 | ;
|
115 | Dropdown.prototype.ngAfterContentInit = function () {
|
116 | var _this = this;
|
117 | this.templates.forEach(function (item) {
|
118 | switch (item.getType()) {
|
119 | case 'item':
|
120 | _this.itemTemplate = item.template;
|
121 | break;
|
122 | case 'selectedItem':
|
123 | _this.selectedItemTemplate = item.template;
|
124 | break;
|
125 | case 'group':
|
126 | _this.groupTemplate = item.template;
|
127 | break;
|
128 | default:
|
129 | _this.itemTemplate = item.template;
|
130 | break;
|
131 | }
|
132 | });
|
133 | };
|
134 | Dropdown.prototype.ngOnInit = function () {
|
135 | this.optionsToDisplay = this.options;
|
136 | this.updateSelectedOption(null);
|
137 | };
|
138 | Object.defineProperty(Dropdown.prototype, "options", {
|
139 | get: function () {
|
140 | return this._options;
|
141 | },
|
142 | set: function (val) {
|
143 | var opts = this.optionLabel ? utils.ObjectUtils.generateSelectItems(val, this.optionLabel) : val;
|
144 | this._options = opts;
|
145 | this.optionsToDisplay = this._options;
|
146 | this.updateSelectedOption(this.value);
|
147 | this.optionsChanged = true;
|
148 | this.updateFilledState();
|
149 | if (this.filterValue && this.filterValue.length) {
|
150 | this.activateFilter();
|
151 | }
|
152 | },
|
153 | enumerable: true,
|
154 | configurable: true
|
155 | });
|
156 | Dropdown.prototype.ngAfterViewInit = function () {
|
157 | if (this.editable) {
|
158 | this.updateEditableLabel();
|
159 | }
|
160 | };
|
161 | Object.defineProperty(Dropdown.prototype, "label", {
|
162 | get: function () {
|
163 | return (this.selectedOption ? this.selectedOption.label : null);
|
164 | },
|
165 | enumerable: true,
|
166 | configurable: true
|
167 | });
|
168 | Dropdown.prototype.updateEditableLabel = function () {
|
169 | if (this.editableInputViewChild && this.editableInputViewChild.nativeElement) {
|
170 | this.editableInputViewChild.nativeElement.value = (this.selectedOption ? this.selectedOption.label : this.value || '');
|
171 | }
|
172 | };
|
173 | Dropdown.prototype.onItemClick = function (event) {
|
174 | var _this = this;
|
175 | var option = event.option;
|
176 | this.itemClick = true;
|
177 | if (!option.disabled) {
|
178 | this.selectItem(event, option);
|
179 | this.focusViewChild.nativeElement.focus();
|
180 | }
|
181 | setTimeout(function () {
|
182 | _this.hide(event);
|
183 | }, 150);
|
184 | };
|
185 | Dropdown.prototype.selectItem = function (event, option) {
|
186 | var _this = this;
|
187 | if (this.selectedOption != option) {
|
188 | this.selectedOption = option;
|
189 | this.value = option.value;
|
190 | this.filled = true;
|
191 | this.onModelChange(this.value);
|
192 | this.updateEditableLabel();
|
193 | this.onChange.emit({
|
194 | originalEvent: event.originalEvent,
|
195 | value: this.value
|
196 | });
|
197 | if (this.virtualScroll) {
|
198 | setTimeout(function () {
|
199 | _this.viewPortOffsetTop = _this.viewPort ? _this.viewPort.measureScrollOffset() : 0;
|
200 | }, 1);
|
201 | }
|
202 | }
|
203 | };
|
204 | Dropdown.prototype.ngAfterViewChecked = function () {
|
205 | var _this = this;
|
206 | if (this.optionsChanged && this.overlayVisible) {
|
207 | this.optionsChanged = false;
|
208 | if (this.virtualScroll) {
|
209 | this.updateVirtualScrollSelectedIndex(true);
|
210 | }
|
211 | this.zone.runOutsideAngular(function () {
|
212 | setTimeout(function () {
|
213 | _this.alignOverlay();
|
214 | }, 1);
|
215 | });
|
216 | }
|
217 | if (this.selectedOptionUpdated && this.itemsWrapper) {
|
218 | if (this.virtualScroll && this.viewPort) {
|
219 | var range = this.viewPort.getRenderedRange();
|
220 | this.updateVirtualScrollSelectedIndex(false);
|
221 | if (range.start > this.virtualScrollSelectedIndex || range.end < this.virtualScrollSelectedIndex) {
|
222 | this.viewPort.scrollToIndex(this.virtualScrollSelectedIndex);
|
223 | }
|
224 | }
|
225 | var selectedItem = dom.DomHandler.findSingle(this.overlay, 'li.ui-state-highlight');
|
226 | if (selectedItem) {
|
227 | dom.DomHandler.scrollInView(this.itemsWrapper, dom.DomHandler.findSingle(this.overlay, 'li.ui-state-highlight'));
|
228 | }
|
229 | this.selectedOptionUpdated = false;
|
230 | }
|
231 | };
|
232 | Dropdown.prototype.writeValue = function (value) {
|
233 | if (this.filter) {
|
234 | this.resetFilter();
|
235 | }
|
236 | this.value = value;
|
237 | this.updateSelectedOption(value);
|
238 | this.updateEditableLabel();
|
239 | this.updateFilledState();
|
240 | this.cd.markForCheck();
|
241 | };
|
242 | Dropdown.prototype.resetFilter = function () {
|
243 | this.filterValue = null;
|
244 | if (this.filterViewChild && this.filterViewChild.nativeElement) {
|
245 | this.filterViewChild.nativeElement.value = '';
|
246 | }
|
247 | this.optionsToDisplay = this.options;
|
248 | };
|
249 | Dropdown.prototype.updateSelectedOption = function (val) {
|
250 | this.selectedOption = this.findOption(val, this.optionsToDisplay);
|
251 | if (this.autoDisplayFirst && !this.placeholder && !this.selectedOption && this.optionsToDisplay && this.optionsToDisplay.length && !this.editable) {
|
252 | this.selectedOption = this.optionsToDisplay[0];
|
253 | }
|
254 | this.selectedOptionUpdated = true;
|
255 | };
|
256 | Dropdown.prototype.registerOnChange = function (fn) {
|
257 | this.onModelChange = fn;
|
258 | };
|
259 | Dropdown.prototype.registerOnTouched = function (fn) {
|
260 | this.onModelTouched = fn;
|
261 | };
|
262 | Dropdown.prototype.setDisabledState = function (val) {
|
263 | this.disabled = val;
|
264 | };
|
265 | Dropdown.prototype.onMouseclick = function (event) {
|
266 | if (this.disabled || this.readonly) {
|
267 | return;
|
268 | }
|
269 | this.onClick.emit(event);
|
270 | this.selfClick = true;
|
271 | this.clearClick = dom.DomHandler.hasClass(event.target, 'ui-dropdown-clear-icon');
|
272 | if (!this.itemClick && !this.clearClick) {
|
273 | this.focusViewChild.nativeElement.focus();
|
274 | if (this.overlayVisible)
|
275 | this.hide(event);
|
276 | else
|
277 | this.show();
|
278 | this.cd.detectChanges();
|
279 | }
|
280 | };
|
281 | Dropdown.prototype.onEditableInputClick = function (event) {
|
282 | this.itemClick = true;
|
283 | this.bindDocumentClickListener();
|
284 | };
|
285 | Dropdown.prototype.onEditableInputFocus = function (event) {
|
286 | this.focused = true;
|
287 | this.hide(event);
|
288 | this.onFocus.emit(event);
|
289 | };
|
290 | Dropdown.prototype.onEditableInputChange = function (event) {
|
291 | this.value = event.target.value;
|
292 | this.updateSelectedOption(this.value);
|
293 | this.onModelChange(this.value);
|
294 | this.onChange.emit({
|
295 | originalEvent: event,
|
296 | value: this.value
|
297 | });
|
298 | };
|
299 | Dropdown.prototype.show = function () {
|
300 | this.overlayVisible = true;
|
301 | };
|
302 | Dropdown.prototype.onOverlayAnimationStart = function (event) {
|
303 | switch (event.toState) {
|
304 | case 'visible':
|
305 | this.overlay = event.element;
|
306 | var itemsWrapperSelector = this.virtualScroll ? '.cdk-virtual-scroll-viewport' : '.ui-dropdown-items-wrapper';
|
307 | this.itemsWrapper = dom.DomHandler.findSingle(this.overlay, itemsWrapperSelector);
|
308 | this.appendOverlay();
|
309 | if (this.autoZIndex) {
|
310 | this.overlay.style.zIndex = String(this.baseZIndex + (++dom.DomHandler.zindex));
|
311 | }
|
312 | this.alignOverlay();
|
313 | this.bindDocumentClickListener();
|
314 | this.bindDocumentResizeListener();
|
315 | if (this.options && this.options.length) {
|
316 | if (!this.virtualScroll) {
|
317 | var selectedListItem = dom.DomHandler.findSingle(this.itemsWrapper, '.ui-dropdown-item.ui-state-highlight');
|
318 | if (selectedListItem) {
|
319 | dom.DomHandler.scrollInView(this.itemsWrapper, selectedListItem);
|
320 | }
|
321 | }
|
322 | }
|
323 | if (this.filterViewChild && this.filterViewChild.nativeElement) {
|
324 | this.preventModelTouched = true;
|
325 | if (this.autofocusFilter) {
|
326 | this.filterViewChild.nativeElement.focus();
|
327 | }
|
328 | }
|
329 | this.onShow.emit(event);
|
330 | break;
|
331 | case 'void':
|
332 | this.onOverlayHide();
|
333 | break;
|
334 | }
|
335 | };
|
336 | Dropdown.prototype.scrollToSelectedVirtualScrollElement = function () {
|
337 | if (!this.virtualAutoScrolled) {
|
338 | if (this.viewPortOffsetTop) {
|
339 | this.viewPort.scrollToOffset(this.viewPortOffsetTop);
|
340 | }
|
341 | else if (this.virtualScrollSelectedIndex > -1) {
|
342 | this.viewPort.scrollToIndex(this.virtualScrollSelectedIndex);
|
343 | }
|
344 | }
|
345 | this.virtualAutoScrolled = true;
|
346 | };
|
347 | Dropdown.prototype.updateVirtualScrollSelectedIndex = function (resetOffset) {
|
348 | if (this.selectedOption && this.optionsToDisplay && this.optionsToDisplay.length) {
|
349 | if (resetOffset) {
|
350 | this.viewPortOffsetTop = 0;
|
351 | }
|
352 | this.virtualScrollSelectedIndex = this.findOptionIndex(this.selectedOption.value, this.optionsToDisplay);
|
353 | }
|
354 | };
|
355 | Dropdown.prototype.appendOverlay = function () {
|
356 | if (this.appendTo) {
|
357 | if (this.appendTo === 'body')
|
358 | document.body.appendChild(this.overlay);
|
359 | else
|
360 | dom.DomHandler.appendChild(this.overlay, this.appendTo);
|
361 | if (!this.overlay.style.minWidth) {
|
362 | this.overlay.style.minWidth = dom.DomHandler.getWidth(this.containerViewChild.nativeElement) + 'px';
|
363 | }
|
364 | }
|
365 | };
|
366 | Dropdown.prototype.restoreOverlayAppend = function () {
|
367 | if (this.overlay && this.appendTo) {
|
368 | this.el.nativeElement.appendChild(this.overlay);
|
369 | }
|
370 | };
|
371 | Dropdown.prototype.hide = function (event) {
|
372 | this.overlayVisible = false;
|
373 | if (this.filter && this.resetFilterOnHide) {
|
374 | this.resetFilter();
|
375 | }
|
376 | if (this.virtualScroll) {
|
377 | this.virtualAutoScrolled = false;
|
378 | }
|
379 | this.cd.markForCheck();
|
380 | this.onHide.emit(event);
|
381 | };
|
382 | Dropdown.prototype.alignOverlay = function () {
|
383 | if (this.overlay) {
|
384 | if (this.appendTo)
|
385 | dom.DomHandler.absolutePosition(this.overlay, this.containerViewChild.nativeElement);
|
386 | else
|
387 | dom.DomHandler.relativePosition(this.overlay, this.containerViewChild.nativeElement);
|
388 | }
|
389 | };
|
390 | Dropdown.prototype.onInputFocus = function (event) {
|
391 | this.focused = true;
|
392 | this.onFocus.emit(event);
|
393 | };
|
394 | Dropdown.prototype.onInputBlur = function (event) {
|
395 | this.focused = false;
|
396 | this.onBlur.emit(event);
|
397 | if (!this.preventModelTouched) {
|
398 | this.onModelTouched();
|
399 | }
|
400 | this.preventModelTouched = false;
|
401 | };
|
402 | Dropdown.prototype.findPrevEnabledOption = function (index) {
|
403 | var prevEnabledOption;
|
404 | if (this.optionsToDisplay && this.optionsToDisplay.length) {
|
405 | for (var i = (index - 1); 0 <= i; i--) {
|
406 | var option = this.optionsToDisplay[i];
|
407 | if (option.disabled) {
|
408 | continue;
|
409 | }
|
410 | else {
|
411 | prevEnabledOption = option;
|
412 | break;
|
413 | }
|
414 | }
|
415 | if (!prevEnabledOption) {
|
416 | for (var i = this.optionsToDisplay.length - 1; i >= index; i--) {
|
417 | var option = this.optionsToDisplay[i];
|
418 | if (option.disabled) {
|
419 | continue;
|
420 | }
|
421 | else {
|
422 | prevEnabledOption = option;
|
423 | break;
|
424 | }
|
425 | }
|
426 | }
|
427 | }
|
428 | return prevEnabledOption;
|
429 | };
|
430 | Dropdown.prototype.findNextEnabledOption = function (index) {
|
431 | var nextEnabledOption;
|
432 | if (this.optionsToDisplay && this.optionsToDisplay.length) {
|
433 | for (var i = (index + 1); index < (this.optionsToDisplay.length - 1); i++) {
|
434 | var option = this.optionsToDisplay[i];
|
435 | if (option.disabled) {
|
436 | continue;
|
437 | }
|
438 | else {
|
439 | nextEnabledOption = option;
|
440 | break;
|
441 | }
|
442 | }
|
443 | if (!nextEnabledOption) {
|
444 | for (var i = 0; i < index; i++) {
|
445 | var option = this.optionsToDisplay[i];
|
446 | if (option.disabled) {
|
447 | continue;
|
448 | }
|
449 | else {
|
450 | nextEnabledOption = option;
|
451 | break;
|
452 | }
|
453 | }
|
454 | }
|
455 | }
|
456 | return nextEnabledOption;
|
457 | };
|
458 | Dropdown.prototype.onKeydown = function (event, search) {
|
459 | if (this.readonly || !this.optionsToDisplay || this.optionsToDisplay.length === null) {
|
460 | return;
|
461 | }
|
462 | switch (event.which) {
|
463 |
|
464 | case 40:
|
465 | if (!this.overlayVisible && event.altKey) {
|
466 | this.show();
|
467 | }
|
468 | else {
|
469 | if (this.group) {
|
470 | var selectedItemIndex = this.selectedOption ? this.findOptionGroupIndex(this.selectedOption.value, this.optionsToDisplay) : -1;
|
471 | if (selectedItemIndex !== -1) {
|
472 | var nextItemIndex = selectedItemIndex.itemIndex + 1;
|
473 | if (nextItemIndex < (this.optionsToDisplay[selectedItemIndex.groupIndex].items.length)) {
|
474 | this.selectItem(event, this.optionsToDisplay[selectedItemIndex.groupIndex].items[nextItemIndex]);
|
475 | this.selectedOptionUpdated = true;
|
476 | }
|
477 | else if (this.optionsToDisplay[selectedItemIndex.groupIndex + 1]) {
|
478 | this.selectItem(event, this.optionsToDisplay[selectedItemIndex.groupIndex + 1].items[0]);
|
479 | this.selectedOptionUpdated = true;
|
480 | }
|
481 | }
|
482 | else {
|
483 | this.selectItem(event, this.optionsToDisplay[0].items[0]);
|
484 | }
|
485 | }
|
486 | else {
|
487 | var selectedItemIndex = this.selectedOption ? this.findOptionIndex(this.selectedOption.value, this.optionsToDisplay) : -1;
|
488 | var nextEnabledOption = this.findNextEnabledOption(selectedItemIndex);
|
489 | if (nextEnabledOption) {
|
490 | this.selectItem(event, nextEnabledOption);
|
491 | this.selectedOptionUpdated = true;
|
492 | }
|
493 | }
|
494 | }
|
495 | event.preventDefault();
|
496 | break;
|
497 |
|
498 | case 38:
|
499 | if (this.group) {
|
500 | var selectedItemIndex = this.selectedOption ? this.findOptionGroupIndex(this.selectedOption.value, this.optionsToDisplay) : -1;
|
501 | if (selectedItemIndex !== -1) {
|
502 | var prevItemIndex = selectedItemIndex.itemIndex - 1;
|
503 | if (prevItemIndex >= 0) {
|
504 | this.selectItem(event, this.optionsToDisplay[selectedItemIndex.groupIndex].items[prevItemIndex]);
|
505 | this.selectedOptionUpdated = true;
|
506 | }
|
507 | else if (prevItemIndex < 0) {
|
508 | var prevGroup = this.optionsToDisplay[selectedItemIndex.groupIndex - 1];
|
509 | if (prevGroup) {
|
510 | this.selectItem(event, prevGroup.items[prevGroup.items.length - 1]);
|
511 | this.selectedOptionUpdated = true;
|
512 | }
|
513 | }
|
514 | }
|
515 | }
|
516 | else {
|
517 | var selectedItemIndex = this.selectedOption ? this.findOptionIndex(this.selectedOption.value, this.optionsToDisplay) : -1;
|
518 | var prevEnabledOption = this.findPrevEnabledOption(selectedItemIndex);
|
519 | if (prevEnabledOption) {
|
520 | this.selectItem(event, prevEnabledOption);
|
521 | this.selectedOptionUpdated = true;
|
522 | }
|
523 | }
|
524 | event.preventDefault();
|
525 | break;
|
526 |
|
527 | case 32:
|
528 | case 32:
|
529 | if (!this.overlayVisible) {
|
530 | this.show();
|
531 | event.preventDefault();
|
532 | }
|
533 | break;
|
534 |
|
535 | case 13:
|
536 | if (!this.filter || (this.optionsToDisplay && this.optionsToDisplay.length > 0)) {
|
537 | this.hide(event);
|
538 | }
|
539 | event.preventDefault();
|
540 | break;
|
541 |
|
542 | case 27:
|
543 | case 9:
|
544 | this.hide(event);
|
545 | break;
|
546 |
|
547 | default:
|
548 | if (search) {
|
549 | this.search(event);
|
550 | }
|
551 | break;
|
552 | }
|
553 | };
|
554 | Dropdown.prototype.search = function (event) {
|
555 | var _this = this;
|
556 | if (this.searchTimeout) {
|
557 | clearTimeout(this.searchTimeout);
|
558 | }
|
559 | var char = event.key;
|
560 | this.previousSearchChar = this.currentSearchChar;
|
561 | this.currentSearchChar = char;
|
562 | if (this.previousSearchChar === this.currentSearchChar)
|
563 | this.searchValue = this.currentSearchChar;
|
564 | else
|
565 | this.searchValue = this.searchValue ? this.searchValue + char : char;
|
566 | var newOption;
|
567 | if (this.group) {
|
568 | var searchIndex = this.selectedOption ? this.findOptionGroupIndex(this.selectedOption.value, this.optionsToDisplay) : { groupIndex: 0, itemIndex: 0 };
|
569 | newOption = this.searchOptionWithinGroup(searchIndex);
|
570 | }
|
571 | else {
|
572 | var searchIndex = this.selectedOption ? this.findOptionIndex(this.selectedOption.value, this.optionsToDisplay) : -1;
|
573 | newOption = this.searchOption(++searchIndex);
|
574 | }
|
575 | if (newOption && !newOption.disabled) {
|
576 | this.selectItem(event, newOption);
|
577 | this.selectedOptionUpdated = true;
|
578 | }
|
579 | this.searchTimeout = setTimeout(function () {
|
580 | _this.searchValue = null;
|
581 | }, 250);
|
582 | };
|
583 | Dropdown.prototype.searchOption = function (index) {
|
584 | var option;
|
585 | if (this.searchValue) {
|
586 | option = this.searchOptionInRange(index, this.optionsToDisplay.length);
|
587 | if (!option) {
|
588 | option = this.searchOptionInRange(0, index);
|
589 | }
|
590 | }
|
591 | return option;
|
592 | };
|
593 | Dropdown.prototype.searchOptionInRange = function (start, end) {
|
594 | for (var i = start; i < end; i++) {
|
595 | var opt = this.optionsToDisplay[i];
|
596 | if (opt.label.toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale)) && !opt.disabled) {
|
597 | return opt;
|
598 | }
|
599 | }
|
600 | return null;
|
601 | };
|
602 | Dropdown.prototype.searchOptionWithinGroup = function (index) {
|
603 | var option;
|
604 | if (this.searchValue) {
|
605 | for (var i = index.groupIndex; i < this.optionsToDisplay.length; i++) {
|
606 | for (var j = (index.groupIndex === i) ? (index.itemIndex + 1) : 0; j < this.optionsToDisplay[i].items.length; j++) {
|
607 | var opt = this.optionsToDisplay[i].items[j];
|
608 | if (opt.label.toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale)) && !opt.disabled) {
|
609 | return opt;
|
610 | }
|
611 | }
|
612 | }
|
613 | if (!option) {
|
614 | for (var i = 0; i <= index.groupIndex; i++) {
|
615 | for (var j = 0; j < ((index.groupIndex === i) ? index.itemIndex : this.optionsToDisplay[i].items.length); j++) {
|
616 | var opt = this.optionsToDisplay[i].items[j];
|
617 | if (opt.label.toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale)) && !opt.disabled) {
|
618 | return opt;
|
619 | }
|
620 | }
|
621 | }
|
622 | }
|
623 | }
|
624 | return null;
|
625 | };
|
626 | Dropdown.prototype.findOptionIndex = function (val, opts) {
|
627 | var index = -1;
|
628 | if (opts) {
|
629 | for (var i = 0; i < opts.length; i++) {
|
630 | if ((val == null && opts[i].value == null) || utils.ObjectUtils.equals(val, opts[i].value, this.dataKey)) {
|
631 | index = i;
|
632 | break;
|
633 | }
|
634 | }
|
635 | }
|
636 | return index;
|
637 | };
|
638 | Dropdown.prototype.findOptionGroupIndex = function (val, opts) {
|
639 | var groupIndex, itemIndex;
|
640 | if (opts) {
|
641 | for (var i = 0; i < opts.length; i++) {
|
642 | groupIndex = i;
|
643 | itemIndex = this.findOptionIndex(val, opts[i].items);
|
644 | if (itemIndex !== -1) {
|
645 | break;
|
646 | }
|
647 | }
|
648 | }
|
649 | if (itemIndex !== -1) {
|
650 | return { groupIndex: groupIndex, itemIndex: itemIndex };
|
651 | }
|
652 | else {
|
653 | return -1;
|
654 | }
|
655 | };
|
656 | Dropdown.prototype.findOption = function (val, opts, inGroup) {
|
657 | var e_1, _a;
|
658 | if (this.group && !inGroup) {
|
659 | var opt = void 0;
|
660 | if (opts && opts.length) {
|
661 | try {
|
662 | for (var opts_1 = __values(opts), opts_1_1 = opts_1.next(); !opts_1_1.done; opts_1_1 = opts_1.next()) {
|
663 | var optgroup = opts_1_1.value;
|
664 | opt = this.findOption(val, optgroup.items, true);
|
665 | if (opt) {
|
666 | break;
|
667 | }
|
668 | }
|
669 | }
|
670 | catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
671 | finally {
|
672 | try {
|
673 | if (opts_1_1 && !opts_1_1.done && (_a = opts_1.return)) _a.call(opts_1);
|
674 | }
|
675 | finally { if (e_1) throw e_1.error; }
|
676 | }
|
677 | }
|
678 | return opt;
|
679 | }
|
680 | else {
|
681 | var index = this.findOptionIndex(val, opts);
|
682 | return (index != -1) ? opts[index] : null;
|
683 | }
|
684 | };
|
685 | Dropdown.prototype.onFilter = function (event) {
|
686 | var inputValue = event.target.value;
|
687 | if (inputValue && inputValue.length) {
|
688 | this.filterValue = inputValue;
|
689 | this.activateFilter();
|
690 | }
|
691 | else {
|
692 | this.filterValue = null;
|
693 | this.optionsToDisplay = this.options;
|
694 | }
|
695 | this.optionsChanged = true;
|
696 | };
|
697 | Dropdown.prototype.activateFilter = function () {
|
698 | var e_2, _a;
|
699 | var searchFields = this.filterBy.split(',');
|
700 | if (this.options && this.options.length) {
|
701 | if (this.group) {
|
702 | var filteredGroups = [];
|
703 | try {
|
704 | for (var _b = __values(this.options), _c = _b.next(); !_c.done; _c = _b.next()) {
|
705 | var optgroup = _c.value;
|
706 | var filteredSubOptions = utils.FilterUtils.filter(optgroup.items, searchFields, this.filterValue, this.filterMatchMode, this.filterLocale);
|
707 | if (filteredSubOptions && filteredSubOptions.length) {
|
708 | filteredGroups.push({
|
709 | label: optgroup.label,
|
710 | value: optgroup.value,
|
711 | items: filteredSubOptions
|
712 | });
|
713 | }
|
714 | }
|
715 | }
|
716 | catch (e_2_1) { e_2 = { error: e_2_1 }; }
|
717 | finally {
|
718 | try {
|
719 | if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
|
720 | }
|
721 | finally { if (e_2) throw e_2.error; }
|
722 | }
|
723 | this.optionsToDisplay = filteredGroups;
|
724 | }
|
725 | else {
|
726 | this.optionsToDisplay = utils.FilterUtils.filter(this.options, searchFields, this.filterValue, this.filterMatchMode, this.filterLocale);
|
727 | }
|
728 | this.optionsChanged = true;
|
729 | }
|
730 | };
|
731 | Dropdown.prototype.applyFocus = function () {
|
732 | if (this.editable)
|
733 | dom.DomHandler.findSingle(this.el.nativeElement, '.ui-dropdown-label.ui-inputtext').focus();
|
734 | else
|
735 | dom.DomHandler.findSingle(this.el.nativeElement, 'input[readonly]').focus();
|
736 | };
|
737 | Dropdown.prototype.focus = function () {
|
738 | this.applyFocus();
|
739 | };
|
740 | Dropdown.prototype.bindDocumentClickListener = function () {
|
741 | var _this = this;
|
742 | if (!this.documentClickListener) {
|
743 | this.documentClickListener = this.renderer.listen('document', 'click', function (event) {
|
744 | if (!_this.selfClick && !_this.itemClick) {
|
745 | _this.hide(event);
|
746 | _this.unbindDocumentClickListener();
|
747 | }
|
748 | _this.clearClickState();
|
749 | _this.cd.markForCheck();
|
750 | });
|
751 | }
|
752 | };
|
753 | Dropdown.prototype.clearClickState = function () {
|
754 | this.selfClick = false;
|
755 | this.itemClick = false;
|
756 | };
|
757 | Dropdown.prototype.unbindDocumentClickListener = function () {
|
758 | if (this.documentClickListener) {
|
759 | this.documentClickListener();
|
760 | this.documentClickListener = null;
|
761 | }
|
762 | };
|
763 | Dropdown.prototype.bindDocumentResizeListener = function () {
|
764 | this.documentResizeListener = this.onWindowResize.bind(this);
|
765 | window.addEventListener('resize', this.documentResizeListener);
|
766 | };
|
767 | Dropdown.prototype.unbindDocumentResizeListener = function () {
|
768 | if (this.documentResizeListener) {
|
769 | window.removeEventListener('resize', this.documentResizeListener);
|
770 | this.documentResizeListener = null;
|
771 | }
|
772 | };
|
773 | Dropdown.prototype.onWindowResize = function () {
|
774 | if (!dom.DomHandler.isAndroid()) {
|
775 | this.hide(event);
|
776 | }
|
777 | };
|
778 | Dropdown.prototype.updateFilledState = function () {
|
779 | this.filled = (this.selectedOption != null);
|
780 | };
|
781 | Dropdown.prototype.clear = function (event) {
|
782 | this.clearClick = true;
|
783 | this.value = null;
|
784 | this.onModelChange(this.value);
|
785 | this.onChange.emit({
|
786 | originalEvent: event,
|
787 | value: this.value
|
788 | });
|
789 | this.updateSelectedOption(this.value);
|
790 | this.updateEditableLabel();
|
791 | this.updateFilledState();
|
792 | };
|
793 | Dropdown.prototype.onOverlayHide = function () {
|
794 | this.unbindDocumentClickListener();
|
795 | this.unbindDocumentResizeListener();
|
796 | this.overlay = null;
|
797 | this.itemsWrapper = null;
|
798 | this.onModelTouched();
|
799 | };
|
800 | Dropdown.prototype.ngOnDestroy = function () {
|
801 | this.restoreOverlayAppend();
|
802 | this.onOverlayHide();
|
803 | };
|
804 | Dropdown.ctorParameters = function () { return [
|
805 | { type: core.ElementRef },
|
806 | { type: core.Renderer2 },
|
807 | { type: core.ChangeDetectorRef },
|
808 | { type: core.NgZone }
|
809 | ]; };
|
810 | __decorate([
|
811 | core.Input()
|
812 | ], Dropdown.prototype, "scrollHeight", void 0);
|
813 | __decorate([
|
814 | core.Input()
|
815 | ], Dropdown.prototype, "filter", void 0);
|
816 | __decorate([
|
817 | core.Input()
|
818 | ], Dropdown.prototype, "name", void 0);
|
819 | __decorate([
|
820 | core.Input()
|
821 | ], Dropdown.prototype, "style", void 0);
|
822 | __decorate([
|
823 | core.Input()
|
824 | ], Dropdown.prototype, "panelStyle", void 0);
|
825 | __decorate([
|
826 | core.Input()
|
827 | ], Dropdown.prototype, "styleClass", void 0);
|
828 | __decorate([
|
829 | core.Input()
|
830 | ], Dropdown.prototype, "panelStyleClass", void 0);
|
831 | __decorate([
|
832 | core.Input()
|
833 | ], Dropdown.prototype, "readonly", void 0);
|
834 | __decorate([
|
835 | core.Input()
|
836 | ], Dropdown.prototype, "required", void 0);
|
837 | __decorate([
|
838 | core.Input()
|
839 | ], Dropdown.prototype, "editable", void 0);
|
840 | __decorate([
|
841 | core.Input()
|
842 | ], Dropdown.prototype, "appendTo", void 0);
|
843 | __decorate([
|
844 | core.Input()
|
845 | ], Dropdown.prototype, "tabindex", void 0);
|
846 | __decorate([
|
847 | core.Input()
|
848 | ], Dropdown.prototype, "placeholder", void 0);
|
849 | __decorate([
|
850 | core.Input()
|
851 | ], Dropdown.prototype, "filterPlaceholder", void 0);
|
852 | __decorate([
|
853 | core.Input()
|
854 | ], Dropdown.prototype, "filterLocale", void 0);
|
855 | __decorate([
|
856 | core.Input()
|
857 | ], Dropdown.prototype, "inputId", void 0);
|
858 | __decorate([
|
859 | core.Input()
|
860 | ], Dropdown.prototype, "selectId", void 0);
|
861 | __decorate([
|
862 | core.Input()
|
863 | ], Dropdown.prototype, "dataKey", void 0);
|
864 | __decorate([
|
865 | core.Input()
|
866 | ], Dropdown.prototype, "filterBy", void 0);
|
867 | __decorate([
|
868 | core.Input()
|
869 | ], Dropdown.prototype, "autofocus", void 0);
|
870 | __decorate([
|
871 | core.Input()
|
872 | ], Dropdown.prototype, "resetFilterOnHide", void 0);
|
873 | __decorate([
|
874 | core.Input()
|
875 | ], Dropdown.prototype, "dropdownIcon", void 0);
|
876 | __decorate([
|
877 | core.Input()
|
878 | ], Dropdown.prototype, "optionLabel", void 0);
|
879 | __decorate([
|
880 | core.Input()
|
881 | ], Dropdown.prototype, "autoDisplayFirst", void 0);
|
882 | __decorate([
|
883 | core.Input()
|
884 | ], Dropdown.prototype, "group", void 0);
|
885 | __decorate([
|
886 | core.Input()
|
887 | ], Dropdown.prototype, "showClear", void 0);
|
888 | __decorate([
|
889 | core.Input()
|
890 | ], Dropdown.prototype, "emptyFilterMessage", void 0);
|
891 | __decorate([
|
892 | core.Input()
|
893 | ], Dropdown.prototype, "virtualScroll", void 0);
|
894 | __decorate([
|
895 | core.Input()
|
896 | ], Dropdown.prototype, "itemSize", void 0);
|
897 | __decorate([
|
898 | core.Input()
|
899 | ], Dropdown.prototype, "autoZIndex", void 0);
|
900 | __decorate([
|
901 | core.Input()
|
902 | ], Dropdown.prototype, "baseZIndex", void 0);
|
903 | __decorate([
|
904 | core.Input()
|
905 | ], Dropdown.prototype, "showTransitionOptions", void 0);
|
906 | __decorate([
|
907 | core.Input()
|
908 | ], Dropdown.prototype, "hideTransitionOptions", void 0);
|
909 | __decorate([
|
910 | core.Input()
|
911 | ], Dropdown.prototype, "ariaFilterLabel", void 0);
|
912 | __decorate([
|
913 | core.Input()
|
914 | ], Dropdown.prototype, "ariaLabelledBy", void 0);
|
915 | __decorate([
|
916 | core.Input()
|
917 | ], Dropdown.prototype, "filterMatchMode", void 0);
|
918 | __decorate([
|
919 | core.Input()
|
920 | ], Dropdown.prototype, "maxlength", void 0);
|
921 | __decorate([
|
922 | core.Input()
|
923 | ], Dropdown.prototype, "tooltip", void 0);
|
924 | __decorate([
|
925 | core.Input()
|
926 | ], Dropdown.prototype, "tooltipPosition", void 0);
|
927 | __decorate([
|
928 | core.Input()
|
929 | ], Dropdown.prototype, "tooltipPositionStyle", void 0);
|
930 | __decorate([
|
931 | core.Input()
|
932 | ], Dropdown.prototype, "tooltipStyleClass", void 0);
|
933 | __decorate([
|
934 | core.Input()
|
935 | ], Dropdown.prototype, "autofocusFilter", void 0);
|
936 | __decorate([
|
937 | core.Output()
|
938 | ], Dropdown.prototype, "onChange", void 0);
|
939 | __decorate([
|
940 | core.Output()
|
941 | ], Dropdown.prototype, "onFocus", void 0);
|
942 | __decorate([
|
943 | core.Output()
|
944 | ], Dropdown.prototype, "onBlur", void 0);
|
945 | __decorate([
|
946 | core.Output()
|
947 | ], Dropdown.prototype, "onClick", void 0);
|
948 | __decorate([
|
949 | core.Output()
|
950 | ], Dropdown.prototype, "onShow", void 0);
|
951 | __decorate([
|
952 | core.Output()
|
953 | ], Dropdown.prototype, "onHide", void 0);
|
954 | __decorate([
|
955 | core.ViewChild('container')
|
956 | ], Dropdown.prototype, "containerViewChild", void 0);
|
957 | __decorate([
|
958 | core.ViewChild('filter')
|
959 | ], Dropdown.prototype, "filterViewChild", void 0);
|
960 | __decorate([
|
961 | core.ViewChild('in')
|
962 | ], Dropdown.prototype, "focusViewChild", void 0);
|
963 | __decorate([
|
964 | core.ViewChild(scrolling.CdkVirtualScrollViewport)
|
965 | ], Dropdown.prototype, "viewPort", void 0);
|
966 | __decorate([
|
967 | core.ViewChild('editableInput')
|
968 | ], Dropdown.prototype, "editableInputViewChild", void 0);
|
969 | __decorate([
|
970 | core.ContentChildren(api.PrimeTemplate)
|
971 | ], Dropdown.prototype, "templates", void 0);
|
972 | __decorate([
|
973 | core.Input()
|
974 | ], Dropdown.prototype, "disabled", null);
|
975 | __decorate([
|
976 | core.Input()
|
977 | ], Dropdown.prototype, "options", null);
|
978 | Dropdown = __decorate([
|
979 | core.Component({
|
980 | selector: 'p-dropdown',
|
981 | template: "\n <div #container [ngClass]=\"{'ui-dropdown ui-widget ui-state-default ui-corner-all':true,\n 'ui-state-disabled':disabled, 'ui-dropdown-open':overlayVisible, 'ui-state-focus':focused, 'ui-dropdown-clearable': showClear && !disabled}\"\n (click)=\"onMouseclick($event)\" [ngStyle]=\"style\" [class]=\"styleClass\">\n <div class=\"ui-helper-hidden-accessible\">\n <input #in [attr.id]=\"inputId\" type=\"text\" [attr.aria-label]=\"selectedOption ? selectedOption.label : ' '\" readonly (focus)=\"onInputFocus($event)\" aria-haspopup=\"listbox\"\n aria-haspopup=\"listbox\" [attr.aria-expanded]=\"overlayVisible\" [attr.aria-labelledby]=\"ariaLabelledBy\" (blur)=\"onInputBlur($event)\" (keydown)=\"onKeydown($event, true)\"\n [disabled]=\"disabled\" [attr.tabindex]=\"tabindex\" [attr.autofocus]=\"autofocus\" role=\"listbox\">\n </div>\n <div class=\"ui-dropdown-label-container\" [pTooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition\" [positionStyle]=\"tooltipPositionStyle\" [tooltipStyleClass]=\"tooltipStyleClass\">\n <label [ngClass]=\"{'ui-dropdown-label ui-inputtext ui-corner-all':true,'ui-dropdown-label-empty':(label == null || label.length === 0)}\" *ngIf=\"!editable && (label != null)\">\n <ng-container *ngIf=\"!selectedItemTemplate\">{{label||'empty'}}</ng-container>\n <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: {$implicit: selectedOption}\"></ng-container>\n </label>\n <label [ngClass]=\"{'ui-dropdown-label ui-inputtext ui-corner-all ui-placeholder':true,'ui-dropdown-label-empty': (placeholder == null || placeholder.length === 0)}\" *ngIf=\"!editable && (label == null)\">{{placeholder||'empty'}}</label>\n <input #editableInput type=\"text\" [attr.maxlength]=\"maxlength\" [attr.aria-label]=\"selectedOption ? selectedOption.label : ' '\" class=\"ui-dropdown-label ui-inputtext ui-corner-all\" *ngIf=\"editable\" [disabled]=\"disabled\" [attr.placeholder]=\"placeholder\"\n aria-haspopup=\"listbox\" [attr.aria-expanded]=\"overlayVisible\" (click)=\"onEditableInputClick($event)\" (input)=\"onEditableInputChange($event)\" (focus)=\"onEditableInputFocus($event)\" (blur)=\"onInputBlur($event)\">\n <i class=\"ui-dropdown-clear-icon pi pi-times\" (click)=\"clear($event)\" *ngIf=\"value != null && showClear && !disabled\"></i>\n </div>\n <div class=\"ui-dropdown-trigger ui-state-default ui-corner-right\" role=\"button\" aria-haspopup=\"listbox\" [attr.aria-expanded]=\"overlayVisible\">\n <span class=\"ui-dropdown-trigger-icon ui-clickable\" [ngClass]=\"dropdownIcon\"></span>\n </div>\n <div *ngIf=\"overlayVisible\" [ngClass]=\"'ui-dropdown-panel ui-widget ui-widget-content ui-corner-all ui-shadow'\" [@overlayAnimation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" [ngStyle]=\"panelStyle\" [class]=\"panelStyleClass\">\n <div *ngIf=\"filter\" class=\"ui-dropdown-filter-container\" (click)=\"$event.stopPropagation()\">\n <input #filter type=\"text\" autocomplete=\"off\" [value]=\"filterValue||''\" class=\"ui-dropdown-filter ui-inputtext ui-widget ui-state-default ui-corner-all\" [attr.placeholder]=\"filterPlaceholder\"\n (keydown.enter)=\"$event.preventDefault()\" (keydown)=\"onKeydown($event, false)\" (input)=\"onFilter($event)\" [attr.aria-label]=\"ariaFilterLabel\">\n <span class=\"ui-dropdown-filter-icon pi pi-search\"></span>\n </div>\n <div class=\"ui-dropdown-items-wrapper\" [style.max-height]=\"virtualScroll ? 'auto' : (scrollHeight||'auto')\">\n <ul class=\"ui-dropdown-items ui-dropdown-list ui-widget-content ui-widget ui-corner-all ui-helper-reset\" role=\"listbox\">\n <ng-container *ngIf=\"group\">\n <ng-template ngFor let-optgroup [ngForOf]=\"optionsToDisplay\">\n <li class=\"ui-dropdown-item-group\">\n <span *ngIf=\"!groupTemplate\">{{optgroup.label||'empty'}}</span>\n <ng-container *ngTemplateOutlet=\"groupTemplate; context: {$implicit: optgroup}\"></ng-container>\n </li>\n <ng-container *ngTemplateOutlet=\"itemslist; context: {$implicit: optgroup.items, selectedOption: selectedOption}\"></ng-container>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"!group\">\n <ng-container *ngTemplateOutlet=\"itemslist; context: {$implicit: optionsToDisplay, selectedOption: selectedOption}\"></ng-container>\n </ng-container>\n <ng-template #itemslist let-options let-selectedOption=\"selectedOption\">\n\n <ng-container *ngIf=\"!virtualScroll; else virtualScrollList\">\n <ng-template ngFor let-option let-i=\"index\" [ngForOf]=\"options\">\n <p-dropdownItem [option]=\"option\" [selected]=\"selectedOption == option\"\n (onClick)=\"onItemClick($event)\"\n [template]=\"itemTemplate\"></p-dropdownItem>\n </ng-template>\n </ng-container>\n <ng-template #virtualScrollList>\n <cdk-virtual-scroll-viewport (scrolledIndexChange)=\"scrollToSelectedVirtualScrollElement()\" #viewport [ngStyle]=\"{'height': scrollHeight}\" [itemSize]=\"itemSize\" *ngIf=\"virtualScroll && optionsToDisplay && optionsToDisplay.length\">\n <ng-container *cdkVirtualFor=\"let option of options; let i = index; let c = count; let f = first; let l = last; let e = even; let o = odd\">\n <p-dropdownItem [option]=\"option\" [selected]=\"selectedOption == option\"\n (onClick)=\"onItemClick($event)\"\n [template]=\"itemTemplate\"></p-dropdownItem>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n </ng-template>\n </ng-template>\n <li *ngIf=\"filter && (!optionsToDisplay || (optionsToDisplay && optionsToDisplay.length === 0))\" class=\"ui-dropdown-empty-message\">{{emptyFilterMessage}}</li>\n </ul>\n </div>\n </div>\n </div>\n ",
|
982 | animations: [
|
983 | animations.trigger('overlayAnimation', [
|
984 | animations.state('void', animations.style({
|
985 | transform: 'translateY(5%)',
|
986 | opacity: 0
|
987 | })),
|
988 | animations.state('visible', animations.style({
|
989 | transform: 'translateY(0)',
|
990 | opacity: 1
|
991 | })),
|
992 | animations.transition('void => visible', animations.animate('{{showTransitionParams}}')),
|
993 | animations.transition('visible => void', animations.animate('{{hideTransitionParams}}'))
|
994 | ])
|
995 | ],
|
996 | host: {
|
997 | '[class.ui-inputwrapper-filled]': 'filled',
|
998 | '[class.ui-inputwrapper-focus]': 'focused'
|
999 | },
|
1000 | providers: [DROPDOWN_VALUE_ACCESSOR],
|
1001 | changeDetection: core.ChangeDetectionStrategy.Default
|
1002 | })
|
1003 | ], Dropdown);
|
1004 | return Dropdown;
|
1005 | }());
|
1006 | var DropdownModule = (function () {
|
1007 | function DropdownModule() {
|
1008 | }
|
1009 | DropdownModule = __decorate([
|
1010 | core.NgModule({
|
1011 | imports: [common.CommonModule, api.SharedModule, scrolling.ScrollingModule, tooltip.TooltipModule],
|
1012 | exports: [Dropdown, api.SharedModule, scrolling.ScrollingModule],
|
1013 | declarations: [Dropdown, DropdownItem]
|
1014 | })
|
1015 | ], DropdownModule);
|
1016 | return DropdownModule;
|
1017 | }());
|
1018 |
|
1019 | exports.DROPDOWN_VALUE_ACCESSOR = DROPDOWN_VALUE_ACCESSOR;
|
1020 | exports.Dropdown = Dropdown;
|
1021 | exports.DropdownItem = DropdownItem;
|
1022 | exports.DropdownModule = DropdownModule;
|
1023 |
|
1024 | Object.defineProperty(exports, '__esModule', { value: true });
|
1025 |
|
1026 | })));
|
1027 |
|