@den4ik92/ng2-smart-table 19.1.5 → 19.1.6

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

@@ -421,8 +421,8 @@ class Row {
         this.data = data;
         this._dataSet = _dataSet;
         this.pending = signal(false);
-        this.isSelected = false;
-        this.isInEditing = false;
+        this.isSelected = signal(false);
+        this.isInEditing = signal(false);
         this.cells = [];
         this.process();
     }
@@ -435,9 +435,6 @@ class Row {
     getData() {
         return this.data;
     }
-    getIsSelected() {
-        return this.isSelected;
-    }
     getNewData() {
         const values = Object.assign({}, this.data);
         this.getCells().forEach((cell) => values[cell.getColumn().id] = cell.newValue);
@@ -1574,7 +1571,7 @@ class TbodyCreateCancelComponent {
         event.preventDefault();
         event.stopPropagation();
         this.editCancel().emit(true);
-        this.row().isInEditing = false;
+        this.row().isInEditing.set(false);
     }
     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: `
@@ -1777,23 +1774,23 @@ class DataSet {
     }
     setSelectAll(state) {
         this.rows.forEach((row) => {
-            row.isSelected = state;
+            row.isSelected.set(state);
             this.storeSelectedRow(row);
         });
     }
     deselectAll() {
         this.rows.forEach((row) => {
-            row.isSelected = false;
+            row.isSelected.set(false);
         });
         // we need to clear selectedRow field because no one row selected
         this.selectedRows.clear();
     }
     selectRow(row, state) {
-        row.isSelected = state;
+        row.isSelected.set(state);
         this.storeSelectedRow(row);
     }
     multipleSelectRow(row) {
-        row.isSelected = !row.isSelected;
+        row.isSelected.set(!row.isSelected());
         this.storeSelectedRow(row);
         return row;
     }
@@ -1802,7 +1799,7 @@ class DataSet {
     }
     createNewRow() {
         this.newRow = new Row(-1, {}, this);
-        this.newRow.isInEditing = true;
+        this.newRow.isInEditing.set(true);
     }
     /**
      * Create columns by mapping from the settings
@@ -1822,15 +1819,15 @@ class DataSet {
         this.rows = [];
         this.data.forEach((el, index) => {
             const row = new Row(index, el, this);
-            row.isSelected = this.selectedRows.has(row.getData());
+            row.isSelected.set(this.selectedRows.has(row.getData()));
             this.rows.push(row);
         });
     }
     get isAllSelected() {
-        return this.rows.every((row) => row.isSelected);
+        return this.rows.every((row) => row.isSelected());
     }
     storeSelectedRow(row) {
-        if (row.isSelected) {
+        if (row.isSelected()) {
             this.selectedRows.add(row.getData());
         }
         else {
@@ -1884,31 +1881,9 @@ class Grid {
             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);
     }
@@ -1931,7 +1906,7 @@ class Grid {
         return this.onDeselectRowSource.asObservable();
     }
     edit(row) {
-        row.isInEditing = true;
+        row.isInEditing.set(true);
     }
     create(row, confirmEmitter) {
         row.pending.set(true);
@@ -1968,12 +1943,12 @@ class Grid {
             row.pending.set(false);
             newData = newData || row.getNewData();
             this.source.update(row.getData(), newData).then(() => {
-                row.isInEditing = false;
+                row.isInEditing.set(false);
             });
         })
             .catch(() => {
             row.pending.set(false);
-            row.isInEditing = false;
+            row.isInEditing.set(false);
         });
         if (this.getSetting("edit.confirmSave", false)) {
             confirmEmitter.emit({
@@ -2011,38 +1986,29 @@ class Grid {
             deferred.resolve(false);
             row.pending.set(false);
         }
-        if (row.isSelected) {
+        if (row.isSelected()) {
             this.dataSet.selectRow(row, false);
         }
     }
-    processDataChange(changes) {
-        if (this.shouldProcessChange(changes)) {
-            if (changes["action"] === "load") {
-                this.dataSet.deselectAll();
-            }
-            this.dataSet.setData(changes["elements"]);
-        }
-    }
-    shouldProcessChange(changes) {
-        if (["filter", "sort", "page", "remove", "refresh", "load", "paging"].indexOf(changes["action"]) !== -1) {
-            return true;
+    processDataChange({ action, elements }) {
+        if (action === "load") {
+            this.dataSet.deselectAll();
         }
-        else if (["prepend", "append"].indexOf(changes["action"]) !== -1 &&
-            !this.getSetting("pager.display")) {
-            return true;
+        if (action !== "update") {
+            this.dataSet.setData(elements);
         }
-        return false;
     }
     prepareSource(source) {
+        const preparedSource = source || new LocalDataSource();
         const initialSort = this.getInitialSort();
         if (initialSort) {
-            source.setSort([initialSort], false);
+            preparedSource.setSort([initialSort], false);
         }
-        if (this.getSetting("pager.display") === true) {
-            source.setPaging(1, this.getSetting("pager.perPage"), false);
+        if (this.getSetting("pager.display", false) === true) {
+            preparedSource.setPaging(1, this.getSetting("pager.perPage"), false);
         }
-        source.refresh();
-        return source;
+        preparedSource.refresh();
+        return preparedSource;
     }
     getInitialSort() {
         const defaultSortColumn = this.getColumns().find((column) => column.isSortable && column.defaultSortDirection);
@@ -2067,6 +2033,28 @@ class Grid {
     getLastRow() {
         return this.dataSet.getLastRow();
     }
+    updateSettingsAndDataSet(settings) {
+        this.settings.set(settings);
+        this.dataSet = new DataSet([], settings.columns);
+        if (this.source) {
+            this.source.refresh();
+        }
+    }
+    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);
+            }
+        });
+    }
     // ------------------------------- column sort
     async getSortedTableColumns(newState, columns) {
         const sortedArray = [];
@@ -2459,7 +2447,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: { 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() + $index) {\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"] }] }); }
+    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() + $index) {\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,
@@ -2470,7 +2458,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         TbodyCreateCancelComponent,
                         NgTemplateOutlet,
                         CellComponent,
-                    ], 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() + $index) {\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"] }]
+                    ], 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() + $index) {\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 {
@@ -3107,7 +3095,7 @@ class TheadFormRowComponent {
       <ng2-smart-table-cell
         [cell]="cell"
         [inputClass]="addInputClass()"
-        [isInEditing]="grid().getNewRow().isInEditing"
+        [isInEditing]="grid().getNewRow().isInEditing()"
       >
       </ng2-smart-table-cell>
     </td>
@@ -3140,7 +3128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
       <ng2-smart-table-cell
         [cell]="cell"
         [inputClass]="addInputClass()"
-        [isInEditing]="grid().getNewRow().isInEditing"
+        [isInEditing]="grid().getNewRow().isInEditing()"
       >
       </ng2-smart-table-cell>
     </td>
@@ -3435,6 +3423,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
 
 class Ng2SmartTableComponent {
     constructor() {
+        this.source = input.required();
+        this.settings = input.required();
         this.multiRowSelect = output();
         this.rowClicked = output();
         this.columnsSorted = output();
@@ -3446,34 +3436,37 @@ class Ng2SmartTableComponent {
         this.deleteConfirm = output();
         this.editConfirm = output();
         this.createConfirm = output();
-        this.tableClass = "";
-        this.tableId = "";
-        this.perPageSelect = [];
-        this.isPagerDisplay = false;
-        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 || (() => "");
+        this.tableClass = computed(() => {
+            return this.settings().attr?.class || "";
+        });
+        this.tableId = computed(() => {
+            return this.settings().attr?.id || getRandomId();
+        });
+        this.perPageSelect = computed(() => {
+            const { pager } = this.settings();
+            return pager ? pager.perPageSelect || [] : [];
+        });
+        this.isPagerDisplay = computed(() => {
+            const { pager } = this.settings();
+            return pager ? pager.display : false;
+        });
+        this.rowClassFunction = computed(() => {
+            return this.settings().rowClassFunction || (() => "");
         });
     }
-    ngOnChanges({ settings, source }) {
+    ngOnChanges({ settings }) {
         if (this.grid) {
             if (settings) {
-                this.grid.setSettings(this.settings);
-            }
-            if (source) {
-                this.source = this.prepareSource();
-                this.grid.setSource(this.source);
+                this.grid.setSettings(this.settings());
             }
         }
         else {
             this.initGrid();
         }
     }
+    ngOnDestroy() {
+        this.grid.detach();
+    }
     multipleSelectRow(row) {
         this.grid.multipleSelectRow(row);
         this.emitUserSelectRow(row);
@@ -3488,30 +3481,23 @@ class Ng2SmartTableComponent {
     emitUserRowClicked(row) {
         this.rowClicked.emit({
             data: row ? row.getData() : null,
-            source: this.source,
+            source: this.source(),
         });
     }
     initGrid() {
-        this.source = this.prepareSource();
-        this.grid = new Grid(this.source, this.settings);
+        this.grid = new Grid(this.source(), this.settings());
         this.grid.setColumnsSortedEmitter(this.columnsSorted);
     }
-    prepareSource() {
-        if (this.source instanceof LocalDataSource) {
-            return this.source;
-        }
-        return new LocalDataSource();
-    }
     emitUserSelectRow(row) {
         this.multiRowSelect.emit({
             data: row ? row.getData() : null,
-            isSelected: row ? row.getIsSelected() : false,
-            source: this.source,
+            isSelected: row ? row.isSelected() : false,
+            source: this.source(),
             selected: this.grid.dataSet.getSelectedRowsData(),
         });
     }
     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" }, 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableComponent, isStandalone: true, selector: "ng2-smart-table", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, 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,
@@ -3519,14 +3505,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         Ng2SmartTableTheadComponent,
                         Ng2SmartTableTbodyComponent,
                         PagerComponent,
-                    ], 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,
-                args: [{ required: true }]
-            }] } });
+                    ], 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"] }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.