@den4ik92/ng2-smart-table 3.0.0 → 3.0.2

package/fesm2022/den4ik92-ng2-smart-table.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, Input, Output, ViewContainerRef, ViewChild, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { Subject } from 'rxjs';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { FormsModule, UntypedFormControl, NgControl, ReactiveFormsModule } from '@angular/forms';
-import { Subject } from 'rxjs';
+import { UntypedFormControl, NgControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { debounceTime, distinctUntilChanged, skip } from 'rxjs/operators';
 
 function prepareValue(value) { return value; }
@@ -50,135 +50,32 @@ class Cell {
     }
 }
 
-class Row {
-    constructor(index, data, _dataSet) {
-        this.index = index;
-        this.data = data;
-        this._dataSet = _dataSet;
-        this.pending = false;
-        this.isSelected = false;
-        this.isInEditing = false;
-        this.cells = [];
-        this.process();
-    }
-    getCell(column) {
-        return this.cells.find(el => el.getColumn() === column);
-    }
-    getCells() {
-        return this.cells;
-    }
-    getData() {
-        return this.data;
-    }
-    getIsSelected() {
-        return this.isSelected;
-    }
-    getNewData() {
-        const values = Object.assign({}, this.data);
-        this.getCells().forEach((cell) => values[cell.getColumn().id] = cell.newValue);
-        return values;
-    }
-    setData(data) {
-        this.data = data;
-        this.process();
-    }
-    process() {
-        this.cells = [];
-        this._dataSet.getColumns().forEach((column) => {
-            const cell = this.createCell(column);
-            this.cells.push(cell);
-        });
-    }
-    createCell(column) {
-        const defValue = column.settings.defaultValue ? column.settings.defaultValue : '';
-        const value = typeof this.data[column.id] === 'undefined' ? defValue : this.data[column.id];
-        return new Cell(value, this, column, this._dataSet);
-    }
-}
-
-/**
- * Extending object that entered in first argument.
- *
- * Returns extended object or false if have no target object or incorrect type.
- *
- * If you wish to clone source object (without modify it), just use empty new
- * object as first argument, like this:
- *   deepExtend({}, yourObj_1, [yourObj_N]);
- */
-const deepExtend = function (...objects) {
-    if (arguments.length < 1 || typeof arguments[0] !== 'object') {
-        return false;
-    }
-    if (arguments.length < 2) {
-        return arguments[0];
-    }
-    const target = arguments[0];
-    // convert arguments to array and cut off target object
-    const args = Array.prototype.slice.call(arguments, 1);
-    let val, src;
-    args.forEach((obj) => {
-        // skip argument if it is array or isn't object
-        if (typeof obj !== 'object' || Array.isArray(obj)) {
-            return;
-        }
-        Object.keys(obj).forEach(function (key) {
-            src = target[key]; // source value
-            val = obj[key]; // new value
-            // recursion prevention
-            if (val === target) {
-                return;
-                /**
-                 * if new value isn't object then just overwrite by new value
-                 * instead of extending.
-                 */
-            }
-            else if (typeof val !== 'object' || val === null) {
-                target[key] = val;
-                return;
-                // just clone arrays (and recursive clone objects inside)
-            }
-            else if (Array.isArray(val)) {
-                target[key] = [...val];
-                return;
-                // overwrite by new value if source isn't object or array
-            }
-            else if (typeof src !== 'object' || src === null || Array.isArray(src)) {
-                target[key] = deepExtend({}, val);
-                return;
-                // source value and new value is objects both, extending...
-            }
-            else {
-                target[key] = deepExtend(src, val);
-                return;
-            }
-        });
-    });
-    return target;
-};
-class Deferred {
+class DefaultEditor {
     constructor() {
-        this.promise = new Promise((resolve, reject) => {
-            this.resolve = resolve;
-            this.reject = reject;
-        });
+        this.inputClass = '';
+        this.onStopEditing = new EventEmitter();
+        this.onEdited = new EventEmitter();
+        this.onClick = new EventEmitter();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultEditor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DefaultEditor, selector: "ng-component", inputs: { cell: "cell", inputClass: "inputClass" }, outputs: { onStopEditing: "onStopEditing", onEdited: "onEdited", onClick: "onClick" }, ngImport: i0, template: '', isInline: true }); }
 }
-// getDeepFromObject({result: {data: 1}}, 'result.data', 2); // returns 1
-function getDeepFromObject(object = {}, name, defaultValue = null) {
-    const keys = name.split('.');
-    // clone the object
-    let level = deepExtend({}, object);
-    keys.forEach((k) => {
-        if (level && typeof level[k] !== 'undefined') {
-            level = level[k];
-        }
-    });
-    return typeof level === 'undefined' ? defaultValue : level;
-}
-function getPageForRowIndex(index, perPage) {
-    // we need to add 1 to convert 0-based index to 1-based page number.
-    return Math.floor(index / perPage) + 1;
-}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultEditor, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                }]
+        }], propDecorators: { cell: [{
+                type: Input
+            }], inputClass: [{
+                type: Input
+            }], onStopEditing: [{
+                type: Output
+            }], onEdited: [{
+                type: Output
+            }], onClick: [{
+                type: Output
+            }] } });
 
 class Column {
     constructor(id, settings, dataSet) {
@@ -254,1941 +151,1548 @@ class Column {
     }
 }
 
-class DataSet {
-    constructor(data = [], columnSettings) {
-        this.columnSettings = columnSettings;
-        this.data = [];
-        this.columns = [];
-        this.rows = [];
-        this.selectedRows = new Set();
-        this.createColumns(columnSettings);
-        this.setData(data);
-        this.createNewRow();
+class DefaultFilter {
+    constructor() {
+        this.delay = 300;
+        this.query = '';
+        this.inputClass = '';
+        this.filter = new EventEmitter();
     }
-    setData(data) {
+    ngOnDestroy() {
+        if (this.changesSubscription) {
+            this.changesSubscription.unsubscribe();
+        }
+    }
+    setFilter() {
+        this.filter.emit(this.query);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultFilter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DefaultFilter, selector: "ng-component", inputs: { query: "query", inputClass: "inputClass", column: "column" }, outputs: { filter: "filter" }, ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultFilter, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                }]
+        }], propDecorators: { query: [{
+                type: Input
+            }], inputClass: [{
+                type: Input
+            }], column: [{
+                type: Input
+            }], filter: [{
+                type: Output
+            }] } });
+
+class Row {
+    constructor(index, data, _dataSet) {
+        this.index = index;
         this.data = data;
-        this.createRows();
+        this._dataSet = _dataSet;
+        this.pending = false;
+        this.isSelected = false;
+        this.isInEditing = false;
+        this.cells = [];
+        this.process();
     }
-    getColumns() {
-        return this.columns;
+    getCell(column) {
+        return this.cells.find(el => el.getColumn() === column);
     }
-    getRows() {
-        return this.rows;
+    getCells() {
+        return this.cells;
     }
-    getFirstRow() {
-        return this.rows[0];
+    getData() {
+        return this.data;
     }
-    getLastRow() {
-        return this.rows[this.rows.length - 1];
+    getIsSelected() {
+        return this.isSelected;
     }
-    findRowByData(data) {
-        return this.rows.find((row) => row.getData() === data);
+    getNewData() {
+        const values = Object.assign({}, this.data);
+        this.getCells().forEach((cell) => values[cell.getColumn().id] = cell.newValue);
+        return values;
     }
-    setSelectAll(state) {
-        this.rows.forEach((row) => {
-            row.isSelected = state;
-            this.storeSelectedRow(row);
-        });
+    setData(data) {
+        this.data = data;
+        this.process();
     }
-    deselectAll() {
-        this.rows.forEach((row) => {
-            row.isSelected = false;
+    process() {
+        this.cells = [];
+        this._dataSet.getColumns().forEach((column) => {
+            const cell = this.createCell(column);
+            this.cells.push(cell);
         });
-        // we need to clear selectedRow field because no one row selected
-        this.selectedRows.clear();
-    }
-    selectRow(row, state) {
-        row.isSelected = state;
-        this.storeSelectedRow(row);
     }
-    multipleSelectRow(row) {
-        row.isSelected = !row.isSelected;
-        this.storeSelectedRow(row);
-        return row;
+    createCell(column) {
+        const defValue = column.settings.defaultValue ? column.settings.defaultValue : '';
+        const value = typeof this.data[column.id] === 'undefined' ? defValue : this.data[column.id];
+        return new Cell(value, this, column, this._dataSet);
     }
-    getSelectedRowsData() {
-        return [...this.selectedRows];
+}
+
+var SmartTableOnChangedEventName;
+(function (SmartTableOnChangedEventName) {
+    SmartTableOnChangedEventName["load"] = "load";
+    SmartTableOnChangedEventName["paging"] = "paging";
+    SmartTableOnChangedEventName["update"] = "update";
+    SmartTableOnChangedEventName["page"] = "page";
+    SmartTableOnChangedEventName["filter"] = "filter";
+    SmartTableOnChangedEventName["empty"] = "empty";
+    SmartTableOnChangedEventName["sort"] = "sort";
+    SmartTableOnChangedEventName["add"] = "add";
+    SmartTableOnChangedEventName["remove"] = "remove";
+    SmartTableOnChangedEventName["append"] = "append";
+    SmartTableOnChangedEventName["prepend"] = "prepend";
+    SmartTableOnChangedEventName["refresh"] = "refresh";
+})(SmartTableOnChangedEventName || (SmartTableOnChangedEventName = {}));
+
+class DataSource {
+    constructor() {
+        this.onChangedSource = new Subject();
+        this.onAddedSource = new Subject();
+        this.onUpdatedSource = new Subject();
+        this.onRemovedSource = new Subject();
     }
-    createNewRow() {
-        this.newRow = new Row(-1, {}, this);
-        this.newRow.isInEditing = true;
+    refresh() {
+        this.emitOnChanged(SmartTableOnChangedEventName.refresh);
     }
-    /**
-     * Create columns by mapping from the settings
-     * @param settings
-     * @private
-     */
-    createColumns(settings) {
-        settings.forEach((columnSettings) => {
-            this.columns.push(new Column(columnSettings.key, columnSettings, this));
-        });
+    loadEmit() {
+        this.emitOnChanged(SmartTableOnChangedEventName.load);
+        return Promise.resolve(true);
     }
-    /**
-     * Create rows based on current data prepared in data source
-     * @private
-     */
-    createRows() {
-        this.rows = [];
-        this.data.forEach((el, index) => {
-            const row = new Row(index, el, this);
-            row.isSelected = this.selectedRows.has(row.getData());
-            this.rows.push(row);
-        });
+    onChanged() {
+        return this.onChangedSource.asObservable();
     }
-    get isAllSelected() {
-        return this.rows.every((row) => row.isSelected);
+    onAdded() {
+        return this.onAddedSource.asObservable();
     }
-    storeSelectedRow(row) {
-        if (row.isSelected) {
-            this.selectedRows.add(row.getData());
-        }
-        else {
-            this.selectedRows.delete(row.getData());
-        }
+    onUpdated() {
+        return this.onUpdatedSource.asObservable();
     }
-}
-
-class Grid {
-    constructor(source, settings) {
-        this.createFormShown = false;
-        this.onSelectRowSource = new Subject();
-        this.onDeselectRowSource = new Subject();
-        this.setSettings(settings);
-        this.setSource(source);
+    onRemoved() {
+        return this.onRemovedSource.asObservable();
     }
-    detach() {
-        if (this.sourceOnChangedSubscription) {
-            this.sourceOnChangedSubscription.unsubscribe();
-        }
-        if (this.sourceOnUpdatedSubscription) {
-            this.sourceOnUpdatedSubscription.unsubscribe();
-        }
+    prependEmit(element) {
+        this.emitOnAdded(element);
+        this.emitOnChanged(SmartTableOnChangedEventName.prepend);
+        return Promise.resolve(true);
     }
-    showActionColumn(position) {
-        return this.isCurrentActionsPosition(position) && this.isActionsVisible();
+    appendEmit(element) {
+        this.emitOnAdded(element);
+        this.emitOnChanged(SmartTableOnChangedEventName.append);
+        return Promise.resolve(true);
     }
-    isCurrentActionsPosition(position) {
-        return position == this.getSetting("actions.position");
+    addEmit(element) {
+        this.emitOnAdded(element);
+        this.emitOnChanged(SmartTableOnChangedEventName.add);
+        return Promise.resolve(true);
     }
-    isActionsVisible() {
-        return (this.getSetting("actions.add", false) ||
-            this.getSetting("actions.edit", false) ||
-            this.getSetting("actions.delete", false) ||
-            !!this.getSetting("actions.custom", [])?.length);
+    removeEmit(element) {
+        this.emitOnRemoved(element);
+        this.emitOnChanged(SmartTableOnChangedEventName.remove);
+        return Promise.resolve(true);
     }
-    isMultiSelectVisible() {
-        return this.getSetting("selectMode") === "multi";
+    updateEmit(element) {
+        this.emitOnUpdated(element);
+        this.emitOnChanged(SmartTableOnChangedEventName.update);
+        return Promise.resolve(true);
     }
-    getNewRow() {
-        return this.dataSet.newRow;
+    emptyEmit() {
+        this.emitOnChanged(SmartTableOnChangedEventName.empty);
+        return Promise.resolve(true);
     }
-    setSettings(settings) {
-        this.settings = settings;
-        this.dataSet = new DataSet([], this.getSetting("columns"));
-        if (this.source) {
-            this.source.refresh();
-        }
+    setSortEmit() {
+        this.emitOnChanged(SmartTableOnChangedEventName.sort);
     }
-    getDataSet() {
-        return this.dataSet;
+    setFilterEmit() {
+        this.emitOnChanged(SmartTableOnChangedEventName.filter);
     }
-    setSource(source) {
-        this.source = this.prepareSource(source);
-        this.detach();
-        this.sourceOnChangedSubscription = this.source
-            .onChanged()
-            .subscribe((changes) => this.processDataChange(changes));
-        this.sourceOnUpdatedSubscription = this.source
-            .onUpdated()
-            .subscribe((data) => {
-            const changedRow = this.dataSet.findRowByData(data);
-            if (changedRow) {
-                changedRow.setData(data);
-            }
-        });
+    addFilterEmit() {
+        this.emitOnChanged(SmartTableOnChangedEventName.filter);
     }
-    getSetting(name, defaultValue) {
-        return getDeepFromObject(this.settings, name, defaultValue);
+    setPagingEmit() {
+        this.emitOnChanged(SmartTableOnChangedEventName.paging);
     }
-    getColumns() {
-        return this.dataSet.getColumns();
+    setPageEmit() {
+        this.emitOnChanged(SmartTableOnChangedEventName.page);
     }
-    getRows() {
-        return this.dataSet.getRows();
+    emitOnRemoved(element) {
+        this.onRemovedSource.next(element);
     }
-    selectRow(row, state) {
-        this.dataSet.selectRow(row, state);
+    emitOnUpdated(element) {
+        this.onUpdatedSource.next(element);
     }
-    multipleSelectRow(row) {
-        this.dataSet.multipleSelectRow(row);
+    emitOnAdded(element) {
+        this.onAddedSource.next(element);
     }
-    onSelectRow() {
-        return this.onSelectRowSource.asObservable();
+    emitOnChanged(action) {
+        this.getElements().then((elements) => this.onChangedSource.next({
+            action: action,
+            elements: elements,
+            paging: this.getPaging(),
+            filter: this.getFilter(),
+            sort: this.getSort(),
+        }));
     }
-    onDeselectRow() {
-        return this.onDeselectRowSource.asObservable();
+}
+
+function compareValues(direction, a, b) {
+    if (a < b) {
+        return -1 * direction;
     }
-    edit(row) {
-        row.isInEditing = true;
+    if (a > b) {
+        return direction;
     }
-    create(row, confirmEmitter) {
-        row.pending = true;
-        const deferred = new Deferred();
-        deferred.promise
-            .then((newData) => {
-            row.pending = false;
-            newData = newData ? newData : row.getNewData();
-            this.source.prepend(newData).then(() => {
-                this.createFormShown = false;
-                this.dataSet.createNewRow();
-            });
-        })
-            .catch((err) => {
-            row.pending = false;
+    return 0;
+}
+class LocalSorter {
+    static sort(data, field, direction, customCompare) {
+        const dir = (direction === 'asc') ? 1 : -1;
+        const compare = customCompare ? customCompare : compareValues;
+        return data.sort((a, b) => {
+            return compare.call(null, dir, a[field], b[field]);
         });
-        if (this.getSetting("add.confirmCreate")) {
-            confirmEmitter.emit({
-                newData: row.getNewData(),
-                source: this.source,
-                confirm: deferred,
-            });
-        }
-        else {
-            deferred.resolve(false);
-        }
     }
-    save(row, confirmEmitter) {
-        row.pending = true;
-        const deferred = new Deferred();
-        deferred.promise
-            .then((newData) => {
-            row.pending = false;
-            newData = newData ? newData : row.getNewData();
-            this.source.update(row.getData(), newData).then(() => {
-                row.isInEditing = false;
-            });
-        })
-            .catch((err) => {
-            row.pending = false;
+}
+
+function filterValues(value, search) {
+    return value.toString().toLowerCase().includes(search.toString().toLowerCase());
+}
+class LocalFilter {
+    static filter(data, field, search, customFilter) {
+        const filter = customFilter ? customFilter : filterValues;
+        return data.filter((el) => {
+            const value = typeof el[field] === 'undefined' || el[field] === null ? '' : el[field];
+            return filter.call(null, value, search);
         });
-        if (this.getSetting("edit.confirmSave")) {
-            confirmEmitter.emit({
-                data: row.getData(),
-                newData: row.getNewData(),
-                source: this.source,
-                confirm: deferred,
-            });
-        }
-        else {
-            deferred.resolve(false);
-        }
-    }
-    delete(row, confirmEmitter) {
-        row.pending = true;
-        const deferred = new Deferred();
-        deferred.promise
-            .then(() => {
-            row.pending = false;
-            this.source.remove(row.getData());
-        })
-            .catch((err) => {
-            row.pending = false;
-            // doing nothing
-        });
-        if (this.getSetting("delete.confirmDelete")) {
-            confirmEmitter.emit({
-                data: row.getData(),
-                source: this.source,
-                confirm: deferred,
-            });
-        }
-        else {
-            deferred.resolve(false);
-        }
-        if (row.isSelected) {
-            this.dataSet.selectRow(row, false);
-        }
     }
-    processDataChange(changes) {
-        if (this.shouldProcessChange(changes)) {
-            if (changes["action"] === "load") {
-                this.dataSet.deselectAll();
-            }
-            this.dataSet.setData(changes["elements"]);
-        }
+}
+
+class LocalPager {
+    static paginate(data, page, perPage) {
+        return data.slice(perPage * (page - 1), perPage * page);
     }
-    shouldProcessChange(changes) {
-        if (["filter", "sort", "page", "remove", "refresh", "load", "paging"].indexOf(changes["action"]) !== -1) {
-            return true;
-        }
-        else if (["prepend", "append"].indexOf(changes["action"]) !== -1 &&
-            !this.getSetting("pager.display")) {
-            return true;
-        }
+}
+
+/**
+ * Extending object that entered in first argument.
+ *
+ * Returns extended object or false if have no target object or incorrect type.
+ *
+ * If you wish to clone source object (without modify it), just use empty new
+ * object as first argument, like this:
+ *   deepExtend({}, yourObj_1, [yourObj_N]);
+ */
+const deepExtend = function (...objects) {
+    if (arguments.length < 1 || typeof arguments[0] !== 'object') {
         return false;
     }
-    prepareSource(source) {
-        const initialSort = this.getInitialSort();
-        if (initialSort) {
-            source.setSort([initialSort], false);
-        }
-        if (this.getSetting("pager.display") === true) {
-            source.setPaging(1, this.getSetting("pager.perPage"), false);
+    if (arguments.length < 2) {
+        return arguments[0];
+    }
+    const target = arguments[0];
+    // convert arguments to array and cut off target object
+    const args = Array.prototype.slice.call(arguments, 1);
+    let val, src;
+    args.forEach((obj) => {
+        // skip argument if it is array or isn't object
+        if (typeof obj !== 'object' || Array.isArray(obj)) {
+            return;
         }
-        source.refresh();
-        return source;
+        Object.keys(obj).forEach(function (key) {
+            src = target[key]; // source value
+            val = obj[key]; // new value
+            // recursion prevention
+            if (val === target) {
+                return;
+                /**
+                 * if new value isn't object then just overwrite by new value
+                 * instead of extending.
+                 */
+            }
+            else if (typeof val !== 'object' || val === null) {
+                target[key] = val;
+                return;
+                // just clone arrays (and recursive clone objects inside)
+            }
+            else if (Array.isArray(val)) {
+                target[key] = [...val];
+                return;
+                // overwrite by new value if source isn't object or array
+            }
+            else if (typeof src !== 'object' || src === null || Array.isArray(src)) {
+                target[key] = deepExtend({}, val);
+                return;
+                // source value and new value is objects both, extending...
+            }
+            else {
+                target[key] = deepExtend(src, val);
+                return;
+            }
+        });
+    });
+    return target;
+};
+class Deferred {
+    constructor() {
+        this.promise = new Promise((resolve, reject) => {
+            this.resolve = resolve;
+            this.reject = reject;
+        });
     }
-    getInitialSort() {
-        const defaultSortColumn = this.getColumns().find((column) => column.isSortable && column.defaultSortDirection);
-        if (!defaultSortColumn) {
-            return false;
+}
+// getDeepFromObject({result: {data: 1}}, 'result.data', 2); // returns 1
+function getDeepFromObject(object = {}, name, defaultValue = null) {
+    const keys = name.split('.');
+    // clone the object
+    let level = deepExtend({}, object);
+    keys.forEach((k) => {
+        if (level && typeof level[k] !== 'undefined') {
+            level = level[k];
         }
-        return {
-            field: defaultSortColumn.id,
-            direction: defaultSortColumn.defaultSortDirection || "asc",
-            compare: defaultSortColumn.getCompareFunction(),
+    });
+    return typeof level === 'undefined' ? defaultValue : level;
+}
+function getPageForRowIndex(index, perPage) {
+    // we need to add 1 to convert 0-based index to 1-based page number.
+    return Math.floor(index / perPage) + 1;
+}
+
+class LocalDataSource extends DataSource {
+    constructor(data = []) {
+        super();
+        this.data = [];
+        this.filteredAndSorted = [];
+        this.sortConf = [];
+        this.filterConf = {
+            filters: [],
+            andOperator: true,
         };
+        this.pagingConf = false;
+        this.data = data;
     }
-    getSelectedRowsData() {
-        return this.dataSet.getRows();
-    }
-    selectAllRows(status) {
-        this.dataSet.setSelectAll(status);
-    }
-    getFirstRow() {
-        return this.dataSet.getFirstRow();
+    load(data) {
+        this.data = data;
+        return super.loadEmit();
     }
-    getLastRow() {
-        return this.dataSet.getLastRow();
+    prepend(element) {
+        this.reset(true);
+        this.data.unshift(element);
+        return super.prependEmit(element);
     }
-}
-
-class EditCellDefault {
-    constructor() {
-        this.inputClass = '';
-        this.edited = new EventEmitter();
+    appendMany(elements) {
+        this.reset(true);
+        this.data = [...this.data, ...elements];
+        return super.loadEmit();
     }
-    onEdited(event) {
-        this.edited.next(event);
-        return false;
+    append(element) {
+        this.reset(true);
+        this.data.push(element);
+        return super.appendEmit(element);
     }
-    onStopEditing() {
-        this.cell.getRow().isInEditing = false;
-        return false;
+    add(element) {
+        this.data.push(element);
+        return super.addEmit(element);
     }
-    onClick(event) {
-        event.stopPropagation();
+    remove(element) {
+        this.data = this.data.filter(el => el !== element);
+        return super.removeEmit(element);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EditCellDefault, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EditCellDefault, selector: "ng-component", inputs: { cell: "cell", inputClass: "inputClass" }, outputs: { edited: "edited" }, ngImport: i0, template: '', isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EditCellDefault, decorators: [{
-            type: Component,
-            args: [{
-                    template: ''
-                }]
-        }], propDecorators: { cell: [{
-                type: Input
-            }], inputClass: [{
-                type: Input
-            }], edited: [{
-                type: Output
-            }] } });
-
-class CustomEditComponent extends EditCellDefault {
-    constructor(resolver) {
-        super();
-        this.resolver = resolver;
+    update(element, values) {
+        return new Promise((resolve, reject) => {
+            this.find(element).then((found) => {
+                found = deepExtend(found, values);
+                super.updateEmit(found).then(resolve).catch(reject);
+            }).catch(reject);
+        });
     }
-    ngOnChanges(changes) {
-        const editor = this.cell.getColumn().editor;
-        if (this.cell && !this.customComponent && editor && editor.type == 'custom') {
-            const componentFactory = this.resolver.resolveComponentFactory(editor.component);
-            this.customComponent = this.dynamicTarget.createComponent(componentFactory);
-            // set @Inputs and @Outputs of custom component
-            this.customComponent.instance.cell = this.cell;
-            this.customComponent.instance.inputClass = this.inputClass;
-            this.customComponent.instance.onStopEditing.subscribe(() => this.onStopEditing());
-            this.customComponent.instance.onEdited.subscribe((event) => this.onEdited(event));
-            this.customComponent.instance.onClick.subscribe((event) => this.onClick(event));
+    find(element) {
+        const found = this.data.find(el => el === element);
+        if (found) {
+            return Promise.resolve(found);
         }
+        return Promise.reject(new Error('Element was not found in the dataset'));
     }
-    ngOnDestroy() {
-        if (this.customComponent) {
-            this.customComponent.destroy();
-        }
+    getElements() {
+        const data = this.data.slice(0);
+        return Promise.resolve(this.prepareData(data));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomEditComponent, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CustomEditComponent, selector: "table-cell-custom-editor", viewQueries: [{ propertyName: "dynamicTarget", first: true, predicate: ["dynamicTarget"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
-    <ng-template #dynamicTarget></ng-template>
-  `, isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomEditComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'table-cell-custom-editor',
-                    template: `
-    <ng-template #dynamicTarget></ng-template>
-  `,
-                }]
-        }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }], propDecorators: { dynamicTarget: [{
-                type: ViewChild,
-                args: ['dynamicTarget', { read: ViewContainerRef, static: true }]
-            }] } });
-
-class DefaultEditor {
-    constructor() {
-        this.inputClass = '';
-        this.onStopEditing = new EventEmitter();
-        this.onEdited = new EventEmitter();
-        this.onClick = new EventEmitter();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultEditor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DefaultEditor, selector: "ng-component", inputs: { cell: "cell", inputClass: "inputClass" }, outputs: { onStopEditing: "onStopEditing", onEdited: "onEdited", onClick: "onClick" }, ngImport: i0, template: '', isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultEditor, decorators: [{
-            type: Component,
-            args: [{
-                    template: '',
-                }]
-        }], propDecorators: { cell: [{
-                type: Input
-            }], inputClass: [{
-                type: Input
-            }], onStopEditing: [{
-                type: Output
-            }], onEdited: [{
-                type: Output
-            }], onClick: [{
-                type: Output
-            }] } });
-
-class CheckboxEditorComponent extends DefaultEditor {
-    constructor() {
-        super();
-    }
-    onChange(event) {
-        const config = this.cell.getColumn().getConfig();
-        const trueVal = (config && config?.true) || true;
-        const falseVal = (config && config?.false) || false;
-        this.cell.newValue = event.target.checked ? trueVal : falseVal;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CheckboxEditorComponent, selector: "checkbox-editor", usesInheritance: true, ngImport: i0, template: `
-    <input [ngClass]="inputClass"
-           type="checkbox"
-           class="form-control"
-           [name]="cell.getId()"
-           [disabled]="!cell.isEditable()"
-           [checked]="cell.getValue() === (cell.getColumn().getConfig()?.true || true)"
-           (click)="onClick.emit($event)"
-           (change)="onChange($event)">
-    `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxEditorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'checkbox-editor', template: `
-    <input [ngClass]="inputClass"
-           type="checkbox"
-           class="form-control"
-           [name]="cell.getId()"
-           [disabled]="!cell.isEditable()"
-           [checked]="cell.getValue() === (cell.getColumn().getConfig()?.true || true)"
-           (click)="onClick.emit($event)"
-           (change)="onChange($event)">
-    `, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }]
-        }], ctorParameters: () => [] });
-
-class InputEditorComponent extends DefaultEditor {
-    constructor() {
-        super();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputEditorComponent, selector: "input-editor", usesInheritance: true, ngImport: i0, template: `
-    <input [ngClass]="inputClass"
-           class="form-control"
-           [(ngModel)]="cell.newValue"
-           [name]="cell.getId()"
-           [placeholder]="cell.getTitle()"
-           [disabled]="!cell.isEditable()"
-           (click)="onClick.emit($event)"
-           (keydown.enter)="onEdited.emit($event)"
-           (keydown.esc)="onStopEditing.emit()">
-    `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputEditorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'input-editor', template: `
-    <input [ngClass]="inputClass"
-           class="form-control"
-           [(ngModel)]="cell.newValue"
-           [name]="cell.getId()"
-           [placeholder]="cell.getTitle()"
-           [disabled]="!cell.isEditable()"
-           (click)="onClick.emit($event)"
-           (keydown.enter)="onEdited.emit($event)"
-           (keydown.esc)="onStopEditing.emit()">
-    `, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }]
-        }], ctorParameters: () => [] });
-
-class SelectEditorComponent extends DefaultEditor {
-    constructor() {
-        super();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SelectEditorComponent, selector: "select-editor", usesInheritance: true, ngImport: i0, template: `
-    <select [ngClass]="inputClass"
-      class="form-control"
-      [(ngModel)]="cell.newValue"
-      [name]="cell.getId()"
-      [disabled]="!cell.isEditable()"
-      (click)="onClick.emit($event)"
-      (keydown.enter)="onEdited.emit($event)"
-      (keydown.esc)="onStopEditing.emit()">
-    
-      @for (option of cell.getColumn().getConfig()?.list; track option) {
-        <option [value]="option.value"
-          [selected]="option.value === cell.getValue()">{{ option.title }}
-        </option>
-      }
-    </select>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectEditorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'select-editor',
-                    template: `
-    <select [ngClass]="inputClass"
-      class="form-control"
-      [(ngModel)]="cell.newValue"
-      [name]="cell.getId()"
-      [disabled]="!cell.isEditable()"
-      (click)="onClick.emit($event)"
-      (keydown.enter)="onEdited.emit($event)"
-      (keydown.esc)="onStopEditing.emit()">
-    
-      @for (option of cell.getColumn().getConfig()?.list; track option) {
-        <option [value]="option.value"
-          [selected]="option.value === cell.getValue()">{{ option.title }}
-        </option>
-      }
-    </select>
-    `,
-                }]
-        }], ctorParameters: () => [] });
-
-class TextareaEditorComponent extends DefaultEditor {
-    constructor() {
-        super();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextareaEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TextareaEditorComponent, selector: "textarea-editor", usesInheritance: true, ngImport: i0, template: `
-    <textarea [ngClass]="inputClass"
-              class="form-control"
-              [(ngModel)]="cell.newValue"
-              [name]="cell.getId()"
-              [disabled]="!cell.isEditable()"
-              [placeholder]="cell.getTitle()"
-              (click)="onClick.emit($event)"
-              (keydown.enter)="onEdited.emit($event)"
-              (keydown.esc)="onStopEditing.emit()">
-    </textarea>
-    `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextareaEditorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'textarea-editor', template: `
-    <textarea [ngClass]="inputClass"
-              class="form-control"
-              [(ngModel)]="cell.newValue"
-              [name]="cell.getId()"
-              [disabled]="!cell.isEditable()"
-              [placeholder]="cell.getTitle()"
-              (click)="onClick.emit($event)"
-              (keydown.enter)="onEdited.emit($event)"
-              (keydown.esc)="onStopEditing.emit()">
-    </textarea>
-    `, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }]
-        }], ctorParameters: () => [] });
-
-class DefaultEditComponent extends EditCellDefault {
-    constructor() {
-        super();
-    }
-    getEditorType() {
-        const editor = this.cell.getColumn().editor;
-        if (editor) {
-            return editor.type;
-        }
-        return 'text';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DefaultEditComponent, selector: "table-cell-default-editor", usesInheritance: true, ngImport: i0, template: "<div>\n  @switch (getEditorType()) {\n    @case ('list') {\n      <select-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\"\n        (onEdited)=\"onEdited($event)\"\n        (onStopEditing)=\"onStopEditing()\">\n      </select-editor>\n    }\n    @case ('textarea') {\n      <textarea-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\"\n        (onEdited)=\"onEdited($event)\"\n        (onStopEditing)=\"onStopEditing()\">\n      </textarea-editor>\n    }\n    @case ('checkbox') {\n      <checkbox-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\">\n      </checkbox-editor>\n    }\n    @default {\n      <input-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\"\n        (onEdited)=\"onEdited($event)\"\n        (onStopEditing)=\"onStopEditing()\">\n    </input-editor>\n  }\n}\n</div>", dependencies: [{ kind: "component", type: CheckboxEditorComponent, selector: "checkbox-editor" }, { kind: "component", type: InputEditorComponent, selector: "input-editor" }, { kind: "component", type: SelectEditorComponent, selector: "select-editor" }, { kind: "component", type: TextareaEditorComponent, selector: "textarea-editor" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultEditComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'table-cell-default-editor', template: "<div>\n  @switch (getEditorType()) {\n    @case ('list') {\n      <select-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\"\n        (onEdited)=\"onEdited($event)\"\n        (onStopEditing)=\"onStopEditing()\">\n      </select-editor>\n    }\n    @case ('textarea') {\n      <textarea-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\"\n        (onEdited)=\"onEdited($event)\"\n        (onStopEditing)=\"onStopEditing()\">\n      </textarea-editor>\n    }\n    @case ('checkbox') {\n      <checkbox-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\">\n      </checkbox-editor>\n    }\n    @default {\n      <input-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\"\n        (onEdited)=\"onEdited($event)\"\n        (onStopEditing)=\"onStopEditing()\">\n    </input-editor>\n  }\n}\n</div>" }]
-        }], ctorParameters: () => [] });
-
-class EditCellComponent {
-    constructor() {
-        this.inputClass = '';
-        this.edited = new EventEmitter();
-    }
-    onEdited(event) {
-        this.edited.next(event);
-        return false;
-    }
-    getEditorType() {
-        const editor = this.cell.getColumn().editor;
-        if (editor) {
-            return editor.type;
-        }
-        return 'text';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EditCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EditCellComponent, selector: "table-cell-edit-mode", inputs: { cell: "cell", inputClass: "inputClass" }, outputs: { edited: "edited" }, ngImport: i0, template: `
-      <div>
-        @switch (getEditorType()) {
-          @case ('custom') {
-            <table-cell-custom-editor
-              [cell]="cell"
-              [inputClass]="inputClass"
-              (edited)="onEdited($event)">
-            </table-cell-custom-editor>
-          }
-          @default {
-            <table-cell-default-editor
-              [cell]="cell"
-              [inputClass]="inputClass"
-              (edited)="onEdited($event)">
-            </table-cell-default-editor>
-          }
-        }
-      </div>
-      `, isInline: true, dependencies: [{ kind: "component", type: CustomEditComponent, selector: "table-cell-custom-editor" }, { kind: "component", type: DefaultEditComponent, selector: "table-cell-default-editor" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EditCellComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'table-cell-edit-mode',
-                    template: `
-      <div>
-        @switch (getEditorType()) {
-          @case ('custom') {
-            <table-cell-custom-editor
-              [cell]="cell"
-              [inputClass]="inputClass"
-              (edited)="onEdited($event)">
-            </table-cell-custom-editor>
-          }
-          @default {
-            <table-cell-default-editor
-              [cell]="cell"
-              [inputClass]="inputClass"
-              (edited)="onEdited($event)">
-            </table-cell-default-editor>
-          }
-        }
-      </div>
-      `,
-                }]
-        }], propDecorators: { cell: [{
-                type: Input
-            }], inputClass: [{
-                type: Input
-            }], edited: [{
-                type: Output
-            }] } });
-
-class CustomViewComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CustomViewComponent, selector: "custom-view-component", inputs: { cell: "cell" }, ngImport: i0, template: "<ng-template\n  *ngComponentOutlet=\"\n    cell.getColumn().renderComponent;\n    inputs: { rowData: cell.getRow().getData(), value: cell.getValue() }\n  \"\n></ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "custom-view-component", template: "<ng-template\n  *ngComponentOutlet=\"\n    cell.getColumn().renderComponent;\n    inputs: { rowData: cell.getRow().getData(), value: cell.getValue() }\n  \"\n></ng-template>\n" }]
-        }], propDecorators: { cell: [{
-                type: Input
-            }] } });
-
-class ViewCellComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ViewCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ViewCellComponent, selector: "table-cell-view-mode", inputs: { cell: "cell" }, ngImport: i0, template: `
-    <div>
-      @switch (cell.getColumn().type) {
-        @case ('custom') {
-          <custom-view-component [cell]="cell"></custom-view-component>
-        }
-        @case ('html') {
-          <div [innerHTML]="cell.getValue()"></div>
-        }
-        @default {
-          <div>{{ cell.getValue() }}</div>
-        }
-      }
-    </div>
-    `, isInline: true, dependencies: [{ kind: "component", type: CustomViewComponent, selector: "custom-view-component", inputs: ["cell"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ViewCellComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'table-cell-view-mode',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    <div>
-      @switch (cell.getColumn().type) {
-        @case ('custom') {
-          <custom-view-component [cell]="cell"></custom-view-component>
-        }
-        @case ('html') {
-          <div [innerHTML]="cell.getValue()"></div>
-        }
-        @default {
-          <div>{{ cell.getValue() }}</div>
-        }
-      }
-    </div>
-    `,
-                }]
-        }], propDecorators: { cell: [{
-                type: Input
-            }] } });
-
-class CellComponent {
-    constructor() {
-        this.inputClass = '';
-        this.mode = 'inline';
-        this.isInEditing = false;
-        this.edited = new EventEmitter();
+    getFilteredAndSorted() {
+        let data = this.data.slice(0);
+        this.prepareData(data);
+        return Promise.resolve(this.filteredAndSorted);
     }
-    onEdited(event) {
-        if (this.isNew) {
-            this.grid.create(this.grid.getNewRow(), this.createConfirm);
+    getAll() {
+        const data = this.data.slice(0);
+        return Promise.resolve(data);
+    }
+    reset(silent = false) {
+        if (silent) {
+            this.filterConf = {
+                filters: [],
+                andOperator: true,
+            };
+            this.sortConf = [];
+            if (this.pagingConf) {
+                this.pagingConf.page = 1;
+            }
         }
         else {
-            this.grid.save(this.row, this.editConfirm);
+            this.setFilter([], true, false);
+            this.setSort([], false);
+            if (this.pagingConf) {
+                this.setPage(1);
+            }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CellComponent, selector: "ng2-smart-table-cell", inputs: { grid: "grid", row: "row", editConfirm: "editConfirm", createConfirm: "createConfirm", isNew: "isNew", cell: "cell", inputClass: "inputClass", mode: "mode", isInEditing: "isInEditing" }, outputs: { edited: "edited" }, ngImport: i0, template: `
-    @if (!isInEditing) {
-      <table-cell-view-mode [cell]="cell"></table-cell-view-mode>
+    empty() {
+        this.data = [];
+        return super.emptyEmit();
     }
-    @if (isInEditing) {
-      <table-cell-edit-mode [cell]="cell"
-        [inputClass]="inputClass"
-        (edited)="onEdited($event)">
-      </table-cell-edit-mode>
+    count() {
+        return this.filteredAndSorted.length;
     }
-    `, isInline: true, dependencies: [{ kind: "component", type: EditCellComponent, selector: "table-cell-edit-mode", inputs: ["cell", "inputClass"], outputs: ["edited"] }, { kind: "component", type: ViewCellComponent, selector: "table-cell-view-mode", inputs: ["cell"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ng2-smart-table-cell',
-                    template: `
-    @if (!isInEditing) {
-      <table-cell-view-mode [cell]="cell"></table-cell-view-mode>
+    /**
+     *
+     * Array of conf objects
+     * [
+     *  {field: string, direction: asc|desc|null, compare: Function|null},
+     * ]
+     * @param conf
+     * @param doEmit
+     * @returns {LocalDataSource}
+     */
+    setSort(conf, doEmit = true) {
+        if (conf !== null) {
+            conf.forEach((fieldConf) => {
+                if (!fieldConf.field || typeof fieldConf.direction === 'undefined') {
+                    throw new Error('Sort configuration object is not valid');
+                }
+            });
+            this.sortConf = conf;
+        }
+        if (doEmit) {
+            super.setSortEmit();
+        }
+        return this;
     }
-    @if (isInEditing) {
-      <table-cell-edit-mode [cell]="cell"
-        [inputClass]="inputClass"
-        (edited)="onEdited($event)">
-      </table-cell-edit-mode>
+    /**
+     *
+     * Array of conf objects
+     * [
+     *  {field: string, search: string, filter: Function|null},
+     * ]
+     * @param conf
+     * @param andOperator
+     * @param doEmit
+     * @returns {LocalDataSource}
+     */
+    setFilter(conf, andOperator = true, doEmit = true) {
+        if (conf && conf.length > 0) {
+            conf.forEach((fieldConf) => {
+                this.addFilter(fieldConf, andOperator, false);
+            });
+        }
+        else {
+            this.filterConf = {
+                filters: [],
+                andOperator: true,
+            };
+        }
+        this.filterConf.andOperator = andOperator;
+        if (this.pagingConf) {
+            this.pagingConf.page = 1;
+        }
+        if (doEmit) {
+            super.setFilterEmit();
+        }
+        return this;
     }
-    `,
-                }]
-        }], propDecorators: { grid: [{
-                type: Input
-            }], row: [{
-                type: Input
-            }], editConfirm: [{
-                type: Input
-            }], createConfirm: [{
-                type: Input
-            }], isNew: [{
-                type: Input
-            }], cell: [{
-                type: Input
-            }], inputClass: [{
-                type: Input
-            }], mode: [{
-                type: Input
-            }], isInEditing: [{
-                type: Input
-            }], edited: [{
-                type: Output
-            }] } });
-
-const CELL_COMPONENTS = [
-    CellComponent,
-    EditCellDefault,
-    DefaultEditor,
-    CustomEditComponent,
-    DefaultEditComponent,
-    EditCellComponent,
-    CheckboxEditorComponent,
-    InputEditorComponent,
-    SelectEditorComponent,
-    TextareaEditorComponent,
-    CustomViewComponent,
-    ViewCellComponent,
-];
-class CellModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CellModule, declarations: [CellComponent,
-            EditCellDefault,
-            DefaultEditor,
-            CustomEditComponent,
-            DefaultEditComponent,
-            EditCellComponent,
-            CheckboxEditorComponent,
-            InputEditorComponent,
-            SelectEditorComponent,
-            TextareaEditorComponent,
-            CustomViewComponent,
-            ViewCellComponent], imports: [CommonModule,
-            FormsModule], exports: [CellComponent,
-            EditCellDefault,
-            DefaultEditor,
-            CustomEditComponent,
-            DefaultEditComponent,
-            EditCellComponent,
-            CheckboxEditorComponent,
-            InputEditorComponent,
-            SelectEditorComponent,
-            TextareaEditorComponent,
-            CustomViewComponent,
-            ViewCellComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellModule, imports: [CommonModule,
-            FormsModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                    ],
-                    declarations: [
-                        ...CELL_COMPONENTS,
-                    ],
-                    exports: [
-                        ...CELL_COMPONENTS,
-                    ],
-                }]
-        }] });
-
-function compareValues(direction, a, b) {
-    if (a < b) {
-        return -1 * direction;
+    addFilter(fieldConf, andOperator = true, doEmit = true) {
+        if (!fieldConf.field || typeof fieldConf.search === 'undefined') {
+            throw new Error('Filter configuration object is not valid');
+        }
+        let found = false;
+        this.filterConf.filters.forEach((currentFieldConf, index) => {
+            if (currentFieldConf.field === fieldConf.field) {
+                this.filterConf.filters[index] = fieldConf;
+                found = true;
+            }
+        });
+        if (!found) {
+            this.filterConf.filters.push(fieldConf);
+        }
+        this.filterConf.andOperator = andOperator;
+        if (doEmit) {
+            super.addFilterEmit();
+        }
+        return this;
     }
-    if (a > b) {
-        return direction;
+    setPaging(page = 1, perPage, doEmit = true) {
+        if (this.pagingConf) {
+            this.pagingConf.page = page;
+            this.pagingConf.perPage = perPage;
+        }
+        else {
+            this.pagingConf = {
+                page, perPage
+            };
+        }
+        if (doEmit) {
+            super.setPagingEmit();
+        }
+        return;
     }
-    return 0;
-}
-class LocalSorter {
-    static sort(data, field, direction, customCompare) {
-        const dir = (direction === 'asc') ? 1 : -1;
-        const compare = customCompare ? customCompare : compareValues;
-        return data.sort((a, b) => {
-            return compare.call(null, dir, a[field], b[field]);
-        });
+    setPage(page, doEmit = true) {
+        if (!this.pagingConf) {
+            return;
+        }
+        this.pagingConf.page = page;
+        if (doEmit) {
+            super.setPageEmit();
+        }
+        return;
     }
-}
-
-function filterValues(value, search) {
-    return value.toString().toLowerCase().includes(search.toString().toLowerCase());
-}
-class LocalFilter {
-    static filter(data, field, search, customFilter) {
-        const filter = customFilter ? customFilter : filterValues;
-        return data.filter((el) => {
-            const value = typeof el[field] === 'undefined' || el[field] === null ? '' : el[field];
-            return filter.call(null, value, search);
-        });
+    getSort() {
+        return this.sortConf;
     }
-}
-
-class LocalPager {
-    static paginate(data, page, perPage) {
-        return data.slice(perPage * (page - 1), perPage * page);
+    getFilter() {
+        return this.filterConf;
+    }
+    getPaging() {
+        return this.pagingConf;
+    }
+    prepareData(data) {
+        data = this.filter(data);
+        data = this.sort(data);
+        this.filteredAndSorted = data.slice(0);
+        if (this.pagingConf) {
+            return this.paginate(data);
+        }
+        else
+            return data;
+    }
+    sort(data) {
+        if (this.sortConf) {
+            this.sortConf.forEach((fieldConf) => {
+                data = LocalSorter
+                    .sort(data, fieldConf.field, fieldConf.direction, fieldConf.compare);
+            });
+        }
+        return data;
+    }
+    // TODO: refactor?
+    filter(data) {
+        if (this.filterConf.filters) {
+            if (this.filterConf.andOperator) {
+                this.filterConf.filters.forEach((fieldConf) => {
+                    if (fieldConf.search?.length > 0) {
+                        data = LocalFilter
+                            .filter(data, fieldConf.field, fieldConf.search, fieldConf.filter);
+                    }
+                });
+            }
+            else {
+                let mergedData = [];
+                this.filterConf.filters.forEach((fieldConf) => {
+                    if (fieldConf.search?.length > 0) {
+                        mergedData = mergedData.concat(LocalFilter
+                            .filter(data, fieldConf.field, fieldConf.search, fieldConf.filter));
+                    }
+                });
+                // remove non unique items
+                data = mergedData.filter((elem, pos, arr) => {
+                    return arr.indexOf(elem) === pos;
+                });
+            }
+        }
+        return data;
+    }
+    paginate(data) {
+        if (this.pagingConf && this.pagingConf.page && this.pagingConf.perPage) {
+            data = LocalPager.paginate(data, this.pagingConf.page, this.pagingConf.perPage);
+        }
+        return data;
     }
 }
 
-var SmartTableOnChangedEventName;
-(function (SmartTableOnChangedEventName) {
-    SmartTableOnChangedEventName["load"] = "load";
-    SmartTableOnChangedEventName["paging"] = "paging";
-    SmartTableOnChangedEventName["update"] = "update";
-    SmartTableOnChangedEventName["page"] = "page";
-    SmartTableOnChangedEventName["filter"] = "filter";
-    SmartTableOnChangedEventName["empty"] = "empty";
-    SmartTableOnChangedEventName["sort"] = "sort";
-    SmartTableOnChangedEventName["add"] = "add";
-    SmartTableOnChangedEventName["remove"] = "remove";
-    SmartTableOnChangedEventName["append"] = "append";
-    SmartTableOnChangedEventName["prepend"] = "prepend";
-    SmartTableOnChangedEventName["refresh"] = "refresh";
-})(SmartTableOnChangedEventName || (SmartTableOnChangedEventName = {}));
-
-class DataSource {
-    constructor() {
-        this.onChangedSource = new Subject();
-        this.onAddedSource = new Subject();
-        this.onUpdatedSource = new Subject();
-        this.onRemovedSource = new Subject();
+class DataSet {
+    constructor(data = [], columnSettings) {
+        this.columnSettings = columnSettings;
+        this.data = [];
+        this.columns = [];
+        this.rows = [];
+        this.selectedRows = new Set();
+        this.createColumns(columnSettings);
+        this.setData(data);
+        this.createNewRow();
     }
-    refresh() {
-        this.emitOnChanged(SmartTableOnChangedEventName.refresh);
+    setData(data) {
+        this.data = data;
+        this.createRows();
     }
-    loadEmit() {
-        this.emitOnChanged(SmartTableOnChangedEventName.load);
-        return Promise.resolve(true);
+    getColumns() {
+        return this.columns;
     }
-    onChanged() {
-        return this.onChangedSource.asObservable();
+    getRows() {
+        return this.rows;
     }
-    onAdded() {
-        return this.onAddedSource.asObservable();
+    getFirstRow() {
+        return this.rows[0];
     }
-    onUpdated() {
-        return this.onUpdatedSource.asObservable();
+    getLastRow() {
+        return this.rows[this.rows.length - 1];
     }
-    onRemoved() {
-        return this.onRemovedSource.asObservable();
+    findRowByData(data) {
+        return this.rows.find((row) => row.getData() === data);
     }
-    prependEmit(element) {
-        this.emitOnAdded(element);
-        this.emitOnChanged(SmartTableOnChangedEventName.prepend);
-        return Promise.resolve(true);
+    setSelectAll(state) {
+        this.rows.forEach((row) => {
+            row.isSelected = state;
+            this.storeSelectedRow(row);
+        });
     }
-    appendEmit(element) {
-        this.emitOnAdded(element);
-        this.emitOnChanged(SmartTableOnChangedEventName.append);
-        return Promise.resolve(true);
+    deselectAll() {
+        this.rows.forEach((row) => {
+            row.isSelected = false;
+        });
+        // we need to clear selectedRow field because no one row selected
+        this.selectedRows.clear();
     }
-    addEmit(element) {
-        this.emitOnAdded(element);
-        this.emitOnChanged(SmartTableOnChangedEventName.add);
-        return Promise.resolve(true);
+    selectRow(row, state) {
+        row.isSelected = state;
+        this.storeSelectedRow(row);
     }
-    removeEmit(element) {
-        this.emitOnRemoved(element);
-        this.emitOnChanged(SmartTableOnChangedEventName.remove);
-        return Promise.resolve(true);
+    multipleSelectRow(row) {
+        row.isSelected = !row.isSelected;
+        this.storeSelectedRow(row);
+        return row;
     }
-    updateEmit(element) {
-        this.emitOnUpdated(element);
-        this.emitOnChanged(SmartTableOnChangedEventName.update);
-        return Promise.resolve(true);
+    getSelectedRowsData() {
+        return [...this.selectedRows];
     }
-    emptyEmit() {
-        this.emitOnChanged(SmartTableOnChangedEventName.empty);
-        return Promise.resolve(true);
+    createNewRow() {
+        this.newRow = new Row(-1, {}, this);
+        this.newRow.isInEditing = true;
     }
-    setSortEmit() {
-        this.emitOnChanged(SmartTableOnChangedEventName.sort);
+    /**
+     * Create columns by mapping from the settings
+     * @param settings
+     * @private
+     */
+    createColumns(settings) {
+        settings.forEach((columnSettings) => {
+            this.columns.push(new Column(columnSettings.key, columnSettings, this));
+        });
     }
-    setFilterEmit() {
-        this.emitOnChanged(SmartTableOnChangedEventName.filter);
+    /**
+     * Create rows based on current data prepared in data source
+     * @private
+     */
+    createRows() {
+        this.rows = [];
+        this.data.forEach((el, index) => {
+            const row = new Row(index, el, this);
+            row.isSelected = this.selectedRows.has(row.getData());
+            this.rows.push(row);
+        });
     }
-    addFilterEmit() {
-        this.emitOnChanged(SmartTableOnChangedEventName.filter);
+    get isAllSelected() {
+        return this.rows.every((row) => row.isSelected);
+    }
+    storeSelectedRow(row) {
+        if (row.isSelected) {
+            this.selectedRows.add(row.getData());
+        }
+        else {
+            this.selectedRows.delete(row.getData());
+        }
     }
-    setPagingEmit() {
-        this.emitOnChanged(SmartTableOnChangedEventName.paging);
+}
+
+class Grid {
+    constructor(source, settings) {
+        this.createFormShown = false;
+        this.onSelectRowSource = new Subject();
+        this.onDeselectRowSource = new Subject();
+        this.setSettings(settings);
+        this.setSource(source);
     }
-    setPageEmit() {
-        this.emitOnChanged(SmartTableOnChangedEventName.page);
+    detach() {
+        if (this.sourceOnChangedSubscription) {
+            this.sourceOnChangedSubscription.unsubscribe();
+        }
+        if (this.sourceOnUpdatedSubscription) {
+            this.sourceOnUpdatedSubscription.unsubscribe();
+        }
     }
-    emitOnRemoved(element) {
-        this.onRemovedSource.next(element);
+    showActionColumn(position) {
+        return this.isCurrentActionsPosition(position) && this.isActionsVisible();
     }
-    emitOnUpdated(element) {
-        this.onUpdatedSource.next(element);
+    isCurrentActionsPosition(position) {
+        return position == this.getSetting("actions.position");
     }
-    emitOnAdded(element) {
-        this.onAddedSource.next(element);
+    isActionsVisible() {
+        return (this.getSetting("actions.add", false) ||
+            this.getSetting("actions.edit", false) ||
+            this.getSetting("actions.delete", false) ||
+            !!this.getSetting("actions.custom", [])?.length);
     }
-    emitOnChanged(action) {
-        this.getElements().then((elements) => this.onChangedSource.next({
-            action: action,
-            elements: elements,
-            paging: this.getPaging(),
-            filter: this.getFilter(),
-            sort: this.getSort(),
-        }));
+    isMultiSelectVisible() {
+        return this.getSetting("selectMode") === "multi";
     }
-}
-
-class LocalDataSource extends DataSource {
-    constructor(data = []) {
-        super();
-        this.data = [];
-        this.filteredAndSorted = [];
-        this.sortConf = [];
-        this.filterConf = {
-            filters: [],
-            andOperator: true,
-        };
-        this.pagingConf = false;
-        this.data = data;
+    getNewRow() {
+        return this.dataSet.newRow;
     }
-    load(data) {
-        this.data = data;
-        return super.loadEmit();
+    setSettings(settings) {
+        this.settings = settings;
+        this.dataSet = new DataSet([], this.getSetting("columns"));
+        if (this.source) {
+            this.source.refresh();
+        }
     }
-    prepend(element) {
-        this.reset(true);
-        this.data.unshift(element);
-        return super.prependEmit(element);
+    getDataSet() {
+        return this.dataSet;
     }
-    appendMany(elements) {
-        this.reset(true);
-        this.data = [...this.data, ...elements];
-        return super.loadEmit();
+    setSource(source) {
+        this.source = this.prepareSource(source);
+        this.detach();
+        this.sourceOnChangedSubscription = this.source
+            .onChanged()
+            .subscribe((changes) => this.processDataChange(changes));
+        this.sourceOnUpdatedSubscription = this.source
+            .onUpdated()
+            .subscribe((data) => {
+            const changedRow = this.dataSet.findRowByData(data);
+            if (changedRow) {
+                changedRow.setData(data);
+            }
+        });
     }
-    append(element) {
-        this.reset(true);
-        this.data.push(element);
-        return super.appendEmit(element);
+    getSetting(name, defaultValue) {
+        return getDeepFromObject(this.settings, name, defaultValue);
     }
-    add(element) {
-        this.data.push(element);
-        return super.addEmit(element);
+    getColumns() {
+        return this.dataSet.getColumns();
     }
-    remove(element) {
-        this.data = this.data.filter(el => el !== element);
-        return super.removeEmit(element);
+    getRows() {
+        return this.dataSet.getRows();
     }
-    update(element, values) {
-        return new Promise((resolve, reject) => {
-            this.find(element).then((found) => {
-                found = deepExtend(found, values);
-                super.updateEmit(found).then(resolve).catch(reject);
-            }).catch(reject);
-        });
+    selectRow(row, state) {
+        this.dataSet.selectRow(row, state);
     }
-    find(element) {
-        const found = this.data.find(el => el === element);
-        if (found) {
-            return Promise.resolve(found);
-        }
-        return Promise.reject(new Error('Element was not found in the dataset'));
+    multipleSelectRow(row) {
+        this.dataSet.multipleSelectRow(row);
     }
-    getElements() {
-        const data = this.data.slice(0);
-        return Promise.resolve(this.prepareData(data));
+    onSelectRow() {
+        return this.onSelectRowSource.asObservable();
     }
-    getFilteredAndSorted() {
-        let data = this.data.slice(0);
-        this.prepareData(data);
-        return Promise.resolve(this.filteredAndSorted);
+    onDeselectRow() {
+        return this.onDeselectRowSource.asObservable();
     }
-    getAll() {
-        const data = this.data.slice(0);
-        return Promise.resolve(data);
+    edit(row) {
+        row.isInEditing = true;
     }
-    reset(silent = false) {
-        if (silent) {
-            this.filterConf = {
-                filters: [],
-                andOperator: true,
-            };
-            this.sortConf = [];
-            if (this.pagingConf) {
-                this.pagingConf.page = 1;
-            }
+    create(row, confirmEmitter) {
+        row.pending = true;
+        const deferred = new Deferred();
+        deferred.promise
+            .then((newData) => {
+            row.pending = false;
+            newData = newData ? newData : row.getNewData();
+            this.source.prepend(newData).then(() => {
+                this.createFormShown = false;
+                this.dataSet.createNewRow();
+            });
+        })
+            .catch((err) => {
+            row.pending = false;
+        });
+        if (this.getSetting("add.confirmCreate")) {
+            confirmEmitter.emit({
+                newData: row.getNewData(),
+                source: this.source,
+                confirm: deferred,
+            });
         }
         else {
-            this.setFilter([], true, false);
-            this.setSort([], false);
-            if (this.pagingConf) {
-                this.setPage(1);
-            }
+            deferred.resolve(false);
         }
     }
-    empty() {
-        this.data = [];
-        return super.emptyEmit();
-    }
-    count() {
-        return this.filteredAndSorted.length;
-    }
-    /**
-     *
-     * Array of conf objects
-     * [
-     *  {field: string, direction: asc|desc|null, compare: Function|null},
-     * ]
-     * @param conf
-     * @param doEmit
-     * @returns {LocalDataSource}
-     */
-    setSort(conf, doEmit = true) {
-        if (conf !== null) {
-            conf.forEach((fieldConf) => {
-                if (!fieldConf.field || typeof fieldConf.direction === 'undefined') {
-                    throw new Error('Sort configuration object is not valid');
-                }
+    save(row, confirmEmitter) {
+        row.pending = true;
+        const deferred = new Deferred();
+        deferred.promise
+            .then((newData) => {
+            row.pending = false;
+            newData = newData ? newData : row.getNewData();
+            this.source.update(row.getData(), newData).then(() => {
+                row.isInEditing = false;
+            });
+        })
+            .catch((err) => {
+            row.pending = false;
+        });
+        if (this.getSetting("edit.confirmSave")) {
+            confirmEmitter.emit({
+                data: row.getData(),
+                newData: row.getNewData(),
+                source: this.source,
+                confirm: deferred,
             });
-            this.sortConf = conf;
         }
-        if (doEmit) {
-            super.setSortEmit();
+        else {
+            deferred.resolve(false);
         }
-        return this;
     }
-    /**
-     *
-     * Array of conf objects
-     * [
-     *  {field: string, search: string, filter: Function|null},
-     * ]
-     * @param conf
-     * @param andOperator
-     * @param doEmit
-     * @returns {LocalDataSource}
-     */
-    setFilter(conf, andOperator = true, doEmit = true) {
-        if (conf && conf.length > 0) {
-            conf.forEach((fieldConf) => {
-                this.addFilter(fieldConf, andOperator, false);
+    delete(row, confirmEmitter) {
+        row.pending = true;
+        const deferred = new Deferred();
+        deferred.promise
+            .then(() => {
+            row.pending = false;
+            this.source.remove(row.getData());
+        })
+            .catch((err) => {
+            row.pending = false;
+            // doing nothing
+        });
+        if (this.getSetting("delete.confirmDelete")) {
+            confirmEmitter.emit({
+                data: row.getData(),
+                source: this.source,
+                confirm: deferred,
             });
         }
         else {
-            this.filterConf = {
-                filters: [],
-                andOperator: true,
-            };
-        }
-        this.filterConf.andOperator = andOperator;
-        if (this.pagingConf) {
-            this.pagingConf.page = 1;
+            deferred.resolve(false);
         }
-        if (doEmit) {
-            super.setFilterEmit();
+        if (row.isSelected) {
+            this.dataSet.selectRow(row, false);
         }
-        return this;
     }
-    addFilter(fieldConf, andOperator = true, doEmit = true) {
-        if (!fieldConf.field || typeof fieldConf.search === 'undefined') {
-            throw new Error('Filter configuration object is not valid');
-        }
-        let found = false;
-        this.filterConf.filters.forEach((currentFieldConf, index) => {
-            if (currentFieldConf.field === fieldConf.field) {
-                this.filterConf.filters[index] = fieldConf;
-                found = true;
+    processDataChange(changes) {
+        if (this.shouldProcessChange(changes)) {
+            if (changes["action"] === "load") {
+                this.dataSet.deselectAll();
             }
-        });
-        if (!found) {
-            this.filterConf.filters.push(fieldConf);
+            this.dataSet.setData(changes["elements"]);
         }
-        this.filterConf.andOperator = andOperator;
-        if (doEmit) {
-            super.addFilterEmit();
+    }
+    shouldProcessChange(changes) {
+        if (["filter", "sort", "page", "remove", "refresh", "load", "paging"].indexOf(changes["action"]) !== -1) {
+            return true;
         }
-        return this;
+        else if (["prepend", "append"].indexOf(changes["action"]) !== -1 &&
+            !this.getSetting("pager.display")) {
+            return true;
+        }
+        return false;
     }
-    setPaging(page = 1, perPage, doEmit = true) {
-        if (this.pagingConf) {
-            this.pagingConf.page = page;
-            this.pagingConf.perPage = perPage;
+    prepareSource(source) {
+        const initialSort = this.getInitialSort();
+        if (initialSort) {
+            source.setSort([initialSort], false);
         }
-        else {
-            this.pagingConf = {
-                page, perPage
-            };
+        if (this.getSetting("pager.display") === true) {
+            source.setPaging(1, this.getSetting("pager.perPage"), false);
         }
-        if (doEmit) {
-            super.setPagingEmit();
+        source.refresh();
+        return source;
+    }
+    getInitialSort() {
+        const defaultSortColumn = this.getColumns().find((column) => column.isSortable && column.defaultSortDirection);
+        if (!defaultSortColumn) {
+            return false;
         }
-        return;
+        return {
+            field: defaultSortColumn.id,
+            direction: defaultSortColumn.defaultSortDirection || "asc",
+            compare: defaultSortColumn.getCompareFunction(),
+        };
     }
-    setPage(page, doEmit = true) {
-        if (!this.pagingConf) {
-            return;
+    getSelectedRowsData() {
+        return this.dataSet.getRows();
+    }
+    selectAllRows(status) {
+        this.dataSet.setSelectAll(status);
+    }
+    getFirstRow() {
+        return this.dataSet.getFirstRow();
+    }
+    getLastRow() {
+        return this.dataSet.getLastRow();
+    }
+}
+
+class PagerComponent {
+    constructor() {
+        this.perPageSelect = [];
+        this.changePage = new EventEmitter();
+        this.currentPerPage = 0;
+        this.pages = [];
+        this.page = 1;
+        this.count = 0;
+        this.perPage = 0;
+    }
+    ngOnChanges(changes) {
+        if (changes['source']) {
+            if (!changes['source'].firstChange && this.dataChangedSub) {
+                this.dataChangedSub.unsubscribe();
+            }
+            this.dataChangedSub = this.source.onChanged().subscribe((dataChanges) => {
+                const paging = this.source.getPaging();
+                if (paging) {
+                    this.page = paging.page;
+                    this.perPage = paging.perPage;
+                }
+                this.currentPerPage = this.perPage;
+                this.count = this.source.count();
+                if (this.isPageOutOfBounce()) {
+                    this.source.setPage(--this.page);
+                }
+                this.processPageChange(dataChanges);
+                this.initPages();
+            });
         }
-        this.pagingConf.page = page;
-        if (doEmit) {
-            super.setPageEmit();
+    }
+    /**
+     * We change the page here depending on the action performed against data source
+     * if a new element was added to the end of the table - then change the page to the last
+     * if a new element was added to the beginning of the table - then to the first page
+     * @param changes
+     */
+    processPageChange(changes) {
+        if (changes['action'] === 'prepend') {
+            this.source.setPage(1);
+        }
+        if (changes['action'] === 'append') {
+            this.source.setPage(this.getLast());
         }
-        return;
     }
-    getSort() {
-        return this.sortConf;
+    shouldShow() {
+        return this.source.count() > this.perPage;
     }
-    getFilter() {
-        return this.filterConf;
+    paginate(page) {
+        this.source.setPage(page);
+        this.page = page;
+        this.changePage.emit({ page });
+        return false;
     }
-    getPaging() {
-        return this.pagingConf;
+    next() {
+        return this.paginate(this.getPage() + 1);
     }
-    prepareData(data) {
-        data = this.filter(data);
-        data = this.sort(data);
-        this.filteredAndSorted = data.slice(0);
-        if (this.pagingConf) {
-            return this.paginate(data);
+    prev() {
+        return this.paginate(this.getPage() - 1);
+    }
+    getPage() {
+        return this.page;
+    }
+    getPages() {
+        return this.pages;
+    }
+    getLast() {
+        return Math.ceil(this.count / this.perPage);
+    }
+    isPageOutOfBounce() {
+        return (this.page * this.perPage) >= (this.count + this.perPage) && this.page > 1;
+    }
+    initPages() {
+        const pagesCount = this.getLast();
+        let showPagesCount = 4;
+        showPagesCount = pagesCount < showPagesCount ? pagesCount : showPagesCount;
+        this.pages = [];
+        if (this.shouldShow()) {
+            let middleOne = Math.ceil(showPagesCount / 2);
+            middleOne = this.page >= middleOne ? this.page : middleOne;
+            let lastOne = middleOne + Math.floor(showPagesCount / 2);
+            lastOne = lastOne >= pagesCount ? pagesCount : lastOne;
+            const firstOne = lastOne - showPagesCount + 1;
+            for (let i = firstOne; i <= lastOne; i++) {
+                this.pages.push(i);
+            }
         }
-        else
-            return data;
     }
-    sort(data) {
-        if (this.sortConf) {
-            this.sortConf.forEach((fieldConf) => {
-                data = LocalSorter
-                    .sort(data, fieldConf.field, fieldConf.direction, fieldConf.compare);
-            });
+    onChangePerPage() {
+        const paging = this.source.getPaging();
+        if (paging) {
+            paging.perPage = this.currentPerPage * 1;
         }
-        return data;
+        this.source.refresh();
+        this.initPages();
     }
-    // TODO: refactor?
-    filter(data) {
-        if (this.filterConf.filters) {
-            if (this.filterConf.andOperator) {
-                this.filterConf.filters.forEach((fieldConf) => {
-                    if (fieldConf.search?.length > 0) {
-                        data = LocalFilter
-                            .filter(data, fieldConf.field, fieldConf.search, fieldConf.filter);
-                    }
-                });
-            }
-            else {
-                let mergedData = [];
-                this.filterConf.filters.forEach((fieldConf) => {
-                    if (fieldConf.search?.length > 0) {
-                        mergedData = mergedData.concat(LocalFilter
-                            .filter(data, fieldConf.field, fieldConf.search, fieldConf.filter));
-                    }
-                });
-                // remove non unique items
-                data = mergedData.filter((elem, pos, arr) => {
-                    return arr.indexOf(elem) === pos;
-                });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PagerComponent, selector: "ng2-smart-table-pager", inputs: { source: "source", perPageSelect: "perPageSelect" }, outputs: { changePage: "changePage" }, usesOnChanges: true, ngImport: i0, template: `
+    @if (shouldShow()) {
+      <nav class="ng2-smart-pagination-nav">
+        <ul class="ng2-smart-pagination pagination">
+          <li class="ng2-smart-page-item page-item" [ngClass]="{disabled: getPage() == 1}">
+            <a class="ng2-smart-page-link page-link" href="#"
+              (click)="getPage() == 1 ? false : paginate(1)" aria-label="First">
+              <span aria-hidden="true">&laquo;</span>
+              <span class="sr-only">First</span>
+            </a>
+          </li>
+          <li class="ng2-smart-page-item page-item" [ngClass]="{disabled: getPage() == 1}">
+            <a class="ng2-smart-page-link page-link page-link-prev" href="#"
+              (click)="getPage() == 1 ? false : prev()" aria-label="Prev">
+              <span aria-hidden="true">&lt;</span>
+              <span class="sr-only">Prev</span>
+            </a>
+          </li>
+          @for (page of getPages(); track page) {
+            <li class="ng2-smart-page-item page-item"
+              [ngClass]="{active: getPage() == page}">
+              @if (getPage() == page) {
+                <span class="ng2-smart-page-link page-link"
+                  >{{ page }} <span class="sr-only">(current)</span></span>
+                }
+                @if (getPage() != page) {
+                  <a class="ng2-smart-page-link page-link" href="#"
+                  (click)="paginate(page)">{{ page }}</a>
+                }
+              </li>
             }
-        }
-        return data;
-    }
-    paginate(data) {
-        if (this.pagingConf && this.pagingConf.page && this.pagingConf.perPage) {
-            data = LocalPager.paginate(data, this.pagingConf.page, this.pagingConf.perPage);
-        }
-        return data;
-    }
-}
-
-class FilterDefault {
-    constructor() {
-        this.inputClass = '';
-        this.query = '';
-        this.filter = new EventEmitter();
-    }
-    onFilter(query) {
-        this.source.addFilter({
-            field: this.column.id,
-            search: query,
-            filter: this.column.getFilterFunction(),
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterDefault, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FilterDefault, selector: "ng-component", inputs: { column: "column", source: "source", inputClass: "inputClass", query: "query" }, outputs: { filter: "filter" }, ngImport: i0, template: '', isInline: true }); }
+            <li class="ng2-smart-page-item page-item"
+              [ngClass]="{disabled: getPage() == getLast()}">
+              <a class="ng2-smart-page-link page-link page-link-next" href="#"
+                (click)="getPage() == getLast() ? false : next()" aria-label="Next">
+                <span aria-hidden="true">&gt;</span>
+                <span class="sr-only">Next</span>
+              </a>
+            </li>
+            <li class="ng2-smart-page-item page-item"
+              [ngClass]="{disabled: getPage() == getLast()}">
+              <a class="ng2-smart-page-link page-link" href="#"
+                (click)="getPage() == getLast() ? false : paginate(getLast())" aria-label="Last">
+                <span aria-hidden="true">&raquo;</span>
+                <span class="sr-only">Last</span>
+              </a>
+            </li>
+          </ul>
+        </nav>
+      }
+    
+      @if (perPageSelect && perPageSelect.length > 0) {
+        <nav class="ng2-smart-pagination-per-page">
+          <label for="per-page">
+            Per Page:
+          </label>
+          <select (change)="onChangePerPage()" [(ngModel)]="currentPerPage" id="per-page">
+            @for (item of perPageSelect; track item) {
+              <option [value]="item">{{ item }}</option>
+            }
+          </select>
+        </nav>
+      }
+    `, isInline: true, styles: [".ng2-smart-pagination{display:inline-flex;font-size:.875em;padding:0}.ng2-smart-pagination .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ng2-smart-pagination .ng2-smart-page-item{display:inline}.ng2-smart-pagination .page-link-next,.ng2-smart-pagination .page-link-prev{font-size:10px}:host{display:flex;justify-content:space-between}:host select{margin:1rem 0 1rem 1rem}:host label{margin:1rem 0 1rem 1rem;line-height:2.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterDefault, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PagerComponent, decorators: [{
             type: Component,
-            args: [{
-                    template: '',
-                }]
-        }], propDecorators: { column: [{
-                type: Input
-            }], source: [{
-                type: Input
-            }], inputClass: [{
+            args: [{ selector: 'ng2-smart-table-pager', template: `
+    @if (shouldShow()) {
+      <nav class="ng2-smart-pagination-nav">
+        <ul class="ng2-smart-pagination pagination">
+          <li class="ng2-smart-page-item page-item" [ngClass]="{disabled: getPage() == 1}">
+            <a class="ng2-smart-page-link page-link" href="#"
+              (click)="getPage() == 1 ? false : paginate(1)" aria-label="First">
+              <span aria-hidden="true">&laquo;</span>
+              <span class="sr-only">First</span>
+            </a>
+          </li>
+          <li class="ng2-smart-page-item page-item" [ngClass]="{disabled: getPage() == 1}">
+            <a class="ng2-smart-page-link page-link page-link-prev" href="#"
+              (click)="getPage() == 1 ? false : prev()" aria-label="Prev">
+              <span aria-hidden="true">&lt;</span>
+              <span class="sr-only">Prev</span>
+            </a>
+          </li>
+          @for (page of getPages(); track page) {
+            <li class="ng2-smart-page-item page-item"
+              [ngClass]="{active: getPage() == page}">
+              @if (getPage() == page) {
+                <span class="ng2-smart-page-link page-link"
+                  >{{ page }} <span class="sr-only">(current)</span></span>
+                }
+                @if (getPage() != page) {
+                  <a class="ng2-smart-page-link page-link" href="#"
+                  (click)="paginate(page)">{{ page }}</a>
+                }
+              </li>
+            }
+            <li class="ng2-smart-page-item page-item"
+              [ngClass]="{disabled: getPage() == getLast()}">
+              <a class="ng2-smart-page-link page-link page-link-next" href="#"
+                (click)="getPage() == getLast() ? false : next()" aria-label="Next">
+                <span aria-hidden="true">&gt;</span>
+                <span class="sr-only">Next</span>
+              </a>
+            </li>
+            <li class="ng2-smart-page-item page-item"
+              [ngClass]="{disabled: getPage() == getLast()}">
+              <a class="ng2-smart-page-link page-link" href="#"
+                (click)="getPage() == getLast() ? false : paginate(getLast())" aria-label="Last">
+                <span aria-hidden="true">&raquo;</span>
+                <span class="sr-only">Last</span>
+              </a>
+            </li>
+          </ul>
+        </nav>
+      }
+    
+      @if (perPageSelect && perPageSelect.length > 0) {
+        <nav class="ng2-smart-pagination-per-page">
+          <label for="per-page">
+            Per Page:
+          </label>
+          <select (change)="onChangePerPage()" [(ngModel)]="currentPerPage" id="per-page">
+            @for (item of perPageSelect; track item) {
+              <option [value]="item">{{ item }}</option>
+            }
+          </select>
+        </nav>
+      }
+    `, styles: [".ng2-smart-pagination{display:inline-flex;font-size:.875em;padding:0}.ng2-smart-pagination .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ng2-smart-pagination .ng2-smart-page-item{display:inline}.ng2-smart-pagination .page-link-next,.ng2-smart-pagination .page-link-prev{font-size:10px}:host{display:flex;justify-content:space-between}:host select{margin:1rem 0 1rem 1rem}:host label{margin:1rem 0 1rem 1rem;line-height:2.5rem}\n"] }]
+        }], propDecorators: { source: [{
                 type: Input
-            }], query: [{
+            }], perPageSelect: [{
                 type: Input
-            }], filter: [{
+            }], changePage: [{
                 type: Output
             }] } });
 
-class DefaultFilter {
+class EditCellDefault {
     constructor() {
-        this.delay = 300;
-        this.query = '';
         this.inputClass = '';
-        this.filter = new EventEmitter();
+        this.edited = new EventEmitter();
     }
-    ngOnDestroy() {
-        if (this.changesSubscription) {
-            this.changesSubscription.unsubscribe();
-        }
+    onEdited(event) {
+        this.edited.next(event);
+        return false;
     }
-    setFilter() {
-        this.filter.emit(this.query);
+    onStopEditing() {
+        this.cell.getRow().isInEditing = false;
+        return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultFilter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DefaultFilter, selector: "ng-component", inputs: { query: "query", inputClass: "inputClass", column: "column" }, outputs: { filter: "filter" }, ngImport: i0, template: '', isInline: true }); }
+    onClick(event) {
+        event.stopPropagation();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EditCellDefault, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EditCellDefault, selector: "ng-component", inputs: { cell: "cell", inputClass: "inputClass" }, outputs: { edited: "edited" }, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultFilter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EditCellDefault, decorators: [{
             type: Component,
             args: [{
-                    template: '',
+                    template: ''
                 }]
-        }], propDecorators: { query: [{
+        }], propDecorators: { cell: [{
                 type: Input
             }], inputClass: [{
                 type: Input
-            }], column: [{
-                type: Input
-            }], filter: [{
+            }], edited: [{
                 type: Output
             }] } });
 
-class CheckboxFilterComponent extends DefaultFilter {
-    constructor() {
-        super();
-        this.filterActive = false;
-        this.inputControl = new UntypedFormControl();
-    }
-    ngOnInit() {
-        this.changesSubscription = this.inputControl.valueChanges
-            .pipe(debounceTime(this.delay))
-            .subscribe((checked) => {
-            this.filterActive = true;
-            const trueVal = (this.column.getFilterConfig() && this.column.getFilterConfig().true) || true;
-            const falseVal = (this.column.getFilterConfig() && this.column.getFilterConfig().false) || false;
-            this.query = checked ? trueVal : falseVal;
-            this.setFilter();
-        });
-    }
-    resetFilter(event) {
-        event.preventDefault();
-        this.query = '';
-        this.inputControl.setValue(false, { emitEvent: false });
-        this.filterActive = false;
-        this.setFilter();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CheckboxFilterComponent, selector: "checkbox-filter", usesInheritance: true, ngImport: i0, template: `
-    <input type="checkbox" [formControl]="inputControl" [ngClass]="inputClass" class="form-control">
-    @if (filterActive) {
-      <a href="#"
-      (click)="resetFilter($event)">{{column.getFilterConfig()?.resetText || 'reset'}}</a>
-    }
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxFilterComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'checkbox-filter',
-                    template: `
-    <input type="checkbox" [formControl]="inputControl" [ngClass]="inputClass" class="form-control">
-    @if (filterActive) {
-      <a href="#"
-      (click)="resetFilter($event)">{{column.getFilterConfig()?.resetText || 'reset'}}</a>
-    }
-    `,
-                }]
-        }], ctorParameters: () => [] });
-
-class InputFilterComponent extends DefaultFilter {
-    constructor() {
+class CustomEditComponent extends EditCellDefault {
+    constructor(resolver) {
         super();
-        this.inputControl = new UntypedFormControl();
+        this.resolver = resolver;
     }
-    ngOnInit() {
-        if (this.query) {
-            this.inputControl.setValue(this.query);
+    ngOnChanges(changes) {
+        const editor = this.cell.getColumn().editor;
+        if (this.cell && !this.customComponent && editor && editor.type == 'custom') {
+            const componentFactory = this.resolver.resolveComponentFactory(editor.component);
+            this.customComponent = this.dynamicTarget.createComponent(componentFactory);
+            // set @Inputs and @Outputs of custom component
+            this.customComponent.instance.cell = this.cell;
+            this.customComponent.instance.inputClass = this.inputClass;
+            this.customComponent.instance.onStopEditing.subscribe(() => this.onStopEditing());
+            this.customComponent.instance.onEdited.subscribe((event) => this.onEdited(event));
+            this.customComponent.instance.onClick.subscribe((event) => this.onClick(event));
         }
-        this.inputControl.valueChanges
-            .pipe(distinctUntilChanged(), debounceTime(this.delay))
-            .subscribe((value) => {
-            this.query = this.inputControl.value;
-            this.setFilter();
-        });
     }
-    ngOnChanges(changes) {
-        if (changes?.['query']) {
-            this.inputControl.setValue(this.query);
+    ngOnDestroy() {
+        if (this.customComponent) {
+            this.customComponent.destroy();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputFilterComponent, selector: "input-filter", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
-    <input
-      [ngClass]="inputClass"
-      [formControl]="inputControl"
-      class="form-control"
-      type="text"
-      placeholder="{{ column.title }}"/>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomEditComponent, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CustomEditComponent, selector: "table-cell-custom-editor", viewQueries: [{ propertyName: "dynamicTarget", first: true, predicate: ["dynamicTarget"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    <ng-template #dynamicTarget></ng-template>
+  `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomEditComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'input-filter',
+                    selector: 'table-cell-custom-editor',
                     template: `
-    <input
-      [ngClass]="inputClass"
-      [formControl]="inputControl"
-      class="form-control"
-      type="text"
-      placeholder="{{ column.title }}"/>
+    <ng-template #dynamicTarget></ng-template>
   `,
                 }]
+        }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }], propDecorators: { dynamicTarget: [{
+                type: ViewChild,
+                args: ['dynamicTarget', { read: ViewContainerRef, static: true }]
+            }] } });
+
+class CheckboxEditorComponent extends DefaultEditor {
+    constructor() {
+        super();
+    }
+    onChange(event) {
+        const config = this.cell.getColumn().getConfig();
+        const trueVal = (config && config?.true) || true;
+        const falseVal = (config && config?.false) || false;
+        this.cell.newValue = event.target.checked ? trueVal : falseVal;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CheckboxEditorComponent, selector: "checkbox-editor", usesInheritance: true, ngImport: i0, template: `
+    <input [ngClass]="inputClass"
+           type="checkbox"
+           class="form-control"
+           [name]="cell.getId()"
+           [disabled]="!cell.isEditable()"
+           [checked]="cell.getValue() === (cell.getColumn().getConfig()?.true || true)"
+           (click)="onClick.emit($event)"
+           (change)="onChange($event)">
+    `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'checkbox-editor', template: `
+    <input [ngClass]="inputClass"
+           type="checkbox"
+           class="form-control"
+           [name]="cell.getId()"
+           [disabled]="!cell.isEditable()"
+           [checked]="cell.getValue() === (cell.getColumn().getConfig()?.true || true)"
+           (click)="onClick.emit($event)"
+           (change)="onChange($event)">
+    `, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }]
         }], ctorParameters: () => [] });
 
-class SelectFilterComponent extends DefaultFilter {
+class InputEditorComponent extends DefaultEditor {
     constructor() {
         super();
     }
-    ngOnInit() {
-        if (this.inputControl.valueChanges) {
-            this.inputControl.valueChanges
-                .pipe(skip(1), distinctUntilChanged(), debounceTime(this.delay))
-                .subscribe((value) => this.setFilter());
-        }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputEditorComponent, selector: "input-editor", usesInheritance: true, ngImport: i0, template: `
+    <input [ngClass]="inputClass"
+           class="form-control"
+           [(ngModel)]="cell.newValue"
+           [name]="cell.getId()"
+           [placeholder]="cell.getTitle()"
+           [disabled]="!cell.isEditable()"
+           (click)="onClick.emit($event)"
+           (keydown.enter)="onEdited.emit($event)"
+           (keydown.esc)="onStopEditing.emit()">
+    `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'input-editor', template: `
+    <input [ngClass]="inputClass"
+           class="form-control"
+           [(ngModel)]="cell.newValue"
+           [name]="cell.getId()"
+           [placeholder]="cell.getTitle()"
+           [disabled]="!cell.isEditable()"
+           (click)="onClick.emit($event)"
+           (keydown.enter)="onEdited.emit($event)"
+           (keydown.esc)="onStopEditing.emit()">
+    `, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }]
+        }], ctorParameters: () => [] });
+
+class SelectEditorComponent extends DefaultEditor {
+    constructor() {
+        super();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SelectFilterComponent, selector: "select-filter", viewQueries: [{ propertyName: "inputControl", first: true, predicate: ["inputControl"], descendants: true, read: NgControl, static: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SelectEditorComponent, selector: "select-editor", usesInheritance: true, ngImport: i0, template: `
     <select [ngClass]="inputClass"
       class="form-control"
-      #inputControl
-      [(ngModel)]="query">
+      [(ngModel)]="cell.newValue"
+      [name]="cell.getId()"
+      [disabled]="!cell.isEditable()"
+      (click)="onClick.emit($event)"
+      (keydown.enter)="onEdited.emit($event)"
+      (keydown.esc)="onStopEditing.emit()">
     
-      <option value="">{{ column.getFilterConfig().selectText }}</option>
-      @for (option of column.getFilterConfig().list; track option) {
-        <option [value]="option.value">
-          {{ option.title }}
+      @for (option of cell.getColumn().getConfig()?.list; track option) {
+        <option [value]="option.value"
+          [selected]="option.value === cell.getValue()">{{ option.title }}
         </option>
       }
     </select>
     `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectEditorComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'select-filter',
+                    selector: 'select-editor',
                     template: `
     <select [ngClass]="inputClass"
       class="form-control"
-      #inputControl
-      [(ngModel)]="query">
+      [(ngModel)]="cell.newValue"
+      [name]="cell.getId()"
+      [disabled]="!cell.isEditable()"
+      (click)="onClick.emit($event)"
+      (keydown.enter)="onEdited.emit($event)"
+      (keydown.esc)="onStopEditing.emit()">
     
-      <option value="">{{ column.getFilterConfig().selectText }}</option>
-      @for (option of column.getFilterConfig().list; track option) {
-        <option [value]="option.value">
-          {{ option.title }}
+      @for (option of cell.getColumn().getConfig()?.list; track option) {
+        <option [value]="option.value"
+          [selected]="option.value === cell.getValue()">{{ option.title }}
         </option>
       }
     </select>
     `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { inputControl: [{
-                type: ViewChild,
-                args: ['inputControl', { read: NgControl, static: true }]
-            }] } });
+        }], ctorParameters: () => [] });
 
-class DefaultFilterComponent extends FilterDefault {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DefaultFilterComponent, selector: "default-table-filter", usesInheritance: true, ngImport: i0, template: `
-@switch (column.getFilterType()) {
-  @case ('list') {
-    <select-filter
-      [query]="query"
-      [ngClass]="inputClass"
-      [column]="column"
-      (filter)="onFilter($event)">
-    </select-filter>
-  }
-  @case ('checkbox') {
-    <checkbox-filter
-      [query]="query"
-      [ngClass]="inputClass"
-      [column]="column"
-      (filter)="onFilter($event)">
-    </checkbox-filter>
-  }
-  @default {
-    <input-filter
-      [query]="query"
-      [ngClass]="inputClass"
-      [column]="column"
-      (filter)="onFilter($event)">
-  </input-filter>
-}
-}
-`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CheckboxFilterComponent, selector: "checkbox-filter" }, { kind: "component", type: InputFilterComponent, selector: "input-filter" }, { kind: "component", type: SelectFilterComponent, selector: "select-filter" }] }); }
+class TextareaEditorComponent extends DefaultEditor {
+    constructor() {
+        super();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextareaEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TextareaEditorComponent, selector: "textarea-editor", usesInheritance: true, ngImport: i0, template: `
+    <textarea [ngClass]="inputClass"
+              class="form-control"
+              [(ngModel)]="cell.newValue"
+              [name]="cell.getId()"
+              [disabled]="!cell.isEditable()"
+              [placeholder]="cell.getTitle()"
+              (click)="onClick.emit($event)"
+              (keydown.enter)="onEdited.emit($event)"
+              (keydown.esc)="onStopEditing.emit()">
+    </textarea>
+    `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextareaEditorComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'default-table-filter',
-                    template: `
-@switch (column.getFilterType()) {
-  @case ('list') {
-    <select-filter
-      [query]="query"
-      [ngClass]="inputClass"
-      [column]="column"
-      (filter)="onFilter($event)">
-    </select-filter>
-  }
-  @case ('checkbox') {
-    <checkbox-filter
-      [query]="query"
-      [ngClass]="inputClass"
-      [column]="column"
-      (filter)="onFilter($event)">
-    </checkbox-filter>
-  }
-  @default {
-    <input-filter
-      [query]="query"
-      [ngClass]="inputClass"
-      [column]="column"
-      (filter)="onFilter($event)">
-  </input-filter>
-}
+            args: [{ selector: 'textarea-editor', template: `
+    <textarea [ngClass]="inputClass"
+              class="form-control"
+              [(ngModel)]="cell.newValue"
+              [name]="cell.getId()"
+              [disabled]="!cell.isEditable()"
+              [placeholder]="cell.getTitle()"
+              (click)="onClick.emit($event)"
+              (keydown.enter)="onEdited.emit($event)"
+              (keydown.esc)="onStopEditing.emit()">
+    </textarea>
+    `, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }]
+        }], ctorParameters: () => [] });
+
+class DefaultEditComponent extends EditCellDefault {
+    constructor() {
+        super();
+    }
+    getEditorType() {
+        const editor = this.cell.getColumn().editor;
+        if (editor) {
+            return editor.type;
+        }
+        return 'text';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DefaultEditComponent, selector: "table-cell-default-editor", usesInheritance: true, ngImport: i0, template: "<div>\n  @switch (getEditorType()) {\n    @case ('list') {\n      <select-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\"\n        (onEdited)=\"onEdited($event)\"\n        (onStopEditing)=\"onStopEditing()\">\n      </select-editor>\n    }\n    @case ('textarea') {\n      <textarea-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\"\n        (onEdited)=\"onEdited($event)\"\n        (onStopEditing)=\"onStopEditing()\">\n      </textarea-editor>\n    }\n    @case ('checkbox') {\n      <checkbox-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\">\n      </checkbox-editor>\n    }\n    @default {\n      <input-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\"\n        (onEdited)=\"onEdited($event)\"\n        (onStopEditing)=\"onStopEditing()\">\n    </input-editor>\n  }\n}\n</div>", dependencies: [{ kind: "component", type: CheckboxEditorComponent, selector: "checkbox-editor" }, { kind: "component", type: InputEditorComponent, selector: "input-editor" }, { kind: "component", type: SelectEditorComponent, selector: "select-editor" }, { kind: "component", type: TextareaEditorComponent, selector: "textarea-editor" }] }); }
 }
-`,
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultEditComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'table-cell-default-editor', template: "<div>\n  @switch (getEditorType()) {\n    @case ('list') {\n      <select-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\"\n        (onEdited)=\"onEdited($event)\"\n        (onStopEditing)=\"onStopEditing()\">\n      </select-editor>\n    }\n    @case ('textarea') {\n      <textarea-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\"\n        (onEdited)=\"onEdited($event)\"\n        (onStopEditing)=\"onStopEditing()\">\n      </textarea-editor>\n    }\n    @case ('checkbox') {\n      <checkbox-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\">\n      </checkbox-editor>\n    }\n    @default {\n      <input-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\"\n        (onEdited)=\"onEdited($event)\"\n        (onStopEditing)=\"onStopEditing()\">\n    </input-editor>\n  }\n}\n</div>" }]
+        }], ctorParameters: () => [] });
 
-class CustomFilterComponent extends FilterDefault {
-    constructor(resolver) {
-        super();
-        this.resolver = resolver;
+class EditCellComponent {
+    constructor() {
+        this.inputClass = '';
+        this.edited = new EventEmitter();
     }
-    ngOnChanges(changes) {
-        if (this.customComponent) {
-            this.customComponent.instance.ngOnChanges(changes);
-            return;
-        }
-        if (this.column.filter && this.column.filter.type === 'custom') {
-            const componentFactory = this.resolver.resolveComponentFactory(this.column.filter?.component);
-            this.customComponent = this.dynamicTarget.createComponent(componentFactory);
-        }
-        // set @Inputs and @Outputs of custom component
-        this.customComponent.instance.query = this.query;
-        this.customComponent.instance.column = this.column;
-        this.customComponent.instance.source = this.source;
-        this.customComponent.instance.inputClass = this.inputClass;
-        this.customComponent.instance.filter.subscribe((event) => this.onFilter(event));
+    onEdited(event) {
+        this.edited.next(event);
+        return false;
     }
-    ngOnDestroy() {
-        if (this.customComponent) {
-            this.customComponent.destroy();
+    getEditorType() {
+        const editor = this.cell.getColumn().editor;
+        if (editor) {
+            return editor.type;
         }
+        return 'text';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomFilterComponent, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CustomFilterComponent, selector: "custom-table-filter", viewQueries: [{ propertyName: "dynamicTarget", first: true, predicate: ["dynamicTarget"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `<ng-template #dynamicTarget></ng-template>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EditCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EditCellComponent, selector: "table-cell-edit-mode", inputs: { cell: "cell", inputClass: "inputClass" }, outputs: { edited: "edited" }, ngImport: i0, template: `
+      <div>
+        @switch (getEditorType()) {
+          @case ('custom') {
+            <table-cell-custom-editor
+              [cell]="cell"
+              [inputClass]="inputClass"
+              (edited)="onEdited($event)">
+            </table-cell-custom-editor>
+          }
+          @default {
+            <table-cell-default-editor
+              [cell]="cell"
+              [inputClass]="inputClass"
+              (edited)="onEdited($event)">
+            </table-cell-default-editor>
+          }
+        }
+      </div>
+      `, isInline: true, dependencies: [{ kind: "component", type: CustomEditComponent, selector: "table-cell-custom-editor" }, { kind: "component", type: DefaultEditComponent, selector: "table-cell-default-editor" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EditCellComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'custom-table-filter',
-                    template: `<ng-template #dynamicTarget></ng-template>`,
+                    selector: 'table-cell-edit-mode',
+                    template: `
+      <div>
+        @switch (getEditorType()) {
+          @case ('custom') {
+            <table-cell-custom-editor
+              [cell]="cell"
+              [inputClass]="inputClass"
+              (edited)="onEdited($event)">
+            </table-cell-custom-editor>
+          }
+          @default {
+            <table-cell-default-editor
+              [cell]="cell"
+              [inputClass]="inputClass"
+              (edited)="onEdited($event)">
+            </table-cell-default-editor>
+          }
+        }
+      </div>
+      `,
                 }]
-        }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }], propDecorators: { dynamicTarget: [{
-                type: ViewChild,
-                args: ['dynamicTarget', { read: ViewContainerRef, static: true }]
+        }], propDecorators: { cell: [{
+                type: Input
+            }], inputClass: [{
+                type: Input
+            }], edited: [{
+                type: Output
             }] } });
 
-class FilterComponent extends FilterDefault {
-    ngOnChanges(changes) {
-        if (changes['source']) {
-            if (!changes['source'].firstChange && this.dataChangedSub) {
-                this.dataChangedSub.unsubscribe();
-            }
-            this.dataChangedSub = this.source.onChanged().subscribe((dataChanges) => {
-                const filterConf = this.source.getFilter();
-                if (filterConf && filterConf.filters && filterConf.filters.length === 0) {
-                    this.query = '';
-                    // add a check for existing filters an set the query if one exists for this column
-                    // this covers instances where the filter is set by user code while maintaining existing functionality
-                }
-                else if (filterConf && filterConf.filters && filterConf.filters.length > 0) {
-                    filterConf.filters.forEach((k, v) => {
-                        if (k.field == this.column.id) {
-                            this.query = k.search;
-                        }
-                    });
-                }
-            });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FilterComponent, selector: "ng2-smart-table-filter", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
-      @if (column.isFilterable) {
-        <div class="ng2-smart-filter">
-          @switch (column.getFilterType()) {
-            @case ('custom') {
-              <custom-table-filter
-                [query]="query"
-                [column]="column"
-                [source]="source"
-                [inputClass]="inputClass"
-                (filter)="onFilter($event)">
-              </custom-table-filter>
-            }
-            @default {
-              <default-table-filter
-                [query]="query"
-                [column]="column"
-                [source]="source"
-                [inputClass]="inputClass"
-                (filter)="onFilter($event)">
-              </default-table-filter>
-            }
-          }
-        </div>
-      }
-      `, isInline: true, styles: [":host .ng2-smart-filter ::ng-deep input,:host .ng2-smart-filter ::ng-deep select{width:100%;line-height:normal;padding:.375em .75em;font-weight:400}:host .ng2-smart-filter ::ng-deep input[type=search]{box-sizing:inherit}:host .ng2-smart-filter ::ng-deep .completer-dropdown-holder{font-weight:400}:host .ng2-smart-filter ::ng-deep a{font-weight:400}\n"], dependencies: [{ kind: "component", type: DefaultFilterComponent, selector: "default-table-filter" }, { kind: "component", type: CustomFilterComponent, selector: "custom-table-filter" }] }); }
+class CustomViewComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CustomViewComponent, selector: "custom-view-component", inputs: { cell: "cell" }, ngImport: i0, template: "<ng-template\n  *ngComponentOutlet=\"\n    cell.getColumn().renderComponent;\n    inputs: { rowData: cell.getRow().getData(), value: cell.getValue() }\n  \"\n></ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng2-smart-table-filter', template: `
-      @if (column.isFilterable) {
-        <div class="ng2-smart-filter">
-          @switch (column.getFilterType()) {
-            @case ('custom') {
-              <custom-table-filter
-                [query]="query"
-                [column]="column"
-                [source]="source"
-                [inputClass]="inputClass"
-                (filter)="onFilter($event)">
-              </custom-table-filter>
-            }
-            @default {
-              <default-table-filter
-                [query]="query"
-                [column]="column"
-                [source]="source"
-                [inputClass]="inputClass"
-                (filter)="onFilter($event)">
-              </default-table-filter>
-            }
-          }
-        </div>
-      }
-      `, styles: [":host .ng2-smart-filter ::ng-deep input,:host .ng2-smart-filter ::ng-deep select{width:100%;line-height:normal;padding:.375em .75em;font-weight:400}:host .ng2-smart-filter ::ng-deep input[type=search]{box-sizing:inherit}:host .ng2-smart-filter ::ng-deep .completer-dropdown-holder{font-weight:400}:host .ng2-smart-filter ::ng-deep a{font-weight:400}\n"] }]
-        }] });
+            args: [{ selector: "custom-view-component", template: "<ng-template\n  *ngComponentOutlet=\"\n    cell.getColumn().renderComponent;\n    inputs: { rowData: cell.getRow().getData(), value: cell.getValue() }\n  \"\n></ng-template>\n" }]
+        }], propDecorators: { cell: [{
+                type: Input
+            }] } });
 
-const FILTER_COMPONENTS = [
-    FilterDefault,
-    DefaultFilter,
-    FilterComponent,
-    DefaultFilterComponent,
-    CustomFilterComponent,
-    CheckboxFilterComponent,
-    InputFilterComponent,
-    SelectFilterComponent,
-];
-class FilterModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: FilterModule, declarations: [FilterDefault,
-            DefaultFilter,
-            FilterComponent,
-            DefaultFilterComponent,
-            CustomFilterComponent,
-            CheckboxFilterComponent,
-            InputFilterComponent,
-            SelectFilterComponent], imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule], exports: [FilterDefault,
-            DefaultFilter,
-            FilterComponent,
-            DefaultFilterComponent,
-            CustomFilterComponent,
-            CheckboxFilterComponent,
-            InputFilterComponent,
-            SelectFilterComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterModule, imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule] }); }
+class ViewCellComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ViewCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ViewCellComponent, selector: "table-cell-view-mode", inputs: { cell: "cell" }, ngImport: i0, template: `
+    <div>
+      @switch (cell.getColumn().type) {
+        @case ('custom') {
+          <custom-view-component [cell]="cell"></custom-view-component>
+        }
+        @case ('html') {
+          <div [innerHTML]="cell.getValue()"></div>
+        }
+        @default {
+          <div>{{ cell.getValue() }}</div>
+        }
+      }
+    </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: CustomViewComponent, selector: "custom-view-component", inputs: ["cell"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterModule, decorators: [{
-            type: NgModule,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ViewCellComponent, decorators: [{
+            type: Component,
             args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                    ],
-                    declarations: [
-                        ...FILTER_COMPONENTS,
-                    ],
-                    exports: [
-                        ...FILTER_COMPONENTS,
-                    ],
+                    selector: 'table-cell-view-mode',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <div>
+      @switch (cell.getColumn().type) {
+        @case ('custom') {
+          <custom-view-component [cell]="cell"></custom-view-component>
+        }
+        @case ('html') {
+          <div [innerHTML]="cell.getValue()"></div>
+        }
+        @default {
+          <div>{{ cell.getValue() }}</div>
+        }
+      }
+    </div>
+    `,
                 }]
-        }] });
+        }], propDecorators: { cell: [{
+                type: Input
+            }] } });
 
-class PagerComponent {
+class CellComponent {
     constructor() {
-        this.perPageSelect = [];
-        this.changePage = new EventEmitter();
-        this.currentPerPage = 0;
-        this.pages = [];
-        this.page = 1;
-        this.count = 0;
-        this.perPage = 0;
-    }
-    ngOnChanges(changes) {
-        if (changes['source']) {
-            if (!changes['source'].firstChange && this.dataChangedSub) {
-                this.dataChangedSub.unsubscribe();
-            }
-            this.dataChangedSub = this.source.onChanged().subscribe((dataChanges) => {
-                const paging = this.source.getPaging();
-                if (paging) {
-                    this.page = paging.page;
-                    this.perPage = paging.perPage;
-                }
-                this.currentPerPage = this.perPage;
-                this.count = this.source.count();
-                if (this.isPageOutOfBounce()) {
-                    this.source.setPage(--this.page);
-                }
-                this.processPageChange(dataChanges);
-                this.initPages();
-            });
-        }
+        this.inputClass = '';
+        this.mode = 'inline';
+        this.isInEditing = false;
+        this.edited = new EventEmitter();
     }
-    /**
-     * We change the page here depending on the action performed against data source
-     * if a new element was added to the end of the table - then change the page to the last
-     * if a new element was added to the beginning of the table - then to the first page
-     * @param changes
-     */
-    processPageChange(changes) {
-        if (changes['action'] === 'prepend') {
-            this.source.setPage(1);
+    onEdited(event) {
+        if (this.isNew) {
+            this.grid.create(this.grid.getNewRow(), this.createConfirm);
         }
-        if (changes['action'] === 'append') {
-            this.source.setPage(this.getLast());
+        else {
+            this.grid.save(this.row, this.editConfirm);
         }
     }
-    shouldShow() {
-        return this.source.count() > this.perPage;
-    }
-    paginate(page) {
-        this.source.setPage(page);
-        this.page = page;
-        this.changePage.emit({ page });
-        return false;
-    }
-    next() {
-        return this.paginate(this.getPage() + 1);
-    }
-    prev() {
-        return this.paginate(this.getPage() - 1);
-    }
-    getPage() {
-        return this.page;
-    }
-    getPages() {
-        return this.pages;
-    }
-    getLast() {
-        return Math.ceil(this.count / this.perPage);
-    }
-    isPageOutOfBounce() {
-        return (this.page * this.perPage) >= (this.count + this.perPage) && this.page > 1;
-    }
-    initPages() {
-        const pagesCount = this.getLast();
-        let showPagesCount = 4;
-        showPagesCount = pagesCount < showPagesCount ? pagesCount : showPagesCount;
-        this.pages = [];
-        if (this.shouldShow()) {
-            let middleOne = Math.ceil(showPagesCount / 2);
-            middleOne = this.page >= middleOne ? this.page : middleOne;
-            let lastOne = middleOne + Math.floor(showPagesCount / 2);
-            lastOne = lastOne >= pagesCount ? pagesCount : lastOne;
-            const firstOne = lastOne - showPagesCount + 1;
-            for (let i = firstOne; i <= lastOne; i++) {
-                this.pages.push(i);
-            }
-        }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CellComponent, selector: "ng2-smart-table-cell", inputs: { grid: "grid", row: "row", editConfirm: "editConfirm", createConfirm: "createConfirm", isNew: "isNew", cell: "cell", inputClass: "inputClass", mode: "mode", isInEditing: "isInEditing" }, outputs: { edited: "edited" }, ngImport: i0, template: `
+    @if (!isInEditing) {
+      <table-cell-view-mode [cell]="cell"></table-cell-view-mode>
     }
-    onChangePerPage() {
-        const paging = this.source.getPaging();
-        if (paging) {
-            paging.perPage = this.currentPerPage * 1;
-        }
-        this.source.refresh();
-        this.initPages();
+    @if (isInEditing) {
+      <table-cell-edit-mode [cell]="cell"
+        [inputClass]="inputClass"
+        (edited)="onEdited($event)">
+      </table-cell-edit-mode>
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PagerComponent, selector: "ng2-smart-table-pager", inputs: { source: "source", perPageSelect: "perPageSelect" }, outputs: { changePage: "changePage" }, usesOnChanges: true, ngImport: i0, template: `
-    @if (shouldShow()) {
-      <nav class="ng2-smart-pagination-nav">
-        <ul class="ng2-smart-pagination pagination">
-          <li class="ng2-smart-page-item page-item" [ngClass]="{disabled: getPage() == 1}">
-            <a class="ng2-smart-page-link page-link" href="#"
-              (click)="getPage() == 1 ? false : paginate(1)" aria-label="First">
-              <span aria-hidden="true">&laquo;</span>
-              <span class="sr-only">First</span>
-            </a>
-          </li>
-          <li class="ng2-smart-page-item page-item" [ngClass]="{disabled: getPage() == 1}">
-            <a class="ng2-smart-page-link page-link page-link-prev" href="#"
-              (click)="getPage() == 1 ? false : prev()" aria-label="Prev">
-              <span aria-hidden="true">&lt;</span>
-              <span class="sr-only">Prev</span>
-            </a>
-          </li>
-          @for (page of getPages(); track page) {
-            <li class="ng2-smart-page-item page-item"
-              [ngClass]="{active: getPage() == page}">
-              @if (getPage() == page) {
-                <span class="ng2-smart-page-link page-link"
-                  >{{ page }} <span class="sr-only">(current)</span></span>
-                }
-                @if (getPage() != page) {
-                  <a class="ng2-smart-page-link page-link" href="#"
-                  (click)="paginate(page)">{{ page }}</a>
-                }
-              </li>
-            }
-            <li class="ng2-smart-page-item page-item"
-              [ngClass]="{disabled: getPage() == getLast()}">
-              <a class="ng2-smart-page-link page-link page-link-next" href="#"
-                (click)="getPage() == getLast() ? false : next()" aria-label="Next">
-                <span aria-hidden="true">&gt;</span>
-                <span class="sr-only">Next</span>
-              </a>
-            </li>
-            <li class="ng2-smart-page-item page-item"
-              [ngClass]="{disabled: getPage() == getLast()}">
-              <a class="ng2-smart-page-link page-link" href="#"
-                (click)="getPage() == getLast() ? false : paginate(getLast())" aria-label="Last">
-                <span aria-hidden="true">&raquo;</span>
-                <span class="sr-only">Last</span>
-              </a>
-            </li>
-          </ul>
-        </nav>
-      }
-    
-      @if (perPageSelect && perPageSelect.length > 0) {
-        <nav class="ng2-smart-pagination-per-page">
-          <label for="per-page">
-            Per Page:
-          </label>
-          <select (change)="onChangePerPage()" [(ngModel)]="currentPerPage" id="per-page">
-            @for (item of perPageSelect; track item) {
-              <option [value]="item">{{ item }}</option>
-            }
-          </select>
-        </nav>
-      }
-    `, isInline: true, styles: [".ng2-smart-pagination{display:inline-flex;font-size:.875em;padding:0}.ng2-smart-pagination .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ng2-smart-pagination .ng2-smart-page-item{display:inline}.ng2-smart-pagination .page-link-next,.ng2-smart-pagination .page-link-prev{font-size:10px}:host{display:flex;justify-content:space-between}:host select{margin:1rem 0 1rem 1rem}:host label{margin:1rem 0 1rem 1rem;line-height:2.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: EditCellComponent, selector: "table-cell-edit-mode", inputs: ["cell", "inputClass"], outputs: ["edited"] }, { kind: "component", type: ViewCellComponent, selector: "table-cell-view-mode", inputs: ["cell"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PagerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng2-smart-table-pager', template: `
-    @if (shouldShow()) {
-      <nav class="ng2-smart-pagination-nav">
-        <ul class="ng2-smart-pagination pagination">
-          <li class="ng2-smart-page-item page-item" [ngClass]="{disabled: getPage() == 1}">
-            <a class="ng2-smart-page-link page-link" href="#"
-              (click)="getPage() == 1 ? false : paginate(1)" aria-label="First">
-              <span aria-hidden="true">&laquo;</span>
-              <span class="sr-only">First</span>
-            </a>
-          </li>
-          <li class="ng2-smart-page-item page-item" [ngClass]="{disabled: getPage() == 1}">
-            <a class="ng2-smart-page-link page-link page-link-prev" href="#"
-              (click)="getPage() == 1 ? false : prev()" aria-label="Prev">
-              <span aria-hidden="true">&lt;</span>
-              <span class="sr-only">Prev</span>
-            </a>
-          </li>
-          @for (page of getPages(); track page) {
-            <li class="ng2-smart-page-item page-item"
-              [ngClass]="{active: getPage() == page}">
-              @if (getPage() == page) {
-                <span class="ng2-smart-page-link page-link"
-                  >{{ page }} <span class="sr-only">(current)</span></span>
-                }
-                @if (getPage() != page) {
-                  <a class="ng2-smart-page-link page-link" href="#"
-                  (click)="paginate(page)">{{ page }}</a>
-                }
-              </li>
-            }
-            <li class="ng2-smart-page-item page-item"
-              [ngClass]="{disabled: getPage() == getLast()}">
-              <a class="ng2-smart-page-link page-link page-link-next" href="#"
-                (click)="getPage() == getLast() ? false : next()" aria-label="Next">
-                <span aria-hidden="true">&gt;</span>
-                <span class="sr-only">Next</span>
-              </a>
-            </li>
-            <li class="ng2-smart-page-item page-item"
-              [ngClass]="{disabled: getPage() == getLast()}">
-              <a class="ng2-smart-page-link page-link" href="#"
-                (click)="getPage() == getLast() ? false : paginate(getLast())" aria-label="Last">
-                <span aria-hidden="true">&raquo;</span>
-                <span class="sr-only">Last</span>
-              </a>
-            </li>
-          </ul>
-        </nav>
-      }
-    
-      @if (perPageSelect && perPageSelect.length > 0) {
-        <nav class="ng2-smart-pagination-per-page">
-          <label for="per-page">
-            Per Page:
-          </label>
-          <select (change)="onChangePerPage()" [(ngModel)]="currentPerPage" id="per-page">
-            @for (item of perPageSelect; track item) {
-              <option [value]="item">{{ item }}</option>
-            }
-          </select>
-        </nav>
-      }
-    `, styles: [".ng2-smart-pagination{display:inline-flex;font-size:.875em;padding:0}.ng2-smart-pagination .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ng2-smart-pagination .ng2-smart-page-item{display:inline}.ng2-smart-pagination .page-link-next,.ng2-smart-pagination .page-link-prev{font-size:10px}:host{display:flex;justify-content:space-between}:host select{margin:1rem 0 1rem 1rem}:host label{margin:1rem 0 1rem 1rem;line-height:2.5rem}\n"] }]
-        }], propDecorators: { source: [{
+            args: [{
+                    selector: 'ng2-smart-table-cell',
+                    template: `
+    @if (!isInEditing) {
+      <table-cell-view-mode [cell]="cell"></table-cell-view-mode>
+    }
+    @if (isInEditing) {
+      <table-cell-edit-mode [cell]="cell"
+        [inputClass]="inputClass"
+        (edited)="onEdited($event)">
+      </table-cell-edit-mode>
+    }
+    `,
+                }]
+        }], propDecorators: { grid: [{
                 type: Input
-            }], perPageSelect: [{
+            }], row: [{
                 type: Input
-            }], changePage: [{
+            }], editConfirm: [{
+                type: Input
+            }], createConfirm: [{
+                type: Input
+            }], isNew: [{
+                type: Input
+            }], cell: [{
+                type: Input
+            }], inputClass: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], isInEditing: [{
+                type: Input
+            }], edited: [{
                 type: Output
             }] } });
 
-class PagerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: PagerModule, declarations: [PagerComponent], imports: [CommonModule,
-            FormsModule], exports: [PagerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PagerModule, imports: [CommonModule,
-            FormsModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PagerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                    ],
-                    declarations: [
-                        PagerComponent,
-                    ],
-                    exports: [
-                        PagerComponent,
-                    ],
-                }]
-        }] });
-
 class TbodyCreateCancelComponent {
     constructor() {
         this.cancelButtonContent = "";
@@ -2616,181 +2120,507 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
-class TbodyCustomComponent {
+class TbodyCustomComponent {
+    constructor() {
+        this.custom = new EventEmitter();
+    }
+    onCustom(action) {
+        this.custom.emit({
+            action: action.name,
+            data: this.row.getData(),
+            source: this.source,
+        });
+    }
+    customActions() {
+        return this.grid.getSetting("actions.custom");
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TbodyCustomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TbodyCustomComponent, selector: "ng2-st-tbody-custom", inputs: { grid: "grid", row: "row", source: "source" }, outputs: { custom: "custom" }, ngImport: i0, template: `
+    @for (action of customActions(); track action) {
+      <a
+        [id]="'row-' + row.index + '_action-' + action.name + '-button'"
+        href="#"
+        class="ng2-smart-action ng2-smart-action-custom-custom"
+        [innerHTML]="action.title"
+        (click)="$event.stopPropagation(); $event.preventDefault(); onCustom(action)"
+      ></a>
+    }
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TbodyCustomComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "ng2-st-tbody-custom",
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @for (action of customActions(); track action) {
+      <a
+        [id]="'row-' + row.index + '_action-' + action.name + '-button'"
+        href="#"
+        class="ng2-smart-action ng2-smart-action-custom-custom"
+        [innerHTML]="action.title"
+        (click)="$event.stopPropagation(); $event.preventDefault(); onCustom(action)"
+      ></a>
+    }
+    `,
+                }]
+        }], propDecorators: { grid: [{
+                type: Input
+            }], row: [{
+                type: Input
+            }], source: [{
+                type: Input
+            }], custom: [{
+                type: Output
+            }] } });
+
+class Ng2SmartTableTbodyComponent {
+    constructor() {
+        this.rowClassFunction = () => '';
+        this.save = new EventEmitter();
+        this.cancel = new EventEmitter();
+        this.edit = new EventEmitter();
+        this.editCancel = new EventEmitter();
+        this.delete = new EventEmitter();
+        this.custom = new EventEmitter();
+        this.edited = new EventEmitter();
+        this.userSelectRow = new EventEmitter();
+        this.userClickedRow = new EventEmitter();
+        this.editRowSelect = new EventEmitter();
+        this.multipleSelectRow = new EventEmitter();
+        this.isMultiSelectVisible = false;
+        this.showActionColumnLeft = false;
+        this.showActionColumnRight = false;
+        this.mode = 'inline';
+        this.editInputClass = '';
+        this.isActionAdd = false;
+        this.isActionEdit = false;
+        this.isActionDelete = false;
+        this.noDataMessage = false;
+    }
+    get tableColumnsCount() {
+        const actionColumns = this.isActionAdd || this.isActionEdit || this.isActionDelete ? 1 : 0;
+        return this.grid.getColumns().length + actionColumns;
+    }
+    ngOnChanges() {
+        this.isMultiSelectVisible = this.grid.isMultiSelectVisible();
+        this.showActionColumnLeft = this.grid.showActionColumn('left');
+        this.mode = this.grid.getSetting('mode', 'inline');
+        this.editInputClass = this.grid.getSetting('edit.inputClass', '');
+        this.showActionColumnRight = this.grid.showActionColumn('right');
+        this.isActionAdd = this.grid.getSetting('actions.add', false);
+        this.isActionEdit = this.grid.getSetting('actions.edit', false);
+        this.isActionDelete = this.grid.getSetting('actions.delete', false);
+        this.noDataMessage = this.grid.getSetting('noDataMessage');
+    }
+    getVisibleCells(cells) {
+        return (cells || []).filter((cell) => !cell.getColumn().hide);
+    }
+    trackByIdOrIndex(index, item) {
+        return item?.id || index;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Ng2SmartTableTbodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: Ng2SmartTableTbodyComponent, selector: "[ng2-st-tbody]", inputs: { grid: "grid", source: "source", deleteConfirm: "deleteConfirm", editConfirm: "editConfirm", rowClassFunction: "rowClassFunction" }, outputs: { save: "save", cancel: "cancel", edit: "edit", editCancel: "editCancel", delete: "delete", custom: "custom", edited: "edited", userSelectRow: "userSelectRow", userClickedRow: "userClickedRow", editRowSelect: "editRowSelect", multipleSelectRow: "multipleSelectRow" }, usesOnChanges: true, ngImport: i0, template: "@if (grid.getRows().length) { @for (row of grid.getRows(); track\ntrackByIdOrIndex($index, row)) {\n<tr\n  (click)=\"userClickedRow.emit(row)\"\n  class=\"ng2-smart-row\"\n  [className]=\"rowClassFunction(row)\"\n  [ngClass]=\"{ selected: row.isSelected }\"\n>\n  @if (isMultiSelectVisible) {\n  <td\n    class=\"ng2-smart-actions ng2-smart-action-multiple-select\"\n    (click)=\"$event.stopPropagation(); multipleSelectRow.emit(row)\"\n  >\n    <input\n      type=\"checkbox\"\n      [id]=\"'row-' + row.index + '_select-checkbox'\"\n      class=\"form-control\"\n      [ngModel]=\"row.isSelected\"\n    />\n  </td>\n  } @if (!row.isInEditing && showActionColumnLeft) {\n  <td class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n    <ng2-st-tbody-custom\n      [grid]=\"grid\"\n      (custom)=\"custom.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source\"\n    ></ng2-st-tbody-custom>\n    <ng2-st-tbody-edit-delete\n      [grid]=\"grid\"\n      [deleteConfirm]=\"deleteConfirm\"\n      [editConfirm]=\"editConfirm\"\n      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      (editRowSelect)=\"editRowSelect.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source\"\n    >\n    </ng2-st-tbody-edit-delete>\n  </td>\n  } @if (row.isInEditing && showActionColumnLeft) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [editConfirm]=\"editConfirm\"\n      [editCancel]=\"editCancel\"\n    ></ng2-st-tbody-create-cancel>\n  </td>\n  } @for (cell of getVisibleCells(row.cells); track cell) {\n  <td [ngClass]=\"cell.getColumnClass()\">\n    <ng2-smart-table-cell\n      [cell]=\"cell\"\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [isNew]=\"false\"\n      [mode]=\"mode\"\n      [editConfirm]=\"editConfirm\"\n      [inputClass]=\"editInputClass\"\n      [isInEditing]=\"row.isInEditing\"\n    >\n    </ng2-smart-table-cell>\n  </td>\n  } @if (row.isInEditing && showActionColumnRight) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [editConfirm]=\"editConfirm\"\n    ></ng2-st-tbody-create-cancel>\n  </td>\n  } @if (!row.isInEditing && showActionColumnRight) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-custom\n      [grid]=\"grid\"\n      (custom)=\"custom.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source\"\n    ></ng2-st-tbody-custom>\n    <ng2-st-tbody-edit-delete\n      [grid]=\"grid\"\n      [deleteConfirm]=\"deleteConfirm\"\n      [editConfirm]=\"editConfirm\"\n      [row]=\"row\"\n      [source]=\"source\"\n      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      (editRowSelect)=\"editRowSelect.emit($event)\"\n    >\n    </ng2-st-tbody-edit-delete>\n  </td>\n  }\n</tr>\n} } @else {\n<tr>\n  <td [attr.colspan]=\"tableColumnsCount\">\n    {{ noDataMessage }}\n  </td>\n</tr>\n}\n", styles: [":host .ng2-smart-row.selected{background:#0000000d}:host .ng2-smart-row .ng2-smart-actions.ng2-smart-action-multiple-select{text-align:center}:host ::ng-deep ng2-st-tbody-edit-delete a:first-child,:host ::ng-deep ng2-st-tbody-create-cancel a:first-child{margin-right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CellComponent, selector: "ng2-smart-table-cell", inputs: ["grid", "row", "editConfirm", "createConfirm", "isNew", "cell", "inputClass", "mode", "isInEditing"], outputs: ["edited"] }, { kind: "component", type: TbodyCreateCancelComponent, selector: "ng2-st-tbody-create-cancel", inputs: ["grid", "row", "editConfirm", "editCancel"] }, { kind: "component", type: TbodyEditDeleteComponent, selector: "ng2-st-tbody-edit-delete", inputs: ["grid", "row", "source", "deleteConfirm", "editConfirm"], outputs: ["edit", "delete", "editRowSelect"] }, { kind: "component", type: TbodyCustomComponent, selector: "ng2-st-tbody-custom", inputs: ["grid", "row", "source"], outputs: ["custom"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Ng2SmartTableTbodyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[ng2-st-tbody]', template: "@if (grid.getRows().length) { @for (row of grid.getRows(); track\ntrackByIdOrIndex($index, row)) {\n<tr\n  (click)=\"userClickedRow.emit(row)\"\n  class=\"ng2-smart-row\"\n  [className]=\"rowClassFunction(row)\"\n  [ngClass]=\"{ selected: row.isSelected }\"\n>\n  @if (isMultiSelectVisible) {\n  <td\n    class=\"ng2-smart-actions ng2-smart-action-multiple-select\"\n    (click)=\"$event.stopPropagation(); multipleSelectRow.emit(row)\"\n  >\n    <input\n      type=\"checkbox\"\n      [id]=\"'row-' + row.index + '_select-checkbox'\"\n      class=\"form-control\"\n      [ngModel]=\"row.isSelected\"\n    />\n  </td>\n  } @if (!row.isInEditing && showActionColumnLeft) {\n  <td class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n    <ng2-st-tbody-custom\n      [grid]=\"grid\"\n      (custom)=\"custom.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source\"\n    ></ng2-st-tbody-custom>\n    <ng2-st-tbody-edit-delete\n      [grid]=\"grid\"\n      [deleteConfirm]=\"deleteConfirm\"\n      [editConfirm]=\"editConfirm\"\n      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      (editRowSelect)=\"editRowSelect.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source\"\n    >\n    </ng2-st-tbody-edit-delete>\n  </td>\n  } @if (row.isInEditing && showActionColumnLeft) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [editConfirm]=\"editConfirm\"\n      [editCancel]=\"editCancel\"\n    ></ng2-st-tbody-create-cancel>\n  </td>\n  } @for (cell of getVisibleCells(row.cells); track cell) {\n  <td [ngClass]=\"cell.getColumnClass()\">\n    <ng2-smart-table-cell\n      [cell]=\"cell\"\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [isNew]=\"false\"\n      [mode]=\"mode\"\n      [editConfirm]=\"editConfirm\"\n      [inputClass]=\"editInputClass\"\n      [isInEditing]=\"row.isInEditing\"\n    >\n    </ng2-smart-table-cell>\n  </td>\n  } @if (row.isInEditing && showActionColumnRight) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [editConfirm]=\"editConfirm\"\n    ></ng2-st-tbody-create-cancel>\n  </td>\n  } @if (!row.isInEditing && showActionColumnRight) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-custom\n      [grid]=\"grid\"\n      (custom)=\"custom.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source\"\n    ></ng2-st-tbody-custom>\n    <ng2-st-tbody-edit-delete\n      [grid]=\"grid\"\n      [deleteConfirm]=\"deleteConfirm\"\n      [editConfirm]=\"editConfirm\"\n      [row]=\"row\"\n      [source]=\"source\"\n      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      (editRowSelect)=\"editRowSelect.emit($event)\"\n    >\n    </ng2-st-tbody-edit-delete>\n  </td>\n  }\n</tr>\n} } @else {\n<tr>\n  <td [attr.colspan]=\"tableColumnsCount\">\n    {{ noDataMessage }}\n  </td>\n</tr>\n}\n", styles: [":host .ng2-smart-row.selected{background:#0000000d}:host .ng2-smart-row .ng2-smart-actions.ng2-smart-action-multiple-select{text-align:center}:host ::ng-deep ng2-st-tbody-edit-delete a:first-child,:host ::ng-deep ng2-st-tbody-create-cancel a:first-child{margin-right:.25rem}\n"] }]
+        }], propDecorators: { grid: [{
+                type: Input
+            }], source: [{
+                type: Input
+            }], deleteConfirm: [{
+                type: Input
+            }], editConfirm: [{
+                type: Input
+            }], rowClassFunction: [{
+                type: Input
+            }], save: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }], edit: [{
+                type: Output
+            }], editCancel: [{
+                type: Output
+            }], delete: [{
+                type: Output
+            }], custom: [{
+                type: Output
+            }], edited: [{
+                type: Output
+            }], userSelectRow: [{
+                type: Output
+            }], userClickedRow: [{
+                type: Output
+            }], editRowSelect: [{
+                type: Output
+            }], multipleSelectRow: [{
+                type: Output
+            }] } });
+
+class FilterDefault {
+    constructor() {
+        this.inputClass = '';
+        this.query = '';
+        this.filter = new EventEmitter();
+    }
+    onFilter(query) {
+        this.source.addFilter({
+            field: this.column.id,
+            search: query,
+            filter: this.column.getFilterFunction(),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterDefault, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FilterDefault, selector: "ng-component", inputs: { column: "column", source: "source", inputClass: "inputClass", query: "query" }, outputs: { filter: "filter" }, ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterDefault, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                }]
+        }], propDecorators: { column: [{
+                type: Input
+            }], source: [{
+                type: Input
+            }], inputClass: [{
+                type: Input
+            }], query: [{
+                type: Input
+            }], filter: [{
+                type: Output
+            }] } });
+
+class CheckboxFilterComponent extends DefaultFilter {
+    constructor() {
+        super();
+        this.filterActive = false;
+        this.inputControl = new UntypedFormControl();
+    }
+    ngOnInit() {
+        this.changesSubscription = this.inputControl.valueChanges
+            .pipe(debounceTime(this.delay))
+            .subscribe((checked) => {
+            this.filterActive = true;
+            const trueVal = (this.column.getFilterConfig() && this.column.getFilterConfig().true) || true;
+            const falseVal = (this.column.getFilterConfig() && this.column.getFilterConfig().false) || false;
+            this.query = checked ? trueVal : falseVal;
+            this.setFilter();
+        });
+    }
+    resetFilter(event) {
+        event.preventDefault();
+        this.query = '';
+        this.inputControl.setValue(false, { emitEvent: false });
+        this.filterActive = false;
+        this.setFilter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CheckboxFilterComponent, selector: "checkbox-filter", usesInheritance: true, ngImport: i0, template: `
+    <input type="checkbox" [formControl]="inputControl" [ngClass]="inputClass" class="form-control">
+    @if (filterActive) {
+      <a href="#"
+      (click)="resetFilter($event)">{{column.getFilterConfig()?.resetText || 'reset'}}</a>
+    }
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxFilterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'checkbox-filter',
+                    template: `
+    <input type="checkbox" [formControl]="inputControl" [ngClass]="inputClass" class="form-control">
+    @if (filterActive) {
+      <a href="#"
+      (click)="resetFilter($event)">{{column.getFilterConfig()?.resetText || 'reset'}}</a>
+    }
+    `,
+                }]
+        }], ctorParameters: () => [] });
+
+class InputFilterComponent extends DefaultFilter {
     constructor() {
-        this.custom = new EventEmitter();
+        super();
+        this.inputControl = new UntypedFormControl();
     }
-    onCustom(action) {
-        this.custom.emit({
-            action: action.name,
-            data: this.row.getData(),
-            source: this.source,
+    ngOnInit() {
+        if (this.query) {
+            this.inputControl.setValue(this.query);
+        }
+        this.inputControl.valueChanges
+            .pipe(distinctUntilChanged(), debounceTime(this.delay))
+            .subscribe((value) => {
+            this.query = this.inputControl.value;
+            this.setFilter();
         });
     }
-    customActions() {
-        return this.grid.getSetting("actions.custom");
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TbodyCustomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TbodyCustomComponent, selector: "ng2-st-tbody-custom", inputs: { grid: "grid", row: "row", source: "source" }, outputs: { custom: "custom" }, ngImport: i0, template: `
-    @for (action of customActions(); track action) {
-      <a
-        [id]="'row-' + row.index + '_action-' + action.name + '-button'"
-        href="#"
-        class="ng2-smart-action ng2-smart-action-custom-custom"
-        [innerHTML]="action.title"
-        (click)="$event.stopPropagation(); $event.preventDefault(); onCustom(action)"
-      ></a>
+    ngOnChanges(changes) {
+        if (changes?.['query']) {
+            this.inputControl.setValue(this.query);
+        }
     }
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputFilterComponent, selector: "input-filter", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    <input
+      [ngClass]="inputClass"
+      [formControl]="inputControl"
+      class="form-control"
+      type="text"
+      placeholder="{{ column.title }}"/>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TbodyCustomComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputFilterComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "ng2-st-tbody-custom",
-                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'input-filter',
                     template: `
-    @for (action of customActions(); track action) {
-      <a
-        [id]="'row-' + row.index + '_action-' + action.name + '-button'"
-        href="#"
-        class="ng2-smart-action ng2-smart-action-custom-custom"
-        [innerHTML]="action.title"
-        (click)="$event.stopPropagation(); $event.preventDefault(); onCustom(action)"
-      ></a>
-    }
-    `,
+    <input
+      [ngClass]="inputClass"
+      [formControl]="inputControl"
+      class="form-control"
+      type="text"
+      placeholder="{{ column.title }}"/>
+  `,
                 }]
-        }], propDecorators: { grid: [{
-                type: Input
-            }], row: [{
-                type: Input
-            }], source: [{
-                type: Input
-            }], custom: [{
-                type: Output
-            }] } });
+        }], ctorParameters: () => [] });
 
-class Ng2SmartTableTbodyComponent {
+class SelectFilterComponent extends DefaultFilter {
     constructor() {
-        this.rowClassFunction = () => '';
-        this.save = new EventEmitter();
-        this.cancel = new EventEmitter();
-        this.edit = new EventEmitter();
-        this.editCancel = new EventEmitter();
-        this.delete = new EventEmitter();
-        this.custom = new EventEmitter();
-        this.edited = new EventEmitter();
-        this.userSelectRow = new EventEmitter();
-        this.userClickedRow = new EventEmitter();
-        this.editRowSelect = new EventEmitter();
-        this.multipleSelectRow = new EventEmitter();
-        this.isMultiSelectVisible = false;
-        this.showActionColumnLeft = false;
-        this.showActionColumnRight = false;
-        this.mode = 'inline';
-        this.editInputClass = '';
-        this.isActionAdd = false;
-        this.isActionEdit = false;
-        this.isActionDelete = false;
-        this.noDataMessage = false;
+        super();
     }
-    get tableColumnsCount() {
-        const actionColumns = this.isActionAdd || this.isActionEdit || this.isActionDelete ? 1 : 0;
-        return this.grid.getColumns().length + actionColumns;
+    ngOnInit() {
+        if (this.inputControl.valueChanges) {
+            this.inputControl.valueChanges
+                .pipe(skip(1), distinctUntilChanged(), debounceTime(this.delay))
+                .subscribe((value) => this.setFilter());
+        }
     }
-    ngOnChanges() {
-        this.isMultiSelectVisible = this.grid.isMultiSelectVisible();
-        this.showActionColumnLeft = this.grid.showActionColumn('left');
-        this.mode = this.grid.getSetting('mode', 'inline');
-        this.editInputClass = this.grid.getSetting('edit.inputClass', '');
-        this.showActionColumnRight = this.grid.showActionColumn('right');
-        this.isActionAdd = this.grid.getSetting('actions.add', false);
-        this.isActionEdit = this.grid.getSetting('actions.edit', false);
-        this.isActionDelete = this.grid.getSetting('actions.delete', false);
-        this.noDataMessage = this.grid.getSetting('noDataMessage');
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SelectFilterComponent, selector: "select-filter", viewQueries: [{ propertyName: "inputControl", first: true, predicate: ["inputControl"], descendants: true, read: NgControl, static: true }], usesInheritance: true, ngImport: i0, template: `
+    <select [ngClass]="inputClass"
+      class="form-control"
+      #inputControl
+      [(ngModel)]="query">
+    
+      <option value="">{{ column.getFilterConfig().selectText }}</option>
+      @for (option of column.getFilterConfig().list; track option) {
+        <option [value]="option.value">
+          {{ option.title }}
+        </option>
+      }
+    </select>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectFilterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'select-filter',
+                    template: `
+    <select [ngClass]="inputClass"
+      class="form-control"
+      #inputControl
+      [(ngModel)]="query">
+    
+      <option value="">{{ column.getFilterConfig().selectText }}</option>
+      @for (option of column.getFilterConfig().list; track option) {
+        <option [value]="option.value">
+          {{ option.title }}
+        </option>
+      }
+    </select>
+    `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { inputControl: [{
+                type: ViewChild,
+                args: ['inputControl', { read: NgControl, static: true }]
+            }] } });
+
+class DefaultFilterComponent extends FilterDefault {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DefaultFilterComponent, selector: "default-table-filter", usesInheritance: true, ngImport: i0, template: `
+@switch (column.getFilterType()) {
+  @case ('list') {
+    <select-filter
+      [query]="query"
+      [ngClass]="inputClass"
+      [column]="column"
+      (filter)="onFilter($event)">
+    </select-filter>
+  }
+  @case ('checkbox') {
+    <checkbox-filter
+      [query]="query"
+      [ngClass]="inputClass"
+      [column]="column"
+      (filter)="onFilter($event)">
+    </checkbox-filter>
+  }
+  @default {
+    <input-filter
+      [query]="query"
+      [ngClass]="inputClass"
+      [column]="column"
+      (filter)="onFilter($event)">
+  </input-filter>
+}
+}
+`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CheckboxFilterComponent, selector: "checkbox-filter" }, { kind: "component", type: InputFilterComponent, selector: "input-filter" }, { kind: "component", type: SelectFilterComponent, selector: "select-filter" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultFilterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'default-table-filter',
+                    template: `
+@switch (column.getFilterType()) {
+  @case ('list') {
+    <select-filter
+      [query]="query"
+      [ngClass]="inputClass"
+      [column]="column"
+      (filter)="onFilter($event)">
+    </select-filter>
+  }
+  @case ('checkbox') {
+    <checkbox-filter
+      [query]="query"
+      [ngClass]="inputClass"
+      [column]="column"
+      (filter)="onFilter($event)">
+    </checkbox-filter>
+  }
+  @default {
+    <input-filter
+      [query]="query"
+      [ngClass]="inputClass"
+      [column]="column"
+      (filter)="onFilter($event)">
+  </input-filter>
+}
+}
+`,
+                }]
+        }] });
+
+class CustomFilterComponent extends FilterDefault {
+    constructor(resolver) {
+        super();
+        this.resolver = resolver;
     }
-    getVisibleCells(cells) {
-        return (cells || []).filter((cell) => !cell.getColumn().hide);
+    ngOnChanges(changes) {
+        if (this.customComponent) {
+            this.customComponent.instance.ngOnChanges(changes);
+            return;
+        }
+        if (this.column.filter && this.column.filter.type === 'custom') {
+            const componentFactory = this.resolver.resolveComponentFactory(this.column.filter?.component);
+            this.customComponent = this.dynamicTarget.createComponent(componentFactory);
+        }
+        // set @Inputs and @Outputs of custom component
+        this.customComponent.instance.query = this.query;
+        this.customComponent.instance.column = this.column;
+        this.customComponent.instance.source = this.source;
+        this.customComponent.instance.inputClass = this.inputClass;
+        this.customComponent.instance.filter.subscribe((event) => this.onFilter(event));
     }
-    trackByIdOrIndex(index, item) {
-        return item?.id || index;
+    ngOnDestroy() {
+        if (this.customComponent) {
+            this.customComponent.destroy();
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Ng2SmartTableTbodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: Ng2SmartTableTbodyComponent, selector: "[ng2-st-tbody]", inputs: { grid: "grid", source: "source", deleteConfirm: "deleteConfirm", editConfirm: "editConfirm", rowClassFunction: "rowClassFunction" }, outputs: { save: "save", cancel: "cancel", edit: "edit", editCancel: "editCancel", delete: "delete", custom: "custom", edited: "edited", userSelectRow: "userSelectRow", userClickedRow: "userClickedRow", editRowSelect: "editRowSelect", multipleSelectRow: "multipleSelectRow" }, usesOnChanges: true, ngImport: i0, template: "@if (grid.getRows().length) { @for (row of grid.getRows(); track\ntrackByIdOrIndex($index, row)) {\n<tr\n  (click)=\"userClickedRow.emit(row)\"\n  class=\"ng2-smart-row\"\n  [className]=\"rowClassFunction(row)\"\n  [ngClass]=\"{ selected: row.isSelected }\"\n>\n  @if (isMultiSelectVisible) {\n  <td\n    class=\"ng2-smart-actions ng2-smart-action-multiple-select\"\n    (click)=\"$event.stopPropagation(); multipleSelectRow.emit(row)\"\n  >\n    <input\n      type=\"checkbox\"\n      [id]=\"'row-' + row.index + '_select-checkbox'\"\n      class=\"form-control\"\n      [ngModel]=\"row.isSelected\"\n    />\n  </td>\n  } @if (!row.isInEditing && showActionColumnLeft) {\n  <td class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n    <ng2-st-tbody-custom\n      [grid]=\"grid\"\n      (custom)=\"custom.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source\"\n    ></ng2-st-tbody-custom>\n    <ng2-st-tbody-edit-delete\n      [grid]=\"grid\"\n      [deleteConfirm]=\"deleteConfirm\"\n      [editConfirm]=\"editConfirm\"\n      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      (editRowSelect)=\"editRowSelect.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source\"\n    >\n    </ng2-st-tbody-edit-delete>\n  </td>\n  } @if (row.isInEditing && showActionColumnLeft) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [editConfirm]=\"editConfirm\"\n      [editCancel]=\"editCancel\"\n    ></ng2-st-tbody-create-cancel>\n  </td>\n  } @for (cell of getVisibleCells(row.cells); track cell) {\n  <td [ngClass]=\"cell.getColumnClass()\">\n    <ng2-smart-table-cell\n      [cell]=\"cell\"\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [isNew]=\"false\"\n      [mode]=\"mode\"\n      [editConfirm]=\"editConfirm\"\n      [inputClass]=\"editInputClass\"\n      [isInEditing]=\"row.isInEditing\"\n    >\n    </ng2-smart-table-cell>\n  </td>\n  } @if (row.isInEditing && showActionColumnRight) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [editConfirm]=\"editConfirm\"\n    ></ng2-st-tbody-create-cancel>\n  </td>\n  } @if (!row.isInEditing && showActionColumnRight) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-custom\n      [grid]=\"grid\"\n      (custom)=\"custom.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source\"\n    ></ng2-st-tbody-custom>\n    <ng2-st-tbody-edit-delete\n      [grid]=\"grid\"\n      [deleteConfirm]=\"deleteConfirm\"\n      [editConfirm]=\"editConfirm\"\n      [row]=\"row\"\n      [source]=\"source\"\n      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      (editRowSelect)=\"editRowSelect.emit($event)\"\n    >\n    </ng2-st-tbody-edit-delete>\n  </td>\n  }\n</tr>\n} } @else {\n<tr>\n  <td [attr.colspan]=\"tableColumnsCount\">\n    {{ noDataMessage }}\n  </td>\n</tr>\n}\n", styles: [":host .ng2-smart-row.selected{background:#0000000d}:host .ng2-smart-row .ng2-smart-actions.ng2-smart-action-multiple-select{text-align:center}:host ::ng-deep ng2-st-tbody-edit-delete a:first-child,:host ::ng-deep ng2-st-tbody-create-cancel a:first-child{margin-right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CellComponent, selector: "ng2-smart-table-cell", inputs: ["grid", "row", "editConfirm", "createConfirm", "isNew", "cell", "inputClass", "mode", "isInEditing"], outputs: ["edited"] }, { kind: "component", type: TbodyCreateCancelComponent, selector: "ng2-st-tbody-create-cancel", inputs: ["grid", "row", "editConfirm", "editCancel"] }, { kind: "component", type: TbodyEditDeleteComponent, selector: "ng2-st-tbody-edit-delete", inputs: ["grid", "row", "source", "deleteConfirm", "editConfirm"], outputs: ["edit", "delete", "editRowSelect"] }, { kind: "component", type: TbodyCustomComponent, selector: "ng2-st-tbody-custom", inputs: ["grid", "row", "source"], outputs: ["custom"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomFilterComponent, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CustomFilterComponent, selector: "custom-table-filter", viewQueries: [{ propertyName: "dynamicTarget", first: true, predicate: ["dynamicTarget"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `<ng-template #dynamicTarget></ng-template>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Ng2SmartTableTbodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[ng2-st-tbody]', template: "@if (grid.getRows().length) { @for (row of grid.getRows(); track\ntrackByIdOrIndex($index, row)) {\n<tr\n  (click)=\"userClickedRow.emit(row)\"\n  class=\"ng2-smart-row\"\n  [className]=\"rowClassFunction(row)\"\n  [ngClass]=\"{ selected: row.isSelected }\"\n>\n  @if (isMultiSelectVisible) {\n  <td\n    class=\"ng2-smart-actions ng2-smart-action-multiple-select\"\n    (click)=\"$event.stopPropagation(); multipleSelectRow.emit(row)\"\n  >\n    <input\n      type=\"checkbox\"\n      [id]=\"'row-' + row.index + '_select-checkbox'\"\n      class=\"form-control\"\n      [ngModel]=\"row.isSelected\"\n    />\n  </td>\n  } @if (!row.isInEditing && showActionColumnLeft) {\n  <td class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n    <ng2-st-tbody-custom\n      [grid]=\"grid\"\n      (custom)=\"custom.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source\"\n    ></ng2-st-tbody-custom>\n    <ng2-st-tbody-edit-delete\n      [grid]=\"grid\"\n      [deleteConfirm]=\"deleteConfirm\"\n      [editConfirm]=\"editConfirm\"\n      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      (editRowSelect)=\"editRowSelect.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source\"\n    >\n    </ng2-st-tbody-edit-delete>\n  </td>\n  } @if (row.isInEditing && showActionColumnLeft) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [editConfirm]=\"editConfirm\"\n      [editCancel]=\"editCancel\"\n    ></ng2-st-tbody-create-cancel>\n  </td>\n  } @for (cell of getVisibleCells(row.cells); track cell) {\n  <td [ngClass]=\"cell.getColumnClass()\">\n    <ng2-smart-table-cell\n      [cell]=\"cell\"\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [isNew]=\"false\"\n      [mode]=\"mode\"\n      [editConfirm]=\"editConfirm\"\n      [inputClass]=\"editInputClass\"\n      [isInEditing]=\"row.isInEditing\"\n    >\n    </ng2-smart-table-cell>\n  </td>\n  } @if (row.isInEditing && showActionColumnRight) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [editConfirm]=\"editConfirm\"\n    ></ng2-st-tbody-create-cancel>\n  </td>\n  } @if (!row.isInEditing && showActionColumnRight) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-custom\n      [grid]=\"grid\"\n      (custom)=\"custom.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source\"\n    ></ng2-st-tbody-custom>\n    <ng2-st-tbody-edit-delete\n      [grid]=\"grid\"\n      [deleteConfirm]=\"deleteConfirm\"\n      [editConfirm]=\"editConfirm\"\n      [row]=\"row\"\n      [source]=\"source\"\n      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      (editRowSelect)=\"editRowSelect.emit($event)\"\n    >\n    </ng2-st-tbody-edit-delete>\n  </td>\n  }\n</tr>\n} } @else {\n<tr>\n  <td [attr.colspan]=\"tableColumnsCount\">\n    {{ noDataMessage }}\n  </td>\n</tr>\n}\n", styles: [":host .ng2-smart-row.selected{background:#0000000d}:host .ng2-smart-row .ng2-smart-actions.ng2-smart-action-multiple-select{text-align:center}:host ::ng-deep ng2-st-tbody-edit-delete a:first-child,:host ::ng-deep ng2-st-tbody-create-cancel a:first-child{margin-right:.25rem}\n"] }]
-        }], propDecorators: { grid: [{
-                type: Input
-            }], source: [{
-                type: Input
-            }], deleteConfirm: [{
-                type: Input
-            }], editConfirm: [{
-                type: Input
-            }], rowClassFunction: [{
-                type: Input
-            }], save: [{
-                type: Output
-            }], cancel: [{
-                type: Output
-            }], edit: [{
-                type: Output
-            }], editCancel: [{
-                type: Output
-            }], delete: [{
-                type: Output
-            }], custom: [{
-                type: Output
-            }], edited: [{
-                type: Output
-            }], userSelectRow: [{
-                type: Output
-            }], userClickedRow: [{
-                type: Output
-            }], editRowSelect: [{
-                type: Output
-            }], multipleSelectRow: [{
-                type: Output
+            args: [{
+                    selector: 'custom-table-filter',
+                    template: `<ng-template #dynamicTarget></ng-template>`,
+                }]
+        }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }], propDecorators: { dynamicTarget: [{
+                type: ViewChild,
+                args: ['dynamicTarget', { read: ViewContainerRef, static: true }]
             }] } });
 
-const TBODY_COMPONENTS = [
-    TbodyCreateCancelComponent,
-    TbodyEditDeleteComponent,
-    TbodyCustomComponent,
-    Ng2SmartTableTbodyComponent
-];
-class TBodyModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TBodyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: TBodyModule, declarations: [TbodyCreateCancelComponent,
-            TbodyEditDeleteComponent,
-            TbodyCustomComponent,
-            Ng2SmartTableTbodyComponent], imports: [CommonModule,
-            FormsModule,
-            CellModule], exports: [TbodyCreateCancelComponent,
-            TbodyEditDeleteComponent,
-            TbodyCustomComponent,
-            Ng2SmartTableTbodyComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TBodyModule, imports: [CommonModule,
-            FormsModule,
-            CellModule] }); }
+class FilterComponent extends FilterDefault {
+    ngOnChanges(changes) {
+        if (changes['source']) {
+            if (!changes['source'].firstChange && this.dataChangedSub) {
+                this.dataChangedSub.unsubscribe();
+            }
+            this.dataChangedSub = this.source.onChanged().subscribe((dataChanges) => {
+                const filterConf = this.source.getFilter();
+                if (filterConf && filterConf.filters && filterConf.filters.length === 0) {
+                    this.query = '';
+                    // add a check for existing filters an set the query if one exists for this column
+                    // this covers instances where the filter is set by user code while maintaining existing functionality
+                }
+                else if (filterConf && filterConf.filters && filterConf.filters.length > 0) {
+                    filterConf.filters.forEach((k, v) => {
+                        if (k.field == this.column.id) {
+                            this.query = k.search;
+                        }
+                    });
+                }
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FilterComponent, selector: "ng2-smart-table-filter", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+      @if (column.isFilterable) {
+        <div class="ng2-smart-filter">
+          @switch (column.getFilterType()) {
+            @case ('custom') {
+              <custom-table-filter
+                [query]="query"
+                [column]="column"
+                [source]="source"
+                [inputClass]="inputClass"
+                (filter)="onFilter($event)">
+              </custom-table-filter>
+            }
+            @default {
+              <default-table-filter
+                [query]="query"
+                [column]="column"
+                [source]="source"
+                [inputClass]="inputClass"
+                (filter)="onFilter($event)">
+              </default-table-filter>
+            }
+          }
+        </div>
+      }
+      `, isInline: true, styles: [":host .ng2-smart-filter ::ng-deep input,:host .ng2-smart-filter ::ng-deep select{width:100%;line-height:normal;padding:.375em .75em;font-weight:400}:host .ng2-smart-filter ::ng-deep input[type=search]{box-sizing:inherit}:host .ng2-smart-filter ::ng-deep .completer-dropdown-holder{font-weight:400}:host .ng2-smart-filter ::ng-deep a{font-weight:400}\n"], dependencies: [{ kind: "component", type: DefaultFilterComponent, selector: "default-table-filter" }, { kind: "component", type: CustomFilterComponent, selector: "custom-table-filter" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TBodyModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        CellModule,
-                    ],
-                    declarations: [
-                        ...TBODY_COMPONENTS,
-                    ],
-                    exports: [
-                        ...TBODY_COMPONENTS,
-                    ],
-                }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng2-smart-table-filter', template: `
+      @if (column.isFilterable) {
+        <div class="ng2-smart-filter">
+          @switch (column.getFilterType()) {
+            @case ('custom') {
+              <custom-table-filter
+                [query]="query"
+                [column]="column"
+                [source]="source"
+                [inputClass]="inputClass"
+                (filter)="onFilter($event)">
+              </custom-table-filter>
+            }
+            @default {
+              <default-table-filter
+                [query]="query"
+                [column]="column"
+                [source]="source"
+                [inputClass]="inputClass"
+                (filter)="onFilter($event)">
+              </default-table-filter>
+            }
+          }
+        </div>
+      }
+      `, styles: [":host .ng2-smart-filter ::ng-deep input,:host .ng2-smart-filter ::ng-deep select{width:100%;line-height:normal;padding:.375em .75em;font-weight:400}:host .ng2-smart-filter ::ng-deep input[type=search]{box-sizing:inherit}:host .ng2-smart-filter ::ng-deep .completer-dropdown-holder{font-weight:400}:host .ng2-smart-filter ::ng-deep a{font-weight:400}\n"] }]
         }] });
 
 class AddButtonComponent {
@@ -3321,92 +3151,33 @@ class Ng2SmartTableTheadComponent {
         this.create = new EventEmitter();
         this.filter = new EventEmitter();
         this.isHideHeader = false;
-        this.isHideSubHeader = false;
-    }
-    ngOnChanges() {
-        this.isHideHeader = this.grid.getSetting('hideHeader', false);
-        this.isHideSubHeader = this.grid.getSetting('hideSubHeader', false);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Ng2SmartTableTheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: Ng2SmartTableTheadComponent, selector: "[ng2-st-thead]", inputs: { grid: "grid", source: "source", createConfirm: "createConfirm" }, outputs: { sort: "sort", selectAllRows: "selectAllRows", create: "create", filter: "filter" }, usesOnChanges: true, ngImport: i0, template: "@if (!isHideHeader) {\n  <tr ng2-st-thead-titles-row\n    class=\"ng2-smart-titles\"\n    [grid]=\"grid\"\n    [source]=\"source\"\n    (sort)=\"sort.emit($event)\"\n    (selectAllRows)=\"selectAllRows.emit($event)\">\n  </tr>\n}\n\n@if (!isHideSubHeader) {\n  <tr ng2-st-thead-filters-row\n    class=\"ng2-smart-filters\"\n    [grid]=\"grid\"\n    [source]=\"source\"\n    (create)=\"create.emit($event)\"\n    (filter)=\"filter.emit($event)\">\n  </tr>\n}\n\n@if (grid.createFormShown) {\n  <tr ng2-st-thead-form-row\n    [grid]=\"grid\"\n    [createConfirm]=\"createConfirm\">\n  </tr>\n}\n", dependencies: [{ kind: "component", type: TheadFitlersRowComponent, selector: "[ng2-st-thead-filters-row]", inputs: ["grid", "source"], outputs: ["create", "filter"] }, { kind: "component", type: TheadFormRowComponent, selector: "[ng2-st-thead-form-row]", inputs: ["grid", "row", "createConfirm"], outputs: ["create"] }, { kind: "component", type: TheadTitlesRowComponent, selector: "[ng2-st-thead-titles-row]", inputs: ["grid", "source"], outputs: ["sort", "selectAllRows"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Ng2SmartTableTheadComponent, decorators: [{
-            type: Component,
-            args: [{ selector: '[ng2-st-thead]', template: "@if (!isHideHeader) {\n  <tr ng2-st-thead-titles-row\n    class=\"ng2-smart-titles\"\n    [grid]=\"grid\"\n    [source]=\"source\"\n    (sort)=\"sort.emit($event)\"\n    (selectAllRows)=\"selectAllRows.emit($event)\">\n  </tr>\n}\n\n@if (!isHideSubHeader) {\n  <tr ng2-st-thead-filters-row\n    class=\"ng2-smart-filters\"\n    [grid]=\"grid\"\n    [source]=\"source\"\n    (create)=\"create.emit($event)\"\n    (filter)=\"filter.emit($event)\">\n  </tr>\n}\n\n@if (grid.createFormShown) {\n  <tr ng2-st-thead-form-row\n    [grid]=\"grid\"\n    [createConfirm]=\"createConfirm\">\n  </tr>\n}\n" }]
-        }], propDecorators: { grid: [{
-                type: Input
-            }], source: [{
-                type: Input
-            }], createConfirm: [{
-                type: Input
-            }], sort: [{
-                type: Output
-            }], selectAllRows: [{
-                type: Output
-            }], create: [{
-                type: Output
-            }], filter: [{
-                type: Output
-            }] } });
-
-const THEAD_COMPONENTS = [
-    ActionsComponent,
-    ActionsTitleComponent,
-    AddButtonComponent,
-    CheckboxSelectAllComponent,
-    ColumnTitleComponent,
-    TitleComponent,
-    TheadFitlersRowComponent,
-    TheadFormRowComponent,
-    TheadTitlesRowComponent,
-    Ng2SmartTableTheadComponent,
-];
-class THeadModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: THeadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: THeadModule, declarations: [ActionsComponent,
-            ActionsTitleComponent,
-            AddButtonComponent,
-            CheckboxSelectAllComponent,
-            ColumnTitleComponent,
-            TitleComponent,
-            TheadFitlersRowComponent,
-            TheadFormRowComponent,
-            TheadTitlesRowComponent,
-            Ng2SmartTableTheadComponent], imports: [CommonModule,
-            FormsModule,
-            FilterModule,
-            CellModule], exports: [ActionsComponent,
-            ActionsTitleComponent,
-            AddButtonComponent,
-            CheckboxSelectAllComponent,
-            ColumnTitleComponent,
-            TitleComponent,
-            TheadFitlersRowComponent,
-            TheadFormRowComponent,
-            TheadTitlesRowComponent,
-            Ng2SmartTableTheadComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: THeadModule, imports: [CommonModule,
-            FormsModule,
-            FilterModule,
-            CellModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: THeadModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        FilterModule,
-                        CellModule,
-                    ],
-                    declarations: [
-                        ...THEAD_COMPONENTS,
-                    ],
-                    exports: [
-                        ...THEAD_COMPONENTS,
-                    ],
-                }]
-        }] });
+        this.isHideSubHeader = false;
+    }
+    ngOnChanges() {
+        this.isHideHeader = this.grid.getSetting('hideHeader', false);
+        this.isHideSubHeader = this.grid.getSetting('hideSubHeader', false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Ng2SmartTableTheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: Ng2SmartTableTheadComponent, selector: "[ng2-st-thead]", inputs: { grid: "grid", source: "source", createConfirm: "createConfirm" }, outputs: { sort: "sort", selectAllRows: "selectAllRows", create: "create", filter: "filter" }, usesOnChanges: true, ngImport: i0, template: "@if (!isHideHeader) {\n  <tr ng2-st-thead-titles-row\n    class=\"ng2-smart-titles\"\n    [grid]=\"grid\"\n    [source]=\"source\"\n    (sort)=\"sort.emit($event)\"\n    (selectAllRows)=\"selectAllRows.emit($event)\">\n  </tr>\n}\n\n@if (!isHideSubHeader) {\n  <tr ng2-st-thead-filters-row\n    class=\"ng2-smart-filters\"\n    [grid]=\"grid\"\n    [source]=\"source\"\n    (create)=\"create.emit($event)\"\n    (filter)=\"filter.emit($event)\">\n  </tr>\n}\n\n@if (grid.createFormShown) {\n  <tr ng2-st-thead-form-row\n    [grid]=\"grid\"\n    [createConfirm]=\"createConfirm\">\n  </tr>\n}\n", dependencies: [{ kind: "component", type: TheadFitlersRowComponent, selector: "[ng2-st-thead-filters-row]", inputs: ["grid", "source"], outputs: ["create", "filter"] }, { kind: "component", type: TheadFormRowComponent, selector: "[ng2-st-thead-form-row]", inputs: ["grid", "row", "createConfirm"], outputs: ["create"] }, { kind: "component", type: TheadTitlesRowComponent, selector: "[ng2-st-thead-titles-row]", inputs: ["grid", "source"], outputs: ["sort", "selectAllRows"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Ng2SmartTableTheadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[ng2-st-thead]', template: "@if (!isHideHeader) {\n  <tr ng2-st-thead-titles-row\n    class=\"ng2-smart-titles\"\n    [grid]=\"grid\"\n    [source]=\"source\"\n    (sort)=\"sort.emit($event)\"\n    (selectAllRows)=\"selectAllRows.emit($event)\">\n  </tr>\n}\n\n@if (!isHideSubHeader) {\n  <tr ng2-st-thead-filters-row\n    class=\"ng2-smart-filters\"\n    [grid]=\"grid\"\n    [source]=\"source\"\n    (create)=\"create.emit($event)\"\n    (filter)=\"filter.emit($event)\">\n  </tr>\n}\n\n@if (grid.createFormShown) {\n  <tr ng2-st-thead-form-row\n    [grid]=\"grid\"\n    [createConfirm]=\"createConfirm\">\n  </tr>\n}\n" }]
+        }], propDecorators: { grid: [{
+                type: Input
+            }], source: [{
+                type: Input
+            }], createConfirm: [{
+                type: Input
+            }], sort: [{
+                type: Output
+            }], selectAllRows: [{
+                type: Output
+            }], create: [{
+                type: Output
+            }], filter: [{
+                type: Output
+            }] } });
 
 class Ng2SmartTableComponent {
     constructor() {
@@ -3568,6 +3339,235 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
+const CELL_COMPONENTS = [
+    CellComponent,
+    EditCellDefault,
+    DefaultEditor,
+    CustomEditComponent,
+    DefaultEditComponent,
+    EditCellComponent,
+    CheckboxEditorComponent,
+    InputEditorComponent,
+    SelectEditorComponent,
+    TextareaEditorComponent,
+    CustomViewComponent,
+    ViewCellComponent,
+];
+class CellModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CellModule, declarations: [CellComponent,
+            EditCellDefault,
+            DefaultEditor,
+            CustomEditComponent,
+            DefaultEditComponent,
+            EditCellComponent,
+            CheckboxEditorComponent,
+            InputEditorComponent,
+            SelectEditorComponent,
+            TextareaEditorComponent,
+            CustomViewComponent,
+            ViewCellComponent], imports: [CommonModule,
+            FormsModule], exports: [CellComponent,
+            EditCellDefault,
+            DefaultEditor,
+            CustomEditComponent,
+            DefaultEditComponent,
+            EditCellComponent,
+            CheckboxEditorComponent,
+            InputEditorComponent,
+            SelectEditorComponent,
+            TextareaEditorComponent,
+            CustomViewComponent,
+            ViewCellComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellModule, imports: [CommonModule,
+            FormsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                    ],
+                    declarations: [
+                        ...CELL_COMPONENTS,
+                    ],
+                    exports: [
+                        ...CELL_COMPONENTS,
+                    ],
+                }]
+        }] });
+
+const FILTER_COMPONENTS = [
+    FilterDefault,
+    DefaultFilter,
+    FilterComponent,
+    DefaultFilterComponent,
+    CustomFilterComponent,
+    CheckboxFilterComponent,
+    InputFilterComponent,
+    SelectFilterComponent,
+];
+class FilterModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: FilterModule, declarations: [FilterDefault,
+            DefaultFilter,
+            FilterComponent,
+            DefaultFilterComponent,
+            CustomFilterComponent,
+            CheckboxFilterComponent,
+            InputFilterComponent,
+            SelectFilterComponent], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule], exports: [FilterDefault,
+            DefaultFilter,
+            FilterComponent,
+            DefaultFilterComponent,
+            CustomFilterComponent,
+            CheckboxFilterComponent,
+            InputFilterComponent,
+            SelectFilterComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                    ],
+                    declarations: [
+                        ...FILTER_COMPONENTS,
+                    ],
+                    exports: [
+                        ...FILTER_COMPONENTS,
+                    ],
+                }]
+        }] });
+
+class PagerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: PagerModule, declarations: [PagerComponent], imports: [CommonModule,
+            FormsModule], exports: [PagerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PagerModule, imports: [CommonModule,
+            FormsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PagerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                    ],
+                    declarations: [
+                        PagerComponent,
+                    ],
+                    exports: [
+                        PagerComponent,
+                    ],
+                }]
+        }] });
+
+const TBODY_COMPONENTS = [
+    TbodyCreateCancelComponent,
+    TbodyEditDeleteComponent,
+    TbodyCustomComponent,
+    Ng2SmartTableTbodyComponent
+];
+class TBodyModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TBodyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: TBodyModule, declarations: [TbodyCreateCancelComponent,
+            TbodyEditDeleteComponent,
+            TbodyCustomComponent,
+            Ng2SmartTableTbodyComponent], imports: [CommonModule,
+            FormsModule,
+            CellModule], exports: [TbodyCreateCancelComponent,
+            TbodyEditDeleteComponent,
+            TbodyCustomComponent,
+            Ng2SmartTableTbodyComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TBodyModule, imports: [CommonModule,
+            FormsModule,
+            CellModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TBodyModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        CellModule,
+                    ],
+                    declarations: [
+                        ...TBODY_COMPONENTS,
+                    ],
+                    exports: [
+                        ...TBODY_COMPONENTS,
+                    ],
+                }]
+        }] });
+
+const THEAD_COMPONENTS = [
+    ActionsComponent,
+    ActionsTitleComponent,
+    AddButtonComponent,
+    CheckboxSelectAllComponent,
+    ColumnTitleComponent,
+    TitleComponent,
+    TheadFitlersRowComponent,
+    TheadFormRowComponent,
+    TheadTitlesRowComponent,
+    Ng2SmartTableTheadComponent,
+];
+class THeadModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: THeadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: THeadModule, declarations: [ActionsComponent,
+            ActionsTitleComponent,
+            AddButtonComponent,
+            CheckboxSelectAllComponent,
+            ColumnTitleComponent,
+            TitleComponent,
+            TheadFitlersRowComponent,
+            TheadFormRowComponent,
+            TheadTitlesRowComponent,
+            Ng2SmartTableTheadComponent], imports: [CommonModule,
+            FormsModule,
+            FilterModule,
+            CellModule], exports: [ActionsComponent,
+            ActionsTitleComponent,
+            AddButtonComponent,
+            CheckboxSelectAllComponent,
+            ColumnTitleComponent,
+            TitleComponent,
+            TheadFitlersRowComponent,
+            TheadFormRowComponent,
+            TheadTitlesRowComponent,
+            Ng2SmartTableTheadComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: THeadModule, imports: [CommonModule,
+            FormsModule,
+            FilterModule,
+            CellModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: THeadModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        FilterModule,
+                        CellModule,
+                    ],
+                    declarations: [
+                        ...THEAD_COMPONENTS,
+                    ],
+                    exports: [
+                        ...THEAD_COMPONENTS,
+                    ],
+                }]
+        }] });
+
 class Ng2SmartTableModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Ng2SmartTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: Ng2SmartTableModule, declarations: [Ng2SmartTableComponent], imports: [CommonModule,
@@ -3613,5 +3613,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Cell, DefaultEditor, DefaultFilter, LocalDataSource, Ng2SmartTableComponent, Ng2SmartTableModule };
+export { Cell, Column, DataSource, DefaultEditor, DefaultFilter, LocalDataSource, Ng2SmartTableComponent, Ng2SmartTableModule, Row, SmartTableOnChangedEventName };
 //# sourceMappingURL=den4ik92-ng2-smart-table.mjs.map