@angular-generic-table/core 5.1.0 → 5.1.1
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.
|
@@ -203,10 +203,10 @@ class CapitalCasePipe {
|
|
|
203
203
|
transform(s) {
|
|
204
204
|
return capitalize(s);
|
|
205
205
|
}
|
|
206
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
207
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
206
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CapitalCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
207
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.0", ngImport: i0, type: CapitalCasePipe, isStandalone: true, name: "capitalCase" }); }
|
|
208
208
|
}
|
|
209
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
209
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CapitalCasePipe, decorators: [{
|
|
210
210
|
type: Pipe,
|
|
211
211
|
args: [{
|
|
212
212
|
name: 'capitalCase',
|
|
@@ -241,10 +241,10 @@ class SortClassPipe {
|
|
|
241
241
|
: sortIndex + 1 + '';
|
|
242
242
|
}
|
|
243
243
|
}
|
|
244
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
245
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
244
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SortClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
245
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.0", ngImport: i0, type: SortClassPipe, isStandalone: true, name: "sortClass" }); }
|
|
246
246
|
}
|
|
247
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
247
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SortClassPipe, decorators: [{
|
|
248
248
|
type: Pipe,
|
|
249
249
|
args: [{
|
|
250
250
|
name: 'sortClass',
|
|
@@ -256,10 +256,10 @@ class DashCasePipe {
|
|
|
256
256
|
transform(s) {
|
|
257
257
|
return dashed(s);
|
|
258
258
|
}
|
|
259
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
260
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
259
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: DashCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
260
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.0", ngImport: i0, type: DashCasePipe, isStandalone: true, name: "dashCase" }); }
|
|
261
261
|
}
|
|
262
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
262
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: DashCasePipe, decorators: [{
|
|
263
263
|
type: Pipe,
|
|
264
264
|
args: [{
|
|
265
265
|
name: 'dashCase',
|
|
@@ -286,10 +286,10 @@ class DynamicPipe {
|
|
|
286
286
|
this._cache.set(requiredPipe, pipe);
|
|
287
287
|
return pipe.transform(value, ...(pipeArgs || []));
|
|
288
288
|
}
|
|
289
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
290
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
289
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: DynamicPipe, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
290
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.0", ngImport: i0, type: DynamicPipe, isStandalone: true, name: "dynamicPipe" }); }
|
|
291
291
|
}
|
|
292
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
292
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: DynamicPipe, decorators: [{
|
|
293
293
|
type: Pipe,
|
|
294
294
|
args: [{
|
|
295
295
|
name: 'dynamicPipe',
|
|
@@ -334,10 +334,10 @@ class HighlightPipe {
|
|
|
334
334
|
}
|
|
335
335
|
return haystackAlwaysString.replace(this._cachedRegex, '<span class="gt-highlight-search">$1</span>');
|
|
336
336
|
}
|
|
337
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
338
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
337
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: HighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
338
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.0", ngImport: i0, type: HighlightPipe, isStandalone: true, name: "highlight" }); }
|
|
339
339
|
}
|
|
340
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
340
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: HighlightPipe, decorators: [{
|
|
341
341
|
type: Pipe,
|
|
342
342
|
args: [{
|
|
343
343
|
name: 'highlight',
|
|
@@ -349,10 +349,10 @@ class RowSelectionPipe {
|
|
|
349
349
|
transform(row, selection, comparator, className) {
|
|
350
350
|
return className && comparator(row, selection) ? className : '';
|
|
351
351
|
}
|
|
352
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
353
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
352
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RowSelectionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
353
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.0", ngImport: i0, type: RowSelectionPipe, isStandalone: true, name: "rowSelection" }); }
|
|
354
354
|
}
|
|
355
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
355
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RowSelectionPipe, decorators: [{
|
|
356
356
|
type: Pipe,
|
|
357
357
|
args: [{
|
|
358
358
|
name: 'rowSelection',
|
|
@@ -373,20 +373,30 @@ class CoreComponent {
|
|
|
373
373
|
'ArrowRight',
|
|
374
374
|
'Home',
|
|
375
375
|
'End',
|
|
376
|
-
],
|
|
377
|
-
|
|
378
|
-
this.
|
|
379
|
-
|
|
376
|
+
], /* @ts-ignore */
|
|
377
|
+
...(ngDevMode ? [{ debugName: "navigationKeys" }] : /* istanbul ignore next */ []));
|
|
378
|
+
this.selectKeys = input(['Enter', ' '], /* @ts-ignore */
|
|
379
|
+
...(ngDevMode ? [{ debugName: "selectKeys" }] : /* istanbul ignore next */ []));
|
|
380
|
+
this.config = input({}, /* @ts-ignore */
|
|
381
|
+
...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
|
|
382
|
+
this.data = input([], /* @ts-ignore */
|
|
383
|
+
...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
380
384
|
this.searchTerm = input(null, { ...(ngDevMode ? { debugName: "searchTerm" } : /* istanbul ignore next */ {}), alias: 'search' });
|
|
381
|
-
this.loading = input(false,
|
|
385
|
+
this.loading = input(false, /* @ts-ignore */
|
|
386
|
+
...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
382
387
|
this.sortOrderInput = input([], { ...(ngDevMode ? { debugName: "sortOrderInput" } : /* istanbul ignore next */ {}), alias: 'sortOrder' });
|
|
383
388
|
this.paginationIndexInput = input(0, { ...(ngDevMode ? { debugName: "paginationIndexInput" } : /* istanbul ignore next */ {}), alias: 'paginationIndex' });
|
|
384
|
-
this.pagingInfo = input(null,
|
|
385
|
-
|
|
386
|
-
this.
|
|
387
|
-
|
|
389
|
+
this.pagingInfo = input(null, /* @ts-ignore */
|
|
390
|
+
...(ngDevMode ? [{ debugName: "pagingInfo" }] : /* istanbul ignore next */ []));
|
|
391
|
+
this.selection = input({}, /* @ts-ignore */
|
|
392
|
+
...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
|
|
393
|
+
this.rowIdKey = input(undefined, /* @ts-ignore */
|
|
394
|
+
...(ngDevMode ? [{ debugName: "rowIdKey" }] : /* istanbul ignore next */ []));
|
|
395
|
+
this.generateRowId = input(true, /* @ts-ignore */
|
|
396
|
+
...(ngDevMode ? [{ debugName: "generateRowId" }] : /* istanbul ignore next */ []));
|
|
388
397
|
this.trackRowByFnInput = input(undefined, { ...(ngDevMode ? { debugName: "trackRowByFnInput" } : /* istanbul ignore next */ {}), alias: 'trackRowByFn' });
|
|
389
|
-
this.isRowSelectedFn = input(undefined,
|
|
398
|
+
this.isRowSelectedFn = input(undefined, /* @ts-ignore */
|
|
399
|
+
...(ngDevMode ? [{ debugName: "isRowSelectedFn" }] : /* istanbul ignore next */ []));
|
|
390
400
|
this.customClassesInput = input({}, { ...(ngDevMode ? { debugName: "customClassesInput" } : /* istanbul ignore next */ {}), alias: 'customClasses' });
|
|
391
401
|
// ─── Outputs ───
|
|
392
402
|
this.rowClick = output();
|
|
@@ -396,18 +406,23 @@ class CoreComponent {
|
|
|
396
406
|
this.columnSort = output();
|
|
397
407
|
this.pageChange = output();
|
|
398
408
|
// ─── Linked Signals (two-way state) ───
|
|
399
|
-
this.sortOrder = linkedSignal(() => this.sortOrderInput(),
|
|
400
|
-
|
|
409
|
+
this.sortOrder = linkedSignal(() => this.sortOrderInput(), /* @ts-ignore */
|
|
410
|
+
...(ngDevMode ? [{ debugName: "sortOrder" }] : /* istanbul ignore next */ []));
|
|
411
|
+
this.currentPaginationIndex = linkedSignal(() => this.paginationIndexInput(), /* @ts-ignore */
|
|
412
|
+
...(ngDevMode ? [{ debugName: "currentPaginationIndex" }] : /* istanbul ignore next */ []));
|
|
401
413
|
/** Page size measured from the container height, used when `length: 'auto'` */
|
|
402
|
-
this.autoPageSize = signal(null,
|
|
414
|
+
this.autoPageSize = signal(null, /* @ts-ignore */
|
|
415
|
+
...(ngDevMode ? [{ debugName: "autoPageSize" }] : /* istanbul ignore next */ []));
|
|
403
416
|
// ─── Computed Signals ───
|
|
404
417
|
/** Whether pagination is in auto (fit-to-container) mode */
|
|
405
|
-
this.isAutoPagination = computed(() => this.config().pagination?.length === 'auto',
|
|
418
|
+
this.isAutoPagination = computed(() => this.config().pagination?.length === 'auto', /* @ts-ignore */
|
|
419
|
+
...(ngDevMode ? [{ debugName: "isAutoPagination" }] : /* istanbul ignore next */ []));
|
|
406
420
|
this.customClasses = computed(() => ({
|
|
407
421
|
selectedRow: 'gt-selected',
|
|
408
422
|
activeRow: 'gt-active',
|
|
409
423
|
...this.customClassesInput(),
|
|
410
|
-
}),
|
|
424
|
+
}), /* @ts-ignore */
|
|
425
|
+
...(ngDevMode ? [{ debugName: "customClasses" }] : /* istanbul ignore next */ []));
|
|
411
426
|
this.trackRowByFn = (index, row) => {
|
|
412
427
|
const customFn = this.trackRowByFnInput();
|
|
413
428
|
if (customFn)
|
|
@@ -446,7 +461,8 @@ class CoreComponent {
|
|
|
446
461
|
data = dataWithId;
|
|
447
462
|
}
|
|
448
463
|
return data;
|
|
449
|
-
},
|
|
464
|
+
}, /* @ts-ignore */
|
|
465
|
+
...(ngDevMode ? [{ debugName: "expandedData" }] : /* istanbul ignore next */ []));
|
|
450
466
|
/** Filtered data (search applied, no sort) */
|
|
451
467
|
this.searchedData = computed(() => {
|
|
452
468
|
const data = [...this.expandedData()];
|
|
@@ -456,7 +472,8 @@ class CoreComponent {
|
|
|
456
472
|
return searchBy && !lazyLoaded
|
|
457
473
|
? search(searchBy, false, data, config)
|
|
458
474
|
: data;
|
|
459
|
-
},
|
|
475
|
+
}, /* @ts-ignore */
|
|
476
|
+
...(ngDevMode ? [{ debugName: "searchedData" }] : /* istanbul ignore next */ []));
|
|
460
477
|
/** Sorted (and already searched) data */
|
|
461
478
|
this.processedData = computed(() => {
|
|
462
479
|
const data = this.searchedData();
|
|
@@ -466,7 +483,8 @@ class CoreComponent {
|
|
|
466
483
|
return data;
|
|
467
484
|
}
|
|
468
485
|
return [...data].sort(sortOnMultipleKeys(sortBy));
|
|
469
|
-
},
|
|
486
|
+
}, /* @ts-ignore */
|
|
487
|
+
...(ngDevMode ? [{ debugName: "processedData" }] : /* istanbul ignore next */ []));
|
|
470
488
|
/** Table meta: chunked data + config + pagination info */
|
|
471
489
|
this.table = computed(() => {
|
|
472
490
|
const sorted = this.processedData();
|
|
@@ -507,11 +525,14 @@ class CoreComponent {
|
|
|
507
525
|
pageTotal: Math.ceil(sorted.length / pageSize),
|
|
508
526
|
},
|
|
509
527
|
};
|
|
510
|
-
},
|
|
528
|
+
}, /* @ts-ignore */
|
|
529
|
+
...(ngDevMode ? [{ debugName: "table" }] : /* istanbul ignore next */ []));
|
|
511
530
|
/** Current table info */
|
|
512
|
-
this.tableInfoSignal = computed(() => this.table().info,
|
|
531
|
+
this.tableInfoSignal = computed(() => this.table().info, /* @ts-ignore */
|
|
532
|
+
...(ngDevMode ? [{ debugName: "tableInfoSignal" }] : /* istanbul ignore next */ []));
|
|
513
533
|
/** Calculations for footer */
|
|
514
|
-
this.calculations = computed(() => calculate(this.processedData(), this.config()),
|
|
534
|
+
this.calculations = computed(() => calculate(this.processedData(), this.config()), /* @ts-ignore */
|
|
535
|
+
...(ngDevMode ? [{ debugName: "calculations" }] : /* istanbul ignore next */ []));
|
|
515
536
|
/** Bounded pagination index (clamped to valid range) */
|
|
516
537
|
this.boundedPaginationIndex = computed(() => {
|
|
517
538
|
const page = this.currentPaginationIndex();
|
|
@@ -522,7 +543,8 @@ class CoreComponent {
|
|
|
522
543
|
info.numberOfRecords;
|
|
523
544
|
const lastPage = Math.ceil(info.numberOfRecords / pageSize) - 1;
|
|
524
545
|
return +page < 0 ? 0 : +page > lastPage ? lastPage : +page;
|
|
525
|
-
},
|
|
546
|
+
}, /* @ts-ignore */
|
|
547
|
+
...(ngDevMode ? [{ debugName: "boundedPaginationIndex" }] : /* istanbul ignore next */ []));
|
|
526
548
|
/** Number of visible columns */
|
|
527
549
|
this.colspan = computed(() => {
|
|
528
550
|
const config = this.config();
|
|
@@ -530,7 +552,8 @@ class CoreComponent {
|
|
|
530
552
|
return Object.values(config.columns || config.rows || {}).filter((value) => value.hidden !== true).length;
|
|
531
553
|
}
|
|
532
554
|
return this.processedData().length + 1;
|
|
533
|
-
},
|
|
555
|
+
}, /* @ts-ignore */
|
|
556
|
+
...(ngDevMode ? [{ debugName: "colspan" }] : /* istanbul ignore next */ []));
|
|
534
557
|
/** Number of footer columns */
|
|
535
558
|
this.footerColspan = computed(() => {
|
|
536
559
|
const config = this.config();
|
|
@@ -542,19 +565,22 @@ class CoreComponent {
|
|
|
542
565
|
}
|
|
543
566
|
});
|
|
544
567
|
return colspan;
|
|
545
|
-
},
|
|
568
|
+
}, /* @ts-ignore */
|
|
569
|
+
...(ngDevMode ? [{ debugName: "footerColspan" }] : /* istanbul ignore next */ []));
|
|
546
570
|
// ─── Row Active State ───
|
|
547
571
|
this.rowActiveState = signal({
|
|
548
572
|
row: null,
|
|
549
573
|
index: null,
|
|
550
|
-
},
|
|
574
|
+
}, /* @ts-ignore */
|
|
575
|
+
...(ngDevMode ? [{ debugName: "rowActiveState" }] : /* istanbul ignore next */ []));
|
|
551
576
|
this.activeRowIndex = null;
|
|
552
577
|
// Emit rowActive output and track index
|
|
553
578
|
this._rowActiveEffect = effect(() => {
|
|
554
579
|
const event = this.rowActiveState();
|
|
555
580
|
this.activeRowIndex = event.index;
|
|
556
581
|
this.rowActiveOutput.emit(event);
|
|
557
|
-
},
|
|
582
|
+
}, /* @ts-ignore */
|
|
583
|
+
...(ngDevMode ? [{ debugName: "_rowActiveEffect" }] : /* istanbul ignore next */ []));
|
|
558
584
|
// Observe container/table size changes to recompute the auto page size
|
|
559
585
|
this._setupAutoPagination = afterNextRender(() => {
|
|
560
586
|
if (typeof ResizeObserver === 'undefined') {
|
|
@@ -590,7 +616,8 @@ class CoreComponent {
|
|
|
590
616
|
return Object.entries(config.columns)
|
|
591
617
|
.map(([key, value]) => ({ key, value }))
|
|
592
618
|
.sort(this._columnOrder);
|
|
593
|
-
},
|
|
619
|
+
}, /* @ts-ignore */
|
|
620
|
+
...(ngDevMode ? [{ debugName: "orderedColumns" }] : /* istanbul ignore next */ []));
|
|
594
621
|
this.orderedRows = computed(() => {
|
|
595
622
|
const config = this.config();
|
|
596
623
|
if (!config.rows)
|
|
@@ -598,7 +625,8 @@ class CoreComponent {
|
|
|
598
625
|
return Object.entries(config.rows)
|
|
599
626
|
.map(([key, value]) => ({ key, value }))
|
|
600
627
|
.sort(this._columnOrder);
|
|
601
|
-
},
|
|
628
|
+
}, /* @ts-ignore */
|
|
629
|
+
...(ngDevMode ? [{ debugName: "orderedRows" }] : /* istanbul ignore next */ []));
|
|
602
630
|
// ─── Keyboard Navigation ───
|
|
603
631
|
this._unsubscribeFromKeyboardEvents$ = new Subject();
|
|
604
632
|
this._keyboardArrowEvent$ = fromEvent(document, 'keydown').pipe(filter((event) => [...this.navigationKeys(), ...this.selectKeys()].indexOf(event.key) > -1));
|
|
@@ -880,10 +908,10 @@ class CoreComponent {
|
|
|
880
908
|
this._unsubscribeFromKeyboardEvents$.next();
|
|
881
909
|
this._unsubscribeFromKeyboardEvents$.complete();
|
|
882
910
|
}
|
|
883
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
884
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: CoreComponent, isStandalone: true, selector: "angular-generic-table", inputs: { navigationKeys: { classPropertyName: "navigationKeys", publicName: "navigationKeys", isSignal: true, isRequired: false, transformFunction: null }, selectKeys: { classPropertyName: "selectKeys", publicName: "selectKeys", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, sortOrderInput: { classPropertyName: "sortOrderInput", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null }, paginationIndexInput: { classPropertyName: "paginationIndexInput", publicName: "paginationIndex", isSignal: true, isRequired: false, transformFunction: null }, pagingInfo: { classPropertyName: "pagingInfo", publicName: "pagingInfo", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, rowIdKey: { classPropertyName: "rowIdKey", publicName: "rowIdKey", isSignal: true, isRequired: false, transformFunction: null }, generateRowId: { classPropertyName: "generateRowId", publicName: "generateRowId", isSignal: true, isRequired: false, transformFunction: null }, trackRowByFnInput: { classPropertyName: "trackRowByFnInput", publicName: "trackRowByFn", isSignal: true, isRequired: false, transformFunction: null }, isRowSelectedFn: { classPropertyName: "isRowSelectedFn", publicName: "isRowSelectedFn", isSignal: true, isRequired: false, transformFunction: null }, customClassesInput: { classPropertyName: "customClassesInput", publicName: "customClasses", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", rowSelect: "rowSelect", sortOrderChange: "sortOrderChange", rowActiveOutput: "rowActive", columnSort: "columnSort", pageChange: "pageChange" }, ngImport: i0, template: "@let tableData = table();\n@let configValue = config();\n@let isLoading = loading();\n@let sortOrderValue = sortOrder();\n@let searchValue = searchTerm();\n@let rowActiveValue = rowActiveState();\n@let calculationsValue = calculations();\n@let colspanValue = colspan();\n@let footerColspanValue = footerColspan();\n@let paginationIdx = boundedPaginationIndex();\n\n<table\n [class]=\"configValue?.class || 'table'\"\n [class.table-mobile]=\"configValue?.mobileLayout\"\n [class.table-horizontal]=\"configValue?.rows\"\n [class.table-loading]=\"isLoading\"\n [class.gt-sticky-row-header]=\"configValue?.stickyHeaders?.row && configValue?.rows\"\n [class.gt-sticky-column-header]=\"configValue?.stickyHeaders?.column\"\n [attr.aria-busy]=\"isLoading === true ? true : null\"\n [tabindex]=\"configValue?.activateRowOnKeyboardNavigation ? 0 : -1\"\n #tableRef\n (focus)=\"listenToKeyboardEvents()\"\n (focusout)=\"unsubscribeFromKeyboardEvents(tableRef)\"\n (mouseenter)=\"listenToKeyboardEvents()\"\n (mouseleave)=\"unsubscribeFromKeyboardEvents(tableRef)\"\n>\n <thead>\n <tr>\n @if (configValue?.columns) {\n @for (column of orderedColumns(); track column.key) {\n @if (!column.value?.hidden) {\n <th\n class=\"{{ (column.key | dashCase) + '-column' }} {{ column.value.class }}\"\n [class.disabled]=\"isLoading\"\n [attr.aria-sort]=\"sortOrderValue | sortClass: column.key:'aria'\"\n [class.gt-sortable]=\"true\"\n scope=\"col\"\n >\n @if (column.value?.headerReplaceFull && (column.value?.headerComponent || column.value?.headerTemplateRef)) {\n @if (column.value.headerComponent) {\n <ng-container\n [ngComponentOutlet]=\"column.value.headerComponent!\"\n [ngComponentOutletInputs]=\"{\n column: column,\n sortable: !!column.value.sortable,\n sortOrder: sortOrderValue,\n search: searchValue,\n sort: headerSortFn(column.key),\n ...(column.value.headerComponentInputs || {})\n }\"\n ></ng-container>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"column.value.headerTemplateRef!\"\n [ngTemplateOutletContext]=\"{\n column: column,\n sortable: !!column.value.sortable,\n sortOrder: sortOrderValue,\n search: searchValue,\n sort: headerSortFn(column.key)\n }\"\n ></ng-container>\n }\n } @else if (column.value?.sortable) {\n <button\n [attr.data-sort-order]=\"sortOrderValue | sortClass: column.key:'order'\"\n class=\"gt-sort\"\n (click)=\"isLoading || !column.value.sortable || sortByKey(column.key, $event)\"\n >\n @if (column.value?.headerComponent) {\n <ng-container\n [ngComponentOutlet]=\"column.value.headerComponent!\"\n [ngComponentOutletInputs]=\"{\n column: column,\n sortable: true,\n sortOrder: sortOrderValue,\n search: searchValue,\n ...(column.value.headerComponentInputs || {})\n }\"\n ></ng-container>\n } @else if (column.value?.headerTemplateRef) {\n <ng-container\n [ngTemplateOutlet]=\"column.value.headerTemplateRef\"\n [ngTemplateOutletContext]=\"{\n column: column,\n sortable: true,\n sortOrder: sortOrderValue,\n search: searchValue\n }\"\n ></ng-container>\n } @else if (column.value?.header !== false) {\n <span>{{ column.value.header || column.key | capitalCase }}</span>\n }\n </button>\n } @else {\n @if (column.value?.headerComponent) {\n <ng-container\n [ngComponentOutlet]=\"column.value.headerComponent!\"\n [ngComponentOutletInputs]=\"{\n column: column,\n sortable: false,\n sortOrder: sortOrderValue,\n search: searchValue,\n ...(column.value.headerComponentInputs || {})\n }\"\n ></ng-container>\n } @else if (column.value?.headerTemplateRef) {\n <ng-container\n [ngTemplateOutlet]=\"column.value.headerTemplateRef\"\n [ngTemplateOutletContext]=\"{\n column: column,\n sortable: false,\n sortOrder: sortOrderValue,\n search: searchValue\n }\"\n ></ng-container>\n } @else if (column.value?.header !== false) {\n <span>{{ column.value.header || column.key | capitalCase }}</span>\n }\n }\n </th>\n }\n }\n }\n @if (configValue?.rows) {\n @let headerRow = orderedRows()[0];\n @if (headerRow) {\n <th\n class=\"row-header\"\n [attr.aria-sort]=\"sortOrderValue | sortClass: headerRow.key:'aria'\"\n class=\"{{ headerRow.value.sortable ? 'sort ' : '' }} {{ sortOrderValue | sortClass: headerRow.key }} {{ (headerRow.key | dashCase) + '-column' }}\"\n (click)=\"isLoading || !headerRow.value.sortable || sortByKey(headerRow.key, $event)\"\n scope=\"col\"\n >\n @if (headerRow.value?.headerComponent) {\n <ng-container\n [ngComponentOutlet]=\"headerRow.value.headerComponent!\"\n [ngComponentOutletInputs]=\"{\n column: headerRow,\n sortable: !!headerRow.value.sortable,\n sortOrder: sortOrderValue,\n search: searchValue,\n sort: headerSortFn(headerRow.key),\n ...(headerRow.value.headerComponentInputs || {})\n }\"\n ></ng-container>\n } @else if (headerRow.value?.headerTemplateRef) {\n <ng-container\n [ngTemplateOutlet]=\"headerRow.value.headerTemplateRef\"\n [ngTemplateOutletContext]=\"{\n column: headerRow,\n sortable: !!headerRow.value.sortable,\n sortOrder: sortOrderValue,\n search: searchValue,\n sort: headerSortFn(headerRow.key)\n }\"\n ></ng-container>\n } @else if (headerRow?.value?.header !== false) {\n {{ headerRow?.value?.header || headerRow.key | capitalCase }}\n }\n </th>\n @for (column of (tableData?.data || [])[0]; track $index) {\n <th class=\"{{ headerRow.value.class }}\">\n @if ((configValue.rows || {})[headerRow.key].component) {\n <ng-container\n [ngComponentOutlet]=\"(configValue.rows || {})[headerRow.key].component!\"\n [ngComponentOutletInputs]=\"{\n row: column,\n col: headerRow,\n index: 0,\n data: (tableData?.data || [])[0],\n search: searchValue,\n ...((configValue.rows || {})[headerRow.key].componentInputs || {})\n }\"\n ></ng-container>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"\n (configValue.rows || {})[headerRow.key].templateRef\n ? templateRef\n : (configValue.rows || {})[headerRow.key].transform\n ? transformData\n : rawData\n \"\n [ngTemplateOutletContext]=\"{\n row: column,\n column: headerRow,\n transform: (configValue.rows || {})[headerRow.key].transform,\n templateRef: (configValue.rows || {})[headerRow.key].templateRef,\n index: 0\n }\"\n ></ng-container>\n }\n </th>\n }\n }\n }\n </tr>\n </thead>\n @if (isLoading) {\n <tbody>\n <tr>\n <td class=\"p-0\" [colSpan]=\"colspanValue\">\n <ng-content select=\".table-loading\"></ng-content>\n </td>\n </tr>\n </tbody>\n } @else {\n @if (tableData && (tableData.data[0] || tableData.data).length > 0) {\n <tbody>\n @if (configValue?.columns) {\n @for (row of tableData.data[tableData.info.lazyLoaded ? 0 : paginationIdx]; track trackRowByFn($index, row); let i = $index) {\n <tr\n [attr.id]=\"'tableRow_' + i\"\n (click)=\"configValue?.rowClick && _rowClick(row, i, $event)\"\n (mouseenter)=\"configValue?.activateRowOnHover && _activateRow(row, i, $event)\"\n (mouseleave)=\"configValue?.activateRowOnHover && _activateRow(null, null, $event)\"\n [class]=\"[\n !!isRowSelectedFn()\n ? (row | rowSelection: selection(): isRowSelectedFn()!: customClasses().selectedRow)\n : '',\n rowActiveValue?.index === i ? customClasses().activeRow : ''\n ]\"\n >\n @for (column of orderedColumns(); track column.key) {\n @if (!column.value?.hidden) {\n <td\n class=\"{{ (column.key | dashCase) + '-column' }} {{ column.value.class }}\"\n [attr.data-label]=\"\n configValue.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 @if ((configValue.columns || {})[column.key].component) {\n <ng-container\n [ngComponentOutlet]=\"(configValue.columns || {})[column.key].component!\"\n [ngComponentOutletInputs]=\"{\n row: row,\n col: column,\n index: i,\n data: tableData.data[tableData.info.lazyLoaded ? 0 : paginationIdx],\n search: searchValue,\n ...((configValue.columns || {})[column.key].componentInputs || {})\n }\"\n ></ng-container>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"\n searchValue && !(configValue.columns || {})[column.key].templateRef\n ? highlighted\n : (configValue.columns || {})[column.key].templateRef\n ? templateRef\n : (configValue.columns || {})[column.key].transform\n ? transformData\n : rawData\n \"\n [ngTemplateOutletContext]=\"{\n row: row,\n column: column,\n search: searchValue,\n transform: (configValue.columns || {})[column.key].transform,\n templateRef: (configValue.columns || {})[column.key].templateRef,\n index: i,\n data: tableData.data[tableData.info.lazyLoaded ? 0 : paginationIdx]\n }\"\n ></ng-container>\n }\n </td>\n }\n }\n </tr>\n }\n }\n @if (configValue?.rows) {\n @for (row of orderedRows() | slice: 1; track row.key; let i = $index) {\n @if (!row.value?.hidden) {\n <tr\n [attr.id]=\"'tableRow_' + i\"\n class=\"{{ (row.key | dashCase) + '-row' }}\"\n (click)=\"configValue?.rowClick && _rowClick(row, i, $event)\"\n (mouseenter)=\"configValue?.activateRowOnHover && _activateRow(row, i, $event)\"\n (mouseleave)=\"configValue?.activateRowOnHover && _activateRow(null, null, $event)\"\n [class]=\"[\n !!isRowSelectedFn()\n ? (row | rowSelection: selection(): isRowSelectedFn()!: customClasses().selectedRow)\n : '',\n rowActiveValue?.index === i ? customClasses().activeRow : ''\n ]\"\n >\n <th class=\"row-header\" scope=\"row\">\n @if (row.value?.headerComponent) {\n <ng-container\n [ngComponentOutlet]=\"row.value.headerComponent!\"\n [ngComponentOutletInputs]=\"{\n column: row,\n sortable: false,\n sortOrder: sortOrderValue,\n search: searchValue,\n ...(row.value.headerComponentInputs || {})\n }\"\n ></ng-container>\n } @else if (row.value?.headerTemplateRef) {\n <ng-container\n [ngTemplateOutlet]=\"row.value.headerTemplateRef\"\n [ngTemplateOutletContext]=\"{\n column: row,\n sortable: false,\n sortOrder: sortOrderValue,\n search: searchValue\n }\"\n ></ng-container>\n } @else {\n {{ row.value.header || row.key | capitalCase }}\n }\n </th>\n @for (column of (tableData?.data || [])[0]; track $index; let y = $index) {\n <td class=\"{{ row.value.class }}\">\n @if ((configValue.rows || {})[row.key].component) {\n <ng-container\n [ngComponentOutlet]=\"(configValue.rows || {})[row.key].component!\"\n [ngComponentOutletInputs]=\"{\n row: column,\n col: row,\n index: configValue.rows ? y : i,\n data: tableData.data[tableData.info.lazyLoaded ? 0 : paginationIdx],\n search: searchValue,\n ...((configValue.rows || {})[row.key].componentInputs || {})\n }\"\n ></ng-container>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"\n (configValue.rows || {})[row.key].templateRef\n ? templateRef\n : (configValue.rows || {})[row.key].transform\n ? transformData\n : rawData\n \"\n [ngTemplateOutletContext]=\"{\n row: column,\n column: row,\n transform: (configValue.rows || {})[row.key].transform,\n templateRef: (configValue.rows || {})[row.key].templateRef,\n index: configValue.rows ? y : i,\n data: tableData.data[tableData.info.lazyLoaded ? 0 : paginationIdx]\n }\"\n ></ng-container>\n }\n </td>\n }\n </tr>\n }\n }\n }\n </tbody>\n } @else {\n <tbody>\n <tr>\n <td class=\"p-0\" [colSpan]=\"colspanValue\">\n <ng-content select=\".table-no-data\"></ng-content>\n </td>\n </tr>\n </tbody>\n }\n }\n @if (tableData && tableData.data.length > 0 && !isLoading) {\n <tfoot>\n @for (calculation of calculationsValue.calculations; track calculation; let i = $index) {\n @let showHeader = colspanValue !== footerColspanValue;\n <tr>\n @if (showHeader) {\n <th\n [colSpan]=\"(colspanValue || 0) - (footerColspanValue || 0)\"\n scope=\"row\"\n >\n @if (configValue?.footer?.headers?.[calculation]) {\n {{ configValue.footer!.headers![calculation] === true ? (calculation | capitalCase) : configValue.footer!.headers![calculation] }}\n }\n </th>\n }\n @for (column of orderedColumns(); track column.key) {\n @if (!column.value?.hidden && calculationsValue.calculated[column.key]) {\n <td\n class=\"{{ (column.key | dashCase) + '-column' }} {{ column.value.class }}\"\n [attr.data-header]=\"\n !showHeader && configValue?.footer?.headers?.[calculation]\n ? configValue.footer!.headers![calculation] === true ? (calculation | capitalCase) : configValue.footer!.headers![calculation]\n : null\n \"\n [attr.data-label]=\"\n configValue?.mobileLayout && column.value.mobileHeader\n ? column.value.mobileHeader !== true\n ? column.value.mobileHeader\n : (column.value.header || column.key | capitalCase)\n : null\n \"\n [class.gt-no-content]=\"!calculationsValue.calculated[column.key][calculation]\"\n >\n @if ((configValue?.columns || {})[column.key].component) {\n <ng-container\n [ngComponentOutlet]=\"(configValue?.columns || {})[column.key].component!\"\n [ngComponentOutletInputs]=\"{\n value: calculationsValue.calculated[column.key][calculation],\n row: calculationsValue.calculated[column.key],\n col: column,\n column: calculation,\n index: i,\n search: searchValue,\n ...((configValue?.columns || {})[column.key].componentInputs || {})\n }\"\n ></ng-container>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"\n (configValue?.columns || {})[column.key].templateRef\n ? templateRef\n : (configValue?.columns || {})[column.key].transform\n ? transformFooter\n : rawFooter\n \"\n [ngTemplateOutletContext]=\"{\n value: calculationsValue.calculated[column.key][calculation],\n row: calculationsValue.calculated[column.key],\n column: calculation,\n templateRef: (configValue?.columns || {})[column.key].templateRef,\n transform: (configValue?.columns || {})[column.key].transform\n }\"\n ></ng-container>\n }\n </td>\n }\n }\n </tr>\n }\n </tfoot>\n }\n</table>\n<ng-template\n #highlighted\n let-row=\"row\"\n let-column=\"column\"\n let-search=\"search\"\n let-transform=\"transform\"\n>\n @if (!transform) {\n <div [innerHTML]=\"row[column.key] | highlight: search\"></div>\n } @else {\n <div [innerHTML]=\"row[column.key] | dynamicPipe: transform.pipe:transform?.args | highlight: search\"></div>\n }\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 #transformFooter let-value=\"value\" let-transform=\"transform\">\n {{ (value | dynamicPipe: transform.pipe:transform?.args) || config()?.footer?.emptyContent }}\n</ng-template>\n<ng-template #rawFooter let-value=\"value\">\n {{ value || config()?.footer?.emptyContent }}\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: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: CapitalCasePipe, name: "capitalCase" }, { kind: "pipe", type: SortClassPipe, name: "sortClass" }, { kind: "pipe", type: DashCasePipe, name: "dashCase" }, { kind: "pipe", type: RowSelectionPipe, name: "rowSelection" }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
911
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
912
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: CoreComponent, isStandalone: true, selector: "angular-generic-table", inputs: { navigationKeys: { classPropertyName: "navigationKeys", publicName: "navigationKeys", isSignal: true, isRequired: false, transformFunction: null }, selectKeys: { classPropertyName: "selectKeys", publicName: "selectKeys", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, sortOrderInput: { classPropertyName: "sortOrderInput", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null }, paginationIndexInput: { classPropertyName: "paginationIndexInput", publicName: "paginationIndex", isSignal: true, isRequired: false, transformFunction: null }, pagingInfo: { classPropertyName: "pagingInfo", publicName: "pagingInfo", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, rowIdKey: { classPropertyName: "rowIdKey", publicName: "rowIdKey", isSignal: true, isRequired: false, transformFunction: null }, generateRowId: { classPropertyName: "generateRowId", publicName: "generateRowId", isSignal: true, isRequired: false, transformFunction: null }, trackRowByFnInput: { classPropertyName: "trackRowByFnInput", publicName: "trackRowByFn", isSignal: true, isRequired: false, transformFunction: null }, isRowSelectedFn: { classPropertyName: "isRowSelectedFn", publicName: "isRowSelectedFn", isSignal: true, isRequired: false, transformFunction: null }, customClassesInput: { classPropertyName: "customClassesInput", publicName: "customClasses", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", rowSelect: "rowSelect", sortOrderChange: "sortOrderChange", rowActiveOutput: "rowActive", columnSort: "columnSort", pageChange: "pageChange" }, ngImport: i0, template: "@let tableData = table();\n@let configValue = config();\n@let isLoading = loading();\n@let sortOrderValue = sortOrder();\n@let searchValue = searchTerm();\n@let rowActiveValue = rowActiveState();\n@let calculationsValue = calculations();\n@let colspanValue = colspan();\n@let footerColspanValue = footerColspan();\n@let paginationIdx = boundedPaginationIndex();\n\n<table\n [class]=\"configValue?.class || 'table'\"\n [class.table-mobile]=\"configValue?.mobileLayout\"\n [class.table-horizontal]=\"configValue?.rows\"\n [class.table-loading]=\"isLoading\"\n [class.gt-sticky-row-header]=\"configValue?.stickyHeaders?.row && configValue?.rows\"\n [class.gt-sticky-column-header]=\"configValue?.stickyHeaders?.column\"\n [attr.aria-busy]=\"isLoading === true ? true : null\"\n [tabindex]=\"configValue?.activateRowOnKeyboardNavigation ? 0 : -1\"\n #tableRef\n (focus)=\"listenToKeyboardEvents()\"\n (focusout)=\"unsubscribeFromKeyboardEvents(tableRef)\"\n (mouseenter)=\"listenToKeyboardEvents()\"\n (mouseleave)=\"unsubscribeFromKeyboardEvents(tableRef)\"\n>\n <thead>\n <tr>\n @if (configValue?.columns) {\n @for (column of orderedColumns(); track column.key) {\n @if (!column.value?.hidden) {\n <th\n class=\"{{ (column.key | dashCase) + '-column' }} {{ column.value.class }}\"\n [class.disabled]=\"isLoading\"\n [attr.aria-sort]=\"sortOrderValue | sortClass: column.key : 'aria'\"\n [class.gt-sortable]=\"true\"\n scope=\"col\"\n >\n @if (\n column.value?.headerReplaceFull && (column.value?.headerComponent || column.value?.headerTemplateRef)\n ) {\n @if (column.value.headerComponent) {\n <ng-container\n [ngComponentOutlet]=\"column.value.headerComponent!\"\n [ngComponentOutletInputs]=\"{\n column: column,\n sortable: !!column.value.sortable,\n sortOrder: sortOrderValue,\n search: searchValue,\n sort: headerSortFn(column.key),\n ...(column.value.headerComponentInputs || {}),\n }\"\n ></ng-container>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"column.value.headerTemplateRef!\"\n [ngTemplateOutletContext]=\"{\n column: column,\n sortable: !!column.value.sortable,\n sortOrder: sortOrderValue,\n search: searchValue,\n sort: headerSortFn(column.key),\n }\"\n ></ng-container>\n }\n } @else if (column.value?.sortable) {\n <button\n [attr.data-sort-order]=\"sortOrderValue | sortClass: column.key : 'order'\"\n class=\"gt-sort\"\n (click)=\"isLoading || !column.value.sortable || sortByKey(column.key, $event)\"\n >\n @if (column.value?.headerComponent) {\n <ng-container\n [ngComponentOutlet]=\"column.value.headerComponent!\"\n [ngComponentOutletInputs]=\"{\n column: column,\n sortable: true,\n sortOrder: sortOrderValue,\n search: searchValue,\n ...(column.value.headerComponentInputs || {}),\n }\"\n ></ng-container>\n } @else if (column.value?.headerTemplateRef) {\n <ng-container\n [ngTemplateOutlet]=\"column.value.headerTemplateRef\"\n [ngTemplateOutletContext]=\"{\n column: column,\n sortable: true,\n sortOrder: sortOrderValue,\n search: searchValue,\n }\"\n ></ng-container>\n } @else if (column.value?.header !== false) {\n <span>{{ column.value.header || column.key | capitalCase }}</span>\n }\n </button>\n } @else {\n @if (column.value?.headerComponent) {\n <ng-container\n [ngComponentOutlet]=\"column.value.headerComponent!\"\n [ngComponentOutletInputs]=\"{\n column: column,\n sortable: false,\n sortOrder: sortOrderValue,\n search: searchValue,\n ...(column.value.headerComponentInputs || {}),\n }\"\n ></ng-container>\n } @else if (column.value?.headerTemplateRef) {\n <ng-container\n [ngTemplateOutlet]=\"column.value.headerTemplateRef\"\n [ngTemplateOutletContext]=\"{\n column: column,\n sortable: false,\n sortOrder: sortOrderValue,\n search: searchValue,\n }\"\n ></ng-container>\n } @else if (column.value?.header !== false) {\n <span>{{ column.value.header || column.key | capitalCase }}</span>\n }\n }\n </th>\n }\n }\n }\n @if (configValue?.rows) {\n @let headerRow = orderedRows()[0];\n @if (headerRow) {\n <th\n class=\"row-header\"\n [attr.aria-sort]=\"sortOrderValue | sortClass: headerRow.key : 'aria'\"\n class=\"{{ headerRow.value.sortable ? 'sort ' : '' }} {{ sortOrderValue | sortClass: headerRow.key }} {{\n (headerRow.key | dashCase) + '-column'\n }}\"\n (click)=\"isLoading || !headerRow.value.sortable || sortByKey(headerRow.key, $event)\"\n scope=\"col\"\n >\n @if (headerRow.value?.headerComponent) {\n <ng-container\n [ngComponentOutlet]=\"headerRow.value.headerComponent!\"\n [ngComponentOutletInputs]=\"{\n column: headerRow,\n sortable: !!headerRow.value.sortable,\n sortOrder: sortOrderValue,\n search: searchValue,\n sort: headerSortFn(headerRow.key),\n ...(headerRow.value.headerComponentInputs || {}),\n }\"\n ></ng-container>\n } @else if (headerRow.value?.headerTemplateRef) {\n <ng-container\n [ngTemplateOutlet]=\"headerRow.value.headerTemplateRef\"\n [ngTemplateOutletContext]=\"{\n column: headerRow,\n sortable: !!headerRow.value.sortable,\n sortOrder: sortOrderValue,\n search: searchValue,\n sort: headerSortFn(headerRow.key),\n }\"\n ></ng-container>\n } @else if (headerRow?.value?.header !== false) {\n {{ headerRow?.value?.header || headerRow.key | capitalCase }}\n }\n </th>\n @for (column of (tableData?.data || [])[0]; track $index) {\n <th class=\"{{ headerRow.value.class }}\">\n @if ((configValue.rows || {})[headerRow.key].component) {\n <ng-container\n [ngComponentOutlet]=\"(configValue.rows || {})[headerRow.key].component!\"\n [ngComponentOutletInputs]=\"{\n row: column,\n col: headerRow,\n index: 0,\n data: (tableData?.data || [])[0],\n search: searchValue,\n ...((configValue.rows || {})[headerRow.key].componentInputs || {}),\n }\"\n ></ng-container>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"\n (configValue.rows || {})[headerRow.key].templateRef\n ? templateRef\n : (configValue.rows || {})[headerRow.key].transform\n ? transformData\n : rawData\n \"\n [ngTemplateOutletContext]=\"{\n row: column,\n column: headerRow,\n transform: (configValue.rows || {})[headerRow.key].transform,\n templateRef: (configValue.rows || {})[headerRow.key].templateRef,\n index: 0,\n }\"\n ></ng-container>\n }\n </th>\n }\n }\n }\n </tr>\n </thead>\n @if (isLoading) {\n <tbody>\n <tr>\n <td class=\"p-0\" [colSpan]=\"colspanValue\">\n <ng-content select=\".table-loading\"></ng-content>\n </td>\n </tr>\n </tbody>\n } @else {\n @if (tableData && (tableData.data[0] || tableData.data).length > 0) {\n <tbody>\n @if (configValue?.columns) {\n @for (\n row of tableData.data[tableData.info.lazyLoaded ? 0 : paginationIdx];\n track trackRowByFn($index, row);\n let i = $index\n ) {\n <tr\n [attr.id]=\"'tableRow_' + i\"\n (click)=\"configValue?.rowClick && _rowClick(row, i, $event)\"\n (mouseenter)=\"configValue?.activateRowOnHover && _activateRow(row, i, $event)\"\n (mouseleave)=\"configValue?.activateRowOnHover && _activateRow(null, null, $event)\"\n [class]=\"[\n !!isRowSelectedFn()\n ? (row | rowSelection: selection() : isRowSelectedFn()! : customClasses().selectedRow)\n : '',\n rowActiveValue?.index === i ? customClasses().activeRow : '',\n ]\"\n >\n @for (column of orderedColumns(); track column.key) {\n @if (!column.value?.hidden) {\n <td\n class=\"{{ (column.key | dashCase) + '-column' }} {{ column.value.class }}\"\n [attr.data-label]=\"\n configValue.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 @if ((configValue.columns || {})[column.key].component) {\n <ng-container\n [ngComponentOutlet]=\"(configValue.columns || {})[column.key].component!\"\n [ngComponentOutletInputs]=\"{\n row: row,\n col: column,\n index: i,\n data: tableData.data[tableData.info.lazyLoaded ? 0 : paginationIdx],\n search: searchValue,\n ...((configValue.columns || {})[column.key].componentInputs || {}),\n }\"\n ></ng-container>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"\n searchValue && !(configValue.columns || {})[column.key].templateRef\n ? highlighted\n : (configValue.columns || {})[column.key].templateRef\n ? templateRef\n : (configValue.columns || {})[column.key].transform\n ? transformData\n : rawData\n \"\n [ngTemplateOutletContext]=\"{\n row: row,\n column: column,\n search: searchValue,\n transform: (configValue.columns || {})[column.key].transform,\n templateRef: (configValue.columns || {})[column.key].templateRef,\n index: i,\n data: tableData.data[tableData.info.lazyLoaded ? 0 : paginationIdx],\n }\"\n ></ng-container>\n }\n </td>\n }\n }\n </tr>\n }\n }\n @if (configValue?.rows) {\n @for (row of orderedRows() | slice: 1; track row.key; let i = $index) {\n @if (!row.value?.hidden) {\n <tr\n [attr.id]=\"'tableRow_' + i\"\n class=\"{{ (row.key | dashCase) + '-row' }}\"\n (click)=\"configValue?.rowClick && _rowClick(row, i, $event)\"\n (mouseenter)=\"configValue?.activateRowOnHover && _activateRow(row, i, $event)\"\n (mouseleave)=\"configValue?.activateRowOnHover && _activateRow(null, null, $event)\"\n [class]=\"[\n !!isRowSelectedFn()\n ? (row | rowSelection: selection() : isRowSelectedFn()! : customClasses().selectedRow)\n : '',\n rowActiveValue?.index === i ? customClasses().activeRow : '',\n ]\"\n >\n <th class=\"row-header\" scope=\"row\">\n @if (row.value?.headerComponent) {\n <ng-container\n [ngComponentOutlet]=\"row.value.headerComponent!\"\n [ngComponentOutletInputs]=\"{\n column: row,\n sortable: false,\n sortOrder: sortOrderValue,\n search: searchValue,\n ...(row.value.headerComponentInputs || {}),\n }\"\n ></ng-container>\n } @else if (row.value?.headerTemplateRef) {\n <ng-container\n [ngTemplateOutlet]=\"row.value.headerTemplateRef\"\n [ngTemplateOutletContext]=\"{\n column: row,\n sortable: false,\n sortOrder: sortOrderValue,\n search: searchValue,\n }\"\n ></ng-container>\n } @else {\n {{ row.value.header || row.key | capitalCase }}\n }\n </th>\n @for (column of (tableData?.data || [])[0]; track $index; let y = $index) {\n <td class=\"{{ row.value.class }}\">\n @if ((configValue.rows || {})[row.key].component) {\n <ng-container\n [ngComponentOutlet]=\"(configValue.rows || {})[row.key].component!\"\n [ngComponentOutletInputs]=\"{\n row: column,\n col: row,\n index: configValue.rows ? y : i,\n data: tableData.data[tableData.info.lazyLoaded ? 0 : paginationIdx],\n search: searchValue,\n ...((configValue.rows || {})[row.key].componentInputs || {}),\n }\"\n ></ng-container>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"\n (configValue.rows || {})[row.key].templateRef\n ? templateRef\n : (configValue.rows || {})[row.key].transform\n ? transformData\n : rawData\n \"\n [ngTemplateOutletContext]=\"{\n row: column,\n column: row,\n transform: (configValue.rows || {})[row.key].transform,\n templateRef: (configValue.rows || {})[row.key].templateRef,\n index: configValue.rows ? y : i,\n data: tableData.data[tableData.info.lazyLoaded ? 0 : paginationIdx],\n }\"\n ></ng-container>\n }\n </td>\n }\n </tr>\n }\n }\n }\n </tbody>\n } @else {\n <tbody>\n <tr>\n <td class=\"p-0\" [colSpan]=\"colspanValue\">\n <ng-content select=\".table-no-data\"></ng-content>\n </td>\n </tr>\n </tbody>\n }\n }\n @if (tableData && tableData.data.length > 0 && !isLoading) {\n <tfoot>\n @for (calculation of calculationsValue.calculations; track calculation; let i = $index) {\n @let showHeader = colspanValue !== footerColspanValue;\n <tr>\n @if (showHeader) {\n <th [colSpan]=\"(colspanValue || 0) - (footerColspanValue || 0)\" scope=\"row\">\n @if (configValue?.footer?.headers?.[calculation]) {\n {{\n configValue.footer!.headers![calculation] === true\n ? (calculation | capitalCase)\n : configValue.footer!.headers![calculation]\n }}\n }\n </th>\n }\n @for (column of orderedColumns(); track column.key) {\n @if (!column.value?.hidden && calculationsValue.calculated[column.key]) {\n <td\n class=\"{{ (column.key | dashCase) + '-column' }} {{ column.value.class }}\"\n [attr.data-header]=\"\n !showHeader && configValue?.footer?.headers?.[calculation]\n ? configValue.footer!.headers![calculation] === true\n ? (calculation | capitalCase)\n : configValue.footer!.headers![calculation]\n : null\n \"\n [attr.data-label]=\"\n configValue?.mobileLayout && column.value.mobileHeader\n ? column.value.mobileHeader !== true\n ? column.value.mobileHeader\n : (column.value.header || column.key | capitalCase)\n : null\n \"\n [class.gt-no-content]=\"!calculationsValue.calculated[column.key][calculation]\"\n >\n @if ((configValue?.columns || {})[column.key].component) {\n <ng-container\n [ngComponentOutlet]=\"(configValue?.columns || {})[column.key].component!\"\n [ngComponentOutletInputs]=\"{\n value: calculationsValue.calculated[column.key][calculation],\n row: calculationsValue.calculated[column.key],\n col: column,\n column: calculation,\n index: i,\n search: searchValue,\n ...((configValue?.columns || {})[column.key].componentInputs || {}),\n }\"\n ></ng-container>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"\n (configValue?.columns || {})[column.key].templateRef\n ? templateRef\n : (configValue?.columns || {})[column.key].transform\n ? transformFooter\n : rawFooter\n \"\n [ngTemplateOutletContext]=\"{\n value: calculationsValue.calculated[column.key][calculation],\n row: calculationsValue.calculated[column.key],\n column: calculation,\n templateRef: (configValue?.columns || {})[column.key].templateRef,\n transform: (configValue?.columns || {})[column.key].transform,\n }\"\n ></ng-container>\n }\n </td>\n }\n }\n </tr>\n }\n </tfoot>\n }\n</table>\n<ng-template #highlighted let-row=\"row\" let-column=\"column\" let-search=\"search\" let-transform=\"transform\">\n @if (!transform) {\n <div [innerHTML]=\"row[column.key] | highlight: search\"></div>\n } @else {\n <div\n [innerHTML]=\"\n row[column.key] | dynamicPipe: transform.pipe : transform.args | highlight: search\n \"\n ></div>\n }\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\" let-data=\"data\">\n {{ row[column.key] | dynamicPipe: transform.pipe : transform.args }}\n</ng-template>\n<ng-template #transformFooter let-value=\"value\" let-transform=\"transform\">\n {{\n (value | dynamicPipe: transform.pipe : transform.args) || config()?.footer?.emptyContent\n }}\n</ng-template>\n<ng-template #rawFooter let-value=\"value\">\n {{ value || config()?.footer?.emptyContent }}\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: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: CapitalCasePipe, name: "capitalCase" }, { kind: "pipe", type: SortClassPipe, name: "sortClass" }, { kind: "pipe", type: DashCasePipe, name: "dashCase" }, { kind: "pipe", type: RowSelectionPipe, name: "rowSelection" }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
885
913
|
}
|
|
886
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
914
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CoreComponent, decorators: [{
|
|
887
915
|
type: Component,
|
|
888
916
|
args: [{ selector: 'angular-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
889
917
|
CapitalCasePipe,
|
|
@@ -895,23 +923,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
|
|
|
895
923
|
SlicePipe,
|
|
896
924
|
DynamicPipe,
|
|
897
925
|
HighlightPipe,
|
|
898
|
-
], template: "@let tableData = table();\n@let configValue = config();\n@let isLoading = loading();\n@let sortOrderValue = sortOrder();\n@let searchValue = searchTerm();\n@let rowActiveValue = rowActiveState();\n@let calculationsValue = calculations();\n@let colspanValue = colspan();\n@let footerColspanValue = footerColspan();\n@let paginationIdx = boundedPaginationIndex();\n\n<table\n [class]=\"configValue?.class || 'table'\"\n [class.table-mobile]=\"configValue?.mobileLayout\"\n [class.table-horizontal]=\"configValue?.rows\"\n [class.table-loading]=\"isLoading\"\n [class.gt-sticky-row-header]=\"configValue?.stickyHeaders?.row && configValue?.rows\"\n [class.gt-sticky-column-header]=\"configValue?.stickyHeaders?.column\"\n [attr.aria-busy]=\"isLoading === true ? true : null\"\n [tabindex]=\"configValue?.activateRowOnKeyboardNavigation ? 0 : -1\"\n #tableRef\n (focus)=\"listenToKeyboardEvents()\"\n (focusout)=\"unsubscribeFromKeyboardEvents(tableRef)\"\n (mouseenter)=\"listenToKeyboardEvents()\"\n (mouseleave)=\"unsubscribeFromKeyboardEvents(tableRef)\"\n>\n <thead>\n <tr>\n @if (configValue?.columns) {\n @for (column of orderedColumns(); track column.key) {\n @if (!column.value?.hidden) {\n <th\n class=\"{{ (column.key | dashCase) + '-column' }} {{ column.value.class }}\"\n [class.disabled]=\"isLoading\"\n [attr.aria-sort]=\"sortOrderValue | sortClass: column.key:'aria'\"\n [class.gt-sortable]=\"true\"\n scope=\"col\"\n >\n @if (column.value?.headerReplaceFull && (column.value?.headerComponent || column.value?.headerTemplateRef)) {\n @if (column.value.headerComponent) {\n <ng-container\n [ngComponentOutlet]=\"column.value.headerComponent!\"\n [ngComponentOutletInputs]=\"{\n column: column,\n sortable: !!column.value.sortable,\n sortOrder: sortOrderValue,\n search: searchValue,\n sort: headerSortFn(column.key),\n ...(column.value.headerComponentInputs || {})\n }\"\n ></ng-container>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"column.value.headerTemplateRef!\"\n [ngTemplateOutletContext]=\"{\n column: column,\n sortable: !!column.value.sortable,\n sortOrder: sortOrderValue,\n search: searchValue,\n sort: headerSortFn(column.key)\n }\"\n ></ng-container>\n }\n } @else if (column.value?.sortable) {\n <button\n [attr.data-sort-order]=\"sortOrderValue | sortClass: column.key:'order'\"\n class=\"gt-sort\"\n (click)=\"isLoading || !column.value.sortable || sortByKey(column.key, $event)\"\n >\n @if (column.value?.headerComponent) {\n <ng-container\n [ngComponentOutlet]=\"column.value.headerComponent!\"\n [ngComponentOutletInputs]=\"{\n column: column,\n sortable: true,\n sortOrder: sortOrderValue,\n search: searchValue,\n ...(column.value.headerComponentInputs || {})\n }\"\n ></ng-container>\n } @else if (column.value?.headerTemplateRef) {\n <ng-container\n [ngTemplateOutlet]=\"column.value.headerTemplateRef\"\n [ngTemplateOutletContext]=\"{\n column: column,\n sortable: true,\n sortOrder: sortOrderValue,\n search: searchValue\n }\"\n ></ng-container>\n } @else if (column.value?.header !== false) {\n <span>{{ column.value.header || column.key | capitalCase }}</span>\n }\n </button>\n } @else {\n @if (column.value?.headerComponent) {\n <ng-container\n [ngComponentOutlet]=\"column.value.headerComponent!\"\n [ngComponentOutletInputs]=\"{\n column: column,\n sortable: false,\n sortOrder: sortOrderValue,\n search: searchValue,\n ...(column.value.headerComponentInputs || {})\n }\"\n ></ng-container>\n } @else if (column.value?.headerTemplateRef) {\n <ng-container\n [ngTemplateOutlet]=\"column.value.headerTemplateRef\"\n [ngTemplateOutletContext]=\"{\n column: column,\n sortable: false,\n sortOrder: sortOrderValue,\n search: searchValue\n }\"\n ></ng-container>\n } @else if (column.value?.header !== false) {\n <span>{{ column.value.header || column.key | capitalCase }}</span>\n }\n }\n </th>\n }\n }\n }\n @if (configValue?.rows) {\n @let headerRow = orderedRows()[0];\n @if (headerRow) {\n <th\n class=\"row-header\"\n [attr.aria-sort]=\"sortOrderValue | sortClass: headerRow.key:'aria'\"\n class=\"{{ headerRow.value.sortable ? 'sort ' : '' }} {{ sortOrderValue | sortClass: headerRow.key }} {{ (headerRow.key | dashCase) + '-column' }}\"\n (click)=\"isLoading || !headerRow.value.sortable || sortByKey(headerRow.key, $event)\"\n scope=\"col\"\n >\n @if (headerRow.value?.headerComponent) {\n <ng-container\n [ngComponentOutlet]=\"headerRow.value.headerComponent!\"\n [ngComponentOutletInputs]=\"{\n column: headerRow,\n sortable: !!headerRow.value.sortable,\n sortOrder: sortOrderValue,\n search: searchValue,\n sort: headerSortFn(headerRow.key),\n ...(headerRow.value.headerComponentInputs || {})\n }\"\n ></ng-container>\n } @else if (headerRow.value?.headerTemplateRef) {\n <ng-container\n [ngTemplateOutlet]=\"headerRow.value.headerTemplateRef\"\n [ngTemplateOutletContext]=\"{\n column: headerRow,\n sortable: !!headerRow.value.sortable,\n sortOrder: sortOrderValue,\n search: searchValue,\n sort: headerSortFn(headerRow.key)\n }\"\n ></ng-container>\n } @else if (headerRow?.value?.header !== false) {\n {{ headerRow?.value?.header || headerRow.key | capitalCase }}\n }\n </th>\n @for (column of (tableData?.data || [])[0]; track $index) {\n <th class=\"{{ headerRow.value.class }}\">\n @if ((configValue.rows || {})[headerRow.key].component) {\n <ng-container\n [ngComponentOutlet]=\"(configValue.rows || {})[headerRow.key].component!\"\n [ngComponentOutletInputs]=\"{\n row: column,\n col: headerRow,\n index: 0,\n data: (tableData?.data || [])[0],\n search: searchValue,\n ...((configValue.rows || {})[headerRow.key].componentInputs || {})\n }\"\n ></ng-container>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"\n (configValue.rows || {})[headerRow.key].templateRef\n ? templateRef\n : (configValue.rows || {})[headerRow.key].transform\n ? transformData\n : rawData\n \"\n [ngTemplateOutletContext]=\"{\n row: column,\n column: headerRow,\n transform: (configValue.rows || {})[headerRow.key].transform,\n templateRef: (configValue.rows || {})[headerRow.key].templateRef,\n index: 0\n }\"\n ></ng-container>\n }\n </th>\n }\n }\n }\n </tr>\n </thead>\n @if (isLoading) {\n <tbody>\n <tr>\n <td class=\"p-0\" [colSpan]=\"colspanValue\">\n <ng-content select=\".table-loading\"></ng-content>\n </td>\n </tr>\n </tbody>\n } @else {\n @if (tableData && (tableData.data[0] || tableData.data).length > 0) {\n <tbody>\n @if (configValue?.columns) {\n @for (row of tableData.data[tableData.info.lazyLoaded ? 0 : paginationIdx]; track trackRowByFn($index, row); let i = $index) {\n <tr\n [attr.id]=\"'tableRow_' + i\"\n (click)=\"configValue?.rowClick && _rowClick(row, i, $event)\"\n (mouseenter)=\"configValue?.activateRowOnHover && _activateRow(row, i, $event)\"\n (mouseleave)=\"configValue?.activateRowOnHover && _activateRow(null, null, $event)\"\n [class]=\"[\n !!isRowSelectedFn()\n ? (row | rowSelection: selection(): isRowSelectedFn()!: customClasses().selectedRow)\n : '',\n rowActiveValue?.index === i ? customClasses().activeRow : ''\n ]\"\n >\n @for (column of orderedColumns(); track column.key) {\n @if (!column.value?.hidden) {\n <td\n class=\"{{ (column.key | dashCase) + '-column' }} {{ column.value.class }}\"\n [attr.data-label]=\"\n configValue.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 @if ((configValue.columns || {})[column.key].component) {\n <ng-container\n [ngComponentOutlet]=\"(configValue.columns || {})[column.key].component!\"\n [ngComponentOutletInputs]=\"{\n row: row,\n col: column,\n index: i,\n data: tableData.data[tableData.info.lazyLoaded ? 0 : paginationIdx],\n search: searchValue,\n ...((configValue.columns || {})[column.key].componentInputs || {})\n }\"\n ></ng-container>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"\n searchValue && !(configValue.columns || {})[column.key].templateRef\n ? highlighted\n : (configValue.columns || {})[column.key].templateRef\n ? templateRef\n : (configValue.columns || {})[column.key].transform\n ? transformData\n : rawData\n \"\n [ngTemplateOutletContext]=\"{\n row: row,\n column: column,\n search: searchValue,\n transform: (configValue.columns || {})[column.key].transform,\n templateRef: (configValue.columns || {})[column.key].templateRef,\n index: i,\n data: tableData.data[tableData.info.lazyLoaded ? 0 : paginationIdx]\n }\"\n ></ng-container>\n }\n </td>\n }\n }\n </tr>\n }\n }\n @if (configValue?.rows) {\n @for (row of orderedRows() | slice: 1; track row.key; let i = $index) {\n @if (!row.value?.hidden) {\n <tr\n [attr.id]=\"'tableRow_' + i\"\n class=\"{{ (row.key | dashCase) + '-row' }}\"\n (click)=\"configValue?.rowClick && _rowClick(row, i, $event)\"\n (mouseenter)=\"configValue?.activateRowOnHover && _activateRow(row, i, $event)\"\n (mouseleave)=\"configValue?.activateRowOnHover && _activateRow(null, null, $event)\"\n [class]=\"[\n !!isRowSelectedFn()\n ? (row | rowSelection: selection(): isRowSelectedFn()!: customClasses().selectedRow)\n : '',\n rowActiveValue?.index === i ? customClasses().activeRow : ''\n ]\"\n >\n <th class=\"row-header\" scope=\"row\">\n @if (row.value?.headerComponent) {\n <ng-container\n [ngComponentOutlet]=\"row.value.headerComponent!\"\n [ngComponentOutletInputs]=\"{\n column: row,\n sortable: false,\n sortOrder: sortOrderValue,\n search: searchValue,\n ...(row.value.headerComponentInputs || {})\n }\"\n ></ng-container>\n } @else if (row.value?.headerTemplateRef) {\n <ng-container\n [ngTemplateOutlet]=\"row.value.headerTemplateRef\"\n [ngTemplateOutletContext]=\"{\n column: row,\n sortable: false,\n sortOrder: sortOrderValue,\n search: searchValue\n }\"\n ></ng-container>\n } @else {\n {{ row.value.header || row.key | capitalCase }}\n }\n </th>\n @for (column of (tableData?.data || [])[0]; track $index; let y = $index) {\n <td class=\"{{ row.value.class }}\">\n @if ((configValue.rows || {})[row.key].component) {\n <ng-container\n [ngComponentOutlet]=\"(configValue.rows || {})[row.key].component!\"\n [ngComponentOutletInputs]=\"{\n row: column,\n col: row,\n index: configValue.rows ? y : i,\n data: tableData.data[tableData.info.lazyLoaded ? 0 : paginationIdx],\n search: searchValue,\n ...((configValue.rows || {})[row.key].componentInputs || {})\n }\"\n ></ng-container>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"\n (configValue.rows || {})[row.key].templateRef\n ? templateRef\n : (configValue.rows || {})[row.key].transform\n ? transformData\n : rawData\n \"\n [ngTemplateOutletContext]=\"{\n row: column,\n column: row,\n transform: (configValue.rows || {})[row.key].transform,\n templateRef: (configValue.rows || {})[row.key].templateRef,\n index: configValue.rows ? y : i,\n data: tableData.data[tableData.info.lazyLoaded ? 0 : paginationIdx]\n }\"\n ></ng-container>\n }\n </td>\n }\n </tr>\n }\n }\n }\n </tbody>\n } @else {\n <tbody>\n <tr>\n <td class=\"p-0\" [colSpan]=\"colspanValue\">\n <ng-content select=\".table-no-data\"></ng-content>\n </td>\n </tr>\n </tbody>\n }\n }\n @if (tableData && tableData.data.length > 0 && !isLoading) {\n <tfoot>\n @for (calculation of calculationsValue.calculations; track calculation; let i = $index) {\n @let showHeader = colspanValue !== footerColspanValue;\n <tr>\n @if (showHeader) {\n <th\n [colSpan]=\"(colspanValue || 0) - (footerColspanValue || 0)\"\n scope=\"row\"\n >\n @if (configValue?.footer?.headers?.[calculation]) {\n {{ configValue.footer!.headers![calculation] === true ? (calculation | capitalCase) : configValue.footer!.headers![calculation] }}\n }\n </th>\n }\n @for (column of orderedColumns(); track column.key) {\n @if (!column.value?.hidden && calculationsValue.calculated[column.key]) {\n <td\n class=\"{{ (column.key | dashCase) + '-column' }} {{ column.value.class }}\"\n [attr.data-header]=\"\n !showHeader && configValue?.footer?.headers?.[calculation]\n ? configValue.footer!.headers![calculation] === true ? (calculation | capitalCase) : configValue.footer!.headers![calculation]\n : null\n \"\n [attr.data-label]=\"\n configValue?.mobileLayout && column.value.mobileHeader\n ? column.value.mobileHeader !== true\n ? column.value.mobileHeader\n : (column.value.header || column.key | capitalCase)\n : null\n \"\n [class.gt-no-content]=\"!calculationsValue.calculated[column.key][calculation]\"\n >\n @if ((configValue?.columns || {})[column.key].component) {\n <ng-container\n [ngComponentOutlet]=\"(configValue?.columns || {})[column.key].component!\"\n [ngComponentOutletInputs]=\"{\n value: calculationsValue.calculated[column.key][calculation],\n row: calculationsValue.calculated[column.key],\n col: column,\n column: calculation,\n index: i,\n search: searchValue,\n ...((configValue?.columns || {})[column.key].componentInputs || {})\n }\"\n ></ng-container>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"\n (configValue?.columns || {})[column.key].templateRef\n ? templateRef\n : (configValue?.columns || {})[column.key].transform\n ? transformFooter\n : rawFooter\n \"\n [ngTemplateOutletContext]=\"{\n value: calculationsValue.calculated[column.key][calculation],\n row: calculationsValue.calculated[column.key],\n column: calculation,\n templateRef: (configValue?.columns || {})[column.key].templateRef,\n transform: (configValue?.columns || {})[column.key].transform\n }\"\n ></ng-container>\n }\n </td>\n }\n }\n </tr>\n }\n </tfoot>\n }\n</table>\n<ng-template\n #highlighted\n let-row=\"row\"\n let-column=\"column\"\n let-search=\"search\"\n let-transform=\"transform\"\n>\n @if (!transform) {\n <div [innerHTML]=\"row[column.key] | highlight: search\"></div>\n } @else {\n <div [innerHTML]=\"row[column.key] | dynamicPipe: transform.pipe:transform?.args | highlight: search\"></div>\n }\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 #transformFooter let-value=\"value\" let-transform=\"transform\">\n {{ (value | dynamicPipe: transform.pipe:transform?.args) || config()?.footer?.emptyContent }}\n</ng-template>\n<ng-template #rawFooter let-value=\"value\">\n {{ value || config()?.footer?.emptyContent }}\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" }]
|
|
926
|
+
], template: "@let tableData = table();\n@let configValue = config();\n@let isLoading = loading();\n@let sortOrderValue = sortOrder();\n@let searchValue = searchTerm();\n@let rowActiveValue = rowActiveState();\n@let calculationsValue = calculations();\n@let colspanValue = colspan();\n@let footerColspanValue = footerColspan();\n@let paginationIdx = boundedPaginationIndex();\n\n<table\n [class]=\"configValue?.class || 'table'\"\n [class.table-mobile]=\"configValue?.mobileLayout\"\n [class.table-horizontal]=\"configValue?.rows\"\n [class.table-loading]=\"isLoading\"\n [class.gt-sticky-row-header]=\"configValue?.stickyHeaders?.row && configValue?.rows\"\n [class.gt-sticky-column-header]=\"configValue?.stickyHeaders?.column\"\n [attr.aria-busy]=\"isLoading === true ? true : null\"\n [tabindex]=\"configValue?.activateRowOnKeyboardNavigation ? 0 : -1\"\n #tableRef\n (focus)=\"listenToKeyboardEvents()\"\n (focusout)=\"unsubscribeFromKeyboardEvents(tableRef)\"\n (mouseenter)=\"listenToKeyboardEvents()\"\n (mouseleave)=\"unsubscribeFromKeyboardEvents(tableRef)\"\n>\n <thead>\n <tr>\n @if (configValue?.columns) {\n @for (column of orderedColumns(); track column.key) {\n @if (!column.value?.hidden) {\n <th\n class=\"{{ (column.key | dashCase) + '-column' }} {{ column.value.class }}\"\n [class.disabled]=\"isLoading\"\n [attr.aria-sort]=\"sortOrderValue | sortClass: column.key : 'aria'\"\n [class.gt-sortable]=\"true\"\n scope=\"col\"\n >\n @if (\n column.value?.headerReplaceFull && (column.value?.headerComponent || column.value?.headerTemplateRef)\n ) {\n @if (column.value.headerComponent) {\n <ng-container\n [ngComponentOutlet]=\"column.value.headerComponent!\"\n [ngComponentOutletInputs]=\"{\n column: column,\n sortable: !!column.value.sortable,\n sortOrder: sortOrderValue,\n search: searchValue,\n sort: headerSortFn(column.key),\n ...(column.value.headerComponentInputs || {}),\n }\"\n ></ng-container>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"column.value.headerTemplateRef!\"\n [ngTemplateOutletContext]=\"{\n column: column,\n sortable: !!column.value.sortable,\n sortOrder: sortOrderValue,\n search: searchValue,\n sort: headerSortFn(column.key),\n }\"\n ></ng-container>\n }\n } @else if (column.value?.sortable) {\n <button\n [attr.data-sort-order]=\"sortOrderValue | sortClass: column.key : 'order'\"\n class=\"gt-sort\"\n (click)=\"isLoading || !column.value.sortable || sortByKey(column.key, $event)\"\n >\n @if (column.value?.headerComponent) {\n <ng-container\n [ngComponentOutlet]=\"column.value.headerComponent!\"\n [ngComponentOutletInputs]=\"{\n column: column,\n sortable: true,\n sortOrder: sortOrderValue,\n search: searchValue,\n ...(column.value.headerComponentInputs || {}),\n }\"\n ></ng-container>\n } @else if (column.value?.headerTemplateRef) {\n <ng-container\n [ngTemplateOutlet]=\"column.value.headerTemplateRef\"\n [ngTemplateOutletContext]=\"{\n column: column,\n sortable: true,\n sortOrder: sortOrderValue,\n search: searchValue,\n }\"\n ></ng-container>\n } @else if (column.value?.header !== false) {\n <span>{{ column.value.header || column.key | capitalCase }}</span>\n }\n </button>\n } @else {\n @if (column.value?.headerComponent) {\n <ng-container\n [ngComponentOutlet]=\"column.value.headerComponent!\"\n [ngComponentOutletInputs]=\"{\n column: column,\n sortable: false,\n sortOrder: sortOrderValue,\n search: searchValue,\n ...(column.value.headerComponentInputs || {}),\n }\"\n ></ng-container>\n } @else if (column.value?.headerTemplateRef) {\n <ng-container\n [ngTemplateOutlet]=\"column.value.headerTemplateRef\"\n [ngTemplateOutletContext]=\"{\n column: column,\n sortable: false,\n sortOrder: sortOrderValue,\n search: searchValue,\n }\"\n ></ng-container>\n } @else if (column.value?.header !== false) {\n <span>{{ column.value.header || column.key | capitalCase }}</span>\n }\n }\n </th>\n }\n }\n }\n @if (configValue?.rows) {\n @let headerRow = orderedRows()[0];\n @if (headerRow) {\n <th\n class=\"row-header\"\n [attr.aria-sort]=\"sortOrderValue | sortClass: headerRow.key : 'aria'\"\n class=\"{{ headerRow.value.sortable ? 'sort ' : '' }} {{ sortOrderValue | sortClass: headerRow.key }} {{\n (headerRow.key | dashCase) + '-column'\n }}\"\n (click)=\"isLoading || !headerRow.value.sortable || sortByKey(headerRow.key, $event)\"\n scope=\"col\"\n >\n @if (headerRow.value?.headerComponent) {\n <ng-container\n [ngComponentOutlet]=\"headerRow.value.headerComponent!\"\n [ngComponentOutletInputs]=\"{\n column: headerRow,\n sortable: !!headerRow.value.sortable,\n sortOrder: sortOrderValue,\n search: searchValue,\n sort: headerSortFn(headerRow.key),\n ...(headerRow.value.headerComponentInputs || {}),\n }\"\n ></ng-container>\n } @else if (headerRow.value?.headerTemplateRef) {\n <ng-container\n [ngTemplateOutlet]=\"headerRow.value.headerTemplateRef\"\n [ngTemplateOutletContext]=\"{\n column: headerRow,\n sortable: !!headerRow.value.sortable,\n sortOrder: sortOrderValue,\n search: searchValue,\n sort: headerSortFn(headerRow.key),\n }\"\n ></ng-container>\n } @else if (headerRow?.value?.header !== false) {\n {{ headerRow?.value?.header || headerRow.key | capitalCase }}\n }\n </th>\n @for (column of (tableData?.data || [])[0]; track $index) {\n <th class=\"{{ headerRow.value.class }}\">\n @if ((configValue.rows || {})[headerRow.key].component) {\n <ng-container\n [ngComponentOutlet]=\"(configValue.rows || {})[headerRow.key].component!\"\n [ngComponentOutletInputs]=\"{\n row: column,\n col: headerRow,\n index: 0,\n data: (tableData?.data || [])[0],\n search: searchValue,\n ...((configValue.rows || {})[headerRow.key].componentInputs || {}),\n }\"\n ></ng-container>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"\n (configValue.rows || {})[headerRow.key].templateRef\n ? templateRef\n : (configValue.rows || {})[headerRow.key].transform\n ? transformData\n : rawData\n \"\n [ngTemplateOutletContext]=\"{\n row: column,\n column: headerRow,\n transform: (configValue.rows || {})[headerRow.key].transform,\n templateRef: (configValue.rows || {})[headerRow.key].templateRef,\n index: 0,\n }\"\n ></ng-container>\n }\n </th>\n }\n }\n }\n </tr>\n </thead>\n @if (isLoading) {\n <tbody>\n <tr>\n <td class=\"p-0\" [colSpan]=\"colspanValue\">\n <ng-content select=\".table-loading\"></ng-content>\n </td>\n </tr>\n </tbody>\n } @else {\n @if (tableData && (tableData.data[0] || tableData.data).length > 0) {\n <tbody>\n @if (configValue?.columns) {\n @for (\n row of tableData.data[tableData.info.lazyLoaded ? 0 : paginationIdx];\n track trackRowByFn($index, row);\n let i = $index\n ) {\n <tr\n [attr.id]=\"'tableRow_' + i\"\n (click)=\"configValue?.rowClick && _rowClick(row, i, $event)\"\n (mouseenter)=\"configValue?.activateRowOnHover && _activateRow(row, i, $event)\"\n (mouseleave)=\"configValue?.activateRowOnHover && _activateRow(null, null, $event)\"\n [class]=\"[\n !!isRowSelectedFn()\n ? (row | rowSelection: selection() : isRowSelectedFn()! : customClasses().selectedRow)\n : '',\n rowActiveValue?.index === i ? customClasses().activeRow : '',\n ]\"\n >\n @for (column of orderedColumns(); track column.key) {\n @if (!column.value?.hidden) {\n <td\n class=\"{{ (column.key | dashCase) + '-column' }} {{ column.value.class }}\"\n [attr.data-label]=\"\n configValue.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 @if ((configValue.columns || {})[column.key].component) {\n <ng-container\n [ngComponentOutlet]=\"(configValue.columns || {})[column.key].component!\"\n [ngComponentOutletInputs]=\"{\n row: row,\n col: column,\n index: i,\n data: tableData.data[tableData.info.lazyLoaded ? 0 : paginationIdx],\n search: searchValue,\n ...((configValue.columns || {})[column.key].componentInputs || {}),\n }\"\n ></ng-container>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"\n searchValue && !(configValue.columns || {})[column.key].templateRef\n ? highlighted\n : (configValue.columns || {})[column.key].templateRef\n ? templateRef\n : (configValue.columns || {})[column.key].transform\n ? transformData\n : rawData\n \"\n [ngTemplateOutletContext]=\"{\n row: row,\n column: column,\n search: searchValue,\n transform: (configValue.columns || {})[column.key].transform,\n templateRef: (configValue.columns || {})[column.key].templateRef,\n index: i,\n data: tableData.data[tableData.info.lazyLoaded ? 0 : paginationIdx],\n }\"\n ></ng-container>\n }\n </td>\n }\n }\n </tr>\n }\n }\n @if (configValue?.rows) {\n @for (row of orderedRows() | slice: 1; track row.key; let i = $index) {\n @if (!row.value?.hidden) {\n <tr\n [attr.id]=\"'tableRow_' + i\"\n class=\"{{ (row.key | dashCase) + '-row' }}\"\n (click)=\"configValue?.rowClick && _rowClick(row, i, $event)\"\n (mouseenter)=\"configValue?.activateRowOnHover && _activateRow(row, i, $event)\"\n (mouseleave)=\"configValue?.activateRowOnHover && _activateRow(null, null, $event)\"\n [class]=\"[\n !!isRowSelectedFn()\n ? (row | rowSelection: selection() : isRowSelectedFn()! : customClasses().selectedRow)\n : '',\n rowActiveValue?.index === i ? customClasses().activeRow : '',\n ]\"\n >\n <th class=\"row-header\" scope=\"row\">\n @if (row.value?.headerComponent) {\n <ng-container\n [ngComponentOutlet]=\"row.value.headerComponent!\"\n [ngComponentOutletInputs]=\"{\n column: row,\n sortable: false,\n sortOrder: sortOrderValue,\n search: searchValue,\n ...(row.value.headerComponentInputs || {}),\n }\"\n ></ng-container>\n } @else if (row.value?.headerTemplateRef) {\n <ng-container\n [ngTemplateOutlet]=\"row.value.headerTemplateRef\"\n [ngTemplateOutletContext]=\"{\n column: row,\n sortable: false,\n sortOrder: sortOrderValue,\n search: searchValue,\n }\"\n ></ng-container>\n } @else {\n {{ row.value.header || row.key | capitalCase }}\n }\n </th>\n @for (column of (tableData?.data || [])[0]; track $index; let y = $index) {\n <td class=\"{{ row.value.class }}\">\n @if ((configValue.rows || {})[row.key].component) {\n <ng-container\n [ngComponentOutlet]=\"(configValue.rows || {})[row.key].component!\"\n [ngComponentOutletInputs]=\"{\n row: column,\n col: row,\n index: configValue.rows ? y : i,\n data: tableData.data[tableData.info.lazyLoaded ? 0 : paginationIdx],\n search: searchValue,\n ...((configValue.rows || {})[row.key].componentInputs || {}),\n }\"\n ></ng-container>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"\n (configValue.rows || {})[row.key].templateRef\n ? templateRef\n : (configValue.rows || {})[row.key].transform\n ? transformData\n : rawData\n \"\n [ngTemplateOutletContext]=\"{\n row: column,\n column: row,\n transform: (configValue.rows || {})[row.key].transform,\n templateRef: (configValue.rows || {})[row.key].templateRef,\n index: configValue.rows ? y : i,\n data: tableData.data[tableData.info.lazyLoaded ? 0 : paginationIdx],\n }\"\n ></ng-container>\n }\n </td>\n }\n </tr>\n }\n }\n }\n </tbody>\n } @else {\n <tbody>\n <tr>\n <td class=\"p-0\" [colSpan]=\"colspanValue\">\n <ng-content select=\".table-no-data\"></ng-content>\n </td>\n </tr>\n </tbody>\n }\n }\n @if (tableData && tableData.data.length > 0 && !isLoading) {\n <tfoot>\n @for (calculation of calculationsValue.calculations; track calculation; let i = $index) {\n @let showHeader = colspanValue !== footerColspanValue;\n <tr>\n @if (showHeader) {\n <th [colSpan]=\"(colspanValue || 0) - (footerColspanValue || 0)\" scope=\"row\">\n @if (configValue?.footer?.headers?.[calculation]) {\n {{\n configValue.footer!.headers![calculation] === true\n ? (calculation | capitalCase)\n : configValue.footer!.headers![calculation]\n }}\n }\n </th>\n }\n @for (column of orderedColumns(); track column.key) {\n @if (!column.value?.hidden && calculationsValue.calculated[column.key]) {\n <td\n class=\"{{ (column.key | dashCase) + '-column' }} {{ column.value.class }}\"\n [attr.data-header]=\"\n !showHeader && configValue?.footer?.headers?.[calculation]\n ? configValue.footer!.headers![calculation] === true\n ? (calculation | capitalCase)\n : configValue.footer!.headers![calculation]\n : null\n \"\n [attr.data-label]=\"\n configValue?.mobileLayout && column.value.mobileHeader\n ? column.value.mobileHeader !== true\n ? column.value.mobileHeader\n : (column.value.header || column.key | capitalCase)\n : null\n \"\n [class.gt-no-content]=\"!calculationsValue.calculated[column.key][calculation]\"\n >\n @if ((configValue?.columns || {})[column.key].component) {\n <ng-container\n [ngComponentOutlet]=\"(configValue?.columns || {})[column.key].component!\"\n [ngComponentOutletInputs]=\"{\n value: calculationsValue.calculated[column.key][calculation],\n row: calculationsValue.calculated[column.key],\n col: column,\n column: calculation,\n index: i,\n search: searchValue,\n ...((configValue?.columns || {})[column.key].componentInputs || {}),\n }\"\n ></ng-container>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"\n (configValue?.columns || {})[column.key].templateRef\n ? templateRef\n : (configValue?.columns || {})[column.key].transform\n ? transformFooter\n : rawFooter\n \"\n [ngTemplateOutletContext]=\"{\n value: calculationsValue.calculated[column.key][calculation],\n row: calculationsValue.calculated[column.key],\n column: calculation,\n templateRef: (configValue?.columns || {})[column.key].templateRef,\n transform: (configValue?.columns || {})[column.key].transform,\n }\"\n ></ng-container>\n }\n </td>\n }\n }\n </tr>\n }\n </tfoot>\n }\n</table>\n<ng-template #highlighted let-row=\"row\" let-column=\"column\" let-search=\"search\" let-transform=\"transform\">\n @if (!transform) {\n <div [innerHTML]=\"row[column.key] | highlight: search\"></div>\n } @else {\n <div\n [innerHTML]=\"\n row[column.key] | dynamicPipe: transform.pipe : transform.args | highlight: search\n \"\n ></div>\n }\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\" let-data=\"data\">\n {{ row[column.key] | dynamicPipe: transform.pipe : transform.args }}\n</ng-template>\n<ng-template #transformFooter let-value=\"value\" let-transform=\"transform\">\n {{\n (value | dynamicPipe: transform.pipe : transform.args) || config()?.footer?.emptyContent\n }}\n</ng-template>\n<ng-template #rawFooter let-value=\"value\">\n {{ value || config()?.footer?.emptyContent }}\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" }]
|
|
899
927
|
}], propDecorators: { navigationKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationKeys", required: false }] }], selectKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectKeys", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], sortOrderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOrder", required: false }] }], paginationIndexInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationIndex", required: false }] }], pagingInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagingInfo", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], rowIdKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIdKey", required: false }] }], generateRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "generateRowId", required: false }] }], trackRowByFnInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackRowByFn", required: false }] }], isRowSelectedFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRowSelectedFn", required: false }] }], customClassesInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClasses", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowSelect: [{ type: i0.Output, args: ["rowSelect"] }], sortOrderChange: [{ type: i0.Output, args: ["sortOrderChange"] }], rowActiveOutput: [{ type: i0.Output, args: ["rowActive"] }], columnSort: [{ type: i0.Output, args: ["columnSort"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
|
|
900
928
|
|
|
901
929
|
class GtDeltaComponent {
|
|
902
930
|
constructor() {
|
|
903
|
-
this.data = input([],
|
|
904
|
-
|
|
905
|
-
this.
|
|
931
|
+
this.data = input([], /* @ts-ignore */
|
|
932
|
+
...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
933
|
+
this.index = input(0, /* @ts-ignore */
|
|
934
|
+
...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
|
|
935
|
+
this.baseIndex = input(undefined, /* @ts-ignore */
|
|
936
|
+
...(ngDevMode ? [{ debugName: "baseIndex" }] : /* istanbul ignore next */ []));
|
|
906
937
|
this.classes = input({
|
|
907
938
|
span: 'gt-delta',
|
|
908
939
|
positive: 'text-success',
|
|
909
940
|
negative: 'text-danger',
|
|
910
|
-
},
|
|
911
|
-
|
|
912
|
-
this.
|
|
913
|
-
|
|
914
|
-
this.
|
|
941
|
+
}, /* @ts-ignore */
|
|
942
|
+
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
943
|
+
this.key = input('value', /* @ts-ignore */
|
|
944
|
+
...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
945
|
+
this.notApplicableValue = input(null, /* @ts-ignore */
|
|
946
|
+
...(ngDevMode ? [{ debugName: "notApplicableValue" }] : /* istanbul ignore next */ []));
|
|
947
|
+
this.initialValue = input(null, /* @ts-ignore */
|
|
948
|
+
...(ngDevMode ? [{ debugName: "initialValue" }] : /* istanbul ignore next */ []));
|
|
949
|
+
this.deltaTemplate = input(undefined, /* @ts-ignore */
|
|
950
|
+
...(ngDevMode ? [{ debugName: "deltaTemplate" }] : /* istanbul ignore next */ []));
|
|
915
951
|
this.value = computed(() => {
|
|
916
952
|
const data = this.data();
|
|
917
953
|
if (!data || data.length === 0)
|
|
@@ -943,10 +979,11 @@ class GtDeltaComponent {
|
|
|
943
979
|
: this.notApplicableValue(),
|
|
944
980
|
absolute: deltaValue,
|
|
945
981
|
};
|
|
946
|
-
},
|
|
982
|
+
}, /* @ts-ignore */
|
|
983
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
947
984
|
}
|
|
948
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
949
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
985
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: GtDeltaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
986
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: GtDeltaComponent, isStandalone: true, selector: "gt-delta", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, baseIndex: { classPropertyName: "baseIndex", publicName: "baseIndex", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, notApplicableValue: { classPropertyName: "notApplicableValue", publicName: "notApplicableValue", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, deltaTemplate: { classPropertyName: "deltaTemplate", publicName: "deltaTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
950
987
|
@let delta = value();
|
|
951
988
|
@if (delta) {
|
|
952
989
|
<span
|
|
@@ -978,7 +1015,7 @@ class GtDeltaComponent {
|
|
|
978
1015
|
}
|
|
979
1016
|
`, isInline: true, styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: PercentPipe, name: "percent" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
980
1017
|
}
|
|
981
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1018
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: GtDeltaComponent, decorators: [{
|
|
982
1019
|
type: Component,
|
|
983
1020
|
args: [{ selector: 'gt-delta', template: `
|
|
984
1021
|
@let delta = value();
|
|
@@ -1014,11 +1051,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
|
|
|
1014
1051
|
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], baseIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseIndex", required: false }] }], classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], notApplicableValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "notApplicableValue", required: false }] }], initialValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValue", required: false }] }], deltaTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaTemplate", required: false }] }] } });
|
|
1015
1052
|
|
|
1016
1053
|
class GenericTableCoreModule {
|
|
1017
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1018
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
1019
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
1054
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: GenericTableCoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1055
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.0", ngImport: i0, type: GenericTableCoreModule, imports: [CoreComponent, GtDeltaComponent], exports: [CoreComponent, GtDeltaComponent] }); }
|
|
1056
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: GenericTableCoreModule }); }
|
|
1020
1057
|
}
|
|
1021
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1058
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: GenericTableCoreModule, decorators: [{
|
|
1022
1059
|
type: NgModule,
|
|
1023
1060
|
args: [{
|
|
1024
1061
|
imports: [CoreComponent, GtDeltaComponent],
|
|
@@ -1028,29 +1065,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
|
|
|
1028
1065
|
|
|
1029
1066
|
class PaginationComponent {
|
|
1030
1067
|
constructor() {
|
|
1031
|
-
this.table = input.required(
|
|
1032
|
-
|
|
1033
|
-
this.
|
|
1068
|
+
this.table = input.required(/* @ts-ignore */
|
|
1069
|
+
...(ngDevMode ? [{ debugName: "table" }] : /* istanbul ignore next */ []));
|
|
1070
|
+
this.pagingInfo = input(undefined, /* @ts-ignore */
|
|
1071
|
+
...(ngDevMode ? [{ debugName: "pagingInfo" }] : /* istanbul ignore next */ []));
|
|
1072
|
+
this.paginationLength = input(5, /* @ts-ignore */
|
|
1073
|
+
...(ngDevMode ? [{ debugName: "paginationLength" }] : /* istanbul ignore next */ []));
|
|
1034
1074
|
this.classes = input({
|
|
1035
1075
|
ul: 'pagination',
|
|
1036
1076
|
li: 'page-item',
|
|
1037
1077
|
button: 'page-link',
|
|
1038
|
-
},
|
|
1078
|
+
}, /* @ts-ignore */
|
|
1079
|
+
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
1039
1080
|
this.ariaLabels = input({
|
|
1040
1081
|
nav: 'Table pagination',
|
|
1041
1082
|
button: 'Go to page ',
|
|
1042
|
-
},
|
|
1083
|
+
}, /* @ts-ignore */
|
|
1084
|
+
...(ngDevMode ? [{ debugName: "ariaLabels" }] : /* istanbul ignore next */ []));
|
|
1043
1085
|
/** Page numbers to display in the pagination component */
|
|
1044
1086
|
this.paginationListItems = computed(() => {
|
|
1045
1087
|
const tbl = this.table();
|
|
1046
1088
|
const info = tbl.tableInfoSignal();
|
|
1047
1089
|
const currentPage = tbl.boundedPaginationIndex();
|
|
1048
1090
|
return this._generateList(info.pageTotal, currentPage);
|
|
1049
|
-
},
|
|
1091
|
+
}, /* @ts-ignore */
|
|
1092
|
+
...(ngDevMode ? [{ debugName: "paginationListItems" }] : /* istanbul ignore next */ []));
|
|
1050
1093
|
/** Current page from the table */
|
|
1051
1094
|
this.currentPosition = computed(() => {
|
|
1052
1095
|
return this.table().boundedPaginationIndex();
|
|
1053
|
-
},
|
|
1096
|
+
}, /* @ts-ignore */
|
|
1097
|
+
...(ngDevMode ? [{ debugName: "currentPosition" }] : /* istanbul ignore next */ []));
|
|
1054
1098
|
}
|
|
1055
1099
|
_generateList(numberOfPages, currentPosition) {
|
|
1056
1100
|
const paginationLen = this.paginationLength();
|
|
@@ -1093,20 +1137,20 @@ class PaginationComponent {
|
|
|
1093
1137
|
tbl.paginationIndex = index - 1;
|
|
1094
1138
|
}
|
|
1095
1139
|
}
|
|
1096
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1097
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1140
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1141
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: PaginationComponent, isStandalone: true, selector: "angular-generic-table-pagination", inputs: { table: { classPropertyName: "table", publicName: "table", isSignal: true, isRequired: true, transformFunction: null }, pagingInfo: { classPropertyName: "pagingInfo", publicName: "pagingInfo", isSignal: true, isRequired: false, transformFunction: null }, paginationLength: { classPropertyName: "paginationLength", publicName: "paginationLength", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null }, ariaLabels: { classPropertyName: "ariaLabels", publicName: "ariaLabels", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let links = paginationListItems();\n@let currentPos = currentPosition();\n@let classesValue = classes();\n@let ariaLabelsValue = ariaLabels();\n\n@if (links && links.length > 1) {\n <nav\n role=\"navigation\"\n [attr.aria-label]=\"ariaLabelsValue.nav\"\n class=\"gt-pagination\"\n [class]=\"classesValue.nav\"\n >\n <ul [class]=\"classesValue.ul\">\n @for (position of links; track position; let i = $index; let last = $last) {\n <li\n [class]=\"classesValue.li\"\n [class.active]=\"position === (currentPos || 0) + 1\"\n >\n <button\n [class]=\"classesValue.button\"\n [attr.aria-label]=\"ariaLabelsValue.button + position\"\n (click)=\"goToPage(position)\"\n >\n {{ position }}\n </button>\n </li>\n @if (position + 1 !== links[i + 1] && !last) {\n <li [class]=\"classesValue.li\" class=\"gt-ellipsis\">\n <button [class]=\"classesValue.button\" disabled tabindex=\"-1\"></button>\n </li>\n }\n }\n </ul>\n </nav>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1098
1142
|
}
|
|
1099
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1143
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
1100
1144
|
type: Component,
|
|
1101
1145
|
args: [{ selector: 'angular-generic-table-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "@let links = paginationListItems();\n@let currentPos = currentPosition();\n@let classesValue = classes();\n@let ariaLabelsValue = ariaLabels();\n\n@if (links && links.length > 1) {\n <nav\n role=\"navigation\"\n [attr.aria-label]=\"ariaLabelsValue.nav\"\n class=\"gt-pagination\"\n [class]=\"classesValue.nav\"\n >\n <ul [class]=\"classesValue.ul\">\n @for (position of links; track position; let i = $index; let last = $last) {\n <li\n [class]=\"classesValue.li\"\n [class.active]=\"position === (currentPos || 0) + 1\"\n >\n <button\n [class]=\"classesValue.button\"\n [attr.aria-label]=\"ariaLabelsValue.button + position\"\n (click)=\"goToPage(position)\"\n >\n {{ position }}\n </button>\n </li>\n @if (position + 1 !== links[i + 1] && !last) {\n <li [class]=\"classesValue.li\" class=\"gt-ellipsis\">\n <button [class]=\"classesValue.button\" disabled tabindex=\"-1\"></button>\n </li>\n }\n }\n </ul>\n </nav>\n}\n" }]
|
|
1102
1146
|
}], propDecorators: { table: [{ type: i0.Input, args: [{ isSignal: true, alias: "table", required: true }] }], pagingInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagingInfo", required: false }] }], paginationLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationLength", required: false }] }], classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }], ariaLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabels", required: false }] }] } });
|
|
1103
1147
|
|
|
1104
1148
|
class GenericTablePaginationModule {
|
|
1105
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1106
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
1107
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
1149
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: GenericTablePaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1150
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.0", ngImport: i0, type: GenericTablePaginationModule, imports: [CommonModule, PaginationComponent], exports: [PaginationComponent] }); }
|
|
1151
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: GenericTablePaginationModule, imports: [CommonModule] }); }
|
|
1108
1152
|
}
|
|
1109
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1153
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: GenericTablePaginationModule, decorators: [{
|
|
1110
1154
|
type: NgModule,
|
|
1111
1155
|
args: [{
|
|
1112
1156
|
imports: [CommonModule, PaginationComponent],
|