@den4ik92/ng2-smart-table 19.1.3 → 19.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/den4ik92-ng2-smart-table.mjs +37 -33
  2. package/fesm2022/den4ik92-ng2-smart-table.mjs.map +1 -1
  3. package/lib/lib/data-set/row.d.ts +1 -1
  4. package/package.json +1 -1
package/fesm2022/den4ik92-ng2-smart-table.mjs CHANGED
@@ -196,11 +196,11 @@ class TableColumnsEditorComponent {
196
196
  this.stateHasChanged.set(JSON.stringify(this.grid()?.currentColumnsSortState) !== JSON.stringify(this.currentState));
197
197
  }
198
198
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TableColumnsEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
199
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TableColumnsEditorComponent, isStandalone: true, selector: "ng2-table-columns-editor", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, close: { classPropertyName: "close", publicName: "close", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"sort-card\">\n <div class=\"sort-card-header\">\n <h6>Table columns setup</h6>\n </div>\n <div class=\"sort-card-body\">\n <div\n class=\"list\"\n cdkDropList\n [cdkDropListData]=\"currentState\"\n (cdkDropListDropped)=\"drop($event)\"\n >\n @for (column of currentState; track column.key; let i = $index) {\n\n <div\n cdkDrag\n [cdkDragLockAxis]=\"'y'\"\n [cdkDragStartDelay]=\"300\"\n [cdkDragDisabled]=\"column.moveDisabled\"\n class=\"drag-row\"\n #dragRow\n [style.--drag-row-height]=\"50\"\n >\n <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n <div class=\"index-cell\">\n {{ i + 1 }}\n </div>\n <label class=\"sort-column-checkbox-wrap\" [for]=\"'sort-column-checkbox-' + i\">\n <span></span>\n <input\n [disabled]=\"column.moveDisabled\"\n [id]=\"'sort-column-checkbox-' + i\"\n title=\"Active state. If checked the column will be displayed\"\n type=\"checkbox\"\n class=\"sort-column-checkbox-input\"\n [checked]=\"!column.hide\"\n (change)=\"setVisibility(i)\"\n />\n <span></span>\n </label>\n {{ column.title }}\n </div>\n }\n </div>\n </div>\n @if (stateHasChanged()) {\n <div class=\"sort-card-footer\">\n <button class=\"reset-button\" (click)=\"resetChanges()\">reset</button>\n <button class=\"update-button\" (click)=\"setAndUpdate()\">Update</button>\n </div>\n }\n</div>\n", styles: [".list{overflow:auto;display:flex;flex-direction:column;gap:.3rem;max-height:100%}.drag-row{border:solid 1px var(--drag-row-border-color, #ccc);border-radius:.3rem;display:flex;align-items:center;box-sizing:border-box;cursor:grab;background:var(--drag-row-background, #ffffff);box-shadow:0 0 6px 1px #ebebeb33}.drag-row.cdk-drag-disabled{filter:opacity(.5);cursor:not-allowed}.drag-row .index-cell{min-width:2.2rem;border-right:1px solid var(--drag-row-border-color, #ccc)}.drag-row>div{padding:.3rem}.drag-row .sort-column-checkbox-wrap{margin:0 .5rem}.cdk-drag-preview{box-sizing:border-box;border-radius:.3rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list.cdk-drop-list-dragging .drag-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-placeholder{background:var(--drag-placeholder-background, #ccc);border:dotted 3px #999;min-height:var(--drag-row-heightpx, 2.5rem);transition:transform .25s cubic-bezier(0,0,.2,1)}.overlay-card nb-card-body{padding:.25rem;max-height:100%}.sort-card{box-shadow:0 0 6px 1px #0003;min-width:18rem;padding:.25rem;max-height:80dvh;background:var(--sort-card-background, #ffffff);border-radius:.5rem}.sort-card .sort-card-header{display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid var(--sort-card-header-divider-color, #edf1f7)}.sort-card .sort-card-header h6{margin:0}.sort-card .sort-card-body{padding:.5rem 0}.sort-card .sort-card-footer{border-top:1px solid var(--sort-card-header-divider-color, #edf1f7);display:flex;align-items:center;justify-content:end;gap:1rem;padding:1rem}.sort-card .sort-card-footer .update-button,.sort-card .sort-card-footer .reset-button{border-radius:.3rem;padding:.4rem 1rem;border:none;color:#fff;font-size:.875rem;font-weight:700;text-transform:uppercase}.sort-card .sort-card-footer .update-button{background-color:#36f}.sort-card .sort-card-footer .update-button:hover{background-color:#598bff}.sort-card .sort-card-footer .reset-button{background-color:#ff3d71}.sort-card .sort-card-footer .reset-button:hover{background-color:#ff708d}\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }] }); }
199
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TableColumnsEditorComponent, isStandalone: true, selector: "ng2-table-columns-editor", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, close: { classPropertyName: "close", publicName: "close", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"sort-card\">\n <div class=\"sort-card-header\">\n <h6>Table columns setup</h6>\n </div>\n <div class=\"sort-card-body\">\n <div\n class=\"list\"\n cdkDropList\n [cdkDropListData]=\"currentState\"\n (cdkDropListDropped)=\"drop($event)\"\n >\n @for (column of currentState; track column.key + i; let i = $index) {\n\n <div\n cdkDrag\n [cdkDragLockAxis]=\"'y'\"\n [cdkDragStartDelay]=\"300\"\n [cdkDragDisabled]=\"column.moveDisabled\"\n class=\"drag-row\"\n #dragRow\n [style.--drag-row-height]=\"50\"\n >\n <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n <div class=\"index-cell\">\n {{ i + 1 }}\n </div>\n <label class=\"sort-column-checkbox-wrap\" [for]=\"'sort-column-checkbox-' + i\">\n <span></span>\n <input\n [disabled]=\"column.moveDisabled\"\n [id]=\"'sort-column-checkbox-' + i\"\n title=\"Active state. If checked the column will be displayed\"\n type=\"checkbox\"\n class=\"sort-column-checkbox-input\"\n [checked]=\"!column.hide\"\n (change)=\"setVisibility(i)\"\n />\n <span></span>\n </label>\n {{ column.title }}\n </div>\n }\n </div>\n </div>\n @if (stateHasChanged()) {\n <div class=\"sort-card-footer\">\n <button class=\"reset-button\" (click)=\"resetChanges()\">reset</button>\n <button class=\"update-button\" (click)=\"setAndUpdate()\">Update</button>\n </div>\n }\n</div>\n", styles: [".list{overflow:auto;display:flex;flex-direction:column;gap:.3rem;max-height:100%}.drag-row{border:solid 1px var(--drag-row-border-color, #ccc);border-radius:.3rem;display:flex;align-items:center;box-sizing:border-box;cursor:grab;background:var(--drag-row-background, #ffffff);box-shadow:0 0 6px 1px #ebebeb33}.drag-row.cdk-drag-disabled{filter:opacity(.5);cursor:not-allowed}.drag-row .index-cell{min-width:2.2rem;border-right:1px solid var(--drag-row-border-color, #ccc)}.drag-row>div{padding:.3rem}.drag-row .sort-column-checkbox-wrap{margin:0 .5rem}.cdk-drag-preview{box-sizing:border-box;border-radius:.3rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list.cdk-drop-list-dragging .drag-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-placeholder{background:var(--drag-placeholder-background, #ccc);border:dotted 3px #999;min-height:var(--drag-row-heightpx, 2.5rem);transition:transform .25s cubic-bezier(0,0,.2,1)}.overlay-card nb-card-body{padding:.25rem;max-height:100%}.sort-card{box-shadow:0 0 6px 1px #0003;min-width:18rem;padding:.25rem;max-height:80dvh;background:var(--sort-card-background, #ffffff);border-radius:.5rem}.sort-card .sort-card-header{display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid var(--sort-card-header-divider-color, #edf1f7)}.sort-card .sort-card-header h6{margin:0}.sort-card .sort-card-body{padding:.5rem 0}.sort-card .sort-card-footer{border-top:1px solid var(--sort-card-header-divider-color, #edf1f7);display:flex;align-items:center;justify-content:end;gap:1rem;padding:1rem}.sort-card .sort-card-footer .update-button,.sort-card .sort-card-footer .reset-button{border-radius:.3rem;padding:.4rem 1rem;border:none;color:#fff;font-size:.875rem;font-weight:700;text-transform:uppercase}.sort-card .sort-card-footer .update-button{background-color:#36f}.sort-card .sort-card-footer .update-button:hover{background-color:#598bff}.sort-card .sort-card-footer .reset-button{background-color:#ff3d71}.sort-card .sort-card-footer .reset-button:hover{background-color:#ff708d}\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }] }); }
200
200
  }
201
201
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TableColumnsEditorComponent, decorators: [{
202
202
  type: Component,
203
- args: [{ selector: "ng2-table-columns-editor", imports: [CdkDropList, CdkDrag, CdkDragPlaceholder], template: "<div class=\"sort-card\">\n <div class=\"sort-card-header\">\n <h6>Table columns setup</h6>\n </div>\n <div class=\"sort-card-body\">\n <div\n class=\"list\"\n cdkDropList\n [cdkDropListData]=\"currentState\"\n (cdkDropListDropped)=\"drop($event)\"\n >\n @for (column of currentState; track column.key; let i = $index) {\n\n <div\n cdkDrag\n [cdkDragLockAxis]=\"'y'\"\n [cdkDragStartDelay]=\"300\"\n [cdkDragDisabled]=\"column.moveDisabled\"\n class=\"drag-row\"\n #dragRow\n [style.--drag-row-height]=\"50\"\n >\n <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n <div class=\"index-cell\">\n {{ i + 1 }}\n </div>\n <label class=\"sort-column-checkbox-wrap\" [for]=\"'sort-column-checkbox-' + i\">\n <span></span>\n <input\n [disabled]=\"column.moveDisabled\"\n [id]=\"'sort-column-checkbox-' + i\"\n title=\"Active state. If checked the column will be displayed\"\n type=\"checkbox\"\n class=\"sort-column-checkbox-input\"\n [checked]=\"!column.hide\"\n (change)=\"setVisibility(i)\"\n />\n <span></span>\n </label>\n {{ column.title }}\n </div>\n }\n </div>\n </div>\n @if (stateHasChanged()) {\n <div class=\"sort-card-footer\">\n <button class=\"reset-button\" (click)=\"resetChanges()\">reset</button>\n <button class=\"update-button\" (click)=\"setAndUpdate()\">Update</button>\n </div>\n }\n</div>\n", styles: [".list{overflow:auto;display:flex;flex-direction:column;gap:.3rem;max-height:100%}.drag-row{border:solid 1px var(--drag-row-border-color, #ccc);border-radius:.3rem;display:flex;align-items:center;box-sizing:border-box;cursor:grab;background:var(--drag-row-background, #ffffff);box-shadow:0 0 6px 1px #ebebeb33}.drag-row.cdk-drag-disabled{filter:opacity(.5);cursor:not-allowed}.drag-row .index-cell{min-width:2.2rem;border-right:1px solid var(--drag-row-border-color, #ccc)}.drag-row>div{padding:.3rem}.drag-row .sort-column-checkbox-wrap{margin:0 .5rem}.cdk-drag-preview{box-sizing:border-box;border-radius:.3rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list.cdk-drop-list-dragging .drag-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-placeholder{background:var(--drag-placeholder-background, #ccc);border:dotted 3px #999;min-height:var(--drag-row-heightpx, 2.5rem);transition:transform .25s cubic-bezier(0,0,.2,1)}.overlay-card nb-card-body{padding:.25rem;max-height:100%}.sort-card{box-shadow:0 0 6px 1px #0003;min-width:18rem;padding:.25rem;max-height:80dvh;background:var(--sort-card-background, #ffffff);border-radius:.5rem}.sort-card .sort-card-header{display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid var(--sort-card-header-divider-color, #edf1f7)}.sort-card .sort-card-header h6{margin:0}.sort-card .sort-card-body{padding:.5rem 0}.sort-card .sort-card-footer{border-top:1px solid var(--sort-card-header-divider-color, #edf1f7);display:flex;align-items:center;justify-content:end;gap:1rem;padding:1rem}.sort-card .sort-card-footer .update-button,.sort-card .sort-card-footer .reset-button{border-radius:.3rem;padding:.4rem 1rem;border:none;color:#fff;font-size:.875rem;font-weight:700;text-transform:uppercase}.sort-card .sort-card-footer .update-button{background-color:#36f}.sort-card .sort-card-footer .update-button:hover{background-color:#598bff}.sort-card .sort-card-footer .reset-button{background-color:#ff3d71}.sort-card .sort-card-footer .reset-button:hover{background-color:#ff708d}\n"] }]
203
+ args: [{ selector: "ng2-table-columns-editor", imports: [CdkDropList, CdkDrag, CdkDragPlaceholder], template: "<div class=\"sort-card\">\n <div class=\"sort-card-header\">\n <h6>Table columns setup</h6>\n </div>\n <div class=\"sort-card-body\">\n <div\n class=\"list\"\n cdkDropList\n [cdkDropListData]=\"currentState\"\n (cdkDropListDropped)=\"drop($event)\"\n >\n @for (column of currentState; track column.key + i; let i = $index) {\n\n <div\n cdkDrag\n [cdkDragLockAxis]=\"'y'\"\n [cdkDragStartDelay]=\"300\"\n [cdkDragDisabled]=\"column.moveDisabled\"\n class=\"drag-row\"\n #dragRow\n [style.--drag-row-height]=\"50\"\n >\n <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n <div class=\"index-cell\">\n {{ i + 1 }}\n </div>\n <label class=\"sort-column-checkbox-wrap\" [for]=\"'sort-column-checkbox-' + i\">\n <span></span>\n <input\n [disabled]=\"column.moveDisabled\"\n [id]=\"'sort-column-checkbox-' + i\"\n title=\"Active state. If checked the column will be displayed\"\n type=\"checkbox\"\n class=\"sort-column-checkbox-input\"\n [checked]=\"!column.hide\"\n (change)=\"setVisibility(i)\"\n />\n <span></span>\n </label>\n {{ column.title }}\n </div>\n }\n </div>\n </div>\n @if (stateHasChanged()) {\n <div class=\"sort-card-footer\">\n <button class=\"reset-button\" (click)=\"resetChanges()\">reset</button>\n <button class=\"update-button\" (click)=\"setAndUpdate()\">Update</button>\n </div>\n }\n</div>\n", styles: [".list{overflow:auto;display:flex;flex-direction:column;gap:.3rem;max-height:100%}.drag-row{border:solid 1px var(--drag-row-border-color, #ccc);border-radius:.3rem;display:flex;align-items:center;box-sizing:border-box;cursor:grab;background:var(--drag-row-background, #ffffff);box-shadow:0 0 6px 1px #ebebeb33}.drag-row.cdk-drag-disabled{filter:opacity(.5);cursor:not-allowed}.drag-row .index-cell{min-width:2.2rem;border-right:1px solid var(--drag-row-border-color, #ccc)}.drag-row>div{padding:.3rem}.drag-row .sort-column-checkbox-wrap{margin:0 .5rem}.cdk-drag-preview{box-sizing:border-box;border-radius:.3rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list.cdk-drop-list-dragging .drag-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-placeholder{background:var(--drag-placeholder-background, #ccc);border:dotted 3px #999;min-height:var(--drag-row-heightpx, 2.5rem);transition:transform .25s cubic-bezier(0,0,.2,1)}.overlay-card nb-card-body{padding:.25rem;max-height:100%}.sort-card{box-shadow:0 0 6px 1px #0003;min-width:18rem;padding:.25rem;max-height:80dvh;background:var(--sort-card-background, #ffffff);border-radius:.5rem}.sort-card .sort-card-header{display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid var(--sort-card-header-divider-color, #edf1f7)}.sort-card .sort-card-header h6{margin:0}.sort-card .sort-card-body{padding:.5rem 0}.sort-card .sort-card-footer{border-top:1px solid var(--sort-card-header-divider-color, #edf1f7);display:flex;align-items:center;justify-content:end;gap:1rem;padding:1rem}.sort-card .sort-card-footer .update-button,.sort-card .sort-card-footer .reset-button{border-radius:.3rem;padding:.4rem 1rem;border:none;color:#fff;font-size:.875rem;font-weight:700;text-transform:uppercase}.sort-card .sort-card-footer .update-button{background-color:#36f}.sort-card .sort-card-footer .update-button:hover{background-color:#598bff}.sort-card .sort-card-footer .reset-button{background-color:#ff3d71}.sort-card .sort-card-footer .reset-button:hover{background-color:#ff708d}\n"] }]
204
204
  }], ctorParameters: () => [] });
205
205
 
206
206
  class SmartTableColumnEditorDirective {
@@ -420,7 +420,7 @@ class Row {
420
420
  this.index = index;
421
421
  this.data = data;
422
422
  this._dataSet = _dataSet;
423
- this.pending = false;
423
+ this.pending = signal(false);
424
424
  this.isSelected = false;
425
425
  this.isInEditing = false;
426
426
  this.cells = [];
@@ -1049,7 +1049,7 @@ class PagerComponent {
1049
1049
  [(ngModel)]="currentPerPage"
1050
1050
  id="per-page"
1051
1051
  >
1052
- @for (item of perPageSelect; track item) {
1052
+ @for (item of perPageSelect; track $index) {
1053
1053
  <option [value]="item">{{ item }}</option>
1054
1054
  }
1055
1055
  </select>
@@ -1148,7 +1148,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
1148
1148
  [(ngModel)]="currentPerPage"
1149
1149
  id="per-page"
1150
1150
  >
1151
- @for (item of perPageSelect; track item) {
1151
+ @for (item of perPageSelect; track $index) {
1152
1152
  <option [value]="item">{{ item }}</option>
1153
1153
  }
1154
1154
  </select>
@@ -1301,7 +1301,7 @@ class SelectEditorComponent extends DefaultEditor {
1301
1301
  [name]="cell().getId()"
1302
1302
  [disabled]="!cell().isEditable()"
1303
1303
  >
1304
- @for (option of cell().getColumn().getConfig()?.list; track option.value) {
1304
+ @for (option of cell().getColumn().getConfig()?.list; track $index) {
1305
1305
  <option
1306
1306
  [value]="option.value"
1307
1307
  [selected]="option.value === cell().getValue()"
@@ -1324,7 +1324,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
1324
1324
  [name]="cell().getId()"
1325
1325
  [disabled]="!cell().isEditable()"
1326
1326
  >
1327
- @for (option of cell().getColumn().getConfig()?.list; track option.value) {
1327
+ @for (option of cell().getColumn().getConfig()?.list; track $index) {
1328
1328
  <option
1329
1329
  [value]="option.value"
1330
1330
  [selected]="option.value === cell().getValue()"
@@ -1578,7 +1578,7 @@ class TbodyCreateCancelComponent {
1578
1578
  }
1579
1579
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TbodyCreateCancelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1580
1580
  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: `
1581
- @if (!row().pending) {
1581
+ @if (!row().pending()) {
1582
1582
  <a
1583
1583
  href="#"
1584
1584
  [id]="'row-' + row().index + '_editing-confirm-button'"
@@ -1662,7 +1662,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
1662
1662
  args: [{
1663
1663
  selector: "ng2-st-tbody-create-cancel",
1664
1664
  template: `
1665
- @if (!row().pending) {
1665
+ @if (!row().pending()) {
1666
1666
  <a
1667
1667
  href="#"
1668
1668
  [id]="'row-' + row().index + '_editing-confirm-button'"
@@ -1934,11 +1934,11 @@ class Grid {
1934
1934
  row.isInEditing = true;
1935
1935
  }
1936
1936
  create(row, confirmEmitter) {
1937
- row.pending = true;
1937
+ row.pending.set(true);
1938
1938
  const deferred = new Deferred();
1939
1939
  deferred.promise
1940
1940
  .then((newData) => {
1941
- row.pending = false;
1941
+ row.pending.set(false);
1942
1942
  newData = newData || row.getNewData();
1943
1943
  this.source.prepend(newData).then(() => {
1944
1944
  this.createFormShown = false;
@@ -1946,9 +1946,9 @@ class Grid {
1946
1946
  });
1947
1947
  })
1948
1948
  .catch((err) => {
1949
- row.pending = false;
1949
+ row.pending.set(false);
1950
1950
  });
1951
- if (this.getSetting("add.confirmCreate")) {
1951
+ if (this.getSetting("add.confirmCreate", false)) {
1952
1952
  confirmEmitter.emit({
1953
1953
  newData: row.getNewData(),
1954
1954
  source: this.source,
@@ -1957,21 +1957,23 @@ class Grid {
1957
1957
  }
1958
1958
  else {
1959
1959
  deferred.resolve(false);
1960
+ row.pending.set(false);
1960
1961
  }
1961
1962
  }
1962
1963
  save(row, confirmEmitter) {
1963
- row.pending = true;
1964
+ row.pending.set(true);
1964
1965
  const deferred = new Deferred();
1965
1966
  deferred.promise
1966
1967
  .then((newData) => {
1967
- row.pending = false;
1968
+ row.pending.set(false);
1968
1969
  newData = newData || row.getNewData();
1969
1970
  this.source.update(row.getData(), newData).then(() => {
1970
1971
  row.isInEditing = false;
1971
1972
  });
1972
1973
  })
1973
- .catch((err) => {
1974
- row.pending = false;
1974
+ .catch(() => {
1975
+ row.pending.set(false);
1976
+ row.isInEditing = false;
1975
1977
  });
1976
1978
  if (this.getSetting("edit.confirmSave", false)) {
1977
1979
  confirmEmitter.emit({
@@ -1983,18 +1985,19 @@ class Grid {
1983
1985
  }
1984
1986
  else {
1985
1987
  deferred.resolve(false);
1988
+ row.pending.set(false);
1986
1989
  }
1987
1990
  }
1988
1991
  delete(row, confirmEmitter) {
1989
- row.pending = true;
1992
+ row.pending.set(true);
1990
1993
  const deferred = new Deferred();
1991
1994
  deferred.promise
1992
1995
  .then(() => {
1993
- row.pending = false;
1996
+ row.pending.set(false);
1994
1997
  this.source.remove(row.getData());
1995
1998
  })
1996
- .catch((err) => {
1997
- row.pending = false;
1999
+ .catch(() => {
2000
+ row.pending.set(false);
1998
2001
  // doing nothing
1999
2002
  });
2000
2003
  if (this.getSetting("delete.confirmDelete")) {
@@ -2006,6 +2009,7 @@ class Grid {
2006
2009
  }
2007
2010
  else {
2008
2011
  deferred.resolve(false);
2012
+ row.pending.set(false);
2009
2013
  }
2010
2014
  if (row.isSelected) {
2011
2015
  this.dataSet.selectRow(row, false);
@@ -2245,7 +2249,7 @@ class TbodyEditDeleteComponent {
2245
2249
  }
2246
2250
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TbodyEditDeleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2247
2251
  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: `
2248
- @if (!row().pending) { @if (isActionEdit) {
2252
+ @if (!row().pending()) { @if (isActionEdit) {
2249
2253
  <a
2250
2254
  href="#"
2251
2255
  [id]="'row-' + row().index + '_action-edit-button'"
@@ -2333,7 +2337,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
2333
2337
  args: [{
2334
2338
  selector: "ng2-st-tbody-edit-delete",
2335
2339
  template: `
2336
- @if (!row().pending) { @if (isActionEdit) {
2340
+ @if (!row().pending()) { @if (isActionEdit) {
2337
2341
  <a
2338
2342
  href="#"
2339
2343
  [id]="'row-' + row().index + '_action-edit-button'"
@@ -2455,7 +2459,7 @@ class Ng2SmartTableTbodyComponent {
2455
2459
  return item?.id || index;
2456
2460
  }
2457
2461
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTbodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2458
- 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"] }] }); }
2462
+ 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"] }] }); }
2459
2463
  }
2460
2464
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTbodyComponent, decorators: [{
2461
2465
  type: Component,
@@ -2466,7 +2470,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
2466
2470
  TbodyCreateCancelComponent,
2467
2471
  NgTemplateOutlet,
2468
2472
  CellComponent,
2469
- ], 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"] }]
2473
+ ], 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"] }]
2470
2474
  }] });
2471
2475
 
2472
2476
  class FilterDefault {
@@ -2669,7 +2673,7 @@ class SelectFilterComponent extends DefaultFilter {
2669
2673
  [(ngModel)]="query">
2670
2674
 
2671
2675
  <option value="">{{ column().getFilterConfig().selectText }}</option>
2672
- @for (option of column().getFilterConfig().list; track option.value) {
2676
+ @for (option of column().getFilterConfig().list; track $index) {
2673
2677
  <option [value]="option.value">
2674
2678
  {{ option.title }}
2675
2679
  </option>
@@ -2688,7 +2692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
2688
2692
  [(ngModel)]="query">
2689
2693
 
2690
2694
  <option value="">{{ column().getFilterConfig().selectText }}</option>
2691
- @for (option of column().getFilterConfig().list; track option.value) {
2695
+ @for (option of column().getFilterConfig().list; track $index) {
2692
2696
  <option [value]="option.value">
2693
2697
  {{ option.title }}
2694
2698
  </option>
@@ -2953,7 +2957,7 @@ class TheadFiltersRowComponent {
2953
2957
  [grid]="grid()"
2954
2958
  (create)="create.emit($event)"
2955
2959
  ></th>
2956
- } @for (column of getVisibleColumns(); track column.id) {
2960
+ } @for (column of getVisibleColumns(); track column.id + $index) {
2957
2961
  <th class="ng2-smart-th {{ column.id }}">
2958
2962
  <ng2-smart-table-filter
2959
2963
  [source]="source()"
@@ -2987,7 +2991,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
2987
2991
  [grid]="grid()"
2988
2992
  (create)="create.emit($event)"
2989
2993
  ></th>
2990
- } @for (column of getVisibleColumns(); track column.id) {
2994
+ } @for (column of getVisibleColumns(); track column.id + $index) {
2991
2995
  <th class="ng2-smart-th {{ column.id }}">
2992
2996
  <ng2-smart-table-filter
2993
2997
  [source]="source()"
@@ -3098,7 +3102,7 @@ class TheadFormRowComponent {
3098
3102
  (create)="onCreate($event)"
3099
3103
  ></ng2-st-actions>
3100
3104
  </td>
3101
- } @for (cell of getVisibleCells(); track cell.getId()) {
3105
+ } @for (cell of getVisibleCells(); track cell.getId()+ $index) {
3102
3106
  <td>
3103
3107
  <ng2-smart-table-cell
3104
3108
  [cell]="cell"
@@ -3131,7 +3135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
3131
3135
  (create)="onCreate($event)"
3132
3136
  ></ng2-st-actions>
3133
3137
  </td>
3134
- } @for (cell of getVisibleCells(); track cell.getId()) {
3138
+ } @for (cell of getVisibleCells(); track cell.getId()+ $index) {
3135
3139
  <td>
3136
3140
  <ng2-smart-table-cell
3137
3141
  [cell]="cell"
@@ -3344,7 +3348,7 @@ class TheadTitlesRowComponent {
3344
3348
  } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
3345
3349
 
3346
3350
  <th ng2-st-actions-title [grid]="grid()"></th>
3347
- } @for (column of getVisibleColumns(); track column.id) {
3351
+ } @for (column of getVisibleColumns(); track column.id + $index) {
3348
3352
  <th
3349
3353
  class="ng2-smart-th {{ column.id }}"
3350
3354
  [class]="column.class"
@@ -3375,7 +3379,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
3375
3379
  } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
3376
3380
 
3377
3381
  <th ng2-st-actions-title [grid]="grid()"></th>
3378
- } @for (column of getVisibleColumns(); track column.id) {
3382
+ } @for (column of getVisibleColumns(); track column.id + $index) {
3379
3383
  <th
3380
3384
  class="ng2-smart-th {{ column.id }}"
3381
3385
  [class]="column.class"