@angular-generic-table/core 5.0.0-rc.13 → 5.0.0-rc.15

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

@@ -1,16 +1,15 @@
 import * as i0 from '@angular/core';
 import { Injectable, Pipe, Injector, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, NgModule } from '@angular/core';
 import { ReplaySubject, Subject, isObservable, of, combineLatest, EMPTY, BehaviorSubject } from 'rxjs';
+import { KeyValuePipe, AsyncPipe, NgTemplateOutlet, SlicePipe, NgClass, NgIf, NgForOf, PercentPipe, CommonModule } from '@angular/common';
 import { debounceTime, distinctUntilChanged, tap, shareReplay, startWith, map, switchMap, withLatestFrom, take, pluck } from 'rxjs/operators';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
 
 class CoreService {
     constructor() { }
 }
-CoreService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-CoreService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CoreService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CoreService, decorators: [{
+CoreService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+CoreService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CoreService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CoreService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -60,11 +59,17 @@ search = (text, caseSensitive, data, config) => {
             const match = Object.entries(row)
                 .filter(([key, value]) => searchColumns.indexOf(key) !== -1)
                 .reduce((acc, [key, value], index) => {
+                const search = config?.columns[key]?.search;
+                // if search is a function...
+                if (typeof search === 'function') {
+                    // ...use search function to return value to search
+                    value = search(row, key, value);
+                }
                 return (acc +
                     (index === 0 ? '' : ' ? ') +
                     (caseSensitive ? value + '' : (value + '').toLowerCase()));
             }, '')
-                .indexOf(text) !== -1;
+                .indexOf(caseSensitive ? text : text.toLowerCase()) !== -1;
             if (match) {
                 FILTERED[FILTERED.length] = row;
             }
@@ -75,6 +80,85 @@ search = (text, caseSensitive, data, config) => {
         return data;
     }
 };
+let calculate = (data, config) => {
+    const CALCULATIONS = {};
+    const COLUMN_CALCULATIONS = {};
+    let CALCULATED = Object.entries(config.footer?.columns || {})
+        .filter(([columnName, calculations]) => Object.values(calculations || {}).filter((value) => value !== false)
+        .length >= 0)
+        .reduce((acc, [columnName, calculations], index) => {
+        acc[columnName] = Object.entries(calculations || {})
+            .filter(([calculation, value]) => value !== false)
+            .reduce((acc, [calculation, value]) => {
+            if (COLUMN_CALCULATIONS[columnName]) {
+                COLUMN_CALCULATIONS[columnName].push(calculation);
+            }
+            else if (value === true) {
+                COLUMN_CALCULATIONS[columnName] = [calculation];
+            }
+            CALCULATIONS[calculation] = true;
+            if (typeof value === 'function') {
+                value = value(data, columnName);
+            }
+            acc[calculation] = value === true ? 0 : value;
+            return acc;
+        }, {});
+        return acc;
+    }, {});
+    if (Object.keys(CALCULATED).length > 0) {
+        for (let i = 0; i < data.length; i++) {
+            Object.entries(COLUMN_CALCULATIONS).forEach(([column, calculations]) => {
+                if (calculations.indexOf('sum') > -1) {
+                    CALCULATED[column].sum += data[i][column];
+                }
+                if (calculations.indexOf('avg') > -1 &&
+                    calculations.indexOf('sum') === -1) {
+                    if (CALCULATED[column].sum === undefined) {
+                        CALCULATED[column].sum = 0;
+                    }
+                    CALCULATED[column].sum += data[i][column];
+                }
+                if (calculations.indexOf('max') > -1 &&
+                    (!CALCULATED[column].max || +data[i][column] > CALCULATED[column].max)) {
+                    CALCULATED[column].max = +data[i][column];
+                }
+                if (calculations.indexOf('min') > -1 &&
+                    (!CALCULATED[column].min || +data[i][column] < CALCULATED[column].min)) {
+                    CALCULATED[column].min = +data[i][column];
+                }
+            });
+        }
+        Object.entries(COLUMN_CALCULATIONS).forEach(([column, calculations]) => {
+            if (calculations.indexOf('avg') !== -1) {
+                CALCULATED[column].avg = CALCULATED[column]?.sum / data.length;
+            }
+            if (calculations.indexOf('count') !== -1) {
+                CALCULATED[column].count = data.length;
+            }
+        });
+    }
+    return {
+        calculated: CALCULATED,
+        calculations: Object.keys(CALCULATIONS).sort((a, b) => (config.footer?.rowOrder?.indexOf(a) || 0) -
+            (config.footer?.rowOrder?.indexOf(b) || 0)),
+        calculatedColumnsCount: Object.keys(CALCULATED).length || 0,
+    };
+};
+
+class CapitalCasePipe {
+    transform(s) {
+        return capitalize(s);
+    }
+}
+CapitalCasePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CapitalCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+CapitalCasePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: CapitalCasePipe, isStandalone: true, name: "capitalCase" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CapitalCasePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'capitalCase',
+                    standalone: true,
+                }]
+        }] });
 
 class SortClassPipe {
     transform(selection, property, aria = false) {
@@ -87,12 +171,13 @@ class SortClassPipe {
                 : null;
     }
 }
-SortClassPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: SortClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-SortClassPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: SortClassPipe, name: "sortClass" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: SortClassPipe, decorators: [{
+SortClassPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SortClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+SortClassPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: SortClassPipe, isStandalone: true, name: "sortClass" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SortClassPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'sortClass',
+                    standalone: true,
                 }]
         }] });
 
@@ -101,15 +186,40 @@ class DashCasePipe {
         return dashed(s);
     }
 }
-DashCasePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: DashCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-DashCasePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: DashCasePipe, name: "dashCase" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: DashCasePipe, decorators: [{
+DashCasePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: DashCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+DashCasePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: DashCasePipe, isStandalone: true, name: "dashCase" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: DashCasePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'dashCase',
+                    standalone: true,
                 }]
         }] });
 
+class DynamicPipe {
+    constructor(injector) {
+        this.injector = injector;
+    }
+    transform(value, requiredPipe, pipeArgs) {
+        const injector = Injector.create({
+            name: 'DynamicPipe',
+            parent: this.injector,
+            providers: [{ provide: requiredPipe }],
+        });
+        const pipe = injector.get(requiredPipe);
+        return pipe.transform(value, ...(pipeArgs || []));
+    }
+}
+DynamicPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: DynamicPipe, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Pipe });
+DynamicPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: DynamicPipe, isStandalone: true, name: "dynamicPipe" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: DynamicPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'dynamicPipe',
+                    standalone: true,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
+
 class HighlightPipe {
     transform(text, searchTerm) {
         if (!searchTerm) {
@@ -147,52 +257,16 @@ class HighlightPipe {
         return highlightedText;
     }
 }
-HighlightPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: HighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-HighlightPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: HighlightPipe, name: "highlight" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: HighlightPipe, decorators: [{
+HighlightPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: HighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+HighlightPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: HighlightPipe, isStandalone: true, name: "highlight" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: HighlightPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'highlight',
+                    standalone: true,
                 }]
         }] });
 
-class CapitalCasePipe {
-    transform(s) {
-        return capitalize(s);
-    }
-}
-CapitalCasePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CapitalCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-CapitalCasePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: CapitalCasePipe, name: "capitalCase" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CapitalCasePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'capitalCase',
-                }]
-        }] });
-
-class DynamicPipe {
-    constructor(injector) {
-        this.injector = injector;
-    }
-    transform(value, requiredPipe, pipeArgs) {
-        const injector = Injector.create({
-            name: 'DynamicPipe',
-            parent: this.injector,
-            providers: [{ provide: requiredPipe }],
-        });
-        const pipe = injector.get(requiredPipe);
-        return pipe.transform(value, ...(pipeArgs || []));
-    }
-}
-DynamicPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: DynamicPipe, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Pipe });
-DynamicPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: DynamicPipe, name: "dynamicPipe" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: DynamicPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'dynamicPipe',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
-
 class CoreComponent {
     constructor() {
         this.rowClick = new EventEmitter();
@@ -256,6 +330,7 @@ class CoreComponent {
                             : 0;
                 });
         }), shareReplay(1));
+        this.calculations$ = combineLatest([this.data$, this.tableConfig$]).pipe(map(([data, config]) => calculate(data, config)), shareReplay(1));
         this.table$ = combineLatest([
             this.data$,
             this.tableConfig$,
@@ -289,7 +364,17 @@ class CoreComponent {
         }), shareReplay(1));
         this.colspan$ = this.tableConfig$.pipe(switchMap((config) => config.columns
             ? of(Object.values(config.columns || config.rows || {}).filter((value) => value.hidden !== true).length)
-            : this.data$.pipe(map((data) => data.length + 1))));
+            : this.data$.pipe(map((data) => data.length + 1))), shareReplay(1));
+        this.footerColspan$ = this.tableConfig$.pipe(map((config) => {
+            let colspan = 0;
+            Object.values(config?.footer?.columns || {}).forEach((calculations) => {
+                if (Object.values(calculations).filter((value) => value !== false)
+                    .length >= 0) {
+                    colspan += 1;
+                }
+            }, {});
+            return colspan;
+        }), shareReplay(1));
         this.columnOrder = (a, b) => {
             return (a.value.order || 0) - (b.value.order || 0);
         };
@@ -350,11 +435,24 @@ class CoreComponent {
             (index === levels.length - 1 ? missingValue : {}), object);
     }
 }
-CoreComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CoreComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: CoreComponent, selector: "angular-generic-table", inputs: { loading: "loading", page: "page", search: "search", config: "config", data: "data" }, outputs: { rowClick: "rowClick", rowHover: "rowHover" }, ngImport: i0, template: "<table\n  [ngClass]=\"(tableConfig$ | async)?.class || 'table'\"\n  [class.table-mobile]=\"(tableConfig$ | async)?.mobileLayout\"\n  [class.table-horizontal]=\"(tableConfig$ | async)?.rows\"\n  [class.table-loading]=\"loading$ | async\"\n  [class.gt-sticky-row-header]=\"\n    (tableConfig$ | async)?.stickyHeaders?.row && (tableConfig$ | async)?.rows\n  \"\n  [class.gt-sticky-column-header]=\"\n    (tableConfig$ | async)?.stickyHeaders?.column\n  \"\n  [attr.aria-busy]=\"(loading$ | async) === true ? true : null\"\n>\n  <thead>\n    <tr\n      *ngIf=\"{\n        config: (tableConfig$ | async)!,\n        isLoading: loading$ | async\n      } as table\"\n    >\n      <ng-container\n        *ngFor=\"let column of table?.config?.columns | keyvalue: columnOrder\"\n      >\n        <th\n          *ngIf=\"!column.value?.hidden\"\n          ngClass=\"{{ (column.key | dashCase) + '-column' }} {{\n            column.value.class\n          }}\"\n          [class.disabled]=\"table.isLoading\"\n          [attr.aria-sort]=\"sortBy$ | async | sortClass: column.key:true\"\n          [class.gt-sortable]=\"true\"\n          scope=\"col\"\n        >\n          <button\n            *ngIf=\"column.value?.sortable\"\n            class=\"gt-sort\"\n            (click)=\"\n              table.isLoading || !column.value?.sortable || sort(column.key)\n            \"\n          >\n            <span *ngIf=\"column.value?.header !== false\">{{\n              column.value?.header || column.key | capitalCase\n            }}</span>\n          </button>\n          <span\n            *ngIf=\"!column.value?.sortable && column.value?.header !== false\"\n            >{{ column.value?.header || column.key | capitalCase }}</span\n          >\n        </th>\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          ((table?.config?.rows | keyvalue: columnOrder) || [])[0] as headerRow\n        \"\n      >\n        <th\n          class=\"row-header\"\n          [attr.aria-sort]=\"sortBy$ | async | sortClass: headerRow.key:true\"\n          ngClass=\"{{ headerRow.value?.sortable ? 'sort ' : '' }} {{\n            sortBy$ | async | sortClass: headerRow.key\n          }} {{ (headerRow.key | dashCase) + '-column' }}\"\n          (click)=\"\n            table.isLoading || !headerRow.value?.sortable || sort(headerRow.key)\n          \"\n          scope=\"col\"\n        >\n          <ng-container *ngIf=\"headerRow?.value?.header !== false\">{{\n            headerRow?.value?.header || headerRow.key | capitalCase\n          }}</ng-container>\n        </th>\n        <th\n          *ngFor=\"let column of ((table$ | async)?.data || [])[0]\"\n          ngClass=\"{{ headerRow.value?.class }}\"\n        >\n          <ng-container\n            [ngTemplateOutlet]=\"\n              (table.config?.rows || {})[headerRow.key].templateRef\n                ? templateRef\n                : (table.config?.rows || {})[headerRow.key].transform\n                ? transformData\n                : rawData\n            \"\n            [ngTemplateOutletContext]=\"{\n              row: column,\n              column: headerRow,\n              transform: (table.config?.rows || {})[headerRow.key].transform,\n              templateRef: (table.config?.rows || {})[headerRow.key]\n                .templateRef,\n              index: 0\n            }\"\n          >\n          </ng-container>\n        </th>\n      </ng-container>\n    </tr>\n  </thead>\n  <tbody *ngIf=\"loading$ | async; else tableContent\">\n    <tr>\n      <td class=\"p-0\" [colSpan]=\"colspan$ | async\">\n        <ng-content select=\".table-loading\"></ng-content>\n      </td>\n    </tr>\n  </tbody>\n</table>\n<ng-template #tableContent>\n  <ng-container *ngIf=\"(table$ | async)! as table\">\n    <tbody *ngIf=\"(table!.data![0] || table!.data!).length > 0; else noData\">\n      <ng-container *ngIf=\"table.config.columns\">\n        <tr\n          *ngFor=\"\n            let row of table!.data![(currentPage$ | async) || 0];\n            let i = index\n          \"\n          [attr.id]=\"'tableRow_' + i\"\n          (click)=\"table?.config?.rowClick && _rowClick(row, i, $event)\"\n          (mouseover)=\"table?.config?.rowHover && _hoverRow(row, i, $event)\"\n          (mouseout)=\"table?.config?.rowHover && _hoverRow(null, null, $event)\"\n          [class.gt-hover]=\"(rowHover$ | async)?.index === i\"\n        >\n          <ng-container\n            *ngFor=\"let column of table.config?.columns | keyvalue: columnOrder\"\n          >\n            <td\n              *ngIf=\"!column.value?.hidden\"\n              ngClass=\"{{ (column.key | dashCase) + '-column' }} {{\n                column.value?.class\n              }}\"\n              [attr.data-label]=\"\n                table.config?.mobileLayout && column.value?.mobileHeader\n                  ? column.value?.mobileHeader !== true\n                    ? column.value?.mobileHeader\n                    : (column.value?.header || column.key | capitalCase)\n                  : null\n              \"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"\n                  (searchBy$ | async) &&\n                  !(table.config?.columns || {})[column.key].templateRef\n                    ? highlighted\n                    : (table.config?.columns || {})[column.key].templateRef\n                    ? templateRef\n                    : (table.config?.columns || {})[column.key].transform\n                    ? transformData\n                    : rawData\n                \"\n                [ngTemplateOutletContext]=\"{\n                  row: row,\n                  column: column,\n                  search: (searchBy$ | async),\n                  transform: (table.config?.columns || {})[column.key]\n                    .transform,\n                  templateRef: (table.config?.columns || {})[column.key]\n                    .templateRef,\n                  index: i,\n                  data: table.data[(currentPage$ | async) || 0]\n                }\"\n              ></ng-container>\n            </td>\n          </ng-container>\n        </tr>\n      </ng-container>\n      <ng-container *ngIf=\"table.config.rows\">\n        <ng-container\n          *ngFor=\"\n            let row of table?.config?.rows | keyvalue: columnOrder | slice: 1;\n            let i = index\n          \"\n        >\n          <tr\n            *ngIf=\"!row.value?.hidden\"\n            [attr.id]=\"'tableRow_' + i\"\n            ngClass=\"{{ (row.key | dashCase) + '-row' }}\"\n            (click)=\"table?.config?.rowClick && _rowClick(row, i, $event)\"\n            (mouseover)=\"table?.config?.rowHover && _hoverRow(row, i, $event)\"\n            (mouseout)=\"\n              table?.config?.rowHover && _hoverRow(null, null, $event)\n            \"\n            [class.gt-hover]=\"(rowHover$ | async)?.index === i\"\n          >\n            <th class=\"row-header\" scope=\"row\">\n              {{ row.value?.header || row.key | capitalCase }}\n            </th>\n            <td\n              *ngFor=\"let column of (table?.data || [])[0]; let y = index\"\n              ngClass=\"{{ row.value?.class }}\"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"\n                  (table.config?.rows || {})[row.key].templateRef\n                    ? templateRef\n                    : (table.config?.rows || {})[row.key].transform\n                    ? transformData\n                    : rawData\n                \"\n                [ngTemplateOutletContext]=\"{\n                  row: column,\n                  column: row,\n                  transform: (table.config?.rows || {})[row.key].transform,\n                  templateRef: (table.config?.rows || {})[row.key].templateRef,\n                  index: table.config?.rows ? y : i,\n                  data: table.data[(currentPage$ | async) || 0]\n                }\"\n              >\n              </ng-container>\n            </td>\n          </tr>\n        </ng-container>\n      </ng-container>\n    </tbody>\n  </ng-container>\n</ng-template>\n<ng-template #noData>\n  <tbody>\n    <tr>\n      <td class=\"p-0\" [colSpan]=\"colspan$ | async\">\n        <ng-content select=\".table-no-data\"></ng-content>\n      </td>\n    </tr>\n  </tbody>\n</ng-template>\n<ng-template #highlighted let-row=\"row\" let-column=\"column\" let-search=\"search\">\n  <div [innerHTML]=\"row[column.key] | highlight: search\"></div>\n</ng-template>\n<ng-template #rawData let-row=\"row\" let-column=\"column\">\n  {{ row[column.key] }}\n</ng-template>\n<ng-template\n  #transformData\n  let-row=\"row\"\n  let-column=\"column\"\n  let-transform=\"transform\"\n  let-data=\"data\"\n>\n  {{ row[column.key] | dynamicPipe: transform.pipe:transform?.args }}\n</ng-template>\n<ng-template\n  #templateRef\n  let-row=\"row\"\n  let-column=\"column\"\n  let-index=\"index\"\n  let-templateRef=\"templateRef\"\n  let-data=\"data\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"templateRef\"\n    [ngTemplateOutletContext]=\"{\n      row: row,\n      col: column,\n      index: index,\n      data: data\n    }\"\n  ></ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: SortClassPipe, name: "sortClass" }, { kind: "pipe", type: DashCasePipe, name: "dashCase" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: CapitalCasePipe, name: "capitalCase" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CoreComponent, decorators: [{
+CoreComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CoreComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CoreComponent, isStandalone: true, selector: "angular-generic-table", inputs: { loading: "loading", page: "page", search: "search", config: "config", data: "data" }, outputs: { rowClick: "rowClick", rowHover: "rowHover" }, ngImport: i0, template: "<table\n  [ngClass]=\"(tableConfig$ | async)?.class || 'table'\"\n  [class.table-mobile]=\"(tableConfig$ | async)?.mobileLayout\"\n  [class.table-horizontal]=\"(tableConfig$ | async)?.rows\"\n  [class.table-loading]=\"loading$ | async\"\n  [class.gt-sticky-row-header]=\"\n    (tableConfig$ | async)?.stickyHeaders?.row && (tableConfig$ | async)?.rows\n  \"\n  [class.gt-sticky-column-header]=\"\n    (tableConfig$ | async)?.stickyHeaders?.column\n  \"\n  [attr.aria-busy]=\"(loading$ | async) === true ? true : null\"\n>\n  <thead>\n    <tr\n      *ngIf=\"{\n        config: (tableConfig$ | async)!,\n        isLoading: loading$ | async\n      } as table\"\n    >\n      <ng-container\n        *ngFor=\"let column of table.config?.columns | keyvalue: columnOrder\"\n      >\n        <th\n          *ngIf=\"!column.value?.hidden\"\n          ngClass=\"{{ (column.key | dashCase) + '-column' }} {{\n            column.value.class\n          }}\"\n          [class.disabled]=\"table.isLoading\"\n          [attr.aria-sort]=\"sortBy$ | async | sortClass: column.key:true\"\n          [class.gt-sortable]=\"true\"\n          scope=\"col\"\n        >\n          <button\n            *ngIf=\"column.value?.sortable\"\n            class=\"gt-sort\"\n            (click)=\"\n              table.isLoading || !column.value.sortable || sort(column.key)\n            \"\n          >\n            <span *ngIf=\"column.value?.header !== false\">{{\n              column.value.header || column.key | capitalCase\n            }}</span>\n          </button>\n          <span\n            *ngIf=\"!column.value?.sortable && column.value?.header !== false\"\n            >{{ column.value.header || column.key | capitalCase }}</span\n          >\n        </th>\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          ((table?.config?.rows | keyvalue: columnOrder) || [])[0] as headerRow\n        \"\n      >\n        <th\n          class=\"row-header\"\n          [attr.aria-sort]=\"sortBy$ | async | sortClass: headerRow.key:true\"\n          ngClass=\"{{ headerRow.value.sortable ? 'sort ' : '' }} {{\n            sortBy$ | async | sortClass: headerRow.key\n          }} {{ (headerRow.key | dashCase) + '-column' }}\"\n          (click)=\"\n            table.isLoading || !headerRow.value.sortable || sort(headerRow.key)\n          \"\n          scope=\"col\"\n        >\n          <ng-container *ngIf=\"headerRow?.value?.header !== false\">{{\n            headerRow?.value?.header || headerRow.key | capitalCase\n          }}</ng-container>\n        </th>\n        <th\n          *ngFor=\"let column of ((table$ | async)?.data || [])[0]\"\n          ngClass=\"{{ headerRow.value.class }}\"\n        >\n          <ng-container\n            [ngTemplateOutlet]=\"\n              (table.config.rows || {})[headerRow.key].templateRef\n                ? templateRef\n                : (table.config.rows || {})[headerRow.key].transform\n                ? transformData\n                : rawData\n            \"\n            [ngTemplateOutletContext]=\"{\n              row: column,\n              column: headerRow,\n              transform: (table.config.rows || {})[headerRow.key].transform,\n              templateRef: (table.config.rows || {})[headerRow.key].templateRef,\n              index: 0\n            }\"\n          >\n          </ng-container>\n        </th>\n      </ng-container>\n    </tr>\n  </thead>\n  <tbody *ngIf=\"loading$ | async; else tableContent\">\n    <tr>\n      <td class=\"p-0\" [colSpan]=\"colspan$ | async\">\n        <ng-content select=\".table-loading\"></ng-content>\n      </td>\n    </tr>\n  </tbody>\n  <tfoot *ngIf=\"(table$ | async)! as table\">\n    <ng-container *ngIf=\"table.data.length > 0 && !(loading$ | async)\">\n      <ng-container *ngIf=\"(calculations$ | async)! as calculations\">\n        <tr\n          *ngFor=\"let calculation of calculations.calculations; let i = index\"\n        >\n          <ng-container\n            *ngIf=\"{\n              showHeader: (colspan$ | async) !== (footerColspan$ | async)\n            } as footerRow\"\n          >\n            <th\n              *ngIf=\"footerRow.showHeader\"\n              [colSpan]=\"\n                ((colspan$ | async) || 0) - ((footerColspan$ | async) || 0)\n              \"\n              scope=\"row\"\n            >\n              <ng-container\n                *ngIf=\"table.config?.footer?.headers?.[calculation] as showHeader\"\n                >{{showHeader === true ? (calculation | capitalCase): table.config.footer?.headers?.[calculation]}}\n              </ng-container>\n            </th>\n            <ng-container\n              *ngFor=\"\n                let column of table.config?.columns | keyvalue: columnOrder\n              \"\n            >\n              <td\n                *ngIf=\"\n                  !column.value?.hidden && calculations.calculated[column.key]\n                \"\n                ngClass=\"{{ (column.key | dashCase) + '-column' }} {{\n                  column.value.class\n                }}\"\n                [attr.data-header]=\"\n                  !footerRow.showHeader && table.config.footer?.headers?.[calculation]\n                    ? table.config.footer?.headers?.[calculation] === true ? (calculation | capitalCase) : table.config.footer?.headers?.[calculation]\n                    : null\n                \"\n              >\n                <ng-container\n                  [ngTemplateOutlet]=\"\n                    (table.config.columns || {})[column.key].transform\n                      ? transformFooter\n                      : rawFooter\n                  \"\n                  [ngTemplateOutletContext]=\"{\n                    value: calculations.calculated[column.key][calculation],\n                    transform: (table.config.columns || {})[column.key]\n                      .transform\n                  }\"\n                ></ng-container>\n              </td>\n            </ng-container>\n          </ng-container>\n        </tr>\n      </ng-container>\n    </ng-container>\n  </tfoot>\n</table>\n<ng-template #tableContent>\n  <ng-container *ngIf=\"(table$ | async)! as table\">\n    <tbody *ngIf=\"(table!.data![0] || table!.data!).length > 0; else noData\">\n      <ng-container *ngIf=\"table.config.columns\">\n        <tr\n          *ngFor=\"\n            let row of table!.data![(currentPage$ | async) || 0];\n            let i = index\n          \"\n          [attr.id]=\"'tableRow_' + i\"\n          (click)=\"table?.config?.rowClick && _rowClick(row, i, $event)\"\n          (mouseover)=\"table?.config?.rowHover && _hoverRow(row, i, $event)\"\n          (mouseout)=\"table?.config?.rowHover && _hoverRow(null, null, $event)\"\n          [class.gt-hover]=\"(rowHover$ | async)?.index === i\"\n        >\n          <ng-container\n            *ngFor=\"let column of table.config?.columns | keyvalue: columnOrder\"\n          >\n            <td\n              *ngIf=\"!column.value?.hidden\"\n              ngClass=\"{{ (column.key | dashCase) + '-column' }} {{\n                column.value.class\n              }}\"\n              [attr.data-label]=\"\n                table.config.mobileLayout && column.value.mobileHeader\n                  ? column.value.mobileHeader !== true\n                    ? column.value.mobileHeader\n                    : (column.value.header || column.key | capitalCase)\n                  : null\n              \"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"\n                  (searchBy$ | async) &&\n                  !(table.config.columns || {})[column.key].templateRef\n                    ? highlighted\n                    : (table.config.columns || {})[column.key].templateRef\n                    ? templateRef\n                    : (table.config.columns || {})[column.key].transform\n                    ? transformData\n                    : rawData\n                \"\n                [ngTemplateOutletContext]=\"{\n                  row: row,\n                  column: column,\n                  search: (searchBy$ | async),\n                  transform: (table.config.columns || {})[column.key].transform,\n                  templateRef: (table.config.columns || {})[column.key]\n                    .templateRef,\n                  index: i,\n                  data: table.data[(currentPage$ | async) || 0]\n                }\"\n              ></ng-container>\n            </td>\n          </ng-container>\n        </tr>\n      </ng-container>\n      <ng-container *ngIf=\"table.config.rows\">\n        <ng-container\n          *ngFor=\"\n            let row of table?.config?.rows | keyvalue: columnOrder | slice: 1;\n            let i = index\n          \"\n        >\n          <tr\n            *ngIf=\"!row.value?.hidden\"\n            [attr.id]=\"'tableRow_' + i\"\n            ngClass=\"{{ (row.key | dashCase) + '-row' }}\"\n            (click)=\"table?.config?.rowClick && _rowClick(row, i, $event)\"\n            (mouseover)=\"table?.config?.rowHover && _hoverRow(row, i, $event)\"\n            (mouseout)=\"\n              table?.config?.rowHover && _hoverRow(null, null, $event)\n            \"\n            [class.gt-hover]=\"(rowHover$ | async)?.index === i\"\n          >\n            <th class=\"row-header\" scope=\"row\">\n              {{ row.value.header || row.key | capitalCase }}\n            </th>\n            <td\n              *ngFor=\"let column of (table?.data || [])[0]; let y = index\"\n              ngClass=\"{{ row.value.class }}\"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"\n                  (table.config.rows || {})[row.key].templateRef\n                    ? templateRef\n                    : (table.config.rows || {})[row.key].transform\n                    ? transformData\n                    : rawData\n                \"\n                [ngTemplateOutletContext]=\"{\n                  row: column,\n                  column: row,\n                  transform: (table.config.rows || {})[row.key].transform,\n                  templateRef: (table.config.rows || {})[row.key].templateRef,\n                  index: table.config.rows ? y : i,\n                  data: table.data[(currentPage$ | async) || 0]\n                }\"\n              >\n              </ng-container>\n            </td>\n          </tr>\n        </ng-container>\n      </ng-container>\n    </tbody>\n  </ng-container>\n</ng-template>\n<ng-template #noData>\n  <tbody>\n    <tr>\n      <td class=\"p-0\" [colSpan]=\"colspan$ | async\">\n        <ng-content select=\".table-no-data\"></ng-content>\n      </td>\n    </tr>\n  </tbody>\n</ng-template>\n<ng-template\n  #highlighted\n  let-row=\"row\"\n  let-column=\"column\"\n  let-search=\"search\"\n  let-transform=\"transform\"\n>\n  <div\n    *ngIf=\"!transform\"\n    [innerHTML]=\"row[column.key] | highlight: search\"\n  ></div>\n  <div\n    *ngIf=\"transform\"\n    [innerHTML]=\"\n      row[column.key]\n        | dynamicPipe: transform.pipe:transform?.args\n        | highlight: search\n    \"\n  ></div>\n</ng-template>\n<ng-template #rawData let-row=\"row\" let-column=\"column\">\n  {{ row[column.key] }}\n</ng-template>\n<ng-template\n  #transformData\n  let-row=\"row\"\n  let-column=\"column\"\n  let-transform=\"transform\"\n  let-data=\"data\"\n>\n  {{ row[column.key] | dynamicPipe: transform.pipe:transform?.args }}\n</ng-template>\n<ng-template #transformFooter let-value=\"value\" let-transform=\"transform\">\n  {{\n    (value | dynamicPipe: transform.pipe:transform?.args) ||\n      (tableConfig$ | async)?.footer?.emptyContent\n  }}\n</ng-template>\n<ng-template #rawFooter let-value=\"value\">\n  {{ value || (tableConfig$ | async)?.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: "pipe", type: CapitalCasePipe, name: "capitalCase" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: SortClassPipe, name: "sortClass" }, { kind: "pipe", type: DashCasePipe, name: "dashCase" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CoreComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'angular-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table\n  [ngClass]=\"(tableConfig$ | async)?.class || 'table'\"\n  [class.table-mobile]=\"(tableConfig$ | async)?.mobileLayout\"\n  [class.table-horizontal]=\"(tableConfig$ | async)?.rows\"\n  [class.table-loading]=\"loading$ | async\"\n  [class.gt-sticky-row-header]=\"\n    (tableConfig$ | async)?.stickyHeaders?.row && (tableConfig$ | async)?.rows\n  \"\n  [class.gt-sticky-column-header]=\"\n    (tableConfig$ | async)?.stickyHeaders?.column\n  \"\n  [attr.aria-busy]=\"(loading$ | async) === true ? true : null\"\n>\n  <thead>\n    <tr\n      *ngIf=\"{\n        config: (tableConfig$ | async)!,\n        isLoading: loading$ | async\n      } as table\"\n    >\n      <ng-container\n        *ngFor=\"let column of table?.config?.columns | keyvalue: columnOrder\"\n      >\n        <th\n          *ngIf=\"!column.value?.hidden\"\n          ngClass=\"{{ (column.key | dashCase) + '-column' }} {{\n            column.value.class\n          }}\"\n          [class.disabled]=\"table.isLoading\"\n          [attr.aria-sort]=\"sortBy$ | async | sortClass: column.key:true\"\n          [class.gt-sortable]=\"true\"\n          scope=\"col\"\n        >\n          <button\n            *ngIf=\"column.value?.sortable\"\n            class=\"gt-sort\"\n            (click)=\"\n              table.isLoading || !column.value?.sortable || sort(column.key)\n            \"\n          >\n            <span *ngIf=\"column.value?.header !== false\">{{\n              column.value?.header || column.key | capitalCase\n            }}</span>\n          </button>\n          <span\n            *ngIf=\"!column.value?.sortable && column.value?.header !== false\"\n            >{{ column.value?.header || column.key | capitalCase }}</span\n          >\n        </th>\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          ((table?.config?.rows | keyvalue: columnOrder) || [])[0] as headerRow\n        \"\n      >\n        <th\n          class=\"row-header\"\n          [attr.aria-sort]=\"sortBy$ | async | sortClass: headerRow.key:true\"\n          ngClass=\"{{ headerRow.value?.sortable ? 'sort ' : '' }} {{\n            sortBy$ | async | sortClass: headerRow.key\n          }} {{ (headerRow.key | dashCase) + '-column' }}\"\n          (click)=\"\n            table.isLoading || !headerRow.value?.sortable || sort(headerRow.key)\n          \"\n          scope=\"col\"\n        >\n          <ng-container *ngIf=\"headerRow?.value?.header !== false\">{{\n            headerRow?.value?.header || headerRow.key | capitalCase\n          }}</ng-container>\n        </th>\n        <th\n          *ngFor=\"let column of ((table$ | async)?.data || [])[0]\"\n          ngClass=\"{{ headerRow.value?.class }}\"\n        >\n          <ng-container\n            [ngTemplateOutlet]=\"\n              (table.config?.rows || {})[headerRow.key].templateRef\n                ? templateRef\n                : (table.config?.rows || {})[headerRow.key].transform\n                ? transformData\n                : rawData\n            \"\n            [ngTemplateOutletContext]=\"{\n              row: column,\n              column: headerRow,\n              transform: (table.config?.rows || {})[headerRow.key].transform,\n              templateRef: (table.config?.rows || {})[headerRow.key]\n                .templateRef,\n              index: 0\n            }\"\n          >\n          </ng-container>\n        </th>\n      </ng-container>\n    </tr>\n  </thead>\n  <tbody *ngIf=\"loading$ | async; else tableContent\">\n    <tr>\n      <td class=\"p-0\" [colSpan]=\"colspan$ | async\">\n        <ng-content select=\".table-loading\"></ng-content>\n      </td>\n    </tr>\n  </tbody>\n</table>\n<ng-template #tableContent>\n  <ng-container *ngIf=\"(table$ | async)! as table\">\n    <tbody *ngIf=\"(table!.data![0] || table!.data!).length > 0; else noData\">\n      <ng-container *ngIf=\"table.config.columns\">\n        <tr\n          *ngFor=\"\n            let row of table!.data![(currentPage$ | async) || 0];\n            let i = index\n          \"\n          [attr.id]=\"'tableRow_' + i\"\n          (click)=\"table?.config?.rowClick && _rowClick(row, i, $event)\"\n          (mouseover)=\"table?.config?.rowHover && _hoverRow(row, i, $event)\"\n          (mouseout)=\"table?.config?.rowHover && _hoverRow(null, null, $event)\"\n          [class.gt-hover]=\"(rowHover$ | async)?.index === i\"\n        >\n          <ng-container\n            *ngFor=\"let column of table.config?.columns | keyvalue: columnOrder\"\n          >\n            <td\n              *ngIf=\"!column.value?.hidden\"\n              ngClass=\"{{ (column.key | dashCase) + '-column' }} {{\n                column.value?.class\n              }}\"\n              [attr.data-label]=\"\n                table.config?.mobileLayout && column.value?.mobileHeader\n                  ? column.value?.mobileHeader !== true\n                    ? column.value?.mobileHeader\n                    : (column.value?.header || column.key | capitalCase)\n                  : null\n              \"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"\n                  (searchBy$ | async) &&\n                  !(table.config?.columns || {})[column.key].templateRef\n                    ? highlighted\n                    : (table.config?.columns || {})[column.key].templateRef\n                    ? templateRef\n                    : (table.config?.columns || {})[column.key].transform\n                    ? transformData\n                    : rawData\n                \"\n                [ngTemplateOutletContext]=\"{\n                  row: row,\n                  column: column,\n                  search: (searchBy$ | async),\n                  transform: (table.config?.columns || {})[column.key]\n                    .transform,\n                  templateRef: (table.config?.columns || {})[column.key]\n                    .templateRef,\n                  index: i,\n                  data: table.data[(currentPage$ | async) || 0]\n                }\"\n              ></ng-container>\n            </td>\n          </ng-container>\n        </tr>\n      </ng-container>\n      <ng-container *ngIf=\"table.config.rows\">\n        <ng-container\n          *ngFor=\"\n            let row of table?.config?.rows | keyvalue: columnOrder | slice: 1;\n            let i = index\n          \"\n        >\n          <tr\n            *ngIf=\"!row.value?.hidden\"\n            [attr.id]=\"'tableRow_' + i\"\n            ngClass=\"{{ (row.key | dashCase) + '-row' }}\"\n            (click)=\"table?.config?.rowClick && _rowClick(row, i, $event)\"\n            (mouseover)=\"table?.config?.rowHover && _hoverRow(row, i, $event)\"\n            (mouseout)=\"\n              table?.config?.rowHover && _hoverRow(null, null, $event)\n            \"\n            [class.gt-hover]=\"(rowHover$ | async)?.index === i\"\n          >\n            <th class=\"row-header\" scope=\"row\">\n              {{ row.value?.header || row.key | capitalCase }}\n            </th>\n            <td\n              *ngFor=\"let column of (table?.data || [])[0]; let y = index\"\n              ngClass=\"{{ row.value?.class }}\"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"\n                  (table.config?.rows || {})[row.key].templateRef\n                    ? templateRef\n                    : (table.config?.rows || {})[row.key].transform\n                    ? transformData\n                    : rawData\n                \"\n                [ngTemplateOutletContext]=\"{\n                  row: column,\n                  column: row,\n                  transform: (table.config?.rows || {})[row.key].transform,\n                  templateRef: (table.config?.rows || {})[row.key].templateRef,\n                  index: table.config?.rows ? y : i,\n                  data: table.data[(currentPage$ | async) || 0]\n                }\"\n              >\n              </ng-container>\n            </td>\n          </tr>\n        </ng-container>\n      </ng-container>\n    </tbody>\n  </ng-container>\n</ng-template>\n<ng-template #noData>\n  <tbody>\n    <tr>\n      <td class=\"p-0\" [colSpan]=\"colspan$ | async\">\n        <ng-content select=\".table-no-data\"></ng-content>\n      </td>\n    </tr>\n  </tbody>\n</ng-template>\n<ng-template #highlighted let-row=\"row\" let-column=\"column\" let-search=\"search\">\n  <div [innerHTML]=\"row[column.key] | highlight: search\"></div>\n</ng-template>\n<ng-template #rawData let-row=\"row\" let-column=\"column\">\n  {{ row[column.key] }}\n</ng-template>\n<ng-template\n  #transformData\n  let-row=\"row\"\n  let-column=\"column\"\n  let-transform=\"transform\"\n  let-data=\"data\"\n>\n  {{ row[column.key] | dynamicPipe: transform.pipe:transform?.args }}\n</ng-template>\n<ng-template\n  #templateRef\n  let-row=\"row\"\n  let-column=\"column\"\n  let-index=\"index\"\n  let-templateRef=\"templateRef\"\n  let-data=\"data\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"templateRef\"\n    [ngTemplateOutletContext]=\"{\n      row: row,\n      col: column,\n      index: index,\n      data: data\n    }\"\n  ></ng-container>\n</ng-template>\n" }]
+            args: [{ selector: 'angular-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CapitalCasePipe,
+                        KeyValuePipe,
+                        SortClassPipe,
+                        DashCasePipe,
+                        AsyncPipe,
+                        NgTemplateOutlet,
+                        SlicePipe,
+                        DynamicPipe,
+                        HighlightPipe,
+                        NgClass,
+                        NgIf,
+                        NgForOf,
+                    ], template: "<table\n  [ngClass]=\"(tableConfig$ | async)?.class || 'table'\"\n  [class.table-mobile]=\"(tableConfig$ | async)?.mobileLayout\"\n  [class.table-horizontal]=\"(tableConfig$ | async)?.rows\"\n  [class.table-loading]=\"loading$ | async\"\n  [class.gt-sticky-row-header]=\"\n    (tableConfig$ | async)?.stickyHeaders?.row && (tableConfig$ | async)?.rows\n  \"\n  [class.gt-sticky-column-header]=\"\n    (tableConfig$ | async)?.stickyHeaders?.column\n  \"\n  [attr.aria-busy]=\"(loading$ | async) === true ? true : null\"\n>\n  <thead>\n    <tr\n      *ngIf=\"{\n        config: (tableConfig$ | async)!,\n        isLoading: loading$ | async\n      } as table\"\n    >\n      <ng-container\n        *ngFor=\"let column of table.config?.columns | keyvalue: columnOrder\"\n      >\n        <th\n          *ngIf=\"!column.value?.hidden\"\n          ngClass=\"{{ (column.key | dashCase) + '-column' }} {{\n            column.value.class\n          }}\"\n          [class.disabled]=\"table.isLoading\"\n          [attr.aria-sort]=\"sortBy$ | async | sortClass: column.key:true\"\n          [class.gt-sortable]=\"true\"\n          scope=\"col\"\n        >\n          <button\n            *ngIf=\"column.value?.sortable\"\n            class=\"gt-sort\"\n            (click)=\"\n              table.isLoading || !column.value.sortable || sort(column.key)\n            \"\n          >\n            <span *ngIf=\"column.value?.header !== false\">{{\n              column.value.header || column.key | capitalCase\n            }}</span>\n          </button>\n          <span\n            *ngIf=\"!column.value?.sortable && column.value?.header !== false\"\n            >{{ column.value.header || column.key | capitalCase }}</span\n          >\n        </th>\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          ((table?.config?.rows | keyvalue: columnOrder) || [])[0] as headerRow\n        \"\n      >\n        <th\n          class=\"row-header\"\n          [attr.aria-sort]=\"sortBy$ | async | sortClass: headerRow.key:true\"\n          ngClass=\"{{ headerRow.value.sortable ? 'sort ' : '' }} {{\n            sortBy$ | async | sortClass: headerRow.key\n          }} {{ (headerRow.key | dashCase) + '-column' }}\"\n          (click)=\"\n            table.isLoading || !headerRow.value.sortable || sort(headerRow.key)\n          \"\n          scope=\"col\"\n        >\n          <ng-container *ngIf=\"headerRow?.value?.header !== false\">{{\n            headerRow?.value?.header || headerRow.key | capitalCase\n          }}</ng-container>\n        </th>\n        <th\n          *ngFor=\"let column of ((table$ | async)?.data || [])[0]\"\n          ngClass=\"{{ headerRow.value.class }}\"\n        >\n          <ng-container\n            [ngTemplateOutlet]=\"\n              (table.config.rows || {})[headerRow.key].templateRef\n                ? templateRef\n                : (table.config.rows || {})[headerRow.key].transform\n                ? transformData\n                : rawData\n            \"\n            [ngTemplateOutletContext]=\"{\n              row: column,\n              column: headerRow,\n              transform: (table.config.rows || {})[headerRow.key].transform,\n              templateRef: (table.config.rows || {})[headerRow.key].templateRef,\n              index: 0\n            }\"\n          >\n          </ng-container>\n        </th>\n      </ng-container>\n    </tr>\n  </thead>\n  <tbody *ngIf=\"loading$ | async; else tableContent\">\n    <tr>\n      <td class=\"p-0\" [colSpan]=\"colspan$ | async\">\n        <ng-content select=\".table-loading\"></ng-content>\n      </td>\n    </tr>\n  </tbody>\n  <tfoot *ngIf=\"(table$ | async)! as table\">\n    <ng-container *ngIf=\"table.data.length > 0 && !(loading$ | async)\">\n      <ng-container *ngIf=\"(calculations$ | async)! as calculations\">\n        <tr\n          *ngFor=\"let calculation of calculations.calculations; let i = index\"\n        >\n          <ng-container\n            *ngIf=\"{\n              showHeader: (colspan$ | async) !== (footerColspan$ | async)\n            } as footerRow\"\n          >\n            <th\n              *ngIf=\"footerRow.showHeader\"\n              [colSpan]=\"\n                ((colspan$ | async) || 0) - ((footerColspan$ | async) || 0)\n              \"\n              scope=\"row\"\n            >\n              <ng-container\n                *ngIf=\"table.config?.footer?.headers?.[calculation] as showHeader\"\n                >{{showHeader === true ? (calculation | capitalCase): table.config.footer?.headers?.[calculation]}}\n              </ng-container>\n            </th>\n            <ng-container\n              *ngFor=\"\n                let column of table.config?.columns | keyvalue: columnOrder\n              \"\n            >\n              <td\n                *ngIf=\"\n                  !column.value?.hidden && calculations.calculated[column.key]\n                \"\n                ngClass=\"{{ (column.key | dashCase) + '-column' }} {{\n                  column.value.class\n                }}\"\n                [attr.data-header]=\"\n                  !footerRow.showHeader && table.config.footer?.headers?.[calculation]\n                    ? table.config.footer?.headers?.[calculation] === true ? (calculation | capitalCase) : table.config.footer?.headers?.[calculation]\n                    : null\n                \"\n              >\n                <ng-container\n                  [ngTemplateOutlet]=\"\n                    (table.config.columns || {})[column.key].transform\n                      ? transformFooter\n                      : rawFooter\n                  \"\n                  [ngTemplateOutletContext]=\"{\n                    value: calculations.calculated[column.key][calculation],\n                    transform: (table.config.columns || {})[column.key]\n                      .transform\n                  }\"\n                ></ng-container>\n              </td>\n            </ng-container>\n          </ng-container>\n        </tr>\n      </ng-container>\n    </ng-container>\n  </tfoot>\n</table>\n<ng-template #tableContent>\n  <ng-container *ngIf=\"(table$ | async)! as table\">\n    <tbody *ngIf=\"(table!.data![0] || table!.data!).length > 0; else noData\">\n      <ng-container *ngIf=\"table.config.columns\">\n        <tr\n          *ngFor=\"\n            let row of table!.data![(currentPage$ | async) || 0];\n            let i = index\n          \"\n          [attr.id]=\"'tableRow_' + i\"\n          (click)=\"table?.config?.rowClick && _rowClick(row, i, $event)\"\n          (mouseover)=\"table?.config?.rowHover && _hoverRow(row, i, $event)\"\n          (mouseout)=\"table?.config?.rowHover && _hoverRow(null, null, $event)\"\n          [class.gt-hover]=\"(rowHover$ | async)?.index === i\"\n        >\n          <ng-container\n            *ngFor=\"let column of table.config?.columns | keyvalue: columnOrder\"\n          >\n            <td\n              *ngIf=\"!column.value?.hidden\"\n              ngClass=\"{{ (column.key | dashCase) + '-column' }} {{\n                column.value.class\n              }}\"\n              [attr.data-label]=\"\n                table.config.mobileLayout && column.value.mobileHeader\n                  ? column.value.mobileHeader !== true\n                    ? column.value.mobileHeader\n                    : (column.value.header || column.key | capitalCase)\n                  : null\n              \"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"\n                  (searchBy$ | async) &&\n                  !(table.config.columns || {})[column.key].templateRef\n                    ? highlighted\n                    : (table.config.columns || {})[column.key].templateRef\n                    ? templateRef\n                    : (table.config.columns || {})[column.key].transform\n                    ? transformData\n                    : rawData\n                \"\n                [ngTemplateOutletContext]=\"{\n                  row: row,\n                  column: column,\n                  search: (searchBy$ | async),\n                  transform: (table.config.columns || {})[column.key].transform,\n                  templateRef: (table.config.columns || {})[column.key]\n                    .templateRef,\n                  index: i,\n                  data: table.data[(currentPage$ | async) || 0]\n                }\"\n              ></ng-container>\n            </td>\n          </ng-container>\n        </tr>\n      </ng-container>\n      <ng-container *ngIf=\"table.config.rows\">\n        <ng-container\n          *ngFor=\"\n            let row of table?.config?.rows | keyvalue: columnOrder | slice: 1;\n            let i = index\n          \"\n        >\n          <tr\n            *ngIf=\"!row.value?.hidden\"\n            [attr.id]=\"'tableRow_' + i\"\n            ngClass=\"{{ (row.key | dashCase) + '-row' }}\"\n            (click)=\"table?.config?.rowClick && _rowClick(row, i, $event)\"\n            (mouseover)=\"table?.config?.rowHover && _hoverRow(row, i, $event)\"\n            (mouseout)=\"\n              table?.config?.rowHover && _hoverRow(null, null, $event)\n            \"\n            [class.gt-hover]=\"(rowHover$ | async)?.index === i\"\n          >\n            <th class=\"row-header\" scope=\"row\">\n              {{ row.value.header || row.key | capitalCase }}\n            </th>\n            <td\n              *ngFor=\"let column of (table?.data || [])[0]; let y = index\"\n              ngClass=\"{{ row.value.class }}\"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"\n                  (table.config.rows || {})[row.key].templateRef\n                    ? templateRef\n                    : (table.config.rows || {})[row.key].transform\n                    ? transformData\n                    : rawData\n                \"\n                [ngTemplateOutletContext]=\"{\n                  row: column,\n                  column: row,\n                  transform: (table.config.rows || {})[row.key].transform,\n                  templateRef: (table.config.rows || {})[row.key].templateRef,\n                  index: table.config.rows ? y : i,\n                  data: table.data[(currentPage$ | async) || 0]\n                }\"\n              >\n              </ng-container>\n            </td>\n          </tr>\n        </ng-container>\n      </ng-container>\n    </tbody>\n  </ng-container>\n</ng-template>\n<ng-template #noData>\n  <tbody>\n    <tr>\n      <td class=\"p-0\" [colSpan]=\"colspan$ | async\">\n        <ng-content select=\".table-no-data\"></ng-content>\n      </td>\n    </tr>\n  </tbody>\n</ng-template>\n<ng-template\n  #highlighted\n  let-row=\"row\"\n  let-column=\"column\"\n  let-search=\"search\"\n  let-transform=\"transform\"\n>\n  <div\n    *ngIf=\"!transform\"\n    [innerHTML]=\"row[column.key] | highlight: search\"\n  ></div>\n  <div\n    *ngIf=\"transform\"\n    [innerHTML]=\"\n      row[column.key]\n        | dynamicPipe: transform.pipe:transform?.args\n        | highlight: search\n    \"\n  ></div>\n</ng-template>\n<ng-template #rawData let-row=\"row\" let-column=\"column\">\n  {{ row[column.key] }}\n</ng-template>\n<ng-template\n  #transformData\n  let-row=\"row\"\n  let-column=\"column\"\n  let-transform=\"transform\"\n  let-data=\"data\"\n>\n  {{ row[column.key] | dynamicPipe: transform.pipe:transform?.args }}\n</ng-template>\n<ng-template #transformFooter let-value=\"value\" let-transform=\"transform\">\n  {{\n    (value | dynamicPipe: transform.pipe:transform?.args) ||\n      (tableConfig$ | async)?.footer?.emptyContent\n  }}\n</ng-template>\n<ng-template #rawFooter let-value=\"value\">\n  {{ value || (tableConfig$ | async)?.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: { loading: [{
                 type: Input
             }], page: [{
@@ -383,80 +481,102 @@ class GtDeltaComponent {
             negative: 'text-danger',
         };
         this.key = 'value';
-        this.notApplicableValue = 'n/a';
-        this.initialValue = '-';
+        this.notApplicableValue = null;
+        this.initialValue = null;
     }
-}
-GtDeltaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: GtDeltaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GtDeltaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: GtDeltaComponent, selector: "gt-delta", inputs: { data: "data", index: "index", baseIndex: "baseIndex", classes: "classes", key: "key", notApplicableValue: "notApplicableValue", initialValue: "initialValue" }, ngImport: i0, template: `<span
-    *ngIf="{
-      value:
-        index === 0
-          ? initialValue
-          : ((baseIndex === undefined
-              ? data[index - 1][key]
-              : data[baseIndex][key]) -
-              data[index][key]) /
-            -Math.abs(
-              baseIndex === undefined
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        this._value = value;
+    }
+    get deltaTemplate() {
+        return this._deltaTemplate;
+    }
+    set deltaTemplate(deltaTemplate) {
+        this._deltaTemplate = deltaTemplate;
+    }
+    ngOnChanges(changes) {
+        if (!changes.data.currentValue) {
+            return;
+        }
+        const data = changes.data?.currentValue;
+        const index = changes.index?.currentValue || this.index;
+        const baseIndex = changes.baseIndex?.currentValue;
+        const key = changes.key?.currentValue || this.key;
+        const initialValue = changes.initialValue?.currentValue || this.initialValue;
+        const deltaValue = index === 0
+            ? initialValue
+            : data[index][key] -
+                (baseIndex === undefined
+                    ? data[index - 1][key]
+                    : data[baseIndex][key]);
+        const baseValue = index === 0
+            ? 1
+            : baseIndex === undefined
                 ? data[index - 1][key]
-                : data[baseIndex][key]
-            )
-    } as delta"
-    [class]="[
-      classes.span,
-      !delta.value || !Number.isFinite(delta.value)
-        ? null
-        : delta.value > 0
-        ? classes.positive
-        : classes.negative
-    ]"
-    [class.gt-delta-positive]="delta.value > 0 && Number.isFinite(delta.value)"
-    [class.gt-delta-negative]="delta.value < 0"
-    >{{
-      Number.isFinite(delta.value)
-        ? (delta.value | percent)
-        : delta.value === initialValue
-        ? initialValue
-        : notApplicableValue
-    }}</span
-  >`, isInline: true, styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.PercentPipe, name: "percent" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: GtDeltaComponent, decorators: [{
+                : data[baseIndex][key];
+        const relative = index === 0
+            ? initialValue
+            : Math.sign(deltaValue) * Math.abs(deltaValue / baseValue);
+        this.value = {
+            relative: Number.isFinite(relative)
+                ? relative
+                : index === 0
+                    ? initialValue
+                    : changes.notApplicableValue?.currentValue || this.notApplicableValue,
+            absolute: deltaValue,
+        };
+    }
+}
+GtDeltaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: GtDeltaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GtDeltaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: GtDeltaComponent, isStandalone: true, selector: "gt-delta", inputs: { deltaTemplate: "deltaTemplate", data: "data", index: "index", baseIndex: "baseIndex", classes: "classes", key: "key", notApplicableValue: "notApplicableValue", initialValue: "initialValue" }, usesOnChanges: true, ngImport: i0, template: `<span
+      *ngIf="value as delta"
+      [class]="[
+        classes.span,
+        delta.absolute > 0
+          ? classes.positive
+          : delta.absolute < 0
+          ? classes.negative
+          : null
+      ]"
+      [class.gt-delta-positive]="delta.absolute > 0"
+      [class.gt-delta-negative]="delta.absolute < 0"
+      ><ng-container
+        *ngTemplateOutlet="deltaTemplate || defaultTemplate; context: { delta }"
+      ></ng-container>
+    </span>
+    <ng-template #defaultTemplate let-delta="delta">
+      <span *ngIf="delta.relative">{{
+        delta.relative | percent: '1.0-2'
+      }}</span>
+    </ng-template>`, isInline: true, styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: GtDeltaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gt-delta', template: `<span
-    *ngIf="{
-      value:
-        index === 0
-          ? initialValue
-          : ((baseIndex === undefined
-              ? data[index - 1][key]
-              : data[baseIndex][key]) -
-              data[index][key]) /
-            -Math.abs(
-              baseIndex === undefined
-                ? data[index - 1][key]
-                : data[baseIndex][key]
-            )
-    } as delta"
-    [class]="[
-      classes.span,
-      !delta.value || !Number.isFinite(delta.value)
-        ? null
-        : delta.value > 0
-        ? classes.positive
-        : classes.negative
-    ]"
-    [class.gt-delta-positive]="delta.value > 0 && Number.isFinite(delta.value)"
-    [class.gt-delta-negative]="delta.value < 0"
-    >{{
-      Number.isFinite(delta.value)
-        ? (delta.value | percent)
-        : delta.value === initialValue
-        ? initialValue
-        : notApplicableValue
-    }}</span
-  >`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+      *ngIf="value as delta"
+      [class]="[
+        classes.span,
+        delta.absolute > 0
+          ? classes.positive
+          : delta.absolute < 0
+          ? classes.negative
+          : null
+      ]"
+      [class.gt-delta-positive]="delta.absolute > 0"
+      [class.gt-delta-negative]="delta.absolute < 0"
+      ><ng-container
+        *ngTemplateOutlet="deltaTemplate || defaultTemplate; context: { delta }"
+      ></ng-container>
+    </span>
+    <ng-template #defaultTemplate let-delta="delta">
+      <span *ngIf="delta.relative">{{
+        delta.relative | percent: '1.0-2'
+      }}</span>
+    </ng-template>`, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [PercentPipe, NgIf, NgTemplateOutlet], styles: [":host{display:inline-block}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { deltaTemplate: [{
+                type: Input
+            }], data: [{
                 type: Input
             }], index: [{
                 type: Input
@@ -474,20 +594,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
 
 class GenericTableCoreModule {
 }
-GenericTableCoreModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: GenericTableCoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GenericTableCoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: GenericTableCoreModule, declarations: [CoreComponent,
+GenericTableCoreModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: GenericTableCoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GenericTableCoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: GenericTableCoreModule, imports: [CommonModule,
+        CoreComponent,
         SortClassPipe,
         DashCasePipe,
         HighlightPipe,
         CapitalCasePipe,
         CapitalCasePipe,
         DynamicPipe,
-        GtDeltaComponent], imports: [CommonModule], exports: [CoreComponent, GtDeltaComponent] });
-GenericTableCoreModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: GenericTableCoreModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: GenericTableCoreModule, decorators: [{
+        GtDeltaComponent], exports: [CoreComponent, GtDeltaComponent] });
+GenericTableCoreModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: GenericTableCoreModule, imports: [CommonModule,
+        CoreComponent,
+        GtDeltaComponent] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: GenericTableCoreModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
+                    imports: [
+                        CommonModule,
                         CoreComponent,
                         SortClassPipe,
                         DashCasePipe,
@@ -497,7 +621,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
                         DynamicPipe,
                         GtDeltaComponent,
                     ],
-                    imports: [CommonModule],
                     exports: [CoreComponent, GtDeltaComponent],
                 }]
         }] });
@@ -580,11 +703,11 @@ class PaginationComponent {
         }
     }
 }
-PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: PaginationComponent, selector: "angular-generic-table-pagination", inputs: { paginationLength: "paginationLength", classes: "classes", ariaLabels: "ariaLabels", table: "table" }, ngImport: i0, template: "<ng-container\n  *ngIf=\"{\n    links: pagination$ | async,\n    currentPosition: table?.currentPage$ | async\n  } as pagination\"\n>\n  <nav\n    *ngIf=\"pagination.links && pagination.links.length > 1\"\n    role=\"navigation\"\n    [attr.aria-label]=\"ariaLabels?.nav\"\n    class=\"gt-pagination\"\n    [class]=\"classes?.nav\"\n  >\n    <ul [class]=\"classes?.ul\">\n      <ng-container\n        *ngFor=\"\n          let position of pagination!.links;\n          let i = index;\n          let last = last\n        \"\n      >\n        <li\n          [class]=\"classes?.li\"\n          [class.active]=\"position === (pagination!.currentPosition || 0) + 1\"\n        >\n          <button\n            [class]=\"classes?.button\"\n            [attr.aria-label]=\"ariaLabels.button + position\"\n            (click)=\"goto(position)\"\n          >\n            {{ position }}\n          </button>\n        </li>\n        <li\n          [class]=\"classes?.li\"\n          class=\"gt-ellipsis\"\n          *ngIf=\"position + 1 !== pagination!.links![i + 1] && !last\"\n        >\n          <button [class]=\"classes?.button\" disabled tabindex=\"-1\"></button>\n        </li>\n      </ng-container>\n    </ul>\n  </nav>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: PaginationComponent, decorators: [{
+PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: PaginationComponent, isStandalone: true, selector: "angular-generic-table-pagination", inputs: { paginationLength: "paginationLength", classes: "classes", ariaLabels: "ariaLabels", table: "table" }, ngImport: i0, template: "<ng-container\n  *ngIf=\"{\n    links: pagination$ | async,\n    currentPosition: table?.currentPage$ | async\n  } as pagination\"\n>\n  <nav\n    *ngIf=\"pagination.links && pagination.links.length > 1\"\n    role=\"navigation\"\n    [attr.aria-label]=\"ariaLabels.nav\"\n    class=\"gt-pagination\"\n    [class]=\"classes.nav\"\n  >\n    <ul [class]=\"classes.ul\">\n      <ng-container\n        *ngFor=\"\n          let position of pagination!.links;\n          let i = index;\n          let last = last\n        \"\n      >\n        <li\n          [class]=\"classes.li\"\n          [class.active]=\"position === (pagination!.currentPosition || 0) + 1\"\n        >\n          <button\n            [class]=\"classes.button\"\n            [attr.aria-label]=\"ariaLabels.button + position\"\n            (click)=\"goto(position)\"\n          >\n            {{ position }}\n          </button>\n        </li>\n        <li\n          [class]=\"classes.li\"\n          class=\"gt-ellipsis\"\n          *ngIf=\"position + 1 !== pagination!.links![i + 1] && !last\"\n        >\n          <button [class]=\"classes.button\" disabled tabindex=\"-1\"></button>\n        </li>\n      </ng-container>\n    </ul>\n  </nav>\n</ng-container>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'angular-generic-table-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container\n  *ngIf=\"{\n    links: pagination$ | async,\n    currentPosition: table?.currentPage$ | async\n  } as pagination\"\n>\n  <nav\n    *ngIf=\"pagination.links && pagination.links.length > 1\"\n    role=\"navigation\"\n    [attr.aria-label]=\"ariaLabels?.nav\"\n    class=\"gt-pagination\"\n    [class]=\"classes?.nav\"\n  >\n    <ul [class]=\"classes?.ul\">\n      <ng-container\n        *ngFor=\"\n          let position of pagination!.links;\n          let i = index;\n          let last = last\n        \"\n      >\n        <li\n          [class]=\"classes?.li\"\n          [class.active]=\"position === (pagination!.currentPosition || 0) + 1\"\n        >\n          <button\n            [class]=\"classes?.button\"\n            [attr.aria-label]=\"ariaLabels.button + position\"\n            (click)=\"goto(position)\"\n          >\n            {{ position }}\n          </button>\n        </li>\n        <li\n          [class]=\"classes?.li\"\n          class=\"gt-ellipsis\"\n          *ngIf=\"position + 1 !== pagination!.links![i + 1] && !last\"\n        >\n          <button [class]=\"classes?.button\" disabled tabindex=\"-1\"></button>\n        </li>\n      </ng-container>\n    </ul>\n  </nav>\n</ng-container>\n" }]
+            args: [{ selector: 'angular-generic-table-pagination', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [AsyncPipe, NgIf, NgForOf], template: "<ng-container\n  *ngIf=\"{\n    links: pagination$ | async,\n    currentPosition: table?.currentPage$ | async\n  } as pagination\"\n>\n  <nav\n    *ngIf=\"pagination.links && pagination.links.length > 1\"\n    role=\"navigation\"\n    [attr.aria-label]=\"ariaLabels.nav\"\n    class=\"gt-pagination\"\n    [class]=\"classes.nav\"\n  >\n    <ul [class]=\"classes.ul\">\n      <ng-container\n        *ngFor=\"\n          let position of pagination!.links;\n          let i = index;\n          let last = last\n        \"\n      >\n        <li\n          [class]=\"classes.li\"\n          [class.active]=\"position === (pagination!.currentPosition || 0) + 1\"\n        >\n          <button\n            [class]=\"classes.button\"\n            [attr.aria-label]=\"ariaLabels.button + position\"\n            (click)=\"goto(position)\"\n          >\n            {{ position }}\n          </button>\n        </li>\n        <li\n          [class]=\"classes.li\"\n          class=\"gt-ellipsis\"\n          *ngIf=\"position + 1 !== pagination!.links![i + 1] && !last\"\n        >\n          <button [class]=\"classes.button\" disabled tabindex=\"-1\"></button>\n        </li>\n      </ng-container>\n    </ul>\n  </nav>\n</ng-container>\n" }]
         }], propDecorators: { paginationLength: [{
                 type: Input
             }], classes: [{
@@ -597,14 +720,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
 
 class GenericTablePaginationModule {
 }
-GenericTablePaginationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: GenericTablePaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GenericTablePaginationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: GenericTablePaginationModule, declarations: [PaginationComponent], imports: [CommonModule], exports: [PaginationComponent] });
-GenericTablePaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: GenericTablePaginationModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: GenericTablePaginationModule, decorators: [{
+GenericTablePaginationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: GenericTablePaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GenericTablePaginationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: GenericTablePaginationModule, imports: [CommonModule, PaginationComponent], exports: [PaginationComponent] });
+GenericTablePaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: GenericTablePaginationModule, imports: [CommonModule, PaginationComponent] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: GenericTablePaginationModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [PaginationComponent],
-                    imports: [CommonModule],
+                    imports: [CommonModule, PaginationComponent],
                     exports: [PaginationComponent],
                 }]
         }] });