UNPKG

70.6 kBJavaScriptView Raw
1import { CommonModule } from '@angular/common';
2import { Injectable, Component, ChangeDetectionStrategy, ViewChild, Input, Output, HostListener, EventEmitter, ChangeDetectorRef, ContentChild, TemplateRef, Pipe, NgModule } from '@angular/core';
3import { __spread, __assign } from 'tslib';
4import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
5import { NgxPaginationModule } from 'ngx-pagination';
6import { from, Subject } from 'rxjs';
7import { groupBy, flatMap, reduce } from 'rxjs/operators';
8
9/**
10 * @fileoverview added by tsickle
11 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
12 */
13
14/**
15 * @fileoverview added by tsickle
16 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
17 */
18/** @enum {string} */
19var STYLE = {
20 TINY: 'tiny',
21 BIG: 'big',
22 NORMAL: 'normal',
23};
24/** @enum {string} */
25var THEME = {
26 LIGHT: 'light',
27 DARK: 'dark',
28};
29
30/**
31 * @fileoverview added by tsickle
32 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
33 */
34/** @enum {string} */
35var Event = {
36 onPagination: 'onPagination',
37 onOrder: 'onOrder',
38 onGlobalSearch: 'onGlobalSearch',
39 onSearch: 'onSearch',
40 onClick: 'onClick',
41 onDoubleClick: 'onDoubleClick',
42 onCheckboxSelect: 'onCheckboxSelect',
43 onSelectAll: 'onSelectAll',
44 onColumnResizeMouseDown: 'onColumnResizeMouseDown',
45 onColumnResizeMouseUp: 'onColumnResizeMouseUp',
46 onRowDrop: 'onRowDrop',
47 onRowCollapsedShow: 'onRowCollapsedShow',
48 onRowCollapsedHide: 'onRowCollapsedHide',
49 onRowContextMenu: 'onRowContextMenu',
50};
51
52/**
53 * @fileoverview added by tsickle
54 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
55 */
56
57/**
58 * @fileoverview added by tsickle
59 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
60 */
61/** @enum {string} */
62var API = {
63 rowContextMenuClicked: 'rowContextMenuClicked',
64 setInputValue: 'setInputValue',
65 toolPanelClicked: 'toolPanelClicked',
66 toggleRowIndex: 'toggleRowIndex',
67 onGlobalSearch: 'onGlobalSearch',
68 setPaginationCurrentPage: 'setPaginationCurrentPage',
69 getPaginationCurrentPage: 'getPaginationCurrentPage',
70 getPaginationTotalItems: 'getPaginationTotalItems',
71 getPaginationLastPage: 'getPaginationLastPage',
72 setPaginationRange: 'setPaginationRange',
73 setPaginationPreviousLabel: 'setPaginationPreviousLabel',
74 setPaginationNextLabel: 'setPaginationNextLabel',
75 setPaginationDisplayLimit: 'setPaginationDisplayLimit',
76 setTableClass: 'setTableClass',
77 setRowClass: 'setRowClass',
78 setCellClass: 'setCellClass',
79 setRowStyle: 'setRowStyle',
80 setCellStyle: 'setCellStyle',
81 sortBy: 'sortBy',
82};
83
84/**
85 * @fileoverview added by tsickle
86 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
87 */
88
89/**
90 * @fileoverview added by tsickle
91 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
92 */
93/** @type {?} */
94var DefaultConfig = {
95 searchEnabled: false,
96 headerEnabled: true,
97 orderEnabled: true,
98 orderEventOnly: false,
99 paginationEnabled: true,
100 exportEnabled: false,
101 clickEvent: true,
102 selectRow: false,
103 selectCol: false,
104 selectCell: false,
105 rows: 10,
106 additionalActions: false,
107 serverPagination: false,
108 isLoading: false,
109 detailsTemplate: false,
110 groupRows: false,
111 paginationRangeEnabled: true,
112 collapseAllRows: false,
113 checkboxes: false,
114 resizeColumn: false,
115 fixedColumnWidth: true,
116 horizontalScroll: false,
117 draggable: false,
118 logger: false,
119 showDetailsArrow: false,
120 showContextMenu: false,
121 persistState: false,
122 paginationMaxSize: 5,
123 threeWaySort: false,
124 tableLayout: {
125 style: STYLE.NORMAL,
126 theme: THEME.LIGHT,
127 borderless: false,
128 hover: true,
129 striped: false,
130 },
131};
132var DefaultConfigService = /** @class */ (function () {
133 function DefaultConfigService() {
134 }
135 DefaultConfigService.config = DefaultConfig;
136 DefaultConfigService.decorators = [
137 { type: Injectable }
138 ];
139 return DefaultConfigService;
140}());
141
142/**
143 * @fileoverview added by tsickle
144 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
145 */
146
147/**
148 * @fileoverview added by tsickle
149 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
150 */
151var PaginationComponent = /** @class */ (function () {
152 function PaginationComponent() {
153 this.updateRange = new EventEmitter();
154 this.ranges = [5, 10, 25, 50, 100];
155 this.showRange = false;
156 this.screenReaderPaginationLabel = 'Pagination';
157 this.screenReaderPageLabel = 'page';
158 this.screenReaderCurrentLabel = 'You are on page';
159 this.previousLabel = '';
160 this.nextLabel = '';
161 this.directionLinks = true;
162 }
163 /**
164 * @param {?} targetElement
165 * @return {?}
166 */
167 PaginationComponent.prototype.onClick = /**
168 * @param {?} targetElement
169 * @return {?}
170 */
171 function (targetElement) {
172 /** @type {?} */
173 var clickedInside = this.paginationRange.nativeElement.contains(targetElement);
174 if (!clickedInside) {
175 this.showRange = false;
176 }
177 };
178 /**
179 * @param {?} changes
180 * @return {?}
181 */
182 PaginationComponent.prototype.ngOnChanges = /**
183 * @param {?} changes
184 * @return {?}
185 */
186 function (changes) {
187 var config = changes.config;
188 if (config && config.currentValue) {
189 this.selectedLimit = this.config.rows;
190 }
191 };
192 /**
193 * @param {?} page
194 * @return {?}
195 */
196 PaginationComponent.prototype.onPageChange = /**
197 * @param {?} page
198 * @return {?}
199 */
200 function (page) {
201 this.updateRange.emit({
202 page: page,
203 limit: this.selectedLimit,
204 });
205 };
206 /**
207 * @param {?} limit
208 * @param {?} callFromAPI
209 * @return {?}
210 */
211 PaginationComponent.prototype.changeLimit = /**
212 * @param {?} limit
213 * @param {?} callFromAPI
214 * @return {?}
215 */
216 function (limit, callFromAPI) {
217 if (!callFromAPI) {
218 this.showRange = !this.showRange;
219 }
220 this.selectedLimit = limit;
221 this.updateRange.emit({
222 page: 1,
223 limit: limit,
224 });
225 };
226 PaginationComponent.decorators = [
227 { type: Component, args: [{
228 selector: 'pagination',
229 template: "<div class=\"ngx-pagination-wrapper\"\n [class.ngx-table__table--dark-pagination-wrapper]=\"config.tableLayout.theme === 'dark'\">\n <div class=\"ngx-pagination-steps\">\n <pagination-template\n #paginationDirective=\"paginationApi\"\n id=\"pagination-controls\"\n [id]=\"id\"\n [class.ngx-table__table--dark-pagination]=\"config.tableLayout.theme === 'dark'\"\n [maxSize]=\"config.paginationMaxSize || 5\"\n (pageChange)=\"onPageChange($event)\">\n <ul class=\"ngx-pagination\"\n role=\"navigation\"\n [attr.aria-label]=\"screenReaderPaginationLabel\"\n [class.responsive]=\"true\">\n <li class=\"pagination-previous\" [class.disabled]=\"paginationDirective.isFirstPage()\" *ngIf=\"directionLinks\">\n <a tabindex=\"0\" *ngIf=\"1 < paginationDirective.getCurrent()\" (keyup.enter)=\"paginationDirective.previous()\"\n (click)=\"paginationDirective.previous()\"\n [attr.aria-label]=\"previousLabel + ' ' + screenReaderPageLabel\">\n {{ previousLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n </a>\n <span *ngIf=\"paginationDirective.isFirstPage()\">\n {{ previousLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n </span>\n </li>\n <li class=\"small-screen\">\n {{ paginationDirective.getCurrent() }} / {{ paginationDirective.getLastPage() }}\n </li>\n <li [class.current]=\"paginationDirective.getCurrent() === page.value\"\n [class.ellipsis]=\"page.label === '...'\"\n *ngFor=\"let page of paginationDirective.pages\">\n <a tabindex=\"0\" (keyup.enter)=\"paginationDirective.setCurrent(page.value)\"\n (click)=\"paginationDirective.setCurrent(page.value)\"\n *ngIf=\"paginationDirective.getCurrent() !== page.value\">\n <span class=\"show-for-sr\">{{ screenReaderPageLabel }} </span>\n <span>{{ page.label }}</span>\n </a>\n <ng-container *ngIf=\"paginationDirective.getCurrent() === page.value\">\n <span class=\"show-for-sr\">{{ screenReaderCurrentLabel }} </span>\n <span>{{ page.label }}</span>\n </ng-container>\n </li>\n <li class=\"pagination-next\" [class.disabled]=\"paginationDirective.isLastPage()\" *ngIf=\"directionLinks\">\n <a tabindex=\"0\" *ngIf=\"!paginationDirective.isLastPage()\" (keyup.enter)=\"paginationDirective.next()\"\n (click)=\"paginationDirective.next()\"\n [attr.aria-label]=\"nextLabel + ' ' + screenReaderPageLabel\">\n {{ nextLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n </a>\n <span *ngIf=\"paginationDirective.isLastPage()\">\n {{ nextLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n </span>\n </li>\n </ul>\n </pagination-template>\n </div>\n <div class=\"ngx-pagination-range\"\n #paginationRange\n [class.ngx-table__table--dark-pagination-range]=\"config.tableLayout.theme === 'dark'\"\n *ngIf=\"config.paginationRangeEnabled\">\n <div class=\"ngx-dropdown ngx-pagination-range-dropdown\"\n id=\"rowAmount\">\n <div class=\"ngx-btn-group\">\n <div class=\"ngx-pagination-range-dropdown-button\"\n (click)=\"showRange = !showRange\">\n {{selectedLimit}} <i class=\"ngx-icon ngx-icon-arrow-down\"></i>\n </div>\n <ul class=\"ngx-menu\" *ngIf=\"showRange\">\n <li class=\"ngx-pagination-range-dropdown-button-item\"\n [class.ngx-pagination-range--selected]=\"limit === selectedLimit\"\n (click)=\"changeLimit(limit, false)\"\n *ngFor=\"let limit of ranges\">\n <span>{{limit}}</span>\n </li>\n </ul>\n </div>\n </div>\n </div>\n</div>\n",
230 changeDetection: ChangeDetectionStrategy.OnPush
231 }] }
232 ];
233 PaginationComponent.propDecorators = {
234 paginationDirective: [{ type: ViewChild, args: ['paginationDirective', { static: true },] }],
235 paginationRange: [{ type: ViewChild, args: ['paginationRange', { static: false },] }],
236 pagination: [{ type: Input }],
237 config: [{ type: Input }],
238 id: [{ type: Input }],
239 updateRange: [{ type: Output }],
240 onClick: [{ type: HostListener, args: ['document:click', ['$event.target'],] }]
241 };
242 return PaginationComponent;
243}());
244
245/**
246 * @fileoverview added by tsickle
247 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
248 */
249var GroupRowsService = /** @class */ (function () {
250 function GroupRowsService() {
251 }
252 /**
253 * @template T
254 * @param {?} data
255 * @param {?} groupRowsBy
256 * @return {?}
257 */
258 GroupRowsService.doGroupRows = /**
259 * @template T
260 * @param {?} data
261 * @param {?} groupRowsBy
262 * @return {?}
263 */
264 function (data, groupRowsBy) {
265 /** @type {?} */
266 var grouped = [];
267 from(data).pipe(groupBy((/**
268 * @param {?} row
269 * @return {?}
270 */
271 function (row) { return row[groupRowsBy]; })), flatMap((/**
272 * @param {?} group
273 * @return {?}
274 */
275 function (group) { return group.pipe(reduce((/**
276 * @param {?} acc
277 * @param {?} curr
278 * @return {?}
279 */
280 function (acc, curr) { return __spread(acc, [curr]); }), [])); }))).subscribe((/**
281 * @param {?} row
282 * @return {?}
283 */
284 function (row) { return grouped.push(row); }));
285 return grouped;
286 };
287 GroupRowsService.decorators = [
288 { type: Injectable }
289 ];
290 return GroupRowsService;
291}());
292
293/**
294 * @fileoverview added by tsickle
295 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
296 */
297var StyleService = /** @class */ (function () {
298 function StyleService() {
299 }
300 /**
301 * @param {?} val
302 * @return {?}
303 */
304 StyleService.prototype.setRowClass = /**
305 * @param {?} val
306 * @return {?}
307 */
308 function (val) {
309 /** @type {?} */
310 var selector = "#table > tbody > tr:nth-child(" + val.row + ")";
311 /** @type {?} */
312 var row = document.querySelector(selector);
313 if (row) {
314 row.className = val.className;
315 }
316 };
317 /**
318 * @param {?} val
319 * @return {?}
320 */
321 StyleService.prototype.setCellClass = /**
322 * @param {?} val
323 * @return {?}
324 */
325 function (val) {
326 /** @type {?} */
327 var selector = "#table > tbody > tr:nth-child(" + val.row + ") > td:nth-child(" + val.cell + ")";
328 /** @type {?} */
329 var cell = document.querySelector(selector);
330 if (cell) {
331 cell.className = val.className;
332 }
333 };
334 /**
335 * @param {?} val
336 * @return {?}
337 */
338 StyleService.prototype.setRowStyle = /**
339 * @param {?} val
340 * @return {?}
341 */
342 function (val) {
343 /** @type {?} */
344 var selector = "#table > tbody > tr:nth-child(" + val.row + ")";
345 /** @type {?} */
346 var row = document.querySelector(selector);
347 if (row) {
348 // tslint:disable-next-line:no-string-literal
349 row.style[val.attr] = val.value;
350 }
351 };
352 /**
353 * @param {?} val
354 * @return {?}
355 */
356 StyleService.prototype.setCellStyle = /**
357 * @param {?} val
358 * @return {?}
359 */
360 function (val) {
361 /** @type {?} */
362 var selector = "#table > tbody > tr:nth-child(" + val.row + ") > td:nth-child(" + val.cell + ")";
363 /** @type {?} */
364 var cell = document.querySelector(selector);
365 if (cell) {
366 // tslint:disable-next-line:no-string-literal
367 cell.style[val.attr] = val.value;
368 }
369 };
370 StyleService.decorators = [
371 { type: Injectable }
372 ];
373 return StyleService;
374}());
375
376/**
377 * @fileoverview added by tsickle
378 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
379 */
380var BaseComponent = /** @class */ (function () {
381 function BaseComponent(cdr, styleService) {
382 var _this = this;
383 this.cdr = cdr;
384 this.styleService = styleService;
385 this.filterCount = -1;
386 this.filteredCountSubject = new Subject();
387 this.tableClass = null;
388 this.grouped = [];
389 this.menuActive = false;
390 this.isSelected = false;
391 this.page = 1;
392 this.count = null;
393 this.sortState = new Map();
394 this.sortKey = null;
395 this.rowContextMenuPosition = {
396 top: null,
397 left: null,
398 value: null,
399 };
400 this.sortBy = {
401 key: '',
402 order: 'asc',
403 };
404 this.selectedDetailsTemplateRowId = new Set();
405 this.loadingHeight = '30px';
406 this.onSelectAllBinded = this.onSelectAll.bind(this);
407 this.id = 'table';
408 this.event = new EventEmitter();
409 this.subscription = this.filteredCountSubject.subscribe((/**
410 * @param {?} count
411 * @return {?}
412 */
413 function (count) {
414 _this.filterCount = count;
415 _this.cdr.detectChanges();
416 }));
417 }
418 /**
419 * @return {?}
420 */
421 BaseComponent.prototype.ngOnInit = /**
422 * @return {?}
423 */
424 function () {
425 if (!this.columns) {
426 console.error('[columns] property required!');
427 }
428 if (this.configuration) {
429 this.config = this.configuration;
430 }
431 else {
432 this.config = DefaultConfigService.config;
433 }
434 this.limit = this.config.rows;
435 if (this.groupRowsBy) {
436 this.grouped = GroupRowsService.doGroupRows(this.data, this.groupRowsBy);
437 }
438 this.doDecodePersistedState();
439 };
440 /**
441 * @param {?} changes
442 * @return {?}
443 */
444 BaseComponent.prototype.ngOnChanges = /**
445 * @param {?} changes
446 * @return {?}
447 */
448 function (changes) {
449 var configuration = changes.configuration, data = changes.data, pagination = changes.pagination, groupRowsBy = changes.groupRowsBy;
450 this.toggleRowIndex = changes.toggleRowIndex;
451 if (configuration && configuration.currentValue) {
452 this.config = configuration.currentValue;
453 }
454 if (data && data.currentValue) {
455 this.doApplyData(data);
456 }
457 if (pagination && pagination.currentValue) {
458 this.count = pagination.currentValue.count;
459 }
460 if (groupRowsBy && groupRowsBy.currentValue) {
461 this.grouped = GroupRowsService.doGroupRows(this.data, this.groupRowsBy);
462 }
463 if (this.toggleRowIndex && this.toggleRowIndex.currentValue) {
464 /** @type {?} */
465 var row = this.toggleRowIndex.currentValue;
466 this.collapseRow(row.index);
467 }
468 };
469 /**
470 * @param {?} column
471 * @return {?}
472 */
473 BaseComponent.prototype.isOrderEnabled = /**
474 * @param {?} column
475 * @return {?}
476 */
477 function (column) {
478 /** @type {?} */
479 var columnOrderEnabled = column.orderEnabled === undefined ? true : !!column.orderEnabled;
480 return this.config.orderEnabled && columnOrderEnabled;
481 };
482 /**
483 * @param {?} column
484 * @return {?}
485 */
486 BaseComponent.prototype.orderBy = /**
487 * @param {?} column
488 * @return {?}
489 */
490 function (column) {
491 if (typeof column.orderEnabled !== 'undefined' && !column.orderEnabled) {
492 return;
493 }
494 this.sortKey = column.key;
495 if (!this.config.orderEnabled || this.sortKey === '') {
496 return;
497 }
498 this.setColumnOrder(this.sortKey);
499 if (!this.config.orderEventOnly && !column.orderEventOnly) {
500 this.sortBy.key = this.sortKey;
501 this.sortBy.order = this.sortState.get(this.sortKey);
502 }
503 else {
504 this.sortBy.key = '';
505 this.sortBy.order = '';
506 }
507 if (!this.config.serverPagination) {
508 this.data = __spread(this.data);
509 }
510 this.sortBy = __assign({}, this.sortBy);
511 /** @type {?} */
512 var value = {
513 key: this.sortKey,
514 order: this.sortState.get(this.sortKey),
515 };
516 this.emitEvent(Event.onOrder, value);
517 };
518 /**
519 * @param {?} $event
520 * @param {?} row
521 * @param {?} key
522 * @param {?} colIndex
523 * @param {?} rowIndex
524 * @return {?}
525 */
526 BaseComponent.prototype.onClick = /**
527 * @param {?} $event
528 * @param {?} row
529 * @param {?} key
530 * @param {?} colIndex
531 * @param {?} rowIndex
532 * @return {?}
533 */
534 function ($event, row, key, colIndex, rowIndex) {
535 if (this.config.selectRow) {
536 this.selectedRow = rowIndex;
537 }
538 if (this.config.selectCol && colIndex) {
539 this.selectedCol = colIndex;
540 }
541 if (this.config.selectCell && colIndex) {
542 this.selectedRow = rowIndex;
543 this.selectedCol = colIndex;
544 }
545 if (this.config.clickEvent) {
546 /** @type {?} */
547 var value = {
548 event: $event,
549 row: row,
550 key: key,
551 rowId: rowIndex,
552 colId: colIndex,
553 };
554 this.emitEvent(Event.onClick, value);
555 }
556 };
557 /**
558 * @param {?} $event
559 * @param {?} row
560 * @param {?} key
561 * @param {?} colIndex
562 * @param {?} rowIndex
563 * @return {?}
564 */
565 BaseComponent.prototype.onDoubleClick = /**
566 * @param {?} $event
567 * @param {?} row
568 * @param {?} key
569 * @param {?} colIndex
570 * @param {?} rowIndex
571 * @return {?}
572 */
573 function ($event, row, key, colIndex, rowIndex) {
574 /** @type {?} */
575 var value = {
576 event: $event,
577 row: row,
578 key: key,
579 rowId: rowIndex,
580 colId: colIndex,
581 };
582 this.emitEvent(Event.onDoubleClick, value);
583 };
584 /**
585 * @param {?} $event
586 * @param {?} row
587 * @param {?} rowIndex
588 * @return {?}
589 */
590 BaseComponent.prototype.onCheckboxSelect = /**
591 * @param {?} $event
592 * @param {?} row
593 * @param {?} rowIndex
594 * @return {?}
595 */
596 function ($event, row, rowIndex) {
597 /** @type {?} */
598 var value = {
599 event: $event,
600 row: row,
601 rowId: rowIndex,
602 };
603 this.emitEvent(Event.onCheckboxSelect, value);
604 };
605 /**
606 * @return {?}
607 */
608 BaseComponent.prototype.onSelectAll = /**
609 * @return {?}
610 */
611 function () {
612 this.isSelected = !this.isSelected;
613 this.emitEvent(Event.onSelectAll, this.isSelected);
614 };
615 /**
616 * @param {?} $event
617 * @return {?}
618 */
619 BaseComponent.prototype.onSearch = /**
620 * @param {?} $event
621 * @return {?}
622 */
623 function ($event) {
624 if (!this.config.serverPagination) {
625 this.term = $event;
626 }
627 this.emitEvent(Event.onSearch, $event);
628 };
629 /**
630 * @param {?} value
631 * @return {?}
632 */
633 BaseComponent.prototype.onGlobalSearch = /**
634 * @param {?} value
635 * @return {?}
636 */
637 function (value) {
638 if (!this.config.serverPagination) {
639 this.globalSearchTerm = value;
640 }
641 this.emitEvent(Event.onGlobalSearch, value);
642 };
643 /**
644 * @param {?} pagination
645 * @return {?}
646 */
647 BaseComponent.prototype.onPagination = /**
648 * @param {?} pagination
649 * @return {?}
650 */
651 function (pagination) {
652 this.page = pagination.page;
653 this.limit = pagination.limit;
654 this.emitEvent(Event.onPagination, pagination);
655 };
656 /**
657 * @private
658 * @param {?} event
659 * @param {?} value
660 * @return {?}
661 */
662 BaseComponent.prototype.emitEvent = /**
663 * @private
664 * @param {?} event
665 * @param {?} value
666 * @return {?}
667 */
668 function (event, value) {
669 this.event.emit({ event: event, value: value });
670 if (this.config.persistState) {
671 localStorage.setItem(event, JSON.stringify(value));
672 }
673 if (this.config.logger) {
674 // tslint:disable-next-line:no-console
675 console.log({ event: event, value: value });
676 }
677 };
678 /**
679 * @param {?} rowIndex
680 * @return {?}
681 */
682 BaseComponent.prototype.collapseRow = /**
683 * @param {?} rowIndex
684 * @return {?}
685 */
686 function (rowIndex) {
687 if (this.selectedDetailsTemplateRowId.has(rowIndex)) {
688 this.selectedDetailsTemplateRowId.delete(rowIndex);
689 this.emitEvent(Event.onRowCollapsedHide, rowIndex);
690 }
691 else {
692 this.selectedDetailsTemplateRowId.add(rowIndex);
693 this.emitEvent(Event.onRowCollapsedShow, rowIndex);
694 }
695 };
696 /**
697 * @private
698 * @return {?}
699 */
700 BaseComponent.prototype.doDecodePersistedState = /**
701 * @private
702 * @return {?}
703 */
704 function () {
705 if (!this.config.persistState) {
706 return;
707 }
708 /** @type {?} */
709 var pagination = localStorage.getItem(Event.onPagination);
710 /** @type {?} */
711 var sort = localStorage.getItem(Event.onOrder);
712 /** @type {?} */
713 var search = localStorage.getItem(Event.onSearch);
714 if (pagination) {
715 this.onPagination(JSON.parse(pagination));
716 }
717 if (sort) {
718 var _a = JSON.parse(sort), key = _a.key, order = _a.order;
719 this.bindApi({
720 type: API.sortBy,
721 value: { column: key, order: order },
722 });
723 }
724 if (search) {
725 this.bindApi({
726 type: API.setInputValue,
727 value: JSON.parse(search),
728 });
729 }
730 };
731 /**
732 * @param {?} rowIndex
733 * @return {?}
734 */
735 BaseComponent.prototype.isRowCollapsed = /**
736 * @param {?} rowIndex
737 * @return {?}
738 */
739 function (rowIndex) {
740 if (this.config.collapseAllRows) {
741 return true;
742 }
743 return this.selectedDetailsTemplateRowId.has(rowIndex);
744 };
745 /**
746 * @param {?} event
747 * @param {?} th
748 * @return {?}
749 */
750 BaseComponent.prototype.onMouseDown = /**
751 * @param {?} event
752 * @param {?} th
753 * @return {?}
754 */
755 function (event, th) {
756 if (!this.config.resizeColumn) {
757 return;
758 }
759 this.th = th;
760 this.startOffset = th.offsetWidth - event.pageX;
761 this.emitEvent(Event.onColumnResizeMouseDown, event);
762 };
763 /**
764 * @param {?} event
765 * @return {?}
766 */
767 BaseComponent.prototype.onMouseMove = /**
768 * @param {?} event
769 * @return {?}
770 */
771 function (event) {
772 if (!this.config.resizeColumn) {
773 return;
774 }
775 if (this.th && this.th.style) {
776 this.th.style.width = this.startOffset + event.pageX + 'px';
777 this.th.style.cursor = 'col-resize';
778 this.th.style['user-select'] = 'none';
779 }
780 };
781 /**
782 * @param {?} event
783 * @return {?}
784 */
785 BaseComponent.prototype.onMouseUp = /**
786 * @param {?} event
787 * @return {?}
788 */
789 function (event) {
790 if (!this.config.resizeColumn) {
791 return;
792 }
793 this.emitEvent(Event.onColumnResizeMouseUp, event);
794 this.th.style.cursor = 'default';
795 this.th = undefined;
796 };
797 Object.defineProperty(BaseComponent.prototype, "isLoading", {
798 get: /**
799 * @return {?}
800 */
801 function () {
802 /** @type {?} */
803 var table = (/** @type {?} */ (document.getElementById(this.id)));
804 if (table && table.rows && table.rows.length > 3) {
805 this.getLoadingHeight(table.rows);
806 }
807 return this.config.isLoading;
808 },
809 enumerable: true,
810 configurable: true
811 });
812 /**
813 * @param {?} rows
814 * @return {?}
815 */
816 BaseComponent.prototype.getLoadingHeight = /**
817 * @param {?} rows
818 * @return {?}
819 */
820 function (rows) {
821 /** @type {?} */
822 var searchEnabled = this.config.searchEnabled ? 1 : 0;
823 /** @type {?} */
824 var headerEnabled = this.config.headerEnabled ? 1 : 0;
825 /** @type {?} */
826 var borderTrHeight = 1;
827 /** @type {?} */
828 var borderDivHeight = 2;
829 this.loadingHeight = (rows.length - searchEnabled - headerEnabled) * (rows[3].offsetHeight - borderTrHeight) - borderDivHeight + 'px';
830 };
831 /**
832 * @param {?} column
833 * @return {?}
834 */
835 BaseComponent.prototype.getColumnWidth = /**
836 * @param {?} column
837 * @return {?}
838 */
839 function (column) {
840 if (column.width) {
841 return column.width;
842 }
843 return this.config.fixedColumnWidth ? 100 / this.columns.length + '%' : null;
844 };
845 /**
846 * @param {?} column
847 * @return {?}
848 */
849 BaseComponent.prototype.getColumnDefinition = /**
850 * @param {?} column
851 * @return {?}
852 */
853 function (column) {
854 return column.searchEnabled || typeof column.searchEnabled === 'undefined';
855 };
856 Object.defineProperty(BaseComponent.prototype, "arrowDefinition", {
857 get: /**
858 * @return {?}
859 */
860 function () {
861 return this.config.showDetailsArrow || typeof this.config.showDetailsArrow === 'undefined';
862 },
863 enumerable: true,
864 configurable: true
865 });
866 /**
867 * @param {?} $event
868 * @param {?} row
869 * @param {?} key
870 * @param {?} colIndex
871 * @param {?} rowIndex
872 * @return {?}
873 */
874 BaseComponent.prototype.onRowContextMenu = /**
875 * @param {?} $event
876 * @param {?} row
877 * @param {?} key
878 * @param {?} colIndex
879 * @param {?} rowIndex
880 * @return {?}
881 */
882 function ($event, row, key, colIndex, rowIndex) {
883 if (!this.config.showContextMenu) {
884 return;
885 }
886 $event.preventDefault();
887 /** @type {?} */
888 var value = {
889 event: $event,
890 row: row,
891 key: key,
892 rowId: rowIndex,
893 colId: colIndex,
894 };
895 this.rowContextMenuPosition = {
896 top: $event.y - 10 + "px",
897 left: $event.x - 10 + "px",
898 value: value,
899 };
900 this.emitEvent(Event.onRowContextMenu, value);
901 };
902 /**
903 * @param {?} pinned
904 * @param {?} column
905 * @return {?}
906 */
907 BaseComponent.prototype.pinnedWidth = /**
908 * @param {?} pinned
909 * @param {?} column
910 * @return {?}
911 */
912 function (pinned, column) {
913 if (pinned) {
914 return 150 * column + 'px'; //
915 }
916 };
917 /**
918 * @private
919 * @param {?} data
920 * @return {?}
921 */
922 BaseComponent.prototype.doApplyData = /**
923 * @private
924 * @param {?} data
925 * @return {?}
926 */
927 function (data) {
928 /** @type {?} */
929 var order = this.columns.find((/**
930 * @param {?} c
931 * @return {?}
932 */
933 function (c) { return !!c.orderBy; }));
934 if (order) {
935 this.sortState.set(this.sortKey, (order.orderBy === 'asc') ? 'desc' : 'asc');
936 this.orderBy(order);
937 }
938 else {
939 this.data = __spread(data.currentValue);
940 }
941 };
942 /**
943 * @param {?} event
944 * @return {?}
945 */
946 BaseComponent.prototype.onDrop = /**
947 * @param {?} event
948 * @return {?}
949 */
950 function (event) {
951 this.emitEvent(Event.onRowDrop, event);
952 moveItemInArray(this.data, event.previousIndex, event.currentIndex);
953 };
954 // DO NOT REMOVE. It is called from parent component. See src/app/demo/api-doc/api-doc.component.ts
955 // DO NOT REMOVE. It is called from parent component. See src/app/demo/api-doc/api-doc.component.ts
956 /**
957 * @param {?} event
958 * @return {?}
959 */
960 BaseComponent.prototype.apiEvent =
961 // DO NOT REMOVE. It is called from parent component. See src/app/demo/api-doc/api-doc.component.ts
962 /**
963 * @param {?} event
964 * @return {?}
965 */
966 function (event) {
967 return this.bindApi(event);
968 };
969 // tslint:disable:no-big-function cognitive-complexity
970 // tslint:disable:no-big-function cognitive-complexity
971 /**
972 * @private
973 * @param {?} event
974 * @return {?}
975 */
976 BaseComponent.prototype.bindApi =
977 // tslint:disable:no-big-function cognitive-complexity
978 /**
979 * @private
980 * @param {?} event
981 * @return {?}
982 */
983 function (event) {
984 var _this = this;
985 switch (event.type) {
986 case API.rowContextMenuClicked:
987 this.rowContextMenuPosition = {
988 top: null,
989 left: null,
990 value: null,
991 };
992 break;
993 case API.toolPanelClicked:
994 // TODO
995 break;
996 case API.toggleRowIndex:
997 this.collapseRow(event.value);
998 break;
999 case API.setInputValue:
1000 if (this.config.searchEnabled) {
1001 event.value.forEach((/**
1002 * @param {?} input
1003 * @return {?}
1004 */
1005 function (input) {
1006 /** @type {?} */
1007 var element = ((/** @type {?} */ (document.getElementById("search_" + input.key))));
1008 if (!element) {
1009 console.error("Column '" + input.key + "' not available in the DOM. Have you misspelled a name?");
1010 }
1011 else {
1012 element.value = input.value;
1013 }
1014 }));
1015 }
1016 this.onSearch(event.value);
1017 this.cdr.detectChanges();
1018 break;
1019 case API.onGlobalSearch:
1020 this.onGlobalSearch(event.value);
1021 this.cdr.detectChanges();
1022 break;
1023 case API.setRowClass:
1024 if (Array.isArray(event.value)) {
1025 event.value.forEach((/**
1026 * @param {?} val
1027 * @return {?}
1028 */
1029 function (val) { return _this.styleService.setRowClass(val); }));
1030 break;
1031 }
1032 this.styleService.setRowClass(event.value);
1033 this.cdr.detectChanges();
1034 break;
1035 case API.setCellClass:
1036 if (Array.isArray(event.value)) {
1037 event.value.forEach((/**
1038 * @param {?} val
1039 * @return {?}
1040 */
1041 function (val) { return _this.styleService.setCellClass(val); }));
1042 break;
1043 }
1044 this.styleService.setCellClass(event.value);
1045 break;
1046 case API.setRowStyle:
1047 if (Array.isArray(event.value)) {
1048 event.value.forEach((/**
1049 * @param {?} val
1050 * @return {?}
1051 */
1052 function (val) { return _this.styleService.setRowStyle(val); }));
1053 break;
1054 }
1055 this.styleService.setRowStyle(event.value);
1056 break;
1057 case API.setCellStyle:
1058 if (Array.isArray(event.value)) {
1059 event.value.forEach((/**
1060 * @param {?} val
1061 * @return {?}
1062 */
1063 function (val) { return _this.styleService.setCellStyle(val); }));
1064 break;
1065 }
1066 this.styleService.setCellStyle(event.value);
1067 break;
1068 case API.setTableClass:
1069 this.tableClass = event.value;
1070 this.cdr.detectChanges();
1071 break;
1072 case API.getPaginationTotalItems:
1073 return this.paginationComponent.paginationDirective.getTotalItems();
1074 case API.getPaginationCurrentPage:
1075 return this.paginationComponent.paginationDirective.getCurrent();
1076 case API.getPaginationLastPage:
1077 return this.paginationComponent.paginationDirective.getLastPage();
1078 case API.setPaginationCurrentPage:
1079 this.paginationComponent.paginationDirective.setCurrent(event.value);
1080 break;
1081 case API.setPaginationRange:
1082 this.paginationComponent.ranges = event.value;
1083 break;
1084 case API.setPaginationPreviousLabel:
1085 this.paginationComponent.previousLabel = event.value;
1086 break;
1087 case API.setPaginationNextLabel:
1088 this.paginationComponent.nextLabel = event.value;
1089 break;
1090 case API.setPaginationDisplayLimit:
1091 this.paginationComponent.changeLimit(event.value, true);
1092 break;
1093 case API.sortBy:
1094 /** @type {?} */
1095 var column = { title: '', key: event.value.column, orderBy: event.value.order };
1096 this.orderBy(column);
1097 this.cdr.detectChanges();
1098 break;
1099 default:
1100 break;
1101 }
1102 };
1103 /**
1104 * @private
1105 * @param {?} key
1106 * @return {?}
1107 */
1108 BaseComponent.prototype.setColumnOrder = /**
1109 * @private
1110 * @param {?} key
1111 * @return {?}
1112 */
1113 function (key) {
1114 switch (this.sortState.get(key)) {
1115 case '':
1116 case undefined:
1117 this.sortState.set(key, 'desc');
1118 break;
1119 case 'asc':
1120 this.config.threeWaySort ?
1121 this.sortState.set(key, '') :
1122 this.sortState.set(key, 'desc');
1123 break;
1124 case 'desc':
1125 this.sortState.set(key, 'asc');
1126 break;
1127 }
1128 if (this.sortState.size > 1) {
1129 /** @type {?} */
1130 var temp = this.sortState.get(key);
1131 this.sortState.clear();
1132 this.sortState.set(key, temp);
1133 }
1134 };
1135 BaseComponent.decorators = [
1136 { type: Component, args: [{
1137 selector: 'ngx-table',
1138 providers: [DefaultConfigService, GroupRowsService, StyleService],
1139 template: "<div class=\"ngx-container\">\n <table [id]=\"id\"\n [ngClass]=\"(tableClass === null || tableClass === '') ? 'ngx-table' : tableClass\"\n [class.ngx-table__table--tiny]=\"config.tableLayout.style === 'tiny'\"\n [class.ngx-table__table--normal]=\"config.tableLayout.style === 'normal'\"\n [class.ngx-table__table--big]=\"config.tableLayout.style === 'big'\"\n [class.ngx-table__table--borderless]=\"config.tableLayout.borderless\"\n [class.ngx-table__table--dark]=\"config.tableLayout.theme === 'dark'\"\n [class.ngx-table__table--hoverable]=\"config.tableLayout.hover\"\n [class.ngx-table__table--striped]=\"config.tableLayout.striped\"\n [class.ngx-table__horizontal-scroll]=\"config.horizontalScroll && !isLoading\">\n <thead>\n <tr class=\"ngx-table__header\" *ngIf=\"config.headerEnabled\">\n <th *ngIf=\"config.checkboxes\" width=\"3%\">\n <ng-container\n *ngIf=\"selectAllTemplate\"\n [ngTemplateOutlet]=\"selectAllTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: onSelectAllBinded }\">\n </ng-container>\n <label class=\"ngx-form-checkbox\" *ngIf=\"!selectAllTemplate\">\n <input type=\"checkbox\" (change)=\"onSelectAll()\">\n <i class=\"ngx-form-icon\" id=\"selectAllCheckbox\"></i>\n </label>\n </th>\n <ng-container *ngFor=\"let column of columns; let colIndex = index\">\n <th class=\"ngx-table__header-cell\"\n [class.pinned-left]=\"column.pinned\"\n [ngClass]=\"column.cssClass && column.cssClass.includeHeader ? column.cssClass.name : ''\"\n [style.left]=\"pinnedWidth(column.pinned, colIndex)\"\n #th\n [style.width]=\"getColumnWidth(column)\"\n (mousedown)=\"onMouseDown($event, th)\"\n (mouseup)=\"onMouseUp($event)\"\n (mousemove)=\"onMouseMove($event)\">\n <div (click)=\"orderBy(column)\" [class.pointer]=\"isOrderEnabled(column)\">\n <div class=\"ngx-table__header-title\">{{ column.title }}<span>&nbsp;</span>\n <i class=\"ngx-icon ngx-icon-pin\" *ngIf=\"column.pinned\"></i>\n <div [style.display]=\"config.orderEnabled ? 'inline' : 'none' \">\n <span *ngIf=\"sortKey === column.key && this.sortState.get(sortKey) === ''\"> -</span>\n <i *ngIf=\"sortKey === column.key && this.sortState.get(sortKey) === 'asc'\"\n class=\"ngx-icon ngx-icon-arrow-up\">\n </i>\n <i *ngIf=\"sortKey === column.key && this.sortState.get(sortKey) === 'desc'\"\n class=\"ngx-icon ngx-icon-arrow-down\">\n </i>\n </div>\n </div>\n </div>\n <div class=\"ngx-table__column-resizer\" *ngIf=\"config.resizeColumn\"></div>\n </th>\n </ng-container>\n <th *ngIf=\"config.additionalActions || config.detailsTemplate || config.collapseAllRows || config.groupRows\"\n class=\"ngx-table__header-cell-additional-actions\">\n <div class=\"ngx-dropdown\"\n *ngIf=\"config.additionalActions\">\n <a class=\"ngx-btn ngx-btn-link\" (click)=\"menuActive = !menuActive\">\n <span class=\"ngx-icon ngx-icon-menu\"></span>\n </a>\n <ul class=\"ngx-menu ngx-table__table-menu\">\n <li class=\"ngx-menu-item\">\n <app-csv-export [data]=\"data\"\n *ngIf=\"config.exportEnabled\">\n </app-csv-export>\n </li>\n </ul>\n </div>\n </th>\n </tr>\n <tr *ngIf=\"config.searchEnabled && !filtersTemplate\"\n class=\"ngx-table__sort-header\">\n <th *ngIf=\"config.checkboxes\"></th>\n <ng-container *ngFor=\"let column of columns; let colIndex = index\">\n <th\n [ngClass]=\"column.cssClass && column.cssClass.includeHeader ? column.cssClass.name : ''\"\n [class.pinned-left]=\"column.pinned\"\n [style.left]=\"pinnedWidth(column.pinned, colIndex)\">\n <table-header\n *ngIf=\"getColumnDefinition(column)\"\n (update)=\"onSearch($event)\"\n [column]=\"column\">\n </table-header>\n </th>\n </ng-container>\n <th *ngIf=\"config.additionalActions || config.detailsTemplate\"></th>\n </tr>\n <ng-container *ngIf=\"filtersTemplate\">\n <tr>\n <ng-container [ngTemplateOutlet]=\"filtersTemplate\">\n </ng-container>\n </tr>\n </ng-container>\n </thead>\n <tbody *ngIf=\"data && !isLoading && !config.draggable\">\n <ng-container *ngIf=\"rowTemplate\">\n <ul class=\"ngx-table__table-row-context-menu\"\n [ngStyle]=\"{'position': 'absolute', 'top': rowContextMenuPosition.top, 'left': rowContextMenuPosition.left }\"\n *ngIf=\"rowContextMenuPosition.top\">\n <ng-container\n [ngTemplateOutlet]=\"rowContextMenu\"\n [ngTemplateOutletContext]=\"{ $implicit: rowContextMenuPosition.value}\">\n </ng-container>\n </ul>\n <ng-container *ngFor=\"let row of data | sort:sortBy | search:term:filteredCountSubject | global:globalSearchTerm:filteredCountSubject | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id };\n let rowIndex = index\">\n <tr\n (click)=\"onClick($event, row, '', null, rowIndex)\"\n (contextmenu)=\"onRowContextMenu($event, row, '', null, rowIndex)\"\n (dblclick)=\"onDoubleClick($event, row, '', null, rowIndex)\"\n [class.ngx-table__table-row--selected]=\"rowIndex == selectedRow && !config.selectCell\">\n <ng-container\n [ngTemplateOutlet]=\"rowTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: rowIndex }\">\n </ng-container>\n <td *ngIf=\"config.detailsTemplate\">\n <span class=\"ngx-icon\"\n *ngIf=\"arrowDefinition\"\n [ngClass]=\"isRowCollapsed(rowIndex) ? 'ngx-icon-arrow-down' : 'ngx-icon-arrow-right'\"\n (click)=\"collapseRow(rowIndex)\">\n </span>\n </td>\n </tr>\n <tr\n *ngIf=\"(config.detailsTemplate && selectedDetailsTemplateRowId.has(rowIndex)) || config.collapseAllRows\">\n <td [attr.colspan]=\"columns.length + 1\">\n <ng-container\n [ngTemplateOutlet]=\"detailsTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: rowIndex }\">\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!rowTemplate && !config.groupRows\">\n <ul class=\"ngx-table__table-row-context-menu\"\n [ngStyle]=\"{'position': 'absolute', 'top': rowContextMenuPosition.top, 'left': rowContextMenuPosition.left }\"\n *ngIf=\"rowContextMenuPosition.top\">\n <ng-container\n [ngTemplateOutlet]=\"rowContextMenu\"\n [ngTemplateOutletContext]=\"{ $implicit: rowContextMenuPosition.value}\">\n </ng-container>\n </ul>\n <ng-container\n *ngFor=\"let row of data | sort:sortBy | search:term:filteredCountSubject | global:globalSearchTerm:filteredCountSubject | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id };\n let rowIndex = index\">\n <tr [class.ngx-table__table-row--selected]=\"rowIndex == selectedRow && !config.selectCell\">\n <td *ngIf=\"config.checkboxes\">\n <label class=\"ngx-form-checkbox\">\n <input type=\"checkbox\"\n id=\"checkbox-{{rowIndex}}\"\n [checked]=\"isSelected\"\n (change)=\"onCheckboxSelect($event, row, rowIndex)\">\n <i class=\"ngx-form-icon\"></i>\n </label>\n </td>\n <ng-container *ngFor=\"let column of columns; let colIndex = index\">\n <td (click)=\"onClick($event, row, column.key, colIndex, rowIndex)\"\n (contextmenu)=\"onRowContextMenu($event, row, column.key, colIndex, rowIndex)\"\n (dblclick)=\"onDoubleClick($event, row, column.key, colIndex, rowIndex)\"\n [class.pinned-left]=\"column.pinned\"\n [ngClass]=\"column.cssClass ? column.cssClass.name : ''\"\n [style.left]=\"pinnedWidth(column.pinned, colIndex)\"\n [class.ngx-table__table-col--selected]=\"colIndex == selectedCol && !config.selectCell\"\n [class.ngx-table__table-cell--selected]=\"colIndex == selectedCol && rowIndex == selectedRow && !config.selectCol && !config.selectRow\"\n >\n <div *ngIf=\"!column.cellTemplate\">{{ row | render:column.key }}</div>\n <ng-container\n *ngIf=\"column.cellTemplate\"\n [ngTemplateOutlet]=\"column.cellTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\">\n </ng-container>\n </td>\n </ng-container>\n <td *ngIf=\"config.additionalActions || config.detailsTemplate\">\n <span class=\"ngx-icon\"\n *ngIf=\"arrowDefinition\"\n [ngClass]=\"isRowCollapsed(rowIndex) ? 'ngx-icon-arrow-down' : 'ngx-icon-arrow-right'\"\n (click)=\"collapseRow(rowIndex)\">\n </span>\n </td>\n </tr>\n <tr\n *ngIf=\"(config.detailsTemplate && selectedDetailsTemplateRowId.has(rowIndex)) || config.collapseAllRows\">\n <td *ngIf=\"config.checkboxes\"></td>\n <td [attr.colspan]=\"columns.length + 1\">\n <ng-container\n [ngTemplateOutlet]=\"detailsTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: rowIndex }\">\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!rowTemplate && config.groupRows\">\n <ng-container\n *ngFor=\"let group of grouped | sort:sortBy:config | search:term:filteredCountSubject:config | global:globalSearchTerm:filteredCountSubject | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id }; let rowIndex = index\">\n <tr>\n <ng-container *ngIf=\"!groupRowsHeaderTemplate\">\n <td [attr.colspan]=\"columns.length\">\n <div>{{group[0][groupRowsBy]}} ({{group.length}})</div>\n </td>\n </ng-container>\n <ng-container\n *ngIf=\"groupRowsHeaderTemplate\"\n [ngTemplateOutlet]=\"groupRowsHeaderTemplate\"\n [ngTemplateOutletContext]=\"{\n total: group.length,\n key: groupRowsBy,\n value: group[0] ? group[0][groupRowsBy] : '',\n group: group,\n index: rowIndex\n }\">\n </ng-container>\n <td>\n <span class=\"ngx-icon\"\n *ngIf=\"arrowDefinition\"\n [ngClass]=\"isRowCollapsed(rowIndex) ? 'ngx-icon-arrow-down' : 'ngx-icon-arrow-right'\"\n (click)=\"collapseRow(rowIndex)\">\n </span>\n </td>\n </tr>\n <ng-container *ngIf=\"selectedDetailsTemplateRowId.has(rowIndex)\">\n <tr *ngFor=\"let row of group\">\n <td *ngFor=\"let column of columns\">\n {{ row | render:column.key }}\n <!-- TODO allow users to add groupRowsTemplateRef -->\n </td>\n <td></td>\n </tr>\n </ng-container>\n </ng-container>\n </ng-container>\n </tbody>\n <tbody *ngIf=\"data && !config.isLoading && config.draggable\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\n <ng-container *ngIf=\"!rowTemplate && !config.groupRows\">\n <ng-container\n *ngFor=\"let row of data | sort:sortBy | search:term:filteredCountSubject | global:globalSearchTerm:filteredCountSubject | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id };\n let rowIndex = index\">\n <tr class=\"ngx-draggable-row\" cdkDrag>\n <td *ngIf=\"config.checkboxes\">\n <label class=\"ngx-form-checkbox\">\n <input type=\"checkbox\"\n id=\"checkbox-draggable-{{rowIndex}}\"\n [checked]=\"isSelected\"\n (change)=\"onCheckboxSelect($event, row, rowIndex)\">\n <i class=\"ngx-form-icon\"></i>\n </label>\n </td>\n <ng-container *ngFor=\"let column of columns; let colIndex = index\">\n <td (click)=\"onClick($event, row, column.key, colIndex, rowIndex)\"\n (dblclick)=\"onDoubleClick($event, row, column.key, colIndex, rowIndex)\"\n [class.ngx-table__table-col--selected]=\"colIndex == selectedCol && !config.selectCell\"\n [class.ngx-table__table-cell--selected]=\"colIndex == selectedCol && rowIndex == selectedRow && !config.selectCol && !config.selectRow\"\n >\n <div>{{ row | render:column.key }}</div>\n </td>\n </ng-container>\n </tr>\n </ng-container>\n </ng-container>\n </tbody>\n <tbody *ngIf=\"filterCount === 0\">\n <tr class=\"ngx-table__body-empty\">\n <ng-container\n *ngIf=\"noResultsTemplate\"\n [ngTemplateOutlet]=\"noResultsTemplate\">\n </ng-container>\n <td [attr.colspan]=\"columns && columns.length + 1\" *ngIf=\"!noResultsTemplate\">\n <div class=\"ngx-table__table-no-results\">\n No results\n </div>\n </td>\n </tr>\n </tbody>\n <tbody *ngIf=\"isLoading\">\n <tr class=\"ngx-table__body-loading\">\n <td [attr.colspan]=\"columns && columns.length + 1\">\n <div [style.height]=\"loadingHeight\"\n class=\"ngx-table__table-loader-wrapper\">\n <div class=\"ngx-table__table-loader\"></div>\n </div>\n </td>\n </tr>\n </tbody>\n <tfoot *ngIf=\"summaryTemplate\">\n <tr>\n <ng-container\n [ngTemplateOutlet]=\"summaryTemplate\"\n [ngTemplateOutletContext]=\"{ total: data.length, limit: limit, page: page }\">\n </ng-container>\n </tr>\n </tfoot>\n </table>\n <pagination\n [attr.id]=\"'pagination' + id\"\n *ngIf=\"config.paginationEnabled\"\n [id]=\"id\"\n #paginationComponent\n [config]=\"config\"\n [pagination]=\"pagination\"\n (updateRange)=\"onPagination($event)\">\n </pagination>\n</div>\n",
1140 changeDetection: ChangeDetectionStrategy.OnPush
1141 }] }
1142 ];
1143 /** @nocollapse */
1144 BaseComponent.ctorParameters = function () { return [
1145 { type: ChangeDetectorRef },
1146 { type: StyleService }
1147 ]; };
1148 BaseComponent.propDecorators = {
1149 paginationComponent: [{ type: ViewChild, args: ['paginationComponent', { static: false },] }],
1150 th: [{ type: ViewChild, args: ['th', { static: false },] }],
1151 configuration: [{ type: Input }],
1152 data: [{ type: Input }],
1153 pagination: [{ type: Input }],
1154 groupRowsBy: [{ type: Input }],
1155 id: [{ type: Input }],
1156 toggleRowIndex: [{ type: Input }],
1157 detailsTemplate: [{ type: Input }],
1158 summaryTemplate: [{ type: Input }],
1159 groupRowsHeaderTemplate: [{ type: Input }],
1160 filtersTemplate: [{ type: Input }],
1161 selectAllTemplate: [{ type: Input }],
1162 noResultsTemplate: [{ type: Input }],
1163 rowContextMenu: [{ type: Input }],
1164 columns: [{ type: Input }],
1165 event: [{ type: Output }],
1166 rowTemplate: [{ type: ContentChild, args: [TemplateRef, { static: true },] }]
1167 };
1168 return BaseComponent;
1169}());
1170
1171/**
1172 * @fileoverview added by tsickle
1173 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
1174 */
1175var CsvExportComponent = /** @class */ (function () {
1176 function CsvExportComponent() {
1177 }
1178 /**
1179 * @return {?}
1180 */
1181 CsvExportComponent.prototype.exportCsv = /**
1182 * @return {?}
1183 */
1184 function () {
1185 /** @type {?} */
1186 var data = this.data;
1187 /** @type {?} */
1188 var csvContent = 'data:text/csv;charset=utf-8,';
1189 /** @type {?} */
1190 var dataString = '';
1191 /** @type {?} */
1192 var x = [];
1193 /** @type {?} */
1194 var keys = Object.keys(this.data[0]);
1195 data.forEach((/**
1196 * @param {?} row
1197 * @param {?} index
1198 * @return {?}
1199 */
1200 function (row, index) {
1201 x[index] = [];
1202 keys.forEach((/**
1203 * @param {?} i
1204 * @return {?}
1205 */
1206 function (i) {
1207 if (row.hasOwnProperty(i)) {
1208 if (typeof row[i] === 'object') {
1209 row[i] = 'Object'; // so far just change object to "Object" string
1210 }
1211 x[index].push(row[i]);
1212 }
1213 }));
1214 }));
1215 csvContent += keys + '\n';
1216 x.forEach((/**
1217 * @param {?} row
1218 * @param {?} index
1219 * @return {?}
1220 */
1221 function (row, index) {
1222 dataString = row.join(',');
1223 csvContent += index < data.length ? dataString + '\n' : dataString;
1224 }));
1225 /** @type {?} */
1226 var encodedUri = encodeURI(csvContent);
1227 /** @type {?} */
1228 var link = document.createElement('a');
1229 link.setAttribute('href', encodedUri);
1230 link.setAttribute('download', 'my_data.csv');
1231 link.click();
1232 };
1233 CsvExportComponent.decorators = [
1234 { type: Component, args: [{
1235 selector: 'app-csv-export',
1236 template: "\n <a (click)=\"exportCsv()\" class=\"ngx-menu-item\">\n CSV export\n </a>"
1237 }] }
1238 ];
1239 CsvExportComponent.propDecorators = {
1240 data: [{ type: Input }]
1241 };
1242 return CsvExportComponent;
1243}());
1244
1245/**
1246 * @fileoverview added by tsickle
1247 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
1248 */
1249var HeaderComponent = /** @class */ (function () {
1250 function HeaderComponent() {
1251 this.update = new EventEmitter();
1252 }
1253 /**
1254 * @param {?} key
1255 * @return {?}
1256 */
1257 HeaderComponent.prototype.unifyKey = /**
1258 * @param {?} key
1259 * @return {?}
1260 */
1261 function (key) {
1262 return key.replace('.', '_');
1263 };
1264 /**
1265 * @param {?} input
1266 * @return {?}
1267 */
1268 HeaderComponent.prototype.onSearch = /**
1269 * @param {?} input
1270 * @return {?}
1271 */
1272 function (input) {
1273 this.update.emit([
1274 { value: input.value, key: this.column.key },
1275 ]);
1276 };
1277 HeaderComponent.decorators = [
1278 { type: Component, args: [{
1279 selector: 'table-header',
1280 template: "<label for=\"search_{{ unifyKey(column.key) }}\">\n <input type=\"text\"\n id=\"search_{{ unifyKey(column.key) }}\"\n aria-label=\"Search\"\n placeholder=\"{{ column.placeholder ? column.placeholder : column.title }}\"\n class=\"ngx-table__header-search\"\n #input\n (input)=\"onSearch(input)\"\n >\n</label>\n"
1281 }] }
1282 ];
1283 HeaderComponent.propDecorators = {
1284 column: [{ type: Input }],
1285 update: [{ type: Output }]
1286 };
1287 return HeaderComponent;
1288}());
1289
1290/**
1291 * @fileoverview added by tsickle
1292 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
1293 */
1294var GlobalSearchPipe = /** @class */ (function () {
1295 function GlobalSearchPipe() {
1296 }
1297 /**
1298 * @param {?} array
1299 * @param {?} filter
1300 * @param {?} filteredCountSubject
1301 * @return {?}
1302 */
1303 GlobalSearchPipe.prototype.transform = /**
1304 * @param {?} array
1305 * @param {?} filter
1306 * @param {?} filteredCountSubject
1307 * @return {?}
1308 */
1309 function (array, filter, filteredCountSubject) {
1310 filteredCountSubject.next(0);
1311 if (typeof array === 'undefined') {
1312 return;
1313 }
1314 if (typeof filter === 'undefined' || Object.keys(filter).length === 0 || filter === '') {
1315 filteredCountSubject.next(array.length);
1316 return array;
1317 }
1318 /** @type {?} */
1319 var arr = array.filter((/**
1320 * @param {?} row
1321 * @return {?}
1322 */
1323 function (row) {
1324 /** @type {?} */
1325 var element = JSON.stringify(Object.values(row));
1326 /** @type {?} */
1327 var strings = filter.split(',');
1328 return strings.some((/**
1329 * @param {?} string
1330 * @return {?}
1331 */
1332 function (string) { return element.toLocaleLowerCase().indexOf(string.trim().toLocaleLowerCase()) > -1; }));
1333 }));
1334 filteredCountSubject.next(arr.length);
1335 return arr;
1336 };
1337 GlobalSearchPipe.decorators = [
1338 { type: Pipe, args: [{
1339 name: 'global',
1340 },] }
1341 ];
1342 return GlobalSearchPipe;
1343}());
1344
1345/**
1346 * @fileoverview added by tsickle
1347 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
1348 */
1349var FiltersService = /** @class */ (function () {
1350 function FiltersService() {
1351 }
1352 /**
1353 * @param {?} p
1354 * @param {?} o
1355 * @return {?}
1356 */
1357 FiltersService.getPath = /**
1358 * @param {?} p
1359 * @param {?} o
1360 * @return {?}
1361 */
1362 function (p, o) {
1363 // https://github.com/dherges/ng-packagr/issues/696
1364 /* tslint:disable-next-line */
1365 /** @type {?} */
1366 var result = p.reduce((/**
1367 * @param {?} xs
1368 * @param {?} x
1369 * @return {?}
1370 */
1371 function (xs, x) { return (xs && typeof xs[x] !== 'undefined') ? xs[x] : null; }), o);
1372 return result;
1373 };
1374 FiltersService.decorators = [
1375 { type: Injectable }
1376 ];
1377 return FiltersService;
1378}());
1379
1380/**
1381 * @fileoverview added by tsickle
1382 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
1383 */
1384var RenderPipe = /** @class */ (function () {
1385 function RenderPipe() {
1386 }
1387 /**
1388 * @param {?} row
1389 * @param {?} key
1390 * @return {?}
1391 */
1392 RenderPipe.prototype.transform = /**
1393 * @param {?} row
1394 * @param {?} key
1395 * @return {?}
1396 */
1397 function (row, key) {
1398 /** @type {?} */
1399 var split = key.split('.');
1400 return FiltersService.getPath(split, row);
1401 };
1402 RenderPipe.decorators = [
1403 { type: Pipe, args: [{
1404 name: 'render',
1405 },] }
1406 ];
1407 return RenderPipe;
1408}());
1409
1410/**
1411 * @fileoverview added by tsickle
1412 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
1413 */
1414var SearchPipe = /** @class */ (function () {
1415 function SearchPipe() {
1416 this.filters = {};
1417 }
1418 /**
1419 * @param {?} array
1420 * @param {?} filter
1421 * @param {?} filteredCountSubject
1422 * @param {?=} config
1423 * @return {?}
1424 */
1425 SearchPipe.prototype.transform = /**
1426 * @param {?} array
1427 * @param {?} filter
1428 * @param {?} filteredCountSubject
1429 * @param {?=} config
1430 * @return {?}
1431 */
1432 function (array, filter, filteredCountSubject, config) {
1433 var _this = this;
1434 filteredCountSubject.next(0);
1435 if (typeof array === 'undefined') {
1436 return;
1437 }
1438 if (typeof filter === 'undefined') {
1439 filteredCountSubject.next(array.length);
1440 return array;
1441 }
1442 filter.forEach((/**
1443 * @param {?} f
1444 * @return {?}
1445 */
1446 function (f) {
1447 _this.filters[f.key] = f.value.toString().toLocaleLowerCase();
1448 if (Object.keys(f).length === 0 || f.value === '') {
1449 delete _this.filters[f.key];
1450 }
1451 }));
1452 if (config && config.groupRows) {
1453 return array.map((/**
1454 * @param {?} arr
1455 * @return {?}
1456 */
1457 function (arr) { return _this.filterGroup(arr, filteredCountSubject); }));
1458 }
1459 return this.filterGroup(array, filteredCountSubject);
1460 };
1461 /**
1462 * @private
1463 * @param {?} array
1464 * @param {?} filteredCountSubject
1465 * @return {?}
1466 */
1467 SearchPipe.prototype.filterGroup = /**
1468 * @private
1469 * @param {?} array
1470 * @param {?} filteredCountSubject
1471 * @return {?}
1472 */
1473 function (array, filteredCountSubject) {
1474 var _this = this;
1475 /** @type {?} */
1476 var arr = array.filter((/**
1477 * @param {?} obj
1478 * @return {?}
1479 */
1480 function (obj) {
1481 return Object.keys(_this.filters).every((/**
1482 * @param {?} c
1483 * @return {?}
1484 */
1485 function (c) {
1486 /** @type {?} */
1487 var split = c.split('.');
1488 /** @type {?} */
1489 var val = FiltersService.getPath(split, obj);
1490 /** @type {?} */
1491 var element = (typeof val === 'object') ? JSON.stringify(val) : val.toString().toLocaleLowerCase();
1492 /** @type {?} */
1493 var strings = _this.filters[c].split(',');
1494 return strings.some((/**
1495 * @param {?} string
1496 * @return {?}
1497 */
1498 function (string) { return element.indexOf(string.trim()) > -1; }));
1499 }));
1500 }));
1501 filteredCountSubject.next(arr.length);
1502 return arr;
1503 };
1504 SearchPipe.decorators = [
1505 { type: Pipe, args: [{
1506 name: 'search',
1507 },] }
1508 ];
1509 return SearchPipe;
1510}());
1511
1512/**
1513 * @fileoverview added by tsickle
1514 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
1515 */
1516var SortPipe = /** @class */ (function () {
1517 function SortPipe() {
1518 this.defaultArray = [];
1519 }
1520 /**
1521 * @private
1522 * @param {?} aV
1523 * @param {?} bV
1524 * @return {?}
1525 */
1526 SortPipe.isNaN = /**
1527 * @private
1528 * @param {?} aV
1529 * @param {?} bV
1530 * @return {?}
1531 */
1532 function (aV, bV) {
1533 return (isNaN(parseFloat(aV)) || !isFinite(aV)) || (isNaN(parseFloat(bV)) || !isFinite(bV));
1534 };
1535 /**
1536 * @private
1537 * @param {?} a
1538 * @param {?} b
1539 * @param {?} key
1540 * @return {?}
1541 */
1542 SortPipe.compare = /**
1543 * @private
1544 * @param {?} a
1545 * @param {?} b
1546 * @param {?} key
1547 * @return {?}
1548 */
1549 function (a, b, key) {
1550 /** @type {?} */
1551 var split = key.split('.');
1552 /** @type {?} */
1553 var aPath = FiltersService.getPath(split, a);
1554 /** @type {?} */
1555 var bPath = FiltersService.getPath(split, b);
1556 /** @type {?} */
1557 var aValue = (aPath + '').toLowerCase();
1558 /** @type {?} */
1559 var bValue = (bPath + '').toLowerCase();
1560 if (SortPipe.isNaN(aPath, bPath)) {
1561 return aValue.localeCompare(bValue);
1562 }
1563 else {
1564 if (parseFloat(aPath) < parseFloat(bPath)) {
1565 return -1;
1566 }
1567 if (parseFloat(aPath) > parseFloat(bPath)) {
1568 return 1;
1569 }
1570 }
1571 return 0;
1572 };
1573 /**
1574 * @param {?} array
1575 * @param {?} filter
1576 * @param {?=} config
1577 * @return {?}
1578 */
1579 SortPipe.prototype.transform = /**
1580 * @param {?} array
1581 * @param {?} filter
1582 * @param {?=} config
1583 * @return {?}
1584 */
1585 function (array, filter, config) {
1586 if (this.defaultArray.length === 0) {
1587 this.defaultArray = array;
1588 }
1589 if (!filter.key || filter.key === '') {
1590 return array;
1591 }
1592 if (filter.order === '') {
1593 return this.defaultArray;
1594 }
1595 if (filter.order === 'asc') {
1596 return this.sortAsc(config, array, filter);
1597 }
1598 else {
1599 return this.sortDesc(config, array, filter);
1600 }
1601 };
1602 /**
1603 * @private
1604 * @param {?} config
1605 * @param {?} array
1606 * @param {?} filter
1607 * @return {?}
1608 */
1609 SortPipe.prototype.sortAsc = /**
1610 * @private
1611 * @param {?} config
1612 * @param {?} array
1613 * @param {?} filter
1614 * @return {?}
1615 */
1616 function (config, array, filter) {
1617 if (config && config.groupRows) {
1618 return array.map((/**
1619 * @param {?} arr
1620 * @return {?}
1621 */
1622 function (arr) { return arr.sort((/**
1623 * @param {?} a
1624 * @param {?} b
1625 * @return {?}
1626 */
1627 function (a, b) { return SortPipe.compare(a, b, filter.key); })); }));
1628 }
1629 return array.sort((/**
1630 * @param {?} a
1631 * @param {?} b
1632 * @return {?}
1633 */
1634 function (a, b) { return SortPipe.compare(a, b, filter.key); }));
1635 };
1636 /**
1637 * @private
1638 * @param {?} config
1639 * @param {?} array
1640 * @param {?} filter
1641 * @return {?}
1642 */
1643 SortPipe.prototype.sortDesc = /**
1644 * @private
1645 * @param {?} config
1646 * @param {?} array
1647 * @param {?} filter
1648 * @return {?}
1649 */
1650 function (config, array, filter) {
1651 if (config && config.groupRows) {
1652 return array.map((/**
1653 * @param {?} arr
1654 * @return {?}
1655 */
1656 function (arr) { return arr.sort((/**
1657 * @param {?} a
1658 * @param {?} b
1659 * @return {?}
1660 */
1661 function (a, b) { return SortPipe.compare(b, a, filter.key); })); }));
1662 }
1663 return array.sort((/**
1664 * @param {?} a
1665 * @param {?} b
1666 * @return {?}
1667 */
1668 function (a, b) { return SortPipe.compare(b, a, filter.key); }));
1669 };
1670 SortPipe.decorators = [
1671 { type: Pipe, args: [{
1672 name: 'sort',
1673 },] }
1674 ];
1675 return SortPipe;
1676}());
1677
1678/**
1679 * @fileoverview added by tsickle
1680 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
1681 */
1682var BaseModule = /** @class */ (function () {
1683 function BaseModule() {
1684 }
1685 BaseModule.decorators = [
1686 { type: NgModule, args: [{
1687 declarations: [
1688 BaseComponent,
1689 CsvExportComponent,
1690 HeaderComponent,
1691 PaginationComponent,
1692 SearchPipe,
1693 RenderPipe,
1694 GlobalSearchPipe,
1695 SortPipe,
1696 ],
1697 imports: [
1698 CommonModule,
1699 NgxPaginationModule,
1700 DragDropModule,
1701 ],
1702 exports: [BaseComponent],
1703 },] }
1704 ];
1705 return BaseModule;
1706}());
1707
1708/**
1709 * @fileoverview added by tsickle
1710 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
1711 */
1712var TableModule = /** @class */ (function () {
1713 function TableModule() {
1714 }
1715 TableModule.decorators = [
1716 { type: NgModule, args: [{
1717 imports: [
1718 CommonModule,
1719 BaseModule,
1720 ],
1721 bootstrap: [BaseComponent],
1722 exports: [BaseComponent],
1723 providers: [],
1724 },] }
1725 ];
1726 return TableModule;
1727}());
1728
1729/**
1730 * @fileoverview added by tsickle
1731 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
1732 */
1733
1734/**
1735 * @fileoverview added by tsickle
1736 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
1737 */
1738
1739export { API, DefaultConfig, Event, STYLE, THEME, TableModule, DefaultConfigService as ɵa, BaseModule as ɵb, BaseComponent as ɵc, GroupRowsService as ɵd, StyleService as ɵe, CsvExportComponent as ɵf, HeaderComponent as ɵg, PaginationComponent as ɵh, SearchPipe as ɵi, RenderPipe as ɵj, GlobalSearchPipe as ɵk, SortPipe as ɵl };
1740//# sourceMappingURL=ngx-easy-table.js.map