@den4ik92/ng2-smart-table 19.5.44 → 19.5.46

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, ChangeDetectionStrategy, Component, signal, effect, inject, ElementRef, Directive, ViewContainerRef, ViewChild, output, viewChild } from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component, signal, effect, inject, ElementRef, Directive, untracked, ViewContainerRef, ViewChild, output, viewChild } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { distinctUntilChanged, debounceTime, takeUntil, switchMap, take } from 'rxjs/operators';
@@ -352,14 +352,16 @@ class Cell {
         this.title = '';
         this.id = '';
         this.columnClass = column.class;
-        this.newValue.set(value);
+        untracked(() => {
+            this.newValue.set(value);
+        });
         this.styles = column.styles;
         this.title = column.title;
         this.id = column.id;
     }
     getValue() {
         const prepare = this.column.valuePrepareFunction;
-        return !prepare ? this.value : prepare.call(null, this.value, this.row.rowData, this);
+        return !prepare ? this.value : prepare.call(null, this.value, this.row.rowData(), this);
     }
     getNotPrepareValue() {
         return this.value;
@@ -434,32 +436,30 @@ class Column {
 }
 
 class Row {
-    constructor(index, rowData, columns) {
+    constructor(index, rowDataObj, columnsList) {
         this.index = index;
-        this.rowData = rowData;
-        this.columns = columns;
+        this.rowDataObj = rowDataObj;
+        this.columnsList = columnsList;
         this.pending = signal(false);
         this.isSelected = signal(false);
         this.isInEditing = signal(false);
-        this.cells = signal([]);
+        this.cells = computed(() => this.columns().map((column) => this.createCell(column, this.rowData())));
+        this.rowData = signal({});
+        this.columns = signal([]);
         this.visibleCells = computed(() => this.cells().filter((cell) => !cell.column.hide));
-        this.process();
+        this.rowData.set(rowDataObj);
+        this.columns.set(columnsList);
     }
     getNewData() {
-        const values = Object.assign({}, this.rowData);
+        const values = Object.assign({}, this.rowData());
         this.cells().forEach((cell) => (values[cell.column.id] = cell.newValue()));
         return values;
     }
     setData(rowData) {
-        this.rowData = rowData;
-        this.process();
-    }
-    process() {
-        const cells = this.columns.map((column) => this.createCell(column));
-        this.cells.set(cells);
+        this.rowData.set(rowData);
     }
-    createCell(column) {
-        const value = typeof this.rowData[column.id] === 'undefined' ? '' : this.rowData[column.id];
+    createCell(column, rowData) {
+        const value = typeof rowData[column.id] === 'undefined' ? '' : rowData[column.id];
         return new Cell(value, this, column);
     }
 }
@@ -513,16 +513,19 @@ class DataSource {
     }
     async appendMany(elements) {
         this.data.update((old) => [...old, ...elements]);
+        this.updateTotal(elements.length);
         this.emitOnChanged({ action: SmartTableOnChangedEventName.appendMany, newItems: elements });
         return Promise.resolve(true);
     }
     async add(element) {
         this.data.update((old) => [...old, element]);
+        this.updateTotal(1);
         this.emitOnChanged({ action: SmartTableOnChangedEventName.add, newItems: [element] });
         return Promise.resolve(true);
     }
     async remove(element) {
         this.data.update((old) => old.filter((el) => !isObjectsIdentical(el, element)));
+        this.updateTotal(-1);
         this.emitOnChanged({ action: SmartTableOnChangedEventName.remove, item: element }, this.data());
         return Promise.resolve(true);
     }
@@ -603,6 +606,13 @@ class DataSource {
         };
         this.onChangedSource.next(actionData);
     }
+    /**
+     * @param difference number to plus total
+     * @example -2 or 2
+     */
+    updateTotal(difference) {
+        this.pagingConf.update((old) => ({ ...old, total: old.total + difference }));
+    }
 }
 
 function exactMatch(value, search) {
@@ -1088,7 +1098,7 @@ class CustomViewComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: CustomViewComponent, isStandalone: true, selector: "ng2-custom-view-component", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<ng-template
     *ngComponentOutlet="
       cell().column.renderComponent;
-      inputs: { rowData: cell().row.rowData, value: cell().getValue() }
+      inputs: { rowData: cell().row.rowData(), value: cell().getValue() }
     "></ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomViewComponent, decorators: [{
@@ -1098,7 +1108,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                     template: `<ng-template
     *ngComponentOutlet="
       cell().column.renderComponent;
-      inputs: { rowData: cell().row.rowData, value: cell().getValue() }
+      inputs: { rowData: cell().row.rowData(), value: cell().getValue() }
     "></ng-template>`,
                     imports: [NgComponentOutlet],
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1216,7 +1226,7 @@ class RowActionsComponent {
             if (!actions || !actions.custom) {
                 return [];
             }
-            const list = actions.custom.filter((action) => !action.hasPermissionFunction ? true : action.hasPermissionFunction(this.row().rowData));
+            const list = actions.custom.filter((action) => !action.hasPermissionFunction ? true : action.hasPermissionFunction(this.row().rowData()));
             return list;
         });
         this.isActionEditActive = computed(() => {
@@ -1228,7 +1238,7 @@ class RowActionsComponent {
             if (!editConfig || !editConfig.hasPermissionFunction) {
                 return true;
             }
-            return editConfig.hasPermissionFunction(this.row().rowData);
+            return editConfig.hasPermissionFunction(this.row().rowData());
         });
         this.isActionDeleteActive = computed(() => {
             const actions = this.grid().settings().actions;
@@ -1239,7 +1249,7 @@ class RowActionsComponent {
             if (!deleteConfig || !deleteConfig.hasPermissionFunction) {
                 return true;
             }
-            return deleteConfig.hasPermissionFunction(this.row().rowData);
+            return deleteConfig.hasPermissionFunction(this.row().rowData());
         });
         this.isExternalMode = computed(() => {
             return this.grid().settings().mode === 'external';
@@ -1356,7 +1366,7 @@ class Ng2SmartTableTbodyComponent {
     customActionEmitted(actionName, row) {
         this.customActionEmitter.emit({
             source: this.source(),
-            data: row.rowData,
+            data: row.rowData(),
             action: actionName,
         });
     }
@@ -1364,11 +1374,11 @@ 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 }, rowClassFunction: { classPropertyName: "rowClassFunction", publicName: "rowClassFunction", isSignal: true, isRequired: false, transformFunction: null }, isMobileView: { classPropertyName: "isMobileView", publicName: "isMobileView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "edit", editConfirmed: "editConfirmed", editCancel: "editCancel", createConfirmed: "createConfirmed", deleteEmitter: "deleteEmitter", customActionEmitter: "customActionEmitter", userClickedRow: "userClickedRow", multipleSelectRow: "multipleSelectRow" }, ngImport: i0, template: "@if (grid().createFormShown()) {\n  <tr\n    ng2-st-trow\n    class=\"ng2-smart-row\"\n    [grid]=\"grid()\"\n    [row]=\"grid().getNewRow()\"\n    [isCreateRow]=\"true\"\n    [source]=\"source()\"\n    [isMobileView]=\"isMobileView()\"\n    (createConfirmed)=\"createConfirmed.emit()\"></tr>\n}\n@for (row of grid().dataSet.getRows(); track trackByIdOrIndex($index, row)) {\n  <tr\n    ng2-st-trow\n    class=\"ng2-smart-row\"\n    [grid]=\"grid()\"\n    [source]=\"source()\"\n    [row]=\"row\"\n    [class]=\"rowClassFunction()(row.rowData)\"\n    [isMobileView]=\"isMobileView()\"\n    [class.selected]=\"row.isSelected()\"\n    (click)=\"rowClicked(row)\"\n    (edit)=\"edit.emit(row)\"\n    (editConfirmed)=\"editConfirmed.emit(row)\"\n    (editCancel)=\"editCancel.emit(row)\"\n    (deleteEmitter)=\"deleteEmitter.emit(row)\"\n    (customActionEmitter)=\"customActionEmitted($event, row)\"\n    (multipleSelectRow)=\"multipleSelectRow.emit($event)\"></tr>\n} @empty {\n  <tr>\n    <td colspan=\"50\">\n      {{ noDataMessage() }}\n    </td>\n  </tr>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: TrowComponent, selector: "[ng2-st-trow]", inputs: ["grid", "source", "row", "isMobileView", "isCreateRow"], outputs: ["edit", "editCancel", "editConfirmed", "deleteEmitter", "createConfirmed", "customActionEmitter", "userClickedRow", "multipleSelectRow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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 }, rowClassFunction: { classPropertyName: "rowClassFunction", publicName: "rowClassFunction", isSignal: true, isRequired: false, transformFunction: null }, isMobileView: { classPropertyName: "isMobileView", publicName: "isMobileView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "edit", editConfirmed: "editConfirmed", editCancel: "editCancel", createConfirmed: "createConfirmed", deleteEmitter: "deleteEmitter", customActionEmitter: "customActionEmitter", userClickedRow: "userClickedRow", multipleSelectRow: "multipleSelectRow" }, ngImport: i0, template: "@if (grid().createFormShown()) {\n  <tr\n    ng2-st-trow\n    class=\"ng2-smart-row\"\n    [grid]=\"grid()\"\n    [row]=\"grid().getNewRow()\"\n    [isCreateRow]=\"true\"\n    [source]=\"source()\"\n    [isMobileView]=\"isMobileView()\"\n    (createConfirmed)=\"createConfirmed.emit()\"></tr>\n}\n@for (row of grid().dataSet.getRows(); track trackByIdOrIndex($index, row)) {\n  <tr\n    ng2-st-trow\n    class=\"ng2-smart-row\"\n    [grid]=\"grid()\"\n    [source]=\"source()\"\n    [row]=\"row\"\n    [class]=\"rowClassFunction()(row.rowData())\"\n    [isMobileView]=\"isMobileView()\"\n    [class.selected]=\"row.isSelected()\"\n    (click)=\"rowClicked(row)\"\n    (edit)=\"edit.emit(row)\"\n    (editConfirmed)=\"editConfirmed.emit(row)\"\n    (editCancel)=\"editCancel.emit(row)\"\n    (deleteEmitter)=\"deleteEmitter.emit(row)\"\n    (customActionEmitter)=\"customActionEmitted($event, row)\"\n    (multipleSelectRow)=\"multipleSelectRow.emit($event)\"></tr>\n} @empty {\n  <tr>\n    <td colspan=\"50\">\n      {{ noDataMessage() }}\n    </td>\n  </tr>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: TrowComponent, selector: "[ng2-st-trow]", inputs: ["grid", "source", "row", "isMobileView", "isCreateRow"], outputs: ["edit", "editCancel", "editConfirmed", "deleteEmitter", "createConfirmed", "customActionEmitter", "userClickedRow", "multipleSelectRow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTbodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[ng2-st-tbody]', imports: [FormsModule, TrowComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (grid().createFormShown()) {\n  <tr\n    ng2-st-trow\n    class=\"ng2-smart-row\"\n    [grid]=\"grid()\"\n    [row]=\"grid().getNewRow()\"\n    [isCreateRow]=\"true\"\n    [source]=\"source()\"\n    [isMobileView]=\"isMobileView()\"\n    (createConfirmed)=\"createConfirmed.emit()\"></tr>\n}\n@for (row of grid().dataSet.getRows(); track trackByIdOrIndex($index, row)) {\n  <tr\n    ng2-st-trow\n    class=\"ng2-smart-row\"\n    [grid]=\"grid()\"\n    [source]=\"source()\"\n    [row]=\"row\"\n    [class]=\"rowClassFunction()(row.rowData)\"\n    [isMobileView]=\"isMobileView()\"\n    [class.selected]=\"row.isSelected()\"\n    (click)=\"rowClicked(row)\"\n    (edit)=\"edit.emit(row)\"\n    (editConfirmed)=\"editConfirmed.emit(row)\"\n    (editCancel)=\"editCancel.emit(row)\"\n    (deleteEmitter)=\"deleteEmitter.emit(row)\"\n    (customActionEmitter)=\"customActionEmitted($event, row)\"\n    (multipleSelectRow)=\"multipleSelectRow.emit($event)\"></tr>\n} @empty {\n  <tr>\n    <td colspan=\"50\">\n      {{ noDataMessage() }}\n    </td>\n  </tr>\n}\n" }]
+            args: [{ selector: '[ng2-st-tbody]', imports: [FormsModule, TrowComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (grid().createFormShown()) {\n  <tr\n    ng2-st-trow\n    class=\"ng2-smart-row\"\n    [grid]=\"grid()\"\n    [row]=\"grid().getNewRow()\"\n    [isCreateRow]=\"true\"\n    [source]=\"source()\"\n    [isMobileView]=\"isMobileView()\"\n    (createConfirmed)=\"createConfirmed.emit()\"></tr>\n}\n@for (row of grid().dataSet.getRows(); track trackByIdOrIndex($index, row)) {\n  <tr\n    ng2-st-trow\n    class=\"ng2-smart-row\"\n    [grid]=\"grid()\"\n    [source]=\"source()\"\n    [row]=\"row\"\n    [class]=\"rowClassFunction()(row.rowData())\"\n    [isMobileView]=\"isMobileView()\"\n    [class.selected]=\"row.isSelected()\"\n    (click)=\"rowClicked(row)\"\n    (edit)=\"edit.emit(row)\"\n    (editConfirmed)=\"editConfirmed.emit(row)\"\n    (editCancel)=\"editCancel.emit(row)\"\n    (deleteEmitter)=\"deleteEmitter.emit(row)\"\n    (customActionEmitter)=\"customActionEmitted($event, row)\"\n    (multipleSelectRow)=\"multipleSelectRow.emit($event)\"></tr>\n} @empty {\n  <tr>\n    <td colspan=\"50\">\n      {{ noDataMessage() }}\n    </td>\n  </tr>\n}\n" }]
         }] });
 
 class AddButtonComponent {
@@ -2097,7 +2107,7 @@ class DataSet {
         this.createRows();
     }
     findRowByData(data) {
-        return this.rows().find((row) => isObjectsIdentical(row.rowData, data));
+        return this.rows().find((row) => isObjectsIdentical(row.rowData(), data));
     }
     setSelectAll(state) {
         this.rows().forEach((row) => {
@@ -2154,15 +2164,17 @@ class DataSet {
     }
     storeSelectedRow(row) {
         if (row.isSelected()) {
-            if (this.isSelectedHasRow(row.rowData)) {
+            if (this.isSelectedHasRow(row.rowData())) {
                 //check if row already in selected array to prevent duplicate
                 return;
             }
-            this.selectedRowsData.push(row.rowData);
+            this.selectedRowsData.push(row.rowData());
         }
         else {
             const index = this.selectedRowsData.findIndex((rowData) => isObjectsIdentical(rowData, row));
-            this.selectedRowsData.splice(index, 1);
+            if (index !== -1) {
+                this.selectedRowsData.splice(index, 1);
+            }
         }
     }
 }
@@ -2256,7 +2268,7 @@ class Grid {
             .then((newData) => {
             row.pending.set(false);
             newData = newData || row.getNewData();
-            this.source.update(row.rowData, newData).then(() => {
+            this.source.update(row.rowData(), newData).then(() => {
                 row.isInEditing.set(false);
             });
         })
@@ -2266,7 +2278,7 @@ class Grid {
         });
         if (this.getSetting('edit.confirmSave', false)) {
             confirmEmitter.emit({
-                data: row.rowData,
+                data: row.rowData(),
                 newData: row.getNewData(),
                 source: this.source,
                 confirm: deferred,
@@ -2283,7 +2295,7 @@ class Grid {
         deferred.promise
             .then(() => {
             row.pending.set(false);
-            this.source.remove(row.rowData);
+            this.source.remove(row.rowData());
         })
             .catch(() => {
             row.pending.set(false);
@@ -2291,7 +2303,7 @@ class Grid {
         });
         if (this.getSetting('delete.confirmDelete', true)) {
             confirmEmitter.emit({
-                data: row.rowData,
+                data: row.rowData(),
                 source: this.source,
                 confirm: deferred,
             });
@@ -2518,7 +2530,7 @@ class Ng2SmartTableComponent {
     }
     emitUserRowClicked(row) {
         this.rowClicked.emit({
-            data: row ? row.rowData : null,
+            data: row ? row.rowData() : null,
             source: this.source(),
         });
     }
@@ -2528,7 +2540,7 @@ class Ng2SmartTableComponent {
     editEmitted(row) {
         if (this.isExternalMode()) {
             this.edit.emit({
-                data: row.rowData,
+                data: row.rowData(),
                 source: this.source(),
             });
             return;
@@ -2539,7 +2551,7 @@ class Ng2SmartTableComponent {
         this.grid.save(row, this.editConfirm);
     }
     editCanceled(row) {
-        this.editCancel.emit({ data: row.rowData, source: this.source() });
+        this.editCancel.emit({ data: row.rowData(), source: this.source() });
     }
     createEmitted() {
         if (this.isExternalMode()) {
@@ -2555,7 +2567,7 @@ class Ng2SmartTableComponent {
     deleEmitted(row) {
         if (this.isExternalMode()) {
             this.deleteEmitter.emit({
-                data: row.rowData,
+                data: row.rowData(),
                 source: this.source(),
             });
         }
@@ -2569,7 +2581,7 @@ class Ng2SmartTableComponent {
     }
     emitUserSelectRow(row) {
         this.multiRowSelect.emit({
-            data: row ? row.rowData : null,
+            data: row ? row.rowData() : null,
             isSelected: row ? row.isSelected() : false,
             source: this.source(),
             selected: this.grid.dataSet.getSelectedRowsData(),