1 | import * as i3 from '@angular/common';
|
2 | import { CommonModule } from '@angular/common';
|
3 | import * as i0 from '@angular/core';
|
4 | import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, ViewChild, Input, Output, HostListener, ViewChildren, Pipe, TemplateRef, ContentChild, NgModule } from '@angular/core';
|
5 | import * as i3$1 from '@angular/cdk/drag-drop';
|
6 | import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
|
7 | import { from, Subject } from 'rxjs';
|
8 | import { groupBy, mergeMap, reduce, takeUntil, throttleTime, filter } from 'rxjs/operators';
|
9 | import * as i1 from '@angular/cdk/scrolling';
|
10 | import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
|
11 | import * as i2 from 'ngx-pagination';
|
12 | import { NgxPaginationModule } from 'ngx-pagination';
|
13 |
|
14 | var STYLE;
|
15 | (function (STYLE) {
|
16 | STYLE["TINY"] = "tiny";
|
17 | STYLE["BIG"] = "big";
|
18 | STYLE["NORMAL"] = "normal";
|
19 | })(STYLE || (STYLE = {}));
|
20 | var THEME;
|
21 | (function (THEME) {
|
22 | THEME["LIGHT"] = "light";
|
23 | THEME["DARK"] = "dark";
|
24 | })(THEME || (THEME = {}));
|
25 |
|
26 | var Event;
|
27 | (function (Event) {
|
28 | Event["onPagination"] = "onPagination";
|
29 | Event["onOrder"] = "onOrder";
|
30 | Event["onGlobalSearch"] = "onGlobalSearch";
|
31 | Event["onSearch"] = "onSearch";
|
32 | Event["onClick"] = "onClick";
|
33 | Event["onDoubleClick"] = "onDoubleClick";
|
34 | Event["onCheckboxSelect"] = "onCheckboxSelect";
|
35 | Event["onRadioSelect"] = "onRadioSelect";
|
36 | Event["onCheckboxToggle"] = "onCheckboxToggle";
|
37 | Event["onSelectAll"] = "onSelectAll";
|
38 | Event["onInfiniteScrollEnd"] = "onInfiniteScrollEnd";
|
39 | Event["onColumnResizeMouseDown"] = "onColumnResizeMouseDown";
|
40 | Event["onColumnResizeMouseUp"] = "onColumnResizeMouseUp";
|
41 | Event["onRowDrop"] = "onRowDrop";
|
42 | Event["onReorderStart"] = "onReorderStart";
|
43 | Event["onRowCollapsedShow"] = "onRowCollapsedShow";
|
44 | Event["onRowCollapsedHide"] = "onRowCollapsedHide";
|
45 | Event["onRowContextMenu"] = "onRowContextMenu";
|
46 | })(Event || (Event = {}));
|
47 |
|
48 | var API;
|
49 | (function (API) {
|
50 | API["rowContextMenuClicked"] = "rowContextMenuClicked";
|
51 | API["setInputValue"] = "setInputValue";
|
52 | API["toggleRowIndex"] = "toggleRowIndex";
|
53 | API["toggleCheckbox"] = "toggleCheckbox";
|
54 | API["onGlobalSearch"] = "onGlobalSearch";
|
55 | API["setPaginationCurrentPage"] = "setPaginationCurrentPage";
|
56 | API["getPaginationCurrentPage"] = "getPaginationCurrentPage";
|
57 | API["getPaginationTotalItems"] = "getPaginationTotalItems";
|
58 | API["getNumberOfRowsPerPage"] = "getNumberOfRowsPerPage";
|
59 | API["getPaginationLastPage"] = "getPaginationLastPage";
|
60 | API["setPaginationRange"] = "setPaginationRange";
|
61 | API["setPaginationPreviousLabel"] = "setPaginationPreviousLabel";
|
62 | API["setPaginationNextLabel"] = "setPaginationNextLabel";
|
63 | API["setPaginationDisplayLimit"] = "setPaginationDisplayLimit";
|
64 | API["setTableClass"] = "setTableClass";
|
65 | API["setRowClass"] = "setRowClass";
|
66 | API["setCellClass"] = "setCellClass";
|
67 | API["setRowStyle"] = "setRowStyle";
|
68 | API["setCellStyle"] = "setCellStyle";
|
69 | API["sortBy"] = "sortBy";
|
70 | })(API || (API = {}));
|
71 |
|
72 |
|
73 | const DefaultConfig = {
|
74 | searchEnabled: false,
|
75 | headerEnabled: true,
|
76 | orderEnabled: true,
|
77 | orderEventOnly: false,
|
78 | paginationEnabled: true,
|
79 | exportEnabled: false,
|
80 | clickEvent: true,
|
81 | selectRow: false,
|
82 | selectCol: false,
|
83 | selectCell: false,
|
84 | rows: 10,
|
85 | additionalActions: false,
|
86 | serverPagination: false,
|
87 | isLoading: false,
|
88 | detailsTemplate: false,
|
89 | groupRows: false,
|
90 | paginationRangeEnabled: true,
|
91 | collapseAllRows: false,
|
92 | checkboxes: false,
|
93 | radio: false,
|
94 | resizeColumn: false,
|
95 | fixedColumnWidth: true,
|
96 | horizontalScroll: false,
|
97 | draggable: false,
|
98 | logger: false,
|
99 | showDetailsArrow: false,
|
100 | showContextMenu: false,
|
101 | persistState: false,
|
102 | paginationMaxSize: 5,
|
103 | threeWaySort: false,
|
104 | onDragOver: false,
|
105 | tableLayout: {
|
106 | style: STYLE.NORMAL,
|
107 | theme: THEME.LIGHT,
|
108 | borderless: false,
|
109 | hover: true,
|
110 | striped: false,
|
111 | },
|
112 | };
|
113 | class DefaultConfigService {
|
114 | }
|
115 | DefaultConfigService.config = DefaultConfig;
|
116 | DefaultConfigService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
117 | DefaultConfigService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultConfigService });
|
118 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultConfigService, decorators: [{
|
119 | type: Injectable
|
120 | }] });
|
121 |
|
122 | class GroupRowsService {
|
123 | static doGroupRows(data, groupRowsBy) {
|
124 | const grouped = [];
|
125 | from(data)
|
126 | .pipe(groupBy((row) => row[groupRowsBy]), mergeMap((group) => group.pipe(reduce((acc, curr) => [...acc, curr], []))))
|
127 | .subscribe((row) => grouped.push(row));
|
128 | return grouped;
|
129 | }
|
130 | }
|
131 | GroupRowsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: GroupRowsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
132 | GroupRowsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: GroupRowsService });
|
133 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: GroupRowsService, decorators: [{
|
134 | type: Injectable
|
135 | }] });
|
136 |
|
137 |
|
138 | class StyleService {
|
139 | setRowClass(val) {
|
140 | const selector = `#table > tbody > tr:nth-child(${val.row})`;
|
141 | const row = document.querySelector(selector);
|
142 | if (row) {
|
143 | row.classList.add(val.className);
|
144 | }
|
145 | }
|
146 | setCellClass(val) {
|
147 | const selector = `#table > tbody > tr:nth-child(${val.row}) > td:nth-child(${val.cell})`;
|
148 | const cell = document.querySelector(selector);
|
149 | if (cell) {
|
150 | cell.classList.add(val.className);
|
151 | }
|
152 | }
|
153 | setRowStyle(val) {
|
154 | const selector = `#table > tbody > tr:nth-child(${val.row})`;
|
155 | const row = document.querySelector(selector);
|
156 | if (row) {
|
157 |
|
158 | row.style[val.attr] = val.value;
|
159 | }
|
160 | }
|
161 | setCellStyle(val) {
|
162 | const selector = `#table > tbody > tr:nth-child(${val.row}) > td:nth-child(${val.cell})`;
|
163 | const cell = document.querySelector(selector);
|
164 | if (cell) {
|
165 |
|
166 | cell.style[val.attr] = val.value;
|
167 | }
|
168 | }
|
169 | pinnedWidth(pinned, column) {
|
170 | if (pinned) {
|
171 | return 150 * column + 'px';
|
172 | }
|
173 | }
|
174 | }
|
175 | StyleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StyleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
176 | StyleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StyleService });
|
177 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StyleService, decorators: [{
|
178 | type: Injectable
|
179 | }] });
|
180 |
|
181 | class PaginationComponent {
|
182 | constructor() {
|
183 | this.updateRange = new EventEmitter();
|
184 | this.ranges = [5, 10, 25, 50, 100];
|
185 | this.showRange = false;
|
186 | this.screenReaderPaginationLabel = 'Pagination';
|
187 | this.screenReaderPageLabel = 'page';
|
188 | this.screenReaderCurrentLabel = 'You are on page';
|
189 | this.previousLabel = '';
|
190 | this.nextLabel = '';
|
191 | this.directionLinks = true;
|
192 | }
|
193 | onClick(targetElement) {
|
194 | if (this.paginationRange && !this.paginationRange.nativeElement.contains(targetElement)) {
|
195 | this.showRange = false;
|
196 | }
|
197 | }
|
198 | ngOnChanges(changes) {
|
199 | const { config } = changes;
|
200 | if (config && config.currentValue) {
|
201 | this.selectedLimit = this.config.rows;
|
202 | }
|
203 | }
|
204 | onPageChange(page) {
|
205 | this.updateRange.emit({
|
206 | page,
|
207 | limit: this.selectedLimit,
|
208 | });
|
209 | }
|
210 | changeLimit(limit, callFromAPI) {
|
211 | if (!callFromAPI) {
|
212 | this.showRange = !this.showRange;
|
213 | }
|
214 | this.selectedLimit = limit;
|
215 | this.updateRange.emit({
|
216 | page: 1,
|
217 | limit,
|
218 | });
|
219 | }
|
220 | }
|
221 | PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
222 | PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PaginationComponent, selector: "pagination", inputs: { pagination: "pagination", config: "config", id: "id" }, outputs: { updateRange: "updateRange" }, host: { listeners: { "document:click": "onClick($event.target)" } }, viewQueries: [{ propertyName: "paginationDirective", first: true, predicate: ["paginationDirective"], descendants: true }, { propertyName: "paginationRange", first: true, predicate: ["paginationRange"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"ngx-pagination-wrapper\"\n [style.display]=\"config.paginationEnabled ? '' : 'none'\"\n [class.ngx-table__table--dark-pagination-wrapper]=\"config.tableLayout.theme === 'dark'\"\n>\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 >\n <ul\n class=\"ngx-pagination\"\n role=\"navigation\"\n [attr.aria-label]=\"screenReaderPaginationLabel\"\n [class.responsive]=\"true\"\n >\n <li\n class=\"pagination-previous\"\n [class.disabled]=\"paginationDirective.isFirstPage()\"\n *ngIf=\"directionLinks\"\n >\n <a\n tabindex=\"0\"\n *ngIf=\"1 < paginationDirective.getCurrent()\"\n (keyup.enter)=\"paginationDirective.previous()\"\n (click)=\"paginationDirective.previous()\"\n [attr.aria-label]=\"previousLabel + ' ' + screenReaderPageLabel\"\n >\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\n [class.current]=\"paginationDirective.getCurrent() === page.value\"\n [class.ellipsis]=\"page.label === '...'\"\n *ngFor=\"let page of paginationDirective.pages\"\n >\n <a\n tabindex=\"0\"\n (keyup.enter)=\"paginationDirective.setCurrent(page.value)\"\n (click)=\"paginationDirective.setCurrent(page.value)\"\n *ngIf=\"paginationDirective.getCurrent() !== page.value\"\n >\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\n class=\"pagination-next\"\n [class.disabled]=\"paginationDirective.isLastPage()\"\n *ngIf=\"directionLinks\"\n >\n <a\n tabindex=\"0\"\n *ngIf=\"!paginationDirective.isLastPage()\"\n (keyup.enter)=\"paginationDirective.next()\"\n (click)=\"paginationDirective.next()\"\n [attr.aria-label]=\"nextLabel + ' ' + screenReaderPageLabel\"\n >\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\n class=\"ngx-pagination-range\"\n #paginationRange\n [class.ngx-table__table--dark-pagination-range]=\"config.tableLayout.theme === 'dark'\"\n *ngIf=\"config.paginationRangeEnabled\"\n >\n <div class=\"ngx-dropdown ngx-pagination-range-dropdown\" id=\"rowAmount\">\n <div class=\"ngx-btn-group\">\n <div class=\"ngx-pagination-range-dropdown-button\" (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\n 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 >\n <span>{{limit}}</span>\n </li>\n </ul>\n </div>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.PaginationControlsDirective, selector: "pagination-template,[pagination-template]", inputs: ["id", "maxSize"], outputs: ["pageChange", "pageBoundsCorrection"], exportAs: ["paginationApi"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
223 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginationComponent, decorators: [{
|
224 | type: Component,
|
225 | args: [{ selector: 'pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"ngx-pagination-wrapper\"\n [style.display]=\"config.paginationEnabled ? '' : 'none'\"\n [class.ngx-table__table--dark-pagination-wrapper]=\"config.tableLayout.theme === 'dark'\"\n>\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 >\n <ul\n class=\"ngx-pagination\"\n role=\"navigation\"\n [attr.aria-label]=\"screenReaderPaginationLabel\"\n [class.responsive]=\"true\"\n >\n <li\n class=\"pagination-previous\"\n [class.disabled]=\"paginationDirective.isFirstPage()\"\n *ngIf=\"directionLinks\"\n >\n <a\n tabindex=\"0\"\n *ngIf=\"1 < paginationDirective.getCurrent()\"\n (keyup.enter)=\"paginationDirective.previous()\"\n (click)=\"paginationDirective.previous()\"\n [attr.aria-label]=\"previousLabel + ' ' + screenReaderPageLabel\"\n >\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\n [class.current]=\"paginationDirective.getCurrent() === page.value\"\n [class.ellipsis]=\"page.label === '...'\"\n *ngFor=\"let page of paginationDirective.pages\"\n >\n <a\n tabindex=\"0\"\n (keyup.enter)=\"paginationDirective.setCurrent(page.value)\"\n (click)=\"paginationDirective.setCurrent(page.value)\"\n *ngIf=\"paginationDirective.getCurrent() !== page.value\"\n >\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\n class=\"pagination-next\"\n [class.disabled]=\"paginationDirective.isLastPage()\"\n *ngIf=\"directionLinks\"\n >\n <a\n tabindex=\"0\"\n *ngIf=\"!paginationDirective.isLastPage()\"\n (keyup.enter)=\"paginationDirective.next()\"\n (click)=\"paginationDirective.next()\"\n [attr.aria-label]=\"nextLabel + ' ' + screenReaderPageLabel\"\n >\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\n class=\"ngx-pagination-range\"\n #paginationRange\n [class.ngx-table__table--dark-pagination-range]=\"config.tableLayout.theme === 'dark'\"\n *ngIf=\"config.paginationRangeEnabled\"\n >\n <div class=\"ngx-dropdown ngx-pagination-range-dropdown\" id=\"rowAmount\">\n <div class=\"ngx-btn-group\">\n <div class=\"ngx-pagination-range-dropdown-button\" (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\n 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 >\n <span>{{limit}}</span>\n </li>\n </ul>\n </div>\n </div>\n </div>\n</div>\n" }]
|
226 | }], propDecorators: { paginationDirective: [{
|
227 | type: ViewChild,
|
228 | args: ['paginationDirective']
|
229 | }], paginationRange: [{
|
230 | type: ViewChild,
|
231 | args: ['paginationRange']
|
232 | }], pagination: [{
|
233 | type: Input
|
234 | }], config: [{
|
235 | type: Input
|
236 | }], id: [{
|
237 | type: Input
|
238 | }], updateRange: [{
|
239 | type: Output
|
240 | }], onClick: [{
|
241 | type: HostListener,
|
242 | args: ['document:click', ['$event.target']]
|
243 | }] } });
|
244 |
|
245 | class HeaderComponent {
|
246 | constructor() {
|
247 | this.update = new EventEmitter();
|
248 | }
|
249 | unifyKey(key) {
|
250 | return key.replace('.', '_');
|
251 | }
|
252 | onSearch(input) {
|
253 | this.update.emit([{ value: input.value, key: this.column.key }]);
|
254 | }
|
255 | }
|
256 | HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
257 | HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: HeaderComponent, selector: "table-header", inputs: { column: "column" }, outputs: { update: "update" }, ngImport: i0, template: "<label for=\"search_{{ unifyKey(column.key) }}\">\n <input\n 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", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
258 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HeaderComponent, decorators: [{
|
259 | type: Component,
|
260 | args: [{ selector: 'table-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label for=\"search_{{ unifyKey(column.key) }}\">\n <input\n 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" }]
|
261 | }], propDecorators: { column: [{
|
262 | type: Input
|
263 | }], update: [{
|
264 | type: Output
|
265 | }] } });
|
266 |
|
267 | class TableTHeadComponent {
|
268 | constructor(styleService) {
|
269 | this.styleService = styleService;
|
270 | this.menuActive = false;
|
271 | this.openedHeaderActionTemplate = null;
|
272 | this.onSelectAllBinded = this.onSelectAll.bind(this);
|
273 | this.filter = new EventEmitter();
|
274 | this.order = new EventEmitter();
|
275 | this.selectAll = new EventEmitter();
|
276 | this.event = new EventEmitter();
|
277 | }
|
278 | onClick(targetElement) {
|
279 | if (this.additionalActionMenu &&
|
280 | !this.additionalActionMenu.nativeElement.contains(targetElement)) {
|
281 | this.menuActive = false;
|
282 | }
|
283 |
|
284 | if (this.openedHeaderActionTemplate &&
|
285 |
|
286 | !this.headerDropdown.toArray().some((ref) => ref.nativeElement.contains(targetElement))) {
|
287 | this.openedHeaderActionTemplate = null;
|
288 | }
|
289 | }
|
290 | getColumnDefinition(column) {
|
291 | return column.searchEnabled || typeof column.searchEnabled === 'undefined';
|
292 | }
|
293 | orderBy(column) {
|
294 | this.order.emit(column);
|
295 | }
|
296 | isOrderEnabled(column) {
|
297 | const columnOrderEnabled = column.orderEnabled === undefined ? true : !!column.orderEnabled;
|
298 | return this.config.orderEnabled && columnOrderEnabled;
|
299 | }
|
300 | columnDrop(event) {
|
301 | moveItemInArray(this.columns, event.previousIndex, event.currentIndex);
|
302 | }
|
303 | onSearch($event) {
|
304 | this.filter.emit($event);
|
305 | }
|
306 | getColumnWidth(column) {
|
307 | if (column.width) {
|
308 | return column.width;
|
309 | }
|
310 | return this.config.fixedColumnWidth ? 100 / this.columns.length + '%' : null;
|
311 | }
|
312 | onSelectAll() {
|
313 | this.selectAll.emit();
|
314 | }
|
315 | onMouseDown(event, th) {
|
316 | if (!this.config.resizeColumn) {
|
317 | return;
|
318 | }
|
319 | this.th = th;
|
320 | this.startOffset = th.offsetWidth - event.pageX;
|
321 | this.event.emit({
|
322 | event: Event.onColumnResizeMouseDown,
|
323 | value: event,
|
324 | });
|
325 | }
|
326 | onMouseMove(event) {
|
327 | if (!this.config.resizeColumn) {
|
328 | return;
|
329 | }
|
330 | if (this.th && this.th.style) {
|
331 | this.th.style.width = this.startOffset + event.pageX + 'px';
|
332 | this.th.style.cursor = 'col-resize';
|
333 | this.th.style['user-select'] = 'none';
|
334 | }
|
335 | }
|
336 | onMouseUp(event) {
|
337 | if (!this.config.resizeColumn) {
|
338 | return;
|
339 | }
|
340 | this.event.emit({
|
341 | event: Event.onColumnResizeMouseUp,
|
342 | value: event,
|
343 | });
|
344 | this.th.style.cursor = 'default';
|
345 | this.th = undefined;
|
346 | }
|
347 | showHeaderActionTemplateMenu(column) {
|
348 | if (!column.headerActionTemplate) {
|
349 | console.error('Column [headerActionTemplate] property not defined');
|
350 | }
|
351 | if (this.openedHeaderActionTemplate === column.key) {
|
352 | this.openedHeaderActionTemplate = null;
|
353 | return;
|
354 | }
|
355 | this.openedHeaderActionTemplate = column.key;
|
356 | }
|
357 | showMenu() {
|
358 | if (!this.additionalActionsTemplate) {
|
359 | console.error('[additionalActionsTemplate] property not defined');
|
360 | }
|
361 | this.menuActive = !this.menuActive;
|
362 | }
|
363 | }
|
364 | TableTHeadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TableTHeadComponent, deps: [{ token: StyleService }], target: i0.ɵɵFactoryTarget.Component });
|
365 | TableTHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TableTHeadComponent, selector: "[table-thead]", inputs: { config: "config", columns: "columns", sortKey: "sortKey", sortState: "sortState", selectAllTemplate: "selectAllTemplate", filtersTemplate: "filtersTemplate", additionalActionsTemplate: "additionalActionsTemplate" }, outputs: { filter: "filter", order: "order", selectAll: "selectAll", event: "event" }, host: { listeners: { "document:click": "onClick($event.target)" } }, providers: [StyleService], viewQueries: [{ propertyName: "th", first: true, predicate: ["th"], descendants: true }, { propertyName: "additionalActionMenu", first: true, predicate: ["additionalActionMenu"], descendants: true }, { propertyName: "headerDropdown", predicate: ["headerDropdown"], descendants: true }], ngImport: i0, template: "<tr class=\"ngx-table__header\" *ngIf=\"config.headerEnabled && !config.columnReorder\">\n <th *ngIf=\"config.checkboxes || config.radio\" [style.width]=\"'3%'\">\n <ng-container\n *ngIf=\"selectAllTemplate && config.checkboxes\"\n [ngTemplateOutlet]=\"selectAllTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: onSelectAllBinded }\"\n >\n </ng-container>\n <label\n class=\"ngx-form-checkbox\"\n for=\"selectAllCheckboxes\"\n *ngIf=\"!selectAllTemplate && config.checkboxes\"\n >\n <input type=\"checkbox\" id=\"selectAllCheckboxes\" (change)=\"onSelectAll()\" />\n <em class=\"ngx-form-icon\" id=\"selectAllCheckbox\"></em>\n </label>\n </th>\n <ng-container *ngFor=\"let column of columns; let colIndex = index; let last = last\">\n <th\n class=\"ngx-table__header-cell\"\n [class.pinned-left]=\"column.pinned\"\n [ngClass]=\"column.cssClass && column.cssClass.includeHeader ? column.cssClass.name : ''\"\n [style.left]=\"styleService.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 >\n <div\n (click)=\"orderBy(column)\"\n style=\"display: inline\"\n [class.pointer]=\"isOrderEnabled(column)\"\n >\n <div class=\"ngx-table__header-title\">\n {{ column.title }}<span> </span>\n <em class=\"ngx-icon ngx-icon-pin\" *ngIf=\"column.pinned\"></em>\n <div [style.display]=\"config.orderEnabled ? 'inline' : 'none'\">\n <em\n *ngIf=\"sortKey === column.key && this.sortState.get(sortKey) === 'asc'\"\n class=\"ngx-icon ngx-icon-arrow-up\"\n >\n </em>\n <em\n *ngIf=\"sortKey === column.key && this.sortState.get(sortKey) === 'desc'\"\n class=\"ngx-icon ngx-icon-arrow-down\"\n >\n </em>\n </div>\n </div>\n </div>\n <div class=\"ngx-dropdown\" *ngIf=\"!!column.headerActionTemplate\" #headerDropdown>\n <a class=\"ngx-btn ngx-btn-link\" (click)=\"showHeaderActionTemplateMenu(column)\">\n <span class=\"ngx-icon ngx-icon-more\"></span>\n </a>\n <div\n class=\"ngx-menu ngx-table__table-menu\"\n *ngIf=\"column.key === openedHeaderActionTemplate\"\n >\n <ng-container [ngTemplateOutlet]=\"column.headerActionTemplate\"> </ng-container>\n </div>\n </div>\n <div class=\"ngx-table__column-resizer\" *ngIf=\"config.resizeColumn && !last\"></div>\n </th>\n </ng-container>\n <th\n *ngIf=\"\n config.additionalActions ||\n config.detailsTemplate ||\n config.collapseAllRows ||\n config.groupRows\n \"\n class=\"ngx-table__header-cell-additional-actions\"\n >\n <div class=\"ngx-dropdown\" #additionalActionMenu *ngIf=\"config.additionalActions\">\n <a class=\"ngx-btn ngx-btn-link\" (click)=\"showMenu()\">\n <span class=\"ngx-icon ngx-icon-menu\"></span>\n </a>\n <ul class=\"ngx-menu ngx-table__table-menu\" *ngIf=\"menuActive\">\n <ng-container\n *ngIf=\"additionalActionsTemplate\"\n [ngTemplateOutlet]=\"additionalActionsTemplate\"\n >\n </ng-container>\n </ul>\n </div>\n </th>\n</tr>\n<tr\n class=\"ngx-table__header ngx-table__header--draggable\"\n *ngIf=\"config.headerEnabled && config.columnReorder\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"columnDrop($event)\"\n>\n <th *ngIf=\"config.checkboxes || config.radio\" [style.width]=\"'3%'\">\n <ng-container\n *ngIf=\"selectAllTemplate && config.checkboxes\"\n [ngTemplateOutlet]=\"selectAllTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: onSelectAllBinded }\"\n >\n </ng-container>\n <label\n class=\"ngx-form-checkbox\"\n for=\"selectAllCheckboxes\"\n *ngIf=\"!selectAllTemplate && config.checkboxes\"\n >\n <input type=\"checkbox\" id=\"selectAllCheckboxesDrag\" (change)=\"onSelectAll()\" />\n <em class=\"ngx-form-icon\" id=\"selectAllCheckboxDrag\"></em>\n </label>\n </th>\n <ng-container *ngFor=\"let column of columns; let colIndex = index; let last = last\">\n <th\n class=\"ngx-table__header-cell ngx-table__header-cell--draggable\"\n cdkDragLockAxis=\"x\"\n cdkDrag\n [cdkDragStartDelay]=\"config.reorderDelay || 0\"\n [class.pinned-left]=\"column.pinned\"\n [ngClass]=\"column.cssClass && column.cssClass.includeHeader ? column.cssClass.name : ''\"\n [style.left]=\"styleService.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 >\n <div\n (click)=\"orderBy(column)\"\n style=\"display: inline\"\n cdkDragHandle\n [class.pointer]=\"isOrderEnabled(column)\"\n >\n <div class=\"ngx-table__header-title\">\n {{ column.title }}<span> </span>\n <em class=\"ngx-icon ngx-icon-pin\" *ngIf=\"column.pinned\"></em>\n <div [style.display]=\"config.orderEnabled ? 'inline' : 'none'\">\n <em\n *ngIf=\"sortKey === column.key && this.sortState.get(sortKey) === 'asc'\"\n class=\"ngx-icon ngx-icon-arrow-up\"\n >\n </em>\n <em\n *ngIf=\"sortKey === column.key && this.sortState.get(sortKey) === 'desc'\"\n class=\"ngx-icon ngx-icon-arrow-down\"\n >\n </em>\n </div>\n </div>\n </div>\n <div class=\"ngx-dropdown\" *ngIf=\"!!column.headerActionTemplate\" #headerDropdown>\n <a class=\"ngx-btn ngx-btn-link\" (click)=\"showHeaderActionTemplateMenu(column)\">\n <span class=\"ngx-icon ngx-icon-more\"></span>\n </a>\n <div\n class=\"ngx-menu ngx-table__table-menu\"\n *ngIf=\"column.key === openedHeaderActionTemplate\"\n >\n <ng-container [ngTemplateOutlet]=\"column.headerActionTemplate\"> </ng-container>\n </div>\n </div>\n <div class=\"ngx-table__column-resizer\" *ngIf=\"config.resizeColumn && !last\"></div>\n </th>\n </ng-container>\n <th\n *ngIf=\"\n config.additionalActions ||\n config.detailsTemplate ||\n config.collapseAllRows ||\n config.groupRows\n \"\n class=\"ngx-table__header-cell-additional-actions\"\n >\n <div class=\"ngx-dropdown\" #additionalActionMenu *ngIf=\"config.additionalActions\">\n <a class=\"ngx-btn ngx-btn-link\" (click)=\"showMenu()\">\n <span class=\"ngx-icon ngx-icon-menu\"></span>\n </a>\n <ul class=\"ngx-menu ngx-table__table-menu\" *ngIf=\"menuActive\">\n <ng-container\n *ngIf=\"additionalActionsTemplate\"\n [ngTemplateOutlet]=\"additionalActionsTemplate\"\n >\n </ng-container>\n </ul>\n </div>\n </th>\n</tr>\n<tr *ngIf=\"config.searchEnabled && !filtersTemplate\" class=\"ngx-table__sort-header\">\n <th *ngIf=\"config.checkboxes || config.radio\"></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]=\"styleService.pinnedWidth(column.pinned, colIndex)\"\n >\n <table-header\n *ngIf=\"getColumnDefinition(column)\"\n (update)=\"onSearch($event)\"\n [column]=\"column\"\n >\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\"> </ng-container>\n </tr>\n</ng-container>\n", styles: [".cdk-drag-preview{text-align:left;padding-top:9px;padding-left:4px;color:#50596c;border:1px solid #e7e9ed}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: HeaderComponent, selector: "table-header", inputs: ["column"], outputs: ["update"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
366 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TableTHeadComponent, decorators: [{
|
367 | type: Component,
|
368 | args: [{ selector: '[table-thead]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [StyleService], template: "<tr class=\"ngx-table__header\" *ngIf=\"config.headerEnabled && !config.columnReorder\">\n <th *ngIf=\"config.checkboxes || config.radio\" [style.width]=\"'3%'\">\n <ng-container\n *ngIf=\"selectAllTemplate && config.checkboxes\"\n [ngTemplateOutlet]=\"selectAllTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: onSelectAllBinded }\"\n >\n </ng-container>\n <label\n class=\"ngx-form-checkbox\"\n for=\"selectAllCheckboxes\"\n *ngIf=\"!selectAllTemplate && config.checkboxes\"\n >\n <input type=\"checkbox\" id=\"selectAllCheckboxes\" (change)=\"onSelectAll()\" />\n <em class=\"ngx-form-icon\" id=\"selectAllCheckbox\"></em>\n </label>\n </th>\n <ng-container *ngFor=\"let column of columns; let colIndex = index; let last = last\">\n <th\n class=\"ngx-table__header-cell\"\n [class.pinned-left]=\"column.pinned\"\n [ngClass]=\"column.cssClass && column.cssClass.includeHeader ? column.cssClass.name : ''\"\n [style.left]=\"styleService.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 >\n <div\n (click)=\"orderBy(column)\"\n style=\"display: inline\"\n [class.pointer]=\"isOrderEnabled(column)\"\n >\n <div class=\"ngx-table__header-title\">\n {{ column.title }}<span> </span>\n <em class=\"ngx-icon ngx-icon-pin\" *ngIf=\"column.pinned\"></em>\n <div [style.display]=\"config.orderEnabled ? 'inline' : 'none'\">\n <em\n *ngIf=\"sortKey === column.key && this.sortState.get(sortKey) === 'asc'\"\n class=\"ngx-icon ngx-icon-arrow-up\"\n >\n </em>\n <em\n *ngIf=\"sortKey === column.key && this.sortState.get(sortKey) === 'desc'\"\n class=\"ngx-icon ngx-icon-arrow-down\"\n >\n </em>\n </div>\n </div>\n </div>\n <div class=\"ngx-dropdown\" *ngIf=\"!!column.headerActionTemplate\" #headerDropdown>\n <a class=\"ngx-btn ngx-btn-link\" (click)=\"showHeaderActionTemplateMenu(column)\">\n <span class=\"ngx-icon ngx-icon-more\"></span>\n </a>\n <div\n class=\"ngx-menu ngx-table__table-menu\"\n *ngIf=\"column.key === openedHeaderActionTemplate\"\n >\n <ng-container [ngTemplateOutlet]=\"column.headerActionTemplate\"> </ng-container>\n </div>\n </div>\n <div class=\"ngx-table__column-resizer\" *ngIf=\"config.resizeColumn && !last\"></div>\n </th>\n </ng-container>\n <th\n *ngIf=\"\n config.additionalActions ||\n config.detailsTemplate ||\n config.collapseAllRows ||\n config.groupRows\n \"\n class=\"ngx-table__header-cell-additional-actions\"\n >\n <div class=\"ngx-dropdown\" #additionalActionMenu *ngIf=\"config.additionalActions\">\n <a class=\"ngx-btn ngx-btn-link\" (click)=\"showMenu()\">\n <span class=\"ngx-icon ngx-icon-menu\"></span>\n </a>\n <ul class=\"ngx-menu ngx-table__table-menu\" *ngIf=\"menuActive\">\n <ng-container\n *ngIf=\"additionalActionsTemplate\"\n [ngTemplateOutlet]=\"additionalActionsTemplate\"\n >\n </ng-container>\n </ul>\n </div>\n </th>\n</tr>\n<tr\n class=\"ngx-table__header ngx-table__header--draggable\"\n *ngIf=\"config.headerEnabled && config.columnReorder\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"columnDrop($event)\"\n>\n <th *ngIf=\"config.checkboxes || config.radio\" [style.width]=\"'3%'\">\n <ng-container\n *ngIf=\"selectAllTemplate && config.checkboxes\"\n [ngTemplateOutlet]=\"selectAllTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: onSelectAllBinded }\"\n >\n </ng-container>\n <label\n class=\"ngx-form-checkbox\"\n for=\"selectAllCheckboxes\"\n *ngIf=\"!selectAllTemplate && config.checkboxes\"\n >\n <input type=\"checkbox\" id=\"selectAllCheckboxesDrag\" (change)=\"onSelectAll()\" />\n <em class=\"ngx-form-icon\" id=\"selectAllCheckboxDrag\"></em>\n </label>\n </th>\n <ng-container *ngFor=\"let column of columns; let colIndex = index; let last = last\">\n <th\n class=\"ngx-table__header-cell ngx-table__header-cell--draggable\"\n cdkDragLockAxis=\"x\"\n cdkDrag\n [cdkDragStartDelay]=\"config.reorderDelay || 0\"\n [class.pinned-left]=\"column.pinned\"\n [ngClass]=\"column.cssClass && column.cssClass.includeHeader ? column.cssClass.name : ''\"\n [style.left]=\"styleService.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 >\n <div\n (click)=\"orderBy(column)\"\n style=\"display: inline\"\n cdkDragHandle\n [class.pointer]=\"isOrderEnabled(column)\"\n >\n <div class=\"ngx-table__header-title\">\n {{ column.title }}<span> </span>\n <em class=\"ngx-icon ngx-icon-pin\" *ngIf=\"column.pinned\"></em>\n <div [style.display]=\"config.orderEnabled ? 'inline' : 'none'\">\n <em\n *ngIf=\"sortKey === column.key && this.sortState.get(sortKey) === 'asc'\"\n class=\"ngx-icon ngx-icon-arrow-up\"\n >\n </em>\n <em\n *ngIf=\"sortKey === column.key && this.sortState.get(sortKey) === 'desc'\"\n class=\"ngx-icon ngx-icon-arrow-down\"\n >\n </em>\n </div>\n </div>\n </div>\n <div class=\"ngx-dropdown\" *ngIf=\"!!column.headerActionTemplate\" #headerDropdown>\n <a class=\"ngx-btn ngx-btn-link\" (click)=\"showHeaderActionTemplateMenu(column)\">\n <span class=\"ngx-icon ngx-icon-more\"></span>\n </a>\n <div\n class=\"ngx-menu ngx-table__table-menu\"\n *ngIf=\"column.key === openedHeaderActionTemplate\"\n >\n <ng-container [ngTemplateOutlet]=\"column.headerActionTemplate\"> </ng-container>\n </div>\n </div>\n <div class=\"ngx-table__column-resizer\" *ngIf=\"config.resizeColumn && !last\"></div>\n </th>\n </ng-container>\n <th\n *ngIf=\"\n config.additionalActions ||\n config.detailsTemplate ||\n config.collapseAllRows ||\n config.groupRows\n \"\n class=\"ngx-table__header-cell-additional-actions\"\n >\n <div class=\"ngx-dropdown\" #additionalActionMenu *ngIf=\"config.additionalActions\">\n <a class=\"ngx-btn ngx-btn-link\" (click)=\"showMenu()\">\n <span class=\"ngx-icon ngx-icon-menu\"></span>\n </a>\n <ul class=\"ngx-menu ngx-table__table-menu\" *ngIf=\"menuActive\">\n <ng-container\n *ngIf=\"additionalActionsTemplate\"\n [ngTemplateOutlet]=\"additionalActionsTemplate\"\n >\n </ng-container>\n </ul>\n </div>\n </th>\n</tr>\n<tr *ngIf=\"config.searchEnabled && !filtersTemplate\" class=\"ngx-table__sort-header\">\n <th *ngIf=\"config.checkboxes || config.radio\"></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]=\"styleService.pinnedWidth(column.pinned, colIndex)\"\n >\n <table-header\n *ngIf=\"getColumnDefinition(column)\"\n (update)=\"onSearch($event)\"\n [column]=\"column\"\n >\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\"> </ng-container>\n </tr>\n</ng-container>\n", styles: [".cdk-drag-preview{text-align:left;padding-top:9px;padding-left:4px;color:#50596c;border:1px solid #e7e9ed}\n"] }]
|
369 | }], ctorParameters: function () { return [{ type: StyleService }]; }, propDecorators: { config: [{
|
370 | type: Input
|
371 | }], columns: [{
|
372 | type: Input
|
373 | }], sortKey: [{
|
374 | type: Input
|
375 | }], sortState: [{
|
376 | type: Input
|
377 | }], selectAllTemplate: [{
|
378 | type: Input
|
379 | }], filtersTemplate: [{
|
380 | type: Input
|
381 | }], additionalActionsTemplate: [{
|
382 | type: Input
|
383 | }], filter: [{
|
384 | type: Output
|
385 | }], order: [{
|
386 | type: Output
|
387 | }], selectAll: [{
|
388 | type: Output
|
389 | }], event: [{
|
390 | type: Output
|
391 | }], th: [{
|
392 | type: ViewChild,
|
393 | args: ['th']
|
394 | }], headerDropdown: [{
|
395 | type: ViewChildren,
|
396 | args: ['headerDropdown']
|
397 | }], additionalActionMenu: [{
|
398 | type: ViewChild,
|
399 | args: ['additionalActionMenu']
|
400 | }], onClick: [{
|
401 | type: HostListener,
|
402 | args: ['document:click', ['$event.target']]
|
403 | }] } });
|
404 |
|
405 | class FiltersService {
|
406 | static getPath(p, o) {
|
407 |
|
408 |
|
409 | const result = p.reduce((xs, x) => (xs && typeof xs[x] !== 'undefined' ? xs[x] : null), o);
|
410 | return result;
|
411 | }
|
412 | }
|
413 | FiltersService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FiltersService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
414 | FiltersService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FiltersService });
|
415 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FiltersService, decorators: [{
|
416 | type: Injectable
|
417 | }] });
|
418 |
|
419 | class SearchPipe {
|
420 | constructor() {
|
421 | this.filters = {};
|
422 | }
|
423 | transform(array, filter, filteredCountSubject, config) {
|
424 | filteredCountSubject.next(0);
|
425 | if (typeof array === 'undefined') {
|
426 | return;
|
427 | }
|
428 | if (typeof filter === 'undefined') {
|
429 | filteredCountSubject.next(array.length);
|
430 | return array;
|
431 | }
|
432 | filter.forEach((f) => {
|
433 | this.filters[f.key] = f.value.toString().toLocaleLowerCase();
|
434 | if (Object.keys(f).length === 0 || f.value === '') {
|
435 |
|
436 | delete this.filters[f.key];
|
437 | }
|
438 | });
|
439 | if (config && config.groupRows) {
|
440 | return array.map((arr) => this.filterGroup(arr, filteredCountSubject));
|
441 | }
|
442 | return this.filterGroup(array, filteredCountSubject);
|
443 | }
|
444 | filterGroup(array, filteredCountSubject) {
|
445 | const arr = array.filter((obj) => {
|
446 | return Object.keys(this.filters).every((c) => {
|
447 | const split = c.split('.');
|
448 | const val = FiltersService.getPath(split, obj);
|
449 | const element = typeof val === 'object' ? JSON.stringify(val) : val.toString().toLocaleLowerCase();
|
450 | const strings = this.filters[c].split(',');
|
451 | return strings.some((s) => element.indexOf(s.trim()) > -1);
|
452 | });
|
453 | });
|
454 | filteredCountSubject.next(arr.length);
|
455 | return arr;
|
456 | }
|
457 | }
|
458 | SearchPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SearchPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
459 | SearchPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: SearchPipe, name: "search" });
|
460 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SearchPipe, decorators: [{
|
461 | type: Pipe,
|
462 | args: [{
|
463 | name: 'search',
|
464 | }]
|
465 | }] });
|
466 |
|
467 | class RenderPipe {
|
468 | transform(row, key) {
|
469 | const split = key.split('.');
|
470 | return FiltersService.getPath(split, row);
|
471 | }
|
472 | }
|
473 | RenderPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: RenderPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
474 | RenderPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: RenderPipe, name: "render" });
|
475 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: RenderPipe, decorators: [{
|
476 | type: Pipe,
|
477 | args: [{
|
478 | name: 'render',
|
479 | }]
|
480 | }] });
|
481 |
|
482 | class GlobalSearchPipe {
|
483 | transform(array, filter, filteredCountSubject) {
|
484 | filteredCountSubject.next(0);
|
485 | if (typeof array === 'undefined') {
|
486 | return;
|
487 | }
|
488 | if (typeof filter === 'undefined' || Object.keys(filter).length === 0 || filter === '') {
|
489 | filteredCountSubject.next(array.length);
|
490 | return array;
|
491 | }
|
492 | const arr = array.filter((row) => {
|
493 | const element = JSON.stringify(Object.values(row));
|
494 | const strings = filter.split(',');
|
495 | return strings.some((s) => element.toLocaleLowerCase().indexOf(s.trim().toLocaleLowerCase()) > -1);
|
496 | });
|
497 | filteredCountSubject.next(arr.length);
|
498 | return arr;
|
499 | }
|
500 | }
|
501 | GlobalSearchPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: GlobalSearchPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
502 | GlobalSearchPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: GlobalSearchPipe, name: "global" });
|
503 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: GlobalSearchPipe, decorators: [{
|
504 | type: Pipe,
|
505 | args: [{
|
506 | name: 'global',
|
507 | }]
|
508 | }] });
|
509 |
|
510 | class SortPipe {
|
511 | constructor() {
|
512 | this.defaultArray = [];
|
513 | }
|
514 | static isNaN(aV, bV) {
|
515 | return isNaN(parseFloat(aV)) || !isFinite(aV) || isNaN(parseFloat(bV)) || !isFinite(bV);
|
516 | }
|
517 | static compare(a, b, key) {
|
518 | const split = key.split('.');
|
519 | const aPath = FiltersService.getPath(split, a);
|
520 | const bPath = FiltersService.getPath(split, b);
|
521 | const aValue = (aPath + '').toLowerCase();
|
522 | const bValue = (bPath + '').toLowerCase();
|
523 | if (SortPipe.isNaN(aPath, bPath)) {
|
524 | return aValue.localeCompare(bValue);
|
525 | }
|
526 | if (parseFloat(aPath) < parseFloat(bPath)) {
|
527 | return -1;
|
528 | }
|
529 | if (parseFloat(aPath) > parseFloat(bPath)) {
|
530 | return 1;
|
531 | }
|
532 | return 0;
|
533 | }
|
534 | transform(array, filter, config) {
|
535 | if (this.defaultArray.length === 0) {
|
536 | this.defaultArray = array;
|
537 | }
|
538 | if (!filter.key || filter.key === '') {
|
539 | return array;
|
540 | }
|
541 | if (filter.order === '') {
|
542 | return this.defaultArray;
|
543 | }
|
544 | if (filter.order === 'asc') {
|
545 | return this.sortAsc(array, filter, config);
|
546 | }
|
547 | return this.sortDesc(array, filter, config);
|
548 | }
|
549 | sortAsc(array, filter, config) {
|
550 | if (config && config.groupRows) {
|
551 | return array.map((arr) => arr.sort((a, b) => SortPipe.compare(a, b, filter.key)));
|
552 | }
|
553 | return array.sort((a, b) => SortPipe.compare(a, b, filter.key));
|
554 | }
|
555 | sortDesc(array, filter, config) {
|
556 | if (config && config.groupRows) {
|
557 | return array.map((arr) => arr.sort((a, b) => SortPipe.compare(b, a, filter.key)));
|
558 | }
|
559 | return array.sort((a, b) => SortPipe.compare(b, a, filter.key));
|
560 | }
|
561 | }
|
562 | SortPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SortPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
563 | SortPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: SortPipe, name: "sort" });
|
564 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SortPipe, decorators: [{
|
565 | type: Pipe,
|
566 | args: [{
|
567 | name: 'sort',
|
568 | }]
|
569 | }] });
|
570 |
|
571 | class BaseComponent {
|
572 | constructor(cdr, scrollDispatcher, styleService) {
|
573 | this.cdr = cdr;
|
574 | this.scrollDispatcher = scrollDispatcher;
|
575 | this.styleService = styleService;
|
576 | this.unsubscribe = new Subject();
|
577 | this.filterCount = -1;
|
578 | this.filteredCountSubject = new Subject();
|
579 | this.tableClass = null;
|
580 | this.grouped = [];
|
581 | this.isSelected = false;
|
582 | this.page = 1;
|
583 | this.count = 0;
|
584 | this.sortState = new Map();
|
585 | this.sortKey = null;
|
586 | this.rowContextMenuPosition = {
|
587 | top: null,
|
588 | left: null,
|
589 | value: null,
|
590 | };
|
591 | this.sortBy = {
|
592 | key: '',
|
593 | order: 'asc',
|
594 | };
|
595 | this.selectedDetailsTemplateRowId = new Set();
|
596 | this.selectedCheckboxes = new Set();
|
597 | this.id = 'table';
|
598 | this.event = new EventEmitter();
|
599 | this.filteredCountSubject.pipe(takeUntil(this.unsubscribe)).subscribe((count) => {
|
600 | setTimeout(() => {
|
601 | this.filterCount = count;
|
602 | this.cdr.detectChanges();
|
603 | });
|
604 | });
|
605 | }
|
606 | onContextMenuClick(targetElement) {
|
607 | if (this.contextMenu && !this.contextMenu.nativeElement.contains(targetElement)) {
|
608 | this.rowContextMenuPosition = {
|
609 | top: null,
|
610 | left: null,
|
611 | value: null,
|
612 | };
|
613 | }
|
614 | }
|
615 | ngOnInit() {
|
616 | if (!this.columns) {
|
617 | console.error('[columns] property required!');
|
618 | }
|
619 | if (this.configuration) {
|
620 | this.config = this.configuration;
|
621 | }
|
622 | else {
|
623 | this.config = DefaultConfigService.config;
|
624 | }
|
625 | this.limit = this.config.rows;
|
626 | if (this.groupRowsBy) {
|
627 | this.grouped = GroupRowsService.doGroupRows(this.data, this.groupRowsBy);
|
628 | }
|
629 | this.doDecodePersistedState();
|
630 | }
|
631 | ngOnDestroy() {
|
632 | this.unsubscribe.next();
|
633 | this.unsubscribe.complete();
|
634 | }
|
635 | ngAfterViewInit() {
|
636 | const throttleValue = this.config.infiniteScrollThrottleTime
|
637 | ? this.config.infiniteScrollThrottleTime
|
638 | : 200;
|
639 | this.scrollDispatcher
|
640 | .scrolled()
|
641 | .pipe(throttleTime(throttleValue), filter((event) => {
|
642 | return (!!event &&
|
643 | this.viewPort &&
|
644 | this.viewPort.getRenderedRange().end === this.viewPort.getDataLength());
|
645 | }), takeUntil(this.unsubscribe))
|
646 | .subscribe(() => {
|
647 | this.emitEvent(Event.onInfiniteScrollEnd, null);
|
648 | });
|
649 | }
|
650 | ngOnChanges(changes) {
|
651 | const { configuration, data, pagination, groupRowsBy } = changes;
|
652 | this.toggleRowIndex = changes.toggleRowIndex;
|
653 | if (configuration && configuration.currentValue) {
|
654 | this.config = configuration.currentValue;
|
655 | }
|
656 | if (data && data.currentValue) {
|
657 | this.doApplyData(data);
|
658 | }
|
659 | if (pagination && pagination.currentValue) {
|
660 | const { count, limit, offset } = pagination.currentValue;
|
661 | this.count = count;
|
662 | this.limit = limit;
|
663 | this.page = offset;
|
664 | }
|
665 | if (groupRowsBy && groupRowsBy.currentValue) {
|
666 | this.grouped = GroupRowsService.doGroupRows(this.data, this.groupRowsBy);
|
667 | }
|
668 | if (this.toggleRowIndex && this.toggleRowIndex.currentValue) {
|
669 | const row = this.toggleRowIndex.currentValue;
|
670 | this.collapseRow(row.index);
|
671 | }
|
672 | }
|
673 | orderBy(column) {
|
674 | if (typeof column.orderEnabled !== 'undefined' && !column.orderEnabled) {
|
675 | return;
|
676 | }
|
677 | this.sortKey = column.key;
|
678 | if (!this.config.orderEnabled || this.sortKey === '') {
|
679 | return;
|
680 | }
|
681 | this.setColumnOrder(column);
|
682 | if (!this.config.orderEventOnly && !column.orderEventOnly) {
|
683 | this.sortBy.key = this.sortKey;
|
684 | this.sortBy.order = this.sortState.get(this.sortKey);
|
685 | }
|
686 | else {
|
687 | this.sortBy.key = '';
|
688 | this.sortBy.order = '';
|
689 | }
|
690 | if (!this.config.serverPagination) {
|
691 | this.data = [...this.data];
|
692 | this.sortBy = { ...this.sortBy };
|
693 | }
|
694 | const value = {
|
695 | key: this.sortKey,
|
696 | order: this.sortState.get(this.sortKey),
|
697 | };
|
698 | this.emitEvent(Event.onOrder, value);
|
699 | }
|
700 | onClick($event, row, key, colIndex, rowIndex) {
|
701 | if (this.config.selectRow) {
|
702 | this.selectedRow = rowIndex;
|
703 | }
|
704 | if (this.config.selectCol && `${colIndex}`) {
|
705 | this.selectedCol = colIndex;
|
706 | }
|
707 | if (this.config.selectCell && `${colIndex}`) {
|
708 | this.selectedRow = rowIndex;
|
709 | this.selectedCol = colIndex;
|
710 | }
|
711 | if (this.config.clickEvent) {
|
712 | const value = {
|
713 | event: $event,
|
714 | row,
|
715 | key,
|
716 | rowId: rowIndex,
|
717 | colId: colIndex,
|
718 | };
|
719 | this.emitEvent(Event.onClick, value);
|
720 | }
|
721 | }
|
722 | onDoubleClick($event, row, key, colIndex, rowIndex) {
|
723 | const value = {
|
724 | event: $event,
|
725 | row,
|
726 | key,
|
727 | rowId: rowIndex,
|
728 | colId: colIndex,
|
729 | };
|
730 | this.emitEvent(Event.onDoubleClick, value);
|
731 | }
|
732 | onCheckboxSelect($event, row, rowIndex) {
|
733 | const value = {
|
734 | event: $event,
|
735 | row,
|
736 | rowId: rowIndex,
|
737 | };
|
738 | this.emitEvent(Event.onCheckboxSelect, value);
|
739 | }
|
740 | onRadioSelect($event, row, rowIndex) {
|
741 | const value = {
|
742 | event: $event,
|
743 | row,
|
744 | rowId: rowIndex,
|
745 | };
|
746 | this.emitEvent(Event.onRadioSelect, value);
|
747 | }
|
748 | onSelectAll() {
|
749 | this.isSelected = !this.isSelected;
|
750 | this.emitEvent(Event.onSelectAll, this.isSelected);
|
751 | }
|
752 | onSearch($event) {
|
753 | if (!this.config.serverPagination) {
|
754 | this.term = $event;
|
755 | }
|
756 | this.emitEvent(Event.onSearch, $event);
|
757 | }
|
758 | onGlobalSearch(value) {
|
759 | if (!this.config.serverPagination) {
|
760 | this.globalSearchTerm = value;
|
761 | }
|
762 | this.emitEvent(Event.onGlobalSearch, value);
|
763 | }
|
764 | onPagination(pagination) {
|
765 | this.page = pagination.page;
|
766 | this.limit = pagination.limit;
|
767 | this.emitEvent(Event.onPagination, pagination);
|
768 | }
|
769 | toggleCheckbox(rowIndex) {
|
770 |
|
771 | this.selectedCheckboxes.has(rowIndex)
|
772 | ? this.selectedCheckboxes.delete(rowIndex)
|
773 | : this.selectedCheckboxes.add(rowIndex);
|
774 | }
|
775 | collapseRow(rowIndex) {
|
776 | if (this.selectedDetailsTemplateRowId.has(rowIndex)) {
|
777 | this.selectedDetailsTemplateRowId.delete(rowIndex);
|
778 | this.emitEvent(Event.onRowCollapsedHide, rowIndex);
|
779 | }
|
780 | else {
|
781 | this.selectedDetailsTemplateRowId.add(rowIndex);
|
782 | this.emitEvent(Event.onRowCollapsedShow, rowIndex);
|
783 | }
|
784 | }
|
785 | doDecodePersistedState() {
|
786 | if (!this.config.persistState) {
|
787 | return;
|
788 | }
|
789 | const pagination = localStorage.getItem(Event.onPagination);
|
790 | const sort = localStorage.getItem(Event.onOrder);
|
791 | const search = localStorage.getItem(Event.onSearch);
|
792 | if (pagination) {
|
793 | this.onPagination(JSON.parse(pagination));
|
794 | }
|
795 | if (sort) {
|
796 | const { key, order } = JSON.parse(sort);
|
797 | this.bindApi({
|
798 | type: API.sortBy,
|
799 | value: { column: key, order },
|
800 | });
|
801 | }
|
802 | if (search) {
|
803 | this.bindApi({
|
804 | type: API.setInputValue,
|
805 | value: JSON.parse(search),
|
806 | });
|
807 | }
|
808 | }
|
809 | isRowCollapsed(rowIndex) {
|
810 | if (this.config.collapseAllRows) {
|
811 | return true;
|
812 | }
|
813 | return this.selectedDetailsTemplateRowId.has(rowIndex);
|
814 | }
|
815 | get loadingHeight() {
|
816 | const table = document.getElementById(this.id);
|
817 | if (table && table.rows && table.rows.length > 3) {
|
818 | const searchEnabled = this.config.searchEnabled ? 1 : 0;
|
819 | const headerEnabled = this.config.headerEnabled ? 1 : 0;
|
820 | const borderTrHeight = 1;
|
821 | const borderDivHeight = 2;
|
822 | return ((table.rows.length - searchEnabled - headerEnabled) *
|
823 | (table.rows[3].offsetHeight - borderTrHeight) -
|
824 | borderDivHeight);
|
825 | }
|
826 | return 30;
|
827 | }
|
828 | get arrowDefinition() {
|
829 | return this.config.showDetailsArrow || typeof this.config.showDetailsArrow === 'undefined';
|
830 | }
|
831 | onRowContextMenu($event, row, key, colIndex, rowIndex) {
|
832 | if (!this.config.showContextMenu) {
|
833 | return;
|
834 | }
|
835 | $event.preventDefault();
|
836 | const value = {
|
837 | event: $event,
|
838 | row,
|
839 | key,
|
840 | rowId: rowIndex,
|
841 | colId: colIndex,
|
842 | };
|
843 | this.rowContextMenuPosition = {
|
844 | top: `${$event.pageY - 10}px`,
|
845 | left: `${$event.pageX - 10}px`,
|
846 | value,
|
847 | };
|
848 | this.emitEvent(Event.onRowContextMenu, value);
|
849 | }
|
850 | doApplyData(data) {
|
851 | const order = this.columns.find((c) => !!c.orderBy);
|
852 | if (order) {
|
853 | this.sortState.set(this.sortKey, order.orderBy === 'asc' ? 'desc' : 'asc');
|
854 | this.orderBy(order);
|
855 | }
|
856 | else {
|
857 | this.data = [...data.currentValue];
|
858 | }
|
859 | }
|
860 | onDragStart(event) {
|
861 | this.emitEvent(Event.onReorderStart, event);
|
862 | }
|
863 | onDrop(event) {
|
864 | this.emitEvent(Event.onRowDrop, event);
|
865 | moveItemInArray(this.data, event.previousIndex, event.currentIndex);
|
866 | }
|
867 |
|
868 | apiEvent(event) {
|
869 | return this.bindApi(event);
|
870 | }
|
871 |
|
872 | bindApi(event) {
|
873 | switch (event.type) {
|
874 | case API.rowContextMenuClicked:
|
875 | this.rowContextMenuPosition = {
|
876 | top: null,
|
877 | left: null,
|
878 | value: null,
|
879 | };
|
880 | break;
|
881 | case API.toggleRowIndex:
|
882 | this.collapseRow(event.value);
|
883 | break;
|
884 | case API.toggleCheckbox:
|
885 | this.toggleCheckbox(event.value);
|
886 | break;
|
887 | case API.setInputValue:
|
888 | if (this.config.searchEnabled) {
|
889 | event.value.forEach((input) => {
|
890 | const element = document.getElementById(`search_${input.key}`);
|
891 | if (!element) {
|
892 | console.error(`Column '${input.key}' not available in the DOM. Have you misspelled a name?`);
|
893 | }
|
894 | else {
|
895 | element.value = input.value;
|
896 | }
|
897 | });
|
898 | }
|
899 | this.onSearch(event.value);
|
900 | this.cdr.detectChanges();
|
901 | break;
|
902 | case API.onGlobalSearch:
|
903 | this.onGlobalSearch(event.value);
|
904 | this.cdr.detectChanges();
|
905 | break;
|
906 | case API.setRowClass:
|
907 | if (Array.isArray(event.value)) {
|
908 | event.value.forEach((val) => this.styleService.setRowClass(val));
|
909 | break;
|
910 | }
|
911 | this.styleService.setRowClass(event.value);
|
912 | this.cdr.detectChanges();
|
913 | break;
|
914 | case API.setCellClass:
|
915 | if (Array.isArray(event.value)) {
|
916 | event.value.forEach((val) => this.styleService.setCellClass(val));
|
917 | break;
|
918 | }
|
919 | this.styleService.setCellClass(event.value);
|
920 | break;
|
921 | case API.setRowStyle:
|
922 | if (Array.isArray(event.value)) {
|
923 | event.value.forEach((val) => this.styleService.setRowStyle(val));
|
924 | break;
|
925 | }
|
926 | this.styleService.setRowStyle(event.value);
|
927 | break;
|
928 | case API.setCellStyle:
|
929 | if (Array.isArray(event.value)) {
|
930 | event.value.forEach((val) => this.styleService.setCellStyle(val));
|
931 | break;
|
932 | }
|
933 | this.styleService.setCellStyle(event.value);
|
934 | break;
|
935 | case API.setTableClass:
|
936 | this.tableClass = event.value;
|
937 | this.cdr.detectChanges();
|
938 | break;
|
939 | case API.getPaginationTotalItems:
|
940 | return this.paginationComponent.paginationDirective.getTotalItems();
|
941 | case API.getPaginationCurrentPage:
|
942 | return this.paginationComponent.paginationDirective.getCurrent();
|
943 | case API.getPaginationLastPage:
|
944 | return this.paginationComponent.paginationDirective.getLastPage();
|
945 | case API.getNumberOfRowsPerPage:
|
946 | return this.paginationComponent.paginationDirective.isLastPage()
|
947 | ? this.paginationComponent.paginationDirective.getTotalItems() % this.limit
|
948 | : this.limit;
|
949 | case API.setPaginationCurrentPage:
|
950 | this.paginationComponent.paginationDirective.setCurrent(event.value);
|
951 | break;
|
952 | case API.setPaginationRange:
|
953 | this.paginationComponent.ranges = event.value;
|
954 | break;
|
955 | case API.setPaginationPreviousLabel:
|
956 | this.paginationComponent.previousLabel = event.value;
|
957 | break;
|
958 | case API.setPaginationNextLabel:
|
959 | this.paginationComponent.nextLabel = event.value;
|
960 | break;
|
961 | case API.setPaginationDisplayLimit:
|
962 | this.paginationComponent.changeLimit(event.value, true);
|
963 | break;
|
964 | case API.sortBy:
|
965 | const column = { title: '', key: event.value.column, orderBy: event.value.order };
|
966 | this.orderBy(column);
|
967 | this.cdr.detectChanges();
|
968 | break;
|
969 | default:
|
970 | break;
|
971 | }
|
972 | }
|
973 | setColumnOrder(column) {
|
974 | const key = column.key;
|
975 | switch (this.sortState.get(key)) {
|
976 | case '':
|
977 | case undefined:
|
978 | this.sortState.set(key, column.orderBy || 'desc');
|
979 | break;
|
980 | case 'asc':
|
981 | this.config.threeWaySort ? this.sortState.set(key, '') : this.sortState.set(key, 'desc');
|
982 | break;
|
983 | case 'desc':
|
984 | this.sortState.set(key, 'asc');
|
985 | break;
|
986 | }
|
987 | if (this.sortState.size > 1) {
|
988 | const temp = this.sortState.get(key);
|
989 | this.sortState.clear();
|
990 | this.sortState.set(key, temp);
|
991 | }
|
992 | }
|
993 | emitEvent(event, value) {
|
994 | this.event.emit({ event, value });
|
995 | if (this.config.persistState) {
|
996 | localStorage.setItem(event, JSON.stringify(value));
|
997 | }
|
998 | if (this.config.logger) {
|
999 |
|
1000 | console.log({ event, value });
|
1001 | }
|
1002 | }
|
1003 | dragEnter($event) {
|
1004 | $event.preventDefault();
|
1005 | $event.stopPropagation();
|
1006 | }
|
1007 | dragOver($event) {
|
1008 | $event.preventDefault();
|
1009 | $event.stopPropagation();
|
1010 | }
|
1011 | dragLeave($event) {
|
1012 | $event.preventDefault();
|
1013 | $event.stopPropagation();
|
1014 | }
|
1015 | drop($event) {
|
1016 | $event.preventDefault();
|
1017 | $event.stopPropagation();
|
1018 | const file = $event.dataTransfer?.files?.[0];
|
1019 | if (file?.type !== 'application/json') {
|
1020 |
|
1021 | console.log('File not allowed');
|
1022 | return;
|
1023 | }
|
1024 | const fileReader = new FileReader();
|
1025 | fileReader.onload = (event) => {
|
1026 | this.data = JSON.parse(event?.target?.result);
|
1027 | this.cdr.markForCheck();
|
1028 | };
|
1029 | fileReader.readAsText(file);
|
1030 | }
|
1031 | }
|
1032 | BaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BaseComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ScrollDispatcher }, { token: StyleService }], target: i0.ɵɵFactoryTarget.Component });
|
1033 | BaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: BaseComponent, selector: "ngx-table", inputs: { configuration: "configuration", data: "data", pagination: "pagination", groupRowsBy: "groupRowsBy", id: "id", toggleRowIndex: "toggleRowIndex", detailsTemplate: "detailsTemplate", summaryTemplate: "summaryTemplate", groupRowsHeaderTemplate: "groupRowsHeaderTemplate", filtersTemplate: "filtersTemplate", selectAllTemplate: "selectAllTemplate", noResultsTemplate: "noResultsTemplate", loadingTemplate: "loadingTemplate", additionalActionsTemplate: "additionalActionsTemplate", rowContextMenu: "rowContextMenu", columns: "columns" }, outputs: { event: "event" }, host: { listeners: { "document:click": "onContextMenuClick($event.target)" } }, providers: [DefaultConfigService, GroupRowsService, StyleService], queries: [{ propertyName: "rowTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "paginationComponent", first: true, predicate: ["paginationComponent"], descendants: true }, { propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }, { propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "viewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"ngx-container\"\n [class.ngx-container--dark]=\"config.tableLayout.theme === 'dark'\"\n (dragenter)=\"dragEnter($event)\"\n (dragover)=\"dragOver($event)\"\n (dragleave)=\"dragLeave($event)\"\n (drop)=\"drop($event)\"\n>\n <table\n [id]=\"id\"\n #table\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 && !config.isLoading\"\n >\n <thead\n [class.ngx-infinite-scroll-viewport-thead]=\"config.infiniteScroll\"\n table-thead\n [config]=\"config\"\n [sortKey]=\"sortKey\"\n [sortState]=\"sortState\"\n [selectAllTemplate]=\"selectAllTemplate\"\n [filtersTemplate]=\"filtersTemplate\"\n [additionalActionsTemplate]=\"additionalActionsTemplate\"\n [columns]=\"columns\"\n (selectAll)=\"onSelectAll()\"\n (filter)=\"onSearch($event)\"\n (order)=\"orderBy($event)\"\n (event)=\"emitEvent($event.event, $event.value)\"\n ></thead>\n <tbody *ngIf=\"data && !config.isLoading && !config.rowReorder\">\n <ng-container *ngIf=\"rowTemplate\">\n <ul\n class=\"ngx-table__table-row-context-menu\"\n [ngStyle]=\"{\n position: 'absolute',\n top: rowContextMenuPosition.top,\n left: rowContextMenuPosition.left\n }\"\n *ngIf=\"rowContextMenuPosition.top\"\n >\n <ng-container\n [ngTemplateOutlet]=\"rowContextMenu\"\n [ngTemplateOutletContext]=\"{ $implicit: rowContextMenuPosition.value }\"\n >\n </ng-container>\n </ul>\n <ng-container *ngIf=\"!config.infiniteScroll\">\n <ng-container\n *ngFor=\"\n let row of data\n | sort: sortBy\n | search: term:filteredCountSubject\n | global: globalSearchTerm:filteredCountSubject\n | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id }\n \"\n >\n <tr\n (click)=\"onClick($event, row, '', null, data.indexOf(row))\"\n #contextMenu\n (contextmenu)=\"onRowContextMenu($event, row, '', null, data.indexOf(row))\"\n (dblclick)=\"onDoubleClick($event, row, '', null, data.indexOf(row))\"\n [class.ngx-table__table-row--selected]=\"\n data.indexOf(row) === selectedRow && !config.selectCell\n \"\n >\n <ng-container\n [ngTemplateOutlet]=\"rowTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: data.indexOf(row) }\"\n >\n </ng-container>\n <td *ngIf=\"config.detailsTemplate\">\n <span\n class=\"ngx-icon\"\n *ngIf=\"arrowDefinition\"\n [ngClass]=\"\n isRowCollapsed(data.indexOf(row))\n ? 'ngx-icon-arrow-down'\n : 'ngx-icon-arrow-right'\n \"\n (click)=\"collapseRow(data.indexOf(row))\"\n >\n </span>\n </td>\n </tr>\n <tr\n *ngIf=\"\n (config.detailsTemplate && selectedDetailsTemplateRowId.has(data.indexOf(row))) ||\n config.collapseAllRows\n \"\n >\n <td [attr.colspan]=\"columns.length + 1\">\n <ng-container\n [ngTemplateOutlet]=\"detailsTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: data.indexOf(row) }\"\n >\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </ng-container>\n <cdk-virtual-scroll-viewport\n itemSize=\"50\"\n *ngIf=\"config.infiniteScroll\"\n class=\"ngx-infinite-scroll-viewport\"\n >\n <ng-container\n *cdkVirtualFor=\"\n let row of data\n | sort: sortBy\n | search: term:filteredCountSubject\n | global: globalSearchTerm:filteredCountSubject;\n let rowIndex = index\n \"\n >\n <tr\n (click)=\"onClick($event, row, '', null, rowIndex)\"\n #contextMenu\n (contextmenu)=\"onRowContextMenu($event, row, '', null, rowIndex)\"\n (dblclick)=\"onDoubleClick($event, row, '', null, rowIndex)\"\n [class.ngx-table__table-row--selected]=\"\n rowIndex === selectedRow && !config.selectCell\n \"\n >\n <ng-container\n [ngTemplateOutlet]=\"rowTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: rowIndex }\"\n >\n </ng-container>\n <td *ngIf=\"config.detailsTemplate\">\n <span\n class=\"ngx-icon\"\n *ngIf=\"arrowDefinition\"\n [ngClass]=\"\n isRowCollapsed(rowIndex) ? 'ngx-icon-arrow-down' : 'ngx-icon-arrow-right'\n \"\n (click)=\"collapseRow(rowIndex)\"\n >\n </span>\n </td>\n </tr>\n <tr\n *ngIf=\"\n (config.detailsTemplate && selectedDetailsTemplateRowId.has(rowIndex)) ||\n config.collapseAllRows\n \"\n >\n <td [attr.colspan]=\"columns.length + 1\">\n <ng-container\n [ngTemplateOutlet]=\"detailsTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: rowIndex }\"\n >\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n </ng-container>\n <ng-container *ngIf=\"!rowTemplate && !config.groupRows\">\n <ul\n class=\"ngx-table__table-row-context-menu\"\n [ngStyle]=\"{\n position: 'absolute',\n top: rowContextMenuPosition.top,\n left: rowContextMenuPosition.left\n }\"\n *ngIf=\"rowContextMenuPosition.top\"\n >\n <ng-container\n [ngTemplateOutlet]=\"rowContextMenu\"\n [ngTemplateOutletContext]=\"{ $implicit: rowContextMenuPosition.value }\"\n >\n </ng-container>\n </ul>\n <ng-container *ngIf=\"!config.infiniteScroll\">\n <ng-container\n *ngFor=\"\n let row of data\n | sort: sortBy\n | search: term:filteredCountSubject\n | global: globalSearchTerm:filteredCountSubject\n | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id }\n \"\n >\n <tr\n [class.ngx-table__table-row--selected]=\"\n data.indexOf(row) === selectedRow && !config.selectCell\n \"\n >\n <td *ngIf=\"config.checkboxes\">\n <label class=\"ngx-form-checkbox\">\n <input\n type=\"checkbox\"\n id=\"checkbox-{{ data.indexOf(row) }}\"\n [checked]=\"isSelected || selectedCheckboxes.has(data.indexOf(row))\"\n (change)=\"onCheckboxSelect($event, row, data.indexOf(row))\"\n />\n <em class=\"ngx-form-icon\"></em>\n </label>\n </td>\n <td *ngIf=\"config.radio\">\n <label>\n <input\n type=\"radio\"\n id=\"radio-{{ data.indexOf(row) }}\"\n name=\"radio\"\n (change)=\"onRadioSelect($event, row, data.indexOf(row))\"\n />\n </label>\n </td>\n <ng-container *ngFor=\"let column of columns; let colIndex = index\">\n <td\n (click)=\"onClick($event, row, column.key, colIndex, data.indexOf(row))\"\n #contextMenu\n (contextmenu)=\"\n onRowContextMenu($event, row, column.key, colIndex, data.indexOf(row))\n \"\n (dblclick)=\"onDoubleClick($event, row, column.key, colIndex, data.indexOf(row))\"\n [class.pinned-left]=\"column.pinned\"\n [ngClass]=\"column.cssClass ? column.cssClass.name : ''\"\n [style.left]=\"styleService.pinnedWidth(column.pinned, colIndex)\"\n [class.ngx-table__table-col--selected]=\"\n colIndex === selectedCol && !config.selectCell\n \"\n [class.ngx-table__table-cell--selected]=\"\n colIndex === selectedCol &&\n data.indexOf(row) === selectedRow &&\n !config.selectCol &&\n !config.selectRow\n \"\n >\n <div *ngIf=\"!column.cellTemplate\">{{ row | render: column.key }}</div>\n <ng-container\n *ngIf=\"column.cellTemplate\"\n [ngTemplateOutlet]=\"column.cellTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowIndex: data.indexOf(row),\n column: column\n }\"\n >\n </ng-container>\n </td>\n </ng-container>\n <td *ngIf=\"config.additionalActions || config.detailsTemplate\">\n <span\n class=\"ngx-icon\"\n *ngIf=\"arrowDefinition\"\n [ngClass]=\"\n isRowCollapsed(data.indexOf(row))\n ? 'ngx-icon-arrow-down'\n : 'ngx-icon-arrow-right'\n \"\n (click)=\"collapseRow(data.indexOf(row))\"\n >\n </span>\n </td>\n </tr>\n <tr\n *ngIf=\"\n (config.detailsTemplate && selectedDetailsTemplateRowId.has(data.indexOf(row))) ||\n config.collapseAllRows\n \"\n >\n <td *ngIf=\"config.checkboxes || config.radio\"></td>\n <td [attr.colspan]=\"columns.length + 1\">\n <ng-container\n [ngTemplateOutlet]=\"detailsTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: data.indexOf(row) }\"\n >\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </ng-container>\n <!-- infinite scroll -->\n <cdk-virtual-scroll-viewport\n itemSize=\"50\"\n *ngIf=\"config.infiniteScroll\"\n class=\"ngx-infinite-scroll-viewport\"\n >\n <ng-container\n *cdkVirtualFor=\"\n let row of data\n | sort: sortBy\n | search: term:filteredCountSubject\n | global: globalSearchTerm:filteredCountSubject;\n let rowIndex = index\n \"\n >\n <tr\n [class.ngx-table__table-row--selected]=\"\n rowIndex === selectedRow && !config.selectCell\n \"\n >\n <td *ngIf=\"config.checkboxes\">\n <label class=\"ngx-form-checkbox\">\n <input\n type=\"checkbox\"\n id=\"checkbox-infinite-scroll-{{ rowIndex }}\"\n [checked]=\"isSelected || selectedCheckboxes.has(rowIndex)\"\n (change)=\"onCheckboxSelect($event, row, rowIndex)\"\n />\n <em class=\"ngx-form-icon\"></em>\n </label>\n </td>\n <td *ngIf=\"config.radio\">\n <label>\n <input\n type=\"radio\"\n id=\"radio-infinite-scroll-{{ rowIndex }}\"\n name=\"radio\"\n (change)=\"onRadioSelect($event, row, rowIndex)\"\n />\n </label>\n </td>\n <ng-container *ngFor=\"let column of columns; let colIndex = index\">\n <td\n (click)=\"onClick($event, row, column.key, colIndex, rowIndex)\"\n #contextMenu\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]=\"styleService.pinnedWidth(column.pinned, colIndex)\"\n [class.ngx-table__table-col--selected]=\"\n colIndex === selectedCol && !config.selectCell\n \"\n [class.ngx-table__table-cell--selected]=\"\n colIndex === selectedCol &&\n rowIndex === selectedRow &&\n !config.selectCol &&\n !config.selectRow\n \"\n >\n <div *ngIf=\"!column.cellTemplate\">{{ row | render: column.key }}</div>\n <ng-container\n *ngIf=\"column.cellTemplate\"\n [ngTemplateOutlet]=\"column.cellTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowIndex: rowIndex,\n column: column\n }\"\n >\n </ng-container>\n </td>\n </ng-container>\n <td *ngIf=\"config.additionalActions || config.detailsTemplate\">\n <span\n class=\"ngx-icon\"\n *ngIf=\"arrowDefinition\"\n [ngClass]=\"\n isRowCollapsed(rowIndex) ? 'ngx-icon-arrow-down' : 'ngx-icon-arrow-right'\n \"\n (click)=\"collapseRow(rowIndex)\"\n >\n </span>\n </td>\n </tr>\n <tr\n *ngIf=\"\n (config.detailsTemplate && selectedDetailsTemplateRowId.has(rowIndex)) ||\n config.collapseAllRows\n \"\n >\n <td *ngIf=\"config.checkboxes || config.radio\"></td>\n <td [attr.colspan]=\"columns.length + 1\">\n <ng-container\n [ngTemplateOutlet]=\"detailsTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: rowIndex }\"\n >\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n </ng-container>\n <ng-container *ngIf=\"!rowTemplate && config.groupRows\">\n <ng-container\n *ngFor=\"\n let group of grouped\n | sort: sortBy:config\n | search: term:filteredCountSubject:config\n | global: globalSearchTerm:filteredCountSubject\n | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id };\n let rowIndex = index\n \"\n >\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 >\n </ng-container>\n <td>\n <span\n class=\"ngx-icon\"\n *ngIf=\"arrowDefinition\"\n [ngClass]=\"\n isRowCollapsed(rowIndex) ? 'ngx-icon-arrow-down' : 'ngx-icon-arrow-right'\n \"\n (click)=\"collapseRow(rowIndex)\"\n >\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\n *ngIf=\"data && !config.isLoading && config.rowReorder\"\n class=\"ngx-draggable-row-area\"\n cdkDropList\n (cdkDropListDropped)=\"onDrop($event)\"\n >\n <ng-container *ngIf=\"!rowTemplate && !config.groupRows\">\n <ng-container\n *ngFor=\"\n let row of data\n | sort: sortBy\n | search: term:filteredCountSubject\n | global: globalSearchTerm:filteredCountSubject\n | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id }\n \"\n >\n <tr\n class=\"ngx-draggable-row\"\n cdkDrag\n (cdkDragStarted)=\"onDragStart($event)\"\n [cdkDragStartDelay]=\"config.reorderDelay || 0\"\n cdkDragLockAxis=\"y\"\n >\n <td *ngIf=\"config.checkboxes\">\n <label class=\"ngx-form-checkbox\">\n <input\n type=\"checkbox\"\n id=\"checkbox-draggable-{{ data.indexOf(row) }}\"\n [checked]=\"isSelected || selectedCheckboxes.has(data.indexOf(row))\"\n (change)=\"onCheckboxSelect($event, row, data.indexOf(row))\"\n />\n <em class=\"ngx-form-icon\"></em>\n </label>\n </td>\n <td *ngIf=\"config.radio\">\n <label>\n <input\n type=\"radio\"\n id=\"radio-draggable-{{ data.indexOf(row) }}\"\n name=\"radio\"\n (change)=\"onRadioSelect($event, row, data.indexOf(row))\"\n />\n </label>\n </td>\n <ng-container *ngFor=\"let column of columns; let colIndex = index\">\n <td\n (click)=\"onClick($event, row, column.key, colIndex, data.indexOf(row))\"\n (dblclick)=\"onDoubleClick($event, row, column.key, colIndex, data.indexOf(row))\"\n [class.ngx-table__table-col--selected]=\"\n colIndex === selectedCol && !config.selectCell\n \"\n [class.ngx-table__table-cell--selected]=\"\n colIndex === selectedCol &&\n data.indexOf(row) === selectedRow &&\n !config.selectCol &&\n !config.selectRow\n \"\n >\n <div *ngIf=\"!column.cellTemplate\">{{ row | render: column.key }}</div>\n <ng-container\n *ngIf=\"column.cellTemplate\"\n [ngTemplateOutlet]=\"column.cellTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowIndex: data.indexOf(row),\n column: column\n }\"\n >\n </ng-container>\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 *ngIf=\"noResultsTemplate\" [ngTemplateOutlet]=\"noResultsTemplate\">\n </ng-container>\n <td [attr.colspan]=\"columns && columns.length + 1\" *ngIf=\"!noResultsTemplate\">\n <div class=\"ngx-table__table-no-results\">No results</div>\n </td>\n </tr>\n </tbody>\n <tbody *ngIf=\"config.isLoading\">\n <tr class=\"ngx-table__body-loading\">\n <ng-container *ngIf=\"loadingTemplate\" [ngTemplateOutlet]=\"loadingTemplate\"> </ng-container>\n <td [attr.colspan]=\"columns && columns.length + 1\" *ngIf=\"!loadingTemplate\">\n <div [style.height.px]=\"loadingHeight\" 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 >\n </ng-container>\n </tr>\n </tfoot>\n </table>\n <pagination\n [attr.id]=\"'pagination' + id\"\n [id]=\"id\"\n #paginationComponent\n [config]=\"config\"\n [pagination]=\"pagination\"\n (updateRange)=\"onPagination($event)\"\n >\n </pagination>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: PaginationComponent, selector: "pagination", inputs: ["pagination", "config", "id"], outputs: ["updateRange"] }, { kind: "component", type: TableTHeadComponent, selector: "[table-thead]", inputs: ["config", "columns", "sortKey", "sortState", "selectAllTemplate", "filtersTemplate", "additionalActionsTemplate"], outputs: ["filter", "order", "selectAll", "event"] }, { kind: "pipe", type: i2.PaginatePipe, name: "paginate" }, { kind: "pipe", type: SearchPipe, name: "search" }, { kind: "pipe", type: RenderPipe, name: "render" }, { kind: "pipe", type: GlobalSearchPipe, name: "global" }, { kind: "pipe", type: SortPipe, name: "sort" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
1034 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BaseComponent, decorators: [{
|
1035 | type: Component,
|
1036 | args: [{ selector: 'ngx-table', providers: [DefaultConfigService, GroupRowsService, StyleService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"ngx-container\"\n [class.ngx-container--dark]=\"config.tableLayout.theme === 'dark'\"\n (dragenter)=\"dragEnter($event)\"\n (dragover)=\"dragOver($event)\"\n (dragleave)=\"dragLeave($event)\"\n (drop)=\"drop($event)\"\n>\n <table\n [id]=\"id\"\n #table\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 && !config.isLoading\"\n >\n <thead\n [class.ngx-infinite-scroll-viewport-thead]=\"config.infiniteScroll\"\n table-thead\n [config]=\"config\"\n [sortKey]=\"sortKey\"\n [sortState]=\"sortState\"\n [selectAllTemplate]=\"selectAllTemplate\"\n [filtersTemplate]=\"filtersTemplate\"\n [additionalActionsTemplate]=\"additionalActionsTemplate\"\n [columns]=\"columns\"\n (selectAll)=\"onSelectAll()\"\n (filter)=\"onSearch($event)\"\n (order)=\"orderBy($event)\"\n (event)=\"emitEvent($event.event, $event.value)\"\n ></thead>\n <tbody *ngIf=\"data && !config.isLoading && !config.rowReorder\">\n <ng-container *ngIf=\"rowTemplate\">\n <ul\n class=\"ngx-table__table-row-context-menu\"\n [ngStyle]=\"{\n position: 'absolute',\n top: rowContextMenuPosition.top,\n left: rowContextMenuPosition.left\n }\"\n *ngIf=\"rowContextMenuPosition.top\"\n >\n <ng-container\n [ngTemplateOutlet]=\"rowContextMenu\"\n [ngTemplateOutletContext]=\"{ $implicit: rowContextMenuPosition.value }\"\n >\n </ng-container>\n </ul>\n <ng-container *ngIf=\"!config.infiniteScroll\">\n <ng-container\n *ngFor=\"\n let row of data\n | sort: sortBy\n | search: term:filteredCountSubject\n | global: globalSearchTerm:filteredCountSubject\n | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id }\n \"\n >\n <tr\n (click)=\"onClick($event, row, '', null, data.indexOf(row))\"\n #contextMenu\n (contextmenu)=\"onRowContextMenu($event, row, '', null, data.indexOf(row))\"\n (dblclick)=\"onDoubleClick($event, row, '', null, data.indexOf(row))\"\n [class.ngx-table__table-row--selected]=\"\n data.indexOf(row) === selectedRow && !config.selectCell\n \"\n >\n <ng-container\n [ngTemplateOutlet]=\"rowTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: data.indexOf(row) }\"\n >\n </ng-container>\n <td *ngIf=\"config.detailsTemplate\">\n <span\n class=\"ngx-icon\"\n *ngIf=\"arrowDefinition\"\n [ngClass]=\"\n isRowCollapsed(data.indexOf(row))\n ? 'ngx-icon-arrow-down'\n : 'ngx-icon-arrow-right'\n \"\n (click)=\"collapseRow(data.indexOf(row))\"\n >\n </span>\n </td>\n </tr>\n <tr\n *ngIf=\"\n (config.detailsTemplate && selectedDetailsTemplateRowId.has(data.indexOf(row))) ||\n config.collapseAllRows\n \"\n >\n <td [attr.colspan]=\"columns.length + 1\">\n <ng-container\n [ngTemplateOutlet]=\"detailsTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: data.indexOf(row) }\"\n >\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </ng-container>\n <cdk-virtual-scroll-viewport\n itemSize=\"50\"\n *ngIf=\"config.infiniteScroll\"\n class=\"ngx-infinite-scroll-viewport\"\n >\n <ng-container\n *cdkVirtualFor=\"\n let row of data\n | sort: sortBy\n | search: term:filteredCountSubject\n | global: globalSearchTerm:filteredCountSubject;\n let rowIndex = index\n \"\n >\n <tr\n (click)=\"onClick($event, row, '', null, rowIndex)\"\n #contextMenu\n (contextmenu)=\"onRowContextMenu($event, row, '', null, rowIndex)\"\n (dblclick)=\"onDoubleClick($event, row, '', null, rowIndex)\"\n [class.ngx-table__table-row--selected]=\"\n rowIndex === selectedRow && !config.selectCell\n \"\n >\n <ng-container\n [ngTemplateOutlet]=\"rowTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: rowIndex }\"\n >\n </ng-container>\n <td *ngIf=\"config.detailsTemplate\">\n <span\n class=\"ngx-icon\"\n *ngIf=\"arrowDefinition\"\n [ngClass]=\"\n isRowCollapsed(rowIndex) ? 'ngx-icon-arrow-down' : 'ngx-icon-arrow-right'\n \"\n (click)=\"collapseRow(rowIndex)\"\n >\n </span>\n </td>\n </tr>\n <tr\n *ngIf=\"\n (config.detailsTemplate && selectedDetailsTemplateRowId.has(rowIndex)) ||\n config.collapseAllRows\n \"\n >\n <td [attr.colspan]=\"columns.length + 1\">\n <ng-container\n [ngTemplateOutlet]=\"detailsTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: rowIndex }\"\n >\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n </ng-container>\n <ng-container *ngIf=\"!rowTemplate && !config.groupRows\">\n <ul\n class=\"ngx-table__table-row-context-menu\"\n [ngStyle]=\"{\n position: 'absolute',\n top: rowContextMenuPosition.top,\n left: rowContextMenuPosition.left\n }\"\n *ngIf=\"rowContextMenuPosition.top\"\n >\n <ng-container\n [ngTemplateOutlet]=\"rowContextMenu\"\n [ngTemplateOutletContext]=\"{ $implicit: rowContextMenuPosition.value }\"\n >\n </ng-container>\n </ul>\n <ng-container *ngIf=\"!config.infiniteScroll\">\n <ng-container\n *ngFor=\"\n let row of data\n | sort: sortBy\n | search: term:filteredCountSubject\n | global: globalSearchTerm:filteredCountSubject\n | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id }\n \"\n >\n <tr\n [class.ngx-table__table-row--selected]=\"\n data.indexOf(row) === selectedRow && !config.selectCell\n \"\n >\n <td *ngIf=\"config.checkboxes\">\n <label class=\"ngx-form-checkbox\">\n <input\n type=\"checkbox\"\n id=\"checkbox-{{ data.indexOf(row) }}\"\n [checked]=\"isSelected || selectedCheckboxes.has(data.indexOf(row))\"\n (change)=\"onCheckboxSelect($event, row, data.indexOf(row))\"\n />\n <em class=\"ngx-form-icon\"></em>\n </label>\n </td>\n <td *ngIf=\"config.radio\">\n <label>\n <input\n type=\"radio\"\n id=\"radio-{{ data.indexOf(row) }}\"\n name=\"radio\"\n (change)=\"onRadioSelect($event, row, data.indexOf(row))\"\n />\n </label>\n </td>\n <ng-container *ngFor=\"let column of columns; let colIndex = index\">\n <td\n (click)=\"onClick($event, row, column.key, colIndex, data.indexOf(row))\"\n #contextMenu\n (contextmenu)=\"\n onRowContextMenu($event, row, column.key, colIndex, data.indexOf(row))\n \"\n (dblclick)=\"onDoubleClick($event, row, column.key, colIndex, data.indexOf(row))\"\n [class.pinned-left]=\"column.pinned\"\n [ngClass]=\"column.cssClass ? column.cssClass.name : ''\"\n [style.left]=\"styleService.pinnedWidth(column.pinned, colIndex)\"\n [class.ngx-table__table-col--selected]=\"\n colIndex === selectedCol && !config.selectCell\n \"\n [class.ngx-table__table-cell--selected]=\"\n colIndex === selectedCol &&\n data.indexOf(row) === selectedRow &&\n !config.selectCol &&\n !config.selectRow\n \"\n >\n <div *ngIf=\"!column.cellTemplate\">{{ row | render: column.key }}</div>\n <ng-container\n *ngIf=\"column.cellTemplate\"\n [ngTemplateOutlet]=\"column.cellTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowIndex: data.indexOf(row),\n column: column\n }\"\n >\n </ng-container>\n </td>\n </ng-container>\n <td *ngIf=\"config.additionalActions || config.detailsTemplate\">\n <span\n class=\"ngx-icon\"\n *ngIf=\"arrowDefinition\"\n [ngClass]=\"\n isRowCollapsed(data.indexOf(row))\n ? 'ngx-icon-arrow-down'\n : 'ngx-icon-arrow-right'\n \"\n (click)=\"collapseRow(data.indexOf(row))\"\n >\n </span>\n </td>\n </tr>\n <tr\n *ngIf=\"\n (config.detailsTemplate && selectedDetailsTemplateRowId.has(data.indexOf(row))) ||\n config.collapseAllRows\n \"\n >\n <td *ngIf=\"config.checkboxes || config.radio\"></td>\n <td [attr.colspan]=\"columns.length + 1\">\n <ng-container\n [ngTemplateOutlet]=\"detailsTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: data.indexOf(row) }\"\n >\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </ng-container>\n <!-- infinite scroll -->\n <cdk-virtual-scroll-viewport\n itemSize=\"50\"\n *ngIf=\"config.infiniteScroll\"\n class=\"ngx-infinite-scroll-viewport\"\n >\n <ng-container\n *cdkVirtualFor=\"\n let row of data\n | sort: sortBy\n | search: term:filteredCountSubject\n | global: globalSearchTerm:filteredCountSubject;\n let rowIndex = index\n \"\n >\n <tr\n [class.ngx-table__table-row--selected]=\"\n rowIndex === selectedRow && !config.selectCell\n \"\n >\n <td *ngIf=\"config.checkboxes\">\n <label class=\"ngx-form-checkbox\">\n <input\n type=\"checkbox\"\n id=\"checkbox-infinite-scroll-{{ rowIndex }}\"\n [checked]=\"isSelected || selectedCheckboxes.has(rowIndex)\"\n (change)=\"onCheckboxSelect($event, row, rowIndex)\"\n />\n <em class=\"ngx-form-icon\"></em>\n </label>\n </td>\n <td *ngIf=\"config.radio\">\n <label>\n <input\n type=\"radio\"\n id=\"radio-infinite-scroll-{{ rowIndex }}\"\n name=\"radio\"\n (change)=\"onRadioSelect($event, row, rowIndex)\"\n />\n </label>\n </td>\n <ng-container *ngFor=\"let column of columns; let colIndex = index\">\n <td\n (click)=\"onClick($event, row, column.key, colIndex, rowIndex)\"\n #contextMenu\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]=\"styleService.pinnedWidth(column.pinned, colIndex)\"\n [class.ngx-table__table-col--selected]=\"\n colIndex === selectedCol && !config.selectCell\n \"\n [class.ngx-table__table-cell--selected]=\"\n colIndex === selectedCol &&\n rowIndex === selectedRow &&\n !config.selectCol &&\n !config.selectRow\n \"\n >\n <div *ngIf=\"!column.cellTemplate\">{{ row | render: column.key }}</div>\n <ng-container\n *ngIf=\"column.cellTemplate\"\n [ngTemplateOutlet]=\"column.cellTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowIndex: rowIndex,\n column: column\n }\"\n >\n </ng-container>\n </td>\n </ng-container>\n <td *ngIf=\"config.additionalActions || config.detailsTemplate\">\n <span\n class=\"ngx-icon\"\n *ngIf=\"arrowDefinition\"\n [ngClass]=\"\n isRowCollapsed(rowIndex) ? 'ngx-icon-arrow-down' : 'ngx-icon-arrow-right'\n \"\n (click)=\"collapseRow(rowIndex)\"\n >\n </span>\n </td>\n </tr>\n <tr\n *ngIf=\"\n (config.detailsTemplate && selectedDetailsTemplateRowId.has(rowIndex)) ||\n config.collapseAllRows\n \"\n >\n <td *ngIf=\"config.checkboxes || config.radio\"></td>\n <td [attr.colspan]=\"columns.length + 1\">\n <ng-container\n [ngTemplateOutlet]=\"detailsTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: rowIndex }\"\n >\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n </ng-container>\n <ng-container *ngIf=\"!rowTemplate && config.groupRows\">\n <ng-container\n *ngFor=\"\n let group of grouped\n | sort: sortBy:config\n | search: term:filteredCountSubject:config\n | global: globalSearchTerm:filteredCountSubject\n | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id };\n let rowIndex = index\n \"\n >\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 >\n </ng-container>\n <td>\n <span\n class=\"ngx-icon\"\n *ngIf=\"arrowDefinition\"\n [ngClass]=\"\n isRowCollapsed(rowIndex) ? 'ngx-icon-arrow-down' : 'ngx-icon-arrow-right'\n \"\n (click)=\"collapseRow(rowIndex)\"\n >\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\n *ngIf=\"data && !config.isLoading && config.rowReorder\"\n class=\"ngx-draggable-row-area\"\n cdkDropList\n (cdkDropListDropped)=\"onDrop($event)\"\n >\n <ng-container *ngIf=\"!rowTemplate && !config.groupRows\">\n <ng-container\n *ngFor=\"\n let row of data\n | sort: sortBy\n | search: term:filteredCountSubject\n | global: globalSearchTerm:filteredCountSubject\n | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id }\n \"\n >\n <tr\n class=\"ngx-draggable-row\"\n cdkDrag\n (cdkDragStarted)=\"onDragStart($event)\"\n [cdkDragStartDelay]=\"config.reorderDelay || 0\"\n cdkDragLockAxis=\"y\"\n >\n <td *ngIf=\"config.checkboxes\">\n <label class=\"ngx-form-checkbox\">\n <input\n type=\"checkbox\"\n id=\"checkbox-draggable-{{ data.indexOf(row) }}\"\n [checked]=\"isSelected || selectedCheckboxes.has(data.indexOf(row))\"\n (change)=\"onCheckboxSelect($event, row, data.indexOf(row))\"\n />\n <em class=\"ngx-form-icon\"></em>\n </label>\n </td>\n <td *ngIf=\"config.radio\">\n <label>\n <input\n type=\"radio\"\n id=\"radio-draggable-{{ data.indexOf(row) }}\"\n name=\"radio\"\n (change)=\"onRadioSelect($event, row, data.indexOf(row))\"\n />\n </label>\n </td>\n <ng-container *ngFor=\"let column of columns; let colIndex = index\">\n <td\n (click)=\"onClick($event, row, column.key, colIndex, data.indexOf(row))\"\n (dblclick)=\"onDoubleClick($event, row, column.key, colIndex, data.indexOf(row))\"\n [class.ngx-table__table-col--selected]=\"\n colIndex === selectedCol && !config.selectCell\n \"\n [class.ngx-table__table-cell--selected]=\"\n colIndex === selectedCol &&\n data.indexOf(row) === selectedRow &&\n !config.selectCol &&\n !config.selectRow\n \"\n >\n <div *ngIf=\"!column.cellTemplate\">{{ row | render: column.key }}</div>\n <ng-container\n *ngIf=\"column.cellTemplate\"\n [ngTemplateOutlet]=\"column.cellTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowIndex: data.indexOf(row),\n column: column\n }\"\n >\n </ng-container>\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 *ngIf=\"noResultsTemplate\" [ngTemplateOutlet]=\"noResultsTemplate\">\n </ng-container>\n <td [attr.colspan]=\"columns && columns.length + 1\" *ngIf=\"!noResultsTemplate\">\n <div class=\"ngx-table__table-no-results\">No results</div>\n </td>\n </tr>\n </tbody>\n <tbody *ngIf=\"config.isLoading\">\n <tr class=\"ngx-table__body-loading\">\n <ng-container *ngIf=\"loadingTemplate\" [ngTemplateOutlet]=\"loadingTemplate\"> </ng-container>\n <td [attr.colspan]=\"columns && columns.length + 1\" *ngIf=\"!loadingTemplate\">\n <div [style.height.px]=\"loadingHeight\" 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 >\n </ng-container>\n </tr>\n </tfoot>\n </table>\n <pagination\n [attr.id]=\"'pagination' + id\"\n [id]=\"id\"\n #paginationComponent\n [config]=\"config\"\n [pagination]=\"pagination\"\n (updateRange)=\"onPagination($event)\"\n >\n </pagination>\n</div>\n" }]
|
1037 | }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.ScrollDispatcher }, { type: StyleService }]; }, propDecorators: { configuration: [{
|
1038 | type: Input
|
1039 | }], data: [{
|
1040 | type: Input
|
1041 | }], pagination: [{
|
1042 | type: Input
|
1043 | }], groupRowsBy: [{
|
1044 | type: Input
|
1045 | }], id: [{
|
1046 | type: Input
|
1047 | }], toggleRowIndex: [{
|
1048 | type: Input
|
1049 | }], detailsTemplate: [{
|
1050 | type: Input
|
1051 | }], summaryTemplate: [{
|
1052 | type: Input
|
1053 | }], groupRowsHeaderTemplate: [{
|
1054 | type: Input
|
1055 | }], filtersTemplate: [{
|
1056 | type: Input
|
1057 | }], selectAllTemplate: [{
|
1058 | type: Input
|
1059 | }], noResultsTemplate: [{
|
1060 | type: Input
|
1061 | }], loadingTemplate: [{
|
1062 | type: Input
|
1063 | }], additionalActionsTemplate: [{
|
1064 | type: Input
|
1065 | }], rowContextMenu: [{
|
1066 | type: Input
|
1067 | }], columns: [{
|
1068 | type: Input
|
1069 | }], event: [{
|
1070 | type: Output
|
1071 | }], rowTemplate: [{
|
1072 | type: ContentChild,
|
1073 | args: [TemplateRef]
|
1074 | }], paginationComponent: [{
|
1075 | type: ViewChild,
|
1076 | args: ['paginationComponent']
|
1077 | }], contextMenu: [{
|
1078 | type: ViewChild,
|
1079 | args: ['contextMenu']
|
1080 | }], table: [{
|
1081 | type: ViewChild,
|
1082 | args: ['table']
|
1083 | }], viewPort: [{
|
1084 | type: ViewChild,
|
1085 | args: [CdkVirtualScrollViewport]
|
1086 | }], onContextMenuClick: [{
|
1087 | type: HostListener,
|
1088 | args: ['document:click', ['$event.target']]
|
1089 | }] } });
|
1090 |
|
1091 | class BaseModule {
|
1092 | }
|
1093 | BaseModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BaseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
1094 | BaseModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: BaseModule, declarations: [BaseComponent,
|
1095 | HeaderComponent,
|
1096 | PaginationComponent,
|
1097 | TableTHeadComponent,
|
1098 |
|
1099 | SearchPipe,
|
1100 | RenderPipe,
|
1101 | GlobalSearchPipe,
|
1102 | SortPipe], imports: [CommonModule, NgxPaginationModule, DragDropModule, ScrollingModule], exports: [BaseComponent] });
|
1103 | BaseModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BaseModule, imports: [CommonModule, NgxPaginationModule, DragDropModule, ScrollingModule] });
|
1104 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BaseModule, decorators: [{
|
1105 | type: NgModule,
|
1106 | args: [{
|
1107 | declarations: [
|
1108 | BaseComponent,
|
1109 | HeaderComponent,
|
1110 | PaginationComponent,
|
1111 | TableTHeadComponent,
|
1112 |
|
1113 | SearchPipe,
|
1114 | RenderPipe,
|
1115 | GlobalSearchPipe,
|
1116 | SortPipe,
|
1117 | ],
|
1118 | imports: [CommonModule, NgxPaginationModule, DragDropModule, ScrollingModule],
|
1119 | exports: [BaseComponent],
|
1120 | }]
|
1121 | }] });
|
1122 |
|
1123 | class TableModule {
|
1124 | }
|
1125 | TableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
1126 | TableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: TableModule, imports: [CommonModule, BaseModule], exports: [BaseComponent] });
|
1127 | TableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TableModule, imports: [CommonModule, BaseModule] });
|
1128 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TableModule, decorators: [{
|
1129 | type: NgModule,
|
1130 | args: [{
|
1131 | imports: [CommonModule, BaseModule],
|
1132 | exports: [BaseComponent],
|
1133 | providers: [],
|
1134 | }]
|
1135 | }] });
|
1136 |
|
1137 |
|
1138 |
|
1139 |
|
1140 |
|
1141 | export { API, BaseComponent, DefaultConfig, Event, STYLE, THEME, TableModule };
|
1142 |
|
1143 |
|