@angular-generic-table/core 5.0.0-rc.11 → 5.0.0-rc.12
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 +50 -32
- 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 +115 -0
- package/esm2020/lib/models/gt-pagination.mjs +2 -0
- package/esm2020/lib/models/table-config.interface.mjs +1 -1
- 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 +4 -4
- package/esm2020/lib/pipes/dash-case.pipe.mjs +5 -5
- package/esm2020/lib/pipes/dynamic.pipe.mjs +4 -4
- package/esm2020/lib/pipes/highlight.pipe.mjs +6 -6
- package/esm2020/lib/pipes/sort-class.pipe.mjs +5 -5
- package/esm2020/lib/utilities/utilities.mjs +20 -6
- package/esm2020/public-api.mjs +2 -1
- package/fesm2015/angular-generic-table-core.mjs +284 -86
- package/fesm2015/angular-generic-table-core.mjs.map +1 -1
- package/fesm2020/angular-generic-table-core.mjs +282 -87
- package/fesm2020/angular-generic-table-core.mjs.map +1 -1
- package/lib/core.component.d.ts +5 -5
- 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-config.interface.d.ts +4 -0
- package/lib/pagination/pagination.component.d.ts +11 -1
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
- package/scss/index.scss +170 -13
|
@@ -8,12 +8,12 @@ import { CommonModule } from '@angular/common';
|
|
|
8
8
|
class CoreService {
|
|
9
9
|
constructor() { }
|
|
10
10
|
}
|
|
11
|
-
CoreService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
12
|
-
CoreService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.
|
|
13
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
11
|
+
CoreService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
12
|
+
CoreService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CoreService, providedIn: 'root' });
|
|
13
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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,59 +51,76 @@ 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;
|
|
62
79
|
}
|
|
63
80
|
};
|
|
64
81
|
|
|
82
|
+
class DashCasePipe {
|
|
83
|
+
transform(s) {
|
|
84
|
+
return dashed(s);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
DashCasePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DashCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
88
|
+
DashCasePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DashCasePipe, name: "dashCase" });
|
|
89
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DashCasePipe, decorators: [{
|
|
90
|
+
type: Pipe,
|
|
91
|
+
args: [{
|
|
92
|
+
name: 'dashCase',
|
|
93
|
+
}]
|
|
94
|
+
}] });
|
|
95
|
+
|
|
65
96
|
class SortClassPipe {
|
|
66
97
|
transform(selection, property, aria = false) {
|
|
67
98
|
return (selection === null || selection === void 0 ? void 0 : selection.sortBy) === property
|
|
68
99
|
? !aria
|
|
69
|
-
? 'sort-' + selection.sortByOrder
|
|
100
|
+
? 'gt-sort-' + selection.sortByOrder
|
|
70
101
|
: selection.sortByOrder + 'ending'
|
|
71
102
|
: !aria
|
|
72
103
|
? ''
|
|
73
104
|
: null;
|
|
74
105
|
}
|
|
75
106
|
}
|
|
76
|
-
SortClassPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
77
|
-
SortClassPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.
|
|
78
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
107
|
+
SortClassPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
108
|
+
SortClassPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortClassPipe, name: "sortClass" });
|
|
109
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortClassPipe, decorators: [{
|
|
79
110
|
type: Pipe,
|
|
80
111
|
args: [{
|
|
81
112
|
name: 'sortClass',
|
|
82
113
|
}]
|
|
83
114
|
}] });
|
|
84
115
|
|
|
85
|
-
class DashCasePipe {
|
|
86
|
-
transform(s) {
|
|
87
|
-
return dashed(s);
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
DashCasePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DashCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
91
|
-
DashCasePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DashCasePipe, name: "dashCase" });
|
|
92
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DashCasePipe, decorators: [{
|
|
93
|
-
type: Pipe,
|
|
94
|
-
args: [{
|
|
95
|
-
name: 'dashCase'
|
|
96
|
-
}]
|
|
97
|
-
}] });
|
|
98
|
-
|
|
99
116
|
class CapitalCasePipe {
|
|
100
117
|
transform(s) {
|
|
101
118
|
return capitalize(s);
|
|
102
119
|
}
|
|
103
120
|
}
|
|
104
|
-
CapitalCasePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
105
|
-
CapitalCasePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.
|
|
106
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
121
|
+
CapitalCasePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CapitalCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
122
|
+
CapitalCasePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CapitalCasePipe, name: "capitalCase" });
|
|
123
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CapitalCasePipe, decorators: [{
|
|
107
124
|
type: Pipe,
|
|
108
125
|
args: [{
|
|
109
126
|
name: 'capitalCase',
|
|
@@ -124,7 +141,7 @@ class HighlightPipe {
|
|
|
124
141
|
searchTerm
|
|
125
142
|
.toLowerCase()
|
|
126
143
|
.match(/".*?"|[^ ]+/g) // extract words
|
|
127
|
-
.map(needle => needle.replace(/"(.*?)"/, '$1') // strip away '"'
|
|
144
|
+
.map((needle) => needle.replace(/"(.*?)"/, '$1') // strip away '"'
|
|
128
145
|
)
|
|
129
146
|
.join('|') + // combine words
|
|
130
147
|
')', 'ig');
|
|
@@ -147,12 +164,12 @@ class HighlightPipe {
|
|
|
147
164
|
return highlightedText;
|
|
148
165
|
}
|
|
149
166
|
}
|
|
150
|
-
HighlightPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
151
|
-
HighlightPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.
|
|
152
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
167
|
+
HighlightPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
168
|
+
HighlightPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HighlightPipe, name: "highlight" });
|
|
169
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HighlightPipe, decorators: [{
|
|
153
170
|
type: Pipe,
|
|
154
171
|
args: [{
|
|
155
|
-
name: 'highlight'
|
|
172
|
+
name: 'highlight',
|
|
156
173
|
}]
|
|
157
174
|
}] });
|
|
158
175
|
|
|
@@ -170,9 +187,9 @@ class DynamicPipe {
|
|
|
170
187
|
return pipe.transform(value, ...(pipeArgs || []));
|
|
171
188
|
}
|
|
172
189
|
}
|
|
173
|
-
DynamicPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
174
|
-
DynamicPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.
|
|
175
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
190
|
+
DynamicPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DynamicPipe, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Pipe });
|
|
191
|
+
DynamicPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DynamicPipe, name: "dynamicPipe" });
|
|
192
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DynamicPipe, decorators: [{
|
|
176
193
|
type: Pipe,
|
|
177
194
|
args: [{
|
|
178
195
|
name: 'dynamicPipe',
|
|
@@ -192,10 +209,12 @@ class CoreComponent {
|
|
|
192
209
|
this._data$ = new ReplaySubject(1);
|
|
193
210
|
this.data$ = this._data$.pipe(map((value) => (isObservable(value) ? value : of(value))), switchMap((obs) => combineLatest([obs])), withLatestFrom(this.tableConfig$), map(([[data], config]) => {
|
|
194
211
|
// if columns or rows contains config for mapTo...
|
|
195
|
-
if (config.columns &&
|
|
196
|
-
|
|
212
|
+
if ((config.columns &&
|
|
213
|
+
!!Object.values(config.columns).find((column) => !!column.mapTo)) ||
|
|
214
|
+
(config.rows &&
|
|
215
|
+
!!Object.values(config.rows).find((column) => !!column.mapTo))) {
|
|
197
216
|
// ...map data to new keys on row...
|
|
198
|
-
data = data.map(row => {
|
|
217
|
+
data = data.map((row) => {
|
|
199
218
|
const newKeys = Object.entries(config.columns || config.rows || [])
|
|
200
219
|
.filter(([key, value]) => !!value.mapTo) // add keys for columns with mapTo config...
|
|
201
220
|
.reduce((previousValue, currentValue) => {
|
|
@@ -208,7 +227,11 @@ class CoreComponent {
|
|
|
208
227
|
});
|
|
209
228
|
}
|
|
210
229
|
return { data, config };
|
|
211
|
-
}), switchMap(obs => combineLatest([
|
|
230
|
+
}), switchMap((obs) => combineLatest([
|
|
231
|
+
of(obs),
|
|
232
|
+
this.sortBy$.pipe(startWith(EMPTY)),
|
|
233
|
+
this.searchBy$,
|
|
234
|
+
])), map(([table, sortBy, searchBy]) => {
|
|
212
235
|
var _a;
|
|
213
236
|
// create a new array reference and sort new array (prevent mutating existing state)
|
|
214
237
|
table.data = [...table.data];
|
|
@@ -216,7 +239,9 @@ class CoreComponent {
|
|
|
216
239
|
? searchBy
|
|
217
240
|
? search(searchBy, false, table.data, table.config)
|
|
218
241
|
: table.data
|
|
219
|
-
: (_a = (searchBy
|
|
242
|
+
: (_a = (searchBy
|
|
243
|
+
? search(searchBy, false, table.data, table.config)
|
|
244
|
+
: table.data)) === null || _a === void 0 ? void 0 : _a.sort((a, b) => {
|
|
220
245
|
// TODO: improve logic
|
|
221
246
|
const typed = sortBy;
|
|
222
247
|
return a[typed.sortBy] > b[typed.sortBy]
|
|
@@ -230,11 +255,18 @@ class CoreComponent {
|
|
|
230
255
|
: 0;
|
|
231
256
|
});
|
|
232
257
|
}), shareReplay(1));
|
|
233
|
-
this.table$ = combineLatest([
|
|
258
|
+
this.table$ = combineLatest([
|
|
259
|
+
this.data$,
|
|
260
|
+
this.tableConfig$,
|
|
261
|
+
]).pipe(map(([sorted, config]) => {
|
|
234
262
|
// if pagination is disabled...
|
|
235
263
|
if (!config.pagination || config.pagination.length === 0) {
|
|
236
264
|
// ...return unaltered array
|
|
237
|
-
return {
|
|
265
|
+
return {
|
|
266
|
+
data: [sorted],
|
|
267
|
+
config,
|
|
268
|
+
info: { records: sorted.length, pageTotal: 1 },
|
|
269
|
+
};
|
|
238
270
|
}
|
|
239
271
|
// return record set
|
|
240
272
|
return {
|
|
@@ -250,7 +282,8 @@ class CoreComponent {
|
|
|
250
282
|
this.currentPage$ = combineLatest([this._currentPage$, this.table$]).pipe(map(([page, table]) => {
|
|
251
283
|
var _a, _b;
|
|
252
284
|
// determine last page
|
|
253
|
-
const lastPage = Math.ceil(table.info.records /
|
|
285
|
+
const lastPage = Math.ceil(table.info.records /
|
|
286
|
+
(((_b = (_a = table.config) === null || _a === void 0 ? void 0 : _a.pagination) === null || _b === void 0 ? void 0 : _b.length) || table.info.records)) - 1;
|
|
254
287
|
// determine max/min position
|
|
255
288
|
return +page < 0 ? 0 : +page > lastPage ? lastPage : +page;
|
|
256
289
|
}), shareReplay(1));
|
|
@@ -261,27 +294,29 @@ class CoreComponent {
|
|
|
261
294
|
return (a.value.order || 0) - (b.value.order || 0);
|
|
262
295
|
};
|
|
263
296
|
}
|
|
264
|
-
set loading(
|
|
265
|
-
this._loading$.next(
|
|
297
|
+
set loading(isLoading) {
|
|
298
|
+
this._loading$.next(isLoading);
|
|
266
299
|
}
|
|
267
|
-
set page(
|
|
268
|
-
this._currentPage$.next(
|
|
300
|
+
set page(page) {
|
|
301
|
+
this._currentPage$.next(page);
|
|
269
302
|
}
|
|
270
|
-
set search(
|
|
271
|
-
this._searchBy$.next(
|
|
303
|
+
set search(string) {
|
|
304
|
+
this._searchBy$.next(string);
|
|
272
305
|
}
|
|
273
|
-
set config(
|
|
274
|
-
this._tableConfig$.next(
|
|
306
|
+
set config(config) {
|
|
307
|
+
this._tableConfig$.next(config);
|
|
275
308
|
}
|
|
276
|
-
set data(
|
|
277
|
-
this._data$.next(
|
|
309
|
+
set data(data) {
|
|
310
|
+
this._data$.next(data);
|
|
278
311
|
}
|
|
279
312
|
get loading$() {
|
|
280
313
|
return this._loading$.pipe(startWith(false), map((value) => (isObservable(value) ? value : of(value))), switchMap((obs) => obs), shareReplay(1));
|
|
281
314
|
}
|
|
282
315
|
sort(property) {
|
|
283
316
|
var _a, _b;
|
|
284
|
-
const newSortOrder = ((_a = this._sortBy) === null || _a === void 0 ? void 0 : _a.sortBy) !== property ||
|
|
317
|
+
const newSortOrder = ((_a = this._sortBy) === null || _a === void 0 ? void 0 : _a.sortBy) !== property ||
|
|
318
|
+
((_b = this._sortBy) === null || _b === void 0 ? void 0 : _b.sortByOrder) === Order.DESC ||
|
|
319
|
+
!this._sortBy.sortByOrder
|
|
285
320
|
? Order.ASC
|
|
286
321
|
: Order.DESC;
|
|
287
322
|
const newSortBy = {
|
|
@@ -292,16 +327,16 @@ class CoreComponent {
|
|
|
292
327
|
this._sortBy = newSortBy;
|
|
293
328
|
}
|
|
294
329
|
nestedValue(object, mapTo, missingValue = null) {
|
|
295
|
-
const levels = mapTo
|
|
296
|
-
|
|
297
|
-
|
|
330
|
+
const levels = mapTo.split('.');
|
|
331
|
+
return levels.reduce((previousValue, currentValue, index) => previousValue[currentValue] ||
|
|
332
|
+
(index === levels.length - 1 ? missingValue : {}), object);
|
|
298
333
|
}
|
|
299
334
|
}
|
|
300
|
-
CoreComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
301
|
-
CoreComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.
|
|
302
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
335
|
+
CoreComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
336
|
+
CoreComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CoreComponent, selector: "angular-generic-table", inputs: { loading: "loading", page: "page", search: "search", config: "config", data: "data" }, 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 >\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 >\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", 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, "dashCase": DashCasePipe, "sortClass": SortClassPipe, "capitalCase": CapitalCasePipe, "slice": i1.SlicePipe, "highlight": HighlightPipe, "dynamicPipe": DynamicPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
337
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CoreComponent, decorators: [{
|
|
303
338
|
type: Component,
|
|
304
|
-
args: [{ selector: 'angular-generic-table', styles: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<table
|
|
339
|
+
args: [{ selector: 'angular-generic-table', styles: [], 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 >\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 >\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" }]
|
|
305
340
|
}], propDecorators: { loading: [{
|
|
306
341
|
type: Input
|
|
307
342
|
}], page: [{
|
|
@@ -314,25 +349,181 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
|
|
|
314
349
|
type: Input
|
|
315
350
|
}] } });
|
|
316
351
|
|
|
352
|
+
class GtDeltaComponent {
|
|
353
|
+
constructor() {
|
|
354
|
+
this.Math = Math;
|
|
355
|
+
this.Number = Number;
|
|
356
|
+
this.data = [];
|
|
357
|
+
this.index = 0;
|
|
358
|
+
this.classes = {
|
|
359
|
+
span: 'gt-delta',
|
|
360
|
+
positive: 'text-success',
|
|
361
|
+
negative: 'text-danger',
|
|
362
|
+
};
|
|
363
|
+
this.key = 'value';
|
|
364
|
+
this.notApplicableValue = 'n/a';
|
|
365
|
+
this.initialValue = '-';
|
|
366
|
+
}
|
|
367
|
+
}
|
|
368
|
+
GtDeltaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GtDeltaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
369
|
+
GtDeltaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GtDeltaComponent, selector: "gt-delta", inputs: { data: "data", index: "index", baseIndex: "baseIndex", classes: "classes", key: "key", notApplicableValue: "notApplicableValue", initialValue: "initialValue" }, ngImport: i0, template: `<span
|
|
370
|
+
*ngIf="{
|
|
371
|
+
value:
|
|
372
|
+
index === 0
|
|
373
|
+
? initialValue
|
|
374
|
+
: ((baseIndex === undefined
|
|
375
|
+
? data[index - 1][key]
|
|
376
|
+
: data[baseIndex][key]) -
|
|
377
|
+
data[index][key]) /
|
|
378
|
+
-Math.abs(
|
|
379
|
+
baseIndex === undefined
|
|
380
|
+
? data[index - 1][key]
|
|
381
|
+
: data[baseIndex][key]
|
|
382
|
+
)
|
|
383
|
+
} as delta"
|
|
384
|
+
[class]="[
|
|
385
|
+
classes.span,
|
|
386
|
+
!delta.value || !Number.isFinite(delta.value)
|
|
387
|
+
? null
|
|
388
|
+
: delta.value > 0
|
|
389
|
+
? classes.positive
|
|
390
|
+
: classes.negative
|
|
391
|
+
]"
|
|
392
|
+
[class.gt-delta-positive]="delta.value > 0 && Number.isFinite(delta.value)"
|
|
393
|
+
[class.gt-delta-negative]="delta.value < 0"
|
|
394
|
+
>{{
|
|
395
|
+
Number.isFinite(delta.value)
|
|
396
|
+
? (delta.value | percent)
|
|
397
|
+
: delta.value === initialValue
|
|
398
|
+
? initialValue
|
|
399
|
+
: notApplicableValue
|
|
400
|
+
}}</span
|
|
401
|
+
>`, isInline: true, styles: [":host{display:inline-block}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "percent": i1.PercentPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
402
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GtDeltaComponent, decorators: [{
|
|
403
|
+
type: Component,
|
|
404
|
+
args: [{
|
|
405
|
+
selector: 'gt-delta',
|
|
406
|
+
template: `<span
|
|
407
|
+
*ngIf="{
|
|
408
|
+
value:
|
|
409
|
+
index === 0
|
|
410
|
+
? initialValue
|
|
411
|
+
: ((baseIndex === undefined
|
|
412
|
+
? data[index - 1][key]
|
|
413
|
+
: data[baseIndex][key]) -
|
|
414
|
+
data[index][key]) /
|
|
415
|
+
-Math.abs(
|
|
416
|
+
baseIndex === undefined
|
|
417
|
+
? data[index - 1][key]
|
|
418
|
+
: data[baseIndex][key]
|
|
419
|
+
)
|
|
420
|
+
} as delta"
|
|
421
|
+
[class]="[
|
|
422
|
+
classes.span,
|
|
423
|
+
!delta.value || !Number.isFinite(delta.value)
|
|
424
|
+
? null
|
|
425
|
+
: delta.value > 0
|
|
426
|
+
? classes.positive
|
|
427
|
+
: classes.negative
|
|
428
|
+
]"
|
|
429
|
+
[class.gt-delta-positive]="delta.value > 0 && Number.isFinite(delta.value)"
|
|
430
|
+
[class.gt-delta-negative]="delta.value < 0"
|
|
431
|
+
>{{
|
|
432
|
+
Number.isFinite(delta.value)
|
|
433
|
+
? (delta.value | percent)
|
|
434
|
+
: delta.value === initialValue
|
|
435
|
+
? initialValue
|
|
436
|
+
: notApplicableValue
|
|
437
|
+
}}</span
|
|
438
|
+
>`,
|
|
439
|
+
styles: [
|
|
440
|
+
`
|
|
441
|
+
:host {
|
|
442
|
+
display: inline-block;
|
|
443
|
+
}
|
|
444
|
+
`,
|
|
445
|
+
],
|
|
446
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
447
|
+
}]
|
|
448
|
+
}], ctorParameters: function () { return []; }, propDecorators: { data: [{
|
|
449
|
+
type: Input
|
|
450
|
+
}], index: [{
|
|
451
|
+
type: Input
|
|
452
|
+
}], baseIndex: [{
|
|
453
|
+
type: Input
|
|
454
|
+
}], classes: [{
|
|
455
|
+
type: Input
|
|
456
|
+
}], key: [{
|
|
457
|
+
type: Input
|
|
458
|
+
}], notApplicableValue: [{
|
|
459
|
+
type: Input
|
|
460
|
+
}], initialValue: [{
|
|
461
|
+
type: Input
|
|
462
|
+
}] } });
|
|
463
|
+
|
|
317
464
|
class GenericTableCoreModule {
|
|
318
465
|
}
|
|
319
|
-
GenericTableCoreModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
320
|
-
GenericTableCoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.
|
|
321
|
-
|
|
322
|
-
|
|
466
|
+
GenericTableCoreModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GenericTableCoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
467
|
+
GenericTableCoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GenericTableCoreModule, declarations: [CoreComponent,
|
|
468
|
+
SortClassPipe,
|
|
469
|
+
DashCasePipe,
|
|
470
|
+
HighlightPipe,
|
|
471
|
+
CapitalCasePipe,
|
|
472
|
+
CapitalCasePipe,
|
|
473
|
+
DynamicPipe,
|
|
474
|
+
GtDeltaComponent], imports: [CommonModule], exports: [CoreComponent, GtDeltaComponent] });
|
|
475
|
+
GenericTableCoreModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GenericTableCoreModule, imports: [[CommonModule]] });
|
|
476
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GenericTableCoreModule, decorators: [{
|
|
323
477
|
type: NgModule,
|
|
324
478
|
args: [{
|
|
325
|
-
declarations: [
|
|
479
|
+
declarations: [
|
|
480
|
+
CoreComponent,
|
|
481
|
+
SortClassPipe,
|
|
482
|
+
DashCasePipe,
|
|
483
|
+
HighlightPipe,
|
|
484
|
+
CapitalCasePipe,
|
|
485
|
+
CapitalCasePipe,
|
|
486
|
+
DynamicPipe,
|
|
487
|
+
GtDeltaComponent,
|
|
488
|
+
],
|
|
326
489
|
imports: [CommonModule],
|
|
327
|
-
exports: [CoreComponent],
|
|
490
|
+
exports: [CoreComponent, GtDeltaComponent],
|
|
328
491
|
}]
|
|
329
492
|
}] });
|
|
330
493
|
|
|
331
494
|
class PaginationComponent {
|
|
332
495
|
constructor() {
|
|
333
496
|
this.table$ = new ReplaySubject(1);
|
|
497
|
+
this._ariaLabels = {
|
|
498
|
+
nav: 'Table pagination',
|
|
499
|
+
button: 'Go to page ',
|
|
500
|
+
};
|
|
501
|
+
this._classes = {
|
|
502
|
+
ul: 'pagination',
|
|
503
|
+
li: 'page-item',
|
|
504
|
+
button: 'page-link',
|
|
505
|
+
};
|
|
506
|
+
this._paginationLength = 5;
|
|
334
507
|
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)));
|
|
335
508
|
}
|
|
509
|
+
get paginationLength() {
|
|
510
|
+
return this._paginationLength;
|
|
511
|
+
}
|
|
512
|
+
set paginationLength(value) {
|
|
513
|
+
this._paginationLength = +value;
|
|
514
|
+
}
|
|
515
|
+
get classes() {
|
|
516
|
+
return this._classes;
|
|
517
|
+
}
|
|
518
|
+
set classes(value) {
|
|
519
|
+
this._classes = value;
|
|
520
|
+
}
|
|
521
|
+
get ariaLabels() {
|
|
522
|
+
return this._ariaLabels;
|
|
523
|
+
}
|
|
524
|
+
set ariaLabels(value) {
|
|
525
|
+
this._ariaLabels = value;
|
|
526
|
+
}
|
|
336
527
|
get table() {
|
|
337
528
|
return this._table;
|
|
338
529
|
}
|
|
@@ -341,14 +532,13 @@ class PaginationComponent {
|
|
|
341
532
|
this.table$.next(value);
|
|
342
533
|
}
|
|
343
534
|
generateList(pages, currentPosition) {
|
|
344
|
-
const
|
|
345
|
-
const
|
|
346
|
-
const length = pages < paginationLength ? pages : paginationLength;
|
|
535
|
+
const middle = Math.floor(this.paginationLength / 2);
|
|
536
|
+
const length = pages < this.paginationLength ? pages : this.paginationLength;
|
|
347
537
|
return Array.from({ length }, (_, i) => {
|
|
348
538
|
if (i === 0) {
|
|
349
539
|
return 1;
|
|
350
540
|
}
|
|
351
|
-
else if (pages < paginationLength) {
|
|
541
|
+
else if (pages < this.paginationLength) {
|
|
352
542
|
return i + 1;
|
|
353
543
|
}
|
|
354
544
|
else if (i + 1 === length) {
|
|
@@ -357,10 +547,12 @@ class PaginationComponent {
|
|
|
357
547
|
else if (currentPosition > middle && currentPosition < pages - middle) {
|
|
358
548
|
return i + currentPosition - (middle - 1);
|
|
359
549
|
}
|
|
360
|
-
else if (currentPosition > middle &&
|
|
550
|
+
else if (currentPosition > middle &&
|
|
551
|
+
currentPosition < pages - (middle - 1)) {
|
|
361
552
|
return i + currentPosition - middle;
|
|
362
553
|
}
|
|
363
|
-
else if (currentPosition > middle &&
|
|
554
|
+
else if (currentPosition > middle &&
|
|
555
|
+
currentPosition === pages - (middle - 1)) {
|
|
364
556
|
return i + currentPosition - (middle + 1);
|
|
365
557
|
}
|
|
366
558
|
else if (currentPosition > middle && currentPosition === pages - 1) {
|
|
@@ -377,21 +569,27 @@ class PaginationComponent {
|
|
|
377
569
|
}
|
|
378
570
|
}
|
|
379
571
|
}
|
|
380
|
-
PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
381
|
-
PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.
|
|
382
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
572
|
+
PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
573
|
+
PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
574
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
383
575
|
type: Component,
|
|
384
|
-
args: [{ selector: 'angular-generic-table-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container
|
|
385
|
-
}], propDecorators: {
|
|
576
|
+
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" }]
|
|
577
|
+
}], propDecorators: { paginationLength: [{
|
|
578
|
+
type: Input
|
|
579
|
+
}], classes: [{
|
|
580
|
+
type: Input
|
|
581
|
+
}], ariaLabels: [{
|
|
582
|
+
type: Input
|
|
583
|
+
}], table: [{
|
|
386
584
|
type: Input
|
|
387
585
|
}] } });
|
|
388
586
|
|
|
389
587
|
class GenericTablePaginationModule {
|
|
390
588
|
}
|
|
391
|
-
GenericTablePaginationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
392
|
-
GenericTablePaginationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.
|
|
393
|
-
GenericTablePaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.
|
|
394
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
589
|
+
GenericTablePaginationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GenericTablePaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
590
|
+
GenericTablePaginationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GenericTablePaginationModule, declarations: [PaginationComponent], imports: [CommonModule], exports: [PaginationComponent] });
|
|
591
|
+
GenericTablePaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GenericTablePaginationModule, imports: [[CommonModule]] });
|
|
592
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GenericTablePaginationModule, decorators: [{
|
|
395
593
|
type: NgModule,
|
|
396
594
|
args: [{
|
|
397
595
|
declarations: [PaginationComponent],
|
|
@@ -408,5 +606,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
|
|
|
408
606
|
* Generated bundle index. Do not edit.
|
|
409
607
|
*/
|
|
410
608
|
|
|
411
|
-
export { CoreComponent, CoreService, GenericTableCoreModule, GenericTablePaginationModule, PaginationComponent };
|
|
609
|
+
export { CoreComponent, CoreService, GenericTableCoreModule, GenericTablePaginationModule, GtDeltaComponent, PaginationComponent };
|
|
412
610
|
//# sourceMappingURL=angular-generic-table-core.mjs.map
|