@angular-generic-table/core 5.0.0-rc.9 → 5.0.0

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

@@ -0,0 +1,1065 @@
+import * as i0 from '@angular/core';
+import { Pipe, Injector, inject, DestroyRef, input, output, linkedSignal, computed, signal, effect, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Subject, fromEvent } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
+import { toObservable } from '@angular/core/rxjs-interop';
+import { NgComponentOutlet, NgTemplateOutlet, SlicePipe, PercentPipe, CommonModule } from '@angular/common';
+
+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) => {
+                const search = config?.columns[key]?.search;
+                // if search is a function...
+                if (typeof search === 'function') {
+                    // ...use search function to return value to search
+                    value = search(row, key, value);
+                }
+                return (acc +
+                    (index === 0 ? '' : ' ? ') +
+                    (caseSensitive ? value + '' : (value + '').toLowerCase()));
+            }, '')
+                .indexOf(caseSensitive ? text : text.toLowerCase()) !== -1;
+            if (match) {
+                FILTERED[FILTERED.length] = row;
+            }
+        }
+        return FILTERED;
+    }
+    else {
+        return data;
+    }
+};
+let calculate = (data, config) => {
+    const CALCULATIONS = {};
+    const COLUMN_CALCULATIONS = {};
+    let CALCULATED = Object.entries(config.footer?.columns || {})
+        .filter(([columnName, calculations]) => Object.values(calculations || {}).filter((value) => value !== false)
+        .length >= 0)
+        .reduce((acc, [columnName, calculations], index) => {
+        acc[columnName] = Object.entries(calculations || {})
+            .filter(([calculation, value]) => value !== false)
+            .reduce((acc, [calculation, value]) => {
+            if (COLUMN_CALCULATIONS[columnName]) {
+                COLUMN_CALCULATIONS[columnName].push(calculation);
+            }
+            else if (value === true) {
+                COLUMN_CALCULATIONS[columnName] = [calculation];
+            }
+            CALCULATIONS[calculation] = true;
+            if (typeof value === 'function') {
+                value = value(data, columnName);
+            }
+            acc[calculation] = value === true ? 0 : value;
+            return acc;
+        }, {});
+        return acc;
+    }, {});
+    if (Object.keys(CALCULATED).length > 0) {
+        for (let i = 0; i < data.length; i++) {
+            Object.entries(COLUMN_CALCULATIONS).forEach(([column, calculations]) => {
+                if (calculations.indexOf('sum') > -1) {
+                    CALCULATED[column].sum += data[i][column];
+                }
+                if (calculations.indexOf('avg') > -1 &&
+                    calculations.indexOf('sum') === -1) {
+                    if (CALCULATED[column].sum === undefined) {
+                        CALCULATED[column].sum = 0;
+                    }
+                    CALCULATED[column].sum += data[i][column];
+                }
+                if (calculations.indexOf('max') > -1 &&
+                    (!CALCULATED[column].max || +data[i][column] > CALCULATED[column].max)) {
+                    CALCULATED[column].max = +data[i][column];
+                }
+                if (calculations.indexOf('min') > -1 &&
+                    (!CALCULATED[column].min || +data[i][column] < CALCULATED[column].min)) {
+                    CALCULATED[column].min = +data[i][column];
+                }
+            });
+        }
+        Object.entries(COLUMN_CALCULATIONS).forEach(([column, calculations]) => {
+            if (calculations.indexOf('avg') !== -1) {
+                CALCULATED[column].avg = CALCULATED[column]?.sum / data.length;
+                // if sum is not part of calculations config...
+                if (calculations.indexOf('sum') === -1 && CALCULATED[column].sum) {
+                    // ...remove it
+                    delete CALCULATED[column].sum;
+                }
+            }
+            if (calculations.indexOf('count') !== -1) {
+                CALCULATED[column].count = data.length;
+            }
+        });
+    }
+    return {
+        calculated: CALCULATED,
+        calculations: Object.keys(CALCULATIONS).sort((a, b) => (config.footer?.rowOrder?.indexOf(a) || 0) -
+            (config.footer?.rowOrder?.indexOf(b) || 0)),
+        calculatedColumnsCount: Object.keys(CALCULATED).length || 0,
+    };
+};
+/** sortOnMultipleKeys
+ * @description Sort data on multiple keys with locale-aware alphanumeric comparison
+ * @param {GtSortOrder} keys - array with sort config objects to sort on, data will be sorted according to array order
+ * @returns sort function
+ */
+const sortOnMultipleKeys = (keys) => {
+    const order = keys.map((key) => (key.order === 'desc' ? -1 : 1));
+    return (a, b) => {
+        for (let i = 0; i < keys.length; i++) {
+            const o = keys[i].key;
+            const aVal = a[o];
+            const bVal = b[o];
+            if (aVal === bVal)
+                continue;
+            if (aVal === null || aVal === undefined)
+                return 1;
+            if (bVal === null || bVal === undefined)
+                return -1;
+            if (typeof aVal === 'string' && typeof bVal === 'string') {
+                const cmp = aVal.localeCompare(bVal, undefined, { numeric: true, sensitivity: 'base' });
+                if (cmp !== 0)
+                    return cmp * order[i];
+                continue;
+            }
+            if (aVal > bVal)
+                return order[i];
+            if (aVal < bVal)
+                return -order[i];
+        }
+        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) {
+        return capitalize(s);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CapitalCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: CapitalCasePipe, isStandalone: true, name: "capitalCase" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CapitalCasePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'capitalCase',
+                    standalone: true,
+                }]
+        }] });
+
+class SortClassPipe {
+    transform(sortOrder, key, context = 'class') {
+        const sortIndex = sortOrder
+            ? sortOrder.findIndex((s) => s.key === key)
+            : -1;
+        if (context === 'aria') {
+            if (sortIndex === -1 || !sortOrder) {
+                return null;
+            }
+            else {
+                return `${sortOrder[sortIndex].order}ending`;
+            }
+        }
+        else if (context === 'class') {
+            if (sortIndex === -1 || !sortOrder) {
+                return '';
+            }
+            else {
+                return `gt-sort-${sortOrder[sortIndex].order}`;
+            }
+        }
+        else {
+            return (sortOrder && sortOrder?.length === 1) || sortIndex < 0
+                ? null
+                : sortIndex + 1 + '';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SortClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: SortClassPipe, isStandalone: true, name: "sortClass" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SortClassPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'sortClass',
+                    standalone: true,
+                }]
+        }] });
+
+class DashCasePipe {
+    transform(s) {
+        return dashed(s);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: DashCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: DashCasePipe, isStandalone: true, name: "dashCase" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: DashCasePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'dashCase',
+                    standalone: true,
+                }]
+        }] });
+
+class DynamicPipe {
+    constructor(injector) {
+        this.injector = injector;
+        this._cache = new Map();
+    }
+    transform(value, requiredPipe, pipeArgs) {
+        const cached = this._cache.get(requiredPipe);
+        if (cached) {
+            return cached.transform(value, ...(pipeArgs || []));
+        }
+        const childInjector = Injector.create({
+            name: 'DynamicPipe',
+            parent: this.injector,
+            providers: [{ provide: requiredPipe }],
+        });
+        const pipe = childInjector.get(requiredPipe);
+        this._cache.set(requiredPipe, pipe);
+        return pipe.transform(value, ...(pipeArgs || []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: DynamicPipe, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: DynamicPipe, isStandalone: true, name: "dynamicPipe" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: DynamicPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'dynamicPipe',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.Injector }] });
+
+class HighlightPipe {
+    constructor() {
+        this._cachedTerm = null;
+        this._cachedRegex = null;
+    }
+    transform(text, searchTerm) {
+        if (!searchTerm) {
+            return text;
+        }
+        const haystackAlwaysString = text + '';
+        if (searchTerm !== this._cachedTerm) {
+            this._cachedTerm = searchTerm;
+            try {
+                this._cachedRegex = new RegExp('(' +
+                    searchTerm
+                        .toLowerCase()
+                        .match(/".*?"|[^ ]+/g)
+                        .map((needle) => needle.replace(/"(.*?)"/, '$1'))
+                        .join('|') +
+                    ')', 'ig');
+            }
+            catch {
+                this._cachedRegex = null;
+            }
+        }
+        if (!this._cachedRegex) {
+            return haystackAlwaysString;
+        }
+        const containsTagPattern = /(<.*?>)(.*)(<\/.*?>)/gi;
+        const containsTagMatches = containsTagPattern.exec(haystackAlwaysString);
+        if (containsTagMatches) {
+            return (containsTagMatches[1] +
+                containsTagMatches[2].replace(this._cachedRegex, '<span class="gt-highlight-search">$1</span>') +
+                containsTagMatches[3]);
+        }
+        return haystackAlwaysString.replace(this._cachedRegex, '<span class="gt-highlight-search">$1</span>');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: HighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: HighlightPipe, isStandalone: true, name: "highlight" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: HighlightPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'highlight',
+                    standalone: true,
+                }]
+        }] });
+
+class RowSelectionPipe {
+    transform(row, selection, comparator, className) {
+        return className && comparator(row, selection) ? className : '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: RowSelectionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: RowSelectionPipe, isStandalone: true, name: "rowSelection" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: RowSelectionPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'rowSelection',
+                    standalone: true,
+                }]
+        }] });
+
+class CoreComponent {
+    constructor() {
+        this._destroyRef = inject(DestroyRef);
+        this._unsubscribe$ = new Subject();
+        // ─── Inputs ───
+        this.navigationKeys = input([
+            'ArrowDown',
+            'ArrowUp',
+            'ArrowLeft',
+            'ArrowRight',
+            'Home',
+            'End',
+        ], ...(ngDevMode ? [{ debugName: "navigationKeys" }] : /* istanbul ignore next */ []));
+        this.selectKeys = input(['Enter', ' '], ...(ngDevMode ? [{ debugName: "selectKeys" }] : /* istanbul ignore next */ []));
+        this.config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        this.data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        this.searchTerm = input(null, { ...(ngDevMode ? { debugName: "searchTerm" } : /* istanbul ignore next */ {}), alias: 'search' });
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.sortOrderInput = input([], { ...(ngDevMode ? { debugName: "sortOrderInput" } : /* istanbul ignore next */ {}), alias: 'sortOrder' });
+        this.paginationIndexInput = input(0, { ...(ngDevMode ? { debugName: "paginationIndexInput" } : /* istanbul ignore next */ {}), alias: 'paginationIndex' });
+        this.pagingInfo = input(null, ...(ngDevMode ? [{ debugName: "pagingInfo" }] : /* istanbul ignore next */ []));
+        this.selection = input({}, ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+        this.rowIdKey = input(undefined, ...(ngDevMode ? [{ debugName: "rowIdKey" }] : /* istanbul ignore next */ []));
+        this.generateRowId = input(true, ...(ngDevMode ? [{ debugName: "generateRowId" }] : /* istanbul ignore next */ []));
+        this.trackRowByFnInput = input(undefined, { ...(ngDevMode ? { debugName: "trackRowByFnInput" } : /* istanbul ignore next */ {}), alias: 'trackRowByFn' });
+        this.isRowSelectedFn = input(undefined, ...(ngDevMode ? [{ debugName: "isRowSelectedFn" }] : /* istanbul ignore next */ []));
+        this.customClassesInput = input({}, { ...(ngDevMode ? { debugName: "customClassesInput" } : /* istanbul ignore next */ {}), alias: 'customClasses' });
+        // ─── Outputs ───
+        this.rowClick = output();
+        this.rowSelect = output();
+        this.sortOrderChange = output();
+        this.rowActiveOutput = output({ alias: 'rowActive' });
+        this.columnSort = output();
+        this.pageChange = output();
+        // ─── Linked Signals (two-way state) ───
+        this.sortOrder = linkedSignal(() => this.sortOrderInput(), ...(ngDevMode ? [{ debugName: "sortOrder" }] : /* istanbul ignore next */ []));
+        this.currentPaginationIndex = linkedSignal(() => this.paginationIndexInput(), ...(ngDevMode ? [{ debugName: "currentPaginationIndex" }] : /* istanbul ignore next */ []));
+        // ─── Computed Signals ───
+        this.customClasses = computed(() => ({
+            selectedRow: 'gt-selected',
+            activeRow: 'gt-active',
+            ...this.customClassesInput(),
+        }), ...(ngDevMode ? [{ debugName: "customClasses" }] : /* istanbul ignore next */ []));
+        this.trackRowByFn = (index, row) => {
+            const customFn = this.trackRowByFnInput();
+            if (customFn)
+                return customFn(index, row);
+            const idKey = this.rowIdKey();
+            return idKey ? row[idKey] : row?._id;
+        };
+        /** Data with mapTo expansions and row IDs applied */
+        this.expandedData = computed(() => {
+            let data = [...this.data()];
+            const config = this.config();
+            // mapTo expansion
+            if ((config.columns &&
+                !!Object.values(config.columns).find((column) => !!column.mapTo)) ||
+                (config.rows &&
+                    !!Object.values(config.rows).find((column) => !!column.mapTo))) {
+                const newData = [];
+                for (let i = 0; i < data.length; i++) {
+                    const row = data[i];
+                    const newKeys = Object.entries(config.columns || config.rows || [])
+                        .filter(([key, value]) => !!value.mapTo)
+                        .reduce((previousValue, [key, value]) => ({
+                        ...previousValue,
+                        [key]: this.nestedValue(row, value.mapTo.path, value.mapTo?.missingValue),
+                    }), {});
+                    newData[i] = { ...row, ...newKeys };
+                }
+                data = newData;
+            }
+            // Generate row IDs
+            if (this.generateRowId() && !this.rowIdKey() && data.length > 0) {
+                const dataWithId = [];
+                for (let i = 0; i < data.length; i++) {
+                    dataWithId[i] = { ...data[i], _id: i };
+                }
+                data = dataWithId;
+            }
+            return data;
+        }, ...(ngDevMode ? [{ debugName: "expandedData" }] : /* istanbul ignore next */ []));
+        /** Filtered data (search applied, no sort) */
+        this.searchedData = computed(() => {
+            const data = [...this.expandedData()];
+            const searchBy = this.searchTerm();
+            const config = this.config();
+            const lazyLoaded = this.pagingInfo() !== null;
+            return searchBy && !lazyLoaded
+                ? search(searchBy, false, data, config)
+                : data;
+        }, ...(ngDevMode ? [{ debugName: "searchedData" }] : /* istanbul ignore next */ []));
+        /** Sorted (and already searched) data */
+        this.processedData = computed(() => {
+            const data = this.searchedData();
+            const sortBy = this.sortOrder();
+            const config = this.config();
+            if (!sortBy?.length || config?.disableTableSort) {
+                return data;
+            }
+            return [...data].sort(sortOnMultipleKeys(sortBy));
+        }, ...(ngDevMode ? [{ debugName: "processedData" }] : /* istanbul ignore next */ []));
+        /** Table meta: chunked data + config + pagination info */
+        this.table = computed(() => {
+            const sorted = this.processedData();
+            const config = this.config();
+            const pi = this.pagingInfo();
+            if (pi !== null &&
+                pi.pageCurrent !== null &&
+                pi.numberOfRecords !== null &&
+                pi.pageSize !== null) {
+                return {
+                    data: [sorted],
+                    config,
+                    info: {
+                        lazyLoaded: true,
+                        numberOfRecords: pi.numberOfRecords,
+                        pageSize: pi.pageSize,
+                        pageTotal: pi.pageTotal ?? Math.ceil(pi.numberOfRecords / pi.pageSize),
+                    },
+                };
+            }
+            if (!config.pagination || config.pagination.length === 0) {
+                return {
+                    data: [sorted],
+                    config,
+                    info: { numberOfRecords: sorted.length, pageTotal: 1 },
+                };
+            }
+            return {
+                data: chunk(sorted, +(config.pagination.length || 0)),
+                config,
+                info: {
+                    numberOfRecords: sorted.length,
+                    pageSize: +(config.pagination.length || 0),
+                    pageTotal: Math.ceil(sorted.length / +(config.pagination.length || 0)),
+                },
+            };
+        }, ...(ngDevMode ? [{ debugName: "table" }] : /* istanbul ignore next */ []));
+        /** Current table info */
+        this.tableInfoSignal = computed(() => this.table().info, ...(ngDevMode ? [{ debugName: "tableInfoSignal" }] : /* istanbul ignore next */ []));
+        /** Calculations for footer */
+        this.calculations = computed(() => calculate(this.processedData(), this.config()), ...(ngDevMode ? [{ debugName: "calculations" }] : /* istanbul ignore next */ []));
+        /** Bounded pagination index (clamped to valid range) */
+        this.boundedPaginationIndex = computed(() => {
+            const page = this.currentPaginationIndex();
+            const info = this.tableInfoSignal();
+            const pageSize = info.pageSize ?? this.config()?.pagination?.length ?? info.numberOfRecords;
+            const lastPage = Math.ceil(info.numberOfRecords / pageSize) - 1;
+            return +page < 0 ? 0 : +page > lastPage ? lastPage : +page;
+        }, ...(ngDevMode ? [{ debugName: "boundedPaginationIndex" }] : /* istanbul ignore next */ []));
+        /** Number of visible columns */
+        this.colspan = computed(() => {
+            const config = this.config();
+            if (config.columns) {
+                return Object.values(config.columns || config.rows || {}).filter((value) => value.hidden !== true).length;
+            }
+            return this.processedData().length + 1;
+        }, ...(ngDevMode ? [{ debugName: "colspan" }] : /* istanbul ignore next */ []));
+        /** Number of footer columns */
+        this.footerColspan = computed(() => {
+            const config = this.config();
+            let colspan = 0;
+            Object.values(config?.footer?.columns || {}).forEach((calculations) => {
+                if (Object.values(calculations).filter((value) => value !== false).length >=
+                    0) {
+                    colspan += 1;
+                }
+            });
+            return colspan;
+        }, ...(ngDevMode ? [{ debugName: "footerColspan" }] : /* istanbul ignore next */ []));
+        // ─── Row Active State ───
+        this.rowActiveState = signal({
+            row: null,
+            index: null,
+        }, ...(ngDevMode ? [{ debugName: "rowActiveState" }] : /* istanbul ignore next */ []));
+        this.activeRowIndex = null;
+        // Emit rowActive output and track index
+        this._rowActiveEffect = effect(() => {
+            const event = this.rowActiveState();
+            this.activeRowIndex = event.index;
+            this.rowActiveOutput.emit(event);
+        }, ...(ngDevMode ? [{ debugName: "_rowActiveEffect" }] : /* istanbul ignore next */ []));
+        this._columnOrder = (a, b) => {
+            return (a.value.order || 0) - (b.value.order || 0);
+        };
+        this.orderedColumns = computed(() => {
+            const config = this.config();
+            if (!config.columns)
+                return [];
+            return Object.entries(config.columns)
+                .map(([key, value]) => ({ key, value }))
+                .sort(this._columnOrder);
+        }, ...(ngDevMode ? [{ debugName: "orderedColumns" }] : /* istanbul ignore next */ []));
+        this.orderedRows = computed(() => {
+            const config = this.config();
+            if (!config.rows)
+                return [];
+            return Object.entries(config.rows)
+                .map(([key, value]) => ({ key, value }))
+                .sort(this._columnOrder);
+        }, ...(ngDevMode ? [{ debugName: "orderedRows" }] : /* istanbul ignore next */ []));
+        // ─── Keyboard Navigation ───
+        this._unsubscribeFromKeyboardEvents$ = new Subject();
+        this._keyboardArrowEvent$ = fromEvent(document, 'keydown').pipe(filter((event) => [...this.navigationKeys(), ...this.selectKeys()].indexOf(event.key) > -1));
+    }
+    /** Get tableInfo synchronously */
+    get tableInfo() {
+        return this.tableInfoSignal();
+    }
+    get sortOrder$() {
+        return (this._sortOrder$ ??= toObservable(this.sortOrder));
+    }
+    get loading$() {
+        return (this._loading$ ??= toObservable(this.loading));
+    }
+    get searchBy$() {
+        return (this._searchBy$ ??= toObservable(this.searchTerm));
+    }
+    get tableConfig$() {
+        return (this._tableConfig$ ??= toObservable(this.config));
+    }
+    get data$() {
+        return (this._data$ ??= toObservable(this.processedData));
+    }
+    get table$() {
+        return (this._table$ ??= toObservable(this.table));
+    }
+    get tableInfo$() {
+        return (this._tableInfo$ ??= toObservable(this.tableInfoSignal));
+    }
+    get currentPaginationIndex$() {
+        return (this._currentPaginationIndex$ ??= toObservable(this.boundedPaginationIndex));
+    }
+    get calculations$() {
+        return (this._calculations$ ??= toObservable(this.calculations));
+    }
+    get rowActive$() {
+        return (this._rowActive$ ??= toObservable(this.rowActiveState));
+    }
+    get colspan$() {
+        return (this._colspan$ ??= toObservable(this.colspan));
+    }
+    // ─── Pagination ───
+    get paginationIndex() {
+        return this.currentPaginationIndex();
+    }
+    set paginationIndex(value) {
+        this.currentPaginationIndex.set(value);
+        this.pageChange.emit({ index: this.boundedPaginationIndex() });
+    }
+    // ─── Methods ───
+    headerSortFn(key) {
+        return (event) => this.sortByKey(key, event);
+    }
+    _rowClick(row, index, event) {
+        this.rowClick.emit({ row, index, event });
+    }
+    _rowSelect(row, index, event) {
+        this.rowSelect.emit({ row, index, event });
+    }
+    activateRow(arg, event) {
+        if (typeof arg === 'number') {
+            const tableData = this.table();
+            const pageData = tableData.data[this.paginationIndex];
+            if (pageData && pageData[arg]) {
+                this._activateRow(pageData[arg], arg, event);
+            }
+        }
+        else if (typeof arg === 'string') {
+            // TODO: implement hover by id
+        }
+        else {
+            this._activateRow(null, null);
+        }
+    }
+    _activateRow(row, index, event) {
+        const current = this.rowActiveState();
+        const idKey = this.rowIdKey();
+        // distinctUntilChanged equivalent
+        if (current.row && row) {
+            if (idKey && current.row[idKey] === row[idKey])
+                return;
+            if (!idKey &&
+                this.generateRowId() &&
+                current.row._id === row._id)
+                return;
+        }
+        if (!current.row && !row && current.index === index)
+            return;
+        this.rowActiveState.set({ row, index, event });
+    }
+    /** sortByKey - Sort by key in table row */
+    sortByKey(key, $event) {
+        const shiftKey = $event?.shiftKey === true;
+        const currentOrder = this.sortOrder();
+        let sortOrderVal = 'asc';
+        let newOrder = [];
+        if (shiftKey) {
+            const existingSortPosition = currentOrder.findIndex((value) => value.key === key);
+            if (existingSortPosition === -1) {
+                newOrder = [...currentOrder, { key, order: 'asc' }];
+            }
+            else {
+                sortOrderVal = currentOrder[existingSortPosition].order;
+                const newSortOrder = sortOrderVal === 'asc' ? 'desc' : 'asc';
+                newOrder = [...currentOrder];
+                newOrder[existingSortPosition] = {
+                    ...newOrder[existingSortPosition],
+                    order: newSortOrder,
+                };
+            }
+        }
+        else {
+            if (currentOrder.length > 0) {
+                const existingSortPosition = currentOrder.findIndex((value) => value.key === key);
+                if (existingSortPosition === -1) {
+                    newOrder = [{ key, order: 'asc' }];
+                }
+                else {
+                    sortOrderVal = currentOrder[existingSortPosition].order;
+                    const newSortOrder = sortOrderVal === 'asc' ? 'desc' : 'asc';
+                    newOrder = [{ key, order: newSortOrder }];
+                }
+            }
+            else {
+                newOrder = [{ key, order: sortOrderVal }];
+            }
+        }
+        const sortEvent = {
+            key,
+            order: sortOrderVal,
+            currentSortOrder: newOrder,
+            addSortKey: shiftKey,
+        };
+        if ($event) {
+            sortEvent.event = $event;
+        }
+        this.columnSort.emit(sortEvent);
+        if (!this.tableInfo?.lazyLoaded) {
+            this.sortOrder.set(newOrder);
+            this.sortOrderChange.emit(newOrder);
+        }
+    }
+    nestedValue(object, mapTo, missingValue = null) {
+        const levels = mapTo.split('.');
+        return levels.reduce((previousValue, currentValue, index) => previousValue[currentValue] ||
+            (index === levels.length - 1 ? missingValue : {}), object);
+    }
+    listenToKeyboardEvents() {
+        if (!this.config()?.activateRowOnKeyboardNavigation) {
+            return;
+        }
+        this._unsubscribeFromKeyboardEvents$.next();
+        this._keyboardArrowEvent$
+            .pipe(takeUntil(this._unsubscribeFromKeyboardEvents$), takeUntil(this._unsubscribe$))
+            .subscribe((event) => {
+            const rows = this.processedData();
+            const currentPage = this.boundedPaginationIndex();
+            const tableInfo = this.tableInfo;
+            const selectEvent = this.selectKeys().includes(event.key);
+            if (selectEvent && this.activeRowIndex !== null) {
+                const rowIndex = this.activeRowIndex + currentPage * (tableInfo?.pageSize ?? 0);
+                this._rowSelect(rows[rowIndex], rowIndex, event);
+                return;
+            }
+            const navigationEvent = this.navigationKeys().includes(event.key);
+            if (navigationEvent) {
+                this._handleNavigationEvent(event, rows, currentPage, tableInfo);
+            }
+        });
+    }
+    unsubscribeFromKeyboardEvents(tableRef) {
+        if (!this.config()?.activateRowOnKeyboardNavigation) {
+            return;
+        }
+        if (tableRef !== document.activeElement) {
+            if (this.config()?.activateRowOnHover) {
+                this.activateRow(null);
+            }
+            this._unsubscribeFromKeyboardEvents$.next();
+        }
+    }
+    _handleNavigationEvent(event, rows, currentPage, tableInfo) {
+        const hasPagination = (tableInfo?.pageTotal || 0) > 1 && tableInfo;
+        const lastRowIndex = rows.length - 1;
+        let newIndex = this.activeRowIndex;
+        let indexModifier = 0;
+        if (event.key === 'Home') {
+            this.paginationIndex = 0;
+            this.activateRow(0, event);
+            return;
+        }
+        if (event.key === 'End') {
+            const indexOfLastRecord = hasPagination
+                ? rows.length - (tableInfo.pageTotal - 1) * tableInfo.pageSize - 1
+                : lastRowIndex;
+            if (tableInfo?.pageTotal) {
+                this.paginationIndex = tableInfo.pageTotal - 1;
+            }
+            this.activateRow(indexOfLastRecord, event);
+            return;
+        }
+        if (event.key === 'ArrowDown') {
+            indexModifier = 1;
+        }
+        else if (event.key === 'ArrowUp') {
+            indexModifier = -1;
+        }
+        if (newIndex === null) {
+            newIndex = 0;
+        }
+        else if (newIndex + indexModifier >= 0 &&
+            newIndex + indexModifier <= lastRowIndex) {
+            newIndex = newIndex + indexModifier;
+        }
+        if (hasPagination && tableInfo?.pageSize) {
+            const isNotLastPage = currentPage + 1 < tableInfo.pageTotal;
+            const recordsOnLastPage = rows.length - (tableInfo.pageTotal - 1) * tableInfo.pageSize - 1;
+            const maxIndex = isNotLastPage
+                ? tableInfo?.pageSize - 1
+                : recordsOnLastPage;
+            if (event.key === 'ArrowLeft' && currentPage > 0) {
+                this.paginationIndex = currentPage - 1;
+                this.activateRow(newIndex, event);
+                return;
+            }
+            else if (event.key === 'ArrowRight' && isNotLastPage) {
+                if (currentPage + 1 === tableInfo.pageTotal - 1 &&
+                    newIndex > recordsOnLastPage) {
+                    this.activateRow(recordsOnLastPage, event);
+                }
+                this.paginationIndex = currentPage + 1;
+                this.activateRow(newIndex, event);
+                return;
+            }
+            if (currentPage > 0 &&
+                indexModifier < 0 &&
+                newIndex + indexModifier <= lastRowIndex &&
+                (this.activeRowIndex || 0) + indexModifier < 0) {
+                this.activateRow(tableInfo?.pageSize - 1, event);
+                this.paginationIndex = currentPage - 1;
+                return;
+            }
+            const pageIndex = newIndex % tableInfo?.pageSize;
+            if (newIndex > maxIndex && currentPage + 1 < tableInfo.pageTotal) {
+                this.paginationIndex = currentPage + 1;
+            }
+            this.activateRow(pageIndex > maxIndex ? maxIndex : pageIndex, event);
+            return;
+        }
+        this.activateRow(newIndex, event);
+    }
+    ngOnDestroy() {
+        this._unsubscribe$.next();
+        this._unsubscribe$.complete();
+        this._unsubscribeFromKeyboardEvents$.next();
+        this._unsubscribeFromKeyboardEvents$.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: CoreComponent, isStandalone: true, selector: "angular-generic-table", inputs: { navigationKeys: { classPropertyName: "navigationKeys", publicName: "navigationKeys", isSignal: true, isRequired: false, transformFunction: null }, selectKeys: { classPropertyName: "selectKeys", publicName: "selectKeys", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, sortOrderInput: { classPropertyName: "sortOrderInput", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null }, paginationIndexInput: { classPropertyName: "paginationIndexInput", publicName: "paginationIndex", isSignal: true, isRequired: false, transformFunction: null }, pagingInfo: { classPropertyName: "pagingInfo", publicName: "pagingInfo", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, rowIdKey: { classPropertyName: "rowIdKey", publicName: "rowIdKey", isSignal: true, isRequired: false, transformFunction: null }, generateRowId: { classPropertyName: "generateRowId", publicName: "generateRowId", isSignal: true, isRequired: false, transformFunction: null }, trackRowByFnInput: { classPropertyName: "trackRowByFnInput", publicName: "trackRowByFn", isSignal: true, isRequired: false, transformFunction: null }, isRowSelectedFn: { classPropertyName: "isRowSelectedFn", publicName: "isRowSelectedFn", isSignal: true, isRequired: false, transformFunction: null }, customClassesInput: { classPropertyName: "customClassesInput", publicName: "customClasses", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", rowSelect: "rowSelect", sortOrderChange: "sortOrderChange", rowActiveOutput: "rowActive", columnSort: "columnSort", pageChange: "pageChange" }, ngImport: i0, template: "@let tableData = table();\n@let configValue = config();\n@let isLoading = loading();\n@let sortOrderValue = sortOrder();\n@let searchValue = searchTerm();\n@let rowActiveValue = rowActiveState();\n@let calculationsValue = calculations();\n@let colspanValue = colspan();\n@let footerColspanValue = footerColspan();\n@let paginationIdx = boundedPaginationIndex();\n\n<table\n  [class]=\"configValue?.class || 'table'\"\n  [class.table-mobile]=\"configValue?.mobileLayout\"\n  [class.table-horizontal]=\"configValue?.rows\"\n  [class.table-loading]=\"isLoading\"\n  [class.gt-sticky-row-header]=\"configValue?.stickyHeaders?.row && configValue?.rows\"\n  [class.gt-sticky-column-header]=\"configValue?.stickyHeaders?.column\"\n  [attr.aria-busy]=\"isLoading === true ? true : null\"\n  [tabindex]=\"configValue?.activateRowOnKeyboardNavigation ? 0 : -1\"\n  #tableRef\n  (focus)=\"listenToKeyboardEvents()\"\n  (focusout)=\"unsubscribeFromKeyboardEvents(tableRef)\"\n  (mouseenter)=\"listenToKeyboardEvents()\"\n  (mouseleave)=\"unsubscribeFromKeyboardEvents(tableRef)\"\n>\n  <thead>\n    <tr>\n      @if (configValue?.columns) {\n        @for (column of orderedColumns(); track column.key) {\n          @if (!column.value?.hidden) {\n            <th\n              class=\"{{ (column.key | dashCase) + '-column' }} {{ column.value.class }}\"\n              [class.disabled]=\"isLoading\"\n              [attr.aria-sort]=\"sortOrderValue | sortClass: column.key:'aria'\"\n              [class.gt-sortable]=\"true\"\n              scope=\"col\"\n            >\n              @if (column.value?.headerReplaceFull && (column.value?.headerComponent || column.value?.headerTemplateRef)) {\n                @if (column.value.headerComponent) {\n                  <ng-container\n                    [ngComponentOutlet]=\"column.value.headerComponent!\"\n                    [ngComponentOutletInputs]=\"{\n                      column: column,\n                      sortable: !!column.value.sortable,\n                      sortOrder: sortOrderValue,\n                      search: searchValue,\n                      sort: headerSortFn(column.key),\n                      ...(column.value.headerComponentInputs || {})\n                    }\"\n                  ></ng-container>\n                } @else {\n                  <ng-container\n                    [ngTemplateOutlet]=\"column.value.headerTemplateRef!\"\n                    [ngTemplateOutletContext]=\"{\n                      column: column,\n                      sortable: !!column.value.sortable,\n                      sortOrder: sortOrderValue,\n                      search: searchValue,\n                      sort: headerSortFn(column.key)\n                    }\"\n                  ></ng-container>\n                }\n              } @else if (column.value?.sortable) {\n                <button\n                  [attr.data-sort-order]=\"sortOrderValue | sortClass: column.key:'order'\"\n                  class=\"gt-sort\"\n                  (click)=\"isLoading || !column.value.sortable || sortByKey(column.key, $event)\"\n                >\n                  @if (column.value?.headerComponent) {\n                    <ng-container\n                      [ngComponentOutlet]=\"column.value.headerComponent!\"\n                      [ngComponentOutletInputs]=\"{\n                        column: column,\n                        sortable: true,\n                        sortOrder: sortOrderValue,\n                        search: searchValue,\n                        ...(column.value.headerComponentInputs || {})\n                      }\"\n                    ></ng-container>\n                  } @else if (column.value?.headerTemplateRef) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"column.value.headerTemplateRef\"\n                      [ngTemplateOutletContext]=\"{\n                        column: column,\n                        sortable: true,\n                        sortOrder: sortOrderValue,\n                        search: searchValue\n                      }\"\n                    ></ng-container>\n                  } @else if (column.value?.header !== false) {\n                    <span>{{ column.value.header || column.key | capitalCase }}</span>\n                  }\n                </button>\n              } @else {\n                @if (column.value?.headerComponent) {\n                  <ng-container\n                    [ngComponentOutlet]=\"column.value.headerComponent!\"\n                    [ngComponentOutletInputs]=\"{\n                      column: column,\n                      sortable: false,\n                      sortOrder: sortOrderValue,\n                      search: searchValue,\n                      ...(column.value.headerComponentInputs || {})\n                    }\"\n                  ></ng-container>\n                } @else if (column.value?.headerTemplateRef) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"column.value.headerTemplateRef\"\n                    [ngTemplateOutletContext]=\"{\n                      column: column,\n                      sortable: false,\n                      sortOrder: sortOrderValue,\n                      search: searchValue\n                    }\"\n                  ></ng-container>\n                } @else if (column.value?.header !== false) {\n                  <span>{{ column.value.header || column.key | capitalCase }}</span>\n                }\n              }\n            </th>\n          }\n        }\n      }\n      @if (configValue?.rows) {\n        @let headerRow = orderedRows()[0];\n        @if (headerRow) {\n          <th\n            class=\"row-header\"\n            [attr.aria-sort]=\"sortOrderValue | sortClass: headerRow.key:'aria'\"\n            class=\"{{ headerRow.value.sortable ? 'sort ' : '' }} {{ sortOrderValue | sortClass: headerRow.key }} {{ (headerRow.key | dashCase) + '-column' }}\"\n            (click)=\"isLoading || !headerRow.value.sortable || sortByKey(headerRow.key, $event)\"\n            scope=\"col\"\n          >\n            @if (headerRow.value?.headerComponent) {\n              <ng-container\n                [ngComponentOutlet]=\"headerRow.value.headerComponent!\"\n                [ngComponentOutletInputs]=\"{\n                  column: headerRow,\n                  sortable: !!headerRow.value.sortable,\n                  sortOrder: sortOrderValue,\n                  search: searchValue,\n                  sort: headerSortFn(headerRow.key),\n                  ...(headerRow.value.headerComponentInputs || {})\n                }\"\n              ></ng-container>\n            } @else if (headerRow.value?.headerTemplateRef) {\n              <ng-container\n                [ngTemplateOutlet]=\"headerRow.value.headerTemplateRef\"\n                [ngTemplateOutletContext]=\"{\n                  column: headerRow,\n                  sortable: !!headerRow.value.sortable,\n                  sortOrder: sortOrderValue,\n                  search: searchValue,\n                  sort: headerSortFn(headerRow.key)\n                }\"\n              ></ng-container>\n            } @else if (headerRow?.value?.header !== false) {\n              {{ headerRow?.value?.header || headerRow.key | capitalCase }}\n            }\n          </th>\n          @for (column of (tableData?.data || [])[0]; track $index) {\n            <th class=\"{{ headerRow.value.class }}\">\n              @if ((configValue.rows || {})[headerRow.key].component) {\n                <ng-container\n                  [ngComponentOutlet]=\"(configValue.rows || {})[headerRow.key].component!\"\n                  [ngComponentOutletInputs]=\"{\n                    row: column,\n                    col: headerRow,\n                    index: 0,\n                    data: (tableData?.data || [])[0],\n                    search: searchValue,\n                    ...((configValue.rows || {})[headerRow.key].componentInputs || {})\n                  }\"\n                ></ng-container>\n              } @else {\n                <ng-container\n                  [ngTemplateOutlet]=\"\n                    (configValue.rows || {})[headerRow.key].templateRef\n                      ? templateRef\n                      : (configValue.rows || {})[headerRow.key].transform\n                      ? transformData\n                      : rawData\n                  \"\n                  [ngTemplateOutletContext]=\"{\n                    row: column,\n                    column: headerRow,\n                    transform: (configValue.rows || {})[headerRow.key].transform,\n                    templateRef: (configValue.rows || {})[headerRow.key].templateRef,\n                    index: 0\n                  }\"\n                ></ng-container>\n              }\n            </th>\n          }\n        }\n      }\n    </tr>\n  </thead>\n  @if (isLoading) {\n    <tbody>\n      <tr>\n        <td class=\"p-0\" [colSpan]=\"colspanValue\">\n          <ng-content select=\".table-loading\"></ng-content>\n        </td>\n      </tr>\n    </tbody>\n  } @else {\n    @if (tableData && (tableData.data[0] || tableData.data).length > 0) {\n      <tbody>\n        @if (configValue?.columns) {\n          @for (row of tableData.data[tableData.info.lazyLoaded ? 0 : paginationIdx]; track trackRowByFn($index, row); let i = $index) {\n            <tr\n              [attr.id]=\"'tableRow_' + i\"\n              (click)=\"configValue?.rowClick && _rowClick(row, i, $event)\"\n              (mouseenter)=\"configValue?.activateRowOnHover && _activateRow(row, i, $event)\"\n              (mouseleave)=\"configValue?.activateRowOnHover && _activateRow(null, null, $event)\"\n              [class]=\"[\n                !!isRowSelectedFn()\n                  ? (row | rowSelection: selection(): isRowSelectedFn()!: customClasses().selectedRow)\n                  : '',\n                rowActiveValue?.index === i ? customClasses().activeRow : ''\n              ]\"\n            >\n              @for (column of orderedColumns(); track column.key) {\n                @if (!column.value?.hidden) {\n                  <td\n                    class=\"{{ (column.key | dashCase) + '-column' }} {{ column.value.class }}\"\n                    [attr.data-label]=\"\n                      configValue.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                    @if ((configValue.columns || {})[column.key].component) {\n                      <ng-container\n                        [ngComponentOutlet]=\"(configValue.columns || {})[column.key].component!\"\n                        [ngComponentOutletInputs]=\"{\n                          row: row,\n                          col: column,\n                          index: i,\n                          data: tableData.data[tableData.info.lazyLoaded ? 0 : paginationIdx],\n                          search: searchValue,\n                          ...((configValue.columns || {})[column.key].componentInputs || {})\n                        }\"\n                      ></ng-container>\n                    } @else {\n                      <ng-container\n                        [ngTemplateOutlet]=\"\n                          searchValue && !(configValue.columns || {})[column.key].templateRef\n                            ? highlighted\n                            : (configValue.columns || {})[column.key].templateRef\n                            ? templateRef\n                            : (configValue.columns || {})[column.key].transform\n                            ? transformData\n                            : rawData\n                        \"\n                        [ngTemplateOutletContext]=\"{\n                          row: row,\n                          column: column,\n                          search: searchValue,\n                          transform: (configValue.columns || {})[column.key].transform,\n                          templateRef: (configValue.columns || {})[column.key].templateRef,\n                          index: i,\n                          data: tableData.data[tableData.info.lazyLoaded ? 0 : paginationIdx]\n                        }\"\n                      ></ng-container>\n                    }\n                  </td>\n                }\n              }\n            </tr>\n          }\n        }\n        @if (configValue?.rows) {\n          @for (row of orderedRows() | slice: 1; track row.key; let i = $index) {\n            @if (!row.value?.hidden) {\n              <tr\n                [attr.id]=\"'tableRow_' + i\"\n                class=\"{{ (row.key | dashCase) + '-row' }}\"\n                (click)=\"configValue?.rowClick && _rowClick(row, i, $event)\"\n                (mouseenter)=\"configValue?.activateRowOnHover && _activateRow(row, i, $event)\"\n                (mouseleave)=\"configValue?.activateRowOnHover && _activateRow(null, null, $event)\"\n                [class]=\"[\n                  !!isRowSelectedFn()\n                    ? (row | rowSelection: selection(): isRowSelectedFn()!: customClasses().selectedRow)\n                    : '',\n                  rowActiveValue?.index === i ? customClasses().activeRow : ''\n                ]\"\n              >\n                <th class=\"row-header\" scope=\"row\">\n                  @if (row.value?.headerComponent) {\n                    <ng-container\n                      [ngComponentOutlet]=\"row.value.headerComponent!\"\n                      [ngComponentOutletInputs]=\"{\n                        column: row,\n                        sortable: false,\n                        sortOrder: sortOrderValue,\n                        search: searchValue,\n                        ...(row.value.headerComponentInputs || {})\n                      }\"\n                    ></ng-container>\n                  } @else if (row.value?.headerTemplateRef) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"row.value.headerTemplateRef\"\n                      [ngTemplateOutletContext]=\"{\n                        column: row,\n                        sortable: false,\n                        sortOrder: sortOrderValue,\n                        search: searchValue\n                      }\"\n                    ></ng-container>\n                  } @else {\n                    {{ row.value.header || row.key | capitalCase }}\n                  }\n                </th>\n                @for (column of (tableData?.data || [])[0]; track $index; let y = $index) {\n                  <td class=\"{{ row.value.class }}\">\n                    @if ((configValue.rows || {})[row.key].component) {\n                      <ng-container\n                        [ngComponentOutlet]=\"(configValue.rows || {})[row.key].component!\"\n                        [ngComponentOutletInputs]=\"{\n                          row: column,\n                          col: row,\n                          index: configValue.rows ? y : i,\n                          data: tableData.data[tableData.info.lazyLoaded ? 0 : paginationIdx],\n                          search: searchValue,\n                          ...((configValue.rows || {})[row.key].componentInputs || {})\n                        }\"\n                      ></ng-container>\n                    } @else {\n                      <ng-container\n                        [ngTemplateOutlet]=\"\n                          (configValue.rows || {})[row.key].templateRef\n                            ? templateRef\n                            : (configValue.rows || {})[row.key].transform\n                            ? transformData\n                            : rawData\n                        \"\n                        [ngTemplateOutletContext]=\"{\n                          row: column,\n                          column: row,\n                          transform: (configValue.rows || {})[row.key].transform,\n                          templateRef: (configValue.rows || {})[row.key].templateRef,\n                          index: configValue.rows ? y : i,\n                          data: tableData.data[tableData.info.lazyLoaded ? 0 : paginationIdx]\n                        }\"\n                      ></ng-container>\n                    }\n                  </td>\n                }\n              </tr>\n            }\n          }\n        }\n      </tbody>\n    } @else {\n      <tbody>\n        <tr>\n          <td class=\"p-0\" [colSpan]=\"colspanValue\">\n            <ng-content select=\".table-no-data\"></ng-content>\n          </td>\n        </tr>\n      </tbody>\n    }\n  }\n  @if (tableData && tableData.data.length > 0 && !isLoading) {\n    <tfoot>\n      @for (calculation of calculationsValue.calculations; track calculation; let i = $index) {\n        @let showHeader = colspanValue !== footerColspanValue;\n        <tr>\n          @if (showHeader) {\n            <th\n              [colSpan]=\"(colspanValue || 0) - (footerColspanValue || 0)\"\n              scope=\"row\"\n            >\n              @if (configValue?.footer?.headers?.[calculation]) {\n                {{ configValue.footer!.headers![calculation] === true ? (calculation | capitalCase) : configValue.footer!.headers![calculation] }}\n              }\n            </th>\n          }\n          @for (column of orderedColumns(); track column.key) {\n            @if (!column.value?.hidden && calculationsValue.calculated[column.key]) {\n              <td\n                class=\"{{ (column.key | dashCase) + '-column' }} {{ column.value.class }}\"\n                [attr.data-header]=\"\n                  !showHeader && configValue?.footer?.headers?.[calculation]\n                    ? configValue.footer!.headers![calculation] === true ? (calculation | capitalCase) : configValue.footer!.headers![calculation]\n                    : null\n                \"\n                [attr.data-label]=\"\n                  configValue?.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]=\"!calculationsValue.calculated[column.key][calculation]\"\n              >\n                @if ((configValue?.columns || {})[column.key].component) {\n                  <ng-container\n                    [ngComponentOutlet]=\"(configValue?.columns || {})[column.key].component!\"\n                    [ngComponentOutletInputs]=\"{\n                      value: calculationsValue.calculated[column.key][calculation],\n                      row: calculationsValue.calculated[column.key],\n                      col: column,\n                      column: calculation,\n                      index: i,\n                      search: searchValue,\n                      ...((configValue?.columns || {})[column.key].componentInputs || {})\n                    }\"\n                  ></ng-container>\n                } @else {\n                  <ng-container\n                    [ngTemplateOutlet]=\"\n                      (configValue?.columns || {})[column.key].templateRef\n                        ? templateRef\n                        : (configValue?.columns || {})[column.key].transform\n                        ? transformFooter\n                        : rawFooter\n                    \"\n                    [ngTemplateOutletContext]=\"{\n                      value: calculationsValue.calculated[column.key][calculation],\n                      row: calculationsValue.calculated[column.key],\n                      column: calculation,\n                      templateRef: (configValue?.columns || {})[column.key].templateRef,\n                      transform: (configValue?.columns || {})[column.key].transform\n                    }\"\n                  ></ng-container>\n                }\n              </td>\n            }\n          }\n        </tr>\n      }\n    </tfoot>\n  }\n</table>\n<ng-template\n  #highlighted\n  let-row=\"row\"\n  let-column=\"column\"\n  let-search=\"search\"\n  let-transform=\"transform\"\n>\n  @if (!transform) {\n    <div [innerHTML]=\"row[column.key] | highlight: search\"></div>\n  } @else {\n    <div [innerHTML]=\"row[column.key] | dynamicPipe: transform.pipe:transform?.args | highlight: search\"></div>\n  }\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  {{ (value | dynamicPipe: transform.pipe:transform?.args) || config()?.footer?.emptyContent }}\n</ng-template>\n<ng-template #rawFooter let-value=\"value\">\n  {{ value || config()?.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: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: CapitalCasePipe, name: "capitalCase" }, { kind: "pipe", type: SortClassPipe, name: "sortClass" }, { kind: "pipe", type: DashCasePipe, name: "dashCase" }, { kind: "pipe", type: RowSelectionPipe, name: "rowSelection" }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CoreComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'angular-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CapitalCasePipe,
+                        SortClassPipe,
+                        DashCasePipe,
+                        RowSelectionPipe,
+                        NgComponentOutlet,
+                        NgTemplateOutlet,
+                        SlicePipe,
+                        DynamicPipe,
+                        HighlightPipe,
+                    ], template: "@let tableData = table();\n@let configValue = config();\n@let isLoading = loading();\n@let sortOrderValue = sortOrder();\n@let searchValue = searchTerm();\n@let rowActiveValue = rowActiveState();\n@let calculationsValue = calculations();\n@let colspanValue = colspan();\n@let footerColspanValue = footerColspan();\n@let paginationIdx = boundedPaginationIndex();\n\n<table\n  [class]=\"configValue?.class || 'table'\"\n  [class.table-mobile]=\"configValue?.mobileLayout\"\n  [class.table-horizontal]=\"configValue?.rows\"\n  [class.table-loading]=\"isLoading\"\n  [class.gt-sticky-row-header]=\"configValue?.stickyHeaders?.row && configValue?.rows\"\n  [class.gt-sticky-column-header]=\"configValue?.stickyHeaders?.column\"\n  [attr.aria-busy]=\"isLoading === true ? true : null\"\n  [tabindex]=\"configValue?.activateRowOnKeyboardNavigation ? 0 : -1\"\n  #tableRef\n  (focus)=\"listenToKeyboardEvents()\"\n  (focusout)=\"unsubscribeFromKeyboardEvents(tableRef)\"\n  (mouseenter)=\"listenToKeyboardEvents()\"\n  (mouseleave)=\"unsubscribeFromKeyboardEvents(tableRef)\"\n>\n  <thead>\n    <tr>\n      @if (configValue?.columns) {\n        @for (column of orderedColumns(); track column.key) {\n          @if (!column.value?.hidden) {\n            <th\n              class=\"{{ (column.key | dashCase) + '-column' }} {{ column.value.class }}\"\n              [class.disabled]=\"isLoading\"\n              [attr.aria-sort]=\"sortOrderValue | sortClass: column.key:'aria'\"\n              [class.gt-sortable]=\"true\"\n              scope=\"col\"\n            >\n              @if (column.value?.headerReplaceFull && (column.value?.headerComponent || column.value?.headerTemplateRef)) {\n                @if (column.value.headerComponent) {\n                  <ng-container\n                    [ngComponentOutlet]=\"column.value.headerComponent!\"\n                    [ngComponentOutletInputs]=\"{\n                      column: column,\n                      sortable: !!column.value.sortable,\n                      sortOrder: sortOrderValue,\n                      search: searchValue,\n                      sort: headerSortFn(column.key),\n                      ...(column.value.headerComponentInputs || {})\n                    }\"\n                  ></ng-container>\n                } @else {\n                  <ng-container\n                    [ngTemplateOutlet]=\"column.value.headerTemplateRef!\"\n                    [ngTemplateOutletContext]=\"{\n                      column: column,\n                      sortable: !!column.value.sortable,\n                      sortOrder: sortOrderValue,\n                      search: searchValue,\n                      sort: headerSortFn(column.key)\n                    }\"\n                  ></ng-container>\n                }\n              } @else if (column.value?.sortable) {\n                <button\n                  [attr.data-sort-order]=\"sortOrderValue | sortClass: column.key:'order'\"\n                  class=\"gt-sort\"\n                  (click)=\"isLoading || !column.value.sortable || sortByKey(column.key, $event)\"\n                >\n                  @if (column.value?.headerComponent) {\n                    <ng-container\n                      [ngComponentOutlet]=\"column.value.headerComponent!\"\n                      [ngComponentOutletInputs]=\"{\n                        column: column,\n                        sortable: true,\n                        sortOrder: sortOrderValue,\n                        search: searchValue,\n                        ...(column.value.headerComponentInputs || {})\n                      }\"\n                    ></ng-container>\n                  } @else if (column.value?.headerTemplateRef) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"column.value.headerTemplateRef\"\n                      [ngTemplateOutletContext]=\"{\n                        column: column,\n                        sortable: true,\n                        sortOrder: sortOrderValue,\n                        search: searchValue\n                      }\"\n                    ></ng-container>\n                  } @else if (column.value?.header !== false) {\n                    <span>{{ column.value.header || column.key | capitalCase }}</span>\n                  }\n                </button>\n              } @else {\n                @if (column.value?.headerComponent) {\n                  <ng-container\n                    [ngComponentOutlet]=\"column.value.headerComponent!\"\n                    [ngComponentOutletInputs]=\"{\n                      column: column,\n                      sortable: false,\n                      sortOrder: sortOrderValue,\n                      search: searchValue,\n                      ...(column.value.headerComponentInputs || {})\n                    }\"\n                  ></ng-container>\n                } @else if (column.value?.headerTemplateRef) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"column.value.headerTemplateRef\"\n                    [ngTemplateOutletContext]=\"{\n                      column: column,\n                      sortable: false,\n                      sortOrder: sortOrderValue,\n                      search: searchValue\n                    }\"\n                  ></ng-container>\n                } @else if (column.value?.header !== false) {\n                  <span>{{ column.value.header || column.key | capitalCase }}</span>\n                }\n              }\n            </th>\n          }\n        }\n      }\n      @if (configValue?.rows) {\n        @let headerRow = orderedRows()[0];\n        @if (headerRow) {\n          <th\n            class=\"row-header\"\n            [attr.aria-sort]=\"sortOrderValue | sortClass: headerRow.key:'aria'\"\n            class=\"{{ headerRow.value.sortable ? 'sort ' : '' }} {{ sortOrderValue | sortClass: headerRow.key }} {{ (headerRow.key | dashCase) + '-column' }}\"\n            (click)=\"isLoading || !headerRow.value.sortable || sortByKey(headerRow.key, $event)\"\n            scope=\"col\"\n          >\n            @if (headerRow.value?.headerComponent) {\n              <ng-container\n                [ngComponentOutlet]=\"headerRow.value.headerComponent!\"\n                [ngComponentOutletInputs]=\"{\n                  column: headerRow,\n                  sortable: !!headerRow.value.sortable,\n                  sortOrder: sortOrderValue,\n                  search: searchValue,\n                  sort: headerSortFn(headerRow.key),\n                  ...(headerRow.value.headerComponentInputs || {})\n                }\"\n              ></ng-container>\n            } @else if (headerRow.value?.headerTemplateRef) {\n              <ng-container\n                [ngTemplateOutlet]=\"headerRow.value.headerTemplateRef\"\n                [ngTemplateOutletContext]=\"{\n                  column: headerRow,\n                  sortable: !!headerRow.value.sortable,\n                  sortOrder: sortOrderValue,\n                  search: searchValue,\n                  sort: headerSortFn(headerRow.key)\n                }\"\n              ></ng-container>\n            } @else if (headerRow?.value?.header !== false) {\n              {{ headerRow?.value?.header || headerRow.key | capitalCase }}\n            }\n          </th>\n          @for (column of (tableData?.data || [])[0]; track $index) {\n            <th class=\"{{ headerRow.value.class }}\">\n              @if ((configValue.rows || {})[headerRow.key].component) {\n                <ng-container\n                  [ngComponentOutlet]=\"(configValue.rows || {})[headerRow.key].component!\"\n                  [ngComponentOutletInputs]=\"{\n                    row: column,\n                    col: headerRow,\n                    index: 0,\n                    data: (tableData?.data || [])[0],\n                    search: searchValue,\n                    ...((configValue.rows || {})[headerRow.key].componentInputs || {})\n                  }\"\n                ></ng-container>\n              } @else {\n                <ng-container\n                  [ngTemplateOutlet]=\"\n                    (configValue.rows || {})[headerRow.key].templateRef\n                      ? templateRef\n                      : (configValue.rows || {})[headerRow.key].transform\n                      ? transformData\n                      : rawData\n                  \"\n                  [ngTemplateOutletContext]=\"{\n                    row: column,\n                    column: headerRow,\n                    transform: (configValue.rows || {})[headerRow.key].transform,\n                    templateRef: (configValue.rows || {})[headerRow.key].templateRef,\n                    index: 0\n                  }\"\n                ></ng-container>\n              }\n            </th>\n          }\n        }\n      }\n    </tr>\n  </thead>\n  @if (isLoading) {\n    <tbody>\n      <tr>\n        <td class=\"p-0\" [colSpan]=\"colspanValue\">\n          <ng-content select=\".table-loading\"></ng-content>\n        </td>\n      </tr>\n    </tbody>\n  } @else {\n    @if (tableData && (tableData.data[0] || tableData.data).length > 0) {\n      <tbody>\n        @if (configValue?.columns) {\n          @for (row of tableData.data[tableData.info.lazyLoaded ? 0 : paginationIdx]; track trackRowByFn($index, row); let i = $index) {\n            <tr\n              [attr.id]=\"'tableRow_' + i\"\n              (click)=\"configValue?.rowClick && _rowClick(row, i, $event)\"\n              (mouseenter)=\"configValue?.activateRowOnHover && _activateRow(row, i, $event)\"\n              (mouseleave)=\"configValue?.activateRowOnHover && _activateRow(null, null, $event)\"\n              [class]=\"[\n                !!isRowSelectedFn()\n                  ? (row | rowSelection: selection(): isRowSelectedFn()!: customClasses().selectedRow)\n                  : '',\n                rowActiveValue?.index === i ? customClasses().activeRow : ''\n              ]\"\n            >\n              @for (column of orderedColumns(); track column.key) {\n                @if (!column.value?.hidden) {\n                  <td\n                    class=\"{{ (column.key | dashCase) + '-column' }} {{ column.value.class }}\"\n                    [attr.data-label]=\"\n                      configValue.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                    @if ((configValue.columns || {})[column.key].component) {\n                      <ng-container\n                        [ngComponentOutlet]=\"(configValue.columns || {})[column.key].component!\"\n                        [ngComponentOutletInputs]=\"{\n                          row: row,\n                          col: column,\n                          index: i,\n                          data: tableData.data[tableData.info.lazyLoaded ? 0 : paginationIdx],\n                          search: searchValue,\n                          ...((configValue.columns || {})[column.key].componentInputs || {})\n                        }\"\n                      ></ng-container>\n                    } @else {\n                      <ng-container\n                        [ngTemplateOutlet]=\"\n                          searchValue && !(configValue.columns || {})[column.key].templateRef\n                            ? highlighted\n                            : (configValue.columns || {})[column.key].templateRef\n                            ? templateRef\n                            : (configValue.columns || {})[column.key].transform\n                            ? transformData\n                            : rawData\n                        \"\n                        [ngTemplateOutletContext]=\"{\n                          row: row,\n                          column: column,\n                          search: searchValue,\n                          transform: (configValue.columns || {})[column.key].transform,\n                          templateRef: (configValue.columns || {})[column.key].templateRef,\n                          index: i,\n                          data: tableData.data[tableData.info.lazyLoaded ? 0 : paginationIdx]\n                        }\"\n                      ></ng-container>\n                    }\n                  </td>\n                }\n              }\n            </tr>\n          }\n        }\n        @if (configValue?.rows) {\n          @for (row of orderedRows() | slice: 1; track row.key; let i = $index) {\n            @if (!row.value?.hidden) {\n              <tr\n                [attr.id]=\"'tableRow_' + i\"\n                class=\"{{ (row.key | dashCase) + '-row' }}\"\n                (click)=\"configValue?.rowClick && _rowClick(row, i, $event)\"\n                (mouseenter)=\"configValue?.activateRowOnHover && _activateRow(row, i, $event)\"\n                (mouseleave)=\"configValue?.activateRowOnHover && _activateRow(null, null, $event)\"\n                [class]=\"[\n                  !!isRowSelectedFn()\n                    ? (row | rowSelection: selection(): isRowSelectedFn()!: customClasses().selectedRow)\n                    : '',\n                  rowActiveValue?.index === i ? customClasses().activeRow : ''\n                ]\"\n              >\n                <th class=\"row-header\" scope=\"row\">\n                  @if (row.value?.headerComponent) {\n                    <ng-container\n                      [ngComponentOutlet]=\"row.value.headerComponent!\"\n                      [ngComponentOutletInputs]=\"{\n                        column: row,\n                        sortable: false,\n                        sortOrder: sortOrderValue,\n                        search: searchValue,\n                        ...(row.value.headerComponentInputs || {})\n                      }\"\n                    ></ng-container>\n                  } @else if (row.value?.headerTemplateRef) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"row.value.headerTemplateRef\"\n                      [ngTemplateOutletContext]=\"{\n                        column: row,\n                        sortable: false,\n                        sortOrder: sortOrderValue,\n                        search: searchValue\n                      }\"\n                    ></ng-container>\n                  } @else {\n                    {{ row.value.header || row.key | capitalCase }}\n                  }\n                </th>\n                @for (column of (tableData?.data || [])[0]; track $index; let y = $index) {\n                  <td class=\"{{ row.value.class }}\">\n                    @if ((configValue.rows || {})[row.key].component) {\n                      <ng-container\n                        [ngComponentOutlet]=\"(configValue.rows || {})[row.key].component!\"\n                        [ngComponentOutletInputs]=\"{\n                          row: column,\n                          col: row,\n                          index: configValue.rows ? y : i,\n                          data: tableData.data[tableData.info.lazyLoaded ? 0 : paginationIdx],\n                          search: searchValue,\n                          ...((configValue.rows || {})[row.key].componentInputs || {})\n                        }\"\n                      ></ng-container>\n                    } @else {\n                      <ng-container\n                        [ngTemplateOutlet]=\"\n                          (configValue.rows || {})[row.key].templateRef\n                            ? templateRef\n                            : (configValue.rows || {})[row.key].transform\n                            ? transformData\n                            : rawData\n                        \"\n                        [ngTemplateOutletContext]=\"{\n                          row: column,\n                          column: row,\n                          transform: (configValue.rows || {})[row.key].transform,\n                          templateRef: (configValue.rows || {})[row.key].templateRef,\n                          index: configValue.rows ? y : i,\n                          data: tableData.data[tableData.info.lazyLoaded ? 0 : paginationIdx]\n                        }\"\n                      ></ng-container>\n                    }\n                  </td>\n                }\n              </tr>\n            }\n          }\n        }\n      </tbody>\n    } @else {\n      <tbody>\n        <tr>\n          <td class=\"p-0\" [colSpan]=\"colspanValue\">\n            <ng-content select=\".table-no-data\"></ng-content>\n          </td>\n        </tr>\n      </tbody>\n    }\n  }\n  @if (tableData && tableData.data.length > 0 && !isLoading) {\n    <tfoot>\n      @for (calculation of calculationsValue.calculations; track calculation; let i = $index) {\n        @let showHeader = colspanValue !== footerColspanValue;\n        <tr>\n          @if (showHeader) {\n            <th\n              [colSpan]=\"(colspanValue || 0) - (footerColspanValue || 0)\"\n              scope=\"row\"\n            >\n              @if (configValue?.footer?.headers?.[calculation]) {\n                {{ configValue.footer!.headers![calculation] === true ? (calculation | capitalCase) : configValue.footer!.headers![calculation] }}\n              }\n            </th>\n          }\n          @for (column of orderedColumns(); track column.key) {\n            @if (!column.value?.hidden && calculationsValue.calculated[column.key]) {\n              <td\n                class=\"{{ (column.key | dashCase) + '-column' }} {{ column.value.class }}\"\n                [attr.data-header]=\"\n                  !showHeader && configValue?.footer?.headers?.[calculation]\n                    ? configValue.footer!.headers![calculation] === true ? (calculation | capitalCase) : configValue.footer!.headers![calculation]\n                    : null\n                \"\n                [attr.data-label]=\"\n                  configValue?.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]=\"!calculationsValue.calculated[column.key][calculation]\"\n              >\n                @if ((configValue?.columns || {})[column.key].component) {\n                  <ng-container\n                    [ngComponentOutlet]=\"(configValue?.columns || {})[column.key].component!\"\n                    [ngComponentOutletInputs]=\"{\n                      value: calculationsValue.calculated[column.key][calculation],\n                      row: calculationsValue.calculated[column.key],\n                      col: column,\n                      column: calculation,\n                      index: i,\n                      search: searchValue,\n                      ...((configValue?.columns || {})[column.key].componentInputs || {})\n                    }\"\n                  ></ng-container>\n                } @else {\n                  <ng-container\n                    [ngTemplateOutlet]=\"\n                      (configValue?.columns || {})[column.key].templateRef\n                        ? templateRef\n                        : (configValue?.columns || {})[column.key].transform\n                        ? transformFooter\n                        : rawFooter\n                    \"\n                    [ngTemplateOutletContext]=\"{\n                      value: calculationsValue.calculated[column.key][calculation],\n                      row: calculationsValue.calculated[column.key],\n                      column: calculation,\n                      templateRef: (configValue?.columns || {})[column.key].templateRef,\n                      transform: (configValue?.columns || {})[column.key].transform\n                    }\"\n                  ></ng-container>\n                }\n              </td>\n            }\n          }\n        </tr>\n      }\n    </tfoot>\n  }\n</table>\n<ng-template\n  #highlighted\n  let-row=\"row\"\n  let-column=\"column\"\n  let-search=\"search\"\n  let-transform=\"transform\"\n>\n  @if (!transform) {\n    <div [innerHTML]=\"row[column.key] | highlight: search\"></div>\n  } @else {\n    <div [innerHTML]=\"row[column.key] | dynamicPipe: transform.pipe:transform?.args | highlight: search\"></div>\n  }\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  {{ (value | dynamicPipe: transform.pipe:transform?.args) || config()?.footer?.emptyContent }}\n</ng-template>\n<ng-template #rawFooter let-value=\"value\">\n  {{ value || config()?.footer?.emptyContent }}\n</ng-template>\n<ng-template\n  #templateRef\n  let-row=\"row\"\n  let-column=\"column\"\n  let-index=\"index\"\n  let-templateRef=\"templateRef\"\n  let-data=\"data\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"templateRef\"\n    [ngTemplateOutletContext]=\"{\n      row: row,\n      col: column,\n      index: index,\n      data: data\n    }\"\n  ></ng-container>\n</ng-template>\n" }]
+        }], propDecorators: { navigationKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationKeys", required: false }] }], selectKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectKeys", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], sortOrderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOrder", required: false }] }], paginationIndexInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationIndex", required: false }] }], pagingInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagingInfo", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], rowIdKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIdKey", required: false }] }], generateRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "generateRowId", required: false }] }], trackRowByFnInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackRowByFn", required: false }] }], isRowSelectedFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRowSelectedFn", required: false }] }], customClassesInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClasses", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowSelect: [{ type: i0.Output, args: ["rowSelect"] }], sortOrderChange: [{ type: i0.Output, args: ["sortOrderChange"] }], rowActiveOutput: [{ type: i0.Output, args: ["rowActive"] }], columnSort: [{ type: i0.Output, args: ["columnSort"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
+
+class GtDeltaComponent {
+    constructor() {
+        this.data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        this.index = input(0, ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+        this.baseIndex = input(undefined, ...(ngDevMode ? [{ debugName: "baseIndex" }] : /* istanbul ignore next */ []));
+        this.classes = input({
+            span: 'gt-delta',
+            positive: 'text-success',
+            negative: 'text-danger',
+        }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+        this.key = input('value', ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+        this.notApplicableValue = input(null, ...(ngDevMode ? [{ debugName: "notApplicableValue" }] : /* istanbul ignore next */ []));
+        this.initialValue = input(null, ...(ngDevMode ? [{ debugName: "initialValue" }] : /* istanbul ignore next */ []));
+        this.deltaTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "deltaTemplate" }] : /* istanbul ignore next */ []));
+        this.value = computed(() => {
+            const data = this.data();
+            if (!data || data.length === 0)
+                return undefined;
+            const index = this.index();
+            const baseIndex = this.baseIndex();
+            const key = this.key();
+            const initialValue = this.initialValue();
+            const deltaValue = index === 0
+                ? initialValue
+                : data[index][key] -
+                    (baseIndex === undefined
+                        ? data[index - 1][key]
+                        : data[baseIndex][key]);
+            const baseValue = index === 0
+                ? 1
+                : baseIndex === undefined
+                    ? data[index - 1][key]
+                    : data[baseIndex][key];
+            const relative = index === 0
+                ? initialValue
+                : Math.sign(deltaValue) *
+                    Math.abs(deltaValue / baseValue);
+            return {
+                relative: Number.isFinite(relative)
+                    ? relative
+                    : index === 0
+                        ? initialValue
+                        : this.notApplicableValue(),
+                absolute: deltaValue,
+            };
+        }, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: GtDeltaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: GtDeltaComponent, isStandalone: true, selector: "gt-delta", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, baseIndex: { classPropertyName: "baseIndex", publicName: "baseIndex", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, notApplicableValue: { classPropertyName: "notApplicableValue", publicName: "notApplicableValue", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, deltaTemplate: { classPropertyName: "deltaTemplate", publicName: "deltaTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @let delta = value();
+    @if (delta) {
+      <span
+        [class]="[
+          classes().span,
+          delta.absolute > 0
+            ? classes().positive
+            : delta.absolute < 0
+            ? classes().negative
+            : null
+        ]"
+        [class.gt-delta-positive]="delta.absolute > 0"
+        [class.gt-delta-negative]="delta.absolute < 0"
+      >
+        <ng-container
+          [ngTemplateOutlet]="deltaTemplate() || defaultTemplate"
+          [ngTemplateOutletContext]="{ delta }"
+        ></ng-container>
+      </span>
+      <ng-template #defaultTemplate let-delta="delta">
+        @if (delta.relative !== null && delta.relative !== undefined) {
+          @if (typeof delta.relative === 'number') {
+            <span>{{ delta.relative | percent: '1.0-2' }}</span>
+          } @else {
+            <span>{{ delta.relative }}</span>
+          }
+        }
+      </ng-template>
+    }
+  `, isInline: true, styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: PercentPipe, name: "percent" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: GtDeltaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gt-delta', template: `
+    @let delta = value();
+    @if (delta) {
+      <span
+        [class]="[
+          classes().span,
+          delta.absolute > 0
+            ? classes().positive
+            : delta.absolute < 0
+            ? classes().negative
+            : null
+        ]"
+        [class.gt-delta-positive]="delta.absolute > 0"
+        [class.gt-delta-negative]="delta.absolute < 0"
+      >
+        <ng-container
+          [ngTemplateOutlet]="deltaTemplate() || defaultTemplate"
+          [ngTemplateOutletContext]="{ delta }"
+        ></ng-container>
+      </span>
+      <ng-template #defaultTemplate let-delta="delta">
+        @if (delta.relative !== null && delta.relative !== undefined) {
+          @if (typeof delta.relative === 'number') {
+            <span>{{ delta.relative | percent: '1.0-2' }}</span>
+          } @else {
+            <span>{{ delta.relative }}</span>
+          }
+        }
+      </ng-template>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PercentPipe, NgTemplateOutlet], styles: [":host{display:inline-block}\n"] }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], baseIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseIndex", required: false }] }], classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], notApplicableValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "notApplicableValue", required: false }] }], initialValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValue", required: false }] }], deltaTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaTemplate", required: false }] }] } });
+
+class GenericTableCoreModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: GenericTableCoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: GenericTableCoreModule, imports: [CoreComponent, GtDeltaComponent], exports: [CoreComponent, GtDeltaComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: GenericTableCoreModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: GenericTableCoreModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CoreComponent, GtDeltaComponent],
+                    exports: [CoreComponent, GtDeltaComponent],
+                }]
+        }] });
+
+class PaginationComponent {
+    constructor() {
+        this.table = input.required(...(ngDevMode ? [{ debugName: "table" }] : /* istanbul ignore next */ []));
+        this.pagingInfo = input(undefined, ...(ngDevMode ? [{ debugName: "pagingInfo" }] : /* istanbul ignore next */ []));
+        this.paginationLength = input(5, ...(ngDevMode ? [{ debugName: "paginationLength" }] : /* istanbul ignore next */ []));
+        this.classes = input({
+            ul: 'pagination',
+            li: 'page-item',
+            button: 'page-link',
+        }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+        this.ariaLabels = input({
+            nav: 'Table pagination',
+            button: 'Go to page ',
+        }, ...(ngDevMode ? [{ debugName: "ariaLabels" }] : /* istanbul ignore next */ []));
+        /** Page numbers to display in the pagination component */
+        this.paginationListItems = computed(() => {
+            const tbl = this.table();
+            const info = tbl.tableInfoSignal();
+            const currentPage = tbl.boundedPaginationIndex();
+            return this._generateList(info.pageTotal, currentPage);
+        }, ...(ngDevMode ? [{ debugName: "paginationListItems" }] : /* istanbul ignore next */ []));
+        /** Current page from the table */
+        this.currentPosition = computed(() => {
+            return this.table().boundedPaginationIndex();
+        }, ...(ngDevMode ? [{ debugName: "currentPosition" }] : /* istanbul ignore next */ []));
+    }
+    _generateList(numberOfPages, currentPosition) {
+        const paginationLen = this.paginationLength();
+        const middle = Math.floor(paginationLen / 2);
+        const length = numberOfPages < paginationLen ? numberOfPages : paginationLen;
+        return Array.from({ length }, (_, i) => {
+            if (i === 0) {
+                return 1;
+            }
+            else if (numberOfPages < paginationLen) {
+                return i + 1;
+            }
+            else if (i + 1 === length) {
+                return numberOfPages;
+            }
+            else if (currentPosition > middle &&
+                currentPosition < numberOfPages - middle) {
+                return i + currentPosition - (middle - 1);
+            }
+            else if (currentPosition > middle &&
+                currentPosition < numberOfPages - (middle - 1)) {
+                return i + currentPosition - middle;
+            }
+            else if (currentPosition > middle &&
+                currentPosition === numberOfPages - (middle - 1)) {
+                return i + currentPosition - (middle + 1);
+            }
+            else if (currentPosition > middle &&
+                currentPosition === numberOfPages - 1) {
+                return i + currentPosition - (middle + 2);
+            }
+            else {
+                return i + 1;
+            }
+        });
+    }
+    goToPage(index) {
+        const tbl = this.table();
+        if (tbl) {
+            tbl.paginationIndex = index - 1;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: PaginationComponent, isStandalone: true, selector: "angular-generic-table-pagination", inputs: { table: { classPropertyName: "table", publicName: "table", isSignal: true, isRequired: true, transformFunction: null }, pagingInfo: { classPropertyName: "pagingInfo", publicName: "pagingInfo", isSignal: true, isRequired: false, transformFunction: null }, paginationLength: { classPropertyName: "paginationLength", publicName: "paginationLength", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null }, ariaLabels: { classPropertyName: "ariaLabels", publicName: "ariaLabels", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let links = paginationListItems();\n@let currentPos = currentPosition();\n@let classesValue = classes();\n@let ariaLabelsValue = ariaLabels();\n\n@if (links && links.length > 1) {\n  <nav\n    role=\"navigation\"\n    [attr.aria-label]=\"ariaLabelsValue.nav\"\n    class=\"gt-pagination\"\n    [class]=\"classesValue.nav\"\n  >\n    <ul [class]=\"classesValue.ul\">\n      @for (position of links; track position; let i = $index; let last = $last) {\n        <li\n          [class]=\"classesValue.li\"\n          [class.active]=\"position === (currentPos || 0) + 1\"\n        >\n          <button\n            [class]=\"classesValue.button\"\n            [attr.aria-label]=\"ariaLabelsValue.button + position\"\n            (click)=\"goToPage(position)\"\n          >\n            {{ position }}\n          </button>\n        </li>\n        @if (position + 1 !== links[i + 1] && !last) {\n          <li [class]=\"classesValue.li\" class=\"gt-ellipsis\">\n            <button [class]=\"classesValue.button\" disabled tabindex=\"-1\"></button>\n          </li>\n        }\n      }\n    </ul>\n  </nav>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: PaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'angular-generic-table-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "@let links = paginationListItems();\n@let currentPos = currentPosition();\n@let classesValue = classes();\n@let ariaLabelsValue = ariaLabels();\n\n@if (links && links.length > 1) {\n  <nav\n    role=\"navigation\"\n    [attr.aria-label]=\"ariaLabelsValue.nav\"\n    class=\"gt-pagination\"\n    [class]=\"classesValue.nav\"\n  >\n    <ul [class]=\"classesValue.ul\">\n      @for (position of links; track position; let i = $index; let last = $last) {\n        <li\n          [class]=\"classesValue.li\"\n          [class.active]=\"position === (currentPos || 0) + 1\"\n        >\n          <button\n            [class]=\"classesValue.button\"\n            [attr.aria-label]=\"ariaLabelsValue.button + position\"\n            (click)=\"goToPage(position)\"\n          >\n            {{ position }}\n          </button>\n        </li>\n        @if (position + 1 !== links[i + 1] && !last) {\n          <li [class]=\"classesValue.li\" class=\"gt-ellipsis\">\n            <button [class]=\"classesValue.button\" disabled tabindex=\"-1\"></button>\n          </li>\n        }\n      }\n    </ul>\n  </nav>\n}\n" }]
+        }], propDecorators: { table: [{ type: i0.Input, args: [{ isSignal: true, alias: "table", required: true }] }], pagingInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagingInfo", required: false }] }], paginationLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationLength", required: false }] }], classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }], ariaLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabels", required: false }] }] } });
+
+class GenericTablePaginationModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: GenericTablePaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: GenericTablePaginationModule, imports: [CommonModule, PaginationComponent], exports: [PaginationComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: GenericTablePaginationModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: GenericTablePaginationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, PaginationComponent],
+                    exports: [PaginationComponent],
+                }]
+        }] });
+
+/*
+ * Public API Surface of core
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CapitalCasePipe, CoreComponent, DashCasePipe, DynamicPipe, GenericTableCoreModule, GenericTablePaginationModule, GtDeltaComponent, HighlightPipe, PaginationComponent, SortClassPipe, calculate, capitalize, chunk, dashed, parseSortOrderParams, search, sortOnMultipleKeys, sortOrderConfigToParam, sortOrderToParams };
+//# sourceMappingURL=angular-generic-table-core.mjs.map