@angular-generic-table/core 5.0.0-rc.1 → 5.0.0-rc.12

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

@@ -0,0 +1,603 @@
+import * as i0 from '@angular/core';
+import { Injectable, Pipe, Injector, Component, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
+import { ReplaySubject, Subject, isObservable, of, combineLatest, EMPTY, BehaviorSubject } from 'rxjs';
+import { startWith, map, switchMap, shareReplay, withLatestFrom, pluck } from 'rxjs/operators';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+class CoreService {
+    constructor() { }
+}
+CoreService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+CoreService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CoreService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CoreService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return []; } });
+
+var Order;
+(function (Order) {
+    Order["ASC"] = "asc";
+    Order["DESC"] = "desc";
+})(Order || (Order = {}));
+
+let dashed;
+dashed = (s) => s.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
+let capitalize;
+capitalize = (s) => (s.charAt(0).toUpperCase() + s.slice(1))
+    .replace(/_/g, ' ')
+    .replace(/([A-Z][a-z]+)/g, ' $1')
+    .replace(/([A-Z]{2,})/g, ' $1')
+    .replace(/\s{2,}/g, ' ')
+    .trim();
+let chunk;
+chunk = (array, chunkSize) => {
+    if (chunkSize < 0) {
+        throw new Error('Invalid chunk size');
+    }
+    if (chunkSize === 0 && !chunkSize) {
+        return [array];
+    }
+    const CHUNK = [];
+    for (let i = 0, len = array.length; i < len; i += chunkSize) {
+        CHUNK.push(array.slice(i, i + chunkSize));
+    }
+    return CHUNK;
+};
+let search;
+search = (text, caseSensitive, data, config) => {
+    if (config.columns) {
+        const searchColumns = Object.keys(config.columns).filter(
+        // @ts-ignore
+        (key) => config.columns &&
+            !config.columns[key]?.hidden &&
+            config.columns[key]?.search !== false);
+        const FILTERED = [];
+        for (let i = 0; i < data.length; i++) {
+            const row = data[i];
+            const match = Object.entries(row)
+                .filter(([key, value]) => searchColumns.indexOf(key) !== -1)
+                .reduce((acc, [key, value], index) => {
+                return (acc +
+                    (index === 0 ? '' : ' ? ') +
+                    (caseSensitive ? value + '' : (value + '').toLowerCase()));
+            }, '')
+                .indexOf(text) !== -1;
+            if (match) {
+                FILTERED[FILTERED.length] = row;
+            }
+        }
+        return FILTERED;
+    }
+    else {
+        return data;
+    }
+};
+
+class DashCasePipe {
+    transform(s) {
+        return dashed(s);
+    }
+}
+DashCasePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DashCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+DashCasePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DashCasePipe, name: "dashCase" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DashCasePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'dashCase',
+                }]
+        }] });
+
+class SortClassPipe {
+    transform(selection, property, aria = false) {
+        return selection?.sortBy === property
+            ? !aria
+                ? 'gt-sort-' + selection.sortByOrder
+                : selection.sortByOrder + 'ending'
+            : !aria
+                ? ''
+                : null;
+    }
+}
+SortClassPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+SortClassPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortClassPipe, name: "sortClass" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SortClassPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'sortClass',
+                }]
+        }] });
+
+class CapitalCasePipe {
+    transform(s) {
+        return capitalize(s);
+    }
+}
+CapitalCasePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CapitalCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+CapitalCasePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CapitalCasePipe, name: "capitalCase" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CapitalCasePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'capitalCase',
+                }]
+        }] });
+
+class HighlightPipe {
+    transform(text, searchTerm) {
+        if (!searchTerm) {
+            return text;
+        }
+        const haystackAlwaysString = text + '';
+        let highlightedText = haystackAlwaysString; // fallback
+        let searchPattern;
+        try {
+            searchPattern = new RegExp('(' +
+                // @ts-ignore
+                searchTerm
+                    .toLowerCase()
+                    .match(/".*?"|[^ ]+/g) // extract words
+                    .map((needle) => needle.replace(/"(.*?)"/, '$1') // strip away '"'
+                )
+                    .join('|') + // combine words
+                ')', 'ig');
+        }
+        catch (error) {
+            return highlightedText;
+        }
+        const containsTagPattern = /(<.*?>)(.*)(<\/.*?>)/gi;
+        const containsTagMatches = containsTagPattern.exec(haystackAlwaysString);
+        if (containsTagMatches) {
+            // tag exists in haystack
+            highlightedText =
+                containsTagMatches[1] +
+                    containsTagMatches[2].replace(searchPattern, '<span class="gt-highlight-search">$1</span>') +
+                    containsTagMatches[3];
+        }
+        else {
+            highlightedText = haystackAlwaysString.replace(searchPattern, '<span class="gt-highlight-search">$1</span>');
+        }
+        return highlightedText;
+    }
+}
+HighlightPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+HighlightPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HighlightPipe, name: "highlight" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HighlightPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'highlight',
+                }]
+        }] });
+
+class DynamicPipe {
+    constructor(injector) {
+        this.injector = injector;
+    }
+    transform(value, requiredPipe, pipeArgs) {
+        const injector = Injector.create({
+            name: 'DynamicPipe',
+            parent: this.injector,
+            providers: [{ provide: requiredPipe }],
+        });
+        const pipe = injector.get(requiredPipe);
+        return pipe.transform(value, ...(pipeArgs || []));
+    }
+}
+DynamicPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DynamicPipe, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Pipe });
+DynamicPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DynamicPipe, name: "dynamicPipe" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DynamicPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'dynamicPipe',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
+
+class CoreComponent {
+    constructor() {
+        this._loading$ = new ReplaySubject(1);
+        this.sortBy$ = new Subject();
+        // tslint:disable-next-line:variable-name
+        this._searchBy$ = new ReplaySubject(1);
+        this.searchBy$ = this._searchBy$.pipe(startWith(''), map((value) => (isObservable(value) ? value : of(value))), switchMap((obs) => obs), shareReplay(1));
+        // tslint:disable-next-line:variable-name
+        this._tableConfig$ = new ReplaySubject(1);
+        this.tableConfig$ = this._tableConfig$.pipe(map((value) => (isObservable(value) ? value : of(value))), switchMap((obs) => obs), shareReplay(1));
+        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...
+            if ((config.columns &&
+                !!Object.values(config.columns).find((column) => !!column.mapTo)) ||
+                (config.rows &&
+                    !!Object.values(config.rows).find((column) => !!column.mapTo))) {
+                // ...map data to new keys on row...
+                data = data.map((row) => {
+                    const newKeys = Object.entries(config.columns || config.rows || [])
+                        .filter(([key, value]) => !!value.mapTo) // add keys for columns with mapTo config...
+                        .reduce((previousValue, currentValue) => ({
+                        ...previousValue,
+                        // tslint:disable-next-line:no-non-null-assertion
+                        [currentValue[0]]: this.nestedValue(row, currentValue[1].mapTo.path, currentValue[1].mapTo?.missingValue),
+                    }), {});
+                    return { ...row, ...newKeys };
+                });
+            }
+            return { data, config };
+        }), switchMap((obs) => combineLatest([
+            of(obs),
+            this.sortBy$.pipe(startWith(EMPTY)),
+            this.searchBy$,
+        ])), map(([table, sortBy, searchBy]) => {
+            // create a new array reference and sort new array (prevent mutating existing state)
+            table.data = [...table.data];
+            return !sortBy
+                ? searchBy
+                    ? search(searchBy, false, table.data, table.config)
+                    : table.data
+                : (searchBy
+                    ? search(searchBy, false, table.data, table.config)
+                    : table.data)?.sort((a, b) => {
+                    // TODO: improve logic
+                    const typed = sortBy;
+                    return a[typed.sortBy] > b[typed.sortBy]
+                        ? typed.sortByOrder === Order.ASC
+                            ? 1
+                            : -1
+                        : b[typed.sortBy] > a[typed.sortBy]
+                            ? typed.sortByOrder === Order.ASC
+                                ? -1
+                                : 1
+                            : 0;
+                });
+        }), shareReplay(1));
+        this.table$ = combineLatest([
+            this.data$,
+            this.tableConfig$,
+        ]).pipe(map(([sorted, config]) => {
+            // if pagination is disabled...
+            if (!config.pagination || config.pagination.length === 0) {
+                // ...return unaltered array
+                return {
+                    data: [sorted],
+                    config,
+                    info: { records: sorted.length, pageTotal: 1 },
+                };
+            }
+            // return record set
+            return {
+                data: chunk(sorted, +(config.pagination.length || 0)),
+                config,
+                info: {
+                    records: 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]) => {
+            // determine last page
+            const lastPage = Math.ceil(table.info.records /
+                (table.config?.pagination?.length || table.info.records)) - 1;
+            // determine max/min position
+            return +page < 0 ? 0 : +page > lastPage ? lastPage : +page;
+        }), shareReplay(1));
+        this.colspan$ = this.tableConfig$.pipe(switchMap((config) => config.columns
+            ? of(Object.values(config.columns || config.rows || {}).filter((value) => value.hidden !== true).length)
+            : this.data$.pipe(map((data) => data.length + 1))));
+        this.columnOrder = (a, b) => {
+            return (a.value.order || 0) - (b.value.order || 0);
+        };
+    }
+    set loading(isLoading) {
+        this._loading$.next(isLoading);
+    }
+    set page(page) {
+        this._currentPage$.next(page);
+    }
+    set search(string) {
+        this._searchBy$.next(string);
+    }
+    set config(config) {
+        this._tableConfig$.next(config);
+    }
+    set data(data) {
+        this._data$.next(data);
+    }
+    get loading$() {
+        return this._loading$.pipe(startWith(false), map((value) => (isObservable(value) ? value : of(value))), switchMap((obs) => obs), shareReplay(1));
+    }
+    sort(property) {
+        const newSortOrder = this._sortBy?.sortBy !== property ||
+            this._sortBy?.sortByOrder === Order.DESC ||
+            !this._sortBy.sortByOrder
+            ? Order.ASC
+            : Order.DESC;
+        const newSortBy = {
+            sortBy: property,
+            sortByOrder: newSortOrder,
+        };
+        this.sortBy$.next(newSortBy);
+        this._sortBy = newSortBy;
+    }
+    nestedValue(object, mapTo, missingValue = null) {
+        const levels = mapTo.split('.');
+        return levels.reduce((previousValue, currentValue, index) => previousValue[currentValue] ||
+            (index === levels.length - 1 ? missingValue : {}), object);
+    }
+}
+CoreComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CoreComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CoreComponent, selector: "angular-generic-table", inputs: { loading: "loading", page: "page", search: "search", config: "config", data: "data" }, ngImport: i0, template: "<table\n  [ngClass]=\"(tableConfig$ | async)?.class || 'table'\"\n  [class.table-mobile]=\"(tableConfig$ | async)?.mobileLayout\"\n  [class.table-horizontal]=\"(tableConfig$ | async)?.rows\"\n  [class.table-loading]=\"loading$ | async\"\n  [class.gt-sticky-row-header]=\"\n    (tableConfig$ | async)?.stickyHeaders?.row && (tableConfig$ | async)?.rows\n  \"\n  [class.gt-sticky-column-header]=\"\n    (tableConfig$ | async)?.stickyHeaders?.column\n  \"\n  [attr.aria-busy]=\"(loading$ | async) === true ? true : null\"\n>\n  <thead>\n    <tr\n      *ngIf=\"{\n        config: (tableConfig$ | async)!,\n        isLoading: loading$ | async\n      } as table\"\n    >\n      <ng-container\n        *ngFor=\"let column of table?.config?.columns | keyvalue: columnOrder\"\n      >\n        <th\n          *ngIf=\"!column.value?.hidden\"\n          ngClass=\"{{ (column.key | dashCase) + '-column' }} {{\n            column.value.class\n          }}\"\n          [class.disabled]=\"table.isLoading\"\n          [attr.aria-sort]=\"sortBy$ | async | sortClass: column.key:true\"\n          [class.gt-sortable]=\"true\"\n          scope=\"col\"\n        >\n          <button\n            *ngIf=\"column.value?.sortable\"\n            class=\"gt-sort\"\n            (click)=\"\n              table.isLoading || !column.value?.sortable || sort(column.key)\n            \"\n          >\n            <span *ngIf=\"column.value?.header !== false\">{{\n              column.value?.header || column.key | capitalCase\n            }}</span>\n          </button>\n          <span\n            *ngIf=\"!column.value?.sortable && column.value?.header !== false\"\n            >{{ column.value?.header || column.key | capitalCase }}</span\n          >\n        </th>\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          ((table?.config?.rows | keyvalue: columnOrder) || [])[0] as headerRow\n        \"\n      >\n        <th\n          class=\"row-header\"\n          [attr.aria-sort]=\"sortBy$ | async | sortClass: headerRow.key:true\"\n          ngClass=\"{{ headerRow.value?.sortable ? 'sort ' : '' }} {{\n            sortBy$ | async | sortClass: headerRow.key\n          }} {{ (headerRow.key | dashCase) + '-column' }}\"\n          (click)=\"\n            table.isLoading || !headerRow.value?.sortable || sort(headerRow.key)\n          \"\n          scope=\"col\"\n        >\n          <ng-container *ngIf=\"headerRow?.value?.header !== false\">{{\n            headerRow?.value?.header || headerRow.key | capitalCase\n          }}</ng-container>\n        </th>\n        <th\n          *ngFor=\"let column of ((table$ | async)?.data || [])[0]\"\n          ngClass=\"{{ headerRow.value?.class }}\"\n        >\n          <ng-container\n            [ngTemplateOutlet]=\"\n              (table.config?.rows || {})[headerRow.key].templateRef\n                ? templateRef\n                : (table.config?.rows || {})[headerRow.key].transform\n                ? transformData\n                : rawData\n            \"\n            [ngTemplateOutletContext]=\"{\n              row: column,\n              column: headerRow,\n              transform: (table.config?.rows || {})[headerRow.key].transform,\n              templateRef: (table.config?.rows || {})[headerRow.key]\n                .templateRef,\n              index: 0\n            }\"\n          >\n          </ng-container>\n        </th>\n      </ng-container>\n    </tr>\n  </thead>\n  <tbody *ngIf=\"loading$ | async; else tableContent\">\n    <tr>\n      <td class=\"p-0\" [colSpan]=\"colspan$ | async\">\n        <ng-content select=\".table-loading\"></ng-content>\n      </td>\n    </tr>\n  </tbody>\n</table>\n<ng-template #tableContent>\n  <ng-container *ngIf=\"(table$ | async)! as table\">\n    <tbody *ngIf=\"(table!.data![0] || table!.data!).length > 0; else noData\">\n      <ng-container *ngIf=\"table.config.columns\">\n        <tr\n          *ngFor=\"\n            let row of table!.data![(currentPage$ | async) || 0];\n            let i = index\n          \"\n          [attr.id]=\"'tableRow_' + i\"\n        >\n          <ng-container\n            *ngFor=\"let column of table.config?.columns | keyvalue: columnOrder\"\n          >\n            <td\n              *ngIf=\"!column.value?.hidden\"\n              ngClass=\"{{ (column.key | dashCase) + '-column' }} {{\n                column.value?.class\n              }}\"\n              [attr.data-label]=\"\n                table.config?.mobileLayout && column.value?.mobileHeader\n                  ? column.value?.mobileHeader !== true\n                    ? column.value?.mobileHeader\n                    : (column.value?.header || column.key | capitalCase)\n                  : null\n              \"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"\n                  (searchBy$ | async) &&\n                  !(table.config?.columns || {})[column.key].templateRef\n                    ? highlighted\n                    : (table.config?.columns || {})[column.key].templateRef\n                    ? templateRef\n                    : (table.config?.columns || {})[column.key].transform\n                    ? transformData\n                    : rawData\n                \"\n                [ngTemplateOutletContext]=\"{\n                  row: row,\n                  column: column,\n                  search: (searchBy$ | async),\n                  transform: (table.config?.columns || {})[column.key]\n                    .transform,\n                  templateRef: (table.config?.columns || {})[column.key]\n                    .templateRef,\n                  index: i,\n                  data: table.data[(currentPage$ | async) || 0]\n                }\"\n              ></ng-container>\n            </td>\n          </ng-container>\n        </tr>\n      </ng-container>\n      <ng-container *ngIf=\"table.config.rows\">\n        <ng-container\n          *ngFor=\"\n            let row of table?.config?.rows | keyvalue: columnOrder | slice: 1;\n            let i = index\n          \"\n        >\n          <tr\n            *ngIf=\"!row.value?.hidden\"\n            [attr.id]=\"'tableRow_' + i\"\n            ngClass=\"{{ (row.key | dashCase) + '-row' }}\"\n          >\n            <th class=\"row-header\" scope=\"row\">\n              {{ row.value?.header || row.key | capitalCase }}\n            </th>\n            <td\n              *ngFor=\"let column of (table?.data || [])[0]; let y = index\"\n              ngClass=\"{{ row.value?.class }}\"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"\n                  (table.config?.rows || {})[row.key].templateRef\n                    ? templateRef\n                    : (table.config?.rows || {})[row.key].transform\n                    ? transformData\n                    : rawData\n                \"\n                [ngTemplateOutletContext]=\"{\n                  row: column,\n                  column: row,\n                  transform: (table.config?.rows || {})[row.key].transform,\n                  templateRef: (table.config?.rows || {})[row.key].templateRef,\n                  index: table.config?.rows ? y : i,\n                  data: table.data[(currentPage$ | async) || 0]\n                }\"\n              >\n              </ng-container>\n            </td>\n          </tr>\n        </ng-container>\n      </ng-container>\n    </tbody>\n  </ng-container>\n</ng-template>\n<ng-template #noData>\n  <tbody>\n    <tr>\n      <td class=\"p-0\" [colSpan]=\"colspan$ | async\">\n        <ng-content select=\".table-no-data\"></ng-content>\n      </td>\n    </tr>\n  </tbody>\n</ng-template>\n<ng-template #highlighted let-row=\"row\" let-column=\"column\" let-search=\"search\">\n  <div [innerHTML]=\"row[column.key] | highlight: search\"></div>\n</ng-template>\n<ng-template #rawData let-row=\"row\" let-column=\"column\">\n  {{ row[column.key] }}\n</ng-template>\n<ng-template\n  #transformData\n  let-row=\"row\"\n  let-column=\"column\"\n  let-transform=\"transform\"\n  let-data=\"data\"\n>\n  {{ row[column.key] | dynamicPipe: transform.pipe:transform?.args }}\n</ng-template>\n<ng-template\n  #templateRef\n  let-row=\"row\"\n  let-column=\"column\"\n  let-index=\"index\"\n  let-templateRef=\"templateRef\"\n  let-data=\"data\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"templateRef\"\n    [ngTemplateOutletContext]=\"{\n      row: row,\n      col: column,\n      index: index,\n      data: data\n    }\"\n  ></ng-container>\n</ng-template>\n", directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i1.AsyncPipe, "keyvalue": i1.KeyValuePipe, "dashCase": DashCasePipe, "sortClass": SortClassPipe, "capitalCase": CapitalCasePipe, "slice": i1.SlicePipe, "highlight": HighlightPipe, "dynamicPipe": DynamicPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CoreComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'angular-generic-table', styles: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<table\n  [ngClass]=\"(tableConfig$ | async)?.class || 'table'\"\n  [class.table-mobile]=\"(tableConfig$ | async)?.mobileLayout\"\n  [class.table-horizontal]=\"(tableConfig$ | async)?.rows\"\n  [class.table-loading]=\"loading$ | async\"\n  [class.gt-sticky-row-header]=\"\n    (tableConfig$ | async)?.stickyHeaders?.row && (tableConfig$ | async)?.rows\n  \"\n  [class.gt-sticky-column-header]=\"\n    (tableConfig$ | async)?.stickyHeaders?.column\n  \"\n  [attr.aria-busy]=\"(loading$ | async) === true ? true : null\"\n>\n  <thead>\n    <tr\n      *ngIf=\"{\n        config: (tableConfig$ | async)!,\n        isLoading: loading$ | async\n      } as table\"\n    >\n      <ng-container\n        *ngFor=\"let column of table?.config?.columns | keyvalue: columnOrder\"\n      >\n        <th\n          *ngIf=\"!column.value?.hidden\"\n          ngClass=\"{{ (column.key | dashCase) + '-column' }} {{\n            column.value.class\n          }}\"\n          [class.disabled]=\"table.isLoading\"\n          [attr.aria-sort]=\"sortBy$ | async | sortClass: column.key:true\"\n          [class.gt-sortable]=\"true\"\n          scope=\"col\"\n        >\n          <button\n            *ngIf=\"column.value?.sortable\"\n            class=\"gt-sort\"\n            (click)=\"\n              table.isLoading || !column.value?.sortable || sort(column.key)\n            \"\n          >\n            <span *ngIf=\"column.value?.header !== false\">{{\n              column.value?.header || column.key | capitalCase\n            }}</span>\n          </button>\n          <span\n            *ngIf=\"!column.value?.sortable && column.value?.header !== false\"\n            >{{ column.value?.header || column.key | capitalCase }}</span\n          >\n        </th>\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          ((table?.config?.rows | keyvalue: columnOrder) || [])[0] as headerRow\n        \"\n      >\n        <th\n          class=\"row-header\"\n          [attr.aria-sort]=\"sortBy$ | async | sortClass: headerRow.key:true\"\n          ngClass=\"{{ headerRow.value?.sortable ? 'sort ' : '' }} {{\n            sortBy$ | async | sortClass: headerRow.key\n          }} {{ (headerRow.key | dashCase) + '-column' }}\"\n          (click)=\"\n            table.isLoading || !headerRow.value?.sortable || sort(headerRow.key)\n          \"\n          scope=\"col\"\n        >\n          <ng-container *ngIf=\"headerRow?.value?.header !== false\">{{\n            headerRow?.value?.header || headerRow.key | capitalCase\n          }}</ng-container>\n        </th>\n        <th\n          *ngFor=\"let column of ((table$ | async)?.data || [])[0]\"\n          ngClass=\"{{ headerRow.value?.class }}\"\n        >\n          <ng-container\n            [ngTemplateOutlet]=\"\n              (table.config?.rows || {})[headerRow.key].templateRef\n                ? templateRef\n                : (table.config?.rows || {})[headerRow.key].transform\n                ? transformData\n                : rawData\n            \"\n            [ngTemplateOutletContext]=\"{\n              row: column,\n              column: headerRow,\n              transform: (table.config?.rows || {})[headerRow.key].transform,\n              templateRef: (table.config?.rows || {})[headerRow.key]\n                .templateRef,\n              index: 0\n            }\"\n          >\n          </ng-container>\n        </th>\n      </ng-container>\n    </tr>\n  </thead>\n  <tbody *ngIf=\"loading$ | async; else tableContent\">\n    <tr>\n      <td class=\"p-0\" [colSpan]=\"colspan$ | async\">\n        <ng-content select=\".table-loading\"></ng-content>\n      </td>\n    </tr>\n  </tbody>\n</table>\n<ng-template #tableContent>\n  <ng-container *ngIf=\"(table$ | async)! as table\">\n    <tbody *ngIf=\"(table!.data![0] || table!.data!).length > 0; else noData\">\n      <ng-container *ngIf=\"table.config.columns\">\n        <tr\n          *ngFor=\"\n            let row of table!.data![(currentPage$ | async) || 0];\n            let i = index\n          \"\n          [attr.id]=\"'tableRow_' + i\"\n        >\n          <ng-container\n            *ngFor=\"let column of table.config?.columns | keyvalue: columnOrder\"\n          >\n            <td\n              *ngIf=\"!column.value?.hidden\"\n              ngClass=\"{{ (column.key | dashCase) + '-column' }} {{\n                column.value?.class\n              }}\"\n              [attr.data-label]=\"\n                table.config?.mobileLayout && column.value?.mobileHeader\n                  ? column.value?.mobileHeader !== true\n                    ? column.value?.mobileHeader\n                    : (column.value?.header || column.key | capitalCase)\n                  : null\n              \"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"\n                  (searchBy$ | async) &&\n                  !(table.config?.columns || {})[column.key].templateRef\n                    ? highlighted\n                    : (table.config?.columns || {})[column.key].templateRef\n                    ? templateRef\n                    : (table.config?.columns || {})[column.key].transform\n                    ? transformData\n                    : rawData\n                \"\n                [ngTemplateOutletContext]=\"{\n                  row: row,\n                  column: column,\n                  search: (searchBy$ | async),\n                  transform: (table.config?.columns || {})[column.key]\n                    .transform,\n                  templateRef: (table.config?.columns || {})[column.key]\n                    .templateRef,\n                  index: i,\n                  data: table.data[(currentPage$ | async) || 0]\n                }\"\n              ></ng-container>\n            </td>\n          </ng-container>\n        </tr>\n      </ng-container>\n      <ng-container *ngIf=\"table.config.rows\">\n        <ng-container\n          *ngFor=\"\n            let row of table?.config?.rows | keyvalue: columnOrder | slice: 1;\n            let i = index\n          \"\n        >\n          <tr\n            *ngIf=\"!row.value?.hidden\"\n            [attr.id]=\"'tableRow_' + i\"\n            ngClass=\"{{ (row.key | dashCase) + '-row' }}\"\n          >\n            <th class=\"row-header\" scope=\"row\">\n              {{ row.value?.header || row.key | capitalCase }}\n            </th>\n            <td\n              *ngFor=\"let column of (table?.data || [])[0]; let y = index\"\n              ngClass=\"{{ row.value?.class }}\"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"\n                  (table.config?.rows || {})[row.key].templateRef\n                    ? templateRef\n                    : (table.config?.rows || {})[row.key].transform\n                    ? transformData\n                    : rawData\n                \"\n                [ngTemplateOutletContext]=\"{\n                  row: column,\n                  column: row,\n                  transform: (table.config?.rows || {})[row.key].transform,\n                  templateRef: (table.config?.rows || {})[row.key].templateRef,\n                  index: table.config?.rows ? y : i,\n                  data: table.data[(currentPage$ | async) || 0]\n                }\"\n              >\n              </ng-container>\n            </td>\n          </tr>\n        </ng-container>\n      </ng-container>\n    </tbody>\n  </ng-container>\n</ng-template>\n<ng-template #noData>\n  <tbody>\n    <tr>\n      <td class=\"p-0\" [colSpan]=\"colspan$ | async\">\n        <ng-content select=\".table-no-data\"></ng-content>\n      </td>\n    </tr>\n  </tbody>\n</ng-template>\n<ng-template #highlighted let-row=\"row\" let-column=\"column\" let-search=\"search\">\n  <div [innerHTML]=\"row[column.key] | highlight: search\"></div>\n</ng-template>\n<ng-template #rawData let-row=\"row\" let-column=\"column\">\n  {{ row[column.key] }}\n</ng-template>\n<ng-template\n  #transformData\n  let-row=\"row\"\n  let-column=\"column\"\n  let-transform=\"transform\"\n  let-data=\"data\"\n>\n  {{ row[column.key] | dynamicPipe: transform.pipe:transform?.args }}\n</ng-template>\n<ng-template\n  #templateRef\n  let-row=\"row\"\n  let-column=\"column\"\n  let-index=\"index\"\n  let-templateRef=\"templateRef\"\n  let-data=\"data\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"templateRef\"\n    [ngTemplateOutletContext]=\"{\n      row: row,\n      col: column,\n      index: index,\n      data: data\n    }\"\n  ></ng-container>\n</ng-template>\n" }]
+        }], propDecorators: { loading: [{
+                type: Input
+            }], page: [{
+                type: Input
+            }], search: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }] } });
+
+class GtDeltaComponent {
+    constructor() {
+        this.Math = Math;
+        this.Number = Number;
+        this.data = [];
+        this.index = 0;
+        this.classes = {
+            span: 'gt-delta',
+            positive: 'text-success',
+            negative: 'text-danger',
+        };
+        this.key = 'value';
+        this.notApplicableValue = 'n/a';
+        this.initialValue = '-';
+    }
+}
+GtDeltaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GtDeltaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GtDeltaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GtDeltaComponent, selector: "gt-delta", inputs: { data: "data", index: "index", baseIndex: "baseIndex", classes: "classes", key: "key", notApplicableValue: "notApplicableValue", initialValue: "initialValue" }, ngImport: i0, template: `<span
+    *ngIf="{
+      value:
+        index === 0
+          ? initialValue
+          : ((baseIndex === undefined
+              ? data[index - 1][key]
+              : data[baseIndex][key]) -
+              data[index][key]) /
+            -Math.abs(
+              baseIndex === undefined
+                ? data[index - 1][key]
+                : data[baseIndex][key]
+            )
+    } as delta"
+    [class]="[
+      classes.span,
+      !delta.value || !Number.isFinite(delta.value)
+        ? null
+        : delta.value > 0
+        ? classes.positive
+        : classes.negative
+    ]"
+    [class.gt-delta-positive]="delta.value > 0 && Number.isFinite(delta.value)"
+    [class.gt-delta-negative]="delta.value < 0"
+    >{{
+      Number.isFinite(delta.value)
+        ? (delta.value | percent)
+        : delta.value === initialValue
+        ? initialValue
+        : notApplicableValue
+    }}</span
+  >`, isInline: true, styles: [":host{display:inline-block}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "percent": i1.PercentPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GtDeltaComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'gt-delta',
+                    template: `<span
+    *ngIf="{
+      value:
+        index === 0
+          ? initialValue
+          : ((baseIndex === undefined
+              ? data[index - 1][key]
+              : data[baseIndex][key]) -
+              data[index][key]) /
+            -Math.abs(
+              baseIndex === undefined
+                ? data[index - 1][key]
+                : data[baseIndex][key]
+            )
+    } as delta"
+    [class]="[
+      classes.span,
+      !delta.value || !Number.isFinite(delta.value)
+        ? null
+        : delta.value > 0
+        ? classes.positive
+        : classes.negative
+    ]"
+    [class.gt-delta-positive]="delta.value > 0 && Number.isFinite(delta.value)"
+    [class.gt-delta-negative]="delta.value < 0"
+    >{{
+      Number.isFinite(delta.value)
+        ? (delta.value | percent)
+        : delta.value === initialValue
+        ? initialValue
+        : notApplicableValue
+    }}</span
+  >`,
+                    styles: [
+                        `
+      :host {
+        display: inline-block;
+      }
+    `,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], baseIndex: [{
+                type: Input
+            }], classes: [{
+                type: Input
+            }], key: [{
+                type: Input
+            }], notApplicableValue: [{
+                type: Input
+            }], initialValue: [{
+                type: Input
+            }] } });
+
+class GenericTableCoreModule {
+}
+GenericTableCoreModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GenericTableCoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GenericTableCoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GenericTableCoreModule, declarations: [CoreComponent,
+        SortClassPipe,
+        DashCasePipe,
+        HighlightPipe,
+        CapitalCasePipe,
+        CapitalCasePipe,
+        DynamicPipe,
+        GtDeltaComponent], imports: [CommonModule], exports: [CoreComponent, GtDeltaComponent] });
+GenericTableCoreModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GenericTableCoreModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GenericTableCoreModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        CoreComponent,
+                        SortClassPipe,
+                        DashCasePipe,
+                        HighlightPipe,
+                        CapitalCasePipe,
+                        CapitalCasePipe,
+                        DynamicPipe,
+                        GtDeltaComponent,
+                    ],
+                    imports: [CommonModule],
+                    exports: [CoreComponent, GtDeltaComponent],
+                }]
+        }] });
+
+class PaginationComponent {
+    constructor() {
+        this.table$ = new ReplaySubject(1);
+        this._ariaLabels = {
+            nav: 'Table pagination',
+            button: 'Go to page ',
+        };
+        this._classes = {
+            ul: 'pagination',
+            li: 'page-item',
+            button: 'page-link',
+        };
+        this._paginationLength = 5;
+        this.pagination$ = this.table$.pipe(switchMap((core) => combineLatest([core?.table$.pipe(pluck('info')), core?.currentPage$])), map(([info, currentPage]) => this.generateList(info.pageTotal, currentPage)));
+    }
+    get paginationLength() {
+        return this._paginationLength;
+    }
+    set paginationLength(value) {
+        this._paginationLength = +value;
+    }
+    get classes() {
+        return this._classes;
+    }
+    set classes(value) {
+        this._classes = value;
+    }
+    get ariaLabels() {
+        return this._ariaLabels;
+    }
+    set ariaLabels(value) {
+        this._ariaLabels = value;
+    }
+    get table() {
+        return this._table;
+    }
+    set table(value) {
+        this._table = value;
+        this.table$.next(value);
+    }
+    generateList(pages, currentPosition) {
+        const middle = Math.floor(this.paginationLength / 2);
+        const length = pages < this.paginationLength ? pages : this.paginationLength;
+        return Array.from({ length }, (_, i) => {
+            if (i === 0) {
+                return 1;
+            }
+            else if (pages < this.paginationLength) {
+                return i + 1;
+            }
+            else if (i + 1 === length) {
+                return pages;
+            }
+            else if (currentPosition > middle && currentPosition < pages - middle) {
+                return i + currentPosition - (middle - 1);
+            }
+            else if (currentPosition > middle &&
+                currentPosition < pages - (middle - 1)) {
+                return i + currentPosition - middle;
+            }
+            else if (currentPosition > middle &&
+                currentPosition === pages - (middle - 1)) {
+                return i + currentPosition - (middle + 1);
+            }
+            else if (currentPosition > middle && currentPosition === pages - 1) {
+                return i + currentPosition - (middle + 2);
+            }
+            else {
+                return i + 1;
+            }
+        });
+    }
+    goto(page) {
+        if (this.table) {
+            this.table.page = page - 1;
+        }
+    }
+}
+PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PaginationComponent, selector: "angular-generic-table-pagination", inputs: { paginationLength: "paginationLength", classes: "classes", ariaLabels: "ariaLabels", table: "table" }, ngImport: i0, template: "<ng-container\n  *ngIf=\"{\n    links: pagination$ | async,\n    currentPosition: table?.currentPage$ | async\n  } as pagination\"\n>\n  <nav\n    *ngIf=\"pagination.links && pagination.links.length > 1\"\n    role=\"navigation\"\n    [attr.aria-label]=\"ariaLabels?.nav\"\n    class=\"gt-pagination\"\n    [class]=\"classes?.nav\"\n  >\n    <ul [class]=\"classes?.ul\">\n      <ng-container\n        *ngFor=\"\n          let position of pagination!.links;\n          let i = index;\n          let last = last\n        \"\n      >\n        <li\n          [class]=\"classes?.li\"\n          [class.active]=\"position === (pagination!.currentPosition || 0) + 1\"\n        >\n          <button\n            [class]=\"classes?.button\"\n            [attr.aria-label]=\"ariaLabels.button + position\"\n            (click)=\"goto(position)\"\n          >\n            {{ position }}\n          </button>\n        </li>\n        <li\n          [class]=\"classes?.li\"\n          class=\"gt-ellipsis\"\n          *ngIf=\"position + 1 !== pagination!.links![i + 1] && !last\"\n        >\n          <button [class]=\"classes?.button\" disabled tabindex=\"-1\"></button>\n        </li>\n      </ng-container>\n    </ul>\n  </nav>\n</ng-container>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'angular-generic-table-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container\n  *ngIf=\"{\n    links: pagination$ | async,\n    currentPosition: table?.currentPage$ | async\n  } as pagination\"\n>\n  <nav\n    *ngIf=\"pagination.links && pagination.links.length > 1\"\n    role=\"navigation\"\n    [attr.aria-label]=\"ariaLabels?.nav\"\n    class=\"gt-pagination\"\n    [class]=\"classes?.nav\"\n  >\n    <ul [class]=\"classes?.ul\">\n      <ng-container\n        *ngFor=\"\n          let position of pagination!.links;\n          let i = index;\n          let last = last\n        \"\n      >\n        <li\n          [class]=\"classes?.li\"\n          [class.active]=\"position === (pagination!.currentPosition || 0) + 1\"\n        >\n          <button\n            [class]=\"classes?.button\"\n            [attr.aria-label]=\"ariaLabels.button + position\"\n            (click)=\"goto(position)\"\n          >\n            {{ position }}\n          </button>\n        </li>\n        <li\n          [class]=\"classes?.li\"\n          class=\"gt-ellipsis\"\n          *ngIf=\"position + 1 !== pagination!.links![i + 1] && !last\"\n        >\n          <button [class]=\"classes?.button\" disabled tabindex=\"-1\"></button>\n        </li>\n      </ng-container>\n    </ul>\n  </nav>\n</ng-container>\n" }]
+        }], propDecorators: { paginationLength: [{
+                type: Input
+            }], classes: [{
+                type: Input
+            }], ariaLabels: [{
+                type: Input
+            }], table: [{
+                type: Input
+            }] } });
+
+class GenericTablePaginationModule {
+}
+GenericTablePaginationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GenericTablePaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GenericTablePaginationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GenericTablePaginationModule, declarations: [PaginationComponent], imports: [CommonModule], exports: [PaginationComponent] });
+GenericTablePaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GenericTablePaginationModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GenericTablePaginationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PaginationComponent],
+                    imports: [CommonModule],
+                    exports: [PaginationComponent],
+                }]
+        }] });
+
+/*
+ * Public API Surface of core
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CoreComponent, CoreService, GenericTableCoreModule, GenericTablePaginationModule, GtDeltaComponent, PaginationComponent };
+//# sourceMappingURL=angular-generic-table-core.mjs.map