@angular-generic-table/core 5.0.0-rc.10 → 5.0.0-rc.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/core.component.mjs +98 -30
- package/esm2020/lib/core.module.mjs +24 -7
- package/esm2020/lib/core.service.mjs +5 -5
- package/esm2020/lib/enums/order.enum.mjs +1 -1
- package/esm2020/lib/gt-delta/gt-delta.component.mjs +104 -0
- package/esm2020/lib/models/gt-pagination.mjs +2 -0
- package/esm2020/lib/models/table-column.interface.mjs +1 -1
- package/esm2020/lib/models/table-config.interface.mjs +1 -1
- package/esm2020/lib/models/table-events.interface.mjs +2 -0
- package/esm2020/lib/pagination/pagination.component.mjs +47 -12
- package/esm2020/lib/pagination/pagination.module.mjs +5 -5
- package/esm2020/lib/pipes/capital-case.pipe.mjs +3 -3
- package/esm2020/lib/pipes/dash-case.pipe.mjs +5 -5
- package/esm2020/lib/pipes/dynamic.pipe.mjs +3 -3
- package/esm2020/lib/pipes/highlight.pipe.mjs +6 -6
- package/esm2020/lib/pipes/sort-class.pipe.mjs +12 -6
- package/esm2020/lib/utilities/utilities.mjs +20 -6
- package/esm2020/public-api.mjs +3 -1
- package/fesm2015/angular-generic-table-core.mjs +331 -88
- package/fesm2015/angular-generic-table-core.mjs.map +1 -1
- package/fesm2020/angular-generic-table-core.mjs +328 -88
- package/fesm2020/angular-generic-table-core.mjs.map +1 -1
- package/{angular-generic-table-core.d.ts → index.d.ts} +0 -0
- package/lib/core.component.d.ts +18 -6
- package/lib/core.module.d.ts +3 -2
- package/lib/gt-delta/gt-delta.component.d.ts +20 -0
- package/lib/models/gt-pagination.d.ts +10 -0
- package/lib/models/table-column.interface.d.ts +4 -0
- package/lib/models/table-config.interface.d.ts +6 -0
- package/lib/models/table-events.interface.d.ts +11 -0
- package/lib/pagination/pagination.component.d.ts +11 -1
- package/lib/pipes/capital-case.pipe.d.ts +1 -1
- package/lib/pipes/dash-case.pipe.d.ts +1 -1
- package/lib/pipes/dynamic.pipe.d.ts +1 -1
- package/lib/pipes/highlight.pipe.d.ts +1 -1
- package/lib/pipes/sort-class.pipe.d.ts +2 -2
- package/package.json +5 -5
- package/public-api.d.ts +2 -0
- package/scss/index.scss +170 -13
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Pipe, Injector, Component, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
|
|
2
|
+
import { Injectable, Pipe, Injector, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, NgModule } from '@angular/core';
|
|
3
3
|
import { ReplaySubject, Subject, isObservable, of, combineLatest, EMPTY, BehaviorSubject } from 'rxjs';
|
|
4
|
-
import { startWith, map, switchMap,
|
|
4
|
+
import { debounceTime, distinctUntilChanged, tap, shareReplay, startWith, map, switchMap, withLatestFrom, take, pluck } from 'rxjs/operators';
|
|
5
5
|
import * as i1 from '@angular/common';
|
|
6
6
|
import { CommonModule } from '@angular/common';
|
|
7
7
|
|
|
8
8
|
class CoreService {
|
|
9
9
|
constructor() { }
|
|
10
10
|
}
|
|
11
|
-
CoreService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
12
|
-
CoreService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
13
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
11
|
+
CoreService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
12
|
+
CoreService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CoreService, providedIn: 'root' });
|
|
13
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CoreService, decorators: [{
|
|
14
14
|
type: Injectable,
|
|
15
15
|
args: [{
|
|
16
|
-
providedIn: 'root'
|
|
16
|
+
providedIn: 'root',
|
|
17
17
|
}]
|
|
18
18
|
}], ctorParameters: function () { return []; } });
|
|
19
19
|
|
|
@@ -51,11 +51,28 @@ search = (text, caseSensitive, data, config) => {
|
|
|
51
51
|
if (config.columns) {
|
|
52
52
|
const searchColumns = Object.keys(config.columns).filter(
|
|
53
53
|
// @ts-ignore
|
|
54
|
-
(key) =>
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
54
|
+
(key) => {
|
|
55
|
+
var _a, _b;
|
|
56
|
+
return config.columns &&
|
|
57
|
+
!((_a = config.columns[key]) === null || _a === void 0 ? void 0 : _a.hidden) &&
|
|
58
|
+
((_b = config.columns[key]) === null || _b === void 0 ? void 0 : _b.search) !== false;
|
|
59
|
+
});
|
|
60
|
+
const FILTERED = [];
|
|
61
|
+
for (let i = 0; i < data.length; i++) {
|
|
62
|
+
const row = data[i];
|
|
63
|
+
const match = Object.entries(row)
|
|
64
|
+
.filter(([key, value]) => searchColumns.indexOf(key) !== -1)
|
|
65
|
+
.reduce((acc, [key, value], index) => {
|
|
66
|
+
return (acc +
|
|
67
|
+
(index === 0 ? '' : ' ? ') +
|
|
68
|
+
(caseSensitive ? value + '' : (value + '').toLowerCase()));
|
|
69
|
+
}, '')
|
|
70
|
+
.indexOf(text) !== -1;
|
|
71
|
+
if (match) {
|
|
72
|
+
FILTERED[FILTERED.length] = row;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
return FILTERED;
|
|
59
76
|
}
|
|
60
77
|
else {
|
|
61
78
|
return data;
|
|
@@ -63,13 +80,19 @@ search = (text, caseSensitive, data, config) => {
|
|
|
63
80
|
};
|
|
64
81
|
|
|
65
82
|
class SortClassPipe {
|
|
66
|
-
transform(selection, property) {
|
|
67
|
-
return (selection === null || selection === void 0 ? void 0 : selection.sortBy) === property
|
|
83
|
+
transform(selection, property, aria = false) {
|
|
84
|
+
return (selection === null || selection === void 0 ? void 0 : selection.sortBy) === property
|
|
85
|
+
? !aria
|
|
86
|
+
? 'gt-sort-' + selection.sortByOrder
|
|
87
|
+
: selection.sortByOrder + 'ending'
|
|
88
|
+
: !aria
|
|
89
|
+
? ''
|
|
90
|
+
: null;
|
|
68
91
|
}
|
|
69
92
|
}
|
|
70
|
-
SortClassPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
71
|
-
SortClassPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "
|
|
72
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
93
|
+
SortClassPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: SortClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
94
|
+
SortClassPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: SortClassPipe, name: "sortClass" });
|
|
95
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: SortClassPipe, decorators: [{
|
|
73
96
|
type: Pipe,
|
|
74
97
|
args: [{
|
|
75
98
|
name: 'sortClass',
|
|
@@ -81,26 +104,12 @@ class DashCasePipe {
|
|
|
81
104
|
return dashed(s);
|
|
82
105
|
}
|
|
83
106
|
}
|
|
84
|
-
DashCasePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
85
|
-
DashCasePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "
|
|
86
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
87
|
-
type: Pipe,
|
|
88
|
-
args: [{
|
|
89
|
-
name: 'dashCase'
|
|
90
|
-
}]
|
|
91
|
-
}] });
|
|
92
|
-
|
|
93
|
-
class CapitalCasePipe {
|
|
94
|
-
transform(s) {
|
|
95
|
-
return capitalize(s);
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
CapitalCasePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CapitalCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
99
|
-
CapitalCasePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CapitalCasePipe, name: "capitalCase" });
|
|
100
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CapitalCasePipe, decorators: [{
|
|
107
|
+
DashCasePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: DashCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
108
|
+
DashCasePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: DashCasePipe, name: "dashCase" });
|
|
109
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: DashCasePipe, decorators: [{
|
|
101
110
|
type: Pipe,
|
|
102
111
|
args: [{
|
|
103
|
-
name: '
|
|
112
|
+
name: 'dashCase',
|
|
104
113
|
}]
|
|
105
114
|
}] });
|
|
106
115
|
|
|
@@ -118,7 +127,7 @@ class HighlightPipe {
|
|
|
118
127
|
searchTerm
|
|
119
128
|
.toLowerCase()
|
|
120
129
|
.match(/".*?"|[^ ]+/g) // extract words
|
|
121
|
-
.map(needle => needle.replace(/"(.*?)"/, '$1') // strip away '"'
|
|
130
|
+
.map((needle) => needle.replace(/"(.*?)"/, '$1') // strip away '"'
|
|
122
131
|
)
|
|
123
132
|
.join('|') + // combine words
|
|
124
133
|
')', 'ig');
|
|
@@ -141,12 +150,26 @@ class HighlightPipe {
|
|
|
141
150
|
return highlightedText;
|
|
142
151
|
}
|
|
143
152
|
}
|
|
144
|
-
HighlightPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
145
|
-
HighlightPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "
|
|
146
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
153
|
+
HighlightPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: HighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
154
|
+
HighlightPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: HighlightPipe, name: "highlight" });
|
|
155
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: HighlightPipe, decorators: [{
|
|
147
156
|
type: Pipe,
|
|
148
157
|
args: [{
|
|
149
|
-
name: 'highlight'
|
|
158
|
+
name: 'highlight',
|
|
159
|
+
}]
|
|
160
|
+
}] });
|
|
161
|
+
|
|
162
|
+
class CapitalCasePipe {
|
|
163
|
+
transform(s) {
|
|
164
|
+
return capitalize(s);
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
CapitalCasePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CapitalCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
168
|
+
CapitalCasePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: CapitalCasePipe, name: "capitalCase" });
|
|
169
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CapitalCasePipe, decorators: [{
|
|
170
|
+
type: Pipe,
|
|
171
|
+
args: [{
|
|
172
|
+
name: 'capitalCase',
|
|
150
173
|
}]
|
|
151
174
|
}] });
|
|
152
175
|
|
|
@@ -164,9 +187,9 @@ class DynamicPipe {
|
|
|
164
187
|
return pipe.transform(value, ...(pipeArgs || []));
|
|
165
188
|
}
|
|
166
189
|
}
|
|
167
|
-
DynamicPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
168
|
-
DynamicPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "
|
|
169
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
190
|
+
DynamicPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: DynamicPipe, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Pipe });
|
|
191
|
+
DynamicPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: DynamicPipe, name: "dynamicPipe" });
|
|
192
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: DynamicPipe, decorators: [{
|
|
170
193
|
type: Pipe,
|
|
171
194
|
args: [{
|
|
172
195
|
name: 'dynamicPipe',
|
|
@@ -175,6 +198,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
|
|
|
175
198
|
|
|
176
199
|
class CoreComponent {
|
|
177
200
|
constructor() {
|
|
201
|
+
this.rowClick = new EventEmitter();
|
|
202
|
+
this._rowHover$ = new ReplaySubject(1);
|
|
203
|
+
this.rowHover = new EventEmitter();
|
|
204
|
+
this.rowHover$ = this._rowHover$.asObservable().pipe(debounceTime(50), distinctUntilChanged((p, q) => p.index === q.index), tap((event) => this.rowHover.emit(event)), shareReplay(1));
|
|
178
205
|
this._loading$ = new ReplaySubject(1);
|
|
179
206
|
this.sortBy$ = new Subject();
|
|
180
207
|
// tslint:disable-next-line:variable-name
|
|
@@ -183,17 +210,43 @@ class CoreComponent {
|
|
|
183
210
|
// tslint:disable-next-line:variable-name
|
|
184
211
|
this._tableConfig$ = new ReplaySubject(1);
|
|
185
212
|
this.tableConfig$ = this._tableConfig$.pipe(map((value) => (isObservable(value) ? value : of(value))), switchMap((obs) => obs), shareReplay(1));
|
|
186
|
-
// tslint:disable-next-line:variable-name
|
|
187
213
|
this._data$ = new ReplaySubject(1);
|
|
188
|
-
this.data$ = this._data$.pipe(map((value) => (isObservable(value) ? value : of(value))), switchMap((obs) => combineLatest([obs
|
|
214
|
+
this.data$ = this._data$.pipe(map((value) => (isObservable(value) ? value : of(value))), switchMap((obs) => combineLatest([obs])), withLatestFrom(this.tableConfig$), map(([[data], config]) => {
|
|
215
|
+
// if columns or rows contains config for mapTo...
|
|
216
|
+
if ((config.columns &&
|
|
217
|
+
!!Object.values(config.columns).find((column) => !!column.mapTo)) ||
|
|
218
|
+
(config.rows &&
|
|
219
|
+
!!Object.values(config.rows).find((column) => !!column.mapTo))) {
|
|
220
|
+
// ...map data to new keys on row...
|
|
221
|
+
const newData = [];
|
|
222
|
+
for (let i = 0; i < data.length; i++) {
|
|
223
|
+
const row = data[i];
|
|
224
|
+
const newKeys = Object.entries(config.columns || config.rows || [])
|
|
225
|
+
.filter(([key, value]) => !!value.mapTo) // add keys for columns with mapTo config...
|
|
226
|
+
.reduce((previousValue, [key, value]) => {
|
|
227
|
+
var _a;
|
|
228
|
+
return (Object.assign(Object.assign({}, previousValue), { [key]: this.nestedValue(row, value.mapTo.path, (_a = value.mapTo) === null || _a === void 0 ? void 0 : _a.missingValue) }));
|
|
229
|
+
}, {});
|
|
230
|
+
newData[i] = Object.assign(Object.assign({}, row), newKeys);
|
|
231
|
+
}
|
|
232
|
+
data = newData;
|
|
233
|
+
}
|
|
234
|
+
return { data, config };
|
|
235
|
+
}), switchMap((obs) => combineLatest([
|
|
236
|
+
of(obs),
|
|
237
|
+
this.sortBy$.pipe(startWith(EMPTY)),
|
|
238
|
+
this.searchBy$,
|
|
239
|
+
])), map(([table, sortBy, searchBy]) => {
|
|
189
240
|
var _a;
|
|
190
241
|
// create a new array reference and sort new array (prevent mutating existing state)
|
|
191
|
-
data = [...data];
|
|
242
|
+
table.data = [...table.data];
|
|
192
243
|
return !sortBy
|
|
193
244
|
? searchBy
|
|
194
|
-
? search(searchBy, false, data, config)
|
|
195
|
-
: data
|
|
196
|
-
: (_a = (searchBy
|
|
245
|
+
? search(searchBy, false, table.data, table.config)
|
|
246
|
+
: table.data
|
|
247
|
+
: (_a = (searchBy
|
|
248
|
+
? search(searchBy, false, table.data, table.config)
|
|
249
|
+
: table.data)) === null || _a === void 0 ? void 0 : _a.sort((a, b) => {
|
|
197
250
|
// TODO: improve logic
|
|
198
251
|
const typed = sortBy;
|
|
199
252
|
return a[typed.sortBy] > b[typed.sortBy]
|
|
@@ -207,11 +260,18 @@ class CoreComponent {
|
|
|
207
260
|
: 0;
|
|
208
261
|
});
|
|
209
262
|
}), shareReplay(1));
|
|
210
|
-
this.table$ = combineLatest([
|
|
263
|
+
this.table$ = combineLatest([
|
|
264
|
+
this.data$,
|
|
265
|
+
this.tableConfig$,
|
|
266
|
+
]).pipe(map(([sorted, config]) => {
|
|
211
267
|
// if pagination is disabled...
|
|
212
268
|
if (!config.pagination || config.pagination.length === 0) {
|
|
213
269
|
// ...return unaltered array
|
|
214
|
-
return {
|
|
270
|
+
return {
|
|
271
|
+
data: [sorted],
|
|
272
|
+
config,
|
|
273
|
+
info: { records: sorted.length, pageTotal: 1 },
|
|
274
|
+
};
|
|
215
275
|
}
|
|
216
276
|
// return record set
|
|
217
277
|
return {
|
|
@@ -227,7 +287,8 @@ class CoreComponent {
|
|
|
227
287
|
this.currentPage$ = combineLatest([this._currentPage$, this.table$]).pipe(map(([page, table]) => {
|
|
228
288
|
var _a, _b;
|
|
229
289
|
// determine last page
|
|
230
|
-
const lastPage = Math.ceil(table.info.records /
|
|
290
|
+
const lastPage = Math.ceil(table.info.records /
|
|
291
|
+
(((_b = (_a = table.config) === null || _a === void 0 ? void 0 : _a.pagination) === null || _b === void 0 ? void 0 : _b.length) || table.info.records)) - 1;
|
|
231
292
|
// determine max/min position
|
|
232
293
|
return +page < 0 ? 0 : +page > lastPage ? lastPage : +page;
|
|
233
294
|
}), shareReplay(1));
|
|
@@ -238,27 +299,48 @@ class CoreComponent {
|
|
|
238
299
|
return (a.value.order || 0) - (b.value.order || 0);
|
|
239
300
|
};
|
|
240
301
|
}
|
|
241
|
-
set loading(
|
|
242
|
-
this._loading$.next(
|
|
302
|
+
set loading(isLoading) {
|
|
303
|
+
this._loading$.next(isLoading);
|
|
243
304
|
}
|
|
244
|
-
set page(
|
|
245
|
-
this._currentPage$.next(
|
|
305
|
+
set page(page) {
|
|
306
|
+
this._currentPage$.next(page);
|
|
246
307
|
}
|
|
247
|
-
set search(
|
|
248
|
-
this._searchBy$.next(
|
|
308
|
+
set search(string) {
|
|
309
|
+
this._searchBy$.next(string);
|
|
249
310
|
}
|
|
250
|
-
set config(
|
|
251
|
-
this._tableConfig$.next(
|
|
311
|
+
set config(config) {
|
|
312
|
+
this._tableConfig$.next(config);
|
|
252
313
|
}
|
|
253
|
-
set data(
|
|
254
|
-
this._data$.next(
|
|
314
|
+
set data(data) {
|
|
315
|
+
this._data$.next(data);
|
|
316
|
+
}
|
|
317
|
+
_rowClick(row, index, event) {
|
|
318
|
+
this.rowClick.emit({ row, index, event });
|
|
319
|
+
}
|
|
320
|
+
hoverRow(arg) {
|
|
321
|
+
if (typeof arg === 'number') {
|
|
322
|
+
this.data$
|
|
323
|
+
.pipe(map((data) => data[arg]), take(1))
|
|
324
|
+
.subscribe((row) => this._hoverRow(row, arg));
|
|
325
|
+
}
|
|
326
|
+
else if (typeof arg === 'string') {
|
|
327
|
+
// TODO: implement hover by id
|
|
328
|
+
}
|
|
329
|
+
else {
|
|
330
|
+
this._hoverRow(null, null);
|
|
331
|
+
}
|
|
332
|
+
}
|
|
333
|
+
_hoverRow(row, index, event) {
|
|
334
|
+
this._rowHover$.next({ row, index, event });
|
|
255
335
|
}
|
|
256
336
|
get loading$() {
|
|
257
337
|
return this._loading$.pipe(startWith(false), map((value) => (isObservable(value) ? value : of(value))), switchMap((obs) => obs), shareReplay(1));
|
|
258
338
|
}
|
|
259
339
|
sort(property) {
|
|
260
340
|
var _a, _b;
|
|
261
|
-
const newSortOrder = ((_a = this._sortBy) === null || _a === void 0 ? void 0 : _a.sortBy) !== property ||
|
|
341
|
+
const newSortOrder = ((_a = this._sortBy) === null || _a === void 0 ? void 0 : _a.sortBy) !== property ||
|
|
342
|
+
((_b = this._sortBy) === null || _b === void 0 ? void 0 : _b.sortByOrder) === Order.DESC ||
|
|
343
|
+
!this._sortBy.sortByOrder
|
|
262
344
|
? Order.ASC
|
|
263
345
|
: Order.DESC;
|
|
264
346
|
const newSortBy = {
|
|
@@ -268,12 +350,17 @@ class CoreComponent {
|
|
|
268
350
|
this.sortBy$.next(newSortBy);
|
|
269
351
|
this._sortBy = newSortBy;
|
|
270
352
|
}
|
|
353
|
+
nestedValue(object, mapTo, missingValue = null) {
|
|
354
|
+
const levels = mapTo.split('.');
|
|
355
|
+
return levels.reduce((previousValue, currentValue, index) => previousValue[currentValue] ||
|
|
356
|
+
(index === levels.length - 1 ? missingValue : {}), object);
|
|
357
|
+
}
|
|
271
358
|
}
|
|
272
|
-
CoreComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
273
|
-
CoreComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: CoreComponent, selector: "angular-generic-table", inputs: { loading: "loading", page: "page", search: "search", config: "config", data: "data" }, ngImport: i0, template: "<table [ngClass]=\"(tableConfig$ | async)?.class || 'table'\" [class.table-mobile]=\"(tableConfig$ | async)?.mobileLayout\">\n <thead>\n <tr *ngIf=\"{\n config:(tableConfig$ | async)!,\n loading: loading$ | async\n } as table\">\n <ng-container *ngFor=\"let column of table?.config?.columns | keyvalue: columnOrder\">\n <th\n *ngIf=\"!column.value?.hidden\"\n ngClass=\"{{ column.value?.sortable ? 'sort ' : '' }} {{ sortBy$ | async | sortClass: column.key }} {{\n (column.key | dashCase) + '-column'\n }} {{column.value.class}}\"\n [class.disabled]=\"table.loading\"\n (click)=\"table.loading || !column.value?.sortable || sort(column.key)\"\n >\n <span *ngIf=\"column.value?.header !== false\">{{ column.value?.header || column.key | capitalCase }}</span>\n </th>\n </ng-container>\n <ng-container *ngIf=\"((table?.config?.rows | keyvalue: columnOrder)||[])[0] as headerRow\">\n <th class=\"row-header\"\n ngClass=\"{{ headerRow.value?.sortable ? 'sort ' : '' }} {{ sortBy$ | async | sortClass: headerRow.key }} {{\n (headerRow.key | dashCase) + '-column'\n }}\"\n (click)=\"table.loading || !headerRow.value?.sortable || sort(headerRow.key)\">\n <ng-container *ngIf=\"headerRow?.value?.header !== false\">{{headerRow?.value?.header || headerRow.key | capitalCase }}</ng-container>\n </th>\n <th *ngFor=\"let column of ((table$ | async)?.data || [])[0]\" ngClass=\"{{headerRow.value?.class}}\">\n <ng-container [ngTemplateOutlet]=\"(table.config?.rows || {})[headerRow.key].templateRef ? templateRef : (table.config?.rows || {})[headerRow.key].transform ? transformData:\n rawData\" [ngTemplateOutletContext]=\"{row: column, column: headerRow, transform: (table.config?.rows || {})[headerRow.key].transform, templateRef: (table.config?.rows || {})[headerRow.key].templateRef, index: 0}\">\n </ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody *ngIf=\"loading$ | async; else tableContent\">\n <tr>\n <td class=\"p-0\" [colSpan]=\"colspan$ | async\">\n <ng-content select=\".table-loading\"></ng-content>\n </td>\n </tr>\n </tbody>\n</table>\n<ng-template #tableContent>\n <ng-container\n *ngIf=\"(table$ | async)! as table\"\n >\n <tbody *ngIf=\"(table!.data![0] || table!.data!).length > 0; else noData\">\n <ng-container *ngIf=\"table.config.columns\">\n <tr *ngFor=\"let row of table!.data![(currentPage$ | async) || 0]; let i = index\" [attr.id]=\"'tableRow_' + i\">\n <ng-container *ngFor=\"let column of table.config?.columns | keyvalue: columnOrder\">\n <td *ngIf=\"!column.value?.hidden\" ngClass=\"{{(column.key | dashCase) + '-column'}} {{column.value?.class}}\">\n <span *ngIf=\"column.value?.mobileHeader && table.config?.mobileLayout\" class=\"mobile-header\">{{ column.value?.mobileHeader !== true ? column.value?.mobileHeader : column.value?.header || column.key | capitalCase }}</span>\n <ng-container [ngTemplateOutlet]=\"(searchBy$ | async) && !(table.config?.columns || {})[column.key].templateRef ? highlighted:\n (table.config?.columns || {})[column.key].templateRef ? templateRef : (table.config?.columns || {})[column.key].transform ? transformData:\n rawData\" [ngTemplateOutletContext]=\"{row: row, column: column, search: (searchBy$ | async), transform: (table.config?.columns || {})[column.key].transform, templateRef: (table.config?.columns || {})[column.key].templateRef, index: i}\"></ng-container></td>\n </ng-container>\n </tr>\n </ng-container>\n <ng-container *ngIf=\"table.config.rows\">\n <ng-container *ngFor=\"let row of table?.config?.rows | keyvalue: columnOrder | slice:1; let i = index\">\n <tr *ngIf=\"!row.value?.hidden\" [attr.id]=\"'tableRow_' + i\" ngClass=\"{{(row.key | dashCase) + '-row'}}\">\n <th class=\"row-header\">\n <span *ngIf=\"row.value.mobileHeader\" class=\"mobile-header\">{{ row.value?.mobileHeader !== true ? row.value?.mobileHeader : row.value?.header || row.key | capitalCase }}</span>\n {{row.value?.header || row.key | capitalCase}}\n </th>\n <td *ngFor=\"let column of (table?.data || [])[0]\" ngClass=\"{{row.value?.class}}\">\n <ng-container [ngTemplateOutlet]=\"(table.config?.rows || {})[row.key].templateRef ? templateRef : (table.config?.rows || {})[row.key].transform ? transformData:\n rawData\" [ngTemplateOutletContext]=\"{row: column, column: row, transform: (table.config?.rows || {})[row.key].transform, templateRef: (table.config?.rows || {})[row.key].templateRef, index: i}\">\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </ng-container>\n </tbody>\n </ng-container>\n</ng-template>\n<ng-template #noData>\n <tbody>\n <tr>\n <td class=\"p-0\" [colSpan]=\"colspan$ | async\">\n <ng-content select=\".table-no-data\"></ng-content>\n </td>\n </tr>\n </tbody>\n</ng-template>\n<ng-template #highlighted let-row=\"row\" let-column=\"column\" let-search=\"search\">\n <div [innerHTML]=\"(row[column.key] | highlight: search)\"></div>\n</ng-template>\n<ng-template #rawData let-row=\"row\" let-column=\"column\">\n {{row[column.key]}}\n</ng-template>\n<ng-template #transformData let-row=\"row\" let-column=\"column\" let-transform=\"transform\">\n {{row[column.key] | dynamicPipe:transform.pipe:transform?.args}}\n</ng-template>\n<ng-template #templateRef let-row=\"row\" let-column=\"column\" let-index=\"index\" let-templateRef=\"templateRef\">\n <ng-container [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{row: row, col: column, index: index}\"></ng-container>\n</ng-template>\n", directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i1.AsyncPipe, "keyvalue": i1.KeyValuePipe, "sortClass": SortClassPipe, "dashCase": DashCasePipe, "capitalCase": CapitalCasePipe, "slice": i1.SlicePipe, "highlight": HighlightPipe, "dynamicPipe": DynamicPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
274
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
359
|
+
CoreComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
360
|
+
CoreComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: CoreComponent, selector: "angular-generic-table", inputs: { loading: "loading", page: "page", search: "search", config: "config", data: "data" }, outputs: { rowClick: "rowClick", rowHover: "rowHover" }, ngImport: i0, template: "<table\n [ngClass]=\"(tableConfig$ | async)?.class || 'table'\"\n [class.table-mobile]=\"(tableConfig$ | async)?.mobileLayout\"\n [class.table-horizontal]=\"(tableConfig$ | async)?.rows\"\n [class.table-loading]=\"loading$ | async\"\n [class.gt-sticky-row-header]=\"\n (tableConfig$ | async)?.stickyHeaders?.row && (tableConfig$ | async)?.rows\n \"\n [class.gt-sticky-column-header]=\"\n (tableConfig$ | async)?.stickyHeaders?.column\n \"\n [attr.aria-busy]=\"(loading$ | async) === true ? true : null\"\n>\n <thead>\n <tr\n *ngIf=\"{\n config: (tableConfig$ | async)!,\n isLoading: loading$ | async\n } as table\"\n >\n <ng-container\n *ngFor=\"let column of table?.config?.columns | keyvalue: columnOrder\"\n >\n <th\n *ngIf=\"!column.value?.hidden\"\n ngClass=\"{{ (column.key | dashCase) + '-column' }} {{\n column.value.class\n }}\"\n [class.disabled]=\"table.isLoading\"\n [attr.aria-sort]=\"sortBy$ | async | sortClass: column.key:true\"\n [class.gt-sortable]=\"true\"\n scope=\"col\"\n >\n <button\n *ngIf=\"column.value?.sortable\"\n class=\"gt-sort\"\n (click)=\"\n table.isLoading || !column.value?.sortable || sort(column.key)\n \"\n >\n <span *ngIf=\"column.value?.header !== false\">{{\n column.value?.header || column.key | capitalCase\n }}</span>\n </button>\n <span\n *ngIf=\"!column.value?.sortable && column.value?.header !== false\"\n >{{ column.value?.header || column.key | capitalCase }}</span\n >\n </th>\n </ng-container>\n <ng-container\n *ngIf=\"\n ((table?.config?.rows | keyvalue: columnOrder) || [])[0] as headerRow\n \"\n >\n <th\n class=\"row-header\"\n [attr.aria-sort]=\"sortBy$ | async | sortClass: headerRow.key:true\"\n ngClass=\"{{ headerRow.value?.sortable ? 'sort ' : '' }} {{\n sortBy$ | async | sortClass: headerRow.key\n }} {{ (headerRow.key | dashCase) + '-column' }}\"\n (click)=\"\n table.isLoading || !headerRow.value?.sortable || sort(headerRow.key)\n \"\n scope=\"col\"\n >\n <ng-container *ngIf=\"headerRow?.value?.header !== false\">{{\n headerRow?.value?.header || headerRow.key | capitalCase\n }}</ng-container>\n </th>\n <th\n *ngFor=\"let column of ((table$ | async)?.data || [])[0]\"\n ngClass=\"{{ headerRow.value?.class }}\"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n (table.config?.rows || {})[headerRow.key].templateRef\n ? templateRef\n : (table.config?.rows || {})[headerRow.key].transform\n ? transformData\n : rawData\n \"\n [ngTemplateOutletContext]=\"{\n row: column,\n column: headerRow,\n transform: (table.config?.rows || {})[headerRow.key].transform,\n templateRef: (table.config?.rows || {})[headerRow.key]\n .templateRef,\n index: 0\n }\"\n >\n </ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody *ngIf=\"loading$ | async; else tableContent\">\n <tr>\n <td class=\"p-0\" [colSpan]=\"colspan$ | async\">\n <ng-content select=\".table-loading\"></ng-content>\n </td>\n </tr>\n </tbody>\n</table>\n<ng-template #tableContent>\n <ng-container *ngIf=\"(table$ | async)! as table\">\n <tbody *ngIf=\"(table!.data![0] || table!.data!).length > 0; else noData\">\n <ng-container *ngIf=\"table.config.columns\">\n <tr\n *ngFor=\"\n let row of table!.data![(currentPage$ | async) || 0];\n let i = index\n \"\n [attr.id]=\"'tableRow_' + i\"\n (click)=\"table?.config?.rowClick && _rowClick(row, i, $event)\"\n (mouseover)=\"table?.config?.rowHover && _hoverRow(row, i, $event)\"\n (mouseout)=\"table?.config?.rowHover && _hoverRow(null, null, $event)\"\n [class.gt-hover]=\"(rowHover$ | async)?.index === i\"\n >\n <ng-container\n *ngFor=\"let column of table.config?.columns | keyvalue: columnOrder\"\n >\n <td\n *ngIf=\"!column.value?.hidden\"\n ngClass=\"{{ (column.key | dashCase) + '-column' }} {{\n column.value?.class\n }}\"\n [attr.data-label]=\"\n table.config?.mobileLayout && column.value?.mobileHeader\n ? column.value?.mobileHeader !== true\n ? column.value?.mobileHeader\n : (column.value?.header || column.key | capitalCase)\n : null\n \"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n (searchBy$ | async) &&\n !(table.config?.columns || {})[column.key].templateRef\n ? highlighted\n : (table.config?.columns || {})[column.key].templateRef\n ? templateRef\n : (table.config?.columns || {})[column.key].transform\n ? transformData\n : rawData\n \"\n [ngTemplateOutletContext]=\"{\n row: row,\n column: column,\n search: (searchBy$ | async),\n transform: (table.config?.columns || {})[column.key]\n .transform,\n templateRef: (table.config?.columns || {})[column.key]\n .templateRef,\n index: i,\n data: table.data[(currentPage$ | async) || 0]\n }\"\n ></ng-container>\n </td>\n </ng-container>\n </tr>\n </ng-container>\n <ng-container *ngIf=\"table.config.rows\">\n <ng-container\n *ngFor=\"\n let row of table?.config?.rows | keyvalue: columnOrder | slice: 1;\n let i = index\n \"\n >\n <tr\n *ngIf=\"!row.value?.hidden\"\n [attr.id]=\"'tableRow_' + i\"\n ngClass=\"{{ (row.key | dashCase) + '-row' }}\"\n (click)=\"table?.config?.rowClick && _rowClick(row, i, $event)\"\n (mouseover)=\"table?.config?.rowHover && _hoverRow(row, i, $event)\"\n (mouseout)=\"\n table?.config?.rowHover && _hoverRow(null, null, $event)\n \"\n [class.gt-hover]=\"(rowHover$ | async)?.index === i\"\n >\n <th class=\"row-header\" scope=\"row\">\n {{ row.value?.header || row.key | capitalCase }}\n </th>\n <td\n *ngFor=\"let column of (table?.data || [])[0]; let y = index\"\n ngClass=\"{{ row.value?.class }}\"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n (table.config?.rows || {})[row.key].templateRef\n ? templateRef\n : (table.config?.rows || {})[row.key].transform\n ? transformData\n : rawData\n \"\n [ngTemplateOutletContext]=\"{\n row: column,\n column: row,\n transform: (table.config?.rows || {})[row.key].transform,\n templateRef: (table.config?.rows || {})[row.key].templateRef,\n index: table.config?.rows ? y : i,\n data: table.data[(currentPage$ | async) || 0]\n }\"\n >\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </ng-container>\n </tbody>\n </ng-container>\n</ng-template>\n<ng-template #noData>\n <tbody>\n <tr>\n <td class=\"p-0\" [colSpan]=\"colspan$ | async\">\n <ng-content select=\".table-no-data\"></ng-content>\n </td>\n </tr>\n </tbody>\n</ng-template>\n<ng-template #highlighted let-row=\"row\" let-column=\"column\" let-search=\"search\">\n <div [innerHTML]=\"row[column.key] | highlight: search\"></div>\n</ng-template>\n<ng-template #rawData let-row=\"row\" let-column=\"column\">\n {{ row[column.key] }}\n</ng-template>\n<ng-template\n #transformData\n let-row=\"row\"\n let-column=\"column\"\n let-transform=\"transform\"\n let-data=\"data\"\n>\n {{ row[column.key] | dynamicPipe: transform.pipe:transform?.args }}\n</ng-template>\n<ng-template\n #templateRef\n let-row=\"row\"\n let-column=\"column\"\n let-index=\"index\"\n let-templateRef=\"templateRef\"\n let-data=\"data\"\n>\n <ng-container\n [ngTemplateOutlet]=\"templateRef\"\n [ngTemplateOutletContext]=\"{\n row: row,\n col: column,\n index: index,\n data: data\n }\"\n ></ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: SortClassPipe, name: "sortClass" }, { kind: "pipe", type: DashCasePipe, name: "dashCase" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: CapitalCasePipe, name: "capitalCase" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
361
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CoreComponent, decorators: [{
|
|
275
362
|
type: Component,
|
|
276
|
-
args: [{ selector: 'angular-generic-table',
|
|
363
|
+
args: [{ selector: 'angular-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table\n [ngClass]=\"(tableConfig$ | async)?.class || 'table'\"\n [class.table-mobile]=\"(tableConfig$ | async)?.mobileLayout\"\n [class.table-horizontal]=\"(tableConfig$ | async)?.rows\"\n [class.table-loading]=\"loading$ | async\"\n [class.gt-sticky-row-header]=\"\n (tableConfig$ | async)?.stickyHeaders?.row && (tableConfig$ | async)?.rows\n \"\n [class.gt-sticky-column-header]=\"\n (tableConfig$ | async)?.stickyHeaders?.column\n \"\n [attr.aria-busy]=\"(loading$ | async) === true ? true : null\"\n>\n <thead>\n <tr\n *ngIf=\"{\n config: (tableConfig$ | async)!,\n isLoading: loading$ | async\n } as table\"\n >\n <ng-container\n *ngFor=\"let column of table?.config?.columns | keyvalue: columnOrder\"\n >\n <th\n *ngIf=\"!column.value?.hidden\"\n ngClass=\"{{ (column.key | dashCase) + '-column' }} {{\n column.value.class\n }}\"\n [class.disabled]=\"table.isLoading\"\n [attr.aria-sort]=\"sortBy$ | async | sortClass: column.key:true\"\n [class.gt-sortable]=\"true\"\n scope=\"col\"\n >\n <button\n *ngIf=\"column.value?.sortable\"\n class=\"gt-sort\"\n (click)=\"\n table.isLoading || !column.value?.sortable || sort(column.key)\n \"\n >\n <span *ngIf=\"column.value?.header !== false\">{{\n column.value?.header || column.key | capitalCase\n }}</span>\n </button>\n <span\n *ngIf=\"!column.value?.sortable && column.value?.header !== false\"\n >{{ column.value?.header || column.key | capitalCase }}</span\n >\n </th>\n </ng-container>\n <ng-container\n *ngIf=\"\n ((table?.config?.rows | keyvalue: columnOrder) || [])[0] as headerRow\n \"\n >\n <th\n class=\"row-header\"\n [attr.aria-sort]=\"sortBy$ | async | sortClass: headerRow.key:true\"\n ngClass=\"{{ headerRow.value?.sortable ? 'sort ' : '' }} {{\n sortBy$ | async | sortClass: headerRow.key\n }} {{ (headerRow.key | dashCase) + '-column' }}\"\n (click)=\"\n table.isLoading || !headerRow.value?.sortable || sort(headerRow.key)\n \"\n scope=\"col\"\n >\n <ng-container *ngIf=\"headerRow?.value?.header !== false\">{{\n headerRow?.value?.header || headerRow.key | capitalCase\n }}</ng-container>\n </th>\n <th\n *ngFor=\"let column of ((table$ | async)?.data || [])[0]\"\n ngClass=\"{{ headerRow.value?.class }}\"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n (table.config?.rows || {})[headerRow.key].templateRef\n ? templateRef\n : (table.config?.rows || {})[headerRow.key].transform\n ? transformData\n : rawData\n \"\n [ngTemplateOutletContext]=\"{\n row: column,\n column: headerRow,\n transform: (table.config?.rows || {})[headerRow.key].transform,\n templateRef: (table.config?.rows || {})[headerRow.key]\n .templateRef,\n index: 0\n }\"\n >\n </ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody *ngIf=\"loading$ | async; else tableContent\">\n <tr>\n <td class=\"p-0\" [colSpan]=\"colspan$ | async\">\n <ng-content select=\".table-loading\"></ng-content>\n </td>\n </tr>\n </tbody>\n</table>\n<ng-template #tableContent>\n <ng-container *ngIf=\"(table$ | async)! as table\">\n <tbody *ngIf=\"(table!.data![0] || table!.data!).length > 0; else noData\">\n <ng-container *ngIf=\"table.config.columns\">\n <tr\n *ngFor=\"\n let row of table!.data![(currentPage$ | async) || 0];\n let i = index\n \"\n [attr.id]=\"'tableRow_' + i\"\n (click)=\"table?.config?.rowClick && _rowClick(row, i, $event)\"\n (mouseover)=\"table?.config?.rowHover && _hoverRow(row, i, $event)\"\n (mouseout)=\"table?.config?.rowHover && _hoverRow(null, null, $event)\"\n [class.gt-hover]=\"(rowHover$ | async)?.index === i\"\n >\n <ng-container\n *ngFor=\"let column of table.config?.columns | keyvalue: columnOrder\"\n >\n <td\n *ngIf=\"!column.value?.hidden\"\n ngClass=\"{{ (column.key | dashCase) + '-column' }} {{\n column.value?.class\n }}\"\n [attr.data-label]=\"\n table.config?.mobileLayout && column.value?.mobileHeader\n ? column.value?.mobileHeader !== true\n ? column.value?.mobileHeader\n : (column.value?.header || column.key | capitalCase)\n : null\n \"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n (searchBy$ | async) &&\n !(table.config?.columns || {})[column.key].templateRef\n ? highlighted\n : (table.config?.columns || {})[column.key].templateRef\n ? templateRef\n : (table.config?.columns || {})[column.key].transform\n ? transformData\n : rawData\n \"\n [ngTemplateOutletContext]=\"{\n row: row,\n column: column,\n search: (searchBy$ | async),\n transform: (table.config?.columns || {})[column.key]\n .transform,\n templateRef: (table.config?.columns || {})[column.key]\n .templateRef,\n index: i,\n data: table.data[(currentPage$ | async) || 0]\n }\"\n ></ng-container>\n </td>\n </ng-container>\n </tr>\n </ng-container>\n <ng-container *ngIf=\"table.config.rows\">\n <ng-container\n *ngFor=\"\n let row of table?.config?.rows | keyvalue: columnOrder | slice: 1;\n let i = index\n \"\n >\n <tr\n *ngIf=\"!row.value?.hidden\"\n [attr.id]=\"'tableRow_' + i\"\n ngClass=\"{{ (row.key | dashCase) + '-row' }}\"\n (click)=\"table?.config?.rowClick && _rowClick(row, i, $event)\"\n (mouseover)=\"table?.config?.rowHover && _hoverRow(row, i, $event)\"\n (mouseout)=\"\n table?.config?.rowHover && _hoverRow(null, null, $event)\n \"\n [class.gt-hover]=\"(rowHover$ | async)?.index === i\"\n >\n <th class=\"row-header\" scope=\"row\">\n {{ row.value?.header || row.key | capitalCase }}\n </th>\n <td\n *ngFor=\"let column of (table?.data || [])[0]; let y = index\"\n ngClass=\"{{ row.value?.class }}\"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n (table.config?.rows || {})[row.key].templateRef\n ? templateRef\n : (table.config?.rows || {})[row.key].transform\n ? transformData\n : rawData\n \"\n [ngTemplateOutletContext]=\"{\n row: column,\n column: row,\n transform: (table.config?.rows || {})[row.key].transform,\n templateRef: (table.config?.rows || {})[row.key].templateRef,\n index: table.config?.rows ? y : i,\n data: table.data[(currentPage$ | async) || 0]\n }\"\n >\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </ng-container>\n </tbody>\n </ng-container>\n</ng-template>\n<ng-template #noData>\n <tbody>\n <tr>\n <td class=\"p-0\" [colSpan]=\"colspan$ | async\">\n <ng-content select=\".table-no-data\"></ng-content>\n </td>\n </tr>\n </tbody>\n</ng-template>\n<ng-template #highlighted let-row=\"row\" let-column=\"column\" let-search=\"search\">\n <div [innerHTML]=\"row[column.key] | highlight: search\"></div>\n</ng-template>\n<ng-template #rawData let-row=\"row\" let-column=\"column\">\n {{ row[column.key] }}\n</ng-template>\n<ng-template\n #transformData\n let-row=\"row\"\n let-column=\"column\"\n let-transform=\"transform\"\n let-data=\"data\"\n>\n {{ row[column.key] | dynamicPipe: transform.pipe:transform?.args }}\n</ng-template>\n<ng-template\n #templateRef\n let-row=\"row\"\n let-column=\"column\"\n let-index=\"index\"\n let-templateRef=\"templateRef\"\n let-data=\"data\"\n>\n <ng-container\n [ngTemplateOutlet]=\"templateRef\"\n [ngTemplateOutletContext]=\"{\n row: row,\n col: column,\n index: index,\n data: data\n }\"\n ></ng-container>\n</ng-template>\n" }]
|
|
277
364
|
}], propDecorators: { loading: [{
|
|
278
365
|
type: Input
|
|
279
366
|
}], page: [{
|
|
@@ -284,27 +371,176 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
|
|
|
284
371
|
type: Input
|
|
285
372
|
}], data: [{
|
|
286
373
|
type: Input
|
|
374
|
+
}], rowClick: [{
|
|
375
|
+
type: Output
|
|
376
|
+
}], rowHover: [{
|
|
377
|
+
type: Output
|
|
378
|
+
}] } });
|
|
379
|
+
|
|
380
|
+
class GtDeltaComponent {
|
|
381
|
+
constructor() {
|
|
382
|
+
this.Math = Math;
|
|
383
|
+
this.Number = Number;
|
|
384
|
+
this.data = [];
|
|
385
|
+
this.index = 0;
|
|
386
|
+
this.classes = {
|
|
387
|
+
span: 'gt-delta',
|
|
388
|
+
positive: 'text-success',
|
|
389
|
+
negative: 'text-danger',
|
|
390
|
+
};
|
|
391
|
+
this.key = 'value';
|
|
392
|
+
this.notApplicableValue = 'n/a';
|
|
393
|
+
this.initialValue = '-';
|
|
394
|
+
}
|
|
395
|
+
}
|
|
396
|
+
GtDeltaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: GtDeltaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
397
|
+
GtDeltaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: GtDeltaComponent, selector: "gt-delta", inputs: { data: "data", index: "index", baseIndex: "baseIndex", classes: "classes", key: "key", notApplicableValue: "notApplicableValue", initialValue: "initialValue" }, ngImport: i0, template: `<span
|
|
398
|
+
*ngIf="{
|
|
399
|
+
value:
|
|
400
|
+
index === 0
|
|
401
|
+
? initialValue
|
|
402
|
+
: ((baseIndex === undefined
|
|
403
|
+
? data[index - 1][key]
|
|
404
|
+
: data[baseIndex][key]) -
|
|
405
|
+
data[index][key]) /
|
|
406
|
+
-Math.abs(
|
|
407
|
+
baseIndex === undefined
|
|
408
|
+
? data[index - 1][key]
|
|
409
|
+
: data[baseIndex][key]
|
|
410
|
+
)
|
|
411
|
+
} as delta"
|
|
412
|
+
[class]="[
|
|
413
|
+
classes.span,
|
|
414
|
+
!delta.value || !Number.isFinite(delta.value)
|
|
415
|
+
? null
|
|
416
|
+
: delta.value > 0
|
|
417
|
+
? classes.positive
|
|
418
|
+
: classes.negative
|
|
419
|
+
]"
|
|
420
|
+
[class.gt-delta-positive]="delta.value > 0 && Number.isFinite(delta.value)"
|
|
421
|
+
[class.gt-delta-negative]="delta.value < 0"
|
|
422
|
+
>{{
|
|
423
|
+
Number.isFinite(delta.value)
|
|
424
|
+
? (delta.value | percent)
|
|
425
|
+
: delta.value === initialValue
|
|
426
|
+
? initialValue
|
|
427
|
+
: notApplicableValue
|
|
428
|
+
}}</span
|
|
429
|
+
>`, isInline: true, styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.PercentPipe, name: "percent" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
430
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: GtDeltaComponent, decorators: [{
|
|
431
|
+
type: Component,
|
|
432
|
+
args: [{ selector: 'gt-delta', template: `<span
|
|
433
|
+
*ngIf="{
|
|
434
|
+
value:
|
|
435
|
+
index === 0
|
|
436
|
+
? initialValue
|
|
437
|
+
: ((baseIndex === undefined
|
|
438
|
+
? data[index - 1][key]
|
|
439
|
+
: data[baseIndex][key]) -
|
|
440
|
+
data[index][key]) /
|
|
441
|
+
-Math.abs(
|
|
442
|
+
baseIndex === undefined
|
|
443
|
+
? data[index - 1][key]
|
|
444
|
+
: data[baseIndex][key]
|
|
445
|
+
)
|
|
446
|
+
} as delta"
|
|
447
|
+
[class]="[
|
|
448
|
+
classes.span,
|
|
449
|
+
!delta.value || !Number.isFinite(delta.value)
|
|
450
|
+
? null
|
|
451
|
+
: delta.value > 0
|
|
452
|
+
? classes.positive
|
|
453
|
+
: classes.negative
|
|
454
|
+
]"
|
|
455
|
+
[class.gt-delta-positive]="delta.value > 0 && Number.isFinite(delta.value)"
|
|
456
|
+
[class.gt-delta-negative]="delta.value < 0"
|
|
457
|
+
>{{
|
|
458
|
+
Number.isFinite(delta.value)
|
|
459
|
+
? (delta.value | percent)
|
|
460
|
+
: delta.value === initialValue
|
|
461
|
+
? initialValue
|
|
462
|
+
: notApplicableValue
|
|
463
|
+
}}</span
|
|
464
|
+
>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block}\n"] }]
|
|
465
|
+
}], ctorParameters: function () { return []; }, propDecorators: { data: [{
|
|
466
|
+
type: Input
|
|
467
|
+
}], index: [{
|
|
468
|
+
type: Input
|
|
469
|
+
}], baseIndex: [{
|
|
470
|
+
type: Input
|
|
471
|
+
}], classes: [{
|
|
472
|
+
type: Input
|
|
473
|
+
}], key: [{
|
|
474
|
+
type: Input
|
|
475
|
+
}], notApplicableValue: [{
|
|
476
|
+
type: Input
|
|
477
|
+
}], initialValue: [{
|
|
478
|
+
type: Input
|
|
287
479
|
}] } });
|
|
288
480
|
|
|
289
481
|
class GenericTableCoreModule {
|
|
290
482
|
}
|
|
291
|
-
GenericTableCoreModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
292
|
-
GenericTableCoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "
|
|
293
|
-
|
|
294
|
-
|
|
483
|
+
GenericTableCoreModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: GenericTableCoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
484
|
+
GenericTableCoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: GenericTableCoreModule, declarations: [CoreComponent,
|
|
485
|
+
SortClassPipe,
|
|
486
|
+
DashCasePipe,
|
|
487
|
+
HighlightPipe,
|
|
488
|
+
CapitalCasePipe,
|
|
489
|
+
CapitalCasePipe,
|
|
490
|
+
DynamicPipe,
|
|
491
|
+
GtDeltaComponent], imports: [CommonModule], exports: [CoreComponent, GtDeltaComponent] });
|
|
492
|
+
GenericTableCoreModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: GenericTableCoreModule, imports: [CommonModule] });
|
|
493
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: GenericTableCoreModule, decorators: [{
|
|
295
494
|
type: NgModule,
|
|
296
495
|
args: [{
|
|
297
|
-
declarations: [
|
|
496
|
+
declarations: [
|
|
497
|
+
CoreComponent,
|
|
498
|
+
SortClassPipe,
|
|
499
|
+
DashCasePipe,
|
|
500
|
+
HighlightPipe,
|
|
501
|
+
CapitalCasePipe,
|
|
502
|
+
CapitalCasePipe,
|
|
503
|
+
DynamicPipe,
|
|
504
|
+
GtDeltaComponent,
|
|
505
|
+
],
|
|
298
506
|
imports: [CommonModule],
|
|
299
|
-
exports: [CoreComponent],
|
|
507
|
+
exports: [CoreComponent, GtDeltaComponent],
|
|
300
508
|
}]
|
|
301
509
|
}] });
|
|
302
510
|
|
|
303
511
|
class PaginationComponent {
|
|
304
512
|
constructor() {
|
|
305
513
|
this.table$ = new ReplaySubject(1);
|
|
514
|
+
this._ariaLabels = {
|
|
515
|
+
nav: 'Table pagination',
|
|
516
|
+
button: 'Go to page ',
|
|
517
|
+
};
|
|
518
|
+
this._classes = {
|
|
519
|
+
ul: 'pagination',
|
|
520
|
+
li: 'page-item',
|
|
521
|
+
button: 'page-link',
|
|
522
|
+
};
|
|
523
|
+
this._paginationLength = 5;
|
|
306
524
|
this.pagination$ = this.table$.pipe(switchMap((core) => combineLatest([core === null || core === void 0 ? void 0 : core.table$.pipe(pluck('info')), core === null || core === void 0 ? void 0 : core.currentPage$])), map(([info, currentPage]) => this.generateList(info.pageTotal, currentPage)));
|
|
307
525
|
}
|
|
526
|
+
get paginationLength() {
|
|
527
|
+
return this._paginationLength;
|
|
528
|
+
}
|
|
529
|
+
set paginationLength(value) {
|
|
530
|
+
this._paginationLength = +value;
|
|
531
|
+
}
|
|
532
|
+
get classes() {
|
|
533
|
+
return this._classes;
|
|
534
|
+
}
|
|
535
|
+
set classes(value) {
|
|
536
|
+
this._classes = value;
|
|
537
|
+
}
|
|
538
|
+
get ariaLabels() {
|
|
539
|
+
return this._ariaLabels;
|
|
540
|
+
}
|
|
541
|
+
set ariaLabels(value) {
|
|
542
|
+
this._ariaLabels = value;
|
|
543
|
+
}
|
|
308
544
|
get table() {
|
|
309
545
|
return this._table;
|
|
310
546
|
}
|
|
@@ -313,14 +549,13 @@ class PaginationComponent {
|
|
|
313
549
|
this.table$.next(value);
|
|
314
550
|
}
|
|
315
551
|
generateList(pages, currentPosition) {
|
|
316
|
-
const
|
|
317
|
-
const
|
|
318
|
-
const length = pages < paginationLength ? pages : paginationLength;
|
|
552
|
+
const middle = Math.floor(this.paginationLength / 2);
|
|
553
|
+
const length = pages < this.paginationLength ? pages : this.paginationLength;
|
|
319
554
|
return Array.from({ length }, (_, i) => {
|
|
320
555
|
if (i === 0) {
|
|
321
556
|
return 1;
|
|
322
557
|
}
|
|
323
|
-
else if (pages < paginationLength) {
|
|
558
|
+
else if (pages < this.paginationLength) {
|
|
324
559
|
return i + 1;
|
|
325
560
|
}
|
|
326
561
|
else if (i + 1 === length) {
|
|
@@ -329,10 +564,12 @@ class PaginationComponent {
|
|
|
329
564
|
else if (currentPosition > middle && currentPosition < pages - middle) {
|
|
330
565
|
return i + currentPosition - (middle - 1);
|
|
331
566
|
}
|
|
332
|
-
else if (currentPosition > middle &&
|
|
567
|
+
else if (currentPosition > middle &&
|
|
568
|
+
currentPosition < pages - (middle - 1)) {
|
|
333
569
|
return i + currentPosition - middle;
|
|
334
570
|
}
|
|
335
|
-
else if (currentPosition > middle &&
|
|
571
|
+
else if (currentPosition > middle &&
|
|
572
|
+
currentPosition === pages - (middle - 1)) {
|
|
336
573
|
return i + currentPosition - (middle + 1);
|
|
337
574
|
}
|
|
338
575
|
else if (currentPosition > middle && currentPosition === pages - 1) {
|
|
@@ -349,21 +586,27 @@ class PaginationComponent {
|
|
|
349
586
|
}
|
|
350
587
|
}
|
|
351
588
|
}
|
|
352
|
-
PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
353
|
-
PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
354
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
589
|
+
PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
590
|
+
PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: PaginationComponent, selector: "angular-generic-table-pagination", inputs: { paginationLength: "paginationLength", classes: "classes", ariaLabels: "ariaLabels", table: "table" }, ngImport: i0, template: "<ng-container\n *ngIf=\"{\n links: pagination$ | async,\n currentPosition: table?.currentPage$ | async\n } as pagination\"\n>\n <nav\n *ngIf=\"pagination.links && pagination.links.length > 1\"\n role=\"navigation\"\n [attr.aria-label]=\"ariaLabels?.nav\"\n class=\"gt-pagination\"\n [class]=\"classes?.nav\"\n >\n <ul [class]=\"classes?.ul\">\n <ng-container\n *ngFor=\"\n let position of pagination!.links;\n let i = index;\n let last = last\n \"\n >\n <li\n [class]=\"classes?.li\"\n [class.active]=\"position === (pagination!.currentPosition || 0) + 1\"\n >\n <button\n [class]=\"classes?.button\"\n [attr.aria-label]=\"ariaLabels.button + position\"\n (click)=\"goto(position)\"\n >\n {{ position }}\n </button>\n </li>\n <li\n [class]=\"classes?.li\"\n class=\"gt-ellipsis\"\n *ngIf=\"position + 1 !== pagination!.links![i + 1] && !last\"\n >\n <button [class]=\"classes?.button\" disabled tabindex=\"-1\"></button>\n </li>\n </ng-container>\n </ul>\n </nav>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
591
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
355
592
|
type: Component,
|
|
356
|
-
args: [{ selector: 'angular-generic-table-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container
|
|
357
|
-
}], propDecorators: {
|
|
593
|
+
args: [{ selector: 'angular-generic-table-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container\n *ngIf=\"{\n links: pagination$ | async,\n currentPosition: table?.currentPage$ | async\n } as pagination\"\n>\n <nav\n *ngIf=\"pagination.links && pagination.links.length > 1\"\n role=\"navigation\"\n [attr.aria-label]=\"ariaLabels?.nav\"\n class=\"gt-pagination\"\n [class]=\"classes?.nav\"\n >\n <ul [class]=\"classes?.ul\">\n <ng-container\n *ngFor=\"\n let position of pagination!.links;\n let i = index;\n let last = last\n \"\n >\n <li\n [class]=\"classes?.li\"\n [class.active]=\"position === (pagination!.currentPosition || 0) + 1\"\n >\n <button\n [class]=\"classes?.button\"\n [attr.aria-label]=\"ariaLabels.button + position\"\n (click)=\"goto(position)\"\n >\n {{ position }}\n </button>\n </li>\n <li\n [class]=\"classes?.li\"\n class=\"gt-ellipsis\"\n *ngIf=\"position + 1 !== pagination!.links![i + 1] && !last\"\n >\n <button [class]=\"classes?.button\" disabled tabindex=\"-1\"></button>\n </li>\n </ng-container>\n </ul>\n </nav>\n</ng-container>\n" }]
|
|
594
|
+
}], propDecorators: { paginationLength: [{
|
|
595
|
+
type: Input
|
|
596
|
+
}], classes: [{
|
|
597
|
+
type: Input
|
|
598
|
+
}], ariaLabels: [{
|
|
599
|
+
type: Input
|
|
600
|
+
}], table: [{
|
|
358
601
|
type: Input
|
|
359
602
|
}] } });
|
|
360
603
|
|
|
361
604
|
class GenericTablePaginationModule {
|
|
362
605
|
}
|
|
363
|
-
GenericTablePaginationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
364
|
-
GenericTablePaginationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "
|
|
365
|
-
GenericTablePaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
366
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
606
|
+
GenericTablePaginationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: GenericTablePaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
607
|
+
GenericTablePaginationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: GenericTablePaginationModule, declarations: [PaginationComponent], imports: [CommonModule], exports: [PaginationComponent] });
|
|
608
|
+
GenericTablePaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: GenericTablePaginationModule, imports: [CommonModule] });
|
|
609
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: GenericTablePaginationModule, decorators: [{
|
|
367
610
|
type: NgModule,
|
|
368
611
|
args: [{
|
|
369
612
|
declarations: [PaginationComponent],
|
|
@@ -380,5 +623,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
|
|
|
380
623
|
* Generated bundle index. Do not edit.
|
|
381
624
|
*/
|
|
382
625
|
|
|
383
|
-
export { CoreComponent, CoreService, GenericTableCoreModule, GenericTablePaginationModule, PaginationComponent };
|
|
626
|
+
export { CoreComponent, CoreService, GenericTableCoreModule, GenericTablePaginationModule, GtDeltaComponent, PaginationComponent };
|
|
384
627
|
//# sourceMappingURL=angular-generic-table-core.mjs.map
|