@den4ik92/ng2-smart-table 19.1.4 → 19.1.6

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 (8) hide show
  1. package/fesm2022/den4ik92-ng2-smart-table.mjs +96 -115
  2. package/fesm2022/den4ik92-ng2-smart-table.mjs.map +1 -1
  3. package/lib/lib/data-set/row.d.ts +2 -3
  4. package/lib/lib/data-source/data-source.d.ts +2 -3
  5. package/lib/lib/grid.d.ts +7 -8
  6. package/lib/lib/interfaces/smart-table.models.d.ts +1 -1
  7. package/lib/ng2-smart-table.component.d.ts +12 -13
  8. 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 {
@@ -421,8 +421,8 @@ class Row {
421
421
  this.data = data;
422
422
  this._dataSet = _dataSet;
423
423
  this.pending = signal(false);
424
- this.isSelected = false;
425
- this.isInEditing = false;
424
+ this.isSelected = signal(false);
425
+ this.isInEditing = signal(false);
426
426
  this.cells = [];
427
427
  this.process();
428
428
  }
@@ -435,9 +435,6 @@ class Row {
435
435
  getData() {
436
436
  return this.data;
437
437
  }
438
- getIsSelected() {
439
- return this.isSelected;
440
- }
441
438
  getNewData() {
442
439
  const values = Object.assign({}, this.data);
443
440
  this.getCells().forEach((cell) => values[cell.getColumn().id] = cell.newValue);
@@ -1049,7 +1046,7 @@ class PagerComponent {
1049
1046
  [(ngModel)]="currentPerPage"
1050
1047
  id="per-page"
1051
1048
  >
1052
- @for (item of perPageSelect; track item) {
1049
+ @for (item of perPageSelect; track $index) {
1053
1050
  <option [value]="item">{{ item }}</option>
1054
1051
  }
1055
1052
  </select>
@@ -1148,7 +1145,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
1148
1145
  [(ngModel)]="currentPerPage"
1149
1146
  id="per-page"
1150
1147
  >
1151
- @for (item of perPageSelect; track item) {
1148
+ @for (item of perPageSelect; track $index) {
1152
1149
  <option [value]="item">{{ item }}</option>
1153
1150
  }
1154
1151
  </select>
@@ -1301,7 +1298,7 @@ class SelectEditorComponent extends DefaultEditor {
1301
1298
  [name]="cell().getId()"
1302
1299
  [disabled]="!cell().isEditable()"
1303
1300
  >
1304
- @for (option of cell().getColumn().getConfig()?.list; track option.value) {
1301
+ @for (option of cell().getColumn().getConfig()?.list; track $index) {
1305
1302
  <option
1306
1303
  [value]="option.value"
1307
1304
  [selected]="option.value === cell().getValue()"
@@ -1324,7 +1321,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
1324
1321
  [name]="cell().getId()"
1325
1322
  [disabled]="!cell().isEditable()"
1326
1323
  >
1327
- @for (option of cell().getColumn().getConfig()?.list; track option.value) {
1324
+ @for (option of cell().getColumn().getConfig()?.list; track $index) {
1328
1325
  <option
1329
1326
  [value]="option.value"
1330
1327
  [selected]="option.value === cell().getValue()"
@@ -1574,7 +1571,7 @@ class TbodyCreateCancelComponent {
1574
1571
  event.preventDefault();
1575
1572
  event.stopPropagation();
1576
1573
  this.editCancel().emit(true);
1577
- this.row().isInEditing = false;
1574
+ this.row().isInEditing.set(false);
1578
1575
  }
1579
1576
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TbodyCreateCancelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1580
1577
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TbodyCreateCancelComponent, isStandalone: true, selector: "ng2-st-tbody-create-cancel", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, editConfirm: { classPropertyName: "editConfirm", publicName: "editConfirm", isSignal: true, isRequired: true, transformFunction: null }, editCancel: { classPropertyName: "editCancel", publicName: "editCancel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
@@ -1777,23 +1774,23 @@ class DataSet {
1777
1774
  }
1778
1775
  setSelectAll(state) {
1779
1776
  this.rows.forEach((row) => {
1780
- row.isSelected = state;
1777
+ row.isSelected.set(state);
1781
1778
  this.storeSelectedRow(row);
1782
1779
  });
1783
1780
  }
1784
1781
  deselectAll() {
1785
1782
  this.rows.forEach((row) => {
1786
- row.isSelected = false;
1783
+ row.isSelected.set(false);
1787
1784
  });
1788
1785
  // we need to clear selectedRow field because no one row selected
1789
1786
  this.selectedRows.clear();
1790
1787
  }
1791
1788
  selectRow(row, state) {
1792
- row.isSelected = state;
1789
+ row.isSelected.set(state);
1793
1790
  this.storeSelectedRow(row);
1794
1791
  }
1795
1792
  multipleSelectRow(row) {
1796
- row.isSelected = !row.isSelected;
1793
+ row.isSelected.set(!row.isSelected());
1797
1794
  this.storeSelectedRow(row);
1798
1795
  return row;
1799
1796
  }
@@ -1802,7 +1799,7 @@ class DataSet {
1802
1799
  }
1803
1800
  createNewRow() {
1804
1801
  this.newRow = new Row(-1, {}, this);
1805
- this.newRow.isInEditing = true;
1802
+ this.newRow.isInEditing.set(true);
1806
1803
  }
1807
1804
  /**
1808
1805
  * Create columns by mapping from the settings
@@ -1822,15 +1819,15 @@ class DataSet {
1822
1819
  this.rows = [];
1823
1820
  this.data.forEach((el, index) => {
1824
1821
  const row = new Row(index, el, this);
1825
- row.isSelected = this.selectedRows.has(row.getData());
1822
+ row.isSelected.set(this.selectedRows.has(row.getData()));
1826
1823
  this.rows.push(row);
1827
1824
  });
1828
1825
  }
1829
1826
  get isAllSelected() {
1830
- return this.rows.every((row) => row.isSelected);
1827
+ return this.rows.every((row) => row.isSelected());
1831
1828
  }
1832
1829
  storeSelectedRow(row) {
1833
- if (row.isSelected) {
1830
+ if (row.isSelected()) {
1834
1831
  this.selectedRows.add(row.getData());
1835
1832
  }
1836
1833
  else {
@@ -1884,31 +1881,9 @@ class Grid {
1884
1881
  this.setColumnsSortState(settings.columns);
1885
1882
  }
1886
1883
  }
1887
- updateSettingsAndDataSet(settings) {
1888
- this.settings.set(settings);
1889
- this.dataSet = new DataSet([], settings.columns);
1890
- if (this.source) {
1891
- this.source.refresh();
1892
- }
1893
- }
1894
1884
  getDataSet() {
1895
1885
  return this.dataSet;
1896
1886
  }
1897
- setSource(source) {
1898
- this.source = this.prepareSource(source);
1899
- this.detach();
1900
- this.sourceOnChangedSubscription = this.source
1901
- .onChanged()
1902
- .subscribe((changes) => this.processDataChange(changes));
1903
- this.sourceOnUpdatedSubscription = this.source
1904
- .onUpdated()
1905
- .subscribe((data) => {
1906
- const changedRow = this.dataSet.findRowByData(data);
1907
- if (changedRow) {
1908
- changedRow.setData(data);
1909
- }
1910
- });
1911
- }
1912
1887
  getSetting(name, defaultValue) {
1913
1888
  return getDeepFromObject(this.settings(), name, defaultValue);
1914
1889
  }
@@ -1931,7 +1906,7 @@ class Grid {
1931
1906
  return this.onDeselectRowSource.asObservable();
1932
1907
  }
1933
1908
  edit(row) {
1934
- row.isInEditing = true;
1909
+ row.isInEditing.set(true);
1935
1910
  }
1936
1911
  create(row, confirmEmitter) {
1937
1912
  row.pending.set(true);
@@ -1968,11 +1943,12 @@ class Grid {
1968
1943
  row.pending.set(false);
1969
1944
  newData = newData || row.getNewData();
1970
1945
  this.source.update(row.getData(), newData).then(() => {
1971
- row.isInEditing = false;
1946
+ row.isInEditing.set(false);
1972
1947
  });
1973
1948
  })
1974
1949
  .catch(() => {
1975
1950
  row.pending.set(false);
1951
+ row.isInEditing.set(false);
1976
1952
  });
1977
1953
  if (this.getSetting("edit.confirmSave", false)) {
1978
1954
  confirmEmitter.emit({
@@ -2010,38 +1986,29 @@ class Grid {
2010
1986
  deferred.resolve(false);
2011
1987
  row.pending.set(false);
2012
1988
  }
2013
- if (row.isSelected) {
1989
+ if (row.isSelected()) {
2014
1990
  this.dataSet.selectRow(row, false);
2015
1991
  }
2016
1992
  }
2017
- processDataChange(changes) {
2018
- if (this.shouldProcessChange(changes)) {
2019
- if (changes["action"] === "load") {
2020
- this.dataSet.deselectAll();
2021
- }
2022
- this.dataSet.setData(changes["elements"]);
2023
- }
2024
- }
2025
- shouldProcessChange(changes) {
2026
- if (["filter", "sort", "page", "remove", "refresh", "load", "paging"].indexOf(changes["action"]) !== -1) {
2027
- return true;
1993
+ processDataChange({ action, elements }) {
1994
+ if (action === "load") {
1995
+ this.dataSet.deselectAll();
2028
1996
  }
2029
- else if (["prepend", "append"].indexOf(changes["action"]) !== -1 &&
2030
- !this.getSetting("pager.display")) {
2031
- return true;
1997
+ if (action !== "update") {
1998
+ this.dataSet.setData(elements);
2032
1999
  }
2033
- return false;
2034
2000
  }
2035
2001
  prepareSource(source) {
2002
+ const preparedSource = source || new LocalDataSource();
2036
2003
  const initialSort = this.getInitialSort();
2037
2004
  if (initialSort) {
2038
- source.setSort([initialSort], false);
2005
+ preparedSource.setSort([initialSort], false);
2039
2006
  }
2040
- if (this.getSetting("pager.display") === true) {
2041
- source.setPaging(1, this.getSetting("pager.perPage"), false);
2007
+ if (this.getSetting("pager.display", false) === true) {
2008
+ preparedSource.setPaging(1, this.getSetting("pager.perPage"), false);
2042
2009
  }
2043
- source.refresh();
2044
- return source;
2010
+ preparedSource.refresh();
2011
+ return preparedSource;
2045
2012
  }
2046
2013
  getInitialSort() {
2047
2014
  const defaultSortColumn = this.getColumns().find((column) => column.isSortable && column.defaultSortDirection);
@@ -2066,6 +2033,28 @@ class Grid {
2066
2033
  getLastRow() {
2067
2034
  return this.dataSet.getLastRow();
2068
2035
  }
2036
+ updateSettingsAndDataSet(settings) {
2037
+ this.settings.set(settings);
2038
+ this.dataSet = new DataSet([], settings.columns);
2039
+ if (this.source) {
2040
+ this.source.refresh();
2041
+ }
2042
+ }
2043
+ setSource(source) {
2044
+ this.source = this.prepareSource(source);
2045
+ this.detach();
2046
+ this.sourceOnChangedSubscription = this.source
2047
+ .onChanged()
2048
+ .subscribe((changes) => this.processDataChange(changes));
2049
+ this.sourceOnUpdatedSubscription = this.source
2050
+ .onUpdated()
2051
+ .subscribe((data) => {
2052
+ const changedRow = this.dataSet.findRowByData(data);
2053
+ if (changedRow) {
2054
+ changedRow.setData(data);
2055
+ }
2056
+ });
2057
+ }
2069
2058
  // ------------------------------- column sort
2070
2059
  async getSortedTableColumns(newState, columns) {
2071
2060
  const sortedArray = [];
@@ -2458,7 +2447,7 @@ class Ng2SmartTableTbodyComponent {
2458
2447
  return item?.id || index;
2459
2448
  }
2460
2449
  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"] }] }); }
2450
+ 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
2451
  }
2463
2452
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTbodyComponent, decorators: [{
2464
2453
  type: Component,
@@ -2469,7 +2458,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
2469
2458
  TbodyCreateCancelComponent,
2470
2459
  NgTemplateOutlet,
2471
2460
  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"] }]
2461
+ ], 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
2462
  }] });
2474
2463
 
2475
2464
  class FilterDefault {
@@ -2672,7 +2661,7 @@ class SelectFilterComponent extends DefaultFilter {
2672
2661
  [(ngModel)]="query">
2673
2662
 
2674
2663
  <option value="">{{ column().getFilterConfig().selectText }}</option>
2675
- @for (option of column().getFilterConfig().list; track option.value) {
2664
+ @for (option of column().getFilterConfig().list; track $index) {
2676
2665
  <option [value]="option.value">
2677
2666
  {{ option.title }}
2678
2667
  </option>
@@ -2691,7 +2680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
2691
2680
  [(ngModel)]="query">
2692
2681
 
2693
2682
  <option value="">{{ column().getFilterConfig().selectText }}</option>
2694
- @for (option of column().getFilterConfig().list; track option.value) {
2683
+ @for (option of column().getFilterConfig().list; track $index) {
2695
2684
  <option [value]="option.value">
2696
2685
  {{ option.title }}
2697
2686
  </option>
@@ -2956,7 +2945,7 @@ class TheadFiltersRowComponent {
2956
2945
  [grid]="grid()"
2957
2946
  (create)="create.emit($event)"
2958
2947
  ></th>
2959
- } @for (column of getVisibleColumns(); track column.id) {
2948
+ } @for (column of getVisibleColumns(); track column.id + $index) {
2960
2949
  <th class="ng2-smart-th {{ column.id }}">
2961
2950
  <ng2-smart-table-filter
2962
2951
  [source]="source()"
@@ -2990,7 +2979,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
2990
2979
  [grid]="grid()"
2991
2980
  (create)="create.emit($event)"
2992
2981
  ></th>
2993
- } @for (column of getVisibleColumns(); track column.id) {
2982
+ } @for (column of getVisibleColumns(); track column.id + $index) {
2994
2983
  <th class="ng2-smart-th {{ column.id }}">
2995
2984
  <ng2-smart-table-filter
2996
2985
  [source]="source()"
@@ -3101,12 +3090,12 @@ class TheadFormRowComponent {
3101
3090
  (create)="onCreate($event)"
3102
3091
  ></ng2-st-actions>
3103
3092
  </td>
3104
- } @for (cell of getVisibleCells(); track cell.getId()) {
3093
+ } @for (cell of getVisibleCells(); track cell.getId()+ $index) {
3105
3094
  <td>
3106
3095
  <ng2-smart-table-cell
3107
3096
  [cell]="cell"
3108
3097
  [inputClass]="addInputClass()"
3109
- [isInEditing]="grid().getNewRow().isInEditing"
3098
+ [isInEditing]="grid().getNewRow().isInEditing()"
3110
3099
  >
3111
3100
  </ng2-smart-table-cell>
3112
3101
  </td>
@@ -3134,12 +3123,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
3134
3123
  (create)="onCreate($event)"
3135
3124
  ></ng2-st-actions>
3136
3125
  </td>
3137
- } @for (cell of getVisibleCells(); track cell.getId()) {
3126
+ } @for (cell of getVisibleCells(); track cell.getId()+ $index) {
3138
3127
  <td>
3139
3128
  <ng2-smart-table-cell
3140
3129
  [cell]="cell"
3141
3130
  [inputClass]="addInputClass()"
3142
- [isInEditing]="grid().getNewRow().isInEditing"
3131
+ [isInEditing]="grid().getNewRow().isInEditing()"
3143
3132
  >
3144
3133
  </ng2-smart-table-cell>
3145
3134
  </td>
@@ -3347,7 +3336,7 @@ class TheadTitlesRowComponent {
3347
3336
  } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
3348
3337
 
3349
3338
  <th ng2-st-actions-title [grid]="grid()"></th>
3350
- } @for (column of getVisibleColumns(); track column.id) {
3339
+ } @for (column of getVisibleColumns(); track column.id + $index) {
3351
3340
  <th
3352
3341
  class="ng2-smart-th {{ column.id }}"
3353
3342
  [class]="column.class"
@@ -3378,7 +3367,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
3378
3367
  } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
3379
3368
 
3380
3369
  <th ng2-st-actions-title [grid]="grid()"></th>
3381
- } @for (column of getVisibleColumns(); track column.id) {
3370
+ } @for (column of getVisibleColumns(); track column.id + $index) {
3382
3371
  <th
3383
3372
  class="ng2-smart-th {{ column.id }}"
3384
3373
  [class]="column.class"
@@ -3434,6 +3423,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
3434
3423
 
3435
3424
  class Ng2SmartTableComponent {
3436
3425
  constructor() {
3426
+ this.source = input.required();
3427
+ this.settings = input.required();
3437
3428
  this.multiRowSelect = output();
3438
3429
  this.rowClicked = output();
3439
3430
  this.columnsSorted = output();
@@ -3445,34 +3436,37 @@ class Ng2SmartTableComponent {
3445
3436
  this.deleteConfirm = output();
3446
3437
  this.editConfirm = output();
3447
3438
  this.createConfirm = output();
3448
- this.tableClass = "";
3449
- this.tableId = "";
3450
- this.perPageSelect = [];
3451
- this.isPagerDisplay = false;
3452
- this.rowClassFunction = () => '';
3453
- effect(() => {
3454
- const settings = this.grid.settings();
3455
- this.tableId = settings.attr?.id || getRandomId();
3456
- this.tableClass = settings.attr?.class || '';
3457
- this.isPagerDisplay = this.grid.getSetting("pager.display", false);
3458
- this.perPageSelect = this.grid.getSetting("pager.perPageSelect");
3459
- this.rowClassFunction = settings.rowClassFunction || (() => "");
3439
+ this.tableClass = computed(() => {
3440
+ return this.settings().attr?.class || "";
3441
+ });
3442
+ this.tableId = computed(() => {
3443
+ return this.settings().attr?.id || getRandomId();
3444
+ });
3445
+ this.perPageSelect = computed(() => {
3446
+ const { pager } = this.settings();
3447
+ return pager ? pager.perPageSelect || [] : [];
3448
+ });
3449
+ this.isPagerDisplay = computed(() => {
3450
+ const { pager } = this.settings();
3451
+ return pager ? pager.display : false;
3452
+ });
3453
+ this.rowClassFunction = computed(() => {
3454
+ return this.settings().rowClassFunction || (() => "");
3460
3455
  });
3461
3456
  }
3462
- ngOnChanges({ settings, source }) {
3457
+ ngOnChanges({ settings }) {
3463
3458
  if (this.grid) {
3464
3459
  if (settings) {
3465
- this.grid.setSettings(this.settings);
3466
- }
3467
- if (source) {
3468
- this.source = this.prepareSource();
3469
- this.grid.setSource(this.source);
3460
+ this.grid.setSettings(this.settings());
3470
3461
  }
3471
3462
  }
3472
3463
  else {
3473
3464
  this.initGrid();
3474
3465
  }
3475
3466
  }
3467
+ ngOnDestroy() {
3468
+ this.grid.detach();
3469
+ }
3476
3470
  multipleSelectRow(row) {
3477
3471
  this.grid.multipleSelectRow(row);
3478
3472
  this.emitUserSelectRow(row);
@@ -3487,30 +3481,23 @@ class Ng2SmartTableComponent {
3487
3481
  emitUserRowClicked(row) {
3488
3482
  this.rowClicked.emit({
3489
3483
  data: row ? row.getData() : null,
3490
- source: this.source,
3484
+ source: this.source(),
3491
3485
  });
3492
3486
  }
3493
3487
  initGrid() {
3494
- this.source = this.prepareSource();
3495
- this.grid = new Grid(this.source, this.settings);
3488
+ this.grid = new Grid(this.source(), this.settings());
3496
3489
  this.grid.setColumnsSortedEmitter(this.columnsSorted);
3497
3490
  }
3498
- prepareSource() {
3499
- if (this.source instanceof LocalDataSource) {
3500
- return this.source;
3501
- }
3502
- return new LocalDataSource();
3503
- }
3504
3491
  emitUserSelectRow(row) {
3505
3492
  this.multiRowSelect.emit({
3506
3493
  data: row ? row.getData() : null,
3507
- isSelected: row ? row.getIsSelected() : false,
3508
- source: this.source,
3494
+ isSelected: row ? row.isSelected() : false,
3495
+ source: this.source(),
3509
3496
  selected: this.grid.dataSet.getSelectedRowsData(),
3510
3497
  });
3511
3498
  }
3512
3499
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3513
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableComponent, isStandalone: true, selector: "ng2-smart-table", inputs: { source: "source", settings: "settings" }, outputs: { multiRowSelect: "multiRowSelect", rowClicked: "rowClicked", columnsSorted: "columnsSorted", delete: "delete", edit: "edit", editCancel: "editCancel", create: "create", custom: "custom", deleteConfirm: "deleteConfirm", editConfirm: "editConfirm", createConfirm: "createConfirm" }, usesOnChanges: true, ngImport: i0, template: "<table [id]=\"tableId\" [class]=\"tableClass\">\n <thead\n ng2-st-thead\n [grid]=\"grid\"\n [source]=\"source\"\n [createConfirm]=\"createConfirm\"\n (create)=\"create.emit($event)\"\n (selectAllRows)=\"onSelectAllRows()\"\n ></thead>\n\n <tbody\n ng2-st-tbody\n [grid]=\"grid\"\n [source]=\"source\"\n [deleteConfirm]=\"deleteConfirm\"\n [editConfirm]=\"editConfirm\"\n [createConfirm]=\"createConfirm\"\n [rowClassFunction]=\"rowClassFunction\"\n (edit)=\"edit.emit($event)\"\n (editCancel)=\"editCancel.emit($event)\"\n (delete)=\"delete.emit($event)\"\n (custom)=\"custom.emit($event)\"\n (userClickedRow)=\"emitUserRowClicked($event)\"\n (multipleSelectRow)=\"multipleSelectRow($event)\"\n ></tbody>\n</table>\n\n@if (isPagerDisplay) {\n<ng2-smart-table-pager [source]=\"source\" [perPageSelect]=\"perPageSelect\">\n</ng2-smart-table-pager>\n}\n", styles: [":host{font-size:1rem}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep button,:host ::ng-deep input,:host ::ng-deep optgroup,:host ::ng-deep select,:host ::ng-deep textarea{color:inherit;font:inherit;margin:0}:host ::ng-deep table{line-height:1.5em;border-collapse:collapse;border-spacing:0;display:table;width:100%;max-width:100%;word-break:normal;word-break:keep-all;overflow:auto}:host ::ng-deep table tr th{font-weight:700}:host ::ng-deep table tr section{font-size:.75em;font-weight:700}:host ::ng-deep table tr td,:host ::ng-deep table tr th{font-size:.875em;margin:0;padding:.5em 1em}:host ::ng-deep a{color:#1e6bb8;text-decoration:none}:host ::ng-deep a:hover{text-decoration:underline}\n"], dependencies: [{ kind: "component", type: Ng2SmartTableTheadComponent, selector: "[ng2-st-thead]", inputs: ["grid", "source", "createConfirm"], outputs: ["sort", "selectAllRows", "create", "filter"] }, { kind: "component", type: Ng2SmartTableTbodyComponent, selector: "[ng2-st-tbody]", inputs: ["grid", "source", "deleteConfirm", "createConfirm", "editConfirm", "rowClassFunction"], outputs: ["save", "edit", "editCancel", "delete", "custom", "edited", "userSelectRow", "userClickedRow", "multipleSelectRow"] }, { kind: "component", type: PagerComponent, selector: "ng2-smart-table-pager", inputs: ["source", "perPageSelect"], outputs: ["changePage"] }] }); }
3500
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableComponent, isStandalone: true, selector: "ng2-smart-table", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { multiRowSelect: "multiRowSelect", rowClicked: "rowClicked", columnsSorted: "columnsSorted", delete: "delete", edit: "edit", editCancel: "editCancel", create: "create", custom: "custom", deleteConfirm: "deleteConfirm", editConfirm: "editConfirm", createConfirm: "createConfirm" }, usesOnChanges: true, ngImport: i0, template: "<table [id]=\"tableId()\" [class]=\"tableClass()\">\n <thead\n ng2-st-thead\n [grid]=\"grid\"\n [source]=\"source()\"\n [createConfirm]=\"createConfirm\"\n (create)=\"create.emit($event)\"\n (selectAllRows)=\"onSelectAllRows()\"\n ></thead>\n\n <tbody\n ng2-st-tbody\n [grid]=\"grid\"\n [source]=\"source()\"\n [deleteConfirm]=\"deleteConfirm\"\n [editConfirm]=\"editConfirm\"\n [createConfirm]=\"createConfirm\"\n [rowClassFunction]=\"rowClassFunction()\"\n (edit)=\"edit.emit($event)\"\n (editCancel)=\"editCancel.emit($event)\"\n (delete)=\"delete.emit($event)\"\n (custom)=\"custom.emit($event)\"\n (userClickedRow)=\"emitUserRowClicked($event)\"\n (multipleSelectRow)=\"multipleSelectRow($event)\"\n ></tbody>\n</table>\n\n@if (isPagerDisplay()) {\n<ng2-smart-table-pager [source]=\"source()\" [perPageSelect]=\"perPageSelect()\">\n</ng2-smart-table-pager>\n}\n", styles: [":host{font-size:1rem}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep button,:host ::ng-deep input,:host ::ng-deep optgroup,:host ::ng-deep select,:host ::ng-deep textarea{color:inherit;font:inherit;margin:0}:host ::ng-deep table{line-height:1.5em;border-collapse:collapse;border-spacing:0;display:table;width:100%;max-width:100%;word-break:normal;word-break:keep-all;overflow:auto}:host ::ng-deep table tr th{font-weight:700}:host ::ng-deep table tr section{font-size:.75em;font-weight:700}:host ::ng-deep table tr td,:host ::ng-deep table tr th{font-size:.875em;margin:0;padding:.5em 1em}:host ::ng-deep a{color:#1e6bb8;text-decoration:none}:host ::ng-deep a:hover{text-decoration:underline}\n"], dependencies: [{ kind: "component", type: Ng2SmartTableTheadComponent, selector: "[ng2-st-thead]", inputs: ["grid", "source", "createConfirm"], outputs: ["sort", "selectAllRows", "create", "filter"] }, { kind: "component", type: Ng2SmartTableTbodyComponent, selector: "[ng2-st-tbody]", inputs: ["grid", "source", "deleteConfirm", "createConfirm", "editConfirm", "rowClassFunction"], outputs: ["save", "edit", "editCancel", "delete", "custom", "edited", "userSelectRow", "userClickedRow", "multipleSelectRow"] }, { kind: "component", type: PagerComponent, selector: "ng2-smart-table-pager", inputs: ["source", "perPageSelect"], outputs: ["changePage"] }] }); }
3514
3501
  }
3515
3502
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableComponent, decorators: [{
3516
3503
  type: Component,
@@ -3518,14 +3505,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
3518
3505
  Ng2SmartTableTheadComponent,
3519
3506
  Ng2SmartTableTbodyComponent,
3520
3507
  PagerComponent,
3521
- ], template: "<table [id]=\"tableId\" [class]=\"tableClass\">\n <thead\n ng2-st-thead\n [grid]=\"grid\"\n [source]=\"source\"\n [createConfirm]=\"createConfirm\"\n (create)=\"create.emit($event)\"\n (selectAllRows)=\"onSelectAllRows()\"\n ></thead>\n\n <tbody\n ng2-st-tbody\n [grid]=\"grid\"\n [source]=\"source\"\n [deleteConfirm]=\"deleteConfirm\"\n [editConfirm]=\"editConfirm\"\n [createConfirm]=\"createConfirm\"\n [rowClassFunction]=\"rowClassFunction\"\n (edit)=\"edit.emit($event)\"\n (editCancel)=\"editCancel.emit($event)\"\n (delete)=\"delete.emit($event)\"\n (custom)=\"custom.emit($event)\"\n (userClickedRow)=\"emitUserRowClicked($event)\"\n (multipleSelectRow)=\"multipleSelectRow($event)\"\n ></tbody>\n</table>\n\n@if (isPagerDisplay) {\n<ng2-smart-table-pager [source]=\"source\" [perPageSelect]=\"perPageSelect\">\n</ng2-smart-table-pager>\n}\n", styles: [":host{font-size:1rem}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep button,:host ::ng-deep input,:host ::ng-deep optgroup,:host ::ng-deep select,:host ::ng-deep textarea{color:inherit;font:inherit;margin:0}:host ::ng-deep table{line-height:1.5em;border-collapse:collapse;border-spacing:0;display:table;width:100%;max-width:100%;word-break:normal;word-break:keep-all;overflow:auto}:host ::ng-deep table tr th{font-weight:700}:host ::ng-deep table tr section{font-size:.75em;font-weight:700}:host ::ng-deep table tr td,:host ::ng-deep table tr th{font-size:.875em;margin:0;padding:.5em 1em}:host ::ng-deep a{color:#1e6bb8;text-decoration:none}:host ::ng-deep a:hover{text-decoration:underline}\n"] }]
3522
- }], ctorParameters: () => [], propDecorators: { source: [{
3523
- type: Input,
3524
- args: [{ required: true }]
3525
- }], settings: [{
3526
- type: Input,
3527
- args: [{ required: true }]
3528
- }] } });
3508
+ ], template: "<table [id]=\"tableId()\" [class]=\"tableClass()\">\n <thead\n ng2-st-thead\n [grid]=\"grid\"\n [source]=\"source()\"\n [createConfirm]=\"createConfirm\"\n (create)=\"create.emit($event)\"\n (selectAllRows)=\"onSelectAllRows()\"\n ></thead>\n\n <tbody\n ng2-st-tbody\n [grid]=\"grid\"\n [source]=\"source()\"\n [deleteConfirm]=\"deleteConfirm\"\n [editConfirm]=\"editConfirm\"\n [createConfirm]=\"createConfirm\"\n [rowClassFunction]=\"rowClassFunction()\"\n (edit)=\"edit.emit($event)\"\n (editCancel)=\"editCancel.emit($event)\"\n (delete)=\"delete.emit($event)\"\n (custom)=\"custom.emit($event)\"\n (userClickedRow)=\"emitUserRowClicked($event)\"\n (multipleSelectRow)=\"multipleSelectRow($event)\"\n ></tbody>\n</table>\n\n@if (isPagerDisplay()) {\n<ng2-smart-table-pager [source]=\"source()\" [perPageSelect]=\"perPageSelect()\">\n</ng2-smart-table-pager>\n}\n", styles: [":host{font-size:1rem}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep button,:host ::ng-deep input,:host ::ng-deep optgroup,:host ::ng-deep select,:host ::ng-deep textarea{color:inherit;font:inherit;margin:0}:host ::ng-deep table{line-height:1.5em;border-collapse:collapse;border-spacing:0;display:table;width:100%;max-width:100%;word-break:normal;word-break:keep-all;overflow:auto}:host ::ng-deep table tr th{font-weight:700}:host ::ng-deep table tr section{font-size:.75em;font-weight:700}:host ::ng-deep table tr td,:host ::ng-deep table tr th{font-size:.875em;margin:0;padding:.5em 1em}:host ::ng-deep a{color:#1e6bb8;text-decoration:none}:host ::ng-deep a:hover{text-decoration:underline}\n"] }]
3509
+ }] });
3529
3510
 
3530
3511
  /**
3531
3512
  * Generated bundle index. Do not edit.