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

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

@@ -1,8 +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 * 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, pluck } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged, tap, shareReplay, startWith, map, switchMap, withLatestFrom, take, filter, pluck } from 'rxjs/operators';
 
 class CoreService {
     constructor() { }
@@ -144,6 +145,7 @@ let calculate = (data, config) => {
     };
 };
 /** sortOnMultipleKeys
+ * @description Sort data on multiple keys
  * @param {GtSortOrder} keys - array with sort config objects to sort on, data will be sorted according to array order
  * @returns sort function
  */
@@ -160,6 +162,40 @@ const sortOnMultipleKeys = (keys) => {
         return 0;
     };
 };
+/** parseSortOrderParams
+ * @description Convert sort order query param to array with sort config objects
+ * @param sortParams - Query param string where each sort config object is separated by comma and order is indicated by + (ascending) or - (descending), e.g. _'name,-age'_
+ * @returns GtSortOrder - Array with sort config objects
+ */
+const parseSortOrderParams = (sortParams) => {
+    const sortParamsArray = sortParams.split(',');
+    return sortParamsArray.map((sortParam) => {
+        const [key, order] = sortParam.split(':');
+        return {
+            key: key.replace(/^[+-]/, ''),
+            order: order === 'desc' ? 'desc' : 'asc',
+        };
+    });
+};
+/** sortOrderConfigToParam
+ * @description Convert sort config object to string that can be used as query param when sorting is implemented server side
+ * @param sortConfig - Sort config object
+ * @returns string - Query param string where order is indicated by + (ascending) or - (descending), e.g. _'-name'_
+ */
+const sortOrderConfigToParam = (sortConfig) => {
+    const order = sortConfig.order === 'desc' ? '-' : '+';
+    return `${order}${sortConfig.key}`;
+};
+/** sortOrderToParams
+ * @description Convert sort order array to string that can be used as query param when sorting is implemented server side
+ * @param sortOrder - Array with sort config objects
+ * @returns string - Query param string where each sort config object is separated by comma and order is indicated by + (ascending) or - (descending), e.g. _'name,-age'_
+ */
+const sortOrderToParams = (sortOrder) => {
+    return sortOrder
+        .map((sortConfig) => sortOrderConfigToParam(sortConfig))
+        .join(',');
+};
 
 class CapitalCasePipe {
     transform(s) {
@@ -307,11 +343,23 @@ class CoreComponent {
         this._rowHover$ = new ReplaySubject(1);
         this.rowHover = 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._loading$ = new ReplaySubject(1);
         this._sortOrder$ = new BehaviorSubject([]);
         this._searchBy$ = new ReplaySubject(1);
         this.searchBy$ = this._searchBy$.pipe(startWith(''), map((value) => (isObservable(value) ? value : of(value))), switchMap((obs) => obs), shareReplay(1));
+        this._pagingInfo$ = new BehaviorSubject({
+            pageCurrent: null,
+            pageNext: null,
+            pagePrevious: null,
+            pageSize: null,
+            numberOfRecords: null,
+            //recordsAfterFilter: null,
+            //recordsAfterSearch: null,
+            //recordsAll: null,
+        });
         // 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));
@@ -340,11 +388,11 @@ class CoreComponent {
         }), switchMap((obs) => combineLatest([of(obs), this.sortOrder$, this.searchBy$])), map(([table, sortBy, searchBy]) => {
             // create a new array reference and sort new array (prevent mutating existing state)
             table.data = [...table.data];
-            return !sortBy.length || table.config?.disableTableSort
-                ? searchBy
+            return !sortBy?.length || table.config?.disableTableSort
+                ? searchBy && !this.tableInfo?.lazyLoaded
                     ? search(searchBy, false, table.data, table.config)
                     : table.data
-                : searchBy
+                : searchBy && !this.tableInfo?.lazyLoaded
                     ? search(searchBy, false, table.data, table.config)?.sort(sortOnMultipleKeys(sortBy))
                     : table.data?.sort(sortOnMultipleKeys(sortBy));
         }), shareReplay(1));
@@ -352,14 +400,30 @@ class CoreComponent {
         this.table$ = combineLatest([
             this.data$,
             this.tableConfig$,
-        ]).pipe(map(([sorted, config]) => {
+            this._pagingInfo$,
+        ]).pipe(map(([sorted, config, pagingInfo]) => {
+            if (pagingInfo.pageCurrent !== null &&
+                pagingInfo.numberOfRecords !== null &&
+                pagingInfo.pageSize !== null) {
+                return {
+                    data: [sorted],
+                    config,
+                    info: {
+                        lazyLoaded: true,
+                        numberOfRecords: pagingInfo.numberOfRecords,
+                        pageSize: pagingInfo.pageSize,
+                        pageTotal: pagingInfo.pageTotal ??
+                            Math.ceil(pagingInfo.numberOfRecords / pagingInfo.pageSize),
+                    },
+                };
+            }
             // if pagination is disabled...
             if (!config.pagination || config.pagination.length === 0) {
                 // ...return unaltered array
                 return {
                     data: [sorted],
                     config,
-                    info: { records: sorted.length, pageTotal: 1 },
+                    info: { numberOfRecords: sorted.length, pageTotal: 1 },
                 };
             }
             // return record set
@@ -367,19 +431,24 @@ class CoreComponent {
                 data: chunk(sorted, +(config.pagination.length || 0)),
                 config,
                 info: {
-                    records: sorted.length,
+                    numberOfRecords: sorted.length,
                     pageTotal: Math.ceil(sorted.length / +(config.pagination.length || 0)),
                 },
             };
-        }), shareReplay(1));
-        this._currentPage$ = new BehaviorSubject(0);
-        this.currentPage$ = combineLatest([this._currentPage$, this.table$]).pipe(map(([page, table]) => {
+        }), tap((meta) => this._tableInfo$.next(meta.info)), shareReplay(1));
+        this._tableInfo$ = new BehaviorSubject(undefined);
+        this._currentPaginationIndex$ = new BehaviorSubject(0);
+        this.currentPaginationIndex$ = combineLatest([
+            this._currentPaginationIndex$,
+            this.table$,
+        ]).pipe(map(([page, table]) => {
             // determine last page
             const lastPage = Math.ceil(table.info.records /
-                (table.config?.pagination?.length || table.info.records)) - 1;
-            // determine max/min position
+                (table.info.recordLength ??
+                    (table.config?.pagination?.length || table.info.records))) - 1;
+            // determine min/max position
             return +page < 0 ? 0 : +page > lastPage ? lastPage : +page;
-        }), shareReplay(1));
+        }), distinctUntilChanged(), tap((index) => this.pageChange.emit({ index })), shareReplay(1));
         this.colspan$ = this.tableConfig$.pipe(switchMap((config) => config.columns
             ? of(Object.values(config.columns || config.rows || {}).filter((value) => value.hidden !== true).length)
             : this.data$.pipe(map((data) => data.length + 1))), shareReplay(1));
@@ -403,8 +472,17 @@ class CoreComponent {
     set loading(isLoading) {
         this._loading$.next(isLoading);
     }
-    set page(page) {
-        this._currentPage$.next(page);
+    set paginationIndex(pageIndex) {
+        this._currentPaginationIndex$.next(pageIndex);
+    }
+    set pagingInfo(value) {
+        if (value) {
+            this._pagingInfo$.next(value);
+            if (value.pageCurrent !== this._currentPaginationIndex$.getValue() + 1 &&
+                value.pageCurrent !== null) {
+                this.paginationIndex = value.pageCurrent - 1;
+            }
+        }
     }
     set search(string) {
         this._searchBy$.next(string);
@@ -443,12 +521,22 @@ class CoreComponent {
     get loading$() {
         return this._loading$.pipe(startWith(false), map((value) => (isObservable(value) ? value : of(value))), switchMap((obs) => obs), shareReplay(1));
     }
+    /** tableInfo$ - returns observable for table info
+     * @return Observable<TableInfo> */
+    get tableInfo$() {
+        return this._tableInfo$.asObservable().pipe(filter((info) => !!info), shareReplay(1));
+    }
+    /** tableInfo - returns the current table info
+     * @return TableInfo */
+    get tableInfo() {
+        return this._tableInfo$.getValue();
+    }
     /** sortByKey - Sort by key in table row
      * @param key - key to sort by
      * @param { MouseEvent } [$event] - Mouse event triggering sort, if shift key is pressed sort key will be added to already present sort keys
      */
     sortByKey(key, $event) {
-        const shiftKey = $event?.shiftKey;
+        const shiftKey = $event?.shiftKey === true;
         const currentOrder = this._sortOrder$.value;
         let sortOrder = 'asc';
         let newOrder = [];
@@ -496,6 +584,7 @@ class CoreComponent {
             key,
             order: sortOrder,
             currentSortOrder: newOrder,
+            addSortKey: shiftKey,
         };
         // if event is passed to sort function...
         if ($event) {
@@ -504,8 +593,11 @@ class CoreComponent {
         }
         // emit sort event
         this.columnSort.emit(sortEvent);
-        // update sort order
-        this.sortOrder = newOrder;
+        // if table is not lazy loaded (sorting is then handled server-side)...
+        if (!this.tableInfo?.lazyLoaded) {
+            // ...update sort order
+            this.sortOrder = newOrder;
+        }
     }
     nestedValue(object, mapTo, missingValue = null) {
         const levels = mapTo.split('.');
@@ -514,7 +606,7 @@ class CoreComponent {
     }
 }
 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", page: "page", search: "search", config: "config", data: "data", sortOrder: "sortOrder" }, outputs: { rowClick: "rowClick", sortOrderChange: "sortOrderChange", rowHover: "rowHover", columnSort: "columnSort" }, 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![(currentPage$ | async) || 0];\n            let i = index\n          \"\n          [attr.id]=\"'tableRow_' + i\"\n          (click)=\"table?.config?.rowClick && _rowClick(row, i, $event)\"\n          (mouseover)=\"table?.config?.rowHover && _hoverRow(row, i, $event)\"\n          (mouseout)=\"table?.config?.rowHover && _hoverRow(null, null, $event)\"\n          [class.gt-hover]=\"(rowHover$ | async)?.index === i\"\n        >\n          <ng-container\n            *ngFor=\"let column of table.config?.columns | keyvalue: columnOrder\"\n          >\n            <td\n              *ngIf=\"!column.value?.hidden\"\n              ngClass=\"{{ (column.key | dashCase) + '-column' }} {{\n                column.value.class\n              }}\"\n              [attr.data-label]=\"\n                table.config.mobileLayout && column.value.mobileHeader\n                  ? column.value.mobileHeader !== true\n                    ? column.value.mobileHeader\n                    : (column.value.header || column.key | capitalCase)\n                  : null\n              \"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"\n                  (searchBy$ | async) &&\n                  !(table.config.columns || {})[column.key].templateRef\n                    ? highlighted\n                    : (table.config.columns || {})[column.key].templateRef\n                    ? templateRef\n                    : (table.config.columns || {})[column.key].transform\n                    ? transformData\n                    : rawData\n                \"\n                [ngTemplateOutletContext]=\"{\n                  row: row,\n                  column: column,\n                  search: (searchBy$ | async),\n                  transform: (table.config.columns || {})[column.key].transform,\n                  templateRef: (table.config.columns || {})[column.key]\n                    .templateRef,\n                  index: i,\n                  data: table.data[(currentPage$ | async) || 0]\n                }\"\n              ></ng-container>\n            </td>\n          </ng-container>\n        </tr>\n      </ng-container>\n      <ng-container *ngIf=\"table.config.rows\">\n        <ng-container\n          *ngFor=\"\n            let row of table?.config?.rows | keyvalue: columnOrder | slice: 1;\n            let i = index\n          \"\n        >\n          <tr\n            *ngIf=\"!row.value?.hidden\"\n            [attr.id]=\"'tableRow_' + i\"\n            ngClass=\"{{ (row.key | dashCase) + '-row' }}\"\n            (click)=\"table?.config?.rowClick && _rowClick(row, i, $event)\"\n            (mouseover)=\"table?.config?.rowHover && _hoverRow(row, i, $event)\"\n            (mouseout)=\"\n              table?.config?.rowHover && _hoverRow(null, null, $event)\n            \"\n            [class.gt-hover]=\"(rowHover$ | async)?.index === i\"\n          >\n            <th class=\"row-header\" scope=\"row\">\n              {{ row.value.header || row.key | capitalCase }}\n            </th>\n            <td\n              *ngFor=\"let column of (table?.data || [])[0]; let y = index\"\n              ngClass=\"{{ row.value.class }}\"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"\n                  (table.config.rows || {})[row.key].templateRef\n                    ? templateRef\n                    : (table.config.rows || {})[row.key].transform\n                    ? transformData\n                    : rawData\n                \"\n                [ngTemplateOutletContext]=\"{\n                  row: column,\n                  column: row,\n                  transform: (table.config.rows || {})[row.key].transform,\n                  templateRef: (table.config.rows || {})[row.key].templateRef,\n                  index: table.config.rows ? y : i,\n                  data: table.data[(currentPage$ | async) || 0]\n                }\"\n              >\n              </ng-container>\n            </td>\n          </tr>\n        </ng-container>\n      </ng-container>\n    </tbody>\n  </ng-container>\n</ng-template>\n<ng-template #noData>\n  <tbody>\n    <tr>\n      <td class=\"p-0\" [colSpan]=\"colspan$ | async\">\n        <ng-content select=\".table-no-data\"></ng-content>\n      </td>\n    </tr>\n  </tbody>\n</ng-template>\n<ng-template\n  #highlighted\n  let-row=\"row\"\n  let-column=\"column\"\n  let-search=\"search\"\n  let-transform=\"transform\"\n>\n  <div\n    *ngIf=\"!transform\"\n    [innerHTML]=\"row[column.key] | highlight: search\"\n  ></div>\n  <div\n    *ngIf=\"transform\"\n    [innerHTML]=\"\n      row[column.key]\n        | dynamicPipe: transform.pipe:transform?.args\n        | highlight: search\n    \"\n  ></div>\n</ng-template>\n<ng-template #rawData let-row=\"row\" let-column=\"column\">\n  {{ row[column.key] }}\n</ng-template>\n<ng-template\n  #transformData\n  let-row=\"row\"\n  let-column=\"column\"\n  let-transform=\"transform\"\n  let-data=\"data\"\n>\n  {{ row[column.key] | dynamicPipe: transform.pipe:transform?.args }}\n</ng-template>\n<ng-template #transformFooter let-value=\"value\" let-transform=\"transform\">\n  {{\n    (value | dynamicPipe: transform.pipe:transform?.args) ||\n      (tableConfig$ | async)?.footer?.emptyContent\n  }}\n</ng-template>\n<ng-template #rawFooter let-value=\"value\">\n  {{ value || (tableConfig$ | async)?.footer?.emptyContent }}\n</ng-template>\n<ng-template\n  #templateRef\n  let-row=\"row\"\n  let-column=\"column\"\n  let-index=\"index\"\n  let-templateRef=\"templateRef\"\n  let-data=\"data\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"templateRef\"\n    [ngTemplateOutletContext]=\"{\n      row: row,\n      col: column,\n      index: index,\n      data: data\n    }\"\n  ></ng-container>\n</ng-template>\n", dependencies: [{ kind: "pipe", type: CapitalCasePipe, name: "capitalCase" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: SortClassPipe, name: "sortClass" }, { kind: "pipe", type: DashCasePipe, name: "dashCase" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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 });
 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: [
@@ -530,10 +622,12 @@ 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![(currentPage$ | async) || 0];\n            let i = index\n          \"\n          [attr.id]=\"'tableRow_' + i\"\n          (click)=\"table?.config?.rowClick && _rowClick(row, i, $event)\"\n          (mouseover)=\"table?.config?.rowHover && _hoverRow(row, i, $event)\"\n          (mouseout)=\"table?.config?.rowHover && _hoverRow(null, null, $event)\"\n          [class.gt-hover]=\"(rowHover$ | async)?.index === i\"\n        >\n          <ng-container\n            *ngFor=\"let column of table.config?.columns | keyvalue: columnOrder\"\n          >\n            <td\n              *ngIf=\"!column.value?.hidden\"\n              ngClass=\"{{ (column.key | dashCase) + '-column' }} {{\n                column.value.class\n              }}\"\n              [attr.data-label]=\"\n                table.config.mobileLayout && column.value.mobileHeader\n                  ? column.value.mobileHeader !== true\n                    ? column.value.mobileHeader\n                    : (column.value.header || column.key | capitalCase)\n                  : null\n              \"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"\n                  (searchBy$ | async) &&\n                  !(table.config.columns || {})[column.key].templateRef\n                    ? highlighted\n                    : (table.config.columns || {})[column.key].templateRef\n                    ? templateRef\n                    : (table.config.columns || {})[column.key].transform\n                    ? transformData\n                    : rawData\n                \"\n                [ngTemplateOutletContext]=\"{\n                  row: row,\n                  column: column,\n                  search: (searchBy$ | async),\n                  transform: (table.config.columns || {})[column.key].transform,\n                  templateRef: (table.config.columns || {})[column.key]\n                    .templateRef,\n                  index: i,\n                  data: table.data[(currentPage$ | async) || 0]\n                }\"\n              ></ng-container>\n            </td>\n          </ng-container>\n        </tr>\n      </ng-container>\n      <ng-container *ngIf=\"table.config.rows\">\n        <ng-container\n          *ngFor=\"\n            let row of table?.config?.rows | keyvalue: columnOrder | slice: 1;\n            let i = index\n          \"\n        >\n          <tr\n            *ngIf=\"!row.value?.hidden\"\n            [attr.id]=\"'tableRow_' + i\"\n            ngClass=\"{{ (row.key | dashCase) + '-row' }}\"\n            (click)=\"table?.config?.rowClick && _rowClick(row, i, $event)\"\n            (mouseover)=\"table?.config?.rowHover && _hoverRow(row, i, $event)\"\n            (mouseout)=\"\n              table?.config?.rowHover && _hoverRow(null, null, $event)\n            \"\n            [class.gt-hover]=\"(rowHover$ | async)?.index === i\"\n          >\n            <th class=\"row-header\" scope=\"row\">\n              {{ row.value.header || row.key | capitalCase }}\n            </th>\n            <td\n              *ngFor=\"let column of (table?.data || [])[0]; let y = index\"\n              ngClass=\"{{ row.value.class }}\"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"\n                  (table.config.rows || {})[row.key].templateRef\n                    ? templateRef\n                    : (table.config.rows || {})[row.key].transform\n                    ? transformData\n                    : rawData\n                \"\n                [ngTemplateOutletContext]=\"{\n                  row: column,\n                  column: row,\n                  transform: (table.config.rows || {})[row.key].transform,\n                  templateRef: (table.config.rows || {})[row.key].templateRef,\n                  index: table.config.rows ? y : i,\n                  data: table.data[(currentPage$ | async) || 0]\n                }\"\n              >\n              </ng-container>\n            </td>\n          </tr>\n        </ng-container>\n      </ng-container>\n    </tbody>\n  </ng-container>\n</ng-template>\n<ng-template #noData>\n  <tbody>\n    <tr>\n      <td class=\"p-0\" [colSpan]=\"colspan$ | async\">\n        <ng-content select=\".table-no-data\"></ng-content>\n      </td>\n    </tr>\n  </tbody>\n</ng-template>\n<ng-template\n  #highlighted\n  let-row=\"row\"\n  let-column=\"column\"\n  let-search=\"search\"\n  let-transform=\"transform\"\n>\n  <div\n    *ngIf=\"!transform\"\n    [innerHTML]=\"row[column.key] | highlight: search\"\n  ></div>\n  <div\n    *ngIf=\"transform\"\n    [innerHTML]=\"\n      row[column.key]\n        | dynamicPipe: transform.pipe:transform?.args\n        | highlight: search\n    \"\n  ></div>\n</ng-template>\n<ng-template #rawData let-row=\"row\" let-column=\"column\">\n  {{ row[column.key] }}\n</ng-template>\n<ng-template\n  #transformData\n  let-row=\"row\"\n  let-column=\"column\"\n  let-transform=\"transform\"\n  let-data=\"data\"\n>\n  {{ row[column.key] | dynamicPipe: transform.pipe:transform?.args }}\n</ng-template>\n<ng-template #transformFooter let-value=\"value\" let-transform=\"transform\">\n  {{\n    (value | dynamicPipe: transform.pipe:transform?.args) ||\n      (tableConfig$ | async)?.footer?.emptyContent\n  }}\n</ng-template>\n<ng-template #rawFooter let-value=\"value\">\n  {{ value || (tableConfig$ | async)?.footer?.emptyContent }}\n</ng-template>\n<ng-template\n  #templateRef\n  let-row=\"row\"\n  let-column=\"column\"\n  let-index=\"index\"\n  let-templateRef=\"templateRef\"\n  let-data=\"data\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"templateRef\"\n    [ngTemplateOutletContext]=\"{\n      row: row,\n      col: column,\n      index: index,\n      data: data\n    }\"\n  ></ng-container>\n</ng-template>\n" }]
+                    ], 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: [{
                 type: Input
-            }], page: [{
+            }], paginationIndex: [{
+                type: Input
+            }], pagingInfo: [{
                 type: Input
             }], search: [{
                 type: Input
@@ -546,12 +640,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
             }], rowClick: [{
                 type: Output
             }], sortOrderChange: [{
-                type: Output,
-                args: ['sortOrderChange']
+                type: Output
             }], rowHover: [{
                 type: Output
             }], columnSort: [{
                 type: Output
+            }], pageChange: [{
+                type: Output
             }] } });
 
 class GtDeltaComponent {
@@ -712,7 +807,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
 
 class PaginationComponent {
     constructor() {
-        this.table$ = new ReplaySubject(1);
+        this._table$ = new ReplaySubject(1);
         this._ariaLabels = {
             nav: 'Table pagination',
             button: 'Go to page ',
@@ -723,58 +818,111 @@ class PaginationComponent {
             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)));
+        /** paginationListItems$ - observable for page numbers to show based on number of pages and current position  */
+        this.paginationListItems$ = this._table$.pipe(switchMap((core) => combineLatest([
+            core?.table$.pipe(pluck('info')),
+            core?.currentPaginationIndex$,
+        ])), map(([info, currentPage]) => this._generateList(info.pageTotal, currentPage)), shareReplay(1));
+    }
+    get pagingInfo() {
+        return (this._pagingInfo || {
+            pageNext: null,
+            pageCurrent: null,
+            pagePrevious: null,
+            pageSize: null,
+            numberOfRecords: null,
+            pageTotal: null,
+        });
+    }
+    /** pagingInfo
+     * @description when provided, pagination component will use this information to render pagination instead of data from table. Use this option when pagination is handled by backend (server side).
+     * @type info - metadata for pagination component
+     */
+    set pagingInfo(info) {
+        this._pagingInfo = info;
     }
     get paginationLength() {
         return this._paginationLength;
     }
-    set paginationLength(value) {
-        this._paginationLength = +value;
+    /** paginationLength
+     * @description number of buttons to show in pagination
+     * @type length - number of buttons to show. Defaults to: `5`
+     */
+    set paginationLength(length) {
+        this._paginationLength = +length;
     }
     get classes() {
         return this._classes;
     }
-    set classes(value) {
-        this._classes = value;
+    /** classes
+     * @description classes that should be used within pagination component for different elements
+     * @type classes - classes to be used. Defaults to: `{
+     *     ul: 'pagination',
+     *     li: 'page-item',
+     *     button: 'page-link',
+     *   }`
+     */
+    set classes(classes) {
+        this._classes = classes;
     }
     get ariaLabels() {
         return this._ariaLabels;
     }
-    set ariaLabels(value) {
-        this._ariaLabels = value;
+    /** ariaLabels
+     * @description aria labels that describe pagination component
+     * @type labels - aria labels for pagination. Defaults to: `{
+     *     nav: 'Table pagination',
+     *     button: 'Go to page ',
+     *   }`
+     */
+    set ariaLabels(labels) {
+        this._ariaLabels = labels;
     }
     get table() {
         return this._table;
     }
-    set table(value) {
-        this._table = value;
-        this.table$.next(value);
-    }
-    generateList(pages, currentPosition) {
+    /** table
+     * @description table component to which pagination is attached
+     * @type tableRef - table component
+     */
+    set table(tableRef) {
+        this._table = tableRef;
+        this._table$.next(tableRef);
+    }
+    /** generate list - generate an array with page numbers to show based on number of pages and current position
+     * @param numberOfPages number of pages to show
+     * @param currentPosition current position (page index) being shown in table
+     * @returns Array<number> array of page numbers to show
+     */
+    _generateList(numberOfPages, currentPosition) {
         const middle = Math.floor(this.paginationLength / 2);
-        const length = pages < this.paginationLength ? pages : this.paginationLength;
+        const length = numberOfPages < this.paginationLength
+            ? numberOfPages
+            : this.paginationLength;
         return Array.from({ length }, (_, i) => {
             if (i === 0) {
                 return 1;
             }
-            else if (pages < this.paginationLength) {
+            else if (numberOfPages < this.paginationLength) {
                 return i + 1;
             }
             else if (i + 1 === length) {
-                return pages;
+                return numberOfPages;
             }
-            else if (currentPosition > middle && currentPosition < pages - middle) {
+            else if (currentPosition > middle &&
+                currentPosition < numberOfPages - middle) {
                 return i + currentPosition - (middle - 1);
             }
             else if (currentPosition > middle &&
-                currentPosition < pages - (middle - 1)) {
+                currentPosition < numberOfPages - (middle - 1)) {
                 return i + currentPosition - middle;
             }
             else if (currentPosition > middle &&
-                currentPosition === pages - (middle - 1)) {
+                currentPosition === numberOfPages - (middle - 1)) {
                 return i + currentPosition - (middle + 1);
             }
-            else if (currentPosition > middle && currentPosition === pages - 1) {
+            else if (currentPosition > middle &&
+                currentPosition === numberOfPages - 1) {
                 return i + currentPosition - (middle + 2);
             }
             else {
@@ -782,18 +930,23 @@ class PaginationComponent {
             }
         });
     }
-    goto(page) {
+    /** go to page
+     * @param index - page index to go to
+     */
+    goToPage(index) {
         if (this.table) {
-            this.table.page = page - 1;
+            this.table.paginationIndex = index - 1;
         }
     }
 }
 PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: PaginationComponent, isStandalone: true, selector: "angular-generic-table-pagination", inputs: { paginationLength: "paginationLength", classes: "classes", ariaLabels: "ariaLabels", table: "table" }, ngImport: i0, template: "<ng-container\n  *ngIf=\"{\n    links: pagination$ | async,\n    currentPosition: table?.currentPage$ | async\n  } as pagination\"\n>\n  <nav\n    *ngIf=\"pagination.links && pagination.links.length > 1\"\n    role=\"navigation\"\n    [attr.aria-label]=\"ariaLabels.nav\"\n    class=\"gt-pagination\"\n    [class]=\"classes.nav\"\n  >\n    <ul [class]=\"classes.ul\">\n      <ng-container\n        *ngFor=\"\n          let position of pagination!.links;\n          let i = index;\n          let last = last\n        \"\n      >\n        <li\n          [class]=\"classes.li\"\n          [class.active]=\"position === (pagination!.currentPosition || 0) + 1\"\n        >\n          <button\n            [class]=\"classes.button\"\n            [attr.aria-label]=\"ariaLabels.button + position\"\n            (click)=\"goto(position)\"\n          >\n            {{ position }}\n          </button>\n        </li>\n        <li\n          [class]=\"classes.li\"\n          class=\"gt-ellipsis\"\n          *ngIf=\"position + 1 !== pagination!.links![i + 1] && !last\"\n        >\n          <button [class]=\"classes.button\" disabled tabindex=\"-1\"></button>\n        </li>\n      </ng-container>\n    </ul>\n  </nav>\n</ng-container>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: PaginationComponent, isStandalone: true, selector: "angular-generic-table-pagination", inputs: { pagingInfo: "pagingInfo", paginationLength: "paginationLength", classes: "classes", ariaLabels: "ariaLabels", table: "table" }, ngImport: i0, template: "<ng-container\n  *ngIf=\"{\n    links: paginationListItems$ | async,\n    currentPosition: table?.currentPaginationIndex$ | 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)=\"goToPage(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: "ngmodule", type: CommonModule }, { 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: "15.1.1", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'angular-generic-table-pagination', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [AsyncPipe, NgIf, NgForOf], template: "<ng-container\n  *ngIf=\"{\n    links: pagination$ | async,\n    currentPosition: table?.currentPage$ | async\n  } as pagination\"\n>\n  <nav\n    *ngIf=\"pagination.links && pagination.links.length > 1\"\n    role=\"navigation\"\n    [attr.aria-label]=\"ariaLabels.nav\"\n    class=\"gt-pagination\"\n    [class]=\"classes.nav\"\n  >\n    <ul [class]=\"classes.ul\">\n      <ng-container\n        *ngFor=\"\n          let position of pagination!.links;\n          let i = index;\n          let last = last\n        \"\n      >\n        <li\n          [class]=\"classes.li\"\n          [class.active]=\"position === (pagination!.currentPosition || 0) + 1\"\n        >\n          <button\n            [class]=\"classes.button\"\n            [attr.aria-label]=\"ariaLabels.button + position\"\n            (click)=\"goto(position)\"\n          >\n            {{ position }}\n          </button>\n        </li>\n        <li\n          [class]=\"classes.li\"\n          class=\"gt-ellipsis\"\n          *ngIf=\"position + 1 !== pagination!.links![i + 1] && !last\"\n        >\n          <button [class]=\"classes.button\" disabled tabindex=\"-1\"></button>\n        </li>\n      </ng-container>\n    </ul>\n  </nav>\n</ng-container>\n" }]
-        }], propDecorators: { paginationLength: [{
+            args: [{ selector: 'angular-generic-table-pagination', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], template: "<ng-container\n  *ngIf=\"{\n    links: paginationListItems$ | async,\n    currentPosition: table?.currentPaginationIndex$ | 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)=\"goToPage(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: { pagingInfo: [{
+                type: Input
+            }], paginationLength: [{
                 type: Input
             }], classes: [{
                 type: Input
@@ -824,5 +977,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CoreComponent, CoreService, GenericTableCoreModule, GenericTablePaginationModule, GtDeltaComponent, PaginationComponent };
+export { CapitalCasePipe, CoreComponent, CoreService, DashCasePipe, DynamicPipe, GenericTableCoreModule, GenericTablePaginationModule, GtDeltaComponent, HighlightPipe, PaginationComponent, SortClassPipe, calculate, capitalize, chunk, dashed, parseSortOrderParams, search, sortOnMultipleKeys, sortOrderConfigToParam, sortOrderToParams };
 //# sourceMappingURL=angular-generic-table-core.mjs.map