1 | (function (global, factory) {
|
2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('primeng/button'), require('primeng/api'), require('primeng/dom'), require('primeng/utils')) :
|
3 | typeof define === 'function' && define.amd ? define('primeng/picklist', ['exports', '@angular/core', '@angular/common', 'primeng/button', 'primeng/api', 'primeng/dom', 'primeng/utils'], factory) :
|
4 | (global = global || self, factory((global.primeng = global.primeng || {}, global.primeng.picklist = {}), global.ng.core, global.ng.common, global.primeng.button, global.primeng.api, global.primeng.dom, global.primeng.utils));
|
5 | }(this, (function (exports, core, common, button, api, dom, utils) { '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 PickList = (function () {
|
14 | function PickList(el) {
|
15 | this.el = el;
|
16 | this.trackBy = function (index, item) { return item; };
|
17 | this.showSourceFilter = true;
|
18 | this.showTargetFilter = true;
|
19 | this.metaKeySelection = true;
|
20 | this.showSourceControls = true;
|
21 | this.showTargetControls = true;
|
22 | this.disabled = false;
|
23 | this.filterMatchMode = "contains";
|
24 | this.onMoveToSource = new core.EventEmitter();
|
25 | this.onMoveAllToSource = new core.EventEmitter();
|
26 | this.onMoveAllToTarget = new core.EventEmitter();
|
27 | this.onMoveToTarget = new core.EventEmitter();
|
28 | this.onSourceReorder = new core.EventEmitter();
|
29 | this.onTargetReorder = new core.EventEmitter();
|
30 | this.onSourceSelect = new core.EventEmitter();
|
31 | this.onTargetSelect = new core.EventEmitter();
|
32 | this.onSourceFilter = new core.EventEmitter();
|
33 | this.onTargetFilter = new core.EventEmitter();
|
34 | this.selectedItemsSource = [];
|
35 | this.selectedItemsTarget = [];
|
36 | this.SOURCE_LIST = -1;
|
37 | this.TARGET_LIST = 1;
|
38 | }
|
39 | PickList.prototype.ngAfterContentInit = function () {
|
40 | var _this = this;
|
41 | this.templates.forEach(function (item) {
|
42 | switch (item.getType()) {
|
43 | case 'item':
|
44 | _this.itemTemplate = item.template;
|
45 | break;
|
46 | case 'emptymessagesource':
|
47 | _this.emptyMessageSourceTemplate = item.template;
|
48 | break;
|
49 | case 'emptymessagetarget':
|
50 | _this.emptyMessageTargetTemplate = item.template;
|
51 | break;
|
52 | default:
|
53 | _this.itemTemplate = item.template;
|
54 | break;
|
55 | }
|
56 | });
|
57 | };
|
58 | PickList.prototype.ngAfterViewChecked = function () {
|
59 | if (this.movedUp || this.movedDown) {
|
60 | var listItems = dom.DomHandler.find(this.reorderedListElement, 'li.ui-state-highlight');
|
61 | var listItem = void 0;
|
62 | if (this.movedUp)
|
63 | listItem = listItems[0];
|
64 | else
|
65 | listItem = listItems[listItems.length - 1];
|
66 | dom.DomHandler.scrollInView(this.reorderedListElement, listItem);
|
67 | this.movedUp = false;
|
68 | this.movedDown = false;
|
69 | this.reorderedListElement = null;
|
70 | }
|
71 | };
|
72 | PickList.prototype.onItemClick = function (event, item, selectedItems, callback) {
|
73 | if (this.disabled) {
|
74 | return;
|
75 | }
|
76 | var index = this.findIndexInSelection(item, selectedItems);
|
77 | var selected = (index != -1);
|
78 | var metaSelection = this.itemTouched ? false : this.metaKeySelection;
|
79 | if (metaSelection) {
|
80 | var metaKey = (event.metaKey || event.ctrlKey || event.shiftKey);
|
81 | if (selected && metaKey) {
|
82 | selectedItems.splice(index, 1);
|
83 | }
|
84 | else {
|
85 | if (!metaKey) {
|
86 | selectedItems.length = 0;
|
87 | }
|
88 | selectedItems.push(item);
|
89 | }
|
90 | }
|
91 | else {
|
92 | if (selected)
|
93 | selectedItems.splice(index, 1);
|
94 | else
|
95 | selectedItems.push(item);
|
96 | }
|
97 | callback.emit({ originalEvent: event, items: selectedItems });
|
98 | this.itemTouched = false;
|
99 | };
|
100 | PickList.prototype.onSourceItemDblClick = function () {
|
101 | if (this.disabled) {
|
102 | return;
|
103 | }
|
104 | this.moveRight();
|
105 | };
|
106 | PickList.prototype.onTargetItemDblClick = function () {
|
107 | if (this.disabled) {
|
108 | return;
|
109 | }
|
110 | this.moveLeft();
|
111 | };
|
112 | PickList.prototype.onFilter = function (event, data, listType) {
|
113 | var query = event.target.value.trim().toLocaleLowerCase(this.filterLocale);
|
114 | this.filter(query, data, listType);
|
115 | };
|
116 | PickList.prototype.filter = function (query, data, listType) {
|
117 | var searchFields = this.filterBy.split(',');
|
118 | if (listType === this.SOURCE_LIST) {
|
119 | this.filterValueSource = query;
|
120 | this.visibleOptionsSource = utils.FilterUtils.filter(data, searchFields, this.filterValueSource, this.filterMatchMode, this.filterLocale);
|
121 | this.onSourceFilter.emit({ query: this.filterValueSource, value: this.visibleOptionsSource });
|
122 | }
|
123 | else if (listType === this.TARGET_LIST) {
|
124 | this.filterValueTarget = query;
|
125 | this.visibleOptionsTarget = utils.FilterUtils.filter(data, searchFields, this.filterValueTarget, this.filterMatchMode, this.filterLocale);
|
126 | this.onTargetFilter.emit({ query: this.filterValueTarget, value: this.visibleOptionsTarget });
|
127 | }
|
128 | };
|
129 | PickList.prototype.isItemVisible = function (item, listType) {
|
130 | if (listType == this.SOURCE_LIST)
|
131 | return this.isVisibleInList(this.visibleOptionsSource, item, this.filterValueSource);
|
132 | else
|
133 | return this.isVisibleInList(this.visibleOptionsTarget, item, this.filterValueTarget);
|
134 | };
|
135 | PickList.prototype.isVisibleInList = function (data, item, filterValue) {
|
136 | if (filterValue && filterValue.trim().length) {
|
137 | for (var i = 0; i < data.length; i++) {
|
138 | if (item == data[i]) {
|
139 | return true;
|
140 | }
|
141 | }
|
142 | }
|
143 | else {
|
144 | return true;
|
145 | }
|
146 | };
|
147 | PickList.prototype.onItemTouchEnd = function (event) {
|
148 | if (this.disabled) {
|
149 | return;
|
150 | }
|
151 | this.itemTouched = true;
|
152 | };
|
153 | PickList.prototype.sortByIndexInList = function (items, list) {
|
154 | var _this = this;
|
155 | return items.sort(function (item1, item2) {
|
156 | return _this.findIndexInList(item1, list) - _this.findIndexInList(item2, list);
|
157 | });
|
158 | };
|
159 | PickList.prototype.moveUp = function (listElement, list, selectedItems, callback) {
|
160 | if (selectedItems && selectedItems.length) {
|
161 | selectedItems = this.sortByIndexInList(selectedItems, list);
|
162 | for (var i = 0; i < selectedItems.length; i++) {
|
163 | var selectedItem = selectedItems[i];
|
164 | var selectedItemIndex = this.findIndexInList(selectedItem, list);
|
165 | if (selectedItemIndex != 0) {
|
166 | var movedItem = list[selectedItemIndex];
|
167 | var temp = list[selectedItemIndex - 1];
|
168 | list[selectedItemIndex - 1] = movedItem;
|
169 | list[selectedItemIndex] = temp;
|
170 | }
|
171 | else {
|
172 | break;
|
173 | }
|
174 | }
|
175 | this.movedUp = true;
|
176 | this.reorderedListElement = listElement;
|
177 | callback.emit({ items: selectedItems });
|
178 | }
|
179 | };
|
180 | PickList.prototype.moveTop = function (listElement, list, selectedItems, callback) {
|
181 | if (selectedItems && selectedItems.length) {
|
182 | selectedItems = this.sortByIndexInList(selectedItems, list);
|
183 | for (var i = 0; i < selectedItems.length; i++) {
|
184 | var selectedItem = selectedItems[i];
|
185 | var selectedItemIndex = this.findIndexInList(selectedItem, list);
|
186 | if (selectedItemIndex != 0) {
|
187 | var movedItem = list.splice(selectedItemIndex, 1)[0];
|
188 | list.unshift(movedItem);
|
189 | }
|
190 | else {
|
191 | break;
|
192 | }
|
193 | }
|
194 | listElement.scrollTop = 0;
|
195 | callback.emit({ items: selectedItems });
|
196 | }
|
197 | };
|
198 | PickList.prototype.moveDown = function (listElement, list, selectedItems, callback) {
|
199 | if (selectedItems && selectedItems.length) {
|
200 | selectedItems = this.sortByIndexInList(selectedItems, list);
|
201 | for (var i = selectedItems.length - 1; i >= 0; i--) {
|
202 | var selectedItem = selectedItems[i];
|
203 | var selectedItemIndex = this.findIndexInList(selectedItem, list);
|
204 | if (selectedItemIndex != (list.length - 1)) {
|
205 | var movedItem = list[selectedItemIndex];
|
206 | var temp = list[selectedItemIndex + 1];
|
207 | list[selectedItemIndex + 1] = movedItem;
|
208 | list[selectedItemIndex] = temp;
|
209 | }
|
210 | else {
|
211 | break;
|
212 | }
|
213 | }
|
214 | this.movedDown = true;
|
215 | this.reorderedListElement = listElement;
|
216 | callback.emit({ items: selectedItems });
|
217 | }
|
218 | };
|
219 | PickList.prototype.moveBottom = function (listElement, list, selectedItems, callback) {
|
220 | if (selectedItems && selectedItems.length) {
|
221 | selectedItems = this.sortByIndexInList(selectedItems, list);
|
222 | for (var i = selectedItems.length - 1; i >= 0; i--) {
|
223 | var selectedItem = selectedItems[i];
|
224 | var selectedItemIndex = this.findIndexInList(selectedItem, list);
|
225 | if (selectedItemIndex != (list.length - 1)) {
|
226 | var movedItem = list.splice(selectedItemIndex, 1)[0];
|
227 | list.push(movedItem);
|
228 | }
|
229 | else {
|
230 | break;
|
231 | }
|
232 | }
|
233 | listElement.scrollTop = listElement.scrollHeight;
|
234 | callback.emit({ items: selectedItems });
|
235 | }
|
236 | };
|
237 | PickList.prototype.moveRight = function () {
|
238 | if (this.selectedItemsSource && this.selectedItemsSource.length) {
|
239 | for (var i = 0; i < this.selectedItemsSource.length; i++) {
|
240 | var selectedItem = this.selectedItemsSource[i];
|
241 | if (this.findIndexInList(selectedItem, this.target) == -1) {
|
242 | this.target.push(this.source.splice(this.findIndexInList(selectedItem, this.source), 1)[0]);
|
243 | }
|
244 | }
|
245 | this.onMoveToTarget.emit({
|
246 | items: this.selectedItemsSource
|
247 | });
|
248 | this.selectedItemsSource = [];
|
249 | if (this.filterValueTarget) {
|
250 | this.filter(this.filterValueTarget, this.target, this.TARGET_LIST);
|
251 | }
|
252 | }
|
253 | };
|
254 | PickList.prototype.moveAllRight = function () {
|
255 | if (this.source) {
|
256 | var movedItems = [];
|
257 | for (var i = 0; i < this.source.length; i++) {
|
258 | if (this.isItemVisible(this.source[i], this.SOURCE_LIST)) {
|
259 | var removedItem = this.source.splice(i, 1)[0];
|
260 | this.target.push(removedItem);
|
261 | movedItems.push(removedItem);
|
262 | i--;
|
263 | }
|
264 | }
|
265 | this.onMoveToTarget.emit({
|
266 | items: movedItems
|
267 | });
|
268 | this.onMoveAllToTarget.emit({
|
269 | items: movedItems
|
270 | });
|
271 | this.selectedItemsSource = [];
|
272 | if (this.filterValueTarget) {
|
273 | this.filter(this.filterValueTarget, this.target, this.TARGET_LIST);
|
274 | }
|
275 | }
|
276 | };
|
277 | PickList.prototype.moveLeft = function () {
|
278 | if (this.selectedItemsTarget && this.selectedItemsTarget.length) {
|
279 | for (var i = 0; i < this.selectedItemsTarget.length; i++) {
|
280 | var selectedItem = this.selectedItemsTarget[i];
|
281 | if (this.findIndexInList(selectedItem, this.source) == -1) {
|
282 | this.source.push(this.target.splice(this.findIndexInList(selectedItem, this.target), 1)[0]);
|
283 | }
|
284 | }
|
285 | this.onMoveToSource.emit({
|
286 | items: this.selectedItemsTarget
|
287 | });
|
288 | this.selectedItemsTarget = [];
|
289 | if (this.filterValueSource) {
|
290 | this.filter(this.filterValueSource, this.source, this.SOURCE_LIST);
|
291 | }
|
292 | }
|
293 | };
|
294 | PickList.prototype.moveAllLeft = function () {
|
295 | if (this.target) {
|
296 | var movedItems = [];
|
297 | for (var i = 0; i < this.target.length; i++) {
|
298 | if (this.isItemVisible(this.target[i], this.TARGET_LIST)) {
|
299 | var removedItem = this.target.splice(i, 1)[0];
|
300 | this.source.push(removedItem);
|
301 | movedItems.push(removedItem);
|
302 | i--;
|
303 | }
|
304 | }
|
305 | this.onMoveToSource.emit({
|
306 | items: movedItems
|
307 | });
|
308 | this.onMoveAllToSource.emit({
|
309 | items: movedItems
|
310 | });
|
311 | this.selectedItemsTarget = [];
|
312 | if (this.filterValueSource) {
|
313 | this.filter(this.filterValueSource, this.source, this.SOURCE_LIST);
|
314 | }
|
315 | }
|
316 | };
|
317 | PickList.prototype.isSelected = function (item, selectedItems) {
|
318 | return this.findIndexInSelection(item, selectedItems) != -1;
|
319 | };
|
320 | PickList.prototype.findIndexInSelection = function (item, selectedItems) {
|
321 | return this.findIndexInList(item, selectedItems);
|
322 | };
|
323 | PickList.prototype.findIndexInList = function (item, list) {
|
324 | var index = -1;
|
325 | if (list) {
|
326 | for (var i = 0; i < list.length; i++) {
|
327 | if (list[i] == item) {
|
328 | index = i;
|
329 | break;
|
330 | }
|
331 | }
|
332 | }
|
333 | return index;
|
334 | };
|
335 | PickList.prototype.onDragStart = function (event, index, listType) {
|
336 | event.dataTransfer.setData('text', 'b');
|
337 | event.target.blur();
|
338 | this.dragging = true;
|
339 | this.fromListType = listType;
|
340 | if (listType === this.SOURCE_LIST)
|
341 | this.draggedItemIndexSource = index;
|
342 | else
|
343 | this.draggedItemIndexTarget = index;
|
344 | };
|
345 | PickList.prototype.onDragOver = function (event, index, listType) {
|
346 | if (this.dragging) {
|
347 | if (listType == this.SOURCE_LIST) {
|
348 | if (this.draggedItemIndexSource !== index && this.draggedItemIndexSource + 1 !== index || (this.fromListType === this.TARGET_LIST)) {
|
349 | this.dragOverItemIndexSource = index;
|
350 | event.preventDefault();
|
351 | }
|
352 | }
|
353 | else {
|
354 | if (this.draggedItemIndexTarget !== index && this.draggedItemIndexTarget + 1 !== index || (this.fromListType === this.SOURCE_LIST)) {
|
355 | this.dragOverItemIndexTarget = index;
|
356 | event.preventDefault();
|
357 | }
|
358 | }
|
359 | this.onListItemDroppoint = true;
|
360 | }
|
361 | };
|
362 | PickList.prototype.onDragLeave = function (event, listType) {
|
363 | this.dragOverItemIndexSource = null;
|
364 | this.dragOverItemIndexTarget = null;
|
365 | this.onListItemDroppoint = false;
|
366 | };
|
367 | PickList.prototype.onDrop = function (event, index, listType) {
|
368 | if (this.onListItemDroppoint) {
|
369 | if (listType === this.SOURCE_LIST) {
|
370 | if (this.fromListType === this.TARGET_LIST) {
|
371 | this.insert(this.draggedItemIndexTarget, this.target, index, this.source, this.onMoveToSource);
|
372 | }
|
373 | else {
|
374 | utils.ObjectUtils.reorderArray(this.source, this.draggedItemIndexSource, (this.draggedItemIndexSource > index) ? index : (index === 0) ? 0 : index - 1);
|
375 | this.onSourceReorder.emit({ items: this.source[this.draggedItemIndexSource] });
|
376 | }
|
377 | this.dragOverItemIndexSource = null;
|
378 | }
|
379 | else {
|
380 | if (this.fromListType === this.SOURCE_LIST) {
|
381 | this.insert(this.draggedItemIndexSource, this.source, index, this.target, this.onMoveToTarget);
|
382 | }
|
383 | else {
|
384 | utils.ObjectUtils.reorderArray(this.target, this.draggedItemIndexTarget, (this.draggedItemIndexTarget > index) ? index : (index === 0) ? 0 : index - 1);
|
385 | this.onTargetReorder.emit({ items: this.target[this.draggedItemIndexTarget] });
|
386 | }
|
387 | this.dragOverItemIndexTarget = null;
|
388 | }
|
389 | this.listHighlightTarget = false;
|
390 | this.listHighlightSource = false;
|
391 | event.preventDefault();
|
392 | }
|
393 | };
|
394 | PickList.prototype.onDragEnd = function (event) {
|
395 | this.dragging = false;
|
396 | };
|
397 | PickList.prototype.onListDrop = function (event, listType) {
|
398 | if (!this.onListItemDroppoint) {
|
399 | if (listType === this.SOURCE_LIST) {
|
400 | if (this.fromListType === this.TARGET_LIST) {
|
401 | this.insert(this.draggedItemIndexTarget, this.target, null, this.source, this.onMoveToSource);
|
402 | }
|
403 | }
|
404 | else {
|
405 | if (this.fromListType === this.SOURCE_LIST) {
|
406 | this.insert(this.draggedItemIndexSource, this.source, null, this.target, this.onMoveToTarget);
|
407 | }
|
408 | }
|
409 | this.listHighlightTarget = false;
|
410 | this.listHighlightSource = false;
|
411 | event.preventDefault();
|
412 | }
|
413 | };
|
414 | PickList.prototype.insert = function (fromIndex, fromList, toIndex, toList, callback) {
|
415 | var elementtomove = fromList[fromIndex];
|
416 | if (toIndex === null)
|
417 | toList.push(fromList.splice(fromIndex, 1)[0]);
|
418 | else
|
419 | toList.splice(toIndex, 0, fromList.splice(fromIndex, 1)[0]);
|
420 | callback.emit({
|
421 | items: [elementtomove]
|
422 | });
|
423 | };
|
424 | PickList.prototype.onListMouseMove = function (event, listType) {
|
425 | if (this.dragging) {
|
426 | var moveListType = (listType == 0 ? this.listViewSourceChild : this.listViewTargetChild);
|
427 | var offsetY = moveListType.nativeElement.getBoundingClientRect().top + document.body.scrollTop;
|
428 | var bottomDiff = (offsetY + moveListType.nativeElement.clientHeight) - event.pageY;
|
429 | var topDiff = (event.pageY - offsetY);
|
430 | if (bottomDiff < 25 && bottomDiff > 0)
|
431 | moveListType.nativeElement.scrollTop += 15;
|
432 | else if (topDiff < 25 && topDiff > 0)
|
433 | moveListType.nativeElement.scrollTop -= 15;
|
434 | if (listType === this.SOURCE_LIST) {
|
435 | if (this.fromListType === this.TARGET_LIST)
|
436 | this.listHighlightSource = true;
|
437 | }
|
438 | else {
|
439 | if (this.fromListType === this.SOURCE_LIST)
|
440 | this.listHighlightTarget = true;
|
441 | }
|
442 | event.preventDefault();
|
443 | }
|
444 | };
|
445 | PickList.prototype.onListDragLeave = function () {
|
446 | this.listHighlightTarget = false;
|
447 | this.listHighlightSource = false;
|
448 | };
|
449 | PickList.prototype.resetFilter = function () {
|
450 | this.visibleOptionsSource = null;
|
451 | this.filterValueSource = null;
|
452 | this.visibleOptionsTarget = null;
|
453 | this.filterValueTarget = null;
|
454 | this.sourceFilterViewChild.nativeElement.value = '';
|
455 | this.targetFilterViewChild.nativeElement.value = '';
|
456 | };
|
457 | PickList.prototype.onItemKeydown = function (event, item, selectedItems, callback) {
|
458 | var listItem = event.currentTarget;
|
459 | switch (event.which) {
|
460 |
|
461 | case 40:
|
462 | var nextItem = this.findNextItem(listItem);
|
463 | if (nextItem) {
|
464 | nextItem.focus();
|
465 | }
|
466 | event.preventDefault();
|
467 | break;
|
468 |
|
469 | case 38:
|
470 | var prevItem = this.findPrevItem(listItem);
|
471 | if (prevItem) {
|
472 | prevItem.focus();
|
473 | }
|
474 | event.preventDefault();
|
475 | break;
|
476 |
|
477 | case 13:
|
478 | this.onItemClick(event, item, selectedItems, callback);
|
479 | event.preventDefault();
|
480 | break;
|
481 | }
|
482 | };
|
483 | PickList.prototype.findNextItem = function (item) {
|
484 | var nextItem = item.nextElementSibling;
|
485 | if (nextItem)
|
486 | return !dom.DomHandler.hasClass(nextItem, 'ui-picklist-item') || dom.DomHandler.isHidden(nextItem) ? this.findNextItem(nextItem) : nextItem;
|
487 | else
|
488 | return null;
|
489 | };
|
490 | PickList.prototype.findPrevItem = function (item) {
|
491 | var prevItem = item.previousElementSibling;
|
492 | if (prevItem)
|
493 | return !dom.DomHandler.hasClass(prevItem, 'ui-picklist-item') || dom.DomHandler.isHidden(prevItem) ? this.findPrevItem(prevItem) : prevItem;
|
494 | else
|
495 | return null;
|
496 | };
|
497 | PickList.ctorParameters = function () { return [
|
498 | { type: core.ElementRef }
|
499 | ]; };
|
500 | __decorate([
|
501 | core.Input()
|
502 | ], PickList.prototype, "source", void 0);
|
503 | __decorate([
|
504 | core.Input()
|
505 | ], PickList.prototype, "target", void 0);
|
506 | __decorate([
|
507 | core.Input()
|
508 | ], PickList.prototype, "sourceHeader", void 0);
|
509 | __decorate([
|
510 | core.Input()
|
511 | ], PickList.prototype, "targetHeader", void 0);
|
512 | __decorate([
|
513 | core.Input()
|
514 | ], PickList.prototype, "responsive", void 0);
|
515 | __decorate([
|
516 | core.Input()
|
517 | ], PickList.prototype, "filterBy", void 0);
|
518 | __decorate([
|
519 | core.Input()
|
520 | ], PickList.prototype, "filterLocale", void 0);
|
521 | __decorate([
|
522 | core.Input()
|
523 | ], PickList.prototype, "trackBy", void 0);
|
524 | __decorate([
|
525 | core.Input()
|
526 | ], PickList.prototype, "sourceTrackBy", void 0);
|
527 | __decorate([
|
528 | core.Input()
|
529 | ], PickList.prototype, "targetTrackBy", void 0);
|
530 | __decorate([
|
531 | core.Input()
|
532 | ], PickList.prototype, "showSourceFilter", void 0);
|
533 | __decorate([
|
534 | core.Input()
|
535 | ], PickList.prototype, "showTargetFilter", void 0);
|
536 | __decorate([
|
537 | core.Input()
|
538 | ], PickList.prototype, "metaKeySelection", void 0);
|
539 | __decorate([
|
540 | core.Input()
|
541 | ], PickList.prototype, "dragdrop", void 0);
|
542 | __decorate([
|
543 | core.Input()
|
544 | ], PickList.prototype, "style", void 0);
|
545 | __decorate([
|
546 | core.Input()
|
547 | ], PickList.prototype, "styleClass", void 0);
|
548 | __decorate([
|
549 | core.Input()
|
550 | ], PickList.prototype, "sourceStyle", void 0);
|
551 | __decorate([
|
552 | core.Input()
|
553 | ], PickList.prototype, "targetStyle", void 0);
|
554 | __decorate([
|
555 | core.Input()
|
556 | ], PickList.prototype, "showSourceControls", void 0);
|
557 | __decorate([
|
558 | core.Input()
|
559 | ], PickList.prototype, "showTargetControls", void 0);
|
560 | __decorate([
|
561 | core.Input()
|
562 | ], PickList.prototype, "sourceFilterPlaceholder", void 0);
|
563 | __decorate([
|
564 | core.Input()
|
565 | ], PickList.prototype, "targetFilterPlaceholder", void 0);
|
566 | __decorate([
|
567 | core.Input()
|
568 | ], PickList.prototype, "disabled", void 0);
|
569 | __decorate([
|
570 | core.Input()
|
571 | ], PickList.prototype, "ariaSourceFilterLabel", void 0);
|
572 | __decorate([
|
573 | core.Input()
|
574 | ], PickList.prototype, "ariaTargetFilterLabel", void 0);
|
575 | __decorate([
|
576 | core.Input()
|
577 | ], PickList.prototype, "filterMatchMode", void 0);
|
578 | __decorate([
|
579 | core.Output()
|
580 | ], PickList.prototype, "onMoveToSource", void 0);
|
581 | __decorate([
|
582 | core.Output()
|
583 | ], PickList.prototype, "onMoveAllToSource", void 0);
|
584 | __decorate([
|
585 | core.Output()
|
586 | ], PickList.prototype, "onMoveAllToTarget", void 0);
|
587 | __decorate([
|
588 | core.Output()
|
589 | ], PickList.prototype, "onMoveToTarget", void 0);
|
590 | __decorate([
|
591 | core.Output()
|
592 | ], PickList.prototype, "onSourceReorder", void 0);
|
593 | __decorate([
|
594 | core.Output()
|
595 | ], PickList.prototype, "onTargetReorder", void 0);
|
596 | __decorate([
|
597 | core.Output()
|
598 | ], PickList.prototype, "onSourceSelect", void 0);
|
599 | __decorate([
|
600 | core.Output()
|
601 | ], PickList.prototype, "onTargetSelect", void 0);
|
602 | __decorate([
|
603 | core.Output()
|
604 | ], PickList.prototype, "onSourceFilter", void 0);
|
605 | __decorate([
|
606 | core.Output()
|
607 | ], PickList.prototype, "onTargetFilter", void 0);
|
608 | __decorate([
|
609 | core.ViewChild('sourcelist')
|
610 | ], PickList.prototype, "listViewSourceChild", void 0);
|
611 | __decorate([
|
612 | core.ViewChild('targetlist')
|
613 | ], PickList.prototype, "listViewTargetChild", void 0);
|
614 | __decorate([
|
615 | core.ViewChild('sourceFilter')
|
616 | ], PickList.prototype, "sourceFilterViewChild", void 0);
|
617 | __decorate([
|
618 | core.ViewChild('targetFilter')
|
619 | ], PickList.prototype, "targetFilterViewChild", void 0);
|
620 | __decorate([
|
621 | core.ContentChildren(api.PrimeTemplate)
|
622 | ], PickList.prototype, "templates", void 0);
|
623 | PickList = __decorate([
|
624 | core.Component({
|
625 | selector: 'p-pickList',
|
626 | template: "\n <div [class]=\"styleClass\" [ngStyle]=\"style\" [ngClass]=\"{'ui-picklist ui-widget ui-helper-clearfix': true,'ui-picklist-responsive': responsive}\">\n <div class=\"ui-picklist-source-controls ui-picklist-buttons\" *ngIf=\"showSourceControls\">\n <div class=\"ui-picklist-buttons-cell\">\n <button type=\"button\" pButton icon=\"pi pi-angle-up\" [disabled]=\"disabled\" (click)=\"moveUp(sourcelist,source,selectedItemsSource,onSourceReorder)\"></button>\n <button type=\"button\" pButton icon=\"pi pi-angle-double-up\" [disabled]=\"disabled\" (click)=\"moveTop(sourcelist,source,selectedItemsSource,onSourceReorder)\"></button>\n <button type=\"button\" pButton icon=\"pi pi-angle-down\" [disabled]=\"disabled\" (click)=\"moveDown(sourcelist,source,selectedItemsSource,onSourceReorder)\"></button>\n <button type=\"button\" pButton icon=\"pi pi-angle-double-down\" [disabled]=\"disabled\" (click)=\"moveBottom(sourcelist,source,selectedItemsSource,onSourceReorder)\"></button>\n </div>\n </div>\n <div class=\"ui-picklist-listwrapper ui-picklist-source-wrapper\" [ngClass]=\"{'ui-picklist-listwrapper-nocontrols':!showSourceControls}\">\n <div class=\"ui-picklist-caption ui-widget-header ui-corner-tl ui-corner-tr\" *ngIf=\"sourceHeader\">{{sourceHeader}}</div>\n <div class=\"ui-picklist-filter-container ui-widget-content\" *ngIf=\"filterBy && showSourceFilter !== false\">\n <input #sourceFilter type=\"text\" role=\"textbox\" (keyup)=\"onFilter($event,source,SOURCE_LIST)\" class=\"ui-picklist-filter ui-inputtext ui-widget ui-state-default ui-corner-all\" [disabled]=\"disabled\" [attr.placeholder]=\"sourceFilterPlaceholder\" [attr.aria-label]=\"ariaSourceFilterLabel\">\n <span class=\"ui-picklist-filter-icon pi pi-search\"></span>\n </div>\n <ul #sourcelist class=\"ui-widget-content ui-picklist-list ui-picklist-source ui-corner-bottom\" [ngClass]=\"{'ui-picklist-highlight': listHighlightSource}\"\n [ngStyle]=\"sourceStyle\" (dragover)=\"onListMouseMove($event,SOURCE_LIST)\" (dragleave)=\"onListDragLeave()\" (drop)=\"onListDrop($event, SOURCE_LIST)\" role=\"listbox\" aria-multiselectable=\"multiple\">\n <ng-template ngFor let-item [ngForOf]=\"source\" [ngForTrackBy]=\"sourceTrackBy || trackBy\" let-i=\"index\" let-l=\"last\">\n <li class=\"ui-picklist-droppoint\" *ngIf=\"dragdrop\" (dragover)=\"onDragOver($event, i, SOURCE_LIST)\" (drop)=\"onDrop($event, i, SOURCE_LIST)\" (dragleave)=\"onDragLeave($event, SOURCE_LIST)\"\n [ngClass]=\"{'ui-picklist-droppoint-highlight': (i === dragOverItemIndexSource)}\" [style.display]=\"isItemVisible(item, SOURCE_LIST) ? 'block' : 'none'\"></li>\n <li [ngClass]=\"{'ui-picklist-item':true,'ui-state-highlight':isSelected(item,selectedItemsSource), 'ui-state-disabled': disabled}\"\n (click)=\"onItemClick($event,item,selectedItemsSource,onSourceSelect)\" (dblclick)=\"onSourceItemDblClick()\" (touchend)=\"onItemTouchEnd($event)\" (keydown)=\"onItemKeydown($event,item,selectedItemsSource,onSourceSelect)\"\n [style.display]=\"isItemVisible(item, SOURCE_LIST) ? 'block' : 'none'\" tabindex=\"0\" role=\"option\" [attr.aria-selected]=\"isSelected(item, selectedItemsSource)\"\n [draggable]=\"dragdrop\" (dragstart)=\"onDragStart($event, i, SOURCE_LIST)\" (dragend)=\"onDragEnd($event)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\n </li>\n <li class=\"ui-picklist-droppoint\" *ngIf=\"dragdrop&&l\" (dragover)=\"onDragOver($event, i + 1, SOURCE_LIST)\" (drop)=\"onDrop($event, i + 1, SOURCE_LIST)\" (dragleave)=\"onDragLeave($event, SOURCE_LIST)\"\n [ngClass]=\"{'ui-picklist-droppoint-highlight': (i + 1 === dragOverItemIndexSource)}\"></li>\n </ng-template>\n <ng-container *ngIf=\"(source == null || source.length === 0) && emptyMessageSourceTemplate\">\n <li class=\"ui-picklist-empty-message\">\n <ng-container *ngTemplateOutlet=\"emptyMessageSourceTemplate\"></ng-container>\n </li>\n </ng-container>\n </ul>\n </div>\n <div class=\"ui-picklist-buttons\">\n <div class=\"ui-picklist-buttons-cell\">\n <button type=\"button\" pButton icon=\"pi pi-angle-right\" [disabled]=\"disabled\" (click)=\"moveRight()\"></button>\n <button type=\"button\" pButton icon=\"pi pi-angle-double-right\" [disabled]=\"disabled\" (click)=\"moveAllRight()\"></button>\n <button type=\"button\" pButton icon=\"pi pi-angle-left\" [disabled]=\"disabled\" (click)=\"moveLeft()\"></button>\n <button type=\"button\" pButton icon=\"pi pi-angle-double-left\" [disabled]=\"disabled\" (click)=\"moveAllLeft()\"></button>\n </div>\n </div>\n <div class=\"ui-picklist-listwrapper ui-picklist-target-wrapper\" [ngClass]=\"{'ui-picklist-listwrapper-nocontrols':!showTargetControls}\">\n <div class=\"ui-picklist-caption ui-widget-header ui-corner-tl ui-corner-tr\" *ngIf=\"targetHeader\">{{targetHeader}}</div>\n <div class=\"ui-picklist-filter-container ui-widget-content\" *ngIf=\"filterBy && showTargetFilter !== false\">\n <input #targetFilter type=\"text\" role=\"textbox\" (keyup)=\"onFilter($event,target,TARGET_LIST)\" class=\"ui-picklist-filter ui-inputtext ui-widget ui-state-default ui-corner-all\" [disabled]=\"disabled\" [attr.placeholder]=\"targetFilterPlaceholder\" [attr.aria-label]=\"ariaTargetFilterLabel\">\n <span class=\"ui-picklist-filter-icon pi pi-search\"></span>\n </div>\n <ul #targetlist class=\"ui-widget-content ui-picklist-list ui-picklist-target ui-corner-bottom\" [ngClass]=\"{'ui-picklist-highlight': listHighlightTarget}\"\n [ngStyle]=\"targetStyle\" (dragover)=\"onListMouseMove($event,TARGET_LIST)\" (dragleave)=\"onListDragLeave()\" (drop)=\"onListDrop($event,TARGET_LIST)\" role=\"listbox\" aria-multiselectable=\"multiple\">\n <ng-template ngFor let-item [ngForOf]=\"target\" [ngForTrackBy]=\"targetTrackBy || trackBy\" let-i=\"index\" let-l=\"last\">\n <li class=\"ui-picklist-droppoint\" *ngIf=\"dragdrop\" (dragover)=\"onDragOver($event, i, TARGET_LIST)\" (drop)=\"onDrop($event, i, TARGET_LIST)\" (dragleave)=\"onDragLeave($event, TARGET_LIST)\"\n [ngClass]=\"{'ui-picklist-droppoint-highlight': (i === dragOverItemIndexTarget)}\" [style.display]=\"isItemVisible(item, TARGET_LIST) ? 'block' : 'none'\"></li>\n <li [ngClass]=\"{'ui-picklist-item':true,'ui-state-highlight':isSelected(item,selectedItemsTarget), 'ui-state-disabled': disabled}\"\n (click)=\"onItemClick($event,item,selectedItemsTarget,onTargetSelect)\" (dblclick)=\"onTargetItemDblClick()\" (touchend)=\"onItemTouchEnd($event)\" (keydown)=\"onItemKeydown($event,item,selectedItemsTarget,onTargetSelect)\"\n [style.display]=\"isItemVisible(item, TARGET_LIST) ? 'block' : 'none'\" tabindex=\"0\" role=\"option\" [attr.aria-selected]=\"isSelected(item, selectedItemsTarget)\"\n [draggable]=\"dragdrop\" (dragstart)=\"onDragStart($event, i, TARGET_LIST)\" (dragend)=\"onDragEnd($event)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\n </li>\n <li class=\"ui-picklist-droppoint\" *ngIf=\"dragdrop&&l\" (dragover)=\"onDragOver($event, i + 1, TARGET_LIST)\" (drop)=\"onDrop($event, i + 1, TARGET_LIST)\" (dragleave)=\"onDragLeave($event, TARGET_LIST)\"\n [ngClass]=\"{'ui-picklist-droppoint-highlight': (i + 1 === dragOverItemIndexTarget)}\"></li>\n </ng-template>\n <ng-container *ngIf=\"(target == null || target.length === 0) && emptyMessageTargetTemplate\">\n <li class=\"ui-picklist-empty-message\">\n <ng-container *ngTemplateOutlet=\"emptyMessageTargetTemplate\"></ng-container>\n </li>\n </ng-container>\n </ul>\n </div>\n <div class=\"ui-picklist-target-controls ui-picklist-buttons\" *ngIf=\"showTargetControls\">\n <div class=\"ui-picklist-buttons-cell\">\n <button type=\"button\" pButton icon=\"pi pi-angle-up\" [disabled]=\"disabled\" (click)=\"moveUp(targetlist,target,selectedItemsTarget,onTargetReorder)\"></button>\n <button type=\"button\" pButton icon=\"pi pi-angle-double-up\" [disabled]=\"disabled\" (click)=\"moveTop(targetlist,target,selectedItemsTarget,onTargetReorder)\"></button>\n <button type=\"button\" pButton icon=\"pi pi-angle-down\" [disabled]=\"disabled\" (click)=\"moveDown(targetlist,target,selectedItemsTarget,onTargetReorder)\"></button>\n <button type=\"button\" pButton icon=\"pi pi-angle-double-down\" [disabled]=\"disabled\" (click)=\"moveBottom(targetlist,target,selectedItemsTarget,onTargetReorder)\"></button>\n </div>\n </div>\n </div>\n ",
|
627 | changeDetection: core.ChangeDetectionStrategy.Default
|
628 | })
|
629 | ], PickList);
|
630 | return PickList;
|
631 | }());
|
632 | var PickListModule = (function () {
|
633 | function PickListModule() {
|
634 | }
|
635 | PickListModule = __decorate([
|
636 | core.NgModule({
|
637 | imports: [common.CommonModule, button.ButtonModule, api.SharedModule],
|
638 | exports: [PickList, api.SharedModule],
|
639 | declarations: [PickList]
|
640 | })
|
641 | ], PickListModule);
|
642 | return PickListModule;
|
643 | }());
|
644 |
|
645 | exports.PickList = PickList;
|
646 | exports.PickListModule = PickListModule;
|
647 |
|
648 | Object.defineProperty(exports, '__esModule', { value: true });
|
649 |
|
650 | })));
|
651 |
|