@den4ik92/ng2-smart-table 19.0.6 → 19.1.1

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { output, Component, Input, input, signal, effect, computed, inject, ElementRef, Directive, ViewContainerRef, ViewChild, ChangeDetectionStrategy } from '@angular/core';
+import { input, Component, output, Input, signal, effect, computed, inject, ElementRef, Directive, ViewContainerRef, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { Subject } from 'rxjs';
@@ -7,149 +7,27 @@ import { takeUntil, debounceTime, distinctUntilChanged, skip } from 'rxjs/operat
 import { moveItemInArray, CdkDropList, CdkDrag, CdkDragPlaceholder } from '@angular/cdk/drag-drop';
 import * as i1 from '@angular/forms';
 import { FormsModule, UntypedFormControl, ReactiveFormsModule, NgControl } from '@angular/forms';
-import { NgComponentOutlet } from '@angular/common';
-
-function prepareValue(value) { return value; }
-class Cell {
-    static { this.PREPARE = prepareValue; }
-    constructor(value, row, column, dataSet) {
-        this.value = value;
-        this.row = row;
-        this.column = column;
-        this.dataSet = dataSet;
-        this.newValue = '';
-        this.newValue = value;
-    }
-    getColumn() {
-        return this.column;
-    }
-    getColumnClass() {
-        return this.column.class;
-    }
-    getRow() {
-        return this.row;
-    }
-    getValue() {
-        const prepare = this.column.getValuePrepareFunction() || Cell.PREPARE;
-        return prepare.call(null, this.value, this.row.getData(), this);
-    }
-    setValue(value) {
-        this.newValue = value;
-    }
-    getId() {
-        return this.getColumn().id;
-    }
-    getTitle() {
-        return this.getColumn().title;
-    }
-    isEditable() {
-        if (this.getRow().index === -1) {
-            return this.getColumn().isAddable;
-        }
-        else {
-            return this.getColumn().isEditable;
-        }
-    }
-}
+import { NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
 
 class DefaultEditor {
     constructor() {
-        this.inputClass = '';
-        this.onStopEditing = output();
-        this.onEdited = output();
-        this.onClick = output();
+        this.cell = input.required();
+        this.inputClass = input("");
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DefaultEditor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: DefaultEditor, isStandalone: true, selector: "ng-component", inputs: { cell: "cell", inputClass: "inputClass" }, outputs: { onStopEditing: "onStopEditing", onEdited: "onEdited", onClick: "onClick" }, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: DefaultEditor, isStandalone: true, selector: "ng-component", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "", isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DefaultEditor, decorators: [{
             type: Component,
-            args: [{ template: '' }]
-        }], propDecorators: { cell: [{
-                type: Input
-            }], inputClass: [{
-                type: Input
-            }] } });
-
-class Column {
-    constructor(id, settings, dataSet) {
-        this.id = id;
-        this.settings = settings;
-        this.dataSet = dataSet;
-        this.title = '';
-        this.type = 'text';
-        this.class = '';
-        this.width = '';
-        this.hide = false;
-        this.isSortable = false;
-        this.isEditable = true;
-        this.isAddable = true;
-        this.isFilterable = false;
-        this.sortDirection = 'asc';
-        this.defaultSortDirection = false;
-        this.editor = false;
-        this.filter = false;
-        this.process(this.settings);
-    }
-    getCompareFunction() {
-        return this.compareFunction;
-    }
-    getValuePrepareFunction() {
-        return this.valuePrepareFunction;
-    }
-    getFilterFunction() {
-        return this.filterFunction;
-    }
-    getConfig() {
-        if (this.editor && (this.editor.type === 'checkbox' || this.editor.type === 'custom' || this.editor.type === 'list')) {
-            return this.editor?.config;
-        }
-        return false;
-    }
-    getFilterType() {
-        return this.filter && this.filter.type;
-    }
-    getFilterConfig() {
-        if (this.filter && (this.filter.type === 'checkbox' || this.filter.type === 'custom' || this.filter.type === 'list')) {
-            return this.filter?.config;
-        }
-        return false;
-    }
-    process(settings) {
-        this.title = settings.title;
-        this.class = settings.class || '';
-        this.width = settings.width || '';
-        this.hide = !!settings.hide;
-        this.type = settings.type;
-        if (settings?.editor) {
-            this.editor = settings.editor;
-        }
-        if (settings?.filter) {
-            this.filter = settings.filter;
-        }
-        if (settings.type === 'custom' && settings.renderComponent) {
-            this.renderComponent = settings.renderComponent;
-        }
-        this.isFilterable = typeof settings.filter === 'undefined' ? true : !!settings['filter'];
-        this.defaultSortDirection = settings?.sortDirection || false;
-        this.isSortable = typeof settings.sort === 'undefined' ? true : settings.sort;
-        this.isEditable = typeof settings.editable === 'undefined' ? true : settings.editable;
-        this.isAddable = typeof settings.addable === 'undefined' ? true : settings.addable;
-        this.sortDirection = this.prepareSortDirection();
-        this.compareFunction = settings.compareFunction;
-        this.valuePrepareFunction = settings.valuePrepareFunction;
-        this.filterFunction = settings.filterFunction;
-    }
-    prepareSortDirection() {
-        return this.defaultSortDirection === 'desc' ? 'desc' : 'asc';
-    }
-}
+            args: [{ template: "" }]
+        }] });
 
 class DefaultFilter {
     constructor() {
         this.delay = 300;
         this.query = '';
-        this.inputClass = '';
+        this.inputClass = input('');
+        this.column = input.required();
         this.filter = output();
     }
     ngOnDestroy() {
@@ -161,17 +39,13 @@ class DefaultFilter {
         this.filter.emit(this.query);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DefaultFilter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: DefaultFilter, isStandalone: true, selector: "ng-component", inputs: { query: "query", inputClass: "inputClass", column: "column" }, outputs: { filter: "filter" }, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: DefaultFilter, isStandalone: true, selector: "ng-component", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: false, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filter: "filter" }, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DefaultFilter, decorators: [{
             type: Component,
             args: [{ template: '' }]
         }], propDecorators: { query: [{
                 type: Input
-            }], inputClass: [{
-                type: Input
-            }], column: [{
-                type: Input
             }] } });
 
 /**
@@ -184,15 +58,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  *   deepExtend({}, yourObj_1, [yourObj_N]);
  */
 const deepExtend = function (...objects) {
-    if (arguments.length < 1 || typeof arguments[0] !== 'object') {
+    if (objects.length < 1 || typeof objects[0] !== 'object') {
         return false;
     }
-    if (arguments.length < 2) {
-        return arguments[0];
+    if (objects.length < 2) {
+        return objects[0];
     }
-    const target = arguments[0];
+    const target = objects[0];
     // convert arguments to array and cut off target object
-    const args = Array.prototype.slice.call(arguments, 1);
+    const args = Array.prototype.slice.call(objects, 1);
     let val, src;
     args.forEach((obj) => {
         // skip argument if it is array or isn't object
@@ -253,7 +127,11 @@ function getDeepFromObject(object = {}, name, defaultValue = null) {
             if (level && typeof level[k] !== 'undefined') {
                 level = level[k];
             }
+            else {
+                level = defaultValue;
+            }
         });
+        return level ?? defaultValue;
     }
     catch {
         return defaultValue;
@@ -266,6 +144,9 @@ function getPageForRowIndex(index, perPage) {
 function cloneArrayOfObject(array) {
     return array.map((obj) => Object.assign({}, obj));
 }
+function getRandomId(prefix = '', suffix = '') {
+    return `${prefix ? `${prefix}-` : ''}${Math.random().toString(16).slice(2)}${suffix ? `-${suffix}` : ''}`;
+}
 function setLocalStorage(key, value) {
     localStorage.setItem(key, JSON.stringify(value));
 }
@@ -349,7 +230,7 @@ class SmartTableColumnEditorDirective {
         this.overlayRef?.dispose();
         this.destroy$.next();
     }
-    buttonClick() {
+    buttclicked() {
         this.showDropdown();
     }
     getOverlayConfig() {
@@ -402,18 +283,135 @@ class SmartTableColumnEditorDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SmartTableColumnEditorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.3", type: SmartTableColumnEditorDirective, isStandalone: true, selector: "[smartTableColumnEditor]", inputs: { tableComponent: { classPropertyName: "tableComponent", publicName: "tableComponent", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "buttonClick()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.3", type: SmartTableColumnEditorDirective, isStandalone: true, selector: "[smartTableColumnEditor]", inputs: { tableComponent: { classPropertyName: "tableComponent", publicName: "tableComponent", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "buttclicked()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SmartTableColumnEditorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[smartTableColumnEditor]",
                     host: {
-                        "(click)": "buttonClick()",
+                        "(click)": "buttclicked()",
                     },
                 }]
         }] });
 
+function prepareValue(value) { return value; }
+class Cell {
+    static { this.PREPARE = prepareValue; }
+    constructor(value, row, column, dataSet) {
+        this.value = value;
+        this.row = row;
+        this.column = column;
+        this.dataSet = dataSet;
+        this.newValue = '';
+        this.newValue = value;
+    }
+    getColumn() {
+        return this.column;
+    }
+    getColumnClass() {
+        return this.column.class;
+    }
+    getRow() {
+        return this.row;
+    }
+    getValue() {
+        const prepare = this.column.getValuePrepareFunction() || Cell.PREPARE;
+        return prepare.call(null, this.value, this.row.getData(), this);
+    }
+    setValue(value) {
+        this.newValue = value;
+    }
+    getId() {
+        return this.getColumn().id;
+    }
+    getTitle() {
+        return this.getColumn().title;
+    }
+    isEditable() {
+        if (this.getRow().index === -1) {
+            return this.getColumn().isAddable;
+        }
+        else {
+            return this.getColumn().isEditable;
+        }
+    }
+}
+
+class Column {
+    constructor(id, settings, dataSet) {
+        this.id = id;
+        this.settings = settings;
+        this.dataSet = dataSet;
+        this.title = '';
+        this.type = 'text';
+        this.class = '';
+        this.width = '';
+        this.hide = false;
+        this.isSortable = false;
+        this.isEditable = true;
+        this.isAddable = true;
+        this.isFilterable = false;
+        this.sortDirection = 'asc';
+        this.defaultSortDirection = false;
+        this.editor = false;
+        this.filter = false;
+        this.process(this.settings);
+    }
+    getCompareFunction() {
+        return this.compareFunction;
+    }
+    getValuePrepareFunction() {
+        return this.valuePrepareFunction;
+    }
+    getFilterFunction() {
+        return this.filterFunction;
+    }
+    getConfig() {
+        if (this.editor && (this.editor.type === 'checkbox' || this.editor.type === 'custom' || this.editor.type === 'list')) {
+            return this.editor?.config;
+        }
+        return false;
+    }
+    getFilterType() {
+        return this.filter && this.filter.type;
+    }
+    getFilterConfig() {
+        if (this.filter && (this.filter.type === 'checkbox' || this.filter.type === 'custom' || this.filter.type === 'list')) {
+            return this.filter?.config;
+        }
+        return false;
+    }
+    process(settings) {
+        this.title = settings.title;
+        this.class = settings.class || '';
+        this.width = settings.width || '';
+        this.hide = !!settings.hide;
+        this.type = settings.type;
+        if (settings?.editor) {
+            this.editor = settings.editor;
+        }
+        if (settings?.filter) {
+            this.filter = settings.filter;
+        }
+        if (settings.type === 'custom' && settings.renderComponent) {
+            this.renderComponent = settings.renderComponent;
+        }
+        this.isFilterable = typeof settings.filter === 'undefined' ? true : !!settings['filter'];
+        this.defaultSortDirection = settings?.sortDirection || false;
+        this.isSortable = typeof settings.sort === 'undefined' ? true : settings.sort;
+        this.isEditable = typeof settings.editable === 'undefined' ? true : settings.editable;
+        this.isAddable = typeof settings.addable === 'undefined' ? true : settings.addable;
+        this.sortDirection = this.prepareSortDirection();
+        this.compareFunction = settings.compareFunction;
+        this.valuePrepareFunction = settings.valuePrepareFunction;
+        this.filterFunction = settings.filterFunction;
+    }
+    prepareSortDirection() {
+        return this.defaultSortDirection === 'desc' ? 'desc' : 'asc';
+    }
+}
+
 class Row {
     constructor(index, data, _dataSet) {
         this.index = index;
@@ -566,27 +564,8 @@ class DataSource {
     }
 }
 
-function compareValues(direction, a, b) {
-    if (a < b) {
-        return -1 * direction;
-    }
-    if (a > b) {
-        return direction;
-    }
-    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]);
-        });
-    }
-}
-
-function filterValues(value, search) {
-    return value.toString().toLowerCase().includes(search.toString().toLowerCase());
+function filterValues(value, search) {
+    return value.toString().toLowerCase().includes(search.toString().toLowerCase());
 }
 class LocalFilter {
     static filter(data, field, search, customFilter) {
@@ -604,6 +583,25 @@ class LocalPager {
     }
 }
 
+function compareValues(direction, a, b) {
+    if (a < b) {
+        return -1 * direction;
+    }
+    if (a > b) {
+        return direction;
+    }
+    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]);
+        });
+    }
+}
+
 class LocalDataSource extends DataSource {
     constructor(data = []) {
         super();
@@ -664,7 +662,7 @@ class LocalDataSource extends DataSource {
         return Promise.resolve(this.prepareData(data));
     }
     getFilteredAndSorted() {
-        let data = this.data.slice(0);
+        const data = this.data.slice(0);
         this.prepareData(data);
         return Promise.resolve(this.filteredAndSorted);
     }
@@ -1160,183 +1158,774 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 type: Input
             }] } });
 
-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();
-    }
-    setData(data) {
-        this.data = data;
-        this.createRows();
-    }
-    getColumns() {
-        return this.columns;
-    }
-    getRows() {
-        return this.rows;
-    }
-    getFirstRow() {
-        return this.rows[0];
+class EditCellDefaultComponent {
+    constructor() {
+        this.cell = input.required();
+        this.inputClass = input('');
     }
-    getLastRow() {
-        return this.rows[this.rows.length - 1];
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: EditCellDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: EditCellDefaultComponent, isStandalone: true, selector: "ng-component", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: EditCellDefaultComponent, decorators: [{
+            type: Component,
+            args: [{ template: '' }]
+        }] });
+
+class CustomEditComponent extends EditCellDefaultComponent {
+    ngOnChanges(changes) {
+        const editor = this.cell().getColumn().editor;
+        if (this.customComponent) {
+            if (this.customComponent?.instance && 'ngOnChanges' in this.customComponent.instance) {
+                const onChanges = this.customComponent.instance.ngOnChanges;
+                onChanges(changes);
+            }
+            return;
+        }
+        if (this.cell() &&
+            !this.customComponent &&
+            editor &&
+            editor.type == "custom") {
+            this.customComponent = this.dynamicTarget?.createComponent(editor.component);
+            this.customComponent?.setInput('cell', this.cell());
+            this.customComponent?.setInput('inputClass', this.inputClass());
+        }
     }
-    findRowByData(data) {
-        return this.rows.find((row) => row.getData() === data);
+    ngOnDestroy() {
+        if (this.customComponent) {
+            this.customComponent.destroy();
+        }
     }
-    setSelectAll(state) {
-        this.rows.forEach((row) => {
-            row.isSelected = state;
-            this.storeSelectedRow(row);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: CustomEditComponent, isStandalone: true, 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: "19.0.3", ngImport: i0, type: CustomEditComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "table-cell-custom-editor",
+                    template: ` <ng-template #dynamicTarget></ng-template> `,
+                    standalone: true,
+                }]
+        }], propDecorators: { dynamicTarget: [{
+                type: ViewChild,
+                args: ["dynamicTarget", { read: ViewContainerRef, static: true }]
+            }] } });
+
+class CheckboxEditorComponent extends DefaultEditor {
+    constructor() {
+        super();
+        this.trueVal = computed(() => {
+            return this.cell().getColumn().getConfig()?.true || true;
         });
-    }
-    deselectAll() {
-        this.rows.forEach((row) => {
-            row.isSelected = false;
+        this.falseVal = computed(() => {
+            return this.cell().getColumn().getConfig()?.false || false;
         });
-        // 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;
     }
-    getSelectedRowsData() {
-        return [...this.selectedRows];
+    onChange(event) {
+        this.cell().newValue = event.target.checked ? this.trueVal() : this.falseVal();
     }
-    createNewRow() {
-        this.newRow = new Row(-1, {}, this);
-        this.newRow.isInEditing = true;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CheckboxEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: CheckboxEditorComponent, isStandalone: true, selector: "checkbox-editor", usesInheritance: true, ngImport: i0, template: `
+    <input
+      [class]="inputClass()"
+      type="checkbox"
+      class="form-control"
+      [name]="cell().getId()"
+      [disabled]="!cell().isEditable()"
+      (change)="onChange($event)"
+      [checked]="
+        cell().getValue() === trueVal()
+      "
+    />
+  `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CheckboxEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "checkbox-editor", template: `
+    <input
+      [class]="inputClass()"
+      type="checkbox"
+      class="form-control"
+      [name]="cell().getId()"
+      [disabled]="!cell().isEditable()"
+      (change)="onChange($event)"
+      [checked]="
+        cell().getValue() === trueVal()
+      "
+    />
+  `, standalone: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }]
+        }], ctorParameters: () => [] });
+
+class InputEditorComponent extends DefaultEditor {
+    constructor() {
+        super();
     }
-    /**
-     * Create columns by mapping from the settings
-     * @param settings
-     * @private
-     */
-    createColumns(settings) {
-        settings.forEach((columnSettings) => {
-            this.columns.push(new Column(columnSettings.key, columnSettings, this));
-        });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: InputEditorComponent, isStandalone: true, selector: "input-editor", usesInheritance: true, ngImport: i0, template: `
+    <input
+      [class]="inputClass()"
+      class="form-control"
+      [(ngModel)]="cell().newValue"
+      [name]="cell().getId()"
+      [placeholder]="cell().getTitle()"
+      [disabled]="!cell().isEditable()"
+    />
+  `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "input-editor", template: `
+    <input
+      [class]="inputClass()"
+      class="form-control"
+      [(ngModel)]="cell().newValue"
+      [name]="cell().getId()"
+      [placeholder]="cell().getTitle()"
+      [disabled]="!cell().isEditable()"
+    />
+  `, standalone: true, imports: [FormsModule], styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }]
+        }], ctorParameters: () => [] });
+
+class SelectEditorComponent extends DefaultEditor {
+    constructor() {
+        super();
     }
-    /**
-     * 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);
-        });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SelectEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: SelectEditorComponent, isStandalone: true, selector: "select-editor", usesInheritance: true, ngImport: i0, template: `
+    <select
+      [class]="inputClass()"
+      class="form-control"
+      [(ngModel)]="cell().newValue"
+      [name]="cell().getId()"
+      [disabled]="!cell().isEditable()"
+    >
+      @for (option of cell().getColumn().getConfig()?.list; track option.value) {
+      <option
+        [value]="option.value"
+        [selected]="option.value === cell().getValue()"
+      >
+        {{ option.title }}
+      </option>
+      }
+    </select>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SelectEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "select-editor",
+                    template: `
+    <select
+      [class]="inputClass()"
+      class="form-control"
+      [(ngModel)]="cell().newValue"
+      [name]="cell().getId()"
+      [disabled]="!cell().isEditable()"
+    >
+      @for (option of cell().getColumn().getConfig()?.list; track option.value) {
+      <option
+        [value]="option.value"
+        [selected]="option.value === cell().getValue()"
+      >
+        {{ option.title }}
+      </option>
+      }
+    </select>
+  `,
+                    standalone: true,
+                    imports: [FormsModule],
+                }]
+        }], ctorParameters: () => [] });
+
+class TextareaEditorComponent extends DefaultEditor {
+    constructor() {
+        super();
     }
-    get isAllSelected() {
-        return this.rows.every((row) => row.isSelected);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TextareaEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: TextareaEditorComponent, isStandalone: true, selector: "textarea-editor", usesInheritance: true, ngImport: i0, template: `
+    <textarea
+      [class]="inputClass()"
+      class="form-control"
+      [(ngModel)]="cell().newValue"
+      [name]="cell().getId()"
+      [disabled]="!cell().isEditable()"
+      [placeholder]="cell().getTitle()"
+    >
+    </textarea>
+  `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TextareaEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "textarea-editor", template: `
+    <textarea
+      [class]="inputClass()"
+      class="form-control"
+      [(ngModel)]="cell().newValue"
+      [name]="cell().getId()"
+      [disabled]="!cell().isEditable()"
+      [placeholder]="cell().getTitle()"
+    >
+    </textarea>
+  `, standalone: true, imports: [FormsModule], styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }]
+        }], ctorParameters: () => [] });
+
+class DefaultEditComponent extends EditCellDefaultComponent {
+    constructor() {
+        super();
     }
-    storeSelectedRow(row) {
-        if (row.isSelected) {
-            this.selectedRows.add(row.getData());
-        }
-        else {
-            this.selectedRows.delete(row.getData());
+    getEditorType() {
+        const editor = this.cell().getColumn().editor;
+        if (editor) {
+            return editor.type || "text";
         }
+        return "text";
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DefaultEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: DefaultEditComponent, isStandalone: true, selector: "table-cell-default-editor", usesInheritance: true, ngImport: i0, template: "<div role=\"none\" (click)=\"$event.stopPropagation()\">\n  @switch (getEditorType()) {\n    @case ('list') {\n      <select-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </select-editor>\n    }\n    @case ('textarea') {\n      <textarea-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </textarea-editor>\n    }\n    @case ('checkbox') {\n      <checkbox-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </checkbox-editor>\n    }\n    @default {\n      <input-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n    </input-editor>\n  }\n}\n</div>", dependencies: [{ kind: "component", type: SelectEditorComponent, selector: "select-editor" }, { kind: "component", type: TextareaEditorComponent, selector: "textarea-editor" }, { kind: "component", type: CheckboxEditorComponent, selector: "checkbox-editor" }, { kind: "component", type: InputEditorComponent, selector: "input-editor" }] }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DefaultEditComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "table-cell-default-editor", imports: [
+                        SelectEditorComponent,
+                        TextareaEditorComponent,
+                        CheckboxEditorComponent,
+                        InputEditorComponent,
+                    ], standalone: true, template: "<div role=\"none\" (click)=\"$event.stopPropagation()\">\n  @switch (getEditorType()) {\n    @case ('list') {\n      <select-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </select-editor>\n    }\n    @case ('textarea') {\n      <textarea-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </textarea-editor>\n    }\n    @case ('checkbox') {\n      <checkbox-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </checkbox-editor>\n    }\n    @default {\n      <input-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n    </input-editor>\n  }\n}\n</div>" }]
+        }], ctorParameters: () => [] });
 
-class Grid {
-    constructor(source, settings) {
-        this.createFormShown = false;
-        this.onSelectRowSource = new Subject();
-        this.onDeselectRowSource = new Subject();
-        this.currentColumnsSortState = [];
-        this.setSettings(settings);
-        this.setSource(source);
-    }
-    setColumnsSortedEmitter(emitter) {
-        this.columnsSortedEmitter = emitter;
+class EditCellComponent {
+    constructor() {
+        this.cell = input.required();
+        this.inputClass = input("");
     }
-    detach() {
-        if (this.sourceOnChangedSubscription) {
-            this.sourceOnChangedSubscription.unsubscribe();
-        }
-        if (this.sourceOnUpdatedSubscription) {
-            this.sourceOnUpdatedSubscription.unsubscribe();
+    getEditorType() {
+        const editor = this.cell().getColumn().editor;
+        if (editor) {
+            return editor.type;
         }
+        return "text";
     }
-    showActionColumn(position) {
-        return this.isCurrentActionsPosition(position) && this.isActionsVisible();
-    }
-    isCurrentActionsPosition(position) {
-        return position == this.getSetting("actions.position");
-    }
-    isActionsVisible() {
-        return (this.getSetting("actions.add", false) ||
-            this.getSetting("actions.edit", false) ||
-            this.getSetting("actions.delete", false) ||
-            !!this.getSetting("actions.custom", [])?.length);
-    }
-    isMultiSelectVisible() {
-        return this.getSetting("selectMode") === "multi";
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: EditCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: EditCellComponent, isStandalone: true, selector: "table-cell-edit-mode", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div>
+      @switch (getEditorType()) { @case ('custom') {
+      <table-cell-custom-editor
+        [cell]="cell()"
+        [inputClass]="inputClass()"
+      >
+      </table-cell-custom-editor>
+      } @default {
+      <table-cell-default-editor
+        [cell]="cell()"
+        [inputClass]="inputClass()"
+      >
+      </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: "19.0.3", 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()"
+      >
+      </table-cell-custom-editor>
+      } @default {
+      <table-cell-default-editor
+        [cell]="cell()"
+        [inputClass]="inputClass()"
+      >
+      </table-cell-default-editor>
+      } }
+    </div>
+  `,
+                    standalone: true,
+                    imports: [CustomEditComponent, DefaultEditComponent],
+                }]
+        }] });
+
+class CustomViewComponent {
+    constructor() {
+        this.cell = input.required();
     }
-    getNewRow() {
-        return this.dataSet.newRow;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: CustomViewComponent, isStandalone: true, selector: "custom-view-component", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<ng-template
+    *ngComponentOutlet="
+      cell().getColumn().renderComponent;
+      inputs: { rowData: cell().getRow().getData(), value: cell().getValue() }
+    "
+  ></ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "custom-view-component",
+                    template: `<ng-template
+    *ngComponentOutlet="
+      cell().getColumn().renderComponent;
+      inputs: { rowData: cell().getRow().getData(), value: cell().getValue() }
+    "
+  ></ng-template>`,
+                    imports: [NgComponentOutlet],
+                    standalone: true,
+                }]
+        }] });
+
+class ViewCellComponent {
+    constructor() {
+        this.cell = input.required();
     }
-    setSettings(settings) {
-        this.updateSettingsAndDataSet(settings);
-        if (this.getSetting('withColumnSort', false)) {
-            this.setColumnsSortState(settings.columns);
-        }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ViewCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ViewCellComponent, isStandalone: true, selector: "table-cell-view-mode", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null } }, 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: "19.0.3", 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>
+  `,
+                    standalone: true,
+                    imports: [CustomViewComponent],
+                }]
+        }] });
+
+class CellComponent {
+    constructor() {
+        this.cell = input.required();
+        this.inputClass = input('');
+        this.isInEditing = input(false);
     }
-    updateSettingsAndDataSet(settings) {
-        this.settings = settings;
-        this.dataSet = new DataSet([], this.getSetting("columns"));
-        if (this.source) {
-            this.source.refresh();
-        }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: CellComponent, isStandalone: true, selector: "ng2-smart-table-cell", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, isInEditing: { classPropertyName: "isInEditing", publicName: "isInEditing", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (!isInEditing()) {
+    <table-cell-view-mode [cell]="cell()"></table-cell-view-mode>
+    } @else {
+    <table-cell-edit-mode
+      [cell]="cell()"
+      [inputClass]="inputClass()"
+    >
+    </table-cell-edit-mode>
     }
-    getDataSet() {
-        return this.dataSet;
+  `, isInline: true, dependencies: [{ kind: "component", type: ViewCellComponent, selector: "table-cell-view-mode", inputs: ["cell"] }, { kind: "component", type: EditCellComponent, selector: "table-cell-edit-mode", inputs: ["cell", "inputClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", 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>
+    } @else {
+    <table-cell-edit-mode
+      [cell]="cell()"
+      [inputClass]="inputClass()"
+    >
+    </table-cell-edit-mode>
     }
-    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);
-            }
+  `,
+                    standalone: true,
+                    imports: [ViewCellComponent, EditCellComponent],
+                }]
+        }] });
+
+class TbodyCreateCancelComponent {
+    constructor() {
+        this.grid = input.required();
+        this.row = input.required();
+        this.editConfirm = input.required();
+        this.editCancel = input.required();
+        this.cancelButtonContent = computed(() => {
+            const edit = this.grid().settings().edit;
+            return edit ? edit.cancelButtonContent || "Cancel" : "Cancel";
+        });
+        this.saveButtonContent = computed(() => {
+            const edit = this.grid().settings().edit;
+            return edit ? edit.saveButtonContent || "Update" : "Update";
         });
     }
-    getSetting(name, defaultValue) {
-        return getDeepFromObject(this.settings, name, defaultValue);
-    }
-    getColumns() {
-        return this.dataSet.getColumns();
-    }
-    getRows() {
-        return this.dataSet.getRows();
+    onSave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.grid().save(this.row(), this.editConfirm());
     }
-    selectRow(row, state) {
-        this.dataSet.selectRow(row, state);
+    onCancelEdit(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.editCancel().emit(true);
+        this.row().isInEditing = false;
     }
-    multipleSelectRow(row) {
-        this.dataSet.multipleSelectRow(row);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TbodyCreateCancelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TbodyCreateCancelComponent, isStandalone: true, selector: "ng2-st-tbody-create-cancel", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, editConfirm: { classPropertyName: "editConfirm", publicName: "editConfirm", isSignal: true, isRequired: true, transformFunction: null }, editCancel: { classPropertyName: "editCancel", publicName: "editCancel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    @if (!row().pending) {
+    <a
+      href="#"
+      [id]="'row-' + row().index + '_editing-confirm-button'"
+      class="ng2-smart-action ng2-smart-action-edit-save"
+      [innerHTML]="saveButtonContent()"
+      (click)="onSave($event)"
+    ></a>
+    <a
+      href="#"
+      [id]="'row-' + row().index + '_editing-cancel-button'"
+      class="ng2-smart-action ng2-smart-action-edit-cancel"
+      [innerHTML]="cancelButtonContent()"
+      (click)="onCancelEdit($event)"
+    ></a>
+    } @else {
+    <div style="display: flex;">
+      <svg
+        role="none"
+        (click)="$event.stopPropagation()"
+        style="height: 2rem; width: 2rem;"
+        version="1.1"
+        id="L9"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        x="0px"
+        y="0px"
+        viewBox="0 0 100 100"
+        enable-background="new 0 0 0 0"
+        xml:space="preserve"
+      >
+        <path
+          fill="#e9e9e9"
+          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
+        >
+          <animateTransform
+            attributeName="transform"
+            attributeType="XML"
+            type="rotate"
+            dur="1s"
+            from="0 50 50"
+            to="360 50 50"
+            repeatCount="indefinite"
+          />
+        </path>
+      </svg>
+      <svg
+        role="none"
+        (click)="$event.stopPropagation()"
+        style="height: 2rem; width: 2rem; "
+        version="1.1"
+        id="L9"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        x="0px"
+        y="0px"
+        viewBox="0 0 100 100"
+        enable-background="new 0 0 0 0"
+        xml:space="preserve"
+      >
+        <path
+          fill="#e9e9e9"
+          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
+        >
+          <animateTransform
+            attributeName="transform"
+            attributeType="XML"
+            type="rotate"
+            dur="1s"
+            from="0 50 50"
+            to="360 50 50"
+            repeatCount="indefinite"
+          />
+        </path>
+      </svg>
+    </div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TbodyCreateCancelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "ng2-st-tbody-create-cancel",
+                    template: `
+    @if (!row().pending) {
+    <a
+      href="#"
+      [id]="'row-' + row().index + '_editing-confirm-button'"
+      class="ng2-smart-action ng2-smart-action-edit-save"
+      [innerHTML]="saveButtonContent()"
+      (click)="onSave($event)"
+    ></a>
+    <a
+      href="#"
+      [id]="'row-' + row().index + '_editing-cancel-button'"
+      class="ng2-smart-action ng2-smart-action-edit-cancel"
+      [innerHTML]="cancelButtonContent()"
+      (click)="onCancelEdit($event)"
+    ></a>
+    } @else {
+    <div style="display: flex;">
+      <svg
+        role="none"
+        (click)="$event.stopPropagation()"
+        style="height: 2rem; width: 2rem;"
+        version="1.1"
+        id="L9"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        x="0px"
+        y="0px"
+        viewBox="0 0 100 100"
+        enable-background="new 0 0 0 0"
+        xml:space="preserve"
+      >
+        <path
+          fill="#e9e9e9"
+          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
+        >
+          <animateTransform
+            attributeName="transform"
+            attributeType="XML"
+            type="rotate"
+            dur="1s"
+            from="0 50 50"
+            to="360 50 50"
+            repeatCount="indefinite"
+          />
+        </path>
+      </svg>
+      <svg
+        role="none"
+        (click)="$event.stopPropagation()"
+        style="height: 2rem; width: 2rem; "
+        version="1.1"
+        id="L9"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        x="0px"
+        y="0px"
+        viewBox="0 0 100 100"
+        enable-background="new 0 0 0 0"
+        xml:space="preserve"
+      >
+        <path
+          fill="#e9e9e9"
+          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
+        >
+          <animateTransform
+            attributeName="transform"
+            attributeType="XML"
+            type="rotate"
+            dur="1s"
+            from="0 50 50"
+            to="360 50 50"
+            repeatCount="indefinite"
+          />
+        </path>
+      </svg>
+    </div>
+    }
+  `,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+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();
+    }
+    setData(data) {
+        this.data = data;
+        this.createRows();
+    }
+    getColumns() {
+        return this.columns;
+    }
+    getRows() {
+        return this.rows;
+    }
+    getFirstRow() {
+        return this.rows[0];
+    }
+    getLastRow() {
+        return this.rows[this.rows.length - 1];
+    }
+    findRowByData(data) {
+        return this.rows.find((row) => row.getData() === data);
+    }
+    setSelectAll(state) {
+        this.rows.forEach((row) => {
+            row.isSelected = state;
+            this.storeSelectedRow(row);
+        });
+    }
+    deselectAll() {
+        this.rows.forEach((row) => {
+            row.isSelected = false;
+        });
+        // 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;
+    }
+    getSelectedRowsData() {
+        return [...this.selectedRows];
+    }
+    createNewRow() {
+        this.newRow = new Row(-1, {}, this);
+        this.newRow.isInEditing = true;
+    }
+    /**
+     * Create columns by mapping from the settings
+     * @param settings
+     * @private
+     */
+    createColumns(settings) {
+        settings.forEach((columnSettings) => {
+            this.columns.push(new Column(columnSettings.key, columnSettings, this));
+        });
+    }
+    /**
+     * 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);
+        });
+    }
+    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());
+        }
+    }
+}
+
+class Grid {
+    constructor(source, settings) {
+        this.createFormShown = false;
+        this.onSelectRowSource = new Subject();
+        this.onDeselectRowSource = new Subject();
+        this.currentColumnsSortState = [];
+        this.settings = signal({});
+        this.isMultiSelectVisible = computed(() => {
+            return this.settings().selectMode === "multi";
+        });
+        this.isActionsVisible = computed(() => {
+            const actions = this.settings().actions;
+            if (!actions)
+                return false;
+            return actions.add || actions.edit || actions.delete || !!actions?.custom?.length;
+        });
+        this.actionIsOnLeft = computed(() => {
+            return (this.settings().actionsPosition || 'left') === 'left';
+        });
+        this.actionIsOnRight = computed(() => {
+            return this.settings().actionsPosition === 'right';
+        });
+        this.setSettings(settings);
+        this.setSource(source);
+    }
+    setColumnsSortedEmitter(emitter) {
+        this.columnsSortedEmitter = emitter;
+    }
+    detach() {
+        if (this.sourceOnChangedSubscription) {
+            this.sourceOnChangedSubscription.unsubscribe();
+        }
+        if (this.sourceOnUpdatedSubscription) {
+            this.sourceOnUpdatedSubscription.unsubscribe();
+        }
+    }
+    getNewRow() {
+        return this.dataSet.newRow;
+    }
+    setSettings(settings) {
+        this.updateSettingsAndDataSet(settings);
+        if (this.getSetting('columnSort', false)) {
+            this.setColumnsSortState(settings.columns);
+        }
+    }
+    updateSettingsAndDataSet(settings) {
+        this.settings.set(settings);
+        this.dataSet = new DataSet([], settings.columns);
+        if (this.source) {
+            this.source.refresh();
+        }
+    }
+    getDataSet() {
+        return this.dataSet;
+    }
+    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);
+            }
+        });
+    }
+    getSetting(name, defaultValue) {
+        return getDeepFromObject(this.settings(), name, defaultValue);
+    }
+    getColumns() {
+        return this.dataSet.getColumns();
+    }
+    getRows() {
+        return this.dataSet.getRows();
+    }
+    selectRow(row, state) {
+        this.dataSet.selectRow(row, state);
+    }
+    multipleSelectRow(row) {
+        this.dataSet.multipleSelectRow(row);
     }
     onSelectRow() {
         return this.onSelectRowSource.asObservable();
@@ -1353,7 +1942,7 @@ class Grid {
         deferred.promise
             .then((newData) => {
             row.pending = false;
-            newData = newData ? newData : row.getNewData();
+            newData = newData || row.getNewData();
             this.source.prepend(newData).then(() => {
                 this.createFormShown = false;
                 this.dataSet.createNewRow();
@@ -1379,7 +1968,7 @@ class Grid {
         deferred.promise
             .then((newData) => {
             row.pending = false;
-            newData = newData ? newData : row.getNewData();
+            newData = newData || row.getNewData();
             this.source.update(row.getData(), newData).then(() => {
                 row.isInEditing = false;
             });
@@ -1387,7 +1976,7 @@ class Grid {
             .catch((err) => {
             row.pending = false;
         });
-        if (this.getSetting("edit.confirmSave")) {
+        if (this.getSetting("edit.confirmSave", false)) {
             confirmEmitter.emit({
                 data: row.getData(),
                 newData: row.getNewData(),
@@ -1491,8 +2080,8 @@ class Grid {
     async applyColumnsSortState(state, emitEvent = true) {
         this.currentColumnsSortState = this.getMergedColumnStates(state);
         this.updateSettingsAndDataSet({
-            ...this.settings,
-            columns: await this.getSortedTableColumns(this.currentColumnsSortState, this.settings?.columns),
+            ...this.settings(),
+            columns: await this.getSortedTableColumns(this.currentColumnsSortState, this.settings()?.columns),
         });
         if (this.columnStateStorageKey) {
             setLocalStorage(this.columnStateStorageKey, this.currentColumnsSortState);
@@ -1506,705 +2095,44 @@ class Grid {
         if (this.columnStateStorageKey) {
             const storageState = getLocalStorage(this.columnStateStorageKey);
             if (!storageState) {
-                this.currentColumnsSortState = columnsState;
-                setLocalStorage(this.columnStateStorageKey, columnsState);
-                return;
-            }
-            const merged = this.getMergedColumnStates(storageState, columnsState);
-            this.applyColumnsSortState(merged, false);
-            return;
-        }
-        this.applyColumnsSortState(columnsState, false);
-    }
-    getColumnsStateFromSettings(columns) {
-        return (columns || this.settings.columns || []).map((column) => ({
-            key: column.key,
-            title: column.title,
-            hide: !!column.hide,
-            moveDisabled: !!column.moveDisabled,
-        }));
-    }
-    getMergedColumnStates(newState, columnsState) {
-        const columnsSettings = columnsState || this.getColumnsStateFromSettings();
-        // merge new columns state with state from storage
-        const filtered = [];
-        newState.forEach((state) => {
-            const fined = columnsSettings.find((column) => column.title === state.title && column.key === state.key);
-            if (fined) {
-                filtered.push({ ...fined, hide: fined.moveDisabled ? fined.hide : state.hide });
-            }
-        });
-        // find new columns witch not exist in storage state
-        const newColumns = columnsSettings.filter((state) => {
-            return !filtered.some((column) => column.title === state.title && column.key === state.key);
-        });
-        return [...filtered, ...newColumns];
-    }
-    get columnStateStorageKey() {
-        return this.settings.columnSortStorageKey;
-    }
-}
-
-class EditCellDefault {
-    constructor() {
-        this.inputClass = '';
-        this.edited = output();
-    }
-    onEdited(event) {
-        this.edited.emit(event);
-        return false;
-    }
-    onStopEditing() {
-        this.cell.getRow().isInEditing = false;
-        return false;
-    }
-    onClick(event) {
-        event.stopPropagation();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: EditCellDefault, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: EditCellDefault, isStandalone: true, selector: "ng-component", inputs: { cell: "cell", inputClass: "inputClass" }, outputs: { edited: "edited" }, ngImport: i0, template: '', isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: EditCellDefault, decorators: [{
-            type: Component,
-            args: [{ template: '' }]
-        }], propDecorators: { cell: [{
-                type: Input
-            }], inputClass: [{
-                type: Input
-            }] } });
-
-class CustomEditComponent extends EditCellDefault {
-    ngOnChanges(changes) {
-        const editor = this.cell.getColumn().editor;
-        if (this.customComponent) {
-            if (this.customComponent.instance?.ngOnChanges) {
-                this.customComponent.instance.ngOnChanges(changes);
-            }
-            return;
-        }
-        if (this.cell &&
-            !this.customComponent &&
-            editor &&
-            editor.type == "custom") {
-            this.customComponent = this.dynamicTarget.createComponent(editor.component);
-            // 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));
-        }
-    }
-    ngOnDestroy() {
-        if (this.customComponent) {
-            this.customComponent.destroy();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: CustomEditComponent, isStandalone: true, 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: "19.0.3", ngImport: i0, type: CustomEditComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "table-cell-custom-editor",
-                    template: ` <ng-template #dynamicTarget></ng-template> `,
-                    standalone: true,
-                }]
-        }], 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: "19.0.3", ngImport: i0, type: CheckboxEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: CheckboxEditorComponent, isStandalone: true, selector: "checkbox-editor", usesInheritance: true, ngImport: i0, template: `
-    <input
-      [class]="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"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CheckboxEditorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "checkbox-editor", template: `
-    <input
-      [class]="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)"
-    />
-  `, standalone: true, 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: "19.0.3", ngImport: i0, type: InputEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: InputEditorComponent, isStandalone: true, selector: "input-editor", usesInheritance: true, ngImport: i0, template: `
-    <input
-      [class]="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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputEditorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "input-editor", template: `
-    <input
-      [class]="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('')"
-    />
-  `, standalone: true, imports: [FormsModule], 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: "19.0.3", ngImport: i0, type: SelectEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: SelectEditorComponent, isStandalone: true, selector: "select-editor", usesInheritance: true, ngImport: i0, template: `
-    <select
-      [class]="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.value) {
-      <option
-        [value]="option.value"
-        [selected]="option.value === cell.getValue()"
-      >
-        {{ option.title }}
-      </option>
-      }
-    </select>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SelectEditorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "select-editor",
-                    template: `
-    <select
-      [class]="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.value) {
-      <option
-        [value]="option.value"
-        [selected]="option.value === cell.getValue()"
-      >
-        {{ option.title }}
-      </option>
-      }
-    </select>
-  `,
-                    standalone: true,
-                    imports: [FormsModule],
-                }]
-        }], ctorParameters: () => [] });
-
-class TextareaEditorComponent extends DefaultEditor {
-    constructor() {
-        super();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TextareaEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: TextareaEditorComponent, isStandalone: true, selector: "textarea-editor", usesInheritance: true, ngImport: i0, template: `
-    <textarea
-      [class]="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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TextareaEditorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "textarea-editor", template: `
-    <textarea
-      [class]="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>
-  `, standalone: true, imports: [FormsModule], 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: "19.0.3", ngImport: i0, type: DefaultEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: DefaultEditComponent, isStandalone: true, 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: SelectEditorComponent, selector: "select-editor" }, { kind: "component", type: TextareaEditorComponent, selector: "textarea-editor" }, { kind: "component", type: CheckboxEditorComponent, selector: "checkbox-editor" }, { kind: "component", type: InputEditorComponent, selector: "input-editor" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DefaultEditComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "table-cell-default-editor", imports: [
-                        SelectEditorComponent,
-                        TextareaEditorComponent,
-                        CheckboxEditorComponent,
-                        InputEditorComponent,
-                    ], standalone: true, 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 = output();
-    }
-    onEdited(event) {
-        this.edited.emit(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: "19.0.3", ngImport: i0, type: EditCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: EditCellComponent, isStandalone: true, 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: "19.0.3", 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>
-  `,
-                    standalone: true,
-                    imports: [CustomEditComponent, DefaultEditComponent],
-                }]
-        }], propDecorators: { cell: [{
-                type: Input
-            }], inputClass: [{
-                type: Input
-            }] } });
-
-class CustomViewComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: CustomViewComponent, isStandalone: true, selector: "custom-view-component", inputs: { cell: "cell" }, ngImport: i0, template: `<ng-template
-    *ngComponentOutlet="
-      cell.getColumn().renderComponent;
-      inputs: { rowData: cell.getRow().getData(), value: cell.getValue() }
-    "
-  ></ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomViewComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "custom-view-component",
-                    template: `<ng-template
-    *ngComponentOutlet="
-      cell.getColumn().renderComponent;
-      inputs: { rowData: cell.getRow().getData(), value: cell.getValue() }
-    "
-  ></ng-template>`,
-                    imports: [NgComponentOutlet],
-                    standalone: true,
-                }]
-        }], propDecorators: { cell: [{
-                type: Input
-            }] } });
-
-class ViewCellComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ViewCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ViewCellComponent, isStandalone: true, 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: "19.0.3", 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>
-  `,
-                    standalone: true,
-                    imports: [CustomViewComponent],
-                }]
-        }], propDecorators: { cell: [{
-                type: Input
-            }] } });
-
-class CellComponent {
-    constructor() {
-        this.inputClass = "";
-        this.mode = "inline";
-        this.isInEditing = false;
-        this.edited = output();
-    }
-    onEdited(event) {
-        if (this.isNew) {
-            this.grid.create(this.grid.getNewRow(), this.createConfirm);
-        }
-        else {
-            this.grid.save(this.row, this.editConfirm);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: CellComponent, isStandalone: true, 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>
-    } @else {
-    <table-cell-edit-mode
-      [cell]="cell"
-      [inputClass]="inputClass"
-      (edited)="onEdited($event)"
-    >
-    </table-cell-edit-mode>
-    }
-  `, isInline: true, dependencies: [{ kind: "component", type: ViewCellComponent, selector: "table-cell-view-mode", inputs: ["cell"] }, { kind: "component", type: EditCellComponent, selector: "table-cell-edit-mode", inputs: ["cell", "inputClass"], outputs: ["edited"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", 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>
-    } @else {
-    <table-cell-edit-mode
-      [cell]="cell"
-      [inputClass]="inputClass"
-      (edited)="onEdited($event)"
-    >
-    </table-cell-edit-mode>
-    }
-  `,
-                    standalone: true,
-                    imports: [ViewCellComponent, EditCellComponent],
-                }]
-        }], 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
-            }] } });
-
-class TbodyCreateCancelComponent {
-    constructor() {
-        this.cancelButtonContent = "";
-        this.saveButtonContent = "";
-    }
-    onSave(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.grid.save(this.row, this.editConfirm);
-    }
-    onCancelEdit(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.editCancel.emit(true);
-        this.row.isInEditing = false;
-    }
-    ngOnChanges() {
-        this.saveButtonContent = this.grid.getSetting("edit.saveButtonContent", "save");
-        this.cancelButtonContent = this.grid.getSetting("edit.cancelButtonContent", "cancel");
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TbodyCreateCancelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TbodyCreateCancelComponent, isStandalone: true, selector: "ng2-st-tbody-create-cancel", inputs: { grid: "grid", row: "row", editConfirm: "editConfirm", editCancel: "editCancel" }, usesOnChanges: true, ngImport: i0, template: `
-    @if (!row.pending) {
-    <a
-      href="#"
-      [id]="'row-' + row.index + '_editing-confirm-button'"
-      class="ng2-smart-action ng2-smart-action-edit-save"
-      [innerHTML]="saveButtonContent"
-      (click)="onSave($event)"
-    ></a>
-    <a
-      href="#"
-      [id]="'row-' + row.index + '_editing-cancel-button'"
-      class="ng2-smart-action ng2-smart-action-edit-cancel"
-      [innerHTML]="cancelButtonContent"
-      (click)="onCancelEdit($event)"
-    ></a>
-    } @else {
-    <div style="display: flex;">
-      <svg
-        (click)="$event.stopPropagation()"
-        style="height: 2rem; width: 2rem;"
-        version="1.1"
-        id="L9"
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        x="0px"
-        y="0px"
-        viewBox="0 0 100 100"
-        enable-background="new 0 0 0 0"
-        xml:space="preserve"
-      >
-        <path
-          fill="#e9e9e9"
-          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
-        >
-          <animateTransform
-            attributeName="transform"
-            attributeType="XML"
-            type="rotate"
-            dur="1s"
-            from="0 50 50"
-            to="360 50 50"
-            repeatCount="indefinite"
-          />
-        </path>
-      </svg>
-      <svg
-        (click)="$event.stopPropagation()"
-        style="height: 2rem; width: 2rem; "
-        version="1.1"
-        id="L9"
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        x="0px"
-        y="0px"
-        viewBox="0 0 100 100"
-        enable-background="new 0 0 0 0"
-        xml:space="preserve"
-      >
-        <path
-          fill="#e9e9e9"
-          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
-        >
-          <animateTransform
-            attributeName="transform"
-            attributeType="XML"
-            type="rotate"
-            dur="1s"
-            from="0 50 50"
-            to="360 50 50"
-            repeatCount="indefinite"
-          />
-        </path>
-      </svg>
-    </div>
+                this.currentColumnsSortState = columnsState;
+                setLocalStorage(this.columnStateStorageKey, columnsState);
+                return;
+            }
+            const merged = this.getMergedColumnStates(storageState, columnsState);
+            this.applyColumnsSortState(merged, false);
+            return;
+        }
+        this.applyColumnsSortState(columnsState, false);
     }
-  `, isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TbodyCreateCancelComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "ng2-st-tbody-create-cancel",
-                    template: `
-    @if (!row.pending) {
-    <a
-      href="#"
-      [id]="'row-' + row.index + '_editing-confirm-button'"
-      class="ng2-smart-action ng2-smart-action-edit-save"
-      [innerHTML]="saveButtonContent"
-      (click)="onSave($event)"
-    ></a>
-    <a
-      href="#"
-      [id]="'row-' + row.index + '_editing-cancel-button'"
-      class="ng2-smart-action ng2-smart-action-edit-cancel"
-      [innerHTML]="cancelButtonContent"
-      (click)="onCancelEdit($event)"
-    ></a>
-    } @else {
-    <div style="display: flex;">
-      <svg
-        (click)="$event.stopPropagation()"
-        style="height: 2rem; width: 2rem;"
-        version="1.1"
-        id="L9"
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        x="0px"
-        y="0px"
-        viewBox="0 0 100 100"
-        enable-background="new 0 0 0 0"
-        xml:space="preserve"
-      >
-        <path
-          fill="#e9e9e9"
-          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
-        >
-          <animateTransform
-            attributeName="transform"
-            attributeType="XML"
-            type="rotate"
-            dur="1s"
-            from="0 50 50"
-            to="360 50 50"
-            repeatCount="indefinite"
-          />
-        </path>
-      </svg>
-      <svg
-        (click)="$event.stopPropagation()"
-        style="height: 2rem; width: 2rem; "
-        version="1.1"
-        id="L9"
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        x="0px"
-        y="0px"
-        viewBox="0 0 100 100"
-        enable-background="new 0 0 0 0"
-        xml:space="preserve"
-      >
-        <path
-          fill="#e9e9e9"
-          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
-        >
-          <animateTransform
-            attributeName="transform"
-            attributeType="XML"
-            type="rotate"
-            dur="1s"
-            from="0 50 50"
-            to="360 50 50"
-            repeatCount="indefinite"
-          />
-        </path>
-      </svg>
-    </div>
+    getColumnsStateFromSettings(columns) {
+        return (columns || this.settings().columns || []).map((column) => ({
+            key: column.key,
+            title: column.title,
+            hide: !!column.hide,
+            moveDisabled: !!column.moveDisabled,
+        }));
     }
-  `,
-                    standalone: true,
-                }]
-        }], propDecorators: { grid: [{
-                type: Input
-            }], row: [{
-                type: Input
-            }], editConfirm: [{
-                type: Input
-            }], editCancel: [{
-                type: Input
-            }] } });
+    getMergedColumnStates(newState, columnsState) {
+        const columnsSettings = columnsState || this.getColumnsStateFromSettings();
+        // merge new columns state with state from storage
+        const filtered = [];
+        newState.forEach((state) => {
+            const fined = columnsSettings.find((column) => column.title === state.title && column.key === state.key);
+            if (fined) {
+                filtered.push({ ...fined, hide: fined.moveDisabled ? fined.hide : state.hide });
+            }
+        });
+        // find new columns witch not exist in storage state
+        const newColumns = columnsSettings.filter((state) => {
+            return !filtered.some((column) => column.title === state.title && column.key === state.key);
+        });
+        return [...filtered, ...newColumns];
+    }
+    get columnStateStorageKey() {
+        return this.settings().columnSortStorageKey;
+    }
+}
 
 class TbodyCustomComponent {
     constructor() {
@@ -2265,51 +2193,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
 
 class TbodyEditDeleteComponent {
     constructor() {
+        this.cdr = inject(ChangeDetectorRef);
+        this.grid = input.required();
+        this.row = input.required();
+        this.source = input.required();
+        this.deleteConfirm = input.required();
         this.edit = output();
         this.delete = output();
-        this.editRowSelect = output();
         this.isActionEdit = false;
         this.isActionDelete = false;
-        this.editRowButtonContent = "";
-        this.deleteRowButtonContent = "";
+        this.isExternalMode = false;
+        this.editRowButtonContent = "Edit";
+        this.deleteRowButtonContent = "Delete";
+        effect(() => {
+            const settings = this.grid().settings();
+            const actions = settings.actions;
+            if (actions) {
+                this.isActionDelete = !!actions.delete;
+                this.isActionEdit = !!actions.edit;
+            }
+            this.isExternalMode = settings.mode === 'external';
+            this.editRowButtonContent = settings.edit
+                ? settings.edit.editButtonContent || "Edit"
+                : "Edit";
+            this.deleteRowButtonContent = settings.delete
+                ? settings.delete.deleteButtonContent || "Delete"
+                : "Delete";
+            this.cdr.detectChanges();
+        });
     }
     onEdit(event) {
         event.preventDefault();
         event.stopPropagation();
-        this.editRowSelect.emit(this.row);
         this.edit.emit({
-            data: this.row.getData(),
+            data: this.row().getData(),
             source: this.source,
         });
-        if (this.grid.getSetting("mode") !== "external") {
-            this.grid.edit(this.row);
+        if (!this.isExternalMode) {
+            this.grid().edit(this.row());
         }
     }
     onDelete(event) {
         event.preventDefault();
         event.stopPropagation();
-        if (this.grid.getSetting("mode") === "external") {
+        if (this.isExternalMode) {
             this.delete.emit({
-                data: this.row.getData(),
-                source: this.source,
+                data: this.row().getData(),
+                source: this.source(),
             });
         }
         else {
-            this.grid.delete(this.row, this.deleteConfirm);
+            this.grid().delete(this.row(), this.deleteConfirm());
         }
     }
-    ngOnChanges() {
-        this.isActionEdit = this.grid.getSetting("actions.edit");
-        this.isActionDelete = this.grid.getSetting("actions.delete");
-        this.editRowButtonContent = this.grid.getSetting("edit.editButtonContent");
-        this.deleteRowButtonContent = this.grid.getSetting("delete.deleteButtonContent");
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TbodyEditDeleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TbodyEditDeleteComponent, isStandalone: true, selector: "ng2-st-tbody-edit-delete", inputs: { grid: "grid", row: "row", source: "source", deleteConfirm: "deleteConfirm", editConfirm: "editConfirm" }, outputs: { edit: "edit", delete: "delete", editRowSelect: "editRowSelect" }, usesOnChanges: true, ngImport: i0, template: `
-    @if (!row.pending) { @if (isActionEdit) {
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TbodyEditDeleteComponent, isStandalone: true, selector: "ng2-st-tbody-edit-delete", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, deleteConfirm: { classPropertyName: "deleteConfirm", publicName: "deleteConfirm", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { edit: "edit", delete: "delete" }, ngImport: i0, template: `
+    @if (!row().pending) { @if (isActionEdit) {
     <a
       href="#"
-      [id]="'row-' + row.index + '_action-edit-button'"
+      [id]="'row-' + row().index + '_action-edit-button'"
       class="ng2-smart-action ng2-smart-action-edit-edit"
       [innerHTML]="editRowButtonContent"
       (click)="onEdit($event)"
@@ -2317,7 +2259,7 @@ class TbodyEditDeleteComponent {
     } @if (isActionDelete) {
     <a
       href="#"
-      [id]="'row-' + row.index + '_action-delete-button'"
+      [id]="'row-' + row().index + '_action-delete-button'"
       class="ng2-smart-action ng2-smart-action-delete-delete"
       [innerHTML]="deleteRowButtonContent"
       (click)="onDelete($event)"
@@ -2326,6 +2268,7 @@ class TbodyEditDeleteComponent {
     <div style="display: flex;">
       @if (isActionEdit) {
       <svg
+        role="none"
         (click)="$event.stopPropagation()"
         style="height: 2rem; width: 2rem;"
         version="1.1"
@@ -2355,6 +2298,7 @@ class TbodyEditDeleteComponent {
       </svg>
       } @if (isActionDelete) {
       <svg
+        role="none"
         (click)="$event.stopPropagation()"
         style="height: 2rem; width: 2rem;"
         version="1.1"
@@ -2385,17 +2329,17 @@ class TbodyEditDeleteComponent {
       }
     </div>
     }
-  `, isInline: true }); }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TbodyEditDeleteComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "ng2-st-tbody-edit-delete",
                     template: `
-    @if (!row.pending) { @if (isActionEdit) {
+    @if (!row().pending) { @if (isActionEdit) {
     <a
       href="#"
-      [id]="'row-' + row.index + '_action-edit-button'"
+      [id]="'row-' + row().index + '_action-edit-button'"
       class="ng2-smart-action ng2-smart-action-edit-edit"
       [innerHTML]="editRowButtonContent"
       (click)="onEdit($event)"
@@ -2403,7 +2347,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
     } @if (isActionDelete) {
     <a
       href="#"
-      [id]="'row-' + row.index + '_action-delete-button'"
+      [id]="'row-' + row().index + '_action-delete-button'"
       class="ng2-smart-action ng2-smart-action-delete-delete"
       [innerHTML]="deleteRowButtonContent"
       (click)="onDelete($event)"
@@ -2412,6 +2356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
     <div style="display: flex;">
       @if (isActionEdit) {
       <svg
+        role="none"
         (click)="$event.stopPropagation()"
         style="height: 2rem; width: 2rem;"
         version="1.1"
@@ -2441,6 +2386,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
       </svg>
       } @if (isActionDelete) {
       <svg
+        role="none"
         (click)="$event.stopPropagation()"
         style="height: 2rem; width: 2rem;"
         version="1.1"
@@ -2473,24 +2419,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
     }
   `,
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { grid: [{
-                type: Input
-            }], row: [{
-                type: Input
-            }], source: [{
-                type: Input
-            }], deleteConfirm: [{
-                type: Input
-            }], editConfirm: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
 class Ng2SmartTableTbodyComponent {
     constructor() {
-        this.rowClassFunction = () => "";
+        this.grid = input.required();
+        this.source = input.required();
+        this.deleteConfirm = input.required();
+        this.createConfirm = input.required();
+        this.editConfirm = input.required();
+        this.rowClassFunction = input(() => "");
         this.save = output();
-        this.cancel = output();
         this.edit = output();
         this.editCancel = output();
         this.delete = output();
@@ -2498,32 +2439,17 @@ class Ng2SmartTableTbodyComponent {
         this.edited = output();
         this.userSelectRow = output();
         this.userClickedRow = output();
-        this.editRowSelect = output();
         this.multipleSelectRow = output();
-        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");
+        this.editInputClass = computed(() => {
+            const editOptions = this.grid().settings().edit;
+            if (!editOptions) {
+                return '';
+            }
+            return editOptions.inputClass || '';
+        });
+        this.noDataMessage = computed(() => {
+            return this.grid().settings().noDataMessage || "No data found";
+        });
     }
     getVisibleCells(cells) {
         return (cells || []).filter((cell) => !cell.getColumn().hide);
@@ -2532,7 +2458,7 @@ class Ng2SmartTableTbodyComponent {
         return item?.id || index;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTbodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableTbodyComponent, isStandalone: true, 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  [class]=\"rowClassFunction(row)\"\n  [class.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.getId()) {\n  <td [class]=\"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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TbodyCustomComponent, selector: "ng2-st-tbody-custom", inputs: ["grid", "row", "source"], outputs: ["custom"] }, { kind: "component", type: TbodyEditDeleteComponent, selector: "ng2-st-tbody-edit-delete", inputs: ["grid", "row", "source", "deleteConfirm", "editConfirm"], outputs: ["edit", "delete", "editRowSelect"] }, { kind: "component", type: TbodyCreateCancelComponent, selector: "ng2-st-tbody-create-cancel", inputs: ["grid", "row", "editConfirm", "editCancel"] }, { kind: "component", type: CellComponent, selector: "ng2-smart-table-cell", inputs: ["grid", "row", "editConfirm", "createConfirm", "isNew", "cell", "inputClass", "mode", "isInEditing"], outputs: ["edited"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableTbodyComponent, isStandalone: true, selector: "[ng2-st-tbody]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, deleteConfirm: { classPropertyName: "deleteConfirm", publicName: "deleteConfirm", isSignal: true, isRequired: true, transformFunction: null }, createConfirm: { classPropertyName: "createConfirm", publicName: "createConfirm", isSignal: true, isRequired: true, transformFunction: null }, editConfirm: { classPropertyName: "editConfirm", publicName: "editConfirm", isSignal: true, isRequired: true, transformFunction: null }, rowClassFunction: { classPropertyName: "rowClassFunction", publicName: "rowClassFunction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", edit: "edit", editCancel: "editCancel", delete: "delete", custom: "custom", edited: "edited", userSelectRow: "userSelectRow", userClickedRow: "userClickedRow", multipleSelectRow: "multipleSelectRow" }, ngImport: i0, template: "@for (row of grid().getRows(); track trackByIdOrIndex($index, row)) {\n<tr\n  (click)=\"userClickedRow.emit(row)\"\n  class=\"ng2-smart-row\"\n  [class]=\"rowClassFunction()(row)\"\n  [class.selected]=\"row.isSelected\"\n>\n  @if (grid().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 (grid().actionIsOnLeft()) {\n  <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n  } @for (cell of getVisibleCells(row.cells); track cell.getId()) {\n  <td [class]=\"cell.getColumnClass()\">\n    <ng2-smart-table-cell\n      [cell]=\"cell\"\n      [inputClass]=\"editInputClass()\"\n      [isInEditing]=\"row.isInEditing\"\n    >\n    </ng2-smart-table-cell>\n  </td>\n  } @if (grid().actionIsOnRight()) {\n  <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n  }\n</tr>\n\n<ng-template #actions>\n  @if (row.isInEditing) {\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  } @if (!row.isInEditing && grid().isActionsVisible() ) {\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      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      [row]=\"row\"\n      [source]=\"source()\"\n    >\n    </ng2-st-tbody-edit-delete>\n  </td>\n  }\n</ng-template>\n} @empty {\n<tr>\n  <td colspan=\"50\">\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TbodyCustomComponent, selector: "ng2-st-tbody-custom", inputs: ["grid", "row", "source"], outputs: ["custom"] }, { kind: "component", type: TbodyEditDeleteComponent, selector: "ng2-st-tbody-edit-delete", inputs: ["grid", "row", "source", "deleteConfirm"], outputs: ["edit", "delete"] }, { kind: "component", type: TbodyCreateCancelComponent, selector: "ng2-st-tbody-create-cancel", inputs: ["grid", "row", "editConfirm", "editCancel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CellComponent, selector: "ng2-smart-table-cell", inputs: ["cell", "inputClass", "isInEditing"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTbodyComponent, decorators: [{
             type: Component,
@@ -2541,66 +2467,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         TbodyCustomComponent,
                         TbodyEditDeleteComponent,
                         TbodyCreateCancelComponent,
+                        NgTemplateOutlet,
                         CellComponent,
-                    ], 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  [class]=\"rowClassFunction(row)\"\n  [class.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.getId()) {\n  <td [class]=\"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
-            }] } });
+                    ], template: "@for (row of grid().getRows(); track trackByIdOrIndex($index, row)) {\n<tr\n  (click)=\"userClickedRow.emit(row)\"\n  class=\"ng2-smart-row\"\n  [class]=\"rowClassFunction()(row)\"\n  [class.selected]=\"row.isSelected\"\n>\n  @if (grid().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 (grid().actionIsOnLeft()) {\n  <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n  } @for (cell of getVisibleCells(row.cells); track cell.getId()) {\n  <td [class]=\"cell.getColumnClass()\">\n    <ng2-smart-table-cell\n      [cell]=\"cell\"\n      [inputClass]=\"editInputClass()\"\n      [isInEditing]=\"row.isInEditing\"\n    >\n    </ng2-smart-table-cell>\n  </td>\n  } @if (grid().actionIsOnRight()) {\n  <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n  }\n</tr>\n\n<ng-template #actions>\n  @if (row.isInEditing) {\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  } @if (!row.isInEditing && grid().isActionsVisible() ) {\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      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      [row]=\"row\"\n      [source]=\"source()\"\n    >\n    </ng2-st-tbody-edit-delete>\n  </td>\n  }\n</ng-template>\n} @empty {\n<tr>\n  <td colspan=\"50\">\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"] }]
+        }] });
 
 class FilterDefault {
     constructor() {
-        this.inputClass = '';
+        this.column = input.required();
+        this.source = input.required();
+        this.inputClass = input('');
         this.query = '';
         this.filter = output();
     }
     onFilter(query) {
-        this.source.addFilter({
-            field: this.column.id,
+        this.source().addFilter({
+            field: this.column().id,
             search: query,
-            filter: this.column.getFilterFunction(),
+            filter: this.column().getFilterFunction(),
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterDefault, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: FilterDefault, isStandalone: true, selector: "ng-component", inputs: { column: "column", source: "source", inputClass: "inputClass", query: "query" }, outputs: { filter: "filter" }, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: FilterDefault, isStandalone: true, selector: "ng-component", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { filter: "filter" }, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterDefault, decorators: [{
             type: Component,
             args: [{ template: '' }]
-        }], propDecorators: { column: [{
-                type: Input
-            }], source: [{
-                type: Input
-            }], inputClass: [{
-                type: Input
-            }], query: [{
+        }], propDecorators: { query: [{
                 type: Input
             }] } });
 
 class CustomFilterComponent extends FilterDefault {
     ngOnChanges(changes) {
         if (this.customComponent) {
-            if (this.customComponent.instance?.ngOnChanges) {
-                this.customComponent.instance?.ngOnChanges(changes);
+            if (this.customComponent?.instance &&
+                "ngOnChanges" in this.customComponent.instance) {
+                const onChanges = this.customComponent.instance.ngOnChanges;
+                onChanges(changes);
             }
             return;
         }
-        if (this.column.filter && this.column.filter.type === "custom") {
-            this.customComponent = this.dynamicTarget.createComponent(this.column.filter?.component);
+        const columnFilter = this.column().filter;
+        if (columnFilter && columnFilter.type === "custom") {
+            this.customComponent = this.dynamicTarget?.createComponent(columnFilter?.component);
+            // set @Inputs and @Outputs of custom component
+            this.customComponent?.setInput("query", this.query);
+            this.customComponent?.setInput("column", this.column());
+            this.customComponent?.setInput("source", this.source());
+            this.customComponent?.setInput("inputClass", this.inputClass());
+            this.customComponent?.instance.filter.subscribe((event) => this.onFilter(event));
         }
-        // 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));
     }
     ngOnDestroy() {
         if (this.customComponent) {
@@ -2633,11 +2549,11 @@ class CheckboxFilterComponent extends DefaultFilter {
             .pipe(debounceTime(this.delay))
             .subscribe((checked) => {
             this.filterActive = true;
-            const trueVal = (this.column.getFilterConfig() &&
-                this.column.getFilterConfig().true) ||
+            const trueVal = (this.column().getFilterConfig() &&
+                this.column().getFilterConfig().true) ||
                 true;
-            const falseVal = (this.column.getFilterConfig() &&
-                this.column.getFilterConfig().false) ||
+            const falseVal = (this.column().getFilterConfig() &&
+                this.column().getFilterConfig().false) ||
                 false;
             this.query = checked ? trueVal : falseVal;
             this.setFilter();
@@ -2655,12 +2571,12 @@ class CheckboxFilterComponent extends DefaultFilter {
     <input
       type="checkbox"
       [formControl]="inputControl"
-      [class]="inputClass"
+      [class]="inputClass()"
       class="form-control"
     />
     @if (filterActive) {
     <a href="#" (click)="resetFilter($event)">{{
-      column.getFilterConfig()?.resetText || "reset"
+      column().getFilterConfig()?.resetText || "reset"
     }}</a>
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
@@ -2673,12 +2589,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
     <input
       type="checkbox"
       [formControl]="inputControl"
-      [class]="inputClass"
+      [class]="inputClass()"
       class="form-control"
     />
     @if (filterActive) {
     <a href="#" (click)="resetFilter($event)">{{
-      column.getFilterConfig()?.resetText || "reset"
+      column().getFilterConfig()?.resetText || "reset"
     }}</a>
     }
   `,
@@ -2711,11 +2627,11 @@ class InputFilterComponent extends DefaultFilter {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: InputFilterComponent, isStandalone: true, selector: "input-filter", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
     <input
-      [class]="inputClass"
+      [class]="inputClass()"
       [formControl]="inputControl"
       class="form-control"
       type="text"
-      placeholder="{{ column.title }}"
+      placeholder="{{ column().title }}"
     />
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
@@ -2725,11 +2641,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                     selector: "input-filter",
                     template: `
     <input
-      [class]="inputClass"
+      [class]="inputClass()"
       [formControl]="inputControl"
       class="form-control"
       type="text"
-      placeholder="{{ column.title }}"
+      placeholder="{{ column().title }}"
     />
   `,
                     standalone: true,
@@ -2750,13 +2666,13 @@ class SelectFilterComponent extends DefaultFilter {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SelectFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: SelectFilterComponent, isStandalone: true, selector: "select-filter", viewQueries: [{ propertyName: "inputControl", first: true, predicate: ["inputControl"], descendants: true, read: NgControl, static: true }], usesInheritance: true, ngImport: i0, template: `
-    <select [class]="inputClass"
+    <select [class]="inputClass()"
       class="form-control"
       #inputControl
       [(ngModel)]="query">
 
-      <option value="">{{ column.getFilterConfig().selectText }}</option>
-      @for (option of column.getFilterConfig().list; track option.value) {
+      <option value="">{{ column().getFilterConfig().selectText }}</option>
+      @for (option of column().getFilterConfig().list; track option.value) {
         <option [value]="option.value">
           {{ option.title }}
         </option>
@@ -2769,13 +2685,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             args: [{
                     selector: 'select-filter',
                     template: `
-    <select [class]="inputClass"
+    <select [class]="inputClass()"
       class="form-control"
       #inputControl
       [(ngModel)]="query">
 
-      <option value="">{{ column.getFilterConfig().selectText }}</option>
-      @for (option of column.getFilterConfig().list; track option.value) {
+      <option value="">{{ column().getFilterConfig().selectText }}</option>
+      @for (option of column().getFilterConfig().list; track option.value) {
         <option [value]="option.value">
           {{ option.title }}
         </option>
@@ -2793,27 +2709,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
 class DefaultFilterComponent extends FilterDefault {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DefaultFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: DefaultFilterComponent, isStandalone: true, selector: "default-table-filter", usesInheritance: true, ngImport: i0, template: `
-    @switch (column.getFilterType()) { @case ('list') {
+    @switch (column().getFilterType()) { @case ('list') {
     <select-filter
       [query]="query"
-      [class]="inputClass"
-      [column]="column"
+      [class]="inputClass()"
+      [column]="column()"
       (filter)="onFilter($event)"
     >
     </select-filter>
     } @case ('checkbox') {
     <checkbox-filter
       [query]="query"
-      [class]="inputClass"
-      [column]="column"
+      [class]="inputClass()"
+      [column]="column()"
       (filter)="onFilter($event)"
     >
     </checkbox-filter>
     } @default {
     <input-filter
       [query]="query"
-      [class]="inputClass"
-      [column]="column"
+      [class]="inputClass()"
+      [column]="column()"
       (filter)="onFilter($event)"
     >
     </input-filter>
@@ -2825,27 +2741,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             args: [{
                     selector: "default-table-filter",
                     template: `
-    @switch (column.getFilterType()) { @case ('list') {
+    @switch (column().getFilterType()) { @case ('list') {
     <select-filter
       [query]="query"
-      [class]="inputClass"
-      [column]="column"
+      [class]="inputClass()"
+      [column]="column()"
       (filter)="onFilter($event)"
     >
     </select-filter>
     } @case ('checkbox') {
     <checkbox-filter
       [query]="query"
-      [class]="inputClass"
-      [column]="column"
+      [class]="inputClass()"
+      [column]="column()"
       (filter)="onFilter($event)"
     >
     </checkbox-filter>
     } @default {
     <input-filter
       [query]="query"
-      [class]="inputClass"
-      [column]="column"
+      [class]="inputClass()"
+      [column]="column()"
       (filter)="onFilter($event)"
     >
     </input-filter>
@@ -2866,8 +2782,8 @@ class FilterComponent extends FilterDefault {
             if (!changes['source'].firstChange && this.dataChangedSub) {
                 this.dataChangedSub.unsubscribe();
             }
-            this.dataChangedSub = this.source.onChanged().subscribe((dataChanges) => {
-                const filterConf = this.source.getFilter();
+            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
@@ -2875,7 +2791,7 @@ class FilterComponent extends FilterDefault {
                 }
                 else if (filterConf && filterConf.filters && filterConf.filters.length > 0) {
                     filterConf.filters.forEach((k, v) => {
-                        if (k.field == this.column.id) {
+                        if (k.field == this.column().id) {
                             this.query = k.search;
                         }
                     });
@@ -2885,24 +2801,24 @@ class FilterComponent extends FilterDefault {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: FilterComponent, isStandalone: true, selector: "ng2-smart-table-filter", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
-      @if (column.isFilterable) {
+      @if (column().isFilterable) {
         <div class="ng2-smart-filter">
-          @switch (column.getFilterType()) {
+          @switch (column().getFilterType()) {
             @case ('custom') {
               <custom-table-filter
                 [query]="query"
-                [column]="column"
-                [source]="source"
-                [inputClass]="inputClass"
+                [column]="column()"
+                [source]="source()"
+                [inputClass]="inputClass()"
                 (filter)="onFilter($event)">
               </custom-table-filter>
             }
             @default {
               <default-table-filter
                 [query]="query"
-                [column]="column"
-                [source]="source"
-                [inputClass]="inputClass"
+                [column]="column()"
+                [source]="source()"
+                [inputClass]="inputClass()"
                 (filter)="onFilter($event)">
               </default-table-filter>
             }
@@ -2914,24 +2830,24 @@ class FilterComponent extends FilterDefault {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng2-smart-table-filter', template: `
-      @if (column.isFilterable) {
+      @if (column().isFilterable) {
         <div class="ng2-smart-filter">
-          @switch (column.getFilterType()) {
+          @switch (column().getFilterType()) {
             @case ('custom') {
               <custom-table-filter
                 [query]="query"
-                [column]="column"
-                [source]="source"
-                [inputClass]="inputClass"
+                [column]="column()"
+                [source]="source()"
+                [inputClass]="inputClass()"
                 (filter)="onFilter($event)">
               </custom-table-filter>
             }
             @default {
               <default-table-filter
                 [query]="query"
-                [column]="column"
-                [source]="source"
-                [inputClass]="inputClass"
+                [column]="column()"
+                [source]="source()"
+                [inputClass]="inputClass()"
                 (filter)="onFilter($event)">
               </default-table-filter>
             }
@@ -2943,37 +2859,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
 
 class AddButtonComponent {
     constructor() {
-        this.ref = inject(ElementRef);
+        this.grid = input.required();
+        this.source = input.required();
         this.create = output();
-        this.isActionAdd = false;
-        this.addNewButtonContent = "";
-    }
-    ngAfterViewInit() {
-        this.ref.nativeElement.classList.add("ng2-smart-actions-title", "ng2-smart-actions-title-add");
-    }
-    ngOnChanges() {
-        this.isActionAdd = this.grid.getSetting("actions.add");
-        this.addNewButtonContent = this.grid.getSetting("add.addButtonContent");
+        this.isActionAdd = computed(() => {
+            const actions = this.grid().settings().actions;
+            if (!actions) {
+                return false;
+            }
+            return !!actions.add;
+        });
+        this.addNewButtonContent = computed(() => {
+            const addParams = this.grid().settings()?.add;
+            if (!addParams) {
+                return "Add New";
+            }
+            return addParams?.addButtonContent || "Add New";
+        });
     }
     onAdd(event) {
         event.preventDefault();
         event.stopPropagation();
-        if (this.grid.getSetting("mode") === "external") {
+        if (this.grid().getSetting("mode") === "external") {
             this.create.emit({
-                source: this.source,
+                source: this.source(),
             });
         }
         else {
-            this.grid.createFormShown = true;
+            this.grid().createFormShown = true;
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AddButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AddButtonComponent, isStandalone: true, selector: "[ng2-st-add-button]", inputs: { grid: "grid", source: "source" }, outputs: { create: "create" }, usesOnChanges: true, ngImport: i0, template: `
-    @if (isActionAdd) {
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AddButtonComponent, isStandalone: true, selector: "[ng2-st-add-button]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { create: "create" }, host: { classAttribute: "ng2-smart-actions-title ng2-smart-actions-title-add" }, ngImport: i0, template: `
+    @if (isActionAdd()) {
     <a
       href="#"
       class="ng2-smart-action ng2-smart-action-add-add"
-      [innerHTML]="addNewButtonContent"
+      [innerHTML]="addNewButtonContent()"
       (click)="onAdd($event)"
     ></a>
     }
@@ -2984,91 +2906,99 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             args: [{
                     selector: "[ng2-st-add-button]",
                     template: `
-    @if (isActionAdd) {
+    @if (isActionAdd()) {
     <a
       href="#"
       class="ng2-smart-action ng2-smart-action-add-add"
-      [innerHTML]="addNewButtonContent"
+      [innerHTML]="addNewButtonContent()"
       (click)="onAdd($event)"
     ></a>
     }
   `,
+                    host: {
+                        class: "ng2-smart-actions-title ng2-smart-actions-title-add",
+                    },
                     standalone: true,
                 }]
-        }], propDecorators: { grid: [{
-                type: Input
-            }], source: [{
-                type: Input
-            }] } });
+        }] });
 
-class TheadFitlersRowComponent {
+class TheadFiltersRowComponent {
     constructor() {
+        this.grid = input.required();
+        this.source = input.required();
         this.create = output();
         this.filter = output();
-        this.isMultiSelectVisible = false;
-        this.showActionColumnLeft = false;
-        this.showActionColumnRight = false;
-        this.filterInputClass = "";
-    }
-    ngOnChanges() {
-        this.isMultiSelectVisible = this.grid.isMultiSelectVisible();
-        this.showActionColumnLeft = this.grid.showActionColumn("left");
-        this.showActionColumnRight = this.grid.showActionColumn("right");
-        this.filterInputClass = this.grid.getSetting("filter.inputClass", "");
-    }
-    getVisibleColumns(columns) {
-        return (columns || []).filter((column) => !column.hide);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadFitlersRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TheadFitlersRowComponent, isStandalone: true, selector: "[ng2-st-thead-filters-row]", inputs: { grid: "grid", source: "source" }, outputs: { create: "create", filter: "filter" }, usesOnChanges: true, ngImport: i0, template: `
-    @if (isMultiSelectVisible) {
+        this.filterInputClass = computed(() => {
+            const filterOptions = this.grid().settings()?.filter;
+            if (!filterOptions) {
+                return "";
+            }
+            return filterOptions.inputClass || "";
+        });
+    }
+    getVisibleColumns() {
+        return (this.grid().getColumns() || []).filter((column) => !column.hide);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadFiltersRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TheadFiltersRowComponent, isStandalone: true, selector: "[ng2-st-thead-filters-row]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { create: "create", filter: "filter" }, ngImport: i0, template: `
+    @if (grid().isMultiSelectVisible()) {
     <th></th>
-    } @if (showActionColumnLeft) {
-    <th ng2-st-add-button [grid]="grid" (create)="create.emit($event)"></th>
-    } @for (column of getVisibleColumns(grid.getColumns()); track column.id) {
+    } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
+    <th
+      ng2-st-add-button
+      [source]="source()"
+      [grid]="grid()"
+      (create)="create.emit($event)"
+    ></th>
+    } @for (column of getVisibleColumns(); track column.id) {
     <th class="ng2-smart-th {{ column.id }}">
       <ng2-smart-table-filter
-        [source]="source"
+        [source]="source()"
         [column]="column"
-        [inputClass]="filterInputClass"
+        [inputClass]="filterInputClass()"
         (filter)="filter.emit($event)"
       >
       </ng2-smart-table-filter>
     </th>
-    } @if (showActionColumnRight) {
+    } @if (grid().actionIsOnRight() && grid().isActionsVisible()) {
     <th
       ng2-st-add-button
-      [grid]="grid"
-      [source]="source"
+      [grid]="grid()"
+      [source]="source()"
       (create)="create.emit($event)"
     ></th>
     }
   `, isInline: true, dependencies: [{ kind: "component", type: AddButtonComponent, selector: "[ng2-st-add-button]", inputs: ["grid", "source"], outputs: ["create"] }, { kind: "component", type: FilterComponent, selector: "ng2-smart-table-filter" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadFitlersRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadFiltersRowComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "[ng2-st-thead-filters-row]",
                     template: `
-    @if (isMultiSelectVisible) {
+    @if (grid().isMultiSelectVisible()) {
     <th></th>
-    } @if (showActionColumnLeft) {
-    <th ng2-st-add-button [grid]="grid" (create)="create.emit($event)"></th>
-    } @for (column of getVisibleColumns(grid.getColumns()); track column.id) {
+    } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
+    <th
+      ng2-st-add-button
+      [source]="source()"
+      [grid]="grid()"
+      (create)="create.emit($event)"
+    ></th>
+    } @for (column of getVisibleColumns(); track column.id) {
     <th class="ng2-smart-th {{ column.id }}">
       <ng2-smart-table-filter
-        [source]="source"
+        [source]="source()"
         [column]="column"
-        [inputClass]="filterInputClass"
+        [inputClass]="filterInputClass()"
         (filter)="filter.emit($event)"
       >
       </ng2-smart-table-filter>
     </th>
-    } @if (showActionColumnRight) {
+    } @if (grid().actionIsOnRight() && grid().isActionsVisible()) {
     <th
       ng2-st-add-button
-      [grid]="grid"
-      [source]="source"
+      [grid]="grid()"
+      [source]="source()"
       (create)="create.emit($event)"
     ></th>
     }
@@ -3076,35 +3006,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                     standalone: true,
                     imports: [AddButtonComponent, FilterComponent],
                 }]
-        }], propDecorators: { grid: [{
-                type: Input
-            }], source: [{
-                type: Input
-            }] } });
+        }] });
 
 class ActionsComponent {
     constructor() {
+        this.grid = input.required();
         this.create = output();
-        this.createButtonContent = "";
-        this.cancelButtonContent = "";
-    }
-    ngOnChanges() {
-        this.createButtonContent = this.grid.getSetting("add.createButtonContent");
-        this.cancelButtonContent = this.grid.getSetting("add.cancelButtonContent");
+        this.createButtonContent = computed(() => {
+            const addOptions = this.grid().settings().add;
+            if (!addOptions) {
+                return "Create";
+            }
+            return addOptions?.createButtonContent || "Create";
+        });
+        this.cancelButtonContent = computed(() => {
+            const addOptions = this.grid().settings().add;
+            if (!addOptions) {
+                return "Cancel";
+            }
+            return addOptions?.cancelButtonContent || "Cancel";
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: ActionsComponent, isStandalone: true, selector: "ng2-st-actions", inputs: { grid: "grid" }, outputs: { create: "create" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: ActionsComponent, isStandalone: true, selector: "ng2-st-actions", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { create: "create" }, ngImport: i0, template: `
     <a
       href="#"
       class="ng2-smart-action ng2-smart-action-add-create"
-      [innerHTML]="createButtonContent"
+      [innerHTML]="createButtonContent()"
       (click)="$event.preventDefault(); create.emit($event)"
     ></a>
     <a
       href="#"
       class="ng2-smart-action ng2-smart-action-add-cancel"
-      [innerHTML]="cancelButtonContent"
-      (click)="$event.preventDefault(); grid.createFormShown = false"
+      [innerHTML]="cancelButtonContent()"
+      (click)="$event.preventDefault(); grid().createFormShown = false"
     ></a>
   `, isInline: true }); }
 }
@@ -3116,110 +3051,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
     <a
       href="#"
       class="ng2-smart-action ng2-smart-action-add-create"
-      [innerHTML]="createButtonContent"
+      [innerHTML]="createButtonContent()"
       (click)="$event.preventDefault(); create.emit($event)"
     ></a>
     <a
       href="#"
       class="ng2-smart-action ng2-smart-action-add-cancel"
-      [innerHTML]="cancelButtonContent"
-      (click)="$event.preventDefault(); grid.createFormShown = false"
+      [innerHTML]="cancelButtonContent()"
+      (click)="$event.preventDefault(); grid().createFormShown = false"
     ></a>
   `,
                     standalone: true,
                 }]
-        }], propDecorators: { grid: [{
-                type: Input
-            }] } });
+        }] });
 
 class TheadFormRowComponent {
     constructor() {
+        this.grid = input.required();
         this.create = output();
-        this.isMultiSelectVisible = false;
-        this.showActionColumnLeft = false;
-        this.showActionColumnRight = false;
-        this.addInputClass = "";
+        this.addInputClass = computed(() => {
+            const addOptions = this.grid().settings()?.add;
+            if (!addOptions) {
+                return "";
+            }
+            return addOptions.inputClass || "";
+        });
     }
     onCreate(event) {
         event.stopPropagation();
-        this.grid.create(this.grid.getNewRow(), this.createConfirm);
-    }
-    ngOnChanges() {
-        this.isMultiSelectVisible = this.grid.isMultiSelectVisible();
-        this.showActionColumnLeft = this.grid.showActionColumn("left");
-        this.showActionColumnRight = this.grid.showActionColumn("right");
-        this.addInputClass = this.grid.getSetting("add.inputClass", "");
+        this.grid().create(this.grid().getNewRow(), this.createConfirm);
     }
-    getVisibleCells(cells) {
-        return (cells || []).filter((cell) => !cell.getColumn().hide);
+    getVisibleCells() {
+        return (this.grid().getNewRow().getCells() || []).filter((cell) => !cell.getColumn().hide);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadFormRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TheadFormRowComponent, isStandalone: true, selector: "[ng2-st-thead-form-row]", inputs: { grid: "grid", row: "row", createConfirm: "createConfirm" }, outputs: { create: "create" }, usesOnChanges: true, ngImport: i0, template: `
-    @if (grid.isMultiSelectVisible()) {
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TheadFormRowComponent, isStandalone: true, selector: "[ng2-st-thead-form-row]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, createConfirm: { classPropertyName: "createConfirm", publicName: "createConfirm", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { create: "create" }, ngImport: i0, template: `
+    @if (grid().isMultiSelectVisible()) {
     <td></td>
-    } @if (showActionColumnLeft) {
+    } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
     <td class="ng2-smart-actions">
       <ng2-st-actions
-        [grid]="grid"
+        [grid]="grid()"
         (create)="onCreate($event)"
       ></ng2-st-actions>
     </td>
-    } @for (cell of getVisibleCells(grid.getNewRow().getCells()); track
-    cell.getId()) {
+    } @for (cell of getVisibleCells(); track cell.getId()) {
     <td>
       <ng2-smart-table-cell
         [cell]="cell"
-        [grid]="grid"
-        [isNew]="true"
-        [createConfirm]="createConfirm"
-        [inputClass]="addInputClass"
-        [isInEditing]="grid.getNewRow().isInEditing"
-        (edited)="onCreate($event)"
+        [inputClass]="addInputClass()"
+        [isInEditing]="grid().getNewRow().isInEditing"
       >
       </ng2-smart-table-cell>
     </td>
-    } @if (showActionColumnRight) {
+    } @if (grid().actionIsOnRight() && grid().isActionsVisible()) {
     <td class="ng2-smart-actions">
       <ng2-st-actions
-        [grid]="grid"
+        [grid]="grid()"
         (create)="onCreate($event)"
       ></ng2-st-actions>
     </td>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: ActionsComponent, selector: "ng2-st-actions", inputs: ["grid"], outputs: ["create"] }, { kind: "component", type: CellComponent, selector: "ng2-smart-table-cell", inputs: ["grid", "row", "editConfirm", "createConfirm", "isNew", "cell", "inputClass", "mode", "isInEditing"], outputs: ["edited"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: ActionsComponent, selector: "ng2-st-actions", inputs: ["grid"], outputs: ["create"] }, { kind: "component", type: CellComponent, selector: "ng2-smart-table-cell", inputs: ["cell", "inputClass", "isInEditing"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadFormRowComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "[ng2-st-thead-form-row]",
                     template: `
-    @if (grid.isMultiSelectVisible()) {
+    @if (grid().isMultiSelectVisible()) {
     <td></td>
-    } @if (showActionColumnLeft) {
+    } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
     <td class="ng2-smart-actions">
       <ng2-st-actions
-        [grid]="grid"
+        [grid]="grid()"
         (create)="onCreate($event)"
       ></ng2-st-actions>
     </td>
-    } @for (cell of getVisibleCells(grid.getNewRow().getCells()); track
-    cell.getId()) {
+    } @for (cell of getVisibleCells(); track cell.getId()) {
     <td>
       <ng2-smart-table-cell
         [cell]="cell"
-        [grid]="grid"
-        [isNew]="true"
-        [createConfirm]="createConfirm"
-        [inputClass]="addInputClass"
-        [isInEditing]="grid.getNewRow().isInEditing"
-        (edited)="onCreate($event)"
+        [inputClass]="addInputClass()"
+        [isInEditing]="grid().getNewRow().isInEditing"
       >
       </ng2-smart-table-cell>
     </td>
-    } @if (showActionColumnRight) {
+    } @if (grid().actionIsOnRight() && grid().isActionsVisible()) {
     <td class="ng2-smart-actions">
       <ng2-st-actions
-        [grid]="grid"
+        [grid]="grid()"
         (create)="onCreate($event)"
       ></ng2-st-actions>
     </td>
@@ -3228,38 +3149,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                     standalone: true,
                     imports: [ActionsComponent, CellComponent],
                 }]
-        }], propDecorators: { grid: [{
-                type: Input
-            }], row: [{
-                type: Input
-            }], createConfirm: [{
+        }], propDecorators: { createConfirm: [{
                 type: Input
             }] } });
 
 class ActionsTitleComponent {
     constructor() {
-        this.ref = inject(ElementRef);
-        this.actionsColumnTitle = "";
-    }
-    ngAfterViewInit() {
-        this.ref.nativeElement.classList.add("ng2-smart-actions");
-    }
-    ngOnChanges() {
-        this.actionsColumnTitle = this.grid.getSetting("actions.columnTitle");
+        this.grid = input.required();
+        this.actionsColumnTitle = computed(() => {
+            const actions = this.grid().settings().actions;
+            if (!actions) {
+                return "Actions";
+            }
+            return actions.columnTitle || "Actions";
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ActionsTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: ActionsTitleComponent, isStandalone: true, selector: "[ng2-st-actions-title]", inputs: { grid: "grid" }, usesOnChanges: true, ngImport: i0, template: ` <div class="ng2-smart-title">{{ actionsColumnTitle }}</div> `, isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: ActionsTitleComponent, isStandalone: true, selector: "[ng2-st-actions-title]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "ng2-smart-actions" }, ngImport: i0, template: ` <div class="ng2-smart-title">{{ actionsColumnTitle() }}</div> `, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ActionsTitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "[ng2-st-actions-title]",
-                    template: ` <div class="ng2-smart-title">{{ actionsColumnTitle }}</div> `,
+                    template: ` <div class="ng2-smart-title">{{ actionsColumnTitle() }}</div> `,
                     standalone: true,
+                    host: {
+                        class: "ng2-smart-actions",
+                    },
                 }]
-        }], propDecorators: { grid: [{
-                type: Input
-            }] } });
+        }] });
 
 class CheckboxSelectAllComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CheckboxSelectAllComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -3404,45 +3322,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
 
 class TheadTitlesRowComponent {
     constructor() {
+        this.grid = input.required();
+        this.source = input.required();
         this.sort = output();
         this.selectAllRows = output();
-        this.isMultiSelectVisible = false;
-        this.showActionColumnLeft = false;
-        this.showActionColumnRight = false;
     }
-    ngOnChanges() {
-        this.isMultiSelectVisible = this.grid.isMultiSelectVisible();
-        this.showActionColumnLeft = this.grid.showActionColumn("left");
-        this.showActionColumnRight = this.grid.showActionColumn("right");
-    }
-    getVisibleColumns(columns) {
-        return (columns || []).filter((column) => !column.hide);
+    getVisibleColumns() {
+        return (this.grid().getColumns() || []).filter((column) => !column.hide);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadTitlesRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TheadTitlesRowComponent, isStandalone: true, selector: "[ng2-st-thead-titles-row]", inputs: { grid: "grid", source: "source" }, outputs: { sort: "sort", selectAllRows: "selectAllRows" }, usesOnChanges: true, ngImport: i0, template: `
-    @if (isMultiSelectVisible) {
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TheadTitlesRowComponent, isStandalone: true, selector: "[ng2-st-thead-titles-row]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { sort: "sort", selectAllRows: "selectAllRows" }, ngImport: i0, template: `
+    @if (grid().isMultiSelectVisible()) {
     <th
       ng2-st-checkbox-select-all
-      [grid]="grid"
-      [source]="source"
+      [grid]="grid()"
+      [source]="source()"
       (click)="selectAllRows.emit($event)"
     ></th>
-    } @if (showActionColumnLeft) {
-    <th ng2-st-actions-title [grid]="grid"></th>
-    } @for (column of getVisibleColumns(grid.getColumns()); track column.id) {
+    } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
+
+    <th ng2-st-actions-title [grid]="grid()"></th>
+    } @for (column of getVisibleColumns(); track column.id) {
     <th
       class="ng2-smart-th {{ column.id }}"
       [class]="column.class"
       [style.width]="column.width"
     >
       <ng2-st-column-title
-        [source]="source"
+        [source]="source()"
         [column]="column"
         (sort)="sort.emit($event)"
       ></ng2-st-column-title>
     </th>
-    } @if (showActionColumnRight) {
-    <th ng2-st-actions-title [grid]="grid"></th>
+    } @if (grid().actionIsOnRight() && grid().isActionsVisible()) {
+    <th ng2-st-actions-title [grid]="grid()"></th>
     }
   `, isInline: true, dependencies: [{ kind: "component", type: CheckboxSelectAllComponent, selector: "[ng2-st-checkbox-select-all]", inputs: ["grid", "source"] }, { kind: "component", type: ActionsTitleComponent, selector: "[ng2-st-actions-title]", inputs: ["grid"] }, { kind: "component", type: ColumnTitleComponent, selector: "ng2-st-column-title", inputs: ["column", "source"], outputs: ["sort"] }] }); }
 }
@@ -3451,29 +3364,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             args: [{
                     selector: "[ng2-st-thead-titles-row]",
                     template: `
-    @if (isMultiSelectVisible) {
+    @if (grid().isMultiSelectVisible()) {
     <th
       ng2-st-checkbox-select-all
-      [grid]="grid"
-      [source]="source"
+      [grid]="grid()"
+      [source]="source()"
       (click)="selectAllRows.emit($event)"
     ></th>
-    } @if (showActionColumnLeft) {
-    <th ng2-st-actions-title [grid]="grid"></th>
-    } @for (column of getVisibleColumns(grid.getColumns()); track column.id) {
+    } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
+
+    <th ng2-st-actions-title [grid]="grid()"></th>
+    } @for (column of getVisibleColumns(); track column.id) {
     <th
       class="ng2-smart-th {{ column.id }}"
       [class]="column.class"
       [style.width]="column.width"
     >
       <ng2-st-column-title
-        [source]="source"
+        [source]="source()"
         [column]="column"
         (sort)="sort.emit($event)"
       ></ng2-st-column-title>
     </th>
-    } @if (showActionColumnRight) {
-    <th ng2-st-actions-title [grid]="grid"></th>
+    } @if (grid().actionIsOnRight() && grid().isActionsVisible()) {
+    <th ng2-st-actions-title [grid]="grid()"></th>
     }
   `,
                     standalone: true,
@@ -3483,36 +3397,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         ColumnTitleComponent,
                     ],
                 }]
-        }], propDecorators: { grid: [{
-                type: Input
-            }], source: [{
-                type: Input
-            }] } });
+        }] });
 
 class Ng2SmartTableTheadComponent {
     constructor() {
+        this.grid = input.required();
+        this.source = input.required();
         this.sort = output();
         this.selectAllRows = output();
         this.create = output();
         this.filter = output();
-        this.isHideHeader = false;
-        this.isHideSubHeader = false;
-    }
-    ngOnChanges() {
-        this.isHideHeader = this.grid.getSetting('hideHeader', false);
-        this.isHideSubHeader = this.grid.getSetting('hideSubHeader', false);
+        this.isHideHeader = computed(() => {
+            return this.grid().settings()?.hideHeader || false;
+        });
+        this.isHideSubHeader = computed(() => {
+            return this.grid().settings()?.hideSubHeader || false;
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableTheadComponent, isStandalone: true, 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: TheadTitlesRowComponent, selector: "[ng2-st-thead-titles-row]", inputs: ["grid", "source"], outputs: ["sort", "selectAllRows"] }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableTheadComponent, isStandalone: true, selector: "[ng2-st-thead]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, createConfirm: { classPropertyName: "createConfirm", publicName: "createConfirm", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { sort: "sort", selectAllRows: "selectAllRows", create: "create", filter: "filter" }, 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: TheadTitlesRowComponent, selector: "[ng2-st-thead-titles-row]", inputs: ["grid", "source"], outputs: ["sort", "selectAllRows"] }, { kind: "component", type: TheadFiltersRowComponent, selector: "[ng2-st-thead-filters-row]", inputs: ["grid", "source"], outputs: ["create", "filter"] }, { kind: "component", type: TheadFormRowComponent, selector: "[ng2-st-thead-form-row]", inputs: ["grid", "createConfirm"], outputs: ["create"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTheadComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[ng2-st-thead]', standalone: true, imports: [TheadTitlesRowComponent, TheadFitlersRowComponent, TheadFormRowComponent], 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: [{
+            args: [{ selector: "[ng2-st-thead]", standalone: true, imports: [
+                        TheadTitlesRowComponent,
+                        TheadFiltersRowComponent,
+                        TheadFormRowComponent,
+                    ], 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: { createConfirm: [{
                 type: Input
             }] } });
 
@@ -3529,66 +3441,26 @@ class Ng2SmartTableComponent {
         this.deleteConfirm = output();
         this.editConfirm = output();
         this.createConfirm = output();
-        this.rowHover = output();
         this.tableClass = "";
         this.tableId = "";
         this.perPageSelect = [];
-        this.isHideHeader = false;
-        this.isHideSubHeader = false;
         this.isPagerDisplay = false;
-        this.rowClassFunction = () => "";
-        this.defaultSettings = {
-            mode: "inline", // inline|external|click-to-edit
-            selectMode: "single", // single|multi
-            selectedRowIndex: -1,
-            switchPageToSelectedRowPage: false,
-            hideHeader: false,
-            hideSubHeader: false,
-            actions: {
-                columnTitle: "Actions",
-                add: true,
-                edit: true,
-                delete: true,
-                custom: [],
-                position: "left", // left|right
-            },
-            filter: {
-                inputClass: "",
-            },
-            edit: {
-                inputClass: "",
-                editButtonContent: "Edit",
-                saveButtonContent: "Update",
-                cancelButtonContent: "Cancel",
-                confirmSave: false,
-            },
-            add: {
-                inputClass: "",
-                addButtonContent: "Add New",
-                createButtonContent: "Create",
-                cancelButtonContent: "Cancel",
-                confirmCreate: false,
-            },
-            delete: {
-                deleteButtonContent: "Delete",
-                confirmDelete: false,
-            },
-            attr: {
-                id: "",
-                class: "",
-            },
-            noDataMessage: "No data found",
-            columns: [],
-            pager: false,
-            rowClassFunction: () => "",
-        };
+        this.rowClassFunction = () => '';
+        effect(() => {
+            const settings = this.grid.settings();
+            this.tableId = settings.attr?.id || getRandomId();
+            this.tableClass = settings.attr?.class || '';
+            this.isPagerDisplay = this.grid.getSetting("pager.display", false);
+            this.perPageSelect = this.grid.getSetting("pager.perPageSelect");
+            this.rowClassFunction = settings.rowClassFunction || (() => "");
+        });
     }
-    ngOnChanges(changes) {
+    ngOnChanges({ settings, source }) {
         if (this.grid) {
-            if (changes["settings"]) {
-                this.grid.setSettings(this.prepareSettings());
+            if (settings) {
+                this.grid.setSettings(this.settings);
             }
-            if (changes["source"]) {
+            if (source) {
                 this.source = this.prepareSource();
                 this.grid.setSource(this.source);
             }
@@ -3596,13 +3468,6 @@ class Ng2SmartTableComponent {
         else {
             this.initGrid();
         }
-        this.tableId = this.grid.getSetting("attr.id");
-        this.tableClass = this.grid.getSetting("attr.class");
-        this.isHideHeader = this.grid.getSetting("hideHeader");
-        this.isHideSubHeader = this.grid.getSetting("hideSubHeader");
-        this.isPagerDisplay = this.grid.getSetting("pager.display", false);
-        this.perPageSelect = this.grid.getSetting("pager.perPageSelect");
-        this.rowClassFunction = this.grid.getSetting("rowClassFunction", () => "");
     }
     multipleSelectRow(row) {
         this.grid.multipleSelectRow(row);
@@ -3623,7 +3488,7 @@ class Ng2SmartTableComponent {
     }
     initGrid() {
         this.source = this.prepareSource();
-        this.grid = new Grid(this.source, this.prepareSettings());
+        this.grid = new Grid(this.source, this.settings);
         this.grid.setColumnsSortedEmitter(this.columnsSorted);
     }
     prepareSource() {
@@ -3632,9 +3497,6 @@ class Ng2SmartTableComponent {
         }
         return new LocalDataSource();
     }
-    prepareSettings() {
-        return deepExtend({}, this.defaultSettings, this.settings);
-    }
     emitUserSelectRow(row) {
         this.multiRowSelect.emit({
             data: row ? row.getData() : null,
@@ -3644,7 +3506,7 @@ class Ng2SmartTableComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableComponent, isStandalone: true, selector: "ng2-smart-table", inputs: { source: "source", settings: "settings" }, outputs: { multiRowSelect: "multiRowSelect", rowClicked: "rowClicked", columnsSorted: "columnsSorted", delete: "delete", edit: "edit", editCancel: "editCancel", create: "create", custom: "custom", deleteConfirm: "deleteConfirm", editConfirm: "editConfirm", createConfirm: "createConfirm", rowHover: "rowHover" }, usesOnChanges: true, ngImport: i0, template: "<table [id]=\"tableId\" [class]=\"tableClass\">\n\n  @if (!isHideHeader || !isHideSubHeader) {\n    <thead ng2-st-thead\n      [grid]=\"grid\"\n      [source]=\"source\"\n      [createConfirm]=\"createConfirm\"\n      (create)=\"create.emit($event)\"\n      (selectAllRows)=\"onSelectAllRows()\">\n    </thead>\n  }\n\n  <tbody ng2-st-tbody [grid]=\"grid\"\n    [source]=\"source\"\n    [deleteConfirm]=\"deleteConfirm\"\n    [editConfirm]=\"editConfirm\"\n    [rowClassFunction]=\"rowClassFunction\"\n    (edit)=\"edit.emit($event)\"\n    (editCancel)=\"editCancel.emit($event)\"\n    (delete)=\"delete.emit($event)\"\n    (custom)=\"custom.emit($event)\"\n    (userClickedRow)=\"emitUserRowClicked($event)\"\n    (multipleSelectRow)=\"multipleSelectRow($event)\">\n  </tbody>\n\n</table>\n\n@if (isPagerDisplay) {\n  <ng2-smart-table-pager\n    [source]=\"source\"\n    [perPageSelect]=\"perPageSelect\">\n  </ng2-smart-table-pager>\n}\n", styles: [":host{font-size:1rem}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep button,:host ::ng-deep input,:host ::ng-deep optgroup,:host ::ng-deep select,:host ::ng-deep textarea{color:inherit;font:inherit;margin:0}:host ::ng-deep table{line-height:1.5em;border-collapse:collapse;border-spacing:0;display:table;width:100%;max-width:100%;word-break:normal;word-break:keep-all;overflow:auto}:host ::ng-deep table tr th{font-weight:700}:host ::ng-deep table tr section{font-size:.75em;font-weight:700}:host ::ng-deep table tr td,:host ::ng-deep table tr th{font-size:.875em;margin:0;padding:.5em 1em}:host ::ng-deep a{color:#1e6bb8;text-decoration:none}:host ::ng-deep a:hover{text-decoration:underline}\n"], dependencies: [{ kind: "component", type: Ng2SmartTableTheadComponent, selector: "[ng2-st-thead]", inputs: ["grid", "source", "createConfirm"], outputs: ["sort", "selectAllRows", "create", "filter"] }, { kind: "component", type: Ng2SmartTableTbodyComponent, selector: "[ng2-st-tbody]", inputs: ["grid", "source", "deleteConfirm", "editConfirm", "rowClassFunction"], outputs: ["save", "cancel", "edit", "editCancel", "delete", "custom", "edited", "userSelectRow", "userClickedRow", "editRowSelect", "multipleSelectRow"] }, { kind: "component", type: PagerComponent, selector: "ng2-smart-table-pager", inputs: ["source", "perPageSelect"], outputs: ["changePage"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableComponent, isStandalone: true, selector: "ng2-smart-table", inputs: { source: "source", settings: "settings" }, outputs: { multiRowSelect: "multiRowSelect", rowClicked: "rowClicked", columnsSorted: "columnsSorted", delete: "delete", edit: "edit", editCancel: "editCancel", create: "create", custom: "custom", deleteConfirm: "deleteConfirm", editConfirm: "editConfirm", createConfirm: "createConfirm" }, usesOnChanges: true, ngImport: i0, template: "<table [id]=\"tableId\" [class]=\"tableClass\">\n  <thead\n    ng2-st-thead\n    [grid]=\"grid\"\n    [source]=\"source\"\n    [createConfirm]=\"createConfirm\"\n    (create)=\"create.emit($event)\"\n    (selectAllRows)=\"onSelectAllRows()\"\n  ></thead>\n\n  <tbody\n    ng2-st-tbody\n    [grid]=\"grid\"\n    [source]=\"source\"\n    [deleteConfirm]=\"deleteConfirm\"\n    [editConfirm]=\"editConfirm\"\n    [createConfirm]=\"createConfirm\"\n    [rowClassFunction]=\"rowClassFunction\"\n    (edit)=\"edit.emit($event)\"\n    (editCancel)=\"editCancel.emit($event)\"\n    (delete)=\"delete.emit($event)\"\n    (custom)=\"custom.emit($event)\"\n    (userClickedRow)=\"emitUserRowClicked($event)\"\n    (multipleSelectRow)=\"multipleSelectRow($event)\"\n  ></tbody>\n</table>\n\n@if (isPagerDisplay) {\n<ng2-smart-table-pager [source]=\"source\" [perPageSelect]=\"perPageSelect\">\n</ng2-smart-table-pager>\n}\n", styles: [":host{font-size:1rem}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep button,:host ::ng-deep input,:host ::ng-deep optgroup,:host ::ng-deep select,:host ::ng-deep textarea{color:inherit;font:inherit;margin:0}:host ::ng-deep table{line-height:1.5em;border-collapse:collapse;border-spacing:0;display:table;width:100%;max-width:100%;word-break:normal;word-break:keep-all;overflow:auto}:host ::ng-deep table tr th{font-weight:700}:host ::ng-deep table tr section{font-size:.75em;font-weight:700}:host ::ng-deep table tr td,:host ::ng-deep table tr th{font-size:.875em;margin:0;padding:.5em 1em}:host ::ng-deep a{color:#1e6bb8;text-decoration:none}:host ::ng-deep a:hover{text-decoration:underline}\n"], dependencies: [{ kind: "component", type: Ng2SmartTableTheadComponent, selector: "[ng2-st-thead]", inputs: ["grid", "source", "createConfirm"], outputs: ["sort", "selectAllRows", "create", "filter"] }, { kind: "component", type: Ng2SmartTableTbodyComponent, selector: "[ng2-st-tbody]", inputs: ["grid", "source", "deleteConfirm", "createConfirm", "editConfirm", "rowClassFunction"], outputs: ["save", "edit", "editCancel", "delete", "custom", "edited", "userSelectRow", "userClickedRow", "multipleSelectRow"] }, { kind: "component", type: PagerComponent, selector: "ng2-smart-table-pager", inputs: ["source", "perPageSelect"], outputs: ["changePage"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableComponent, decorators: [{
             type: Component,
@@ -3652,11 +3514,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         Ng2SmartTableTheadComponent,
                         Ng2SmartTableTbodyComponent,
                         PagerComponent,
-                    ], template: "<table [id]=\"tableId\" [class]=\"tableClass\">\n\n  @if (!isHideHeader || !isHideSubHeader) {\n    <thead ng2-st-thead\n      [grid]=\"grid\"\n      [source]=\"source\"\n      [createConfirm]=\"createConfirm\"\n      (create)=\"create.emit($event)\"\n      (selectAllRows)=\"onSelectAllRows()\">\n    </thead>\n  }\n\n  <tbody ng2-st-tbody [grid]=\"grid\"\n    [source]=\"source\"\n    [deleteConfirm]=\"deleteConfirm\"\n    [editConfirm]=\"editConfirm\"\n    [rowClassFunction]=\"rowClassFunction\"\n    (edit)=\"edit.emit($event)\"\n    (editCancel)=\"editCancel.emit($event)\"\n    (delete)=\"delete.emit($event)\"\n    (custom)=\"custom.emit($event)\"\n    (userClickedRow)=\"emitUserRowClicked($event)\"\n    (multipleSelectRow)=\"multipleSelectRow($event)\">\n  </tbody>\n\n</table>\n\n@if (isPagerDisplay) {\n  <ng2-smart-table-pager\n    [source]=\"source\"\n    [perPageSelect]=\"perPageSelect\">\n  </ng2-smart-table-pager>\n}\n", styles: [":host{font-size:1rem}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep button,:host ::ng-deep input,:host ::ng-deep optgroup,:host ::ng-deep select,:host ::ng-deep textarea{color:inherit;font:inherit;margin:0}:host ::ng-deep table{line-height:1.5em;border-collapse:collapse;border-spacing:0;display:table;width:100%;max-width:100%;word-break:normal;word-break:keep-all;overflow:auto}:host ::ng-deep table tr th{font-weight:700}:host ::ng-deep table tr section{font-size:.75em;font-weight:700}:host ::ng-deep table tr td,:host ::ng-deep table tr th{font-size:.875em;margin:0;padding:.5em 1em}:host ::ng-deep a{color:#1e6bb8;text-decoration:none}:host ::ng-deep a:hover{text-decoration:underline}\n"] }]
-        }], propDecorators: { source: [{
-                type: Input
+                    ], template: "<table [id]=\"tableId\" [class]=\"tableClass\">\n  <thead\n    ng2-st-thead\n    [grid]=\"grid\"\n    [source]=\"source\"\n    [createConfirm]=\"createConfirm\"\n    (create)=\"create.emit($event)\"\n    (selectAllRows)=\"onSelectAllRows()\"\n  ></thead>\n\n  <tbody\n    ng2-st-tbody\n    [grid]=\"grid\"\n    [source]=\"source\"\n    [deleteConfirm]=\"deleteConfirm\"\n    [editConfirm]=\"editConfirm\"\n    [createConfirm]=\"createConfirm\"\n    [rowClassFunction]=\"rowClassFunction\"\n    (edit)=\"edit.emit($event)\"\n    (editCancel)=\"editCancel.emit($event)\"\n    (delete)=\"delete.emit($event)\"\n    (custom)=\"custom.emit($event)\"\n    (userClickedRow)=\"emitUserRowClicked($event)\"\n    (multipleSelectRow)=\"multipleSelectRow($event)\"\n  ></tbody>\n</table>\n\n@if (isPagerDisplay) {\n<ng2-smart-table-pager [source]=\"source\" [perPageSelect]=\"perPageSelect\">\n</ng2-smart-table-pager>\n}\n", styles: [":host{font-size:1rem}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep button,:host ::ng-deep input,:host ::ng-deep optgroup,:host ::ng-deep select,:host ::ng-deep textarea{color:inherit;font:inherit;margin:0}:host ::ng-deep table{line-height:1.5em;border-collapse:collapse;border-spacing:0;display:table;width:100%;max-width:100%;word-break:normal;word-break:keep-all;overflow:auto}:host ::ng-deep table tr th{font-weight:700}:host ::ng-deep table tr section{font-size:.75em;font-weight:700}:host ::ng-deep table tr td,:host ::ng-deep table tr th{font-size:.875em;margin:0;padding:.5em 1em}:host ::ng-deep a{color:#1e6bb8;text-decoration:none}:host ::ng-deep a:hover{text-decoration:underline}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { source: [{
+                type: Input,
+                args: [{ required: true }]
             }], settings: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }] } });
 
 /**