@den4ik92/ng2-smart-table 19.1.4 → 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 (3) hide show
  1. package/fesm2022/den4ik92-ng2-smart-table.mjs +17 -16
  2. package/fesm2022/den4ik92-ng2-smart-table.mjs.map +1 -1
  3. 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 {
@@ -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()"
@@ -1973,6 +1973,7 @@ class Grid {
1973
1973
  })
1974
1974
  .catch(() => {
1975
1975
  row.pending.set(false);
1976
+ row.isInEditing = false;
1976
1977
  });
1977
1978
  if (this.getSetting("edit.confirmSave", false)) {
1978
1979
  confirmEmitter.emit({
@@ -2458,7 +2459,7 @@ class Ng2SmartTableTbodyComponent {
2458
2459
  return item?.id || index;
2459
2460
  }
2460
2461
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTbodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2461
- 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"] }] }); }
2462
2463
  }
2463
2464
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTbodyComponent, decorators: [{
2464
2465
  type: Component,
@@ -2469,7 +2470,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
2469
2470
  TbodyCreateCancelComponent,
2470
2471
  NgTemplateOutlet,
2471
2472
  CellComponent,
2472
- ], 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"] }]
2473
2474
  }] });
2474
2475
 
2475
2476
  class FilterDefault {
@@ -2672,7 +2673,7 @@ class SelectFilterComponent extends DefaultFilter {
2672
2673
  [(ngModel)]="query">
2673
2674
 
2674
2675
  <option value="">{{ column().getFilterConfig().selectText }}</option>
2675
- @for (option of column().getFilterConfig().list; track option.value) {
2676
+ @for (option of column().getFilterConfig().list; track $index) {
2676
2677
  <option [value]="option.value">
2677
2678
  {{ option.title }}
2678
2679
  </option>
@@ -2691,7 +2692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
2691
2692
  [(ngModel)]="query">
2692
2693
 
2693
2694
  <option value="">{{ column().getFilterConfig().selectText }}</option>
2694
- @for (option of column().getFilterConfig().list; track option.value) {
2695
+ @for (option of column().getFilterConfig().list; track $index) {
2695
2696
  <option [value]="option.value">
2696
2697
  {{ option.title }}
2697
2698
  </option>
@@ -2956,7 +2957,7 @@ class TheadFiltersRowComponent {
2956
2957
  [grid]="grid()"
2957
2958
  (create)="create.emit($event)"
2958
2959
  ></th>
2959
- } @for (column of getVisibleColumns(); track column.id) {
2960
+ } @for (column of getVisibleColumns(); track column.id + $index) {
2960
2961
  <th class="ng2-smart-th {{ column.id }}">
2961
2962
  <ng2-smart-table-filter
2962
2963
  [source]="source()"
@@ -2990,7 +2991,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
2990
2991
  [grid]="grid()"
2991
2992
  (create)="create.emit($event)"
2992
2993
  ></th>
2993
- } @for (column of getVisibleColumns(); track column.id) {
2994
+ } @for (column of getVisibleColumns(); track column.id + $index) {
2994
2995
  <th class="ng2-smart-th {{ column.id }}">
2995
2996
  <ng2-smart-table-filter
2996
2997
  [source]="source()"
@@ -3101,7 +3102,7 @@ class TheadFormRowComponent {
3101
3102
  (create)="onCreate($event)"
3102
3103
  ></ng2-st-actions>
3103
3104
  </td>
3104
- } @for (cell of getVisibleCells(); track cell.getId()) {
3105
+ } @for (cell of getVisibleCells(); track cell.getId()+ $index) {
3105
3106
  <td>
3106
3107
  <ng2-smart-table-cell
3107
3108
  [cell]="cell"
@@ -3134,7 +3135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
3134
3135
  (create)="onCreate($event)"
3135
3136
  ></ng2-st-actions>
3136
3137
  </td>
3137
- } @for (cell of getVisibleCells(); track cell.getId()) {
3138
+ } @for (cell of getVisibleCells(); track cell.getId()+ $index) {
3138
3139
  <td>
3139
3140
  <ng2-smart-table-cell
3140
3141
  [cell]="cell"
@@ -3347,7 +3348,7 @@ class TheadTitlesRowComponent {
3347
3348
  } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
3348
3349
 
3349
3350
  <th ng2-st-actions-title [grid]="grid()"></th>
3350
- } @for (column of getVisibleColumns(); track column.id) {
3351
+ } @for (column of getVisibleColumns(); track column.id + $index) {
3351
3352
  <th
3352
3353
  class="ng2-smart-th {{ column.id }}"
3353
3354
  [class]="column.class"
@@ -3378,7 +3379,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
3378
3379
  } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
3379
3380
 
3380
3381
  <th ng2-st-actions-title [grid]="grid()"></th>
3381
- } @for (column of getVisibleColumns(); track column.id) {
3382
+ } @for (column of getVisibleColumns(); track column.id + $index) {
3382
3383
  <th
3383
3384
  class="ng2-smart-th {{ column.id }}"
3384
3385
  [class]="column.class"