@angular-generic-table/core 5.0.0 → 5.1.1

package/fesm2022/angular-generic-table-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Pipe, Injector, inject, DestroyRef, input, output, linkedSignal, computed, signal, effect, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Pipe, Injector, inject, DestroyRef, ElementRef, input, output, linkedSignal, signal, computed, effect, afterNextRender, afterRenderEffect, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { Subject, fromEvent } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 import { toObservable } from '@angular/core/rxjs-interop';
@@ -203,10 +203,10 @@ class CapitalCasePipe {
     transform(s) {
         return capitalize(s);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CapitalCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: CapitalCasePipe, isStandalone: true, name: "capitalCase" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CapitalCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.0", ngImport: i0, type: CapitalCasePipe, isStandalone: true, name: "capitalCase" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CapitalCasePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CapitalCasePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'capitalCase',
@@ -241,10 +241,10 @@ class SortClassPipe {
                 : sortIndex + 1 + '';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SortClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: SortClassPipe, isStandalone: true, name: "sortClass" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SortClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.0", ngImport: i0, type: SortClassPipe, isStandalone: true, name: "sortClass" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SortClassPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SortClassPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'sortClass',
@@ -256,10 +256,10 @@ class DashCasePipe {
     transform(s) {
         return dashed(s);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: DashCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: DashCasePipe, isStandalone: true, name: "dashCase" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: DashCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.0", ngImport: i0, type: DashCasePipe, isStandalone: true, name: "dashCase" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: DashCasePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: DashCasePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'dashCase',
@@ -286,10 +286,10 @@ class DynamicPipe {
         this._cache.set(requiredPipe, pipe);
         return pipe.transform(value, ...(pipeArgs || []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: DynamicPipe, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: DynamicPipe, isStandalone: true, name: "dynamicPipe" }); }
+    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 }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.0", ngImport: i0, type: DynamicPipe, isStandalone: true, name: "dynamicPipe" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: DynamicPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: DynamicPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'dynamicPipe',
@@ -334,10 +334,10 @@ class HighlightPipe {
         }
         return haystackAlwaysString.replace(this._cachedRegex, '<span class="gt-highlight-search">$1</span>');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: HighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: HighlightPipe, isStandalone: true, name: "highlight" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: HighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.0", ngImport: i0, type: HighlightPipe, isStandalone: true, name: "highlight" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: HighlightPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: HighlightPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'highlight',
@@ -349,10 +349,10 @@ class RowSelectionPipe {
     transform(row, selection, comparator, className) {
         return className && comparator(row, selection) ? className : '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: RowSelectionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: RowSelectionPipe, isStandalone: true, name: "rowSelection" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RowSelectionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.0", ngImport: i0, type: RowSelectionPipe, isStandalone: true, name: "rowSelection" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: RowSelectionPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RowSelectionPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'rowSelection',
@@ -363,6 +363,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 class CoreComponent {
     constructor() {
         this._destroyRef = inject(DestroyRef);
+        this._host = inject((ElementRef));
         this._unsubscribe$ = new Subject();
         // ─── Inputs ───
         this.navigationKeys = input([
@@ -372,20 +373,30 @@ class CoreComponent {
             'ArrowRight',
             'Home',
             'End',
-        ], ...(ngDevMode ? [{ debugName: "navigationKeys" }] : /* istanbul ignore next */ []));
-        this.selectKeys = input(['Enter', ' '], ...(ngDevMode ? [{ debugName: "selectKeys" }] : /* istanbul ignore next */ []));
-        this.config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
-        this.data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        ], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navigationKeys" }] : /* istanbul ignore next */ []));
+        this.selectKeys = input(['Enter', ' '], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectKeys" }] : /* istanbul ignore next */ []));
+        this.config = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        this.data = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
         this.searchTerm = input(null, { ...(ngDevMode ? { debugName: "searchTerm" } : /* istanbul ignore next */ {}), alias: 'search' });
-        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.loading = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
         this.sortOrderInput = input([], { ...(ngDevMode ? { debugName: "sortOrderInput" } : /* istanbul ignore next */ {}), alias: 'sortOrder' });
         this.paginationIndexInput = input(0, { ...(ngDevMode ? { debugName: "paginationIndexInput" } : /* istanbul ignore next */ {}), alias: 'paginationIndex' });
-        this.pagingInfo = input(null, ...(ngDevMode ? [{ debugName: "pagingInfo" }] : /* istanbul ignore next */ []));
-        this.selection = input({}, ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
-        this.rowIdKey = input(undefined, ...(ngDevMode ? [{ debugName: "rowIdKey" }] : /* istanbul ignore next */ []));
-        this.generateRowId = input(true, ...(ngDevMode ? [{ debugName: "generateRowId" }] : /* istanbul ignore next */ []));
+        this.pagingInfo = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pagingInfo" }] : /* istanbul ignore next */ []));
+        this.selection = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+        this.rowIdKey = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowIdKey" }] : /* istanbul ignore next */ []));
+        this.generateRowId = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "generateRowId" }] : /* istanbul ignore next */ []));
         this.trackRowByFnInput = input(undefined, { ...(ngDevMode ? { debugName: "trackRowByFnInput" } : /* istanbul ignore next */ {}), alias: 'trackRowByFn' });
-        this.isRowSelectedFn = input(undefined, ...(ngDevMode ? [{ debugName: "isRowSelectedFn" }] : /* istanbul ignore next */ []));
+        this.isRowSelectedFn = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRowSelectedFn" }] : /* istanbul ignore next */ []));
         this.customClassesInput = input({}, { ...(ngDevMode ? { debugName: "customClassesInput" } : /* istanbul ignore next */ {}), alias: 'customClasses' });
         // ─── Outputs ───
         this.rowClick = output();
@@ -395,14 +406,23 @@ class CoreComponent {
         this.columnSort = output();
         this.pageChange = output();
         // ─── Linked Signals (two-way state) ───
-        this.sortOrder = linkedSignal(() => this.sortOrderInput(), ...(ngDevMode ? [{ debugName: "sortOrder" }] : /* istanbul ignore next */ []));
-        this.currentPaginationIndex = linkedSignal(() => this.paginationIndexInput(), ...(ngDevMode ? [{ debugName: "currentPaginationIndex" }] : /* istanbul ignore next */ []));
+        this.sortOrder = linkedSignal(() => this.sortOrderInput(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sortOrder" }] : /* istanbul ignore next */ []));
+        this.currentPaginationIndex = linkedSignal(() => this.paginationIndexInput(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentPaginationIndex" }] : /* istanbul ignore next */ []));
+        /** Page size measured from the container height, used when `length: 'auto'` */
+        this.autoPageSize = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "autoPageSize" }] : /* istanbul ignore next */ []));
         // ─── Computed Signals ───
+        /** Whether pagination is in auto (fit-to-container) mode */
+        this.isAutoPagination = computed(() => this.config().pagination?.length === 'auto', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isAutoPagination" }] : /* istanbul ignore next */ []));
         this.customClasses = computed(() => ({
             selectedRow: 'gt-selected',
             activeRow: 'gt-active',
             ...this.customClassesInput(),
-        }), ...(ngDevMode ? [{ debugName: "customClasses" }] : /* istanbul ignore next */ []));
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "customClasses" }] : /* istanbul ignore next */ []));
         this.trackRowByFn = (index, row) => {
             const customFn = this.trackRowByFnInput();
             if (customFn)
@@ -441,7 +461,8 @@ class CoreComponent {
                 data = dataWithId;
             }
             return data;
-        }, ...(ngDevMode ? [{ debugName: "expandedData" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expandedData" }] : /* istanbul ignore next */ []));
         /** Filtered data (search applied, no sort) */
         this.searchedData = computed(() => {
             const data = [...this.expandedData()];
@@ -451,7 +472,8 @@ class CoreComponent {
             return searchBy && !lazyLoaded
                 ? search(searchBy, false, data, config)
                 : data;
-        }, ...(ngDevMode ? [{ debugName: "searchedData" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchedData" }] : /* istanbul ignore next */ []));
         /** Sorted (and already searched) data */
         this.processedData = computed(() => {
             const data = this.searchedData();
@@ -461,7 +483,8 @@ class CoreComponent {
                 return data;
             }
             return [...data].sort(sortOnMultipleKeys(sortBy));
-        }, ...(ngDevMode ? [{ debugName: "processedData" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "processedData" }] : /* istanbul ignore next */ []));
         /** Table meta: chunked data + config + pagination info */
         this.table = computed(() => {
             const sorted = this.processedData();
@@ -482,35 +505,46 @@ class CoreComponent {
                     },
                 };
             }
-            if (!config.pagination || config.pagination.length === 0) {
+            const pag = config.pagination;
+            if (!pag || pag.length === 0) {
                 return {
                     data: [sorted],
                     config,
                     info: { numberOfRecords: sorted.length, pageTotal: 1 },
                 };
             }
+            const pageSize = pag.length === 'auto'
+                ? (this.autoPageSize() ?? CoreComponent.DEFAULT_AUTO_ROWS)
+                : +(pag.length || 0);
             return {
-                data: chunk(sorted, +(config.pagination.length || 0)),
+                data: chunk(sorted, pageSize),
                 config,
                 info: {
                     numberOfRecords: sorted.length,
-                    pageSize: +(config.pagination.length || 0),
-                    pageTotal: Math.ceil(sorted.length / +(config.pagination.length || 0)),
+                    pageSize,
+                    pageTotal: Math.ceil(sorted.length / pageSize),
                 },
             };
-        }, ...(ngDevMode ? [{ debugName: "table" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "table" }] : /* istanbul ignore next */ []));
         /** Current table info */
-        this.tableInfoSignal = computed(() => this.table().info, ...(ngDevMode ? [{ debugName: "tableInfoSignal" }] : /* istanbul ignore next */ []));
+        this.tableInfoSignal = computed(() => this.table().info, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tableInfoSignal" }] : /* istanbul ignore next */ []));
         /** Calculations for footer */
-        this.calculations = computed(() => calculate(this.processedData(), this.config()), ...(ngDevMode ? [{ debugName: "calculations" }] : /* istanbul ignore next */ []));
+        this.calculations = computed(() => calculate(this.processedData(), this.config()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "calculations" }] : /* istanbul ignore next */ []));
         /** Bounded pagination index (clamped to valid range) */
         this.boundedPaginationIndex = computed(() => {
             const page = this.currentPaginationIndex();
             const info = this.tableInfoSignal();
-            const pageSize = info.pageSize ?? this.config()?.pagination?.length ?? info.numberOfRecords;
+            const configLength = this.config()?.pagination?.length;
+            const pageSize = info.pageSize ??
+                (typeof configLength === 'number' ? configLength : undefined) ??
+                info.numberOfRecords;
             const lastPage = Math.ceil(info.numberOfRecords / pageSize) - 1;
             return +page < 0 ? 0 : +page > lastPage ? lastPage : +page;
-        }, ...(ngDevMode ? [{ debugName: "boundedPaginationIndex" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "boundedPaginationIndex" }] : /* istanbul ignore next */ []));
         /** Number of visible columns */
         this.colspan = computed(() => {
             const config = this.config();
@@ -518,7 +552,8 @@ class CoreComponent {
                 return Object.values(config.columns || config.rows || {}).filter((value) => value.hidden !== true).length;
             }
             return this.processedData().length + 1;
-        }, ...(ngDevMode ? [{ debugName: "colspan" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "colspan" }] : /* istanbul ignore next */ []));
         /** Number of footer columns */
         this.footerColspan = computed(() => {
             const config = this.config();
@@ -530,19 +565,47 @@ class CoreComponent {
                 }
             });
             return colspan;
-        }, ...(ngDevMode ? [{ debugName: "footerColspan" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "footerColspan" }] : /* istanbul ignore next */ []));
         // ─── Row Active State ───
         this.rowActiveState = signal({
             row: null,
             index: null,
-        }, ...(ngDevMode ? [{ debugName: "rowActiveState" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowActiveState" }] : /* istanbul ignore next */ []));
         this.activeRowIndex = null;
         // Emit rowActive output and track index
         this._rowActiveEffect = effect(() => {
             const event = this.rowActiveState();
             this.activeRowIndex = event.index;
             this.rowActiveOutput.emit(event);
-        }, ...(ngDevMode ? [{ debugName: "_rowActiveEffect" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_rowActiveEffect" }] : /* istanbul ignore next */ []));
+        // Observe container/table size changes to recompute the auto page size
+        this._setupAutoPagination = afterNextRender(() => {
+            if (typeof ResizeObserver === 'undefined') {
+                return;
+            }
+            const host = this._host.nativeElement;
+            this._resizeObserver = new ResizeObserver(() => {
+                if (this.isAutoPagination()) {
+                    this._measureAutoPageSize();
+                }
+            });
+            this._resizeObserver.observe(host);
+            const table = host.querySelector('table');
+            if (table) {
+                this._resizeObserver.observe(table);
+            }
+            this._destroyRef.onDestroy(() => this._resizeObserver?.disconnect());
+        });
+        // Re-measure after render when data/config changes (e.g. async data load)
+        this._autoPaginationEffect = afterRenderEffect(() => {
+            this.processedData();
+            if (this.isAutoPagination()) {
+                this._measureAutoPageSize();
+            }
+        });
         this._columnOrder = (a, b) => {
             return (a.value.order || 0) - (b.value.order || 0);
         };
@@ -553,7 +616,8 @@ class CoreComponent {
             return Object.entries(config.columns)
                 .map(([key, value]) => ({ key, value }))
                 .sort(this._columnOrder);
-        }, ...(ngDevMode ? [{ debugName: "orderedColumns" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "orderedColumns" }] : /* istanbul ignore next */ []));
         this.orderedRows = computed(() => {
             const config = this.config();
             if (!config.rows)
@@ -561,15 +625,40 @@ class CoreComponent {
             return Object.entries(config.rows)
                 .map(([key, value]) => ({ key, value }))
                 .sort(this._columnOrder);
-        }, ...(ngDevMode ? [{ debugName: "orderedRows" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "orderedRows" }] : /* istanbul ignore next */ []));
         // ─── Keyboard Navigation ───
         this._unsubscribeFromKeyboardEvents$ = new Subject();
         this._keyboardArrowEvent$ = fromEvent(document, 'keydown').pipe(filter((event) => [...this.navigationKeys(), ...this.selectKeys()].indexOf(event.key) > -1));
     }
+    /** Initial page size used by `length: 'auto'` before the container is measured */
+    static { this.DEFAULT_AUTO_ROWS = 10; }
     /** Get tableInfo synchronously */
     get tableInfo() {
         return this.tableInfoSignal();
     }
+    /** Measure available height and derive how many rows fit (auto pagination) */
+    _measureAutoPageSize() {
+        const host = this._host.nativeElement;
+        const table = host.querySelector('table');
+        if (!table) {
+            return;
+        }
+        const sampleRow = table.querySelector('tbody tr');
+        if (!sampleRow) {
+            return;
+        }
+        const rowH = sampleRow.offsetHeight;
+        const available = host.clientHeight;
+        // Skip when not measurable (SSR/jsdom, hidden, or unconstrained container)
+        if (rowH <= 0 || available <= 0) {
+            return;
+        }
+        const headH = table.tHead?.offsetHeight ?? 0;
+        const footH = table.tFoot?.offsetHeight ?? 0;
+        const fit = Math.max(1, Math.floor((available - headH - footH) / rowH));
+        this.autoPageSize.set(fit);
+    }
     get sortOrder$() {
         return (this._sortOrder$ ??= toObservable(this.sortOrder));
     }
@@ -819,10 +908,10 @@ class CoreComponent {
         this._unsubscribeFromKeyboardEvents$.next();
         this._unsubscribeFromKeyboardEvents$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CoreComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CoreComponent, decorators: [{
             type: Component,
             args: [{ selector: 'angular-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CapitalCasePipe,
@@ -834,23 +923,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         SlicePipe,
                         DynamicPipe,
                         HighlightPipe,
-                    ], 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" }]
+                    ], 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" }]
         }], 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"] }] } });
 
 class GtDeltaComponent {
     constructor() {
-        this.data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-        this.index = input(0, ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
-        this.baseIndex = input(undefined, ...(ngDevMode ? [{ debugName: "baseIndex" }] : /* istanbul ignore next */ []));
+        this.data = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        this.index = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+        this.baseIndex = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseIndex" }] : /* istanbul ignore next */ []));
         this.classes = input({
             span: 'gt-delta',
             positive: 'text-success',
             negative: 'text-danger',
-        }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-        this.key = input('value', ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
-        this.notApplicableValue = input(null, ...(ngDevMode ? [{ debugName: "notApplicableValue" }] : /* istanbul ignore next */ []));
-        this.initialValue = input(null, ...(ngDevMode ? [{ debugName: "initialValue" }] : /* istanbul ignore next */ []));
-        this.deltaTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "deltaTemplate" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+        this.key = input('value', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+        this.notApplicableValue = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "notApplicableValue" }] : /* istanbul ignore next */ []));
+        this.initialValue = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "initialValue" }] : /* istanbul ignore next */ []));
+        this.deltaTemplate = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "deltaTemplate" }] : /* istanbul ignore next */ []));
         this.value = computed(() => {
             const data = this.data();
             if (!data || data.length === 0)
@@ -882,10 +979,11 @@ class GtDeltaComponent {
                         : this.notApplicableValue(),
                 absolute: deltaValue,
             };
-        }, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: GtDeltaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", 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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: GtDeltaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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: `
     @let delta = value();
     @if (delta) {
       <span
@@ -917,7 +1015,7 @@ class GtDeltaComponent {
     }
   `, 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: GtDeltaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: GtDeltaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gt-delta', template: `
     @let delta = value();
@@ -953,11 +1051,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         }], 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 }] }] } });
 
 class GenericTableCoreModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: GenericTableCoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: GenericTableCoreModule, imports: [CoreComponent, GtDeltaComponent], exports: [CoreComponent, GtDeltaComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: GenericTableCoreModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: GenericTableCoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.0", ngImport: i0, type: GenericTableCoreModule, imports: [CoreComponent, GtDeltaComponent], exports: [CoreComponent, GtDeltaComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: GenericTableCoreModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: GenericTableCoreModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: GenericTableCoreModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CoreComponent, GtDeltaComponent],
@@ -967,29 +1065,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 
 class PaginationComponent {
     constructor() {
-        this.table = input.required(...(ngDevMode ? [{ debugName: "table" }] : /* istanbul ignore next */ []));
-        this.pagingInfo = input(undefined, ...(ngDevMode ? [{ debugName: "pagingInfo" }] : /* istanbul ignore next */ []));
-        this.paginationLength = input(5, ...(ngDevMode ? [{ debugName: "paginationLength" }] : /* istanbul ignore next */ []));
+        this.table = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "table" }] : /* istanbul ignore next */ []));
+        this.pagingInfo = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pagingInfo" }] : /* istanbul ignore next */ []));
+        this.paginationLength = input(5, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "paginationLength" }] : /* istanbul ignore next */ []));
         this.classes = input({
             ul: 'pagination',
             li: 'page-item',
             button: 'page-link',
-        }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
         this.ariaLabels = input({
             nav: 'Table pagination',
             button: 'Go to page ',
-        }, ...(ngDevMode ? [{ debugName: "ariaLabels" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabels" }] : /* istanbul ignore next */ []));
         /** Page numbers to display in the pagination component */
         this.paginationListItems = computed(() => {
             const tbl = this.table();
             const info = tbl.tableInfoSignal();
             const currentPage = tbl.boundedPaginationIndex();
             return this._generateList(info.pageTotal, currentPage);
-        }, ...(ngDevMode ? [{ debugName: "paginationListItems" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "paginationListItems" }] : /* istanbul ignore next */ []));
         /** Current page from the table */
         this.currentPosition = computed(() => {
             return this.table().boundedPaginationIndex();
-        }, ...(ngDevMode ? [{ debugName: "currentPosition" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentPosition" }] : /* istanbul ignore next */ []));
     }
     _generateList(numberOfPages, currentPosition) {
         const paginationLen = this.paginationLength();
@@ -1032,20 +1137,20 @@ class PaginationComponent {
             tbl.paginationIndex = index - 1;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: PaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
             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" }]
         }], 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 }] }] } });
 
 class GenericTablePaginationModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: GenericTablePaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: GenericTablePaginationModule, imports: [CommonModule, PaginationComponent], exports: [PaginationComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: GenericTablePaginationModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: GenericTablePaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.0", ngImport: i0, type: GenericTablePaginationModule, imports: [CommonModule, PaginationComponent], exports: [PaginationComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: GenericTablePaginationModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: GenericTablePaginationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: GenericTablePaginationModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, PaginationComponent],