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

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

@@ -1,19 +1,19 @@
 import * as i0 from '@angular/core';
-import { Injectable, Pipe, Injector, Component, ChangeDetectionStrategy, Input, NgModule } 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 { startWith, map, switchMap, shareReplay, withLatestFrom, pluck } from 'rxjs/operators';
+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: "13.0.3", ngImport: i0, type: CoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-CoreService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CoreService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CoreService, decorators: [{
+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: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: function () { return []; } });
 
@@ -51,11 +51,25 @@ search = (text, caseSensitive, data, config) => {
     if (config.columns) {
         const searchColumns = Object.keys(config.columns).filter(
         // @ts-ignore
-        (key) => !config.columns[key].hidden && config.columns[key].search !== false);
-        return data.filter((row) => Object.entries(row)
-            .filter(([key, value]) => searchColumns.indexOf(key) !== -1)
-            .reduce((prev, [key, value]) => prev + (prev === '' ? '' : ' & ') + (caseSensitive ? value + '' : (value + '').toLowerCase()), '')
-            .indexOf(text) !== -1);
+        (key) => config.columns &&
+            !config.columns[key]?.hidden &&
+            config.columns[key]?.search !== false);
+        const FILTERED = [];
+        for (let i = 0; i < data.length; i++) {
+            const row = data[i];
+            const match = Object.entries(row)
+                .filter(([key, value]) => searchColumns.indexOf(key) !== -1)
+                .reduce((acc, [key, value], index) => {
+                return (acc +
+                    (index === 0 ? '' : ' ? ') +
+                    (caseSensitive ? value + '' : (value + '').toLowerCase()));
+            }, '')
+                .indexOf(text) !== -1;
+            if (match) {
+                FILTERED[FILTERED.length] = row;
+            }
+        }
+        return FILTERED;
     }
     else {
         return data;
@@ -63,13 +77,19 @@ search = (text, caseSensitive, data, config) => {
 };
 
 class SortClassPipe {
-    transform(selection, property) {
-        return selection?.sortBy === property ? 'sort-' + selection.sortByOrder : '';
+    transform(selection, property, aria = false) {
+        return selection?.sortBy === property
+            ? !aria
+                ? 'gt-sort-' + selection.sortByOrder
+                : selection.sortByOrder + 'ending'
+            : !aria
+                ? ''
+                : null;
     }
 }
-SortClassPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SortClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-SortClassPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SortClassPipe, name: "sortClass" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SortClassPipe, decorators: [{
+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: [{
             type: Pipe,
             args: [{
                     name: 'sortClass',
@@ -81,26 +101,12 @@ class DashCasePipe {
         return dashed(s);
     }
 }
-DashCasePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DashCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-DashCasePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DashCasePipe, name: "dashCase" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DashCasePipe, decorators: [{
+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: [{
             type: Pipe,
             args: [{
-                    name: 'dashCase'
-                }]
-        }] });
-
-class CapitalCasePipe {
-    transform(s) {
-        return capitalize(s);
-    }
-}
-CapitalCasePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CapitalCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-CapitalCasePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CapitalCasePipe, name: "capitalCase" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CapitalCasePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'capitalCase',
+                    name: 'dashCase',
                 }]
         }] });
 
@@ -118,7 +124,7 @@ class HighlightPipe {
                 searchTerm
                     .toLowerCase()
                     .match(/".*?"|[^ ]+/g) // extract words
-                    .map(needle => needle.replace(/"(.*?)"/, '$1') // strip away '"'
+                    .map((needle) => needle.replace(/"(.*?)"/, '$1') // strip away '"'
                 )
                     .join('|') + // combine words
                 ')', 'ig');
@@ -141,12 +147,26 @@ class HighlightPipe {
         return highlightedText;
     }
 }
-HighlightPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: HighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-HighlightPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: HighlightPipe, name: "highlight" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: HighlightPipe, decorators: [{
+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: [{
+            type: Pipe,
+            args: [{
+                    name: 'highlight',
+                }]
+        }] });
+
+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: 'highlight'
+                    name: 'capitalCase',
                 }]
         }] });
 
@@ -164,9 +184,9 @@ class DynamicPipe {
         return pipe.transform(value, ...(pipeArgs || []));
     }
 }
-DynamicPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DynamicPipe, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Pipe });
-DynamicPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DynamicPipe, name: "dynamicPipe" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DynamicPipe, decorators: [{
+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',
@@ -175,6 +195,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
 
 class CoreComponent {
     constructor() {
+        this.rowClick = new EventEmitter();
+        this._rowHover$ = new ReplaySubject(1);
+        this.rowHover = new EventEmitter();
+        this.rowHover$ = this._rowHover$.asObservable().pipe(debounceTime(50), distinctUntilChanged((p, q) => p.index === q.index), tap((event) => this.rowHover.emit(event)), shareReplay(1));
         this._loading$ = new ReplaySubject(1);
         this.sortBy$ = new Subject();
         // tslint:disable-next-line:variable-name
@@ -183,16 +207,42 @@ class CoreComponent {
         // tslint:disable-next-line:variable-name
         this._tableConfig$ = new ReplaySubject(1);
         this.tableConfig$ = this._tableConfig$.pipe(map((value) => (isObservable(value) ? value : of(value))), switchMap((obs) => obs), shareReplay(1));
-        // tslint:disable-next-line:variable-name
         this._data$ = new ReplaySubject(1);
-        this.data$ = this._data$.pipe(map((value) => (isObservable(value) ? value : of(value))), switchMap((obs) => combineLatest([obs, this.sortBy$.pipe(startWith(EMPTY)), this.searchBy$])), withLatestFrom(this.tableConfig$), map(([[data, sortBy, searchBy], config]) => {
+        this.data$ = this._data$.pipe(map((value) => (isObservable(value) ? value : of(value))), switchMap((obs) => combineLatest([obs])), withLatestFrom(this.tableConfig$), map(([[data], config]) => {
+            // if columns or rows contains config for mapTo...
+            if ((config.columns &&
+                !!Object.values(config.columns).find((column) => !!column.mapTo)) ||
+                (config.rows &&
+                    !!Object.values(config.rows).find((column) => !!column.mapTo))) {
+                // ...map data to new keys on row...
+                const newData = [];
+                for (let i = 0; i < data.length; i++) {
+                    const row = data[i];
+                    const newKeys = Object.entries(config.columns || config.rows || [])
+                        .filter(([key, value]) => !!value.mapTo) // add keys for columns with mapTo config...
+                        .reduce((previousValue, [key, value]) => ({
+                        ...previousValue,
+                        [key]: this.nestedValue(row, value.mapTo.path, value.mapTo?.missingValue),
+                    }), {});
+                    newData[i] = { ...row, ...newKeys };
+                }
+                data = newData;
+            }
+            return { data, config };
+        }), switchMap((obs) => combineLatest([
+            of(obs),
+            this.sortBy$.pipe(startWith(EMPTY)),
+            this.searchBy$,
+        ])), map(([table, sortBy, searchBy]) => {
             // create a new array reference and sort new array (prevent mutating existing state)
-            data = [...data];
+            table.data = [...table.data];
             return !sortBy
                 ? searchBy
-                    ? search(searchBy, false, data, config)
-                    : data
-                : (searchBy ? search(searchBy, false, data, config) : data)?.sort((a, b) => {
+                    ? search(searchBy, false, table.data, table.config)
+                    : table.data
+                : (searchBy
+                    ? search(searchBy, false, table.data, table.config)
+                    : table.data)?.sort((a, b) => {
                     // TODO: improve logic
                     const typed = sortBy;
                     return a[typed.sortBy] > b[typed.sortBy]
@@ -206,11 +256,18 @@ class CoreComponent {
                             : 0;
                 });
         }), shareReplay(1));
-        this.table$ = combineLatest([this.data$, this.tableConfig$]).pipe(map(([sorted, config]) => {
+        this.table$ = combineLatest([
+            this.data$,
+            this.tableConfig$,
+        ]).pipe(map(([sorted, config]) => {
             // if pagination is disabled...
             if (!config.pagination || config.pagination.length === 0) {
                 // ...return unaltered array
-                return { data: [sorted], config, info: { records: sorted.length, pageTotal: 1 } };
+                return {
+                    data: [sorted],
+                    config,
+                    info: { records: sorted.length, pageTotal: 1 },
+                };
             }
             // return record set
             return {
@@ -225,7 +282,8 @@ class CoreComponent {
         this._currentPage$ = new BehaviorSubject(0);
         this.currentPage$ = combineLatest([this._currentPage$, this.table$]).pipe(map(([page, table]) => {
             // determine last page
-            const lastPage = Math.ceil(table.info.records / (table.config?.pagination?.length || table.info.records)) - 1;
+            const lastPage = Math.ceil(table.info.records /
+                (table.config?.pagination?.length || table.info.records)) - 1;
             // determine max/min position
             return +page < 0 ? 0 : +page > lastPage ? lastPage : +page;
         }), shareReplay(1));
@@ -236,26 +294,47 @@ class CoreComponent {
             return (a.value.order || 0) - (b.value.order || 0);
         };
     }
-    set loading(value) {
-        this._loading$.next(value);
+    set loading(isLoading) {
+        this._loading$.next(isLoading);
+    }
+    set page(page) {
+        this._currentPage$.next(page);
     }
-    set page(value) {
-        this._currentPage$.next(value);
+    set search(string) {
+        this._searchBy$.next(string);
     }
-    set search(value) {
-        this._searchBy$.next(value);
+    set config(config) {
+        this._tableConfig$.next(config);
     }
-    set config(value) {
-        this._tableConfig$.next(value);
+    set data(data) {
+        this._data$.next(data);
     }
-    set data(value) {
-        this._data$.next(value);
+    _rowClick(row, index, event) {
+        this.rowClick.emit({ row, index, event });
+    }
+    hoverRow(arg) {
+        if (typeof arg === 'number') {
+            this.data$
+                .pipe(map((data) => data[arg]), take(1))
+                .subscribe((row) => this._hoverRow(row, arg));
+        }
+        else if (typeof arg === 'string') {
+            // TODO: implement hover by id
+        }
+        else {
+            this._hoverRow(null, null);
+        }
+    }
+    _hoverRow(row, index, event) {
+        this._rowHover$.next({ row, index, event });
     }
     get loading$() {
         return this._loading$.pipe(startWith(false), map((value) => (isObservable(value) ? value : of(value))), switchMap((obs) => obs), shareReplay(1));
     }
     sort(property) {
-        const newSortOrder = this._sortBy?.sortBy !== property || this._sortBy?.sortByOrder === Order.DESC || !this._sortBy.sortByOrder
+        const newSortOrder = this._sortBy?.sortBy !== property ||
+            this._sortBy?.sortByOrder === Order.DESC ||
+            !this._sortBy.sortByOrder
             ? Order.ASC
             : Order.DESC;
         const newSortBy = {
@@ -265,12 +344,17 @@ class CoreComponent {
         this.sortBy$.next(newSortBy);
         this._sortBy = newSortBy;
     }
+    nestedValue(object, mapTo, missingValue = null) {
+        const levels = mapTo.split('.');
+        return levels.reduce((previousValue, currentValue, index) => previousValue[currentValue] ||
+            (index === levels.length - 1 ? missingValue : {}), object);
+    }
 }
-CoreComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CoreComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: CoreComponent, selector: "angular-generic-table", inputs: { loading: "loading", page: "page", search: "search", config: "config", data: "data" }, ngImport: i0, template: "<table [ngClass]=\"(tableConfig$ | async)?.class || 'table'\" [class.table-mobile]=\"(tableConfig$ | async)?.mobileLayout\">\n  <thead>\n    <tr *ngIf=\"{\n    config:(tableConfig$ | async)!,\n    loading: loading$ | async\n    } as table\">\n      <ng-container *ngFor=\"let column of table?.config?.columns | keyvalue: columnOrder\">\n        <th\n          *ngIf=\"!column.value?.hidden\"\n          ngClass=\"{{ column.value?.sortable ? 'sort ' : '' }} {{ sortBy$ | async | sortClass: column.key }} {{\n            (column.key | dashCase) + '-column'\n          }} {{column.value.class}}\"\n          [class.disabled]=\"table.loading\"\n          (click)=\"table.loading || !column.value?.sortable || sort(column.key)\"\n        >\n          <span *ngIf=\"column.value?.header !== false\">{{ column.value?.header || column.key | capitalCase }}</span>\n        </th>\n      </ng-container>\n      <ng-container *ngIf=\"((table?.config?.rows | keyvalue: columnOrder)||[])[0] as headerRow\">\n        <th class=\"row-header\"\n            ngClass=\"{{ headerRow.value?.sortable ? 'sort ' : '' }} {{ sortBy$ | async | sortClass: headerRow.key }} {{\n            (headerRow.key | dashCase) + '-column'\n          }}\"\n            (click)=\"table.loading || !headerRow.value?.sortable || sort(headerRow.key)\">\n          <ng-container *ngIf=\"headerRow?.value?.header !== false\">{{headerRow?.value?.header || headerRow.key | capitalCase }}</ng-container>\n        </th>\n        <th *ngFor=\"let column of ((table$ | async)?.data || [])[0]\"  ngClass=\"{{headerRow.value?.class}}\">\n          <ng-container [ngTemplateOutlet]=\"(table.config?.rows || {})[headerRow.key].templateRef ? templateRef : (table.config?.rows || {})[headerRow.key].transform ? transformData:\n            rawData\" [ngTemplateOutletContext]=\"{row: column, column: headerRow, transform: (table.config?.rows || {})[headerRow.key].transform, templateRef: (table.config?.rows || {})[headerRow.key].templateRef, index: 0}\">\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\n    *ngIf=\"(table$ | async)! as table\"\n  >\n    <tbody *ngIf=\"(table!.data![0] || table!.data!).length > 0; else noData\">\n      <ng-container *ngIf=\"table.config.columns\">\n        <tr *ngFor=\"let row of table!.data![(currentPage$ | async) || 0]; let i = index\" [attr.id]=\"'tableRow_' + i\">\n          <ng-container *ngFor=\"let column of table.config?.columns | keyvalue: columnOrder\">\n            <td *ngIf=\"!column.value?.hidden\" ngClass=\"{{(column.key | dashCase) + '-column'}} {{column.value?.class}}\">\n              <span *ngIf=\"column.value?.mobileHeader && table.config?.mobileLayout\" class=\"mobile-header\">{{ column.value?.mobileHeader !== true ? column.value?.mobileHeader : column.value?.header || column.key  | capitalCase }}</span>\n              <ng-container [ngTemplateOutlet]=\"(searchBy$ | async) && !(table.config?.columns || {})[column.key].templateRef ? highlighted:\n                (table.config?.columns || {})[column.key].templateRef ? templateRef : (table.config?.columns || {})[column.key].transform ? transformData:\n                rawData\" [ngTemplateOutletContext]=\"{row: row, column: column, search: (searchBy$ | async), transform: (table.config?.columns || {})[column.key].transform, templateRef: (table.config?.columns || {})[column.key].templateRef, index: i}\"></ng-container></td>\n          </ng-container>\n        </tr>\n      </ng-container>\n      <ng-container *ngIf=\"table.config.rows\">\n        <ng-container *ngFor=\"let row of table?.config?.rows | keyvalue: columnOrder | slice:1; let i = index\">\n          <tr *ngIf=\"!row.value?.hidden\" [attr.id]=\"'tableRow_' + i\" ngClass=\"{{(row.key | dashCase) + '-row'}}\">\n            <th class=\"row-header\">\n              <span *ngIf=\"row.value.mobileHeader\" class=\"mobile-header\">{{ row.value?.mobileHeader !== true ? row.value?.mobileHeader : row.value?.header || row.key  | capitalCase }}</span>\n              {{row.value?.header || row.key | capitalCase}}\n            </th>\n            <td *ngFor=\"let column of (table?.data || [])[0]\" ngClass=\"{{row.value?.class}}\">\n              <ng-container [ngTemplateOutlet]=\"(table.config?.rows || {})[row.key].templateRef ? templateRef : (table.config?.rows || {})[row.key].transform ? transformData:\n              rawData\" [ngTemplateOutletContext]=\"{row: column, column: row, transform: (table.config?.rows || {})[row.key].transform, templateRef: (table.config?.rows || {})[row.key].templateRef, index: i}\">\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 #transformData let-row=\"row\" let-column=\"column\" let-transform=\"transform\">\n  {{row[column.key] | dynamicPipe:transform.pipe:transform?.args}}\n</ng-template>\n<ng-template #templateRef let-row=\"row\" let-column=\"column\" let-index=\"index\" let-templateRef=\"templateRef\">\n  <ng-container [ngTemplateOutlet]=\"templateRef\"  [ngTemplateOutletContext]=\"{row: row, col: column, index: index}\"></ng-container>\n</ng-template>\n", directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i1.AsyncPipe, "keyvalue": i1.KeyValuePipe, "sortClass": SortClassPipe, "dashCase": DashCasePipe, "capitalCase": CapitalCasePipe, "slice": i1.SlicePipe, "highlight": HighlightPipe, "dynamicPipe": DynamicPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CoreComponent, decorators: [{
+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: [{
             type: Component,
-            args: [{ selector: 'angular-generic-table', styles: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<table [ngClass]=\"(tableConfig$ | async)?.class || 'table'\" [class.table-mobile]=\"(tableConfig$ | async)?.mobileLayout\">\n  <thead>\n    <tr *ngIf=\"{\n    config:(tableConfig$ | async)!,\n    loading: loading$ | async\n    } as table\">\n      <ng-container *ngFor=\"let column of table?.config?.columns | keyvalue: columnOrder\">\n        <th\n          *ngIf=\"!column.value?.hidden\"\n          ngClass=\"{{ column.value?.sortable ? 'sort ' : '' }} {{ sortBy$ | async | sortClass: column.key }} {{\n            (column.key | dashCase) + '-column'\n          }} {{column.value.class}}\"\n          [class.disabled]=\"table.loading\"\n          (click)=\"table.loading || !column.value?.sortable || sort(column.key)\"\n        >\n          <span *ngIf=\"column.value?.header !== false\">{{ column.value?.header || column.key | capitalCase }}</span>\n        </th>\n      </ng-container>\n      <ng-container *ngIf=\"((table?.config?.rows | keyvalue: columnOrder)||[])[0] as headerRow\">\n        <th class=\"row-header\"\n            ngClass=\"{{ headerRow.value?.sortable ? 'sort ' : '' }} {{ sortBy$ | async | sortClass: headerRow.key }} {{\n            (headerRow.key | dashCase) + '-column'\n          }}\"\n            (click)=\"table.loading || !headerRow.value?.sortable || sort(headerRow.key)\">\n          <ng-container *ngIf=\"headerRow?.value?.header !== false\">{{headerRow?.value?.header || headerRow.key | capitalCase }}</ng-container>\n        </th>\n        <th *ngFor=\"let column of ((table$ | async)?.data || [])[0]\"  ngClass=\"{{headerRow.value?.class}}\">\n          <ng-container [ngTemplateOutlet]=\"(table.config?.rows || {})[headerRow.key].templateRef ? templateRef : (table.config?.rows || {})[headerRow.key].transform ? transformData:\n            rawData\" [ngTemplateOutletContext]=\"{row: column, column: headerRow, transform: (table.config?.rows || {})[headerRow.key].transform, templateRef: (table.config?.rows || {})[headerRow.key].templateRef, index: 0}\">\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\n    *ngIf=\"(table$ | async)! as table\"\n  >\n    <tbody *ngIf=\"(table!.data![0] || table!.data!).length > 0; else noData\">\n      <ng-container *ngIf=\"table.config.columns\">\n        <tr *ngFor=\"let row of table!.data![(currentPage$ | async) || 0]; let i = index\" [attr.id]=\"'tableRow_' + i\">\n          <ng-container *ngFor=\"let column of table.config?.columns | keyvalue: columnOrder\">\n            <td *ngIf=\"!column.value?.hidden\" ngClass=\"{{(column.key | dashCase) + '-column'}} {{column.value?.class}}\">\n              <span *ngIf=\"column.value?.mobileHeader && table.config?.mobileLayout\" class=\"mobile-header\">{{ column.value?.mobileHeader !== true ? column.value?.mobileHeader : column.value?.header || column.key  | capitalCase }}</span>\n              <ng-container [ngTemplateOutlet]=\"(searchBy$ | async) && !(table.config?.columns || {})[column.key].templateRef ? highlighted:\n                (table.config?.columns || {})[column.key].templateRef ? templateRef : (table.config?.columns || {})[column.key].transform ? transformData:\n                rawData\" [ngTemplateOutletContext]=\"{row: row, column: column, search: (searchBy$ | async), transform: (table.config?.columns || {})[column.key].transform, templateRef: (table.config?.columns || {})[column.key].templateRef, index: i}\"></ng-container></td>\n          </ng-container>\n        </tr>\n      </ng-container>\n      <ng-container *ngIf=\"table.config.rows\">\n        <ng-container *ngFor=\"let row of table?.config?.rows | keyvalue: columnOrder | slice:1; let i = index\">\n          <tr *ngIf=\"!row.value?.hidden\" [attr.id]=\"'tableRow_' + i\" ngClass=\"{{(row.key | dashCase) + '-row'}}\">\n            <th class=\"row-header\">\n              <span *ngIf=\"row.value.mobileHeader\" class=\"mobile-header\">{{ row.value?.mobileHeader !== true ? row.value?.mobileHeader : row.value?.header || row.key  | capitalCase }}</span>\n              {{row.value?.header || row.key | capitalCase}}\n            </th>\n            <td *ngFor=\"let column of (table?.data || [])[0]\" ngClass=\"{{row.value?.class}}\">\n              <ng-container [ngTemplateOutlet]=\"(table.config?.rows || {})[row.key].templateRef ? templateRef : (table.config?.rows || {})[row.key].transform ? transformData:\n              rawData\" [ngTemplateOutletContext]=\"{row: column, column: row, transform: (table.config?.rows || {})[row.key].transform, templateRef: (table.config?.rows || {})[row.key].templateRef, index: i}\">\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 #transformData let-row=\"row\" let-column=\"column\" let-transform=\"transform\">\n  {{row[column.key] | dynamicPipe:transform.pipe:transform?.args}}\n</ng-template>\n<ng-template #templateRef let-row=\"row\" let-column=\"column\" let-index=\"index\" let-templateRef=\"templateRef\">\n  <ng-container [ngTemplateOutlet]=\"templateRef\"  [ngTemplateOutletContext]=\"{row: row, col: column, index: index}\"></ng-container>\n</ng-template>\n" }]
+            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" }]
         }], propDecorators: { loading: [{
                 type: Input
             }], page: [{
@@ -281,27 +365,176 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 type: Input
             }], data: [{
                 type: Input
+            }], rowClick: [{
+                type: Output
+            }], rowHover: [{
+                type: Output
+            }] } });
+
+class GtDeltaComponent {
+    constructor() {
+        this.Math = Math;
+        this.Number = Number;
+        this.data = [];
+        this.index = 0;
+        this.classes = {
+            span: 'gt-delta',
+            positive: 'text-success',
+            negative: 'text-danger',
+        };
+        this.key = 'value';
+        this.notApplicableValue = 'n/a';
+        this.initialValue = '-';
+    }
+}
+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
+                ? 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: [{
+            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: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], baseIndex: [{
+                type: Input
+            }], classes: [{
+                type: Input
+            }], key: [{
+                type: Input
+            }], notApplicableValue: [{
+                type: Input
+            }], initialValue: [{
+                type: Input
             }] } });
 
 class GenericTableCoreModule {
 }
-GenericTableCoreModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: GenericTableCoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GenericTableCoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: GenericTableCoreModule, declarations: [CoreComponent, SortClassPipe, DashCasePipe, HighlightPipe, CapitalCasePipe, CapitalCasePipe, DynamicPipe], imports: [CommonModule], exports: [CoreComponent] });
-GenericTableCoreModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: GenericTableCoreModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: GenericTableCoreModule, decorators: [{
+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,
+        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: [{
             type: NgModule,
             args: [{
-                    declarations: [CoreComponent, SortClassPipe, DashCasePipe, HighlightPipe, CapitalCasePipe, CapitalCasePipe, DynamicPipe],
+                    declarations: [
+                        CoreComponent,
+                        SortClassPipe,
+                        DashCasePipe,
+                        HighlightPipe,
+                        CapitalCasePipe,
+                        CapitalCasePipe,
+                        DynamicPipe,
+                        GtDeltaComponent,
+                    ],
                     imports: [CommonModule],
-                    exports: [CoreComponent],
+                    exports: [CoreComponent, GtDeltaComponent],
                 }]
         }] });
 
 class PaginationComponent {
     constructor() {
         this.table$ = new ReplaySubject(1);
+        this._ariaLabels = {
+            nav: 'Table pagination',
+            button: 'Go to page ',
+        };
+        this._classes = {
+            ul: 'pagination',
+            li: 'page-item',
+            button: 'page-link',
+        };
+        this._paginationLength = 5;
         this.pagination$ = this.table$.pipe(switchMap((core) => combineLatest([core?.table$.pipe(pluck('info')), core?.currentPage$])), map(([info, currentPage]) => this.generateList(info.pageTotal, currentPage)));
     }
+    get paginationLength() {
+        return this._paginationLength;
+    }
+    set paginationLength(value) {
+        this._paginationLength = +value;
+    }
+    get classes() {
+        return this._classes;
+    }
+    set classes(value) {
+        this._classes = value;
+    }
+    get ariaLabels() {
+        return this._ariaLabels;
+    }
+    set ariaLabels(value) {
+        this._ariaLabels = value;
+    }
     get table() {
         return this._table;
     }
@@ -310,14 +543,13 @@ class PaginationComponent {
         this.table$.next(value);
     }
     generateList(pages, currentPosition) {
-        const paginationLength = 5;
-        const middle = Math.floor(paginationLength / 2);
-        const length = pages < paginationLength ? pages : paginationLength;
+        const middle = Math.floor(this.paginationLength / 2);
+        const length = pages < this.paginationLength ? pages : this.paginationLength;
         return Array.from({ length }, (_, i) => {
             if (i === 0) {
                 return 1;
             }
-            else if (pages < paginationLength) {
+            else if (pages < this.paginationLength) {
                 return i + 1;
             }
             else if (i + 1 === length) {
@@ -326,10 +558,12 @@ class PaginationComponent {
             else if (currentPosition > middle && currentPosition < pages - middle) {
                 return i + currentPosition - (middle - 1);
             }
-            else if (currentPosition > middle && currentPosition < pages - (middle - 1)) {
+            else if (currentPosition > middle &&
+                currentPosition < pages - (middle - 1)) {
                 return i + currentPosition - middle;
             }
-            else if (currentPosition > middle && currentPosition === pages - (middle - 1)) {
+            else if (currentPosition > middle &&
+                currentPosition === pages - (middle - 1)) {
                 return i + currentPosition - (middle + 1);
             }
             else if (currentPosition > middle && currentPosition === pages - 1) {
@@ -346,21 +580,27 @@ class PaginationComponent {
         }
     }
 }
-PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: PaginationComponent, selector: "angular-generic-table-pagination", inputs: { table: "table" }, ngImport: i0, template: "<ng-container *ngIf=\"{\n  links: pagination$ | async,\n  currentPosition: table?.currentPage$ | async\n  } as pagination\">\n  <nav *ngIf=\"pagination.links && pagination.links.length > 1\" role=\"navigation\" aria-label=\"Table Pagination Navigation\" class=\"gt-pagination\">\n  <ul>\n    <li *ngFor=\"let position of pagination!.links; let i = index; let last = last\"\n    [class.ellipsis]=\"position + 1 !== pagination!.links![i+1] && !last\"\n    [class.active]=\"position === (pagination!.currentPosition || 0) + 1\"\n    >\n      <button class=\"btn btn-link\" [attr.aria-label]=\"'Goto Page ' + position\" (click)=\"goto(position)\">{{position}}</button>\n    </li>\n  </ul>\n</nav>\n</ng-container>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PaginationComponent, decorators: [{
+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: [{
             type: Component,
-            args: [{ selector: 'angular-generic-table-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  links: pagination$ | async,\n  currentPosition: table?.currentPage$ | async\n  } as pagination\">\n  <nav *ngIf=\"pagination.links && pagination.links.length > 1\" role=\"navigation\" aria-label=\"Table Pagination Navigation\" class=\"gt-pagination\">\n  <ul>\n    <li *ngFor=\"let position of pagination!.links; let i = index; let last = last\"\n    [class.ellipsis]=\"position + 1 !== pagination!.links![i+1] && !last\"\n    [class.active]=\"position === (pagination!.currentPosition || 0) + 1\"\n    >\n      <button class=\"btn btn-link\" [attr.aria-label]=\"'Goto Page ' + position\" (click)=\"goto(position)\">{{position}}</button>\n    </li>\n  </ul>\n</nav>\n</ng-container>\n" }]
-        }], propDecorators: { table: [{
+            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" }]
+        }], propDecorators: { paginationLength: [{
+                type: Input
+            }], classes: [{
+                type: Input
+            }], ariaLabels: [{
+                type: Input
+            }], table: [{
                 type: Input
             }] } });
 
 class GenericTablePaginationModule {
 }
-GenericTablePaginationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: GenericTablePaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GenericTablePaginationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: GenericTablePaginationModule, declarations: [PaginationComponent], imports: [CommonModule], exports: [PaginationComponent] });
-GenericTablePaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: GenericTablePaginationModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: GenericTablePaginationModule, decorators: [{
+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: [{
             type: NgModule,
             args: [{
                     declarations: [PaginationComponent],
@@ -377,5 +617,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CoreComponent, CoreService, GenericTableCoreModule, GenericTablePaginationModule, PaginationComponent };
+export { CoreComponent, CoreService, GenericTableCoreModule, GenericTablePaginationModule, GtDeltaComponent, PaginationComponent };
 //# sourceMappingURL=angular-generic-table-core.mjs.map