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