@angular-generic-table/core 5.0.0-rc.17 → 5.0.0-rc.18

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

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
 import { Injectable, Pipe, Injector, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, NgModule } from '@angular/core';
-import { ReplaySubject, BehaviorSubject, isObservable, of, combineLatest } from 'rxjs';
+import { Subject, ReplaySubject, BehaviorSubject, isObservable, of, combineLatest, fromEvent } from 'rxjs';
 import * as i1 from '@angular/common';
 import { KeyValuePipe, AsyncPipe, NgTemplateOutlet, SlicePipe, NgClass, NgIf, NgForOf, PercentPipe, CommonModule } from '@angular/common';
-import { debounceTime, distinctUntilChanged, tap, shareReplay, startWith, map, switchMap, withLatestFrom, take, filter, pluck } from 'rxjs/operators';
+import { distinctUntilChanged, tap, shareReplay, startWith, map, switchMap, withLatestFrom, filter, pluck, take, takeUntil } from 'rxjs/operators';
 
 class CoreService {
     constructor() { }
@@ -345,16 +345,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                 }]
         }] });
 
+class RowSelectionPipe {
+    transform(row, selection, comparator, className) {
+        return className && comparator(row, selection) ? className : '';
+    }
+}
+RowSelectionPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: RowSelectionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+RowSelectionPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.1.1", ngImport: i0, type: RowSelectionPipe, isStandalone: true, name: "rowSelection" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: RowSelectionPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'rowSelection',
+                    standalone: true,
+                }]
+        }] });
+
 class CoreComponent {
     constructor() {
+        this.unsubscribe$ = new Subject();
+        this._navigationKeys = [
+            'ArrowDown',
+            'ArrowUp',
+            'ArrowLeft',
+            'ArrowRight',
+            'Home',
+            'End',
+        ];
+        this._selectKeys = ['Enter', ' '];
+        this._customClasses = {
+            selectedRow: 'gt-selected',
+            activeRow: 'gt-active',
+        };
+        /** selection
+         * @description An object that contains the currently selected row(s) in the table. It's passed to the selection function to determine which rows should be selected.
+         * @type {any}
+         */
+        this.selection = {};
+        /** generateRowId
+         * @description Whether or not to generate a unique id for each row in the table. Defaults to `true`.
+         * @type {boolean}
+         */
+        this.generateRowId = true;
         this.rowClick = new EventEmitter();
+        this.rowSelect = new EventEmitter();
         this.sortOrderChange = new EventEmitter();
-        this._rowHover$ = new ReplaySubject(1);
-        this.rowHover = new EventEmitter();
+        this._rowActive$ = new ReplaySubject(1);
+        this.rowActive = new EventEmitter();
         this.columnSort = new EventEmitter();
         /** page change event - emitted when current page/index changes for pagination */
         this.pageChange = 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.rowActive$ = this._rowActive$.asObservable().pipe(distinctUntilChanged((p, q) => {
+            if (this.rowIdKey && p.row && q.row) {
+                return p.row[this.rowIdKey] === q.row[this.rowIdKey];
+            }
+            else if (this.generateRowId && p.row && q.row) {
+                return p.row._id === q.row._id;
+            }
+            else {
+                return p.index === q.index;
+            }
+        }), tap((event) => (this.activeRowIndex = event.index)), tap((event) => this.rowActive.emit(event)), shareReplay(1));
+        this.activeRowIndex = null;
         this._loading$ = new ReplaySubject(1);
         this._sortOrder$ = new BehaviorSubject([]);
         this._searchBy$ = new ReplaySubject(1);
@@ -371,7 +422,7 @@ class CoreComponent {
         });
         // tslint:disable-next-line:variable-name
         this._tableConfig$ = new BehaviorSubject({});
-        this.tableConfig$ = this._tableConfig$.pipe(map((value) => (isObservable(value) ? value : of(value))), switchMap((obs) => obs), shareReplay(1));
+        this.tableConfig$ = this._tableConfig$.pipe(map((value) => (isObservable(value) ? value : of(value))), switchMap((obs) => obs), tap((config) => (this._tableConfig = config)), shareReplay(1));
         this._data$ = new ReplaySubject(1);
         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...
@@ -393,6 +444,13 @@ class CoreComponent {
                 }
                 data = newData;
             }
+            if (this.generateRowId && !this.rowIdKey && data.length > 0) {
+                const dataWithId = [];
+                for (let i = 0; i < data.length; i++) {
+                    dataWithId[i] = Object.assign(Object.assign({}, data[i]), { _id: i });
+                }
+                data = dataWithId;
+            }
             return { data, config };
         }), switchMap((obs) => combineLatest([of(obs), this.sortOrder$, this.searchBy$])), map(([table, sortBy, searchBy]) => {
             var _a, _b, _c, _d, _e;
@@ -442,6 +500,7 @@ class CoreComponent {
                 config,
                 info: {
                     numberOfRecords: sorted.length,
+                    pageSize: +(config.pagination.length || 0),
                     pageTotal: Math.ceil(sorted.length / +(config.pagination.length || 0)),
                 },
             };
@@ -476,6 +535,30 @@ class CoreComponent {
         this.columnOrder = (a, b) => {
             return (a.value.order || 0) - (b.value.order || 0);
         };
+        this._unsubscribeFromKeyboardEvents$ = new Subject();
+        this._keyboardArrowEvent$ = fromEvent(document, 'keydown').pipe(filter((event) => [...this._navigationKeys, ...this._selectKeys].indexOf(event.key) > -1));
+    }
+    get navigationKeys() {
+        return this._navigationKeys;
+    }
+    /** navigationKeys
+     * @description An array of keyboard keys that will trigger navigation and active row, currently only supports arrow keys, home and end (omit key name from array to disable it)
+     * @type {string[]}
+     * @default ['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight', 'Home', 'End']
+     */
+    set navigationKeys(value) {
+        this._navigationKeys = value;
+    }
+    get selectKeys() {
+        return this._selectKeys;
+    }
+    /** selectKeys
+     * @description An array of keyboard keys that will trigger row selection (omit key name from array to disable it)
+     * @type {string[]}
+     * @default ['Enter', ' ']
+     */
+    set selectKeys(value) {
+        this._selectKeys = value;
     }
     get sortOrder$() {
         return this._sortOrder$.asObservable();
@@ -486,6 +569,9 @@ class CoreComponent {
     set paginationIndex(pageIndex) {
         this._currentPaginationIndex$.next(pageIndex);
     }
+    get paginationIndex() {
+        return this._currentPaginationIndex$.getValue();
+    }
     set pagingInfo(value) {
         if (value) {
             this._pagingInfo$.next(value);
@@ -495,6 +581,38 @@ class CoreComponent {
             }
         }
     }
+    /** customClasses
+     * @description An object that contains custom classes for various elements in the table.
+     * @type {object} - { selectedRow: string, activeRow: string } - default classes are 'gt-selected' and 'gt-active'
+     */
+    set customClasses(classes) {
+        this._customClasses = Object.assign(Object.assign({}, this._customClasses), classes);
+    }
+    get customClasses() {
+        return this._customClasses;
+    }
+    /** isRowSelectedFn
+     * @description Function to determine if row is selected or not.
+     * @type {fn} A function that receives a row object and optional state for current selection that can be used to determine if row should be marked as selected or not. */
+    set isRowSelectedFn(fn) {
+        this._isRowSelectedFn = fn;
+    }
+    get isRowSelectedFn() {
+        return this._isRowSelectedFn;
+    }
+    /** trackRowByFn
+     * @description A function that returns a unique identifier for each row in the table to optimize rendering when data is added or removed.
+     * @type fn - TrackByFunction to retrieve unique id based on index and/or row. Defaults to using `row[this.rowIdKey]`.
+     */
+    set trackRowByFn(fn) {
+        this._trackRowByFn = fn;
+    }
+    get trackRowByFn() {
+        return this._trackRowByFn;
+    }
+    _trackRowByFn(index, row) {
+        return this.rowIdKey ? row[this.rowIdKey] : row === null || row === void 0 ? void 0 : row._id;
+    }
     set search(string) {
         this._searchBy$.next(string);
     }
@@ -502,7 +620,9 @@ class CoreComponent {
         this._tableConfig$.next(config);
     }
     set data(data) {
-        this._data$.next(data);
+        if (data) {
+            this._data$.next(data);
+        }
     }
     set sortOrder(sortConfig) {
         if (JSON.stringify(sortConfig) !== JSON.stringify(this._sortOrder$.value)) {
@@ -513,21 +633,24 @@ class CoreComponent {
     _rowClick(row, index, event) {
         this.rowClick.emit({ row, index, event });
     }
-    hoverRow(arg) {
+    _rowActive(row, index, event) {
+        this.rowSelect.emit({ row, index, event });
+    }
+    activateRow(arg, event) {
         if (typeof arg === 'number') {
-            this.data$
-                .pipe(map((data) => data[arg]), take(1))
-                .subscribe((row) => this._hoverRow(row, arg));
+            this.table$
+                .pipe(pluck('data'), map((data) => data[this.paginationIndex][arg]), take(1), takeUntil(this.unsubscribe$))
+                .subscribe((row) => this._activateRow(row, arg, event));
         }
         else if (typeof arg === 'string') {
             // TODO: implement hover by id
         }
         else {
-            this._hoverRow(null, null);
+            this._activateRow(null, null);
         }
     }
-    _hoverRow(row, index, event) {
-        this._rowHover$.next({ row, index, event });
+    _activateRow(row, index, event) {
+        this._rowActive$.next({ row, index, event });
     }
     get loading$() {
         return this._loading$.pipe(startWith(false), map((value) => (isObservable(value) ? value : of(value))), switchMap((obs) => obs), shareReplay(1));
@@ -613,9 +736,120 @@ class CoreComponent {
         return levels.reduce((previousValue, currentValue, index) => previousValue[currentValue] ||
             (index === levels.length - 1 ? missingValue : {}), object);
     }
+    listenToKeyboardEvents() {
+        var _a;
+        if (!((_a = this._tableConfig) === null || _a === void 0 ? void 0 : _a.activateRowOnKeyboardNavigation)) {
+            return;
+        }
+        this._unsubscribeFromKeyboardEvents$.next(true);
+        this._keyboardArrowEvent$
+            .pipe(withLatestFrom(this.data$, this.currentPaginationIndex$, this.tableInfo$), takeUntil(this._unsubscribeFromKeyboardEvents$), takeUntil(this.unsubscribe$))
+            .subscribe(([event, rows, currentPage, tableInfo]) => {
+            var _a;
+            const selectEvent = this._selectKeys.includes(event.key);
+            if (selectEvent && this.activeRowIndex !== null) {
+                const rowIndex = this.activeRowIndex + currentPage * ((_a = tableInfo === null || tableInfo === void 0 ? void 0 : tableInfo.pageSize) !== null && _a !== void 0 ? _a : 0);
+                this._rowActive(rows[rowIndex], rowIndex, event);
+                return;
+            }
+            const navigationEvent = this._navigationKeys.includes(event.key);
+            if (navigationEvent) {
+                this._handleNavigationEvent(event, rows, currentPage, tableInfo);
+            }
+        });
+    }
+    unsubscribeFromKeyboardEvents(tableRef) {
+        var _a, _b;
+        if (!((_a = this._tableConfig) === null || _a === void 0 ? void 0 : _a.activateRowOnKeyboardNavigation)) {
+            return;
+        }
+        // only unsubscribe if table is not focused
+        if (tableRef !== document.activeElement) {
+            if ((_b = this._tableConfig) === null || _b === void 0 ? void 0 : _b.activateRowOnHover) {
+                // unset active row
+                this.activateRow(null);
+            }
+            this._unsubscribeFromKeyboardEvents$.next(true);
+        }
+    }
+    _handleNavigationEvent(event, rows, currentPage, tableInfo) {
+        const hasPagination = ((tableInfo === null || tableInfo === void 0 ? void 0 : tableInfo.pageTotal) || 0) > 1 && tableInfo;
+        const lastRowIndex = rows.length - 1;
+        let newIndex = this.activeRowIndex;
+        let indexModifier = 0;
+        if (event.key === 'Home') {
+            this.paginationIndex = 0;
+            this.activateRow(0, event);
+            return;
+        }
+        if (event.key === 'End') {
+            const indexOfLastRecord = hasPagination
+                ? rows.length - (tableInfo.pageTotal - 1) * tableInfo.pageSize - 1
+                : lastRowIndex;
+            if (tableInfo === null || tableInfo === void 0 ? void 0 : tableInfo.pageTotal) {
+                this.paginationIndex = tableInfo.pageTotal - 1;
+            }
+            this.activateRow(indexOfLastRecord, event);
+            return;
+        }
+        if (event.key === 'ArrowDown') {
+            indexModifier = 1;
+        }
+        else if (event.key === 'ArrowUp') {
+            indexModifier = -1;
+        }
+        if (newIndex === null) {
+            newIndex = 0;
+        }
+        else if (newIndex + indexModifier >= 0 &&
+            newIndex + indexModifier <= lastRowIndex) {
+            newIndex = newIndex + indexModifier;
+        }
+        if (hasPagination && (tableInfo === null || tableInfo === void 0 ? void 0 : tableInfo.pageSize)) {
+            const isNotLastPage = currentPage + 1 < tableInfo.pageTotal;
+            const recordsOnLastPage = rows.length - (tableInfo.pageTotal - 1) * tableInfo.pageSize - 1;
+            const maxIndex = isNotLastPage
+                ? (tableInfo === null || tableInfo === void 0 ? void 0 : tableInfo.pageSize) - 1
+                : recordsOnLastPage;
+            if (event.key === 'ArrowLeft' && currentPage > 0) {
+                this.paginationIndex = currentPage - 1;
+                this.activateRow(newIndex, event);
+                return;
+            }
+            else if (event.key === 'ArrowRight' && isNotLastPage) {
+                if (currentPage + 1 === tableInfo.pageTotal - 1 &&
+                    newIndex > recordsOnLastPage) {
+                    this.activateRow(recordsOnLastPage, event);
+                }
+                this.paginationIndex = currentPage + 1;
+                this.activateRow(newIndex, event);
+                return;
+            }
+            if (currentPage > 0 &&
+                indexModifier < 0 &&
+                newIndex + indexModifier <= lastRowIndex &&
+                (this.activeRowIndex || 0) + indexModifier < 0) {
+                // set last row of previous page as active
+                this.activateRow((tableInfo === null || tableInfo === void 0 ? void 0 : tableInfo.pageSize) - 1, event);
+                this.paginationIndex = currentPage - 1;
+                return;
+            }
+            const pageIndex = newIndex % (tableInfo === null || tableInfo === void 0 ? void 0 : tableInfo.pageSize);
+            if (newIndex > maxIndex && currentPage + 1 < tableInfo.pageTotal) {
+                this.paginationIndex = currentPage + 1;
+            }
+            this.activateRow(pageIndex > maxIndex ? maxIndex : pageIndex, event);
+            return;
+        }
+        this.activateRow(newIndex, event);
+    }
+    ngOnDestroy() {
+        this.unsubscribe$.next(true);
+        this.unsubscribe$.complete();
+    }
 }
 CoreComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: CoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CoreComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: CoreComponent, isStandalone: true, selector: "angular-generic-table", inputs: { loading: "loading", paginationIndex: "paginationIndex", pagingInfo: "pagingInfo", search: "search", config: "config", data: "data", sortOrder: "sortOrder" }, outputs: { rowClick: "rowClick", sortOrderChange: "sortOrderChange", rowHover: "rowHover", columnSort: "columnSort", pageChange: "pageChange" }, 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]=\"sortOrder$ | async | sortClass: column.key:'aria'\"\n          [class.gt-sortable]=\"true\"\n          scope=\"col\"\n        >\n          <button\n            *ngIf=\"column.value?.sortable\"\n            [attr.data-sort-order]=\"\n              sortOrder$ | async | sortClass: column.key:'order'\n            \"\n            class=\"gt-sort\"\n            (click)=\"\n              table.isLoading ||\n                !column.value.sortable ||\n                sortByKey(column.key, $event)\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]=\"\n            sortOrder$ | async | sortClass: headerRow.key:'aria'\n          \"\n          ngClass=\"{{ headerRow.value.sortable ? 'sort ' : '' }} {{\n            sortOrder$ | async | sortClass: headerRow.key\n          }} {{ (headerRow.key | dashCase) + '-column' }}\"\n          (click)=\"\n            table.isLoading ||\n              !headerRow.value.sortable ||\n              sortByKey(headerRow.key, $event)\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                [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                [class.gt-no-content]=\"\n                  !calculations.calculated[column.key][calculation]\n                \"\n              >\n                <ng-container\n                  [ngTemplateOutlet]=\"\n                    (table.config.columns || {})[column.key].templateRef\n                      ? templateRef\n                      : (table.config.columns || {})[column.key].transform\n                      ? transformFooter\n                      : rawFooter\n                  \"\n                  [ngTemplateOutletContext]=\"{\n                    value: calculations.calculated[column.key][calculation],\n                    row: calculations.calculated[column.key],\n                    column: calculation,\n                    templateRef: (table.config.columns || {})[column.key]\n                      .templateRef,\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![\n              table.info.lazyLoaded ? 0 : (currentPaginationIndex$ | async) || 0\n            ];\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[\n                    table.info.lazyLoaded\n                      ? 0\n                      : (currentPaginationIndex$ | async) || 0\n                  ]\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[\n                    table.info.lazyLoaded\n                      ? 0\n                      : (currentPaginationIndex$ | async) || 0\n                  ]\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 });
+CoreComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: CoreComponent, isStandalone: true, selector: "angular-generic-table", inputs: { navigationKeys: "navigationKeys", selectKeys: "selectKeys", loading: "loading", paginationIndex: "paginationIndex", pagingInfo: "pagingInfo", customClasses: "customClasses", isRowSelectedFn: "isRowSelectedFn", selection: "selection", rowIdKey: "rowIdKey", generateRowId: "generateRowId", trackRowByFn: "trackRowByFn", search: "search", config: "config", data: "data", sortOrder: "sortOrder" }, outputs: { rowClick: "rowClick", rowSelect: "rowSelect", sortOrderChange: "sortOrderChange", rowActive: "rowActive", columnSort: "columnSort", pageChange: "pageChange" }, 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  [tabindex]=\"(tableConfig$ | async)?.activateRowOnKeyboardNavigation ? 0 : -1\"\n  #tableRef\n  (focus)=\"listenToKeyboardEvents()\"\n  (focusout)=\"unsubscribeFromKeyboardEvents(tableRef)\"\n  (mouseenter)=\"listenToKeyboardEvents()\"\n  (mouseleave)=\"unsubscribeFromKeyboardEvents(tableRef)\"\n>\n  <thead>\n    <tr\n      *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]=\"sortOrder$ | async | sortClass: column.key:'aria'\"\n          [class.gt-sortable]=\"true\"\n          scope=\"col\"\n        >\n          <button\n            *ngIf=\"column.value?.sortable\"\n            [attr.data-sort-order]=\"\n              sortOrder$ | async | sortClass: column.key:'order'\n            \"\n            class=\"gt-sort\"\n            (click)=\"\n              table.isLoading ||\n                !column.value.sortable ||\n                sortByKey(column.key, $event)\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]=\"\n            sortOrder$ | async | sortClass: headerRow.key:'aria'\n          \"\n          ngClass=\"{{ headerRow.value.sortable ? 'sort ' : '' }} {{\n            sortOrder$ | async | sortClass: headerRow.key\n          }} {{ (headerRow.key | dashCase) + '-column' }}\"\n          (click)=\"\n            table.isLoading ||\n              !headerRow.value.sortable ||\n              sortByKey(headerRow.key, $event)\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                [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                [class.gt-no-content]=\"\n                  !calculations.calculated[column.key][calculation]\n                \"\n              >\n                <ng-container\n                  [ngTemplateOutlet]=\"\n                    (table.config.columns || {})[column.key].templateRef\n                      ? templateRef\n                      : (table.config.columns || {})[column.key].transform\n                      ? transformFooter\n                      : rawFooter\n                  \"\n                  [ngTemplateOutletContext]=\"{\n                    value: calculations.calculated[column.key][calculation],\n                    row: calculations.calculated[column.key],\n                    column: calculation,\n                    templateRef: (table.config.columns || {})[column.key]\n                      .templateRef,\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![\n              table.info.lazyLoaded ? 0 : (currentPaginationIndex$ | async) || 0\n            ];\n            trackBy: trackRowByFn;\n            let i = index\n          \"\n          [attr.id]=\"'tableRow_' + i\"\n          (click)=\"table?.config?.rowClick && _rowClick(row, i, $event)\"\n          (mouseenter)=\"\n            table?.config?.activateRowOnHover && _activateRow(row, i, $event)\n          \"\n          (mouseleave)=\"\n            table?.config?.activateRowOnHover &&\n              _activateRow(null, null, $event)\n          \"\n          [ngClass]=\"[\n            !!isRowSelectedFn\n              ? (row\n                | rowSelection\n                  : selection\n                  : isRowSelectedFn\n                  : customClasses.selectedRow)\n              : '',\n            (rowActive$ | async)?.index === i ? customClasses.activeRow : ''\n          ]\"\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[\n                    table.info.lazyLoaded\n                      ? 0\n                      : (currentPaginationIndex$ | async) || 0\n                  ]\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            (mouseenter)=\"\n              table?.config?.activateRowOnHover && _activateRow(row, i, $event)\n            \"\n            (mouseleave)=\"\n              table?.config?.activateRowOnHover &&\n                _activateRow(null, null, $event)\n            \"\n            [ngClass]=\"[\n              !!isRowSelectedFn\n                ? (row\n                  | rowSelection\n                    : selection\n                    : isRowSelectedFn\n                    : customClasses.selectedRow)\n                : '',\n              (rowActive$ | async)?.index === i ? customClasses.activeRow : ''\n            ]\"\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[\n                    table.info.lazyLoaded\n                      ? 0\n                      : (currentPaginationIndex$ | async) || 0\n                  ]\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: RowSelectionPipe, name: "rowSelection" }, { 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: "15.1.1", ngImport: i0, type: CoreComponent, decorators: [{
             type: Component,
             args: [{ selector: 'angular-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
@@ -623,6 +857,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                         KeyValuePipe,
                         SortClassPipe,
                         DashCasePipe,
+                        RowSelectionPipe,
                         AsyncPipe,
                         NgTemplateOutlet,
                         SlicePipe,
@@ -631,13 +866,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                         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]=\"sortOrder$ | async | sortClass: column.key:'aria'\"\n          [class.gt-sortable]=\"true\"\n          scope=\"col\"\n        >\n          <button\n            *ngIf=\"column.value?.sortable\"\n            [attr.data-sort-order]=\"\n              sortOrder$ | async | sortClass: column.key:'order'\n            \"\n            class=\"gt-sort\"\n            (click)=\"\n              table.isLoading ||\n                !column.value.sortable ||\n                sortByKey(column.key, $event)\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]=\"\n            sortOrder$ | async | sortClass: headerRow.key:'aria'\n          \"\n          ngClass=\"{{ headerRow.value.sortable ? 'sort ' : '' }} {{\n            sortOrder$ | async | sortClass: headerRow.key\n          }} {{ (headerRow.key | dashCase) + '-column' }}\"\n          (click)=\"\n            table.isLoading ||\n              !headerRow.value.sortable ||\n              sortByKey(headerRow.key, $event)\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                [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                [class.gt-no-content]=\"\n                  !calculations.calculated[column.key][calculation]\n                \"\n              >\n                <ng-container\n                  [ngTemplateOutlet]=\"\n                    (table.config.columns || {})[column.key].templateRef\n                      ? templateRef\n                      : (table.config.columns || {})[column.key].transform\n                      ? transformFooter\n                      : rawFooter\n                  \"\n                  [ngTemplateOutletContext]=\"{\n                    value: calculations.calculated[column.key][calculation],\n                    row: calculations.calculated[column.key],\n                    column: calculation,\n                    templateRef: (table.config.columns || {})[column.key]\n                      .templateRef,\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![\n              table.info.lazyLoaded ? 0 : (currentPaginationIndex$ | async) || 0\n            ];\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[\n                    table.info.lazyLoaded\n                      ? 0\n                      : (currentPaginationIndex$ | async) || 0\n                  ]\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[\n                    table.info.lazyLoaded\n                      ? 0\n                      : (currentPaginationIndex$ | async) || 0\n                  ]\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: [{
+                    ], 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  [tabindex]=\"(tableConfig$ | async)?.activateRowOnKeyboardNavigation ? 0 : -1\"\n  #tableRef\n  (focus)=\"listenToKeyboardEvents()\"\n  (focusout)=\"unsubscribeFromKeyboardEvents(tableRef)\"\n  (mouseenter)=\"listenToKeyboardEvents()\"\n  (mouseleave)=\"unsubscribeFromKeyboardEvents(tableRef)\"\n>\n  <thead>\n    <tr\n      *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]=\"sortOrder$ | async | sortClass: column.key:'aria'\"\n          [class.gt-sortable]=\"true\"\n          scope=\"col\"\n        >\n          <button\n            *ngIf=\"column.value?.sortable\"\n            [attr.data-sort-order]=\"\n              sortOrder$ | async | sortClass: column.key:'order'\n            \"\n            class=\"gt-sort\"\n            (click)=\"\n              table.isLoading ||\n                !column.value.sortable ||\n                sortByKey(column.key, $event)\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]=\"\n            sortOrder$ | async | sortClass: headerRow.key:'aria'\n          \"\n          ngClass=\"{{ headerRow.value.sortable ? 'sort ' : '' }} {{\n            sortOrder$ | async | sortClass: headerRow.key\n          }} {{ (headerRow.key | dashCase) + '-column' }}\"\n          (click)=\"\n            table.isLoading ||\n              !headerRow.value.sortable ||\n              sortByKey(headerRow.key, $event)\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                [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                [class.gt-no-content]=\"\n                  !calculations.calculated[column.key][calculation]\n                \"\n              >\n                <ng-container\n                  [ngTemplateOutlet]=\"\n                    (table.config.columns || {})[column.key].templateRef\n                      ? templateRef\n                      : (table.config.columns || {})[column.key].transform\n                      ? transformFooter\n                      : rawFooter\n                  \"\n                  [ngTemplateOutletContext]=\"{\n                    value: calculations.calculated[column.key][calculation],\n                    row: calculations.calculated[column.key],\n                    column: calculation,\n                    templateRef: (table.config.columns || {})[column.key]\n                      .templateRef,\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![\n              table.info.lazyLoaded ? 0 : (currentPaginationIndex$ | async) || 0\n            ];\n            trackBy: trackRowByFn;\n            let i = index\n          \"\n          [attr.id]=\"'tableRow_' + i\"\n          (click)=\"table?.config?.rowClick && _rowClick(row, i, $event)\"\n          (mouseenter)=\"\n            table?.config?.activateRowOnHover && _activateRow(row, i, $event)\n          \"\n          (mouseleave)=\"\n            table?.config?.activateRowOnHover &&\n              _activateRow(null, null, $event)\n          \"\n          [ngClass]=\"[\n            !!isRowSelectedFn\n              ? (row\n                | rowSelection\n                  : selection\n                  : isRowSelectedFn\n                  : customClasses.selectedRow)\n              : '',\n            (rowActive$ | async)?.index === i ? customClasses.activeRow : ''\n          ]\"\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[\n                    table.info.lazyLoaded\n                      ? 0\n                      : (currentPaginationIndex$ | async) || 0\n                  ]\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            (mouseenter)=\"\n              table?.config?.activateRowOnHover && _activateRow(row, i, $event)\n            \"\n            (mouseleave)=\"\n              table?.config?.activateRowOnHover &&\n                _activateRow(null, null, $event)\n            \"\n            [ngClass]=\"[\n              !!isRowSelectedFn\n                ? (row\n                  | rowSelection\n                    : selection\n                    : isRowSelectedFn\n                    : customClasses.selectedRow)\n                : '',\n              (rowActive$ | async)?.index === i ? customClasses.activeRow : ''\n            ]\"\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[\n                    table.info.lazyLoaded\n                      ? 0\n                      : (currentPaginationIndex$ | async) || 0\n                  ]\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: { navigationKeys: [{
+                type: Input
+            }], selectKeys: [{
+                type: Input
+            }], loading: [{
                 type: Input
             }], paginationIndex: [{
                 type: Input
             }], pagingInfo: [{
                 type: Input
+            }], customClasses: [{
+                type: Input
+            }], isRowSelectedFn: [{
+                type: Input
+            }], selection: [{
+                type: Input
+            }], rowIdKey: [{
+                type: Input
+            }], generateRowId: [{
+                type: Input
+            }], trackRowByFn: [{
+                type: Input
             }], search: [{
                 type: Input
             }], config: [{
@@ -648,9 +899,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                 type: Input
             }], rowClick: [{
                 type: Output
+            }], rowSelect: [{
+                type: Output
             }], sortOrderChange: [{
                 type: Output
-            }], rowHover: [{
+            }], rowActive: [{
                 type: Output
             }], columnSort: [{
                 type: Output
@@ -790,6 +1043,7 @@ GenericTableCoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         SortClassPipe,
         DashCasePipe,
         HighlightPipe,
+        RowSelectionPipe,
         CapitalCasePipe,
         CapitalCasePipe,
         DynamicPipe,
@@ -806,12 +1060,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                         SortClassPipe,
                         DashCasePipe,
                         HighlightPipe,
+                        RowSelectionPipe,
                         CapitalCasePipe,
                         CapitalCasePipe,
                         DynamicPipe,
                         GtDeltaComponent,
                     ],
                     exports: [CoreComponent, GtDeltaComponent],
+                    declarations: [],
                 }]
         }] });