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/orderlist', ['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.orderlist = {}), 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 __read = (this && this.__read) || function (o, n) {
|
14 | var m = typeof Symbol === "function" && o[Symbol.iterator];
|
15 | if (!m) return o;
|
16 | var i = m.call(o), r, ar = [], e;
|
17 | try {
|
18 | while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
19 | }
|
20 | catch (error) { e = { error: error }; }
|
21 | finally {
|
22 | try {
|
23 | if (r && !r.done && (m = i["return"])) m.call(i);
|
24 | }
|
25 | finally { if (e) throw e.error; }
|
26 | }
|
27 | return ar;
|
28 | };
|
29 | var __spread = (this && this.__spread) || function () {
|
30 | for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
|
31 | return ar;
|
32 | };
|
33 | var OrderList = (function () {
|
34 | function OrderList(el) {
|
35 | this.el = el;
|
36 | this.metaKeySelection = true;
|
37 | this.controlsPosition = 'left';
|
38 | this.filterMatchMode = "contains";
|
39 | this.selectionChange = new core.EventEmitter();
|
40 | this.trackBy = function (index, item) { return item; };
|
41 | this.onReorder = new core.EventEmitter();
|
42 | this.onSelectionChange = new core.EventEmitter();
|
43 | this.onFilterEvent = new core.EventEmitter();
|
44 | }
|
45 | Object.defineProperty(OrderList.prototype, "selection", {
|
46 | get: function () {
|
47 | return this._selection;
|
48 | },
|
49 | set: function (val) {
|
50 | this._selection = val;
|
51 | },
|
52 | enumerable: true,
|
53 | configurable: true
|
54 | });
|
55 | OrderList.prototype.ngAfterContentInit = function () {
|
56 | var _this = this;
|
57 | this.templates.forEach(function (item) {
|
58 | switch (item.getType()) {
|
59 | case 'item':
|
60 | _this.itemTemplate = item.template;
|
61 | break;
|
62 | default:
|
63 | _this.itemTemplate = item.template;
|
64 | break;
|
65 | }
|
66 | });
|
67 | };
|
68 | OrderList.prototype.ngAfterViewChecked = function () {
|
69 | if (this.movedUp || this.movedDown) {
|
70 | var listItems = dom.DomHandler.find(this.listViewChild.nativeElement, 'li.ui-state-highlight');
|
71 | var listItem = void 0;
|
72 | if (listItems.length > 0) {
|
73 | if (this.movedUp)
|
74 | listItem = listItems[0];
|
75 | else
|
76 | listItem = listItems[listItems.length - 1];
|
77 | dom.DomHandler.scrollInView(this.listViewChild.nativeElement, listItem);
|
78 | }
|
79 | this.movedUp = false;
|
80 | this.movedDown = false;
|
81 | }
|
82 | };
|
83 | Object.defineProperty(OrderList.prototype, "value", {
|
84 | get: function () {
|
85 | return this._value;
|
86 | },
|
87 | set: function (val) {
|
88 | this._value = val;
|
89 | if (this.filterValue) {
|
90 | this.filter();
|
91 | }
|
92 | },
|
93 | enumerable: true,
|
94 | configurable: true
|
95 | });
|
96 | OrderList.prototype.onItemClick = function (event, item, index) {
|
97 | this.itemTouched = false;
|
98 | var selectedIndex = utils.ObjectUtils.findIndexInList(item, this.selection);
|
99 | var selected = (selectedIndex != -1);
|
100 | var metaSelection = this.itemTouched ? false : this.metaKeySelection;
|
101 | if (metaSelection) {
|
102 | var metaKey = (event.metaKey || event.ctrlKey || event.shiftKey);
|
103 | if (selected && metaKey) {
|
104 | this._selection = this._selection.filter(function (val, index) { return index !== selectedIndex; });
|
105 | }
|
106 | else {
|
107 | this._selection = (metaKey) ? this._selection ? __spread(this._selection) : [] : [];
|
108 | utils.ObjectUtils.insertIntoOrderedArray(item, index, this._selection, this.value);
|
109 | }
|
110 | }
|
111 | else {
|
112 | if (selected) {
|
113 | this._selection = this._selection.filter(function (val, index) { return index !== selectedIndex; });
|
114 | }
|
115 | else {
|
116 | this._selection = this._selection ? __spread(this._selection) : [];
|
117 | utils.ObjectUtils.insertIntoOrderedArray(item, index, this._selection, this.value);
|
118 | }
|
119 | }
|
120 |
|
121 | this.selectionChange.emit(this._selection);
|
122 |
|
123 | this.onSelectionChange.emit({ originalEvent: event, value: this._selection });
|
124 | };
|
125 | OrderList.prototype.onFilterKeyup = function (event) {
|
126 | this.filterValue = event.target.value.trim().toLocaleLowerCase(this.filterLocale);
|
127 | this.filter();
|
128 | this.onFilterEvent.emit({
|
129 | originalEvent: event,
|
130 | value: this.visibleOptions
|
131 | });
|
132 | };
|
133 | OrderList.prototype.filter = function () {
|
134 | var searchFields = this.filterBy.split(',');
|
135 | this.visibleOptions = utils.FilterUtils.filter(this.value, searchFields, this.filterValue, this.filterMatchMode, this.filterLocale);
|
136 | };
|
137 | OrderList.prototype.isItemVisible = function (item) {
|
138 | if (this.filterValue && this.filterValue.trim().length) {
|
139 | for (var i = 0; i < this.visibleOptions.length; i++) {
|
140 | if (item == this.visibleOptions[i]) {
|
141 | return true;
|
142 | }
|
143 | }
|
144 | }
|
145 | else {
|
146 | return true;
|
147 | }
|
148 | };
|
149 | OrderList.prototype.onItemTouchEnd = function (event) {
|
150 | this.itemTouched = true;
|
151 | };
|
152 | OrderList.prototype.isSelected = function (item) {
|
153 | return utils.ObjectUtils.findIndexInList(item, this.selection) != -1;
|
154 | };
|
155 | OrderList.prototype.moveUp = function (event) {
|
156 | if (this.selection) {
|
157 | for (var i = 0; i < this.selection.length; i++) {
|
158 | var selectedItem = this.selection[i];
|
159 | var selectedItemIndex = utils.ObjectUtils.findIndexInList(selectedItem, this.value);
|
160 | if (selectedItemIndex != 0) {
|
161 | var movedItem = this.value[selectedItemIndex];
|
162 | var temp = this.value[selectedItemIndex - 1];
|
163 | this.value[selectedItemIndex - 1] = movedItem;
|
164 | this.value[selectedItemIndex] = temp;
|
165 | }
|
166 | else {
|
167 | break;
|
168 | }
|
169 | }
|
170 | this.movedUp = true;
|
171 | this.onReorder.emit(event);
|
172 | }
|
173 | };
|
174 | OrderList.prototype.moveTop = function (event) {
|
175 | if (this.selection) {
|
176 | for (var i = this.selection.length - 1; i >= 0; i--) {
|
177 | var selectedItem = this.selection[i];
|
178 | var selectedItemIndex = utils.ObjectUtils.findIndexInList(selectedItem, this.value);
|
179 | if (selectedItemIndex != 0) {
|
180 | var movedItem = this.value.splice(selectedItemIndex, 1)[0];
|
181 | this.value.unshift(movedItem);
|
182 | }
|
183 | else {
|
184 | break;
|
185 | }
|
186 | }
|
187 | this.onReorder.emit(event);
|
188 | this.listViewChild.nativeElement.scrollTop = 0;
|
189 | }
|
190 | };
|
191 | OrderList.prototype.moveDown = function (event) {
|
192 | if (this.selection) {
|
193 | for (var i = this.selection.length - 1; i >= 0; i--) {
|
194 | var selectedItem = this.selection[i];
|
195 | var selectedItemIndex = utils.ObjectUtils.findIndexInList(selectedItem, this.value);
|
196 | if (selectedItemIndex != (this.value.length - 1)) {
|
197 | var movedItem = this.value[selectedItemIndex];
|
198 | var temp = this.value[selectedItemIndex + 1];
|
199 | this.value[selectedItemIndex + 1] = movedItem;
|
200 | this.value[selectedItemIndex] = temp;
|
201 | }
|
202 | else {
|
203 | break;
|
204 | }
|
205 | }
|
206 | this.movedDown = true;
|
207 | this.onReorder.emit(event);
|
208 | }
|
209 | };
|
210 | OrderList.prototype.moveBottom = function (event) {
|
211 | if (this.selection) {
|
212 | for (var i = 0; i < this.selection.length; i++) {
|
213 | var selectedItem = this.selection[i];
|
214 | var selectedItemIndex = utils.ObjectUtils.findIndexInList(selectedItem, this.value);
|
215 | if (selectedItemIndex != (this.value.length - 1)) {
|
216 | var movedItem = this.value.splice(selectedItemIndex, 1)[0];
|
217 | this.value.push(movedItem);
|
218 | }
|
219 | else {
|
220 | break;
|
221 | }
|
222 | }
|
223 | this.onReorder.emit(event);
|
224 | this.listViewChild.nativeElement.scrollTop = this.listViewChild.nativeElement.scrollHeight;
|
225 | }
|
226 | };
|
227 | OrderList.prototype.onDragStart = function (event, index) {
|
228 | event.dataTransfer.setData('text', 'b');
|
229 | event.target.blur();
|
230 | this.dragging = true;
|
231 | this.draggedItemIndex = index;
|
232 | };
|
233 | OrderList.prototype.onDragOver = function (event, index) {
|
234 | if (this.dragging && this.draggedItemIndex !== index && this.draggedItemIndex + 1 !== index) {
|
235 | this.dragOverItemIndex = index;
|
236 | event.preventDefault();
|
237 | }
|
238 | };
|
239 | OrderList.prototype.onDragLeave = function (event) {
|
240 | this.dragOverItemIndex = null;
|
241 | };
|
242 | OrderList.prototype.onDrop = function (event, index) {
|
243 | var dropIndex = (this.draggedItemIndex > index) ? index : (index === 0) ? 0 : index - 1;
|
244 | utils.ObjectUtils.reorderArray(this.value, this.draggedItemIndex, dropIndex);
|
245 | this.dragOverItemIndex = null;
|
246 | this.onReorder.emit(event);
|
247 | event.preventDefault();
|
248 | };
|
249 | OrderList.prototype.onDragEnd = function (event) {
|
250 | this.dragging = false;
|
251 | };
|
252 | OrderList.prototype.onListMouseMove = function (event) {
|
253 | if (this.dragging) {
|
254 | var offsetY = this.listViewChild.nativeElement.getBoundingClientRect().top + document.body.scrollTop;
|
255 | var bottomDiff = (offsetY + this.listViewChild.nativeElement.clientHeight) - event.pageY;
|
256 | var topDiff = (event.pageY - offsetY);
|
257 | if (bottomDiff < 25 && bottomDiff > 0)
|
258 | this.listViewChild.nativeElement.scrollTop += 15;
|
259 | else if (topDiff < 25 && topDiff > 0)
|
260 | this.listViewChild.nativeElement.scrollTop -= 15;
|
261 | }
|
262 | };
|
263 | OrderList.prototype.onItemKeydown = function (event, item, index) {
|
264 | var listItem = event.currentTarget;
|
265 | switch (event.which) {
|
266 |
|
267 | case 40:
|
268 | var nextItem = this.findNextItem(listItem);
|
269 | if (nextItem) {
|
270 | nextItem.focus();
|
271 | }
|
272 | event.preventDefault();
|
273 | break;
|
274 |
|
275 | case 38:
|
276 | var prevItem = this.findPrevItem(listItem);
|
277 | if (prevItem) {
|
278 | prevItem.focus();
|
279 | }
|
280 | event.preventDefault();
|
281 | break;
|
282 |
|
283 | case 13:
|
284 | this.onItemClick(event, item, index);
|
285 | event.preventDefault();
|
286 | break;
|
287 | }
|
288 | };
|
289 | OrderList.prototype.findNextItem = function (item) {
|
290 | var nextItem = item.nextElementSibling;
|
291 | if (nextItem)
|
292 | return !dom.DomHandler.hasClass(nextItem, 'ui-orderlist-item') || dom.DomHandler.isHidden(nextItem) ? this.findNextItem(nextItem) : nextItem;
|
293 | else
|
294 | return null;
|
295 | };
|
296 | OrderList.prototype.findPrevItem = function (item) {
|
297 | var prevItem = item.previousElementSibling;
|
298 | if (prevItem)
|
299 | return !dom.DomHandler.hasClass(prevItem, 'ui-orderlist-item') || dom.DomHandler.isHidden(prevItem) ? this.findPrevItem(prevItem) : prevItem;
|
300 | else
|
301 | return null;
|
302 | };
|
303 | OrderList.ctorParameters = function () { return [
|
304 | { type: core.ElementRef }
|
305 | ]; };
|
306 | __decorate([
|
307 | core.Input()
|
308 | ], OrderList.prototype, "header", void 0);
|
309 | __decorate([
|
310 | core.Input()
|
311 | ], OrderList.prototype, "style", void 0);
|
312 | __decorate([
|
313 | core.Input()
|
314 | ], OrderList.prototype, "styleClass", void 0);
|
315 | __decorate([
|
316 | core.Input()
|
317 | ], OrderList.prototype, "listStyle", void 0);
|
318 | __decorate([
|
319 | core.Input()
|
320 | ], OrderList.prototype, "responsive", void 0);
|
321 | __decorate([
|
322 | core.Input()
|
323 | ], OrderList.prototype, "filterBy", void 0);
|
324 | __decorate([
|
325 | core.Input()
|
326 | ], OrderList.prototype, "filterPlaceholder", void 0);
|
327 | __decorate([
|
328 | core.Input()
|
329 | ], OrderList.prototype, "filterLocale", void 0);
|
330 | __decorate([
|
331 | core.Input()
|
332 | ], OrderList.prototype, "metaKeySelection", void 0);
|
333 | __decorate([
|
334 | core.Input()
|
335 | ], OrderList.prototype, "dragdrop", void 0);
|
336 | __decorate([
|
337 | core.Input()
|
338 | ], OrderList.prototype, "controlsPosition", void 0);
|
339 | __decorate([
|
340 | core.Input()
|
341 | ], OrderList.prototype, "ariaFilterLabel", void 0);
|
342 | __decorate([
|
343 | core.Input()
|
344 | ], OrderList.prototype, "filterMatchMode", void 0);
|
345 | __decorate([
|
346 | core.Output()
|
347 | ], OrderList.prototype, "selectionChange", void 0);
|
348 | __decorate([
|
349 | core.Input()
|
350 | ], OrderList.prototype, "trackBy", void 0);
|
351 | __decorate([
|
352 | core.Output()
|
353 | ], OrderList.prototype, "onReorder", void 0);
|
354 | __decorate([
|
355 | core.Output()
|
356 | ], OrderList.prototype, "onSelectionChange", void 0);
|
357 | __decorate([
|
358 | core.Output()
|
359 | ], OrderList.prototype, "onFilterEvent", void 0);
|
360 | __decorate([
|
361 | core.ViewChild('listelement')
|
362 | ], OrderList.prototype, "listViewChild", void 0);
|
363 | __decorate([
|
364 | core.ContentChildren(api.PrimeTemplate)
|
365 | ], OrderList.prototype, "templates", void 0);
|
366 | __decorate([
|
367 | core.Input()
|
368 | ], OrderList.prototype, "selection", null);
|
369 | __decorate([
|
370 | core.Input()
|
371 | ], OrderList.prototype, "value", null);
|
372 | OrderList = __decorate([
|
373 | core.Component({
|
374 | selector: 'p-orderList',
|
375 | template: "\n <div [ngClass]=\"{'ui-orderlist ui-widget': true, 'ui-orderlist-controls-left': controlsPosition === 'left',\n 'ui-orderlist-controls-right': controlsPosition === 'right'}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n <div class=\"ui-orderlist-controls\">\n <button type=\"button\" pButton icon=\"pi pi-angle-up\" (click)=\"moveUp($event)\"></button>\n <button type=\"button\" pButton icon=\"pi pi-angle-double-up\" (click)=\"moveTop($event)\"></button>\n <button type=\"button\" pButton icon=\"pi pi-angle-down\" (click)=\"moveDown($event)\"></button>\n <button type=\"button\" pButton icon=\"pi pi-angle-double-down\" (click)=\"moveBottom($event)\"></button>\n </div>\n <div class=\"ui-orderlist-list-container\">\n <div class=\"ui-orderlist-caption ui-widget-header ui-corner-top\" *ngIf=\"header\">{{header}}</div>\n <div class=\"ui-orderlist-filter-container ui-widget-content\" *ngIf=\"filterBy\">\n <input type=\"text\" role=\"textbox\" (keyup)=\"onFilterKeyup($event)\" class=\"ui-inputtext ui-widget ui-state-default ui-corner-all\" [attr.placeholder]=\"filterPlaceholder\" [attr.aria-label]=\"ariaFilterLabel\">\n <span class=\"ui-orderlist-filter-icon pi pi-search\"></span>\n </div>\n <ul #listelement class=\"ui-widget-content ui-orderlist-list ui-corner-bottom\" [ngStyle]=\"listStyle\" (dragover)=\"onListMouseMove($event)\">\n <ng-template ngFor [ngForTrackBy]=\"trackBy\" let-item [ngForOf]=\"value\" let-i=\"index\" let-l=\"last\">\n <li class=\"ui-orderlist-droppoint\" *ngIf=\"dragdrop && isItemVisible(item)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\" (dragleave)=\"onDragLeave($event)\"\n [ngClass]=\"{'ui-orderlist-droppoint-highlight': (i === dragOverItemIndex)}\"></li>\n <li class=\"ui-orderlist-item\" tabindex=\"0\"\n [ngClass]=\"{'ui-state-highlight':isSelected(item)}\"\n (click)=\"onItemClick($event,item,i)\" (touchend)=\"onItemTouchEnd($event)\" (keydown)=\"onItemKeydown($event,item,i)\"\n [style.display]=\"isItemVisible(item) ? 'block' : 'none'\" role=\"option\" [attr.aria-selected]=\"isSelected(item)\"\n [draggable]=\"dragdrop\" (dragstart)=\"onDragStart($event, i)\" (dragend)=\"onDragEnd($event)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\n </li>\n <li class=\"ui-orderlist-droppoint\" *ngIf=\"dragdrop && l\" (dragover)=\"onDragOver($event, i + 1)\" (drop)=\"onDrop($event, i + 1)\" (dragleave)=\"onDragLeave($event)\"\n [ngClass]=\"{'ui-orderlist-droppoint-highlight': (i + 1 === dragOverItemIndex)}\"></li>\n </ng-template>\n </ul>\n </div>\n </div>\n ",
|
376 | changeDetection: core.ChangeDetectionStrategy.Default
|
377 | })
|
378 | ], OrderList);
|
379 | return OrderList;
|
380 | }());
|
381 | var OrderListModule = (function () {
|
382 | function OrderListModule() {
|
383 | }
|
384 | OrderListModule = __decorate([
|
385 | core.NgModule({
|
386 | imports: [common.CommonModule, button.ButtonModule, api.SharedModule],
|
387 | exports: [OrderList, api.SharedModule],
|
388 | declarations: [OrderList]
|
389 | })
|
390 | ], OrderListModule);
|
391 | return OrderListModule;
|
392 | }());
|
393 |
|
394 | exports.OrderList = OrderList;
|
395 | exports.OrderListModule = OrderListModule;
|
396 |
|
397 | Object.defineProperty(exports, '__esModule', { value: true });
|
398 |
|
399 | })));
|
400 |
|